/* ════════════════════════════════════════════════════════════════════════
   RUNNER SCREENS POLISH (Hal 2026-10-13) — Acquisitions, Trips, Watch detail,
   Quick Capture + Review, Money lists.
   Every selector is scoped to html.wf-is-runner (stamped by _wfApplyRunnerLockdown)
   or to the runner-only page ids, so no dealer / owner screen changes.
   Language = the runner Money page (#page-runner-money.rm2): bold title, ONE row of
   icon-tile KPI cards, two-column lists on desktop, 2-up KPI cards on phone with an
   odd last card spanning the row.
   Type law: uppercase card/section titles 700 + ~1.4px; row titles 600;
   amounts 700 sans tabular-nums; KPI labels 700 uppercase.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Card / section titles: one weight, one size, everywhere a runner looks ── */
html.wf-is-runner :is(#page-inventory-detail, #page-inv-add-simple, #page-inv-add-simple-review) .card-header-title,
html.wf-is-runner :is(#page-inventory-detail, #page-inv-add-simple, #page-inv-add-simple-review) .card-header > h2,
html.wf-is-runner :is(#page-inventory-detail, #page-inv-add-simple, #page-inv-add-simple-review) .card-header > h3 {
  font-family: var(--font-body) !important;
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.4px !important;
  text-transform: uppercase !important; line-height: 1.3 !important; color: var(--white);
}
html.wf-is-runner :is(#page-inventory-detail, #page-inv-add-simple, #page-inv-add-simple-review) .card-header-title > * { letter-spacing: inherit; }

/* ── 2. Page titles for Quick Capture + Review (were light serif 22px) ── */
html.wf-is-runner :is(#page-inv-add-simple, #page-inv-add-simple-review) .wizard-header-desktop > div:first-child > div:first-child {
  font-family: var(--font-body) !important;
  font-size: 32px !important; font-weight: 700 !important; letter-spacing: -0.5px !important; line-height: 1.1 !important; color: var(--white);
}
html.wf-is-runner :is(#page-inv-add-simple, #page-inv-add-simple-review) .wizard-header-desktop .text-muted { margin-top: 6px; font-size: 14px !important; }
html.wf-is-runner :is(#page-inv-add-simple, #page-inv-add-simple-review) .wizard-header-mobile > div {
  font-family: var(--font-body) !important; font-size: 17px !important; font-weight: 700 !important;
}
html.wf-is-runner :is(#page-inv-add-simple, #page-inv-add-simple-review) .page-content { max-width: 1240px; margin-left: auto; margin-right: auto; }
html.wf-is-runner #page-inv-add-simple .source-section-title.simple-wl-panel-title {
  font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase;
}
html.wf-is-runner #page-inv-add-simple .swl-brand-name { font-weight: 600; }

/* ── 3. Acquisitions (#page-inventory, runner) ── */
/* KPI row: one grid of equal cards; "Need details" is the 4th card (added by _invRunnerNeedCard,
   which also stamps .rp-kpis / .rp-kpi on the row and its cards). Inner order: icon, then body = label, value, sub. */
html.wf-is-runner #page-inventory .rp-kpis {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; gap: 14px !important; align-items: stretch !important;
  overflow: visible !important; padding: 0 !important; margin: 0 0 22px !important; background: none !important; border: 0 !important;
}
html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 14px; align-items: center; align-content: center;
  min-height: 92px; align-items: center !important; align-content: center !important; margin: 0 !important; padding: 16px 20px !important; border-radius: 14px !important; width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important;
  background: var(--bg-raised) !important; border: 1px solid var(--border) !important; box-shadow: none !important;
}
html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi[hidden] { display: none !important; }
html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi > :first-child { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi > :first-child svg { width: 18px; height: 18px; }
html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi > :nth-child(2) { min-width: 0; display: grid !important; gap: 3px; }
html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi > :nth-child(2) > :nth-child(1) {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.3px; text-transform: uppercase; color: var(--white) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi > :nth-child(2) > :nth-child(2) { font-size: 26px !important; font-weight: 700 !important; line-height: 1.15; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; margin: 0 !important; }
html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi > :nth-child(2) > :nth-child(3) { font-size: 12.5px !important; min-height: 0 !important; line-height: 1.35; white-space: normal !important; }
html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi > :nth-child(2) > :nth-child(3):empty { display: none; }
html.wf-is-runner #page-inventory .rp-kpis > [data-rp="need"] { cursor: pointer; }
html.wf-is-runner #page-inventory .rp-kpis > [data-rp="need"] > :first-child { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
html.wf-is-runner #page-inventory .rp-kpis > [data-rp="need"] button {
  appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--blue, var(--gold)); cursor: pointer; min-height: 0; min-width: 0; text-decoration: underline; text-underline-offset: 2px;
}
html.wf-is-runner #page-inventory .rp-kpis > [data-rp="need"] .rp-need-rule {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  width: 100%; margin-top: 3px; text-align: left; text-decoration: none;
}
html.wf-is-runner #page-inventory .rp-kpis > [data-rp="need"] .rp-need-rule > span { text-decoration: underline; text-underline-offset: 2px; }
html.wf-is-runner #page-inventory .rp-kpis > [data-rp="need"] .rp-need-rule > strong { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
html.wf-is-runner #page-inventory #inv-runner-missing[data-in-kpis] { display: none !important; }
html.wf-is-runner #page-inventory .inv-hero-title, html.wf-is-runner #page-inventory .inv-mobile-greeting { font-weight: 700 !important; }

/* List: two columns on desktop, no lone "Watch" header */
@media (min-width: 901px) {
  html.wf-is-runner #page-inventory #inv-list-card thead { display: none !important; }
  html.wf-is-runner #page-inventory #inv-list-card .table-wrap, html.wf-is-runner #page-inventory #inv-list-card table { display: block; width: 100%; }
  html.wf-is-runner #page-inventory #inventory-tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.wf-is-runner #page-inventory #inventory-tbody > tr { display: flex; align-items: center; min-width: 0; border-bottom: 1px solid var(--border); background: transparent !important; }
  html.wf-is-runner #page-inventory #inventory-tbody > tr:nth-child(odd) { border-right: 1px solid var(--border); }
  html.wf-is-runner #page-inventory #inventory-tbody > tr:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0 !important; }
  html.wf-is-runner #page-inventory #inventory-tbody > tr > td { display: block; align-self: center; background: transparent !important; border: 0 !important; padding: 10px 10px !important; min-width: 0; }
  html.wf-is-runner #page-inventory #inventory-tbody > tr > td:first-child { flex: 0 0 auto; padding-left: 14px !important; }
  html.wf-is-runner #page-inventory #inventory-tbody > tr > td:last-child { flex: 1 1 auto; }
  html.wf-is-runner body #page-inventory.jj-r01 #inventory-tbody > tr > td:nth-child(3) { height: auto !important; padding-top: 14px !important; padding-bottom: 14px !important; overflow: visible !important; }
  html.wf-is-runner #page-inventory #inventory-tbody > tr > td [style*="font-weight"], html.wf-is-runner #page-inventory #inventory-tbody > tr > td > div:first-child { font-weight: 600; }
  html.wf-is-runner #page-inventory #inventory-tbody > tr:last-child, html.wf-is-runner #page-inventory #inventory-tbody > tr:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
/* Phone: slim rows (thumb | name + ref | age), not 140px cards */
@media (max-width: 900px) {
  html.wf-is-runner #page-inventory #inventory-mobile-grid { gap: 8px !important; }
  html.wf-is-runner #page-inventory #inventory-mobile-grid > .inv-card {
    display: grid !important; grid-template-columns: 56px minmax(0, 1fr) auto !important; align-items: center; gap: 0 12px !important;
    padding: 10px 12px !important; min-height: 0 !important; border-radius: 12px !important;
  }
  html.wf-is-runner #page-inventory #inventory-mobile-grid > .inv-card .inv-card-thumb { width: 56px !important; height: 56px !important; min-height: 0 !important; aspect-ratio: 1; border-radius: 10px; }
  html.wf-is-runner #page-inventory #inventory-mobile-grid > .inv-card .inv-card-thumb-fallback { width: 28px !important; height: 28px !important; position: static; }
  html.wf-is-runner #page-inventory #inventory-mobile-grid > .inv-card .inv-card-thumb-fallback svg { width: 26px !important; height: 26px !important; }
  html.wf-is-runner #page-inventory #inventory-mobile-grid > .inv-card .inv-card-body { min-height: 0 !important; min-width: 0; align-self: center; }
  html.wf-is-runner #page-inventory #inventory-mobile-grid > .inv-card .inv-card-brand { font-weight: 600 !important; font-size: 15px !important; white-space: normal; }
  html.wf-is-runner #page-inventory #inventory-mobile-grid > .inv-card > :is(:last-child:not(.jj-problem-strip), .jj-fc-bottom:has(~ .jj-problem-strip)) { grid-column: 3 !important; grid-row: 1 !important; width: auto !important; border: 0 !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
}

/* ── 4. KPI cards 2-up on phone, odd last card spans the row (Acquisitions) ── */
@media (max-width: 600px) {
  html.wf-is-runner #page-inventory .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; gap: 10px !important; margin-bottom: 14px !important; scroll-snap-type: none; }
  html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi { grid-template-columns: minmax(0, 1fr) !important; row-gap: 8px; min-height: 0; padding: 12px 14px !important; border-radius: 12px !important; }
  html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi > :first-child { width: 32px; height: 32px; border-radius: 9px; }
  html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi > :first-child svg { width: 16px; height: 16px; }
  html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi > :nth-child(2) > :nth-child(1) { font-size: 10px !important; letter-spacing: .6px; white-space: normal; line-height: 1.25; }
  html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi > :nth-child(2) > :nth-child(2) { font-size: 20px !important; }
  html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi > :nth-child(2) > :nth-child(3) { font-size: 11.5px !important; }
  /* phone: the whole Need details card is the tap target (opens every piece that needs details); the per-rule links stay on desktop */
  html.wf-is-runner #page-inventory .rp-kpis > [data-rp="need"] > :nth-child(2) > :nth-child(3) { display: none !important; }
  html.wf-is-runner #page-inventory .rp-kpis > .rp-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 12px; align-items: center; }
}

/* Runner KPI layout owns both axes: the shared stats row uses column flow
   and the generic KPI rail can impose card widths/heights. Apply before the
   async Need details card arrives, too; no dependency on .rp-kpis stamping. */
html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important; grid-auto-columns: minmax(0, 1fr) !important;
  width: 100% !important; min-width: 0 !important; max-width: none !important;
  gap: 14px !important; align-items: stretch !important; box-sizing: border-box;
  overflow: visible !important; scroll-snap-type: none !important;
  padding: 0 !important; margin: 0 0 22px !important;
}
html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis > :is(.jj-stat, [data-rp="need"]) {
  display: grid !important; grid-template-columns: 40px minmax(0, 1fr) !important;
  column-gap: 14px; align-items: center !important; align-content: center !important;
  width: auto !important; min-width: 0 !important; max-width: none !important;
  min-height: 104px !important; height: auto !important; aspect-ratio: auto !important;
  grid-column: auto !important; flex: none !important; box-sizing: border-box;
  padding: 16px 20px !important; margin: 0 !important; border-radius: 14px !important;
  background: var(--bg-raised) !important; border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis > :is(.jj-stat, [data-rp="need"])[hidden] { display: none !important; }
html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis > :is(.jj-stat, [data-rp="need"]) > :nth-child(2) { min-width: 0; }
html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-k,
html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-s,
html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis > [data-rp="need"] > :nth-child(2) > :first-child,
html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis > [data-rp="need"] > :nth-child(2) > :nth-child(3) {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  overflow-wrap: break-word;
}
@media (max-width: 1100px) {
  html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis { gap: 10px !important; margin-bottom: 14px !important; }
  html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis > :is(.jj-stat, [data-rp="need"]) {
    grid-template-columns: minmax(0, 1fr) !important; row-gap: 8px;
    min-height: 112px !important; padding: 12px 14px !important; border-radius: 12px !important;
  }
}

/* ── 5. Trips (#page-runner-trips.rm2) — Money's language ── */
html.wf-is-runner #page-runner-trips.rm2 .rm2-wrap { max-width: 1240px; margin: 0 auto; }
html.wf-is-runner #page-runner-trips.rm2 .rt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 0 0 22px; }
html.wf-is-runner #page-runner-trips.rm2 .rt-head .rm2-head { margin: 0; }
html.wf-is-runner #page-runner-trips.rm2 .rt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
html.wf-is-runner #page-runner-trips.rm2 .rt-grid > .trip-card { margin: 0 !important; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px; box-shadow: none; overflow: hidden; }
html.wf-is-runner #page-runner-trips.rm2 .rt-grid > .trip-card .card-body { padding: 18px 22px; }
html.wf-is-runner #page-runner-trips.rm2 .rt-section { grid-column: 1 / -1; margin: 6px 0 -6px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--white); }
html.wf-is-runner #page-runner-trips.rm2 .trip-title { font-size: 15px; font-weight: 600; }
html.wf-is-runner #page-runner-trips.rm2 .trip-sub { font-size: 12.5px; }
html.wf-is-runner #page-runner-trips.rm2 .trip-figs { font-family: inherit; font-size: 12.5px; gap: 4px 16px; font-variant-numeric: tabular-nums; }
html.wf-is-runner #page-runner-trips.rm2 .trip-figs strong { font-weight: 700; }
html.wf-is-runner #page-runner-trips.rm2 .trip-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
html.wf-is-runner #page-runner-trips.rm2 .rt-empty { grid-column: 1 / -1; }
@media (max-width: 900px) { html.wf-is-runner #page-runner-trips.rm2 .rt-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  html.wf-is-runner #page-runner-trips.rm2 .rt-head { margin-bottom: 14px; align-items: center; }
  html.wf-is-runner #page-runner-trips.rm2 .rt-head > .btn { width: 100%; min-height: 44px; }
  html.wf-is-runner #page-runner-trips.rm2 .rt-grid { gap: 12px; }
  html.wf-is-runner #page-runner-trips.rm2 .rt-grid > .trip-card { border-radius: 12px; }
  html.wf-is-runner #page-runner-trips.rm2 .rt-grid > .trip-card .card-body { padding: 14px 16px; }
  html.wf-is-runner #page-runner-trips.rm2 .trip-head { gap: 8px 10px; }
  html.wf-is-runner #page-runner-trips.rm2 .trip-actions .btn { min-height: 44px; }
}

/* ── 6. Runner Money: "What you've spent" runs two columns on desktop ── */
@media (min-width: 901px) {
  html.wf-is-runner #page-runner-money.rm2 #runner-money-spend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; }
  html.wf-is-runner #page-runner-money.rm2 #runner-money-spend > .runner-money-row:last-child { border-bottom: 1px solid var(--border); }
  html.wf-is-runner #page-runner-money.rm2 #runner-money-spend > .runner-money-row:nth-last-child(-n+2):nth-child(odd):last-child,
  html.wf-is-runner #page-runner-money.rm2 #runner-money-spend > .runner-money-row:last-child { border-bottom: 0; }
}
html.wf-is-runner #page-runner-money.rm2 .runner-money-row.is-overdue, html.wf-is-runner #page-runner-money.rm2 .runner-money-row[class*="overdue"] { padding-left: 12px; }

/* ── 7. Watch detail, desktop: use the width (photos | specs, money | notes, attachments full width) ── */
@media (min-width: 1025px) {
  html.wf-is-runner #page-inventory-detail .page-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 20px; row-gap: 18px; }
  html.wf-is-runner #page-inventory-detail #inv-detail-header-bar { grid-column: 1 / -1 !important; margin-bottom: 0 !important; }
  /* 2026-10-18 (Hal): the left column is a real column again (photos, then Money right under it, then the rest), so an empty
     photo card no longer stretches to the height of the specs column and push Money down the page. */
  html.wf-is-runner #page-inventory-detail .inv-detail-left-col { display: flex !important; flex-direction: column; gap: 18px; grid-column: 1 !important; grid-row: 2 !important; align-self: start !important; min-width: 0; }
  html.wf-is-runner #page-inventory-detail .inv-detail-left-col > .card { margin: 0 !important; min-width: 0; }
  html.wf-is-runner #page-inventory-detail .inv-detail-right-col { grid-column: 2 !important; grid-row: 2 !important; align-self: start; }
  html.wf-is-runner #page-inventory-detail .inv-detail-delete-row { grid-row: 3 !important; }
  html.wf-is-runner #page-inventory-detail #inv-detail-photos .inv-photo-stage { min-height: 300px !important; }
  /* The visible library question needs a row before the photo/spec columns. */
  html.wf-is-runner #page-inventory-detail .page-content:has(> #inv-detail-libsuggest:not([hidden])) > :is(.inv-detail-left-col, .inv-detail-right-col) { grid-row: 3 !important; }
  html.wf-is-runner #page-inventory-detail .page-content:has(> #inv-detail-libsuggest:not([hidden])) > .inv-detail-delete-row { grid-row: 4 !important; }
}

/* ── 8. Review (phone): the Money payment row gives the amount and note equal halves
   (the 116px column clipped "Note – optional" and left the remove button floating) ── */
@media (max-width: 600px) {
  html.wf-is-runner #page-inv-add-simple-review .wf-ledger--edit,
  html.wf-is-runner #page-inv-add-simple-review .wf-ledger--edit.is-solo { --wf-lr-cols: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  html.wf-is-runner #page-inv-add-simple-review .wf-ledger--edit .runner-fund-remove { min-width: 36px; min-height: 44px; align-self: center; }
}

/* ── 9. Touch targets: spec value cells and single-line Money rows were under 44px on phone ── */
@media (max-width: 900px) {
  html.wf-is-runner #page-inventory-detail td.wf-spec-val { height: 44px; min-height: 44px; }
  html.wf-is-runner #page-inventory-detail .wf-spec-val { min-height: 44px; box-sizing: border-box; }
  html.wf-is-runner #page-runner-money.rm2 .runner-money-row .rm-head { min-height: 44px; }
}

/* ══ Round 2 (2026-10-13) ══ */
/* ── Trips: 6-col grid so every row is full. 3-up at 1200+, 2-up below; an odd last card spans its row ── */
html.wf-is-runner #page-runner-trips.rm2 .rt-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
html.wf-is-runner #page-runner-trips.rm2 .rt-grid > .trip-card { grid-column: span 2; }
@media (min-width: 1200px) {
  html.wf-is-runner #page-runner-trips.rm2 .rt-grid > .trip-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  html.wf-is-runner #page-runner-trips.rm2 .rt-grid > .trip-card:last-child:nth-child(3n+2) { grid-column: span 3; }
  html.wf-is-runner #page-runner-trips.rm2 .rt-grid > .trip-card:nth-last-child(2):nth-child(3n+1) { grid-column: span 3; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  html.wf-is-runner #page-runner-trips.rm2 .rt-grid > .trip-card { grid-column: span 3; }
  html.wf-is-runner #page-runner-trips.rm2 .rt-grid > .trip-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  html.wf-is-runner #page-runner-trips.rm2 .rt-grid { grid-template-columns: minmax(0, 1fr); }
  html.wf-is-runner #page-runner-trips.rm2 .rt-grid > .trip-card { grid-column: 1 / -1; }
}
/* Card head: title + chevron on one line (title ellipsizes); chips on their own row underneath */
html.wf-is-runner #page-runner-trips.rm2 .trip-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; }
html.wf-is-runner #page-runner-trips.rm2 .trip-head > div:first-child { min-width: 0; }
html.wf-is-runner #page-runner-trips.rm2 .trip-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.wf-is-runner #page-runner-trips.rm2 .trip-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.wf-is-runner #page-runner-trips.rm2 .trip-open-caret { grid-column: 2; grid-row: 1; font-size: 22px; margin: 0; }
html.wf-is-runner #page-runner-trips.rm2 .trip-chips { grid-column: 1 / -1; grid-row: 2; }

/* ── Watch detail, phone: Attachments = one clean row per kind (runner) ── */
@media (max-width: 900px) {
  html.wf-is-runner #inv-detail-attachments-card .card-header { flex-wrap: wrap; gap: 10px; }
  html.wf-is-runner #inv-detail-attachments-card #inv-attach-add-btns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  html.wf-is-runner #inv-detail-attachments-card #inv-attach-add-btns .btn { min-height: 44px; justify-content: center; margin: 0; }
  html.wf-is-runner #inv-detail-attachments-card .inv-attach-labelled { padding: 0 16px; }
  html.wf-is-runner #inv-detail-attachments-card .runner-doc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0; }
  html.wf-is-runner #inv-detail-attachments-card .runner-doc-row-label { grid-column: 1 / -1; flex: none; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
  html.wf-is-runner #inv-detail-attachments-card .runner-doc-row .btn { min-height: 44px; justify-content: center; margin: 0; }
}
@media (max-width: 900px) {
  html.wf-is-runner #inv-detail-attachments-card #inv-attach-add-btns > .btn { height: 44px; min-height: 44px; padding: 0 12px; font-size: 13px; box-sizing: border-box; }
  html.wf-is-runner #inv-detail-attachments-card .runner-doc-row .btn { height: 44px; box-sizing: border-box; font-size: 13px; }
  html.wf-is-runner #inv-detail-attachments-card #inv-detail-attachments { padding-top: 12px; }
}
@media (max-width: 900px) {
  html.wf-is-runner body #page-inventory-detail #inv-detail-attachments-card#inv-detail-attachments-card #inv-attach-add-btns#inv-attach-add-btns > .btn#inv-attach-add-btn,
  html.wf-is-runner body #page-inventory-detail #inv-detail-attachments-card#inv-detail-attachments-card #inv-attach-add-btns#inv-attach-add-btns > .btn { height: 44px !important; min-height: 44px !important; padding: 0 12px !important; font-size: 13px !important; font-weight: 500 !important; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Round 4 (2026-10-13): runner POP-UPS in the new style.
   Standing rule (Hal): eyebrow + bold sans title · bold uppercase labels · white rounded fields · no native selects
   (pills / choice sheet) · a coloured summary strip where it helps · wide on desktop · slim sheet on phone · never a
   dialog on top of a dialog. Every selector starts with html.wf-is-runner; the pop-ups a dealer sees are untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── shell: card on desktop ── */
html.wf-is-runner .modal.rp4-m {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 22px;
  padding: 30px 34px 26px; box-shadow: 0 24px 70px rgba(15, 24, 34, .22);
  max-height: calc(100dvh - 40px); overflow-y: auto;
}
html.wf-is-runner .modal.rp4-m > .modal-title {
  font-family: var(--font-body) !important; font-size: 30px !important; font-weight: 700 !important;
  letter-spacing: -0.5px; line-height: 1.12; color: var(--white); margin: 0 0 8px; padding-right: 8px;
}
/* eyebrow above the title */
html.wf-is-runner .modal.rp4-m > .modal-title::before {
  content: attr(data-eb); display: block; margin: 0 0 8px; font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--blue, var(--gold));
}
html.wf-is-runner #modal-trip-edit .modal > .modal-title::before, html.wf-is-runner #modal-trip-detail .modal > .modal-title::before { content: "Trips"; }
html.wf-is-runner #modal-runner-money .modal > .modal-title::before { content: "Money"; }
html.wf-is-runner #modal-runner-costs .modal > .modal-title::before { content: "Watch \00b7  Money"; }
html.wf-is-runner .modal.rp4-m > .modal-sub { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 18px; }
html.wf-is-runner .modal.rp4-m .rp4-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--blue, var(--gold)); margin: 0 0 8px; }

/* summary strip */
html.wf-is-runner .modal.rp4-m .lf-sum.rp4-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
html.wf-is-runner .modal.rp4-m .lf-sum-t { padding: 14px 16px; border-radius: 16px; }
html.wf-is-runner .modal.rp4-m .lf-sum-l { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; }
html.wf-is-runner .modal.rp4-m .lf-sum-v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* labels, fields, buttons */
html.wf-is-runner .modal.rp4-m .form-group { margin-bottom: 18px; }
html.wf-is-runner .modal.rp4-m .form-group > label, html.wf-is-runner .modal.rp4-m label.rp4-lbl {
  display: block; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--off-white);
}
html.wf-is-runner .modal.rp4-m :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"]), textarea) {
  background: var(--bg-raised) !important; border: 1px solid var(--border) !important; border-radius: 12px !important;
  min-height: 46px; padding: 0 14px; font-size: 15px; font-weight: 500; color: var(--white); box-shadow: none;
}
html.wf-is-runner .modal.rp4-m textarea { padding: 12px 14px; min-height: 92px; line-height: 1.5; resize: vertical; }
html.wf-is-runner .modal.rp4-m :is(input, textarea):focus {
  border-color: var(--blue, var(--gold)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue, var(--gold)) 16%, transparent) !important; outline: 0;
}
html.wf-is-runner .modal.rp4-m :is(input, textarea)::placeholder { color: var(--muted); font-weight: 400; }
html.wf-is-runner .modal.rp4-m .qi-datepicker-trigger {
  background: var(--bg-raised) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; min-height: 46px; padding: 0 14px 0 8px !important; gap: 12px !important;
}
html.wf-is-runner .modal.rp4-m .qi-datepicker-trigger .qi-dp-icon { width: 32px !important; height: 32px !important; padding: 8px; box-sizing: border-box; border-radius: 9px; flex: 0 0 32px; color: var(--blue, var(--gold)); background: color-mix(in srgb, var(--blue, var(--gold)) 10%, transparent); }
html.wf-is-runner .modal.rp4-m .qi-datepicker-trigger .qi-dp-text { font-size: 15px; font-weight: 600; color: var(--white); }
html.wf-is-runner .modal.rp4-m .qi-datepicker-trigger .qi-dp-placeholder { font-weight: 500; color: var(--muted); }
html.wf-is-runner .modal.rp4-m .btn { min-height: 46px; border-radius: 12px; font-size: 14.5px; font-weight: 600; padding: 0 22px; }
html.wf-is-runner .modal.rp4-m .btn.btn-gold, html.wf-is-runner .modal.rp4-m .btn.btn-primary {
  background: var(--blue, var(--gold)) !important; border-color: var(--blue, var(--gold)) !important; color: #fff !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--blue, var(--gold)) 28%, transparent);
}
html.wf-is-runner .modal.rp4-m .btn.btn-ghost { background: var(--bg-raised); border: 1px solid var(--border); color: var(--white); }

/* ── pills / chips: the replacement for every native dropdown ── */
html.wf-is-runner .rp4-native { display: none !important; }
html.wf-is-runner .rp4-sel { min-width: 0; }
html.wf-is-runner .rp4-sel.is-disabled { opacity: .55; pointer-events: none; }
html.wf-is-runner .rp4-sel .rp4-sel-panel { display: flex; flex-wrap: wrap; gap: 8px; }
html.wf-is-runner .rp4-pill {
  appearance: none; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-raised);
  color: var(--white); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
html.wf-is-runner .rp4-pill:hover { border-color: var(--blue, var(--gold)); }
html.wf-is-runner .rp4-pill.is-on { background: var(--blue, var(--gold)); border-color: var(--blue, var(--gold)); color: #fff; }
html.wf-is-runner .rp4-sel.is-list .rp4-sel-trigger {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-raised); color: var(--white); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-align: left;
}
html.wf-is-runner .rp4-sel-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.wf-is-runner .rp4-sel-v.is-empty { color: var(--muted); font-weight: 500; }
html.wf-is-runner .rp4-sel-chev { width: 8px; height: 8px; border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
html.wf-is-runner .rp4-sel.is-list.is-open .rp4-sel-chev { transform: rotate(-135deg) translateY(-2px); }
html.wf-is-runner .rp4-sel.is-list .rp4-sel-panel { display: none; margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-raised); }
html.wf-is-runner .rp4-sel.is-list.is-open .rp4-sel-panel { display: flex; }
html.wf-is-runner .rp4-fieldwrap { display: grid; gap: 8px; min-width: 0; }
html.wf-is-runner .rp4-chips .rp4-pill { min-height: 32px; padding: 0 12px; font-size: 12.5px; }

/* ── Trips: the Add / Edit trip pop-up ── */
html.wf-is-runner #modal-trip-edit .modal.trip-modal { width: min(1040px, calc(100vw - 48px)); max-width: 1040px; }
@media (min-width: 680px) {
  html.wf-is-runner #modal-trip-edit .trip-form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 0 40px; }
}
html.wf-is-runner #modal-trip-edit .trip-totals { display: none; }
html.wf-is-runner #modal-trip-edit .trip-exp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 10px; align-items: center; padding: 14px; margin: 0 0 12px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 16px;
}
html.wf-is-runner #modal-trip-edit .trip-exp-row > * { min-width: 0; margin: 0; }
html.wf-is-runner #modal-trip-edit .trip-exp-row .tx-label { grid-column: 1; flex: none; min-height: 46px; }
html.wf-is-runner #modal-trip-edit .trip-exp-row .tx-amount { grid-column: 2; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
html.wf-is-runner #modal-trip-edit .trip-exp-row .runner-fundedby-toggle { grid-column: 1 / -1; display: inline-flex; justify-self: start; border: 1px solid var(--border); border-radius: 12px; padding: 3px; background: var(--bg-panel); }
html.wf-is-runner #modal-trip-edit .trip-exp-row .runner-fundedby-toggle button { min-height: 38px; padding: 0 18px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
html.wf-is-runner #modal-trip-edit .trip-exp-row .runner-fundedby-toggle button.active { background: var(--blue, var(--gold)); color: #fff; }
html.wf-is-runner #modal-trip-edit .trip-exp-row .rp4-sel { grid-column: 1 / -1; }
html.wf-is-runner #modal-trip-edit .trip-exp-row .tx-note { grid-column: 1; }
html.wf-is-runner #modal-trip-edit .trip-exp-row .runner-fund-remove { grid-column: 2; justify-self: end; width: 46px; height: 46px; min-height: 46px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--red); display: inline-flex; align-items: center; justify-content: center; }
html.wf-is-runner #modal-trip-edit .qp-expense-add-btn { min-height: 46px; width: 100%; justify-content: center; border-radius: 12px; font-weight: 600; }
html.wf-is-runner #modal-trip-edit .modal > div:last-child { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--border); gap: 10px; }
html.wf-is-runner #modal-trip-edit .wf-net-presets button, html.wf-is-runner #modal-trip-edit [class*="net-preset"] button { min-height: 36px; border-radius: 999px; font-weight: 600; }

/* ── detail pop-ups (trip detail, money detail): two columns of sections on desktop ── */
html.wf-is-runner #modal-trip-detail .modal.trip-detail-modal, html.wf-is-runner #modal-runner-money .modal.trip-detail-modal { width: min(980px, calc(100vw - 48px)); max-width: 980px; }
html.wf-is-runner .modal.rp4-m .rp4-cols { columns: 2; column-gap: 48px; }
html.wf-is-runner .modal.rp4-m .rp4-sec { break-inside: avoid; margin: 0 0 18px; }
html.wf-is-runner .modal.rp4-m .trip-detail-head {
  margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--white);
}
html.wf-is-runner .modal.rp4-m .trip-detail-row { padding: 11px 0; font-size: 14px; }
html.wf-is-runner .modal.rp4-m .trip-detail-row .tdr-label { font-weight: 600; }
html.wf-is-runner .modal.rp4-m .trip-detail-row .tdr-value { font-family: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
html.wf-is-runner .modal.rp4-m .trip-detail-row .tdr-sub { font-weight: 400; font-size: 12px; }
html.wf-is-runner #modal-trip-detail .modal > div:last-child, html.wf-is-runner #modal-runner-money .modal > div:last-child { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--border); }

/* ── choice sheet (replaces a native dropdown: Location and every other spec picker) ── */
html.wf-is-runner .modal.rp4-choice { width: min(760px, calc(100vw - 48px)); max-width: 760px; }
html.wf-is-runner .rp4-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 6px 0 20px; }
html.wf-is-runner .rp4-tile {
  appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--bg-raised); color: var(--white); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
html.wf-is-runner .rp4-tile:hover { border-color: var(--blue, var(--gold)); }
html.wf-is-runner .rp4-tile .rp4-tile-tick { width: 18px; height: 18px; flex: 0 0 18px; visibility: hidden; color: #fff; }
html.wf-is-runner .rp4-tile.is-on { background: var(--blue, var(--gold)); border-color: var(--blue, var(--gold)); color: #fff; }
html.wf-is-runner .rp4-tile.is-on .rp4-tile-tick { visibility: visible; }
html.wf-is-runner .rp4-tile.is-add { border-style: dashed; color: var(--blue, var(--gold)); }
html.wf-is-runner .rp4-tile.is-clear { color: var(--red); }
html.wf-is-runner .rp4-foot { display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--border); }
html.wf-is-runner .rp4-choice-ov { z-index: 10060; }

/* ── confirm pop-ups (delete trip, delete note, remove attachment, every other confirm a runner sees) ── */
html.wf-is-runner .modal.ui-confirm, html.wf-is-runner .modal.ui-confirm-delete {
  width: 520px; max-width: calc(100vw - 32px); background: var(--bg-panel); border: 1px solid var(--border); border-radius: 22px;
  box-shadow: 0 24px 70px rgba(15, 24, 34, .22);
}
html.wf-is-runner .modal.ui-confirm::before, html.wf-is-runner .modal.ui-confirm-delete::before, html.wf-is-runner .modal.ui-confirm .uic-corner, html.wf-is-runner .modal.ui-confirm-delete .uic-corner { display: none !important; }
html.wf-is-runner .modal.ui-confirm .uic-head, html.wf-is-runner .modal.ui-confirm-delete .uic-head { padding: 28px 30px 10px; gap: 16px; align-items: center; }
html.wf-is-runner .modal.ui-confirm .uic-icon, html.wf-is-runner .modal.ui-confirm-delete .uic-icon {
  width: 48px; height: 48px; border-radius: 14px; border: 0; box-shadow: none; background: color-mix(in srgb, var(--blue, var(--gold)) 12%, transparent); color: var(--blue, var(--gold));
}
html.wf-is-runner .modal.ui-confirm-delete .uic-icon { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
html.wf-is-runner .modal.ui-confirm .uic-eyebrow, html.wf-is-runner .modal.ui-confirm-delete .uic-eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--blue, var(--gold)); opacity: 1; margin-bottom: 6px;
}
html.wf-is-runner .modal.ui-confirm-delete .uic-eyebrow { color: var(--red); }
html.wf-is-runner .modal.ui-confirm .uic-eyebrow::before, html.wf-is-runner .modal.ui-confirm .uic-eyebrow::after,
html.wf-is-runner .modal.ui-confirm-delete .uic-eyebrow::before, html.wf-is-runner .modal.ui-confirm-delete .uic-eyebrow::after { display: none; }
html.wf-is-runner .modal.ui-confirm .uic-title, html.wf-is-runner .modal.ui-confirm-delete .uic-title {
  font-family: var(--font-body); font-size: 26px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.12; color: var(--white);
}
html.wf-is-runner .modal.ui-confirm .uic-divider, html.wf-is-runner .modal.ui-confirm-delete .uic-divider, html.wf-is-runner .modal.ui-confirm .uic-footer::before, html.wf-is-runner .modal.ui-confirm-delete .uic-footer::before { display: none; }
html.wf-is-runner .modal.ui-confirm .uic-body, html.wf-is-runner .modal.ui-confirm-delete .uic-body { padding: 6px 30px 14px; }
html.wf-is-runner .modal.ui-confirm .uic-body-text, html.wf-is-runner .modal.ui-confirm-delete .uic-body-text { font-size: 15px; line-height: 1.55; color: var(--off-white); }
html.wf-is-runner .modal.ui-confirm .uic-hints li, html.wf-is-runner .modal.ui-confirm-delete .uic-hints li { font-size: 13px; color: var(--muted); padding-left: 18px; }
html.wf-is-runner .modal.ui-confirm .uic-hints li::before, html.wf-is-runner .modal.ui-confirm-delete .uic-hints li::before { width: 5px; height: 5px; border-radius: 50%; transform: none; top: 10px; left: 3px; background: var(--muted); opacity: .8; }
html.wf-is-runner .modal.ui-confirm .uic-footer, html.wf-is-runner .modal.ui-confirm-delete .uic-footer { padding: 6px 30px 26px; gap: 10px; background: transparent; }
html.wf-is-runner .modal.ui-confirm .uic-btn, html.wf-is-runner .modal.ui-confirm-delete .uic-btn { min-height: 46px; border-radius: 12px; font-size: 14.5px; font-weight: 600; padding: 0 22px; }
html.wf-is-runner .modal.ui-confirm .uic-btn-ghost, html.wf-is-runner .modal.ui-confirm-delete .uic-btn-ghost { background: var(--bg-raised); }
html.wf-is-runner .modal.ui-confirm .uic-btn-primary { background: var(--blue, var(--gold)); border-color: var(--blue, var(--gold)); color: #fff; }

/* ── Edit watch (opened from Notes / Photos on the watch page) ── */
html.wf-is-runner #modal-edit-inventory > .modal { border-radius: 22px !important; border: 1px solid var(--border) !important; border-left: 1px solid var(--border) !important; background: var(--bg-panel) !important; box-shadow: 0 24px 70px rgba(15, 24, 34, .22) !important; }
html.wf-is-runner #modal-edit-inventory .edit-inv-header { padding: 28px 34px 18px !important; border-bottom: 1px solid var(--border) !important; background: none !important; }
html.wf-is-runner #modal-edit-inventory .edit-inv-header .modal-sub {
  font-family: var(--font-body) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 2px !important; color: var(--blue, var(--gold)) !important; margin-bottom: 8px !important;
}
html.wf-is-runner #modal-edit-inventory .edit-inv-header .modal-title {
  font-family: var(--font-body) !important; font-size: 30px !important; font-weight: 700 !important; font-style: normal !important; letter-spacing: -0.5px !important; line-height: 1.12 !important;
}
html.wf-is-runner #modal-edit-inventory .edit-inv-body { padding: 22px 34px !important; }
html.wf-is-runner #modal-edit-inventory details.edit-inv-section { border-radius: 16px !important; border: 1px solid var(--border) !important; margin-bottom: 12px !important; }
html.wf-is-runner #modal-edit-inventory details.edit-inv-section > summary.edit-inv-drawer-summary { padding: 18px 22px !important; align-items: center !important; }
html.wf-is-runner #modal-edit-inventory .edit-inv-drawer-title { font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; font-style: normal !important; color: var(--white) !important; }
html.wf-is-runner #modal-edit-inventory .edit-inv-drawer-title::after, html.wf-is-runner #modal-edit-inventory details.edit-inv-section > summary::before { display: none !important; }
html.wf-is-runner #modal-edit-inventory .edit-inv-section .form-group > label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.3px !important; text-transform: uppercase; color: var(--off-white); margin-bottom: 8px; }
html.wf-is-runner #modal-edit-inventory .edit-inv-section :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), textarea) { background: var(--bg-raised) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; min-height: 46px; padding: 0 14px; font-size: 15px; font-weight: 500; }
html.wf-is-runner #modal-edit-inventory .edit-inv-section textarea { padding: 12px 14px; min-height: 92px; }
html.wf-is-runner #modal-edit-inventory .modal-footer { padding: 16px 34px 22px; border-top: 1px solid var(--border); gap: 10px; margin: 0; }
html.wf-is-runner #modal-edit-inventory .modal-footer .btn { min-height: 46px; border-radius: 12px; font-weight: 600; }
html.wf-is-runner #modal-edit-inventory .modal-footer .btn-primary { background: var(--blue, var(--gold)); border-color: var(--blue, var(--gold)); color: #fff; }

/* ── Money & Pricing (edit the watch's money): the ledger rows, two lines each ── */
html.wf-is-runner #modal-runner-costs .modal.rp4-m { width: min(820px, calc(100vw - 48px)) !important; max-width: 820px !important; }
html.wf-is-runner #modal-runner-costs .wf-lg-head { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--white); }
html.wf-is-runner #modal-runner-costs .wf-lr-cols { display: none; }
html.wf-is-runner #modal-runner-costs .wf-ledger--edit .wf-lr {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: center; padding: 14px; margin: 0 0 12px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 16px;
}
html.wf-is-runner #modal-runner-costs .wf-ledger--edit .wf-lr > * { min-width: 0; margin: 0; }
html.wf-is-runner #modal-runner-costs .wf-lr .runner-fundedby-toggle { grid-column: 1; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; }
html.wf-is-runner #modal-runner-costs .wf-lr .runner-fundedby-toggle .rp4-sel { flex: 1; }
html.wf-is-runner #modal-runner-costs .wf-lr .rx-amount { grid-column: 2; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
html.wf-is-runner #modal-runner-costs .wf-lr .rp4-fieldwrap { grid-column: 1 / -1; }
html.wf-is-runner #modal-runner-costs .wf-lr .rx-note, html.wf-is-runner #modal-runner-costs .wf-lr .rx-fnote { grid-column: 1; }
html.wf-is-runner #modal-runner-costs .wf-lr .runner-fund-remove { grid-column: 2; justify-self: end; width: 46px; height: 46px; min-height: 46px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--red); display: inline-flex; align-items: center; justify-content: center; }
html.wf-is-runner #modal-runner-costs .wf-lr .rf-split { grid-column: 1 / -1; }
html.wf-is-runner #modal-runner-costs .wf-lr .wf-chip-av { display: none; }
html.wf-is-runner #modal-runner-costs .wf-lg-foot { margin-top: 6px; }
html.wf-is-runner #modal-runner-costs .qp-expense-add-btn { min-height: 46px; border-radius: 12px; font-weight: 600; }

/* ── menus on the watch page (⋯ Notes / Photos) ── */
html.wf-is-runner .wfwd-menu { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 44px rgba(15, 24, 34, .18); padding: 8px; min-width: 230px; }
html.wf-is-runner .wfwd-menu-item { min-height: 46px; padding: 0 14px; border-radius: 10px; font-size: 14.5px; font-weight: 600; }

/* ── phone: a slim bottom sheet ── */
@media (max-width: 768px) {
  html.wf-is-runner .modal-overlay:has(> .modal.rp4-m) { align-items: flex-end; }
  html.wf-is-runner .modal.rp4-m {
    width: 100% !important; max-width: none !important; margin: 0; border-radius: 22px 22px 0 0 !important; max-height: 92dvh;
    padding: 12px 18px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 40px rgba(15, 24, 34, .24);
  }
  html.wf-is-runner .modal.rp4-m::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 999px; background: var(--border); margin: 0 auto 16px; }
  html.wf-is-runner .modal.rp4-m > .modal-title { font-size: 24px !important; }
  html.wf-is-runner .modal.rp4-m .lf-sum.rp4-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
  html.wf-is-runner .modal.rp4-m .lf-sum.rp4-sum .lf-sum-t:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html.wf-is-runner .modal.rp4-m .lf-sum-t { padding: 10px 12px; border-radius: 14px; }
  html.wf-is-runner .modal.rp4-m .lf-sum-v { font-size: 18px; }
  html.wf-is-runner .modal.rp4-m .rp4-cols { columns: 1; }
  html.wf-is-runner .rp4-pill { min-height: 44px; }
  html.wf-is-runner .rp4-chips .rp4-pill { min-height: 44px; }
  html.wf-is-runner .rp4-tiles { grid-template-columns: 1fr; gap: 8px; }
  html.wf-is-runner .rp4-tile { min-height: 52px; }
  html.wf-is-runner #modal-trip-edit .trip-exp-row, html.wf-is-runner #modal-runner-costs .wf-ledger--edit .wf-lr { grid-template-columns: minmax(0, 1fr) 118px; padding: 12px; }
  html.wf-is-runner #modal-trip-edit .trip-exp-row .runner-fundedby-toggle button { min-height: 44px; }
  html.wf-is-runner #modal-trip-edit .modal > div:last-child, html.wf-is-runner #modal-trip-detail .modal > div:last-child, html.wf-is-runner #modal-runner-money .modal > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
  html.wf-is-runner #modal-trip-detail .modal > div:last-child .btn, html.wf-is-runner #modal-runner-money .modal > div:last-child .btn { width: 100%; }
  html.wf-is-runner .modal-overlay:has(> .modal.ui-confirm:not(:has(.uic-fields))) { align-items: center; }
  html.wf-is-runner .modal.ui-confirm:not(:has(.uic-fields)), html.wf-is-runner .modal.ui-confirm-delete:not(:has(.uic-fields)) { width: auto; max-width: 420px; margin: 16px; border-radius: 22px; }
  html.wf-is-runner .modal.ui-confirm .uic-head, html.wf-is-runner .modal.ui-confirm-delete .uic-head { padding: 22px 22px 8px; }
  html.wf-is-runner .modal.ui-confirm .uic-title, html.wf-is-runner .modal.ui-confirm-delete .uic-title { font-size: 22px; }
  html.wf-is-runner .modal.ui-confirm .uic-body, html.wf-is-runner .modal.ui-confirm-delete .uic-body { padding: 4px 22px 12px; }
  html.wf-is-runner .modal.ui-confirm .uic-footer, html.wf-is-runner .modal.ui-confirm-delete .uic-footer { padding: 6px 22px 22px; flex-direction: column-reverse; }
  html.wf-is-runner .modal.ui-confirm .uic-btn, html.wf-is-runner .modal.ui-confirm-delete .uic-btn { width: 100%; min-height: 48px; }
  html.wf-is-runner #modal-edit-inventory > .modal { border-radius: 22px 22px 0 0 !important; }
  html.wf-is-runner #modal-edit-inventory .edit-inv-header { padding: 18px 18px 14px !important; }
  html.wf-is-runner #modal-edit-inventory .edit-inv-header .modal-title { font-size: 24px !important; }
  html.wf-is-runner #modal-edit-inventory .edit-inv-body { padding: 14px 14px !important; }
  html.wf-is-runner #modal-edit-inventory .modal-footer { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
}
html.wf-is-runner .modal.rp4-choice > .modal-title::before { display: none; }
html.wf-is-runner .modal.rp4-m textarea { height: auto !important; min-height: 92px !important; }
html.wf-is-runner .modal.ui-confirm:has(.uic-btn-danger) .uic-icon { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
html.wf-is-runner .modal.ui-confirm:has(.uic-btn-danger) .uic-eyebrow { color: var(--red); }

/* ── Edit watch: drop the tiny "Section 04" labels, centre the title and chevron ── */
html.wf-is-runner #modal-edit-inventory .edit-inv-drawer-title::before { display: none !important; }
html.wf-is-runner #modal-edit-inventory .edit-inv-drawer-chevron { margin-top: 0 !important; }
html.wf-is-runner #modal-edit-inventory details.edit-inv-section > summary.edit-inv-drawer-summary { min-height: 56px !important; }
html.wf-is-runner #modal-edit-inventory .edit-inv-drawer-body { padding: 8px 22px 20px; }

/* ── Money & Pricing: footer row ── */
html.wf-is-runner #modal-runner-costs .modal.rp4-m > div:last-child { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); gap: 10px; }
@media (max-width: 768px) { html.wf-is-runner #modal-runner-costs .modal.rp4-m > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr; } }

/* ── "Add from your phone" + "Photo from the Watch Library": same eyebrow / title / field language ── */
html.wf-is-runner .modal.wf-ppl-modal:not(.wf-ppl-inline) .wf-ppl-title, html.wf-is-runner #wf-libphoto-modal .modal-title {
  font-family: var(--font-body) !important; font-size: 30px; font-weight: 700 !important; letter-spacing: -0.5px; line-height: 1.12;
}
html.wf-is-runner .modal.wf-ppl-modal:not(.wf-ppl-inline) .wf-ppl-title::before, html.wf-is-runner #wf-libphoto-modal .modal-title::before {
  display: block; margin: 0 0 8px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--blue, var(--gold));
}
html.wf-is-runner .modal.wf-ppl-modal:not(.wf-ppl-inline) .wf-ppl-title::before { content: "Watch \00b7  From your phone"; }
html.wf-is-runner #wf-libphoto-modal .modal-title::before { content: "Watch \00b7  Photos"; }
html.wf-is-runner .modal.wf-ppl-modal .wf-ppl-lbl { font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--off-white); }
html.wf-is-runner .modal.wf-ppl-modal .form-input { min-height: 46px; border-radius: 12px; background: var(--bg-raised); border: 1px solid var(--border); font-size: 15px; font-weight: 500; }
html.wf-is-runner .modal.wf-ppl-modal .wf-ppl-btn { min-height: 46px; border-radius: 12px; font-weight: 600; }
html.wf-is-runner #wf-libphoto-modal .modal { border-radius: 22px; padding: 30px 34px 26px; width: min(960px, calc(100vw - 48px)) !important; max-width: 960px !important; box-shadow: 0 24px 70px rgba(15, 24, 34, .22); }
html.wf-is-runner #wf-libphoto-modal input[type="search"] { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; min-height: 46px; font-size: 15px; font-weight: 500; }
@media (max-width: 768px) {
  html.wf-is-runner #wf-libphoto-modal.modal-overlay { align-items: flex-end; }
  html.wf-is-runner #wf-libphoto-modal .modal { width: 100% !important; max-width: none !important; border-radius: 22px 22px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px)); max-height: 92dvh; }
  html.wf-is-runner #wf-libphoto-modal .modal-title { font-size: 24px; }
  html.wf-is-runner .modal.wf-ppl-modal:not(.wf-ppl-inline) .wf-ppl-title { font-size: 24px; }
}
html.wf-is-runner .modal.rp4-m .qi-datepicker-trigger { justify-content: flex-start; text-align: left; }
html.wf-is-runner .modal.rp4-m .qi-datepicker-trigger .qi-dp-text, html.wf-is-runner .modal.rp4-m .qi-datepicker-trigger .qi-dp-placeholder { flex: 1; text-align: left; }
@media (max-width: 768px) {
  html.wf-is-runner .modal.rp4-m .lf-sum.rp4-sum .lf-sum-t { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
  html.wf-is-runner .modal.rp4-m .lf-sum.rp4-sum .lf-sum-ic { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; }
  html.wf-is-runner .modal.rp4-m .lf-sum.rp4-sum .lf-sum-l { white-space: normal; font-size: 10px; letter-spacing: .6px; line-height: 1.2; }
  html.wf-is-runner .modal.rp4-m .lf-sum.rp4-sum .lf-sum-v { font-size: 17px; overflow: visible; text-overflow: clip; }
}

/* Money & Pricing + trip rows: explicit rows, so the older phone placement (.rf-amount / .rf-method / .rf-note) can't reshuffle them */
html.wf-is-runner #modal-runner-costs .wf-lr .runner-fundedby-toggle { grid-row: 1; }
html.wf-is-runner #modal-runner-costs .wf-lr .rx-amount { grid-row: 1; }
html.wf-is-runner #modal-runner-costs .wf-lr .rp4-fieldwrap { grid-row: 2; }
html.wf-is-runner #modal-runner-costs .wf-lr .rx-note, html.wf-is-runner #modal-runner-costs .wf-lr .rx-fnote { grid-row: 3; }
html.wf-is-runner #modal-runner-costs .wf-lr .runner-fund-remove { grid-row: 3; }
html.wf-is-runner #modal-runner-costs .wf-lr .rf-split { grid-row: 4; }
html.wf-is-runner #modal-trip-edit .trip-exp-row .tx-label, html.wf-is-runner #modal-trip-edit .trip-exp-row .tx-amount { grid-row: 1; }
html.wf-is-runner #modal-trip-edit .trip-exp-row .runner-fundedby-toggle { grid-row: 2; }
html.wf-is-runner #modal-trip-edit .trip-exp-row .rp4-sel { grid-row: 3; }
html.wf-is-runner #modal-trip-edit .trip-exp-row .tx-note, html.wf-is-runner #modal-trip-edit .trip-exp-row .runner-fund-remove { grid-row: 4; }
@media (max-width: 768px) {
  html.wf-is-runner #modal-runner-costs .modal.rp4-m { width: 100% !important; max-width: none !important; }
  html.wf-is-runner #modal-edit-inventory .form-group:has(> .rp4-sel), html.wf-is-runner #modal-edit-inventory .form-group:has(> .rp4-fieldwrap) { grid-column: 1 / -1; }
}
/* the totals are in the strip at the top now: the ledger footer scrolls with the rows instead of covering the Add buttons */
html.wf-is-runner #modal-runner-costs .wf-ledger--edit .wf-lg-foot { position: static; box-shadow: none; }
html.wf-is-runner #modal-runner-costs .wf-ledger--edit .wf-lg-foot::after { display: none; }
/* Add / Edit trip: tighter vertical rhythm so Cancel / Add trip are on screen at 900px tall */
@media (min-width: 769px) {
  html.wf-is-runner #modal-trip-edit .modal.rp4-m { padding: 24px 34px 20px; }
  html.wf-is-runner #modal-trip-edit .modal.rp4-m .lf-sum.rp4-sum { margin-bottom: 16px; }
  html.wf-is-runner #modal-trip-edit .modal.rp4-m .form-group { margin-bottom: 12px; }
  html.wf-is-runner #modal-trip-edit .modal.rp4-m textarea { min-height: 64px !important; }
  html.wf-is-runner #modal-trip-edit .modal.rp4-m > .modal-sub { margin-bottom: 12px; }
}

/* Payment method: pills are the choice; the free-text box is only behind "Other" (round 5) */
html.wf-is-runner .rp4-fieldwrap.is-method:not(.is-other) > input { display: none !important; }

/* With Shipping on, its ledger grid puts Method and Note side by side ("how note note"). The runner's method pills need the
   full line, so the note goes under them (same as Shipping's own tap-row method). */
html.wf-is-runner.wf-ship-on #modal-runner-costs .wf-ledger--edit .runner-fund-row > .rp4-fieldwrap.is-method { grid-area: how; min-width: 0; }
html.wf-is-runner.wf-ship-on #modal-runner-costs .wf-ledger--edit .runner-fund-row:has(> .rp4-fieldwrap.is-method) { grid-template-areas: "who amt rm" "how how how" "note note note"; }
html.wf-is-runner.wf-ship-on #modal-runner-costs .wf-ledger--edit.is-solo .runner-fund-row:has(> .rp4-fieldwrap.is-method) { grid-template-areas: "amt rm" "how how" "note note"; }
html.wf-is-runner.wf-ship-on #modal-runner-costs .rp4-fieldwrap.is-method > input { grid-area: auto; width: 100%; }
/* ── round 6 ── */
/* Trip detail on a phone: Edit trip / Close stay pinned to the bottom of the sheet while the sections scroll */
@media (max-width: 768px) {
  html.wf-is-runner #modal-trip-detail .modal.rp4-m > div:last-child {
    position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom, 0px)); z-index: 3;
    margin: 10px -18px calc(-18px - env(safe-area-inset-bottom, 0px)); padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-panel); border-top: 1px solid var(--border); box-shadow: 0 -8px 18px rgba(15, 24, 34, .08);
  }
}
/* Money & Pricing footer (TOTAL / paid tally / OWED): same type as the other new-style labels and amounts */
html.wf-is-runner #modal-runner-costs .wf-lg-total { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
html.wf-is-runner #modal-runner-costs .wf-lg-total .wf-lg-amt,
html.wf-is-runner #modal-runner-costs .wf-lg-owed .wf-lg-amt,
html.wf-is-runner #modal-runner-costs .wf-lg-owed.is-none .wf-lg-amt { font-family: inherit; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
html.wf-is-runner #modal-runner-costs .wf-lg-owed { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--white); }
html.wf-is-runner #modal-runner-costs .wf-lg-owed.is-none .wf-lg-amt { color: var(--muted); }
html.wf-is-runner #modal-runner-costs .wf-lg-tally { font-size: 13px; font-weight: 600; }
html.wf-is-runner #modal-runner-costs .wf-lg-tally-item b { font-family: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
/* "Other" payment method: the free-text box opens UNDER the pills it belongs to, not above them */
html.wf-is-runner .rp4-fieldwrap.is-method > .rp4-chips { order: 1; }
html.wf-is-runner .rp4-fieldwrap.is-method > input { order: 2; }

/* runner Money page: the "Card" lines */
html.wf-is-runner .rm2-cc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
html.wf-is-runner .rm2-cc-row:last-child { border-bottom: 0; }
html.wf-is-runner .rm2-cc-t { font-size: 15px; font-weight: 600; min-width: 0; }
html.wf-is-runner .rm2-cc-t small { display: block; font-size: 12px; font-weight: 500; color: var(--off-white); margin-top: 2px; }
html.wf-is-runner .rm2-cc-a { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.wf-is-runner #runner-money-cardcharges { margin-bottom: 18px; }

/* F10 (jj-sync-1026 verify), KPI law: the runner's Acquisitions cards are ONE row, never a 2x2 grid. Desktop: the four
   share the row. Tablet and phone: one sliding row of equal, wide near-square cards (two and a bit on screen),
   every card the same build: icon on the left, label, figure. Labels wrap between words; wf-kpi-align.js keeps the
   figures on one baseline. */
@media (max-width: 1100px) {
  html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis,
  html.wf-is-runner #page-inventory .rp-kpis#jj-inv-stats {
    grid-template-columns: none !important; grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - 20px) / 2.25) !important;
    overflow-x: auto !important; overscroll-behavior-x: contain; scroll-snap-type: x mandatory !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px !important;
  }
  html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis::-webkit-scrollbar { display: none; }
  html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis > :is(.jj-stat, [data-rp="need"]),
  html.wf-is-runner #page-inventory .rp-kpis#jj-inv-stats > .rp-kpi,
  html.wf-is-runner #page-inventory .rp-kpis#jj-inv-stats > .rp-kpi:last-child:nth-child(odd) {
    grid-column: auto !important; grid-template-columns: 32px minmax(0, 1fr) !important; column-gap: 10px !important; row-gap: 0 !important;
    align-items: start !important; align-content: start !important; min-height: 96px !important; padding: 12px !important; scroll-snap-align: start;
  }
  html.wf-is-runner body #page-inventory.jj-r01 #jj-inv-stats.jj-kpis > :is(.jj-stat, [data-rp="need"]) > :first-child { width: 32px; height: 32px; min-width: 32px; }
}
/* The runner card's "No serial · 9 fields missing" strip is a button that spans the card under the row (it was squeezed
   into the age-chip corner, 158x39, by the last-child rule above), a full 44px touch target. */
@media (max-width: 768px) {
  html.wf-is-runner #page-inventory.jj-r01 #inventory-mobile-grid > .inv-card > .jj-problem-strip {
    grid-column: 1 / -1 !important; grid-row: auto !important; width: calc(100% + 24px) !important; margin: 10px -12px -10px !important;
    min-height: 44px !important; box-sizing: border-box; border-radius: 0 0 12px 12px;
  }
}