/* qb-wizard.css — mirrors sellworthy-builder-mocks/css/phone.css, scoped under
   .qb-wizard. The mock's .phone-shell maps onto .qb-wizard itself (it is the shell). */

/* ---------- Shell ---------- */
.qb-wizard {
  position: relative;
  min-height: 70vh;
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(30, 42, 82, 0.06);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Only the active step is shown. */
.qb-wizard .qb-step { display: none; }
.qb-wizard .qb-step.is-active { display: block; }

/* ---------- Appbar ---------- */
.qb-wizard .appbar {
  position: sticky; top: 0; z-index: 20;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.qb-wizard .appbar__back {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: transparent; border: none; cursor: pointer;
  color: var(--color-text);
}
.qb-wizard .appbar__back svg { width: 22px; height: 22px; }
.qb-wizard .appbar__back:hover { background: var(--color-surface-2); }
.qb-wizard .appbar__title { min-width: 0; }
.qb-wizard .appbar__eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-faint);
  line-height: 1;
  margin-bottom: 3px;
}
.qb-wizard .appbar__h {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qb-wizard .appbar__right { display: flex; align-items: center; gap: var(--space-2); position: relative; }

/* ---------- Appbar overflow (⋯) menu — mobile-first ---------- */
/* Phone-first: the three secondary appbar actions live inside a popover
   that opens on tap. The tablet/desktop media query below re-flattens them
   into an inline row and hides the trigger. */
.qb-wizard .appbar__more {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent; border: none; cursor: pointer;
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.qb-wizard .appbar__more:hover,
.qb-wizard .appbar__more[aria-expanded="true"] { background: var(--color-surface-2); }
.qb-wizard .appbar__more svg { width: 22px; height: 22px; }

.qb-wizard .appbar__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(30, 42, 82, 0.12);
  padding: 4px;
  z-index: 30;
  display: flex; flex-direction: column;
}
.qb-wizard .appbar__menu[hidden] { display: none; }
.qb-wizard .appbar__menu .qb-classic-link {
  text-align: left;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: var(--radius-sm, 6px);
  width: 100%;
}

/* ---------- Stepper (10-dot) ---------- */
.qb-wizard .stepper {
  position: sticky; top: 65px; z-index: 15;
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.qb-wizard .stepper__track {
  height: 3px;
  background: var(--color-surface-dynamic);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.qb-wizard .stepper__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--dur-med) var(--ease);
}
.qb-wizard .stepper__dots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
}
.qb-wizard .stepdot {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--color-text-faint);
  min-width: 0;
  background: none; border: none; padding: 0; cursor: pointer;
}
.qb-wizard .stepdot__mark {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-surface-dynamic);
  color: var(--color-text-faint);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  border: 2px solid transparent;
}
.qb-wizard .stepdot__mark svg { width: 12px; height: 12px; }
.qb-wizard .stepdot__lbl {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
  display: none; /* labels hidden on phone; shown at ≥768px */
}
.qb-wizard .stepdot.is-current .stepdot__mark {
  background: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(244, 162, 42, 0.25);
}
.qb-wizard .stepdot.is-current .stepdot__lbl { color: var(--color-primary); font-weight: 700; }
.qb-wizard .stepdot.is-done .stepdot__mark {
  background: var(--color-primary);
  color: var(--color-accent);
  border-color: var(--color-primary);
}
.qb-wizard .stepdot.is-done .stepdot__mark svg { stroke: var(--color-accent); color: var(--color-accent); }
.qb-wizard .stepdot.is-done .stepdot__lbl { color: var(--color-primary); font-weight: 600; }

/* ---------- Main content ---------- */
.qb-wizard .main {
  padding: var(--space-5) var(--space-4);
  padding-bottom: 176px; /* space for sumbar + actionbar */
  flex: 1;
}
.qb-wizard .section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.qb-wizard .section-sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-5);
  line-height: 1.45;
}

/* ---------- Sumbar (sticky live summary) ---------- */
.qb-wizard .sumbar {
  position: absolute;
  bottom: 72px;
  left: 0; right: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  z-index: 18;
  gap: var(--space-3);
}
.qb-wizard .sumbar__toggle {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.qb-wizard .sumbar__toggle svg { width: 14px; height: 14px; }
.qb-wizard .sumbar__toggle:hover { background: rgba(255, 255, 255, 0.2); }
.qb-wizard .sumbar__stats {
  display: flex; align-items: center; gap: var(--space-4);
  justify-content: flex-end;
}
.qb-wizard .sumbar__final { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.qb-wizard .sumbar__k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.qb-wizard .sumbar__v {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.qb-wizard .sumbar__gm {
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.qb-wizard .sumbar__gm--good      { background: var(--color-band-good);      color: white; }
.qb-wizard .sumbar__gm--excellent { background: var(--color-band-excellent); color: white; }
.qb-wizard .sumbar__gm--fair      { background: var(--color-band-fair);      color: white; }
.qb-wizard .sumbar__gm--poor      { background: var(--color-band-poor);      color: white; }
.qb-wizard .sumbar__gm--floor     { background: var(--color-band-floor);     color: white; }
.qb-wizard .sumbar__gm--neutral   { background: rgba(255,255,255,0.15);       color: white; }

/* ---------- Actionbar (sticky footer) ---------- */
.qb-wizard .actionbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 72px;
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  z-index: 19;
}
/* Fixed 72px height keeps the actionbar from growing under a wrapped label and
   overlapping the sumbar (which is pinned at bottom:72px). Labels stay single-line. */
.qb-wizard .actionbar .btn { flex: 1; justify-content: center; white-space: nowrap; min-width: 0; }
.qb-wizard .actionbar__prim { flex: 2; gap: 6px; font-size: var(--text-sm); }
.qb-wizard .actionbar__prim svg { width: 18px; height: 18px; }

/* ---------- Cards / stacks ---------- */
.qb-wizard .card--collapsible { padding: 0; }
.qb-wizard .card--collapsible .card__toggle {
  width: 100%;
  padding: var(--space-4);
  background: transparent; border: none;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  cursor: pointer;
  text-align: left;
}
.qb-wizard .card--collapsible .card__toggle svg {
  width: 16px; height: 16px;
  color: var(--color-text-muted);
  transition: transform var(--dur-fast) var(--ease);
}
.qb-wizard .card--collapsible.is-open .card__toggle svg { transform: rotate(180deg); }
.qb-wizard .card--collapsible .card__body {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
  display: none;
}
.qb-wizard .card--collapsible.is-open .card__body { display: block; }
.qb-wizard .card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.qb-wizard .card__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 4px 0 0;
}

.qb-wizard .stack-5 > * + * { margin-top: var(--space-5); }
.qb-wizard .stack-2 > * + * { margin-top: var(--space-2); }
.qb-wizard .stack-3 > * + * { margin-top: var(--space-3); }
.qb-wizard .stack-4 > * + * { margin-top: var(--space-4); }

/* ---------- Number stepper ---------- */
.qb-wizard .nstep {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
}
.qb-wizard .nstep__lbl {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  display: flex; flex-direction: column;
}
.qb-wizard .nstep__hint {
  font-style: normal;
  font-size: 11px;
  color: var(--color-text-faint);
  font-weight: 400;
  margin-top: 2px;
}
.qb-wizard .nstep__ctrl {
  display: grid;
  grid-template-columns: 36px 60px 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.qb-wizard .nstep__btn {
  background: var(--color-surface-2);
  border: none;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--color-text);
}
.qb-wizard .nstep__btn svg { width: 16px; height: 16px; }
.qb-wizard .nstep__btn:hover { background: var(--color-surface-dynamic); }
.qb-wizard .nstep__input {
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: var(--color-surface);
  min-width: 0;
  -moz-appearance: textfield;
}
.qb-wizard .nstep__input::-webkit-outer-spin-button,
.qb-wizard .nstep__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Row helpers ---------- */
.qb-wizard .row { display: flex; align-items: center; gap: var(--space-3); }
.qb-wizard .row-between { justify-content: space-between; }
.qb-wizard hr.dashed {
  border: none;
  border-top: 1px dashed var(--color-border);
  margin: var(--space-2) 0;
}

/* ---------- Vertical pills ---------- */
.qb-wizard .vert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.qb-wizard .vert-pill {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: all var(--dur-fast) var(--ease);
}
.qb-wizard .vert-pill__k {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-faint); margin-bottom: 4px;
}
.qb-wizard .vert-pill__v { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.qb-wizard .vert-pill.is-active { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.qb-wizard .vert-pill.is-active .vert-pill__k { color: var(--color-primary); }

/* ---------- Temperature pills ---------- */
.qb-wizard .temp-pills { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); }
.qb-wizard .temp-pill {
  padding: var(--space-4) var(--space-2);
  background: var(--color-surface);
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-lg);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.qb-wizard .temp-pill__glyph { font-size: 24px; line-height: 1; }
.qb-wizard .temp-pill__label { font-size: var(--text-sm); font-weight: 700; }
.qb-wizard .temp-pill.is-active { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.qb-wizard .temp-pill--cold.is-active { border-color: #2563EB; background: #EFF6FF; }
.qb-wizard .temp-pill--warm.is-active { border-color: var(--color-accent); background: var(--color-accent-highlight); }
.qb-wizard .temp-pill--hot.is-active  { border-color: var(--color-error); background: var(--color-error-highlight); }

/* ---------- Vendor / line-item cards ---------- */
.qb-wizard .vlist { display: flex; flex-direction: column; gap: var(--space-3); }
.qb-wizard .vcard {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.qb-wizard .vcard__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.qb-wizard .vcard__idx {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-faint);
}
.qb-wizard .vcard__del {
  background: transparent; border: none; padding: 4px;
  color: var(--color-text-faint); cursor: pointer;
  display: grid; place-items: center;
}
.qb-wizard .vcard__del:hover { color: var(--color-error); }
.qb-wizard .vcard__del svg { width: 16px; height: 16px; }
/* v361.c — labeled variant of the Remove button. The bare-icon original
   was invisible to reps ("there is no way to clear a line item"), so the
   labeled variant is used for Step 2 line-item cards. Border + text +
   danger-tinted hover matches the classic .btn--ghost affordance so a
   rep can see it at a glance. */
.qb-wizard .vcard__del--labeled {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
}
.qb-wizard .vcard__del--labeled:hover {
  color: var(--color-error);
  border-color: var(--color-error);
  background: var(--color-surface-alt);
}
.qb-wizard .vcard__del--labeled .vcard__del-text { line-height: 1; }
.qb-wizard .vcard__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.qb-wizard .vcard__total {
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-2);
  display: flex; justify-content: space-between; font-size: var(--text-sm);
}
.qb-wizard .vcard__total .val { font-weight: 700; font-variant-numeric: tabular-nums; }
.qb-wizard .btn-addrow {
  width: 100%;
  padding: var(--space-3);
  background: transparent;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.qb-wizard .btn-addrow svg { width: 16px; height: 16px; }
.qb-wizard .btn-addrow:hover { background: var(--color-primary-highlight); }

/* ---------- RQS score pill ---------- */
.qb-wizard .rqs-pill {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.qb-wizard .rqs-score {
  width: 64px; height: 64px;
  border-radius: var(--radius-lg);
  color: white;
  display: grid; place-items: center;
  font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.qb-wizard .rqs-score.band-excellent { background: var(--color-band-excellent); }
.qb-wizard .rqs-score.band-good      { background: var(--color-band-good); }
.qb-wizard .rqs-score.band-fair      { background: var(--color-band-fair); }
.qb-wizard .rqs-score.band-poor      { background: var(--color-band-poor); }
.qb-wizard .rqs-score.band-floor     { background: var(--color-band-floor); }
.qb-wizard .rqs-pill .label { font-weight: 700; font-size: var(--text-sm); }
.qb-wizard .rqs-pill .sub   { color: var(--color-text-muted); font-size: 12px; margin-top: 2px; line-height: 1.35; }

/* Segmented control */
.qb-wizard .seg {
  display: flex;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 3px;
}
.qb-wizard .seg__opt {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 3px);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}
.qb-wizard .seg__opt.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* Preview card (Step 9) */
.qb-wizard .preview-card {
  background: white;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
}
.qb-wizard .preview-card__brand {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.qb-wizard .preview-card__h { font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-2); }
.qb-wizard .preview-card__desc {
  font-size: var(--text-sm); color: var(--color-text-muted);
  line-height: 1.55; margin-bottom: var(--space-4);
}

/* Template picker */
.qb-wizard .tmpl-picker { display: flex; flex-direction: column; gap: var(--space-2); }
.qb-wizard .tmpl {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  cursor: pointer;
  align-items: flex-start;
}
.qb-wizard .tmpl.is-active { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.qb-wizard .tmpl .dot {
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  margin-top: 2px;
  display: grid; place-items: center;
}
.qb-wizard .tmpl.is-active .dot { border-color: var(--color-primary); }
.qb-wizard .tmpl.is-active .dot::after {
  content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-primary);
}
.qb-wizard .tmpl__name { font-weight: 600; font-size: var(--text-sm); }
.qb-wizard .tmpl__desc { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.4; }

/* Warranty template picker (Step 8). Multi-select: tap toggles a row in/out.
   Selected rows show a filled check glyph and a highlighted border. */
.qb-wizard .tmpl-picker__opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface, #fff);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 120ms ease, background 120ms ease;
}
/* Multi-select modifier: put the check glyph on the left, body on the right. */
.qb-wizard .tmpl-picker--multi .tmpl-picker__opt {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
}
.qb-wizard .tmpl-picker__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1.5px solid var(--color-divider);
  background: var(--color-surface, #fff);
  line-height: 1;
  margin-top: 1px;
  transition: background 120ms ease, border-color 120ms ease;
  overflow: hidden;
}
/* Brand-mark check: no border/background — the SVG carries the whole shape. */
.qb-wizard .tmpl-picker__check--brand {
  border: 0;
  background: transparent;
  border-radius: 50%;
}
.qb-wizard .tmpl-picker__check--brand svg {
  width: 100%;
  height: 100%;
  display: block;
}
.qb-wizard .tmpl-picker__check--empty { color: transparent; }
/* "Recommended" pill next to templates flagged isDefault — matches the
   brand favicon (navy circle + orange check): navy background, orange text. */
.qb-wizard .tmpl-picker__badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #F4A22A;
  background: #1E2A52;
  line-height: 1.4;
}
/* "Custom" pill for orphaned snapshots — the source template was edited or
   removed after save, so we're showing the saved values as a stand-alone
   card. Amber background signals "attention, not an error" so reps notice
   without alarm. */
.qb-wizard .tmpl-picker__badge--custom {
  color: #7A3E00;
  background: #FFE0B2;
}

/* v78 (2026-08-04 Chris) — RQS points pill. Rendered on every template
   picker tile whose template has rqs_links. Sign-aware: green when the
   pick raises the score, grey when it's neutral, red when it drags,
   dark-red when it hits the GM floor sentinel. Tooltip on the span
   lists each axis binding.

   Uses solid, opaque colors that read cleanly on both selected and
   unselected tiles (unselected tile bg is white; selected uses navy
   border + light-blue tint). */
.qb-wizard .tmpl-picker__badge--rqs {
  color: #ffffff;
  background: #1F7A4C;      /* default = positive fallback */
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
}
.qb-wizard .tmpl-picker__badge--rqs-pos  { background: #1F7A4C; color: #ffffff; }  /* green */
.qb-wizard .tmpl-picker__badge--rqs-zero { background: #6B7280; color: #ffffff; }  /* neutral grey */
.qb-wizard .tmpl-picker__badge--rqs-neg  { background: #C05621; color: #ffffff; }  /* orange = drags */
.qb-wizard .tmpl-picker__badge--rqs-floor {
  background: #9B1C1C; color: #ffffff;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.qb-wizard .tmpl-picker__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.qb-wizard .tmpl-picker__opt:hover {
  border-color: var(--color-border);
}
.qb-wizard .tmpl-picker__opt.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.qb-wizard .tmpl-picker__title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.qb-wizard .tmpl-picker__sub {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Auto-attached banner */
.qb-wizard .autobanner {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  background: var(--color-primary-highlight);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.qb-wizard .autobanner__icon { color: var(--color-primary); }
.qb-wizard .autobanner__icon svg { width: 20px; height: 20px; }
.qb-wizard .autobanner__body { font-size: var(--text-sm); line-height: 1.4; }
.qb-wizard .autobanner__body strong { display: block; margin-bottom: 2px; }

/* Goal-seek callout */
.qb-wizard .goal-callout {
  background: linear-gradient(135deg, var(--color-primary-highlight), var(--color-accent-highlight));
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}

/* ---------- Back-to-classic link ---------- */
.qb-wizard .qb-classic-link {
  background: transparent; border: none;
  color: var(--color-text-muted);
  font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 6px 8px;
  border-radius: var(--radius-md);
}
.qb-wizard .qb-classic-link:hover { background: var(--color-surface-2); color: var(--color-text); }
/* Cancel variant — sits next to "Desktop version", reads as destructive. */
.qb-wizard .qb-classic-link--cancel { color: var(--color-danger, #b04a3a); margin-left: 4px; }
.qb-wizard .qb-classic-link--cancel:hover { background: color-mix(in oklab, var(--color-danger, #b04a3a) 10%, transparent); color: var(--color-danger, #b04a3a); }

/* ============================================================
   Restyle the RELOCATED classic markup so it reads as wizard cards.
   These are the app's existing nodes (.quote-card, .field, .field__input,
   #qVendors cards, #quoteRqsPanel) moved into wizard steps. We do NOT touch
   their source markup — just present them cleanly inside .qb-wizard.
   ============================================================ */
.qb-wizard .quote-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.qb-wizard .quote-card + .quote-card { margin-top: var(--space-4); }
.qb-wizard .quote-card__h { font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--space-3); }
.qb-wizard .quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.qb-wizard .quote-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.qb-wizard .field--wide { grid-column: 1 / -1; }
.qb-wizard .quote-form .field { display: flex; flex-direction: column; gap: var(--space-2); }
.qb-wizard .field__label {
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted);
  letter-spacing: 0.03em; text-transform: uppercase;
}
.qb-wizard .field__hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-text-faint); }
.qb-wizard .field__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 44px;
  font-size: var(--text-base);
}
.qb-wizard .field__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-highlight); }
.qb-wizard .field__input--num { font-variant-numeric: tabular-nums; }
.qb-wizard textarea.field__input { min-height: 84px; resize: vertical; }
.qb-wizard .field__combo { display: flex; align-items: stretch; gap: var(--space-2); }
.qb-wizard .quote-subrow + .quote-subrow { margin-top: var(--space-4); }
.qb-wizard .quote-subrow__title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); margin-bottom: var(--space-2); }
/* Keep multi-column grids single-column on narrow phones for the relocated form */
@media (max-width: 480px) {
  .qb-wizard .quote-grid, .qb-wizard .quote-grid--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   TABLET — ≥768px
   ============================================================ */
@media (min-width: 768px) {
  .qb-wizard {
    max-width: 900px;
    box-shadow: 0 0 60px rgba(30, 42, 82, 0.08);
  }
  /* Desktop appbar: overflow menu goes away, actions render inline. */
  .qb-wizard .appbar__more { display: none; }
  .qb-wizard .appbar__menu {
    position: static;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }
  .qb-wizard .appbar__menu[hidden] { display: flex !important; }
  .qb-wizard .appbar__menu .qb-classic-link {
    width: auto;
    padding: 6px 8px;
    font-size: 12px;
  }

  .qb-wizard .appbar { padding: var(--space-4) var(--space-6); grid-template-columns: 44px 1fr auto; }
  .qb-wizard .appbar__eyebrow { font-size: 12px; }
  .qb-wizard .appbar__h { font-size: var(--text-lg); }

  .qb-wizard .stepper { top: 76px; padding: var(--space-4) var(--space-6) var(--space-3); }
  .qb-wizard .stepdot { font-size: 11px; gap: 4px; }
  .qb-wizard .stepdot__mark { width: 24px; height: 24px; font-size: 11px; }
  .qb-wizard .stepdot__mark svg { width: 14px; height: 14px; }
  .qb-wizard .stepdot__lbl { display: block; } /* labels appear on tablet */

  .qb-wizard .main { padding: var(--space-6) var(--space-6); padding-bottom: 140px; }
  .qb-wizard .section-title { font-size: var(--text-xl); }
  .qb-wizard .section-sub   { font-size: var(--text-base); margin-bottom: var(--space-6); }

  .qb-wizard .vlist.vlist--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .qb-wizard .vert-grid { grid-template-columns: repeat(4, 1fr); }
  .qb-wizard .vcard__row { grid-template-columns: 1fr 1fr; }
}

/* ─────────── Preview & Send overlay ───────────
   Slides over the wizard main content once a save+score succeeds. Renders the
   customer-facing /q/:id in an iframe with primary Copy link + optional Send. */
/* v295.1 (2026-08-12 Chris — "the page is very long...it is all gray"):
   The overlay used to fill the wizard shell (position: absolute; inset: 0)
   over a 70vh min-height, producing a huge gray dead zone below the
   Copy/Connect card. Since the customer iframe was removed the panel needs
   no fixed viewport — lay it out in flow so the page collapses to its
   natural content height. */
.qb-wizard .qb-preview {
  position: relative;
  z-index: 20;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  animation: qbPreviewSlide 260ms ease-out;
}
/* When the overlay is showing on step 10, let the wizard collapse to
   content height instead of the 70vh floor used on the calc/wizard steps. */
.qb-wizard:has(.qb-preview:not([hidden])) { min-height: 0; }
.qb-wizard .qb-preview[hidden] { display: none; }

@keyframes qbPreviewSlide {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.qb-wizard .qb-preview__head {
  padding: var(--space-5) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.qb-wizard .qb-preview__eyebrow {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.qb-wizard .qb-preview__h {
  font-size: var(--text-xl, 20px);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  line-height: 1.25;
}
.qb-wizard .qb-preview__score { display: flex; gap: var(--space-2); }
.qb-wizard .qb-preview__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #1E2A52;
  color: #fff;
}
.qb-wizard .qb-preview__badge--excellent { background: #0f7a3e; }
.qb-wizard .qb-preview__badge--great,
.qb-wizard .qb-preview__badge--good { background: #1E2A52; }
.qb-wizard .qb-preview__badge--okay,
.qb-wizard .qb-preview__badge--caution { background: #B26900; }
.qb-wizard .qb-preview__badge--risky,
.qb-wizard .qb-preview__badge--marginal,
.qb-wizard .qb-preview__badge--destroy { background: #8B1A1A; }
.qb-wizard .qb-preview__badge--neutral { background: var(--color-text-muted); }

.qb-wizard .qb-preview__frameWrap {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-3);
  background: var(--color-surface-2, #f4f4f0);
}
.qb-wizard .qb-preview__frame {
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 4px 12px rgba(30, 42, 82, 0.06);
}

.qb-wizard .qb-preview__urlrow {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.qb-wizard .qb-preview__url {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  padding: 4px 0;
}

.qb-wizard .qb-preview__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.qb-wizard .qb-preview__actions .btn {
  width: 100%;
  justify-content: center;
}
.qb-wizard .qb-preview__primary {
  background: #1E2A52;
  color: #fff;
  border-color: #1E2A52;
  box-shadow: 0 0 0 3px rgba(244, 162, 42, 0.25);
}
.qb-wizard .qb-preview__primary:hover { background: #172244; }

.qb-wizard .qb-preview__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.qb-wizard .qb-linklike {
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}
.qb-wizard .qb-linklike:hover { color: var(--color-text); text-decoration: underline; }

/* Upsell card shown in place of the Send button when no delivery integration
   is connected. Same footprint, calmer weight — Copy still wins the eye. */
.qb-wizard .qb-preview__upsell {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: rgba(30, 42, 82, 0.04);
  border: 1px dashed rgba(30, 42, 82, 0.25);
}
.qb-wizard .qb-preview__upsell[hidden] { display: none; }
.qb-wizard .qb-preview__upsell-body { flex: 1 1 auto; min-width: 0; }
.qb-wizard .qb-preview__upsell-title {
  font-size: 13px;
  font-weight: 700;
  color: #1E2A52;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.qb-wizard .qb-preview__upsell-title svg { width: 14px; height: 14px; }
.qb-wizard .qb-preview__upsell-text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.qb-wizard .qb-preview__upsell-cta {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* The parent .qb-preview__actions sets `.btn { width: 100% }` to make Copy /
   Send fill the footer. That override was eating the upsell CTA too, forcing
   the button to 100% and squishing the body text into one-word-per-line.
   Scope the override to primary action buttons only and let the upsell CTA
   sit auto-sized inside the row-flex card. */
.qb-wizard .qb-preview__actions .qb-preview__upsell .btn,
.qb-wizard .qb-preview__actions .qb-preview__upsell-cta {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Below ~420px the row layout still gets tight — stack body over CTA so the
   body has full width to read. */
@media (max-width: 420px) {
  .qb-wizard .qb-preview__upsell {
    flex-direction: column;
    align-items: stretch;
  }
  .qb-wizard .qb-preview__actions .qb-preview__upsell .btn,
  .qb-wizard .qb-preview__actions .qb-preview__upsell-cta {
    width: 100%;
  }
}

/* Warranty include/none toggle on Step 9 (Presentation). Sits directly under
   the auto-attach banner so the rep can flip to "No warranty" when the
   customer opts out during a re-quote. Compact segmented control, mirrors
   .seg presentation-mode styling. */
.qb-wizard .qb-warranty-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
  background: var(--color-surface-alt, #f6f6f4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.qb-wizard .qb-warranty-toggle[hidden] { display: none; }
.qb-wizard .qb-warranty-toggle__opt {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: calc(var(--radius-lg) - 4px);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.qb-wizard .qb-warranty-toggle__opt:hover {
  color: var(--color-text);
}
.qb-wizard .qb-warranty-toggle__opt.is-active {
  background: #1E2A52;
  color: #fff;
  box-shadow: 0 1px 2px rgba(30, 42, 82, 0.15);
}

/* ─────────── Step 10 summary (Customer sees + Internal only) ───────────
   The classic .quote-summary aside gets relocated into Step 10. Override the
   sticky positioning and tighten spacing for phone-first stacked layout. */
.qb-wizard #qSummary.quote-summary {
  position: static;
  top: auto;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.qb-wizard .quote-summary__card {
  padding: var(--space-4);
  gap: var(--space-2);
}
.qb-wizard .quote-summary__row--hero .val {
  font-size: 1.5rem;
}

/* Preview head snapshot — mirrors the classic Internal-only summary rows in
   a tight phone-friendly card next to the customer iframe. */
.qb-wizard .qb-preview__snapshot {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface-offset, #EFEFE8);
  border: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qb-wizard .qb-preview__snap-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 12px;
}
.qb-wizard .qb-preview__snap-row .lbl {
  color: var(--color-text-muted);
}
.qb-wizard .qb-preview__snap-row .val {
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums lining-nums;
}

/* When the wizard shell is visible (opted in), hide the classic
   .quote-summary__actions row (containing #qSaveBtn + #qPrintBtn) so the
   user only sees ONE Save & score button — the wizard actionbar's, which
   correctly routes through watchForSaveSuccess() to open the preview. */
.qb-wizard:not([hidden]) ~ *,
body:has(.qb-wizard:not([hidden])) .quote-summary__actions {
  /* .quote-summary__actions is a sibling of the wizard inside .calc-quote's
     panel. When the wizard is visible the classic Save button must be
     hidden. Using :has() lets us do this without adding a body class. */
}
body:has(.qb-wizard:not([hidden])) .quote-summary__actions {
  display: none !important;
}

/* ── Step 9 (Presentation) validation states ──────────────────────────── */
.qb-wizard .qb-hint {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.28);
  color: #B91C1C;
  font-size: 13px;
  line-height: 1.4;
}
.qb-wizard .field--invalid .field__input,
.qb-wizard .field__input.is-invalid,
.qb-wizard textarea.is-invalid {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.qb-wizard .field--invalid .field__label {
  color: #B91C1C;
}
.qb-wizard .tmpl-picker.is-invalid {
  outline: 2px solid rgba(220, 38, 38, 0.35);
  outline-offset: 4px;
  border-radius: 8px;
}
.qb-wizard [data-qb-next][disabled],
.qb-wizard [data-qb-next][aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ────────────────────────────────────────────────────────────────────
   Spec 09 Wave 1 — Quote Versioning (v-chip + History drawer)
   ────────────────────────────────────────────────────────────────────
   Chip lives inline with the appbar title. Drawer is a right-side
   sliding panel with a scrim, matching the general SellWorthy modal
   pattern (payment-terms picker, service-picker). Amber "Add-on"
   accent isn't shown here — the chip only renders if the company
   already has the module. Any upsell/lock UI is a future concern.
   ──────────────────────────────────────────────────────────────── */

.qb-wizard .qb-version-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  background: #f0f7ff;
  color: #1a5fb4;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.qb-wizard .qb-version-chip:hover {
  background: #dbeaff;
  border-color: rgba(0,0,0,0.28);
}
.qb-wizard .qb-version-chip:focus-visible {
  outline: 2px solid #1a5fb4;
  outline-offset: 2px;
}
.qb-wizard .qb-version-chip[hidden] { display: none; }

/* v68: drawer-only mode — wizard shell is shown just so its drawer overlay
 * renders on top of the classic layout. Hide everything except the drawer. */
.qb-wizard[data-qb-drawer-only] {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
}
.qb-wizard[data-qb-drawer-only] > *:not(.qb-history) { display: none !important; }
.qb-wizard[data-qb-drawer-only] .qb-history { pointer-events: auto; }

/* ── History drawer ── */
.qb-wizard .qb-history[hidden] { display: none; }
.qb-wizard .qb-history {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
}
.qb-wizard .qb-history__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  cursor: pointer;
}
.qb-wizard .qb-history__panel {
  position: relative;
  width: min(760px, 95vw);
  max-width: 95vw;
  height: 100vh;
  background: #fff;
  box-shadow: -8px 0 40px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  animation: qb-history-in 220ms ease;
}
@keyframes qb-history-in {
  from { transform: translateX(20px); opacity: 0.85; }
  to   { transform: translateX(0);    opacity: 1; }
}
.qb-wizard .qb-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  gap: 12px;
}
.qb-wizard .qb-history__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-weight: 600;
}
.qb-wizard .qb-history__title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-top: 2px;
}
.qb-wizard .qb-history__x {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  color: #4b5563;
  border-radius: 6px;
}
.qb-wizard .qb-history__x:hover { background: rgba(0,0,0,0.05); }

.qb-wizard .qb-history__body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  overflow: hidden;
}
@media (max-width: 640px) {
  .qb-wizard .qb-history__body { grid-template-columns: 1fr; }
  .qb-wizard .qb-history__detail { display: none; }
}
.qb-wizard .qb-history__list {
  overflow-y: auto;
  border-right: 1px solid rgba(0,0,0,0.08);
  padding: 8px;
  background: #fafbfc;
}
.qb-wizard .qb-history__detail {
  overflow-y: auto;
  padding: 18px 20px;
  background: #fff;
}
.qb-wizard .qb-history__row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.qb-wizard .qb-history__row:hover { border-color: rgba(0,0,0,0.2); }
.qb-wizard .qb-history__row.is-selected {
  background: #eff6ff;
  border-color: #1a5fb4;
}
.qb-wizard .qb-history__row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.qb-wizard .qb-history__v {
  font-weight: 700;
  color: #1a5fb4;
  font-size: 14px;
}
.qb-wizard .qb-history__v--big { font-size: 18px; }
.qb-wizard .qb-history__total {
  font-weight: 600;
  color: #111827;
  font-variant-numeric: tabular-nums;
}
.qb-wizard .qb-history__row-meta,
.qb-wizard .qb-history__row-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 3px;
}
.qb-wizard .qb-history__loading,
.qb-wizard .qb-history__empty {
  padding: 24px 12px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
}
.qb-wizard .qb-history__detail-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* v68 (Spec 09 Wave 2): Restore-this-version button lives in its own row
 * below the totals, above the line-items table. Big, obvious primary action. */
.qb-wizard .qb-history__detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 16px 0;
}
.qb-wizard .qb-history__restore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  background: #1a5fb4;
  color: #fff;
  border: 1px solid #1a5fb4;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 60ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.qb-wizard .qb-history__restore-btn:hover:not(:disabled) {
  background: #164a91;
  border-color: #164a91;
}
.qb-wizard .qb-history__restore-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.qb-wizard .qb-history__restore-btn:focus-visible {
  outline: 2px solid #1a5fb4;
  outline-offset: 2px;
}
.qb-wizard .qb-history__restore-btn--disabled,
.qb-wizard .qb-history__restore-btn:disabled {
  background: #f3f4f6;
  color: #6b7280;
  border-color: rgba(0,0,0,0.1);
  cursor: not-allowed;
  box-shadow: none;
}
.qb-wizard .qb-history__totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  flex: 1 1 auto;
}
.qb-wizard .qb-history__totals > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qb-wizard .qb-history__totals dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  font-weight: 600;
  margin: 0;
}
.qb-wizard .qb-history__totals dd {
  margin: 0;
  font-size: 14px;
  color: #111827;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.qb-wizard .qb-history__total-row dd { color: #1a5fb4; font-weight: 700; }
.qb-wizard .qb-history__lines {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.qb-wizard .qb-history__lines th,
.qb-wizard .qb-history__lines td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  text-align: left;
  vertical-align: top;
}
.qb-wizard .qb-history__lines th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  font-weight: 700;
  background: #fafbfc;
}
.qb-wizard .qb-history__lines td:nth-child(3),
.qb-wizard .qb-history__lines td:nth-child(4),
.qb-wizard .qb-history__lines td:nth-child(5),
.qb-wizard .qb-history__lines th:nth-child(3),
.qb-wizard .qb-history__lines th:nth-child(4),
.qb-wizard .qb-history__lines th:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.qb-wizard .qb-history__foot {
  padding: 12px 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: #fafbfc;
}
.qb-wizard .qb-history__foot-note {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}

/* ============================================================================
   v79 (Wave 1 — Step 10 becomes Pricing Review)
   -----------------------------------------------------------------------------
   • .pricing-breakdown            → the cost/price table anchoring Step 10
   • .qb-step-migrated             → Step 5 stub while its cards live on Step 10
   ========================================================================== */

/* Step 5 "moved" placeholder — quiet, non-interactive card. Wave 2 removes
   Step 5 entirely; this exists so Wave 1 shipping doesn't leave an empty step. */
.qb-wizard .qb-step-migrated {
  padding: 32px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.55;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  margin: 16px 0 8px;
}

/* Pricing breakdown table — rendered at the TOP of Step 10 above #qSummary. */
.pricing-breakdown {
  /* Reuse the quote-card container styling from the classic panel, but tighten
     vertical rhythm since Step 10 stacks several priced surfaces. */
  margin: 0 0 12px;
}
.pricing-breakdown__table {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.pricing-breakdown__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 14px;
  color: #111827;
}
.pricing-breakdown__row:last-child {
  border-bottom: none;
}
.pricing-breakdown__row--muted {
  color: #9ca3af;
}
.pricing-breakdown__row--emphasis {
  font-weight: 600;
  color: #111827;
  padding-top: 10px;
  padding-bottom: 10px;
}
.pricing-breakdown__row--divider {
  border-top: 2px solid rgba(0,0,0,0.12);
  margin-top: 4px;
}
.pricing-breakdown__row--total {
  font-weight: 700;
  font-size: 15px;
  color: #01696F;                /* Nexus primary — pops from neutral rows */
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 2px solid #01696F;
  border-bottom: none;
}
.pricing-breakdown__lbl {
  color: inherit;
}
.pricing-breakdown__val {
  color: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  min-width: 100px;
}

/* Warranty add-ons section below the totals — labeled header + rows. */
.pricing-breakdown__section-h {
  margin-top: 18px;
  padding: 8px 4px 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.pricing-breakdown__row--warranty {
  color: #374151;
  font-size: 14px;
}
/* Small in-row hint (e.g. "(first year included)" or "starting Year 2") —
   used inside the pricing breakdown warranty rows to communicate WHEN a
   warranty amount applies without stealing focus from the dollar value. */
.pricing-breakdown__hint {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #01696F;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Mobile — same layout, slightly smaller type. */
@media (max-width: 640px) {
  .pricing-breakdown__row {
    padding: 7px 2px;
    font-size: 13px;
  }
  .pricing-breakdown__row--emphasis {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .pricing-breakdown__row--total {
    font-size: 14px;
  }
}

.qb-wizard .qb-step-migrated__body {
  margin: 0 0 8px;
  font-size: 15px;
  color: #374151;
}
.qb-wizard .qb-step-migrated__hint {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

/* ===========================================================================
   Spec 14 Phase B — vertical + segment picker (wizard step 0)
   ---------------------------------------------------------------------------
   The picker is a pre-wizard gate: the stepper and actionbar are hidden while
   it's up, so this step owns the whole viewport. Two field groups sit
   side-by-side from 720px and stack below it.
   ======================================================================== */
/* Back is hidden on the picker, so drop its grid track too — otherwise the
   title and the actions each shift one column left and collide. */
.qb-wizard.is-vpick .appbar { grid-template-columns: 1fr auto; }

.qb-wizard .qb-vpick__groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .qb-wizard .qb-vpick__groups {
    grid-template-columns: 2fr 1fr;
    align-items: start;
    gap: var(--space-8);
  }
}

.qb-wizard .qb-vpick__group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0; /* let the tile grid shrink inside the column */
}
.qb-wizard .qb-vpick__legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.qb-wizard .qb-vpick__req {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  padding: 1px 8px;
}
.qb-wizard .qb-vpick__hint {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ---------- Trade tiles ---------- */
.qb-wizard .qb-vpick__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.qb-wizard .qb-vtile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
  min-height: 84px;
  padding: var(--space-4);
  text-align: left;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.qb-wizard .qb-vtile:hover:not(.is-disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.qb-wizard .qb-vtile:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.qb-wizard .qb-vtile.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.qb-wizard .qb-vtile__label {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.qb-wizard .qb-vtile.is-disabled {
  cursor: not-allowed;
  background: var(--color-surface-2);
  border-color: var(--color-divider);
  border-style: dashed;
}
.qb-wizard .qb-vtile.is-disabled .qb-vtile__label { color: var(--color-text-faint); }
.qb-wizard .qb-vtile__soon,
.qb-wizard .qb-vtile__addon {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 9px;
}
/* Legacy "Coming soon" pill — amber warning tone. Retained so any older
   builds cached on device still render sensibly. */
.qb-wizard .qb-vtile__soon {
  color: #8A5A0A;
  background: var(--color-warning-highlight);
}
/* v98/v100 (Aug 2026) — "Add-on" pill on inactive verticals. Matches
   .nav-menu__addon-badge (see style.vXX.css) so the pill is visually
   consistent everywhere it appears — the nav's Schedule Project item,
   the vertical picker's inactive tiles, etc. Any future change should
   update BOTH rules together. */
.qb-wizard .qb-vtile__addon {
  color: var(--color-accent, #B36A05);
  background: color-mix(in srgb, var(--color-accent, #F4A22A) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent, #F4A22A) 45%, transparent);
}

/* ---------- Customer-type chips ---------- */
.qb-wizard .qb-vpick__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.qb-wizard .qb-vchip {
  flex: 1 1 auto;
  min-width: 120px;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.qb-wizard .qb-vchip:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.qb-wizard .qb-vchip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.qb-wizard .qb-vchip.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ---------- Error + actions ---------- */
.qb-wizard .qb-vpick__error {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-error);
  background: var(--color-error-highlight);
  border: 1px solid var(--color-error);
  border-radius: 10px;
}
.qb-wizard .qb-vpick__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-8);
}
.qb-wizard .qb-vpick__continue {
  min-width: 200px;
}
.qb-wizard .qb-vpick__continue:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .qb-wizard .qb-vpick__tiles { grid-template-columns: 1fr; }
  .qb-wizard .qb-vpick__actions { margin-top: var(--space-6); }
  .qb-wizard .qb-vpick__continue { width: 100%; min-width: 0; }
}

/* ===========================================================================
   Spec 14 Phase B follow-up — Customer type on step 1 is a summary, not a
   second editor
   ---------------------------------------------------------------------------
   The classic Residential/Commercial radios stay in the DOM (they are still
   the value app.js reads on save) but are hidden inside the wizard, where the
   read-only row below stands in for them. Scoped to the one fieldset by id —
   .segmented--lead is shared with the financing and prior-quote controls.
   ======================================================================== */
.qb-wizard #qCustomerTypeRow { display: none; }

.qb-wizard .qb-custtype {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.qb-wizard .qb-custtype__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.qb-wizard .qb-custtype__value {
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qb-wizard .qb-custtype__edit {
  margin-left: auto;
  flex-shrink: 0;
  background: var(--color-surface);
}

/* ============================================================================
 * Spec 36 v345 — SellWorthy circle toggle (`.sw-check`).
 *
 * Used on the wizard's "Project address is same as billing" toggle. Native
 * checkbox stays for a11y + form state; the visible ring is a decorative
 * overlay that swaps in the favicon when checked.
 *
 * The circle is 22px, ring uses the SellWorthy brand accent, and the favicon
 * fades in at 90% opacity when checked. Keyboard focus draws a matching ring
 * offset so the toggle is usable with Tab.
 * ==========================================================================*/
.qb-wizard .sw-check {
  cursor: pointer;
  user-select: none;
}
.qb-wizard .sw-check__input {
  /* Visually hidden but focusable & discoverable by assistive tech. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.qb-wizard .sw-check__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border, #D4D1CA);
  background: var(--color-surface, #F9F8F5);
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  flex-shrink: 0;
}
.qb-wizard .sw-check__mark {
  width: 14px;
  height: 14px;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
}
.qb-wizard .sw-check__input:checked ~ .sw-check__circle {
  border-color: var(--color-brand, #01696F);
  background: var(--color-surface, #F9F8F5);
}
.qb-wizard .sw-check__input:checked ~ .sw-check__circle .sw-check__mark {
  opacity: 1;
  transform: scale(1);
}
.qb-wizard .sw-check__input:focus-visible ~ .sw-check__circle {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand, #01696F) 30%, transparent);
}
.qb-wizard .sw-check:hover .sw-check__circle {
  border-color: var(--color-brand-hover, var(--color-brand, #01696F));
}