/* Visual review screens (public/js/wf-verify.js, utils/verifyScreens.js) + the Contacts duplicates review (contact-dedupe.js). 2026-11-02.
   WatchFlow's own look: navy text, the app's blue accent, Absans via var(--font-body), soft cards, watch photos. Theme tokens only.
   Centered popup on desktop, bottom sheet on phone (<= 640px). Icon-only buttons are locked circles. Targets >= 36px, 44px on phone. */
.wfv-ov .modal.wfv-pop, .wfdd-v2 { font-family: var(--font-body); }
.wfv-ov .modal.wfv-pop { width: 1040px; max-width: calc(100vw - 32px); max-height: min(92dvh, 980px); padding: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; background: var(--bg-panel); border: 1px solid var(--border); box-shadow: 0 24px 64px rgba(15, 24, 34, .22); }
.wfv-ov button { font-family: var(--font-body); }
body.wfv-lock { overflow: hidden; }

.wfv-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border); }
.wfv-ic { flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; max-width: 40px; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent, #2967b0) 12%, transparent); color: var(--accent, #2967b0); }
.wfv-ic svg { width: 22px; height: 22px; }
.wfv-ht { flex: 1; min-width: 0; }
.wfv-eb { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--off-white); font-weight: 600; }
.wfv-t { margin: 2px 0 2px; font-size: 21px; line-height: 28px; font-weight: 700; color: var(--white); font-family: var(--font-body); }
.wfv-s { font-size: 13.5px; line-height: 19px; color: var(--off-white); }
.wfv-x { flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; aspect-ratio: 1 / 1; box-sizing: border-box; padding: 0; line-height: 0;
  border-radius: 50%; border: 1px solid var(--border); background: var(--bg-raised); color: var(--off-white); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wfv-x svg { width: 18px; height: 18px; }
.wfv-x:hover { color: var(--white); }

.wfv-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 24px; overscroll-behavior: contain; }
.wfv-err { padding: 10px 14px; border-radius: 10px; margin: 0 0 14px; background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--white); font-size: 13.5px; }

/* the counts at the top: three tiles (tap to filter) */
.wfv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.wfv-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; min-height: 64px; padding: 12px 16px;
  border-radius: 14px; border: 1px solid var(--border-light, var(--border)); background: var(--bg-raised); cursor: pointer; box-shadow: 0 1px 2px rgba(15, 24, 34, .04); }
.wfv-tile-n { grid-row: 1 / span 2; font-size: 26px; line-height: 30px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.wfv-tile-l { font-size: 14px; font-weight: 700; color: var(--white); }
.wfv-tile-s { font-size: 12px; color: var(--off-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfv-tile.is-strong .wfv-tile-n { color: var(--wfs-in, var(--green)); }
.wfv-tile.is-likely .wfv-tile-n { color: var(--accent, #2967b0); }
.wfv-tile.is-on { border-color: var(--accent, #2967b0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2967b0) 14%, transparent); }

/* why they need a look: one chip per plain reason, with its count */
.wfv-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.wfv-sec-h b { font-size: 14px; color: var(--white); }
.wfv-sec-h span { font-size: 12.5px; color: var(--off-white); }
.wfv-groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.wfv-g { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-raised); color: var(--white); cursor: pointer; font-size: 13px; }
.wfv-g-n { min-width: 26px; height: 24px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px;
  background: color-mix(in srgb, var(--accent, #2967b0) 12%, transparent); color: var(--accent, #2967b0); font-variant-numeric: tabular-nums; }
.wfv-g.is-on { border-color: var(--accent, #2967b0); background: color-mix(in srgb, var(--accent, #2967b0) 8%, var(--bg-raised)); }

.wfv-bulkbar, .wfv-confirm, .wfv-cta { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--wfs-in, var(--green)) 8%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--wfs-in, var(--green)) 30%, var(--border)); font-size: 13.5px; color: var(--white); }
.wfv-bulkbar > span { flex: 1; min-width: 220px; }
.wfv-confirm { display: block; }
.wfv-confirm > b { display: block; font-size: 15px; }
.wfv-confirm > span { display: block; color: var(--off-white); margin-top: 2px; }
.wfv-confirm ul { margin: 10px 0; padding: 0 0 0 18px; }
.wfv-confirm li { margin: 3px 0; }
.wfv-confirm .wfv-more { color: var(--off-white); list-style: none; margin-left: -18px; }
.wfv-cta { background: var(--bg-raised); border-color: var(--border); margin: 12px 0; }
.wfv-cta-t { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.wfv-cta-t b { font-size: 14px; color: var(--white); }
.wfv-cta-t small { font-size: 12.5px; color: var(--off-white); }

/* one row: QuickBooks | arrow | the places */
.wfv-list { display: flex; flex-direction: column; gap: 14px; }
.wfv-row { border: 1px solid var(--border); border-radius: 16px; background: var(--bg-raised); padding: 14px 16px 16px; box-shadow: 0 1px 2px rgba(15, 24, 34, .04); }
.wfv-row.is-strong { border-left: 4px solid var(--wfs-in, var(--green)); }
.wfv-row.is-likely { border-left: 4px solid var(--accent, #2967b0); }
.wfv-row-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.wfv-row-why { font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--off-white); font-weight: 600; }
.wfv-pair { display: grid; grid-template-columns: minmax(0, 300px) 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.wfv-row .wfv-pair:has(> .wfv-places:first-child) { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 300px); }
.wfv-arrow { display: flex; align-items: center; justify-content: center; height: 48px; color: var(--off-white); }
.wfv-arrow svg { width: 20px; height: 20px; }
.wfv-card, .wfv-place { border-radius: 12px; border: 1px solid var(--border-light, var(--border)); background: var(--bg-panel); padding: 12px; min-width: 0; }
.wfv-card.is-qb { background: color-mix(in srgb, var(--accent, #2967b0) 5%, var(--bg-panel)); }
.wfv-places { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wfv-place.is-top { border-color: color-mix(in srgb, var(--accent, #2967b0) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2967b0) 8%, transparent); }
.wfv-card-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wfv-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wfv-card-t b { font-size: 14.5px; line-height: 20px; color: var(--white); overflow-wrap: anywhere; }
.wfv-card-t small { font-size: 12.5px; line-height: 17px; color: var(--off-white); overflow-wrap: anywhere; }
.wfv-av { flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; letter-spacing: .3px; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--white); }
.wfv-av.is-qb { background: color-mix(in srgb, #2ca01c 14%, transparent); color: #2c7a1c; }
.wfv-av.is-qb svg { width: 22px; height: 22px; }
.wfv-av.is-photo { border-radius: 10px; background: var(--bg-void); flex-basis: 48px; width: 48px; height: 48px; min-width: 48px; min-height: 48px; max-width: 48px; max-height: 48px; }
.wfv-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wfv-f { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 12px; margin: 10px 0 0; }
.wfv-f > div { min-width: 0; }
.wfv-f dt { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--off-white); font-weight: 600; }
.wfv-f dd { margin: 1px 0 0; font-size: 13px; color: var(--white); overflow-wrap: anywhere; }
.wfv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.wfv-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); color: var(--off-white); background: var(--bg-raised); }
.wfv-chip.is-ok { color: var(--wfs-in, var(--green)); border-color: color-mix(in srgb, var(--wfs-in, var(--green)) 35%, var(--border)); background: color-mix(in srgb, var(--wfs-in, var(--green)) 8%, var(--bg-raised)); }
.wfv-chip.is-warn { color: var(--amber, #a46a00); border-color: color-mix(in srgb, var(--amber, #a46a00) 35%, var(--border)); background: color-mix(in srgb, var(--amber, #a46a00) 8%, var(--bg-raised)); }
.wfv-mis { list-style: none; margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--amber, #a46a00) 8%, transparent); font-size: 12.5px; line-height: 18px; color: var(--white); }
.wfv-mis li + li { margin-top: 3px; }
.wfv-mis b { color: var(--amber, #a46a00); margin-right: 4px; }
.wfv-tier { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 22px; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--off-white); }
.wfv-tier.is-strong { color: var(--wfs-in, var(--green)); border-color: color-mix(in srgb, var(--wfs-in, var(--green)) 40%, var(--border)); }
.wfv-tier.is-likely { color: var(--accent, #2967b0); border-color: color-mix(in srgb, var(--accent, #2967b0) 40%, var(--border)); }
.wfv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.wfv-pop .btn, .wfdd-v2 .btn { min-height: 36px; }
.wfv-hint { font-size: 12.5px; color: var(--off-white); align-self: center; }
.wfv-row-f { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--border); }
.wfv-none, .wfv-empty { padding: 16px; border-radius: 12px; border: 1px dashed var(--border); color: var(--off-white); font-size: 13.5px; text-align: center; }
.wfv-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 0; font-size: 13px; color: var(--off-white); }
.wfv-snack { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--border); background: var(--bg-raised); font-size: 13.5px; color: var(--white); }

@media (max-width: 900px) {
  .wfv-pair, .wfv-row .wfv-pair:has(> .wfv-places:first-child) { grid-template-columns: minmax(0, 1fr); }
  .wfv-arrow { height: 20px; }
  .wfv-arrow svg { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .wfv-ov.open { align-items: flex-end; }
  .wfv-ov .modal.wfv-pop { width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; margin: 0; }
  .wfv-head { padding: 16px 16px 12px; }
  .wfv-t { font-size: 18px; line-height: 24px; }
  .wfv-body { padding: 14px 14px 20px; }
  .wfv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .wfv-tile { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; padding: 10px; min-height: 0; }
  .wfv-tile-n { grid-row: auto; font-size: 22px; line-height: 26px; }
  .wfv-tile-l { font-size: 12.5px; }
  .wfv-tile-s { display: none; }
  .wfv-row { padding: 12px; }
  .wfv-pop .btn, .wfdd-v2 .btn, .wfv-g { min-height: 44px; }
  /* the reasons slide sideways on a phone so the first row starts on the first screen */
  .wfv-groups { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 14px; padding: 0 14px 4px; scrollbar-width: none; }
  .wfv-groups::-webkit-scrollbar { display: none; }
  .wfv-g { flex: 0 0 auto; white-space: nowrap; }
  .wfv-acts .btn { flex: 1 1 auto; }
  .wfv-snack { padding: 12px 16px; }
}

/* the Contacts duplicates review, on the same cards (contact-dedupe.js openList) */
.wfdd-v2 .wfdd-tiles { margin-top: 14px; }
.wfdd-v2 .wfv-pair.is-dupe { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 640px) {
  #wfdd-modal.open { align-items: flex-end; }
  #wfdd-modal .modal { width: 100%; max-width: 100%; max-height: 92dvh; overflow-y: auto; border-radius: 18px 18px 0 0; margin: 0; }
}

/* search on every row (2026-11-03): open when nothing was found, "Not these? Search" otherwise */
.wfv-search { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent, #2967b0) 40%, var(--border));
  background: color-mix(in srgb, var(--accent, #2967b0) 4%, var(--bg-panel)); min-width: 0; }
.wfv-s-l { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; font-weight: 600; color: var(--off-white); }
.wfv-q { width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg-void); color: var(--white);
  font-family: var(--font-body); font-size: 15px; }
.wfv-q::placeholder { color: var(--faint, var(--muted)); }
.wfv-q:focus { outline: none; border-color: var(--accent, #2967b0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2967b0) 14%, transparent); }
.wfv-res { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wfv-s-hint { font-size: 12.5px; line-height: 18px; color: var(--off-white); }
.wfv-s-hint.is-err { color: var(--red); }
.wfv-place.is-found { background: var(--bg-raised); }
.wfdd-v2 .wfv-search { margin-top: 12px; }
@media (max-width: 640px) { .wfv-q { font-size: 16px; } }

/* the steps on a row (2026-11-03): 1 Recommendations, 2 Possible duplicate, 3 Search for anything else */
.wfv-step { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 24px; font-size: 13px; color: var(--white); }
.wfv-step b { font-weight: 700; }
.wfv-step-n { flex: 0 0 22px; width: 22px; height: 22px; min-width: 22px; min-height: 22px; max-width: 22px; max-height: 22px; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; line-height: 0;
  background: color-mix(in srgb, var(--accent, #2967b0) 14%, transparent); color: var(--accent, #2967b0); font-variant-numeric: tabular-nums; }
.wfv-step-s { font-size: 12px; color: var(--off-white); }
.wfv-row > .wfv-search.is-step { margin-top: 12px; }
.wfv-dupe { margin: 12px 0 0; padding: 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--amber, #a46a00) 40%, var(--border));
  background: color-mix(in srgb, var(--amber, #a46a00) 6%, var(--bg-panel)); min-width: 0; }
.wfv-dupe .wfv-step-n { background: color-mix(in srgb, var(--amber, #a46a00) 16%, transparent); color: var(--amber, #a46a00); }
.wfv-dupe-why { margin: 6px 0 10px; font-size: 13px; line-height: 19px; color: var(--white); }
.wfv-dupe-pair { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.wfv-dupe-eq { display: flex; align-items: center; justify-content: center; height: 40px; font-size: 13px; font-weight: 700; color: var(--amber, #a46a00); }
.wfv-row.has-dupe { border-left: 4px solid var(--amber, #a46a00); }
.wfv-chip.is-found { color: var(--accent, #2967b0); border-color: color-mix(in srgb, var(--accent, #2967b0) 35%, var(--border)); background: color-mix(in srgb, var(--accent, #2967b0) 7%, var(--bg-raised)); }
.wfv-s-side { margin: 4px 0 -2px; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; font-weight: 600; color: var(--off-white); }
@media (max-width: 640px) {
  .wfv-dupe-pair { grid-template-columns: minmax(0, 1fr); }
  .wfv-dupe-eq { height: 20px; }
  .wfv-dupe .wfv-acts .btn { justify-content: center; text-align: center; }
}

/* v2 (2026-11-03): QuickBooks document on the left, the WatchFlow matches on the right (Invoice view | Visual view). Phone: stacked, visual. */
.wfv-split { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.wfv-left { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wfv-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wfv-right-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wfv-left-acts { margin: 0; }
/* the QuickBooks document, half open: a clean sheet, not a field grid */
.wfv-qbdoc { position: relative; background: #fff; color: #0f1822; border: 1px solid var(--border-light, var(--border)); border-radius: 12px; padding: 16px 16px 14px;
  box-shadow: 0 6px 18px rgba(15, 24, 34, .08), 0 1px 2px rgba(15, 24, 34, .05); font-family: var(--font-body); min-width: 0; }
.wfv-qbdoc::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 12px 12px 0 0; background: #2ca01c; opacity: .85; }
.wfv-qbdoc-h { display: flex; align-items: center; gap: 10px; }
.wfv-qbdoc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wfv-qbdoc-k { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; color: #4b5a6a; }
.wfv-qbdoc-t b { font-size: 18px; line-height: 24px; font-weight: 700; color: #0f1822; font-variant-numeric: tabular-nums; }
.wfv-qbdoc-date { font-size: 12.5px; color: #4b5a6a; white-space: nowrap; }
.wfv-qbdoc-to { display: flex; flex-direction: column; margin: 12px 0 10px; padding: 8px 10px; border-radius: 8px; background: #eef2f7; }
.wfv-qbdoc-to span { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; font-weight: 600; color: #4b5a6a; }
.wfv-qbdoc-to b { font-size: 14px; color: #0f1822; overflow-wrap: anywhere; }
.wfv-qbdoc-to small { font-size: 12px; color: #4b5a6a; }
.wfv-qbdoc-lines { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.wfv-qbdoc-lines th { text-align: left; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; font-weight: 600; color: #4b5a6a; padding: 4px 0 6px; border-bottom: 1px solid #dfe5ec; }
.wfv-qbdoc-lines th:last-child, .wfv-qbdoc-lines td:last-child { text-align: right; width: 104px; font-variant-numeric: tabular-nums; }
.wfv-qbdoc-lines td { font-size: 13px; padding: 7px 0; border-bottom: 1px solid #eef2f7; vertical-align: top; color: #0f1822; overflow-wrap: anywhere; }
.wfv-qbdoc-lines td:first-child { padding-right: 10px; }
.wfv-qbdoc-lines tr.is-this td { font-weight: 700; }
.wfv-qbdoc-n { color: #4b5a6a; }
.wfv-qbdoc-tag { display: inline-flex; align-items: center; min-height: 18px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #2967b0; background: #eef2f7; }
.wfv-qbdoc.is-clipped .wfv-qbdoc-lines tbody tr:nth-child(n+7) { display: none; }
.wfv-qbdoc.is-compact.is-clipped .wfv-qbdoc-lines tbody tr:nth-child(n+4) { display: none; }
.wfv-qbmore { margin: 6px 0 0; color: #2967b0; }
.wfv-qbdoc-tot { margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.wfv-qbdoc-tot > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.wfv-qbdoc-tot dt { color: #4b5a6a; } .wfv-qbdoc-tot dd { margin: 0; font-weight: 600; color: #0f1822; font-variant-numeric: tabular-nums; }
.wfv-qbdoc-tot > div:first-child { font-size: 15px; padding-top: 6px; border-top: 1px solid #dfe5ec; }
.wfv-qbdoc-tot > div:first-child dd { font-weight: 700; }
.wfv-qbdoc-tot .is-due dd { color: #2967b0; }
.wfv-qbdoc-memo { margin: 10px 0 0; font-size: 12.5px; color: #0f1822; overflow-wrap: anywhere; } .wfv-qbdoc-memo span { display: block; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; font-weight: 600; color: #4b5a6a; }
.wfv-qbdoc-note { margin: 10px 0 0; font-size: 12px; line-height: 17px; color: #4b5a6a; }
.wfv-qbdoc.is-compact { padding: 12px; } .wfv-qbdoc.is-compact .wfv-qbdoc-t b { font-size: 16px; }
.wfv-qbdoc.is-empty { color: #4b5a6a; font-size: 13px; }
/* which QuickBooks invoice is on the left */
.wfv-qbpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wfv-qbpick > span { width: 100%; font-size: 12px; color: var(--off-white); }
.wfv-qbpick-b { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 6px 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--white);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.wfv-qbpick-b.is-on { border-color: var(--accent, #2967b0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2967b0) 12%, transparent); }
/* the view switch */
.wfv-views { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-panel); }
.wfv-view { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--off-white); font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; }
.wfv-view.is-on { background: var(--accent, #2967b0); color: #fff; }
.wfv-pop .wfv-views .wfv-view { min-height: 36px; }
/* Invoice view: each match on the invoice page's own paper */
.wfv-rec { border-radius: 12px; border: 1px solid var(--border-light, var(--border)); background: var(--bg-panel); padding: 12px; min-width: 0; }
.wfv-rec.is-top { border-color: color-mix(in srgb, var(--accent, #2967b0) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2967b0) 8%, transparent); }
.wfv-rec.is-found { background: var(--bg-raised); }
.wfv-rec-h { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 0 10px; }
.wfv-rec-n { flex: 0 0 22px; width: 22px; height: 22px; min-width: 22px; min-height: 22px; max-width: 22px; max-height: 22px; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; background: var(--bg-raised); color: var(--white); border: 1px solid var(--border); }
.wfv-paper.idv-mini-frame { cursor: default; padding: 12px; aspect-ratio: auto; min-height: 120px; width: 100%; max-width: 100%; }
.wfv-paper.idv-mini-frame .invoice-detail-paper { min-height: 0; }
.wfv-paper.idv-mini-frame .invoice-detail-paper { top: 12px; left: 12px; transform: scale(calc((100cqw - 24px) / 816px)); }
.wfv-search .wfv-res .wfv-rec + .wfv-rec, .wfv-right > .wfv-rec + .wfv-rec { margin-top: 0; }
/* Visual view: QuickBooks and one WatchFlow match side by side */
.wfv-vis { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent, #2967b0) 35%, var(--border)); background: var(--bg-panel); padding: 12px; min-width: 0; touch-action: pan-y; }
.wfv-vis-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wfv-vis-top .wfv-rec-h { flex: 1 1 260px; margin: 0; }
.wfv-vis-nav { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.wfv-vis-pos { min-width: 52px; text-align: center; font-size: 13px; font-weight: 600; color: var(--white); font-variant-numeric: tabular-nums; }
.wfv-vis-btn { flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; padding: 0; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--bg-raised); color: var(--white); cursor: pointer; }
.wfv-vis-btn svg { width: 18px; height: 18px; } .wfv-vis-btn:disabled { opacity: .4; cursor: default; }
.wfv-vis-pair { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 10px; align-items: start; margin: 12px 0 0; }
.wfv-vis-eq { display: flex; align-items: center; justify-content: center; height: 48px; color: var(--off-white); } .wfv-vis-eq svg { width: 20px; height: 20px; }
.wfv-vis-wf { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Visual view, WatchFlow side alone (the QuickBooks invoice is the left column): the photo and the invoice drawn large */
.wfv-vis-solo { margin: 12px 0 0; }
.wfv-vis-solo .wfv-vis-wf { gap: 12px; }
.wfv-vis-photo { border-radius: 12px; overflow: hidden; background: var(--bg-void); border: 1px solid var(--border-light, var(--border)); display: flex; align-items: center; justify-content: center; }
.wfv-vis-photo img { display: block; width: 100%; height: 320px; object-fit: contain; }
.wfv-vis-cap { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; font-weight: 600; color: var(--off-white); }
.wfv-vis-why { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--bg-raised); border: 1px solid var(--border-light, var(--border)); }
.wfv-vis-why-h { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; font-weight: 600; color: var(--off-white); }
.wfv-vis-why .wfv-chips { margin-top: 8px; }
@media (max-width: 900px) {
  .wfv-split { grid-template-columns: minmax(0, 1fr); }
  .wfv-left { position: static; }
}
@media (max-width: 640px) {
  .wfv-vis-pair { grid-template-columns: minmax(0, 1fr); }
  .wfv-vis-eq { height: 20px; } .wfv-vis-eq svg { transform: rotate(90deg); }
  .wfv-vis-nav { margin-left: 0; width: 100%; justify-content: space-between; }
  .wfv-vis-btn { flex-basis: 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: 44px; max-height: 44px; }
  .wfv-vis-photo img { height: 240px; }
  .wfv-qbpick-b { min-height: 44px; }
}

/* One row at a time (Hal 2026-11-03: "she can't even navigate"): "← Back to <step>" top left, the groups as chips across the top,
   "Invoice 3 of 23" with Previous / Next. The chips scroll sideways in one line; nothing wraps into a wall. */
.wfv-head { align-items: center; padding: 14px 22px 12px; }
.wfv-back { flex: 0 0 auto; min-height: 40px; gap: 6px; font-weight: 600; }
.wfv-back span[aria-hidden] { font-size: 16px; line-height: 1; }
.wfv-head .wfv-t { font-size: 19px; line-height: 25px; margin: 0; }
.wfv-chiprow { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 22px; border-bottom: 1px solid var(--border); }
.wfv-chiprow .wfv-g { flex: 0 0 auto; white-space: nowrap; padding: 6px 6px 6px 14px; }
.wfv-chiprow .wfv-g.is-on { background: var(--accent, #2967b0); border-color: var(--accent, #2967b0); color: var(--on-accent, #fff); }
.wfv-chiprow .wfv-g.is-on .wfv-g-n { background: color-mix(in srgb, #fff 22%, transparent); color: var(--on-accent, #fff); }
.wfv-step-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 22px; border-bottom: 1px solid var(--border); background: var(--bg-raised); }
.wfv-step-nav .btn { min-height: 40px; gap: 6px; min-width: 112px; justify-content: center; }
.wfv-step-nav .btn svg { width: 16px; height: 16px; }
.wfv-progress { font-size: 14px; color: var(--off-white); font-variant-numeric: tabular-nums; text-align: center; }
.wfv-progress b { color: var(--white); font-size: 15px; }
.wfv-foot-next { display: flex; justify-content: flex-end; margin: 14px 0 0; }
.wfv-foot-next .btn { gap: 6px; min-height: 40px; }
.wfv-foot-next .btn svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .wfv-head { padding: 12px 14px 10px; gap: 10px; }
  .wfv-head .wfv-eb { display: none; }
  .wfv-head .wfv-t { font-size: 16px; line-height: 22px; }
  .wfv-chiprow { flex-wrap: nowrap; overflow-x: auto; padding: 8px 14px; scrollbar-width: none; }
  .wfv-chiprow::-webkit-scrollbar { display: none; }
  .wfv-step-nav { padding: 8px 14px; }
  .wfv-step-nav .btn { min-width: 0; padding-left: 12px; padding-right: 12px; }
  .wfv-foot-next .btn { width: 100%; justify-content: center; }
}
.wfv-row-hr { display: inline-flex; align-items: center; gap: 10px; }
.wfv-skip { min-height: 36px; padding: 0 16px; font-weight: 600; }
.wfv-pop > .wfv-head, .wfv-pop > .wfv-chiprow, .wfv-pop > .wfv-step-nav { flex-shrink: 0; }
/* a set: one QuickBooks invoice = several WatchFlow invoices (2026-11-03) */
.wfv-set-t { margin: -2px 0 12px; font-size: 16px; font-weight: 700; color: var(--white); line-height: 1.35; overflow-wrap: anywhere; }
.wfv-qbdoc-tag.is-fit { color: #1d7a52; background: #e8f3ee; margin-left: 2px; white-space: nowrap; }
.wfv-qbdoc-tag.is-nofit { color: #8a5a00; background: #fbf1dc; margin-left: 2px; white-space: nowrap; }