/* QuickBooks setup mode + "Match from QuickBooks" (Settings → Connections → QuickBooks). public/js/qb-setup-mode.js.
   Settings house style: --wfs-* tokens (navy ink / muted / hairlines / pale-blue selection), 24/16/12/8 rhythm, 44px targets. */
.qsm { margin: 16px 0 0; display: flex; flex-direction: column; gap: 16px; }
.qsm[hidden] { display: none; }
.qsm-mode { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 20px;
  border: 1px solid var(--wfs-line, var(--border)); border-radius: 14px; background: var(--wfs-sel, color-mix(in srgb, var(--blue) 12%, var(--bg-raised))); }
.qsm-mode[data-mode="two_way"] { background: color-mix(in srgb, var(--green, #1f8f4e) 9%, var(--bg-raised)); }
.qsm-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--bg-raised); color: var(--wfs-blue, var(--blue)); border: 1px solid var(--wfs-line, var(--border)); }
.qsm-mode[data-mode="two_way"] .qsm-ic { color: var(--green, #1f8f4e); }
.qsm-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.qsm-mode-t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qsm-eyebrow { font: 700 11px/1.2 var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--wfs-blue, var(--blue)); }
.qsm-mode-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.qsm-title { font: 700 20px/1.25 var(--font-body); color: var(--wfs-ink, var(--white)); }
.qsm-state { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; font: 700 12px/1 var(--font-body);
  letter-spacing: .4px; text-transform: uppercase; background: var(--bg-raised); color: var(--wfs-ink, var(--white)); border: 1px solid var(--wfs-line, var(--border)); }
.qsm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wfs-blue, var(--blue)); }
.qsm-state[data-on="0"] .qsm-dot { background: var(--green, #1f8f4e); }
.qsm-p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--wfs-ink2, var(--off-white)); }
.qsm-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--wfs-muted, var(--muted)); }

.qsm-match { display: flex; flex-direction: column; gap: 12px; }
.qsm-match-head { display: flex; flex-direction: column; gap: 4px; }
.qsm-match-h { margin: 0; font: 700 12px/1.3 var(--font-body) !important; letter-spacing: 1.4px !important; text-transform: uppercase; color: var(--wfs-ink, var(--white)); }
.qsm-match-s { margin: 0; font-size: 13px; line-height: 1.5; color: var(--wfs-muted, var(--muted)); }
.qsm-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--wfs-line, var(--border)); border-radius: 14px; background: var(--bg-raised); overflow: hidden; }
/* one grid for every row: number · step · 3 count slots · status · Open */
.qsm-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 396px 128px 84px; gap: 16px; align-items: center; padding: 14px 16px; min-height: 72px; }
.qsm-row + .qsm-row { border-top: 1px solid var(--wfs-line, var(--border)); }
.qsm-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--font-body);
  background: var(--wfs-sel, var(--bg-panel)); color: var(--wfs-blue, var(--blue)); font-variant-numeric: tabular-nums; }
.qsm-row[data-state="done"] .qsm-num { background: color-mix(in srgb, var(--green, #1f8f4e) 14%, var(--bg-raised)); color: var(--green, #1f8f4e); }
.qsm-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qsm-t { font: 600 15px/1.3 var(--font-body); color: var(--wfs-ink, var(--white)); }
.qsm-d { font-size: 13px; line-height: 1.45; color: var(--wfs-muted, var(--muted)); }
.qsm-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.qsm-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qsm-c[data-k="ok"] { grid-column: 1; } .qsm-c[data-k="review"] { grid-column: 2; } .qsm-c[data-k="missing"] { grid-column: 3; }
.qsm-c-v { font: 700 16px/1.2 var(--font-body); font-variant-numeric: tabular-nums; color: var(--wfs-ink, var(--white)); }
.qsm-c[data-k="ok"] .qsm-c-v { color: var(--green, #1f8f4e); }
.qsm-c[data-k="review"] .qsm-c-v { color: color-mix(in srgb, var(--amber, #d4963a) 72%, var(--wfs-ink, #13203a)); }
.qsm-c-l { font: 700 10.5px/1.25 var(--font-body); letter-spacing: .6px; text-transform: uppercase; color: var(--wfs-muted, var(--muted)); overflow-wrap: normal; hyphens: none; }
.qsm-run, .qsm-dash { grid-column: 1 / -1; font: 600 14px/1.3 var(--font-body); color: var(--wfs-muted, var(--muted)); }
.qsm-run { color: var(--wfs-blue, var(--blue)); display: flex; flex-direction: column; gap: 2px; }
.qsm-run-s { font: 400 13px/1.45 var(--font-body); color: var(--wfs-muted, var(--muted)); }
.qsm-pill { justify-self: start; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font: 600 12.5px/1.2 var(--font-body); white-space: nowrap;
  background: var(--bg-panel, rgba(0,0,0,.05)); color: var(--wfs-muted, var(--muted)); }
.qsm-pill[data-tone="ok"] { background: color-mix(in srgb, var(--green, #1f8f4e) 13%, var(--bg-raised)); color: var(--green, #1f8f4e); }
.qsm-pill[data-tone="review"] { background: color-mix(in srgb, var(--amber, #d4963a) 16%, var(--bg-raised)); color: color-mix(in srgb, var(--amber, #d4963a) 62%, var(--wfs-ink, #13203a)); }
.qsm-act { justify-self: end; }
.qsm-open { min-height: 44px; min-width: 76px; }
/* the Settings column is narrower than the window, so the row reflows on the LIST's own width (container query), not the viewport */
.qsm-list { container-type: inline-size; container-name: qsm; }
@container qsm (max-width: 900px) {
  .qsm-row { grid-template-columns: 28px minmax(0, 1fr) auto 84px; grid-template-areas: "num main pill act" ". counts counts counts"; row-gap: 12px; }
  .qsm-num { grid-area: num; } .qsm-main { grid-area: main; } .qsm-pill { grid-area: pill; } .qsm-act { grid-area: act; }
  .qsm-counts { grid-area: counts; grid-template-columns: repeat(3, 150px); }
}
@container qsm (max-width: 560px) {
  .qsm-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "num main main" ". counts counts" ". pill act"; gap: 12px; padding: 16px; }
  .qsm-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qsm-pill { align-self: center; }
}
@media (max-width: 640px) {
  .qsm-mode { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .qsm-ic { width: 40px; height: 40px; }
  .qsm-title { font-size: 18px; }
}

/* ── Payments and items + Trade-ins (follow-up 10-27): the same labels, grouped rows and an option-list picker ── */
#qb-conn-card .qbs-extra.qsm-group { margin-top: 24px; padding-top: 0; border-top: 0; display: flex; flex-direction: column; gap: 12px; }
.qsm-rows { border: 1px solid var(--wfs-line, var(--border)); border-radius: 14px; background: var(--bg-raised); container-type: inline-size; container-name: qsmrows; }
.qsm-frow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 8px 24px; align-items: start; padding: 16px; }
.qsm-rows > * + * { border-top: 1px solid var(--wfs-line, var(--border)); }
.qsm-frow-t { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.qsm-frow-l { font: 600 15px/1.3 var(--font-body); color: var(--wfs-ink, var(--white)); }
.qsm-frow-h { font-size: 13px; line-height: 1.45; color: var(--wfs-muted, var(--muted)); }
.qsm-frow-c { min-width: 0; }
.qsm-frow-act { padding-top: 12px; padding-bottom: 12px; }
.qsm-frow-act .qbs-make { min-height: 44px; width: 100%; white-space: normal; }
@container qsmrows (max-width: 600px) {
  .qsm-frow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .qsm-frow-act .qsm-frow-t { display: none; }
}

/* the standard switch row: label + help left, the switch right; the whole row is the tap target */
#qb-conn-card .qbs-switch.qsm-sw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; margin: 0;
  border: 0; border-radius: 0; background: none; min-height: 44px; cursor: pointer; }
.qsm-sw .qbs-switch-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qsm-sw.is-locked { cursor: default; }
.qsm-sw-ro { display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--wfs-blue, var(--blue)); }
.qsm-sw-ro svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }
#qb-conn-card .qsm-tgl { -webkit-appearance: none; appearance: none; width: 44px; height: 26px; margin: 0; border-radius: 13px; position: relative; cursor: pointer; flex: 0 0 auto;
  background: var(--bg-active, #e3e8ee); border: 1px solid var(--wfs-line, var(--border)); transition: background .2s, border-color .2s; accent-color: auto; }
#qb-conn-card .qsm-tgl::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .2s; }
#qb-conn-card .qsm-tgl:checked { background: var(--wfs-primary, var(--gold)); border-color: var(--wfs-primary, var(--gold)); }
#qb-conn-card .qsm-tgl:checked::after { left: 20px; }
#qb-conn-card .qsm-tgl:disabled { opacity: .5; cursor: not-allowed; }
#qb-conn-card .qsm-tgl:focus-visible { outline: 2px solid var(--wfs-blue, var(--blue)); outline-offset: 2px; }

/* option-list picker */
.qpk { position: relative; }
.qpk-native { display: none !important; }
.qpk-btn { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; cursor: pointer; text-align: left;
  background: var(--bg-raised); border: 1px solid var(--wfs-field, var(--border)); color: var(--wfs-ink, var(--white)); font: 500 14.5px/1.3 var(--font-body); }
.qpk-btn:hover { border-color: var(--wfs-blue, var(--blue)); }
.qpk-btn:focus-visible { outline: 2px solid var(--wfs-blue, var(--blue)); outline-offset: 1px; }
.qpk.is-open .qpk-btn { border-color: var(--wfs-blue, var(--blue)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wfs-blue, var(--blue)) 16%, transparent); }
.qpk-v { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.qpk-v.is-auto { color: var(--wfs-ink2, var(--off-white)); }
.qpk-chev { flex: 0 0 auto; width: 8px; height: 8px; margin: -3px 2px 0 0; border-right: 2px solid var(--wfs-muted, var(--muted)); border-bottom: 2px solid var(--wfs-muted, var(--muted)); transform: rotate(45deg); transition: transform .15s; }
.qpk.is-open .qpk-chev { transform: rotate(-135deg); margin-top: 3px; }
.qpk-pop { margin-top: 8px; padding: 6px; border: 1px solid var(--wfs-line, var(--border)); border-radius: 12px; background: var(--bg-raised); box-shadow: 0 10px 28px -14px rgba(19,32,58,.35); }
.qpk-pop[hidden] { display: none; }
.qpk-q { width: 100%; min-height: 44px; margin: 0 0 6px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--wfs-field, var(--border)); background: var(--bg-raised); color: var(--wfs-ink, var(--white)); font: 400 14px var(--font-body); }
.qpk-list { max-height: 264px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.qpk-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left;
  font: 400 14px/1.35 var(--font-body); color: var(--wfs-ink, var(--white)); }
.qpk-opt[hidden] { display: none; }
.qpk-opt:hover, .qpk-opt:focus-visible { background: color-mix(in srgb, var(--wfs-sel, #dcebfa) 60%, transparent); outline: none; }
.qpk-opt[aria-selected="true"] { background: var(--wfs-sel, #dcebfa); color: var(--wfs-blue, var(--blue)); font-weight: 600; }
.qpk-opt-n { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.qpk-tick { flex: 0 0 auto; width: 6px; height: 11px; margin-right: 4px; border-right: 2px solid transparent; border-bottom: 2px solid transparent; transform: rotate(45deg); margin-top: -3px; }
.qpk-opt[aria-selected="true"] .qpk-tick { border-color: currentColor; }
/* the phone's global 44px input floor must not reshape the switch track (the whole row is the 44px target) */
#qb-conn-card input.qsm-tgl { width: 44px !important; height: 26px !important; min-width: 44px !important; min-height: 26px !important; max-height: 26px !important; padding: 0 !important; border-radius: 13px !important; box-sizing: border-box; }