/* ═══════════════════════════════════════════════════════════════════════════
   IOX Projects — Quotation Builder surface restyle
   ───────────────────────────────────────────────────────────────────────────
   A pure presentation layer, loaded LAST on quotation.html. It changes how the
   builder looks, never what it does: no markup, no ids, no classes, no script.
   Every rule here overrides an existing selector — remove the <link> and the
   builder returns to its previous skin untouched.

   The visual language is lifted from Portal's proposal editor and retranslated
   into IOX's palette:

     Portal                          →  IOX
     accent  var(--br-500) (orange)        →  #1171E4 (brand blue)
     dark chrome = left rail         →  dark chrome = top bar (app-wide already)
     canvas  #F6F6F7                 →  kept
     card    white · r12 · one soft shadow · NO border   → kept
     text    gray by default, black only for values      → kept
     controls = pills (r999), gray fill, no hard borders → kept
     section headings pin under the header as you scroll → kept

   ⚠️ Deliberately NOT touched: #quotation-export-zone and the .q-td / .q-td-head
   / .q-preview-* classes it shares with the PDF templates. Restyling those would
   change exported documents, which is out of scope.

   ⚠️ On !important: cio.css re-lights this page with a block of !important rules
   (its "Quotation Builder — white cards, BLUE stepper on light" section). Where a
   declaration below carries !important it is because cio.css claims that exact
   property; the .wizard-main prefix then wins the specificity tie. Everywhere
   else plain declarations are used on purpose.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --qb-canvas:      var(--bg-base);   /* page behind the cards */
  --qb-surface:     var(--bg-surface);
  --qb-band:        var(--bg-raised);   /* filled pills, secondary buttons */
  --qb-band-soft:   var(--bg-raised);   /* input fills, hover */
  --qb-line:        var(--bd-default);   /* hairlines — used instead of card borders */

  /* Ink — the ratio matters more than the values: gray is the default, */
  /* near-black is reserved for numbers and answers.                     */
  --qb-ink:         var(--tx-primary);
  --qb-ink-soft:    var(--tx-secondary);
  --qb-muted:       var(--tx-secondary);
  --qb-muted-2:     var(--tx-tertiary);

  /* Brand */
  --qb-accent:      var(--br-500);
  --qb-accent-dark: var(--br-600);
  --qb-accent-wash: rgba(89,136,180,0.08);
  --qb-navy:        var(--bg-rail);

  /* Shape + depth — one shadow for the whole page, no borders on cards */
  --qb-shadow:      0 3px 10px rgba(0,0,0,0.05);
  --qb-shadow-pop:  0 1px 6px rgba(0,0,0,0.06), 0 2px 32px rgba(0,0,0,0.16);
  --qb-r:           var(--r-sm);
  --qb-r-sm:        var(--r-sm);
  --qb-pill:        999px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1 · Canvas
   ═══════════════════════════════════════════════════════════════════════════ */
body { background: var(--qb-canvas); }

.wizard-main {
  background: var(--qb-canvas) !important;
  max-width: 1400px !important;
  margin: 0 auto;
  gap: 0;
  /* `overflow: hidden` (set when this container still had rounded corners)
     turns .wizard-main into a scrollport, which silently disables position:sticky
     for everything inside it — the step nav and the pinned heading included.
     `clip` keeps the same visual clamp without creating a scroll container. */
  overflow: visible;
  overflow-x: clip;
}

.wizard-content-area {
  background: var(--qb-canvas);
  padding: 26px 40px 72px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · Top bar
   The navy stays — it is the app-wide chrome (cio.css --topbar-bg) and the
   builder must not read as a different product. Only the furniture on it is
   re-cut to Portal's proportions: pill controls, tighter type, no boxy buttons.
   ═══════════════════════════════════════════════════════════════════════════ */
.qz-header {
  height: 60px;
  background: var(--qb-navy);
  border-bottom: none;
  padding: 0 22px;
  gap: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.qz-header-back {
  font-size: 13px;
  font-weight: 500;
  padding: 5px 11px 5px 9px;
  border-radius: var(--qb-pill);
  transition: background .15s ease, color .15s ease;
}
.qz-header-back:hover { background: var(--bg-raised); }
.qz-header-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
/* The document reference sits beside its name, quiet — the name is the thing
   you recognise, the ref is what you quote back to a client. */
.qz-header-ref {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tx-tertiary);
  white-space: nowrap;
}
.qz-header-ref:empty { display: none; }

.qz-header-status {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.1px;
  background: var(--bg-raised);
  padding: 5px 12px;
  border-radius: var(--qb-pill);
}
.qz-header-btn {
  border: none;
  background: var(--bg-raised);
  border-radius: var(--qb-pill);
  padding: 8px 10px;
}
.qz-header-btn:hover { background: var(--bg-overlay); border-color: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   3 · Stepper → anchor-nav
   Portal's section nav is chrome-less: no panel, no border, gray labels, and
   the current section is simply black + bold with a thin bar beside it. The
   numbered circles stay (they carry completed/pending state, which Portal's
   nav does not need to) but shrink to a quiet marker.
   ═══════════════════════════════════════════════════════════════════════════ */
.wizard-main .stepper {
  width: 232px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 34px 18px 34px 26px;
  gap: 1px;
  top: 60px;
  min-height: calc(100vh - 60px);
}
.wizard-main .stepper-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--qb-muted) !important;
  margin-bottom: 14px;
  padding-left: 13px;
}

.wizard-main .step {
  gap: 11px;
  padding: 7px 13px;
  border-radius: var(--qb-r-sm);
  transition: color .15s ease, background .15s ease !important;
}
.wizard-main .step:hover { background: rgba(0,0,0,0.035) !important; }
.wizard-main .step.active {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--qb-ink) !important;
}
/* The active marker is the bar, not a filled block. */
.wizard-main .step.active::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--qb-accent) !important;
}
.wizard-main .step.completed { color: var(--qb-muted-2) !important; }

.wizard-main .step-circle {
  width: 24px; height: 24px;
  border: none !important;
  background: var(--qb-band) !important;
  color: var(--qb-muted) !important;
  font-size: 11px;
  font-weight: 700;
}
.wizard-main .step.active .step-circle {
  background: var(--qb-accent) !important;
  color: var(--tx-primary) !important;
  box-shadow: none !important;
  transform: none;
}
.wizard-main .step.completed .step-circle {
  background: var(--qb-accent-wash) !important;
  color: var(--qb-accent) !important;
}
.wizard-main .step .step-label {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.1px;
  color: var(--qb-muted) !important;
}
.wizard-main .step.active .step-label { font-weight: 700; color: var(--qb-ink) !important; }
.wizard-main .step.completed .step-label { color: var(--qb-ink-soft) !important; }
.wizard-main .step-sublabel { font-size: 11.5px; color: var(--qb-muted) !important; margin-top: 1px; }
.wizard-main .step.active .step-sublabel { color: var(--qb-muted) !important; }
.wizard-main .step.completed .step-sublabel { color: var(--qb-muted) !important; }

/* The connector dashes belong to the old boxed stepper. */
.wizard-main .step + .step::before { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   4 · Panel heading — the signature move
   Portal pins each section title under the header while you scroll its body,
   so you always know which part of the proposal you are editing. Same here:
   the step title parks below the 60px top bar on the canvas colour.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Three things silently disabled sticky here and all three have to go:
   style.css puts `overflow:hidden` on .wizard-panel (a leftover from when the
   panel was itself a bordered card), and cio.css animates .wizard-content-area
   with a transform that fill-mode `both` leaves as an identity matrix — a
   transformed ancestor becomes the containing block, which pins the heading to
   the panel instead of the viewport. The panel keeps its entrance motion, just
   as an opacity fade with no transform in it. */
.wizard-panel { overflow: visible; }
.wizard-content-area { animation: none !important; }
.wizard-panel.active { animation: qbPanelFade .22s ease-out both; }
@keyframes qbPanelFade { from { opacity: 0; } to { opacity: 1; } }

/* Only the section's OWN heading pins. A descendant selector here would also
   catch any sub-heading a renderer emits, and they would stack at the same
   offset. */
.wizard-panel > h2,
.wizard-panel > .q-page-title {
  position: sticky;
  top: 60px;
  z-index: 20;
  margin: 0;
  padding: 16px 0 10px;
  background: var(--qb-canvas);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--qb-ink);
}
.wizard-panel h2 + p {
  font-size: 14px;
  line-height: 20px;
  color: var(--qb-muted);
  margin: 0 0 22px;
}
.wizard-panel h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--qb-ink);
  margin: 0 0 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5 · Sub-tabs → segmented pill
   renderGroupTabs() writes its styles inline, so these need !important. The
   underline row becomes Portal's grey segmented control.
   ═══════════════════════════════════════════════════════════════════════════ */
#wz-subtabs > div {
  display: inline-flex !important;
  gap: 2px !important;
  padding: 3px !important;
  margin: 0 0 22px !important;
  border-bottom: none !important;
  background: var(--qb-band) !important;
  border-radius: var(--qb-pill) !important;
}
#wz-subtabs button {
  border: none !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  border-radius: var(--qb-pill) !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
  color: var(--qb-muted-2) !important;
  transition: background .15s ease, color .15s ease;
}
#wz-subtabs button:hover { color: var(--qb-ink) !important; }
/* Active is whatever renderGroupTabs painted with the steel token. The selector
   matches the literal text of the inline style, so it has to track what the JS
   writes — it used to look for #1171E4. */
#wz-subtabs button[style*="var(--br-500)"] {
  background: var(--bg-surface) !important;
  color: var(--qb-ink) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · Cards — borderless, one soft shadow
   ═══════════════════════════════════════════════════════════════════════════ */
.wizard-main .wz-card,
.wizard-main .q-card,
.wizard-main .floor-card {
  background: var(--qb-surface) !important;
  border: none !important;
  border-radius: var(--qb-r) !important;
  box-shadow: var(--qb-shadow) !important;
  margin-bottom: 16px;
  transition: box-shadow .2s ease;
}
/* Portal's cards do not lift or glow on hover — they are containers, not targets. */
.wizard-main .wz-card:hover,
.wizard-main .q-card:hover,
.wizard-main .floor-card:hover {
  border-color: transparent !important;
  box-shadow: var(--qb-shadow) !important;
  transform: none;
}

.wizard-main .wz-card-header,
.wizard-main .q-card-header,
.wizard-main .floor-header {
  padding: 15px 22px;
  background: transparent;
  border-bottom: 1px solid var(--qb-line);
  border-radius: 0;
}
.wizard-main .q-card-header:hover { background: rgba(0,0,0,0.015); }
.wizard-main .q-card-header.q-open { border-bottom: 1px solid var(--qb-line); }

/* Titles read as headings, not as micro-caps: Portal keeps caps for field
   labels only, so section names stay sentence-case and heavy. */
.wizard-main .wz-card-header-title,
.wizard-main .q-card-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.25px;
  text-transform: none;
  color: var(--qb-ink);
  gap: 9px;
}
.wizard-main .wz-card-header-title svg { color: var(--qb-muted); }
.wizard-main .wz-card-header-meta { font-size: 13px; color: var(--qb-muted); }
.wizard-main .floor-header { font-size: 15px; font-weight: 700; color: var(--qb-ink); }

.wizard-main .wz-card-body,
.wizard-main .q-card-body { padding: 18px 22px 20px; }
.wizard-main .wz-card-footer {
  padding: 13px 22px;
  background: var(--bg-surface);
  border-top: 1px solid var(--qb-line);
}
.wizard-main .wz-card-muted { background: var(--bg-surface); }

/* Room tiles — soft fills, no outlines */
.wizard-main .room-list { padding: 18px 22px 22px; gap: 12px; }
.wizard-main .room-card {
  background: var(--qb-band-soft);
  border: 1px solid transparent;
  border-radius: var(--qb-r-sm);
  padding: 14px;
  transition: background .15s ease;
}
.wizard-main .room-card:hover { background: var(--bg-raised); border-color: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   7 · Stats
   ═══════════════════════════════════════════════════════════════════════════ */
.wizard-main .wz-stat {
  background: var(--qb-surface) !important;
  border: none !important;
  border-radius: var(--qb-r) !important;
  box-shadow: var(--qb-shadow) !important;
  padding: 18px 20px;
  gap: 5px;
}
.wizard-main .wz-stat:hover {
  border-color: transparent !important;
  box-shadow: var(--qb-shadow) !important;
  transform: none;
}
.wizard-main .wz-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--qb-muted) !important;
}
.wizard-main .wz-stat-value {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--qb-ink) !important;
  font-variant-numeric: tabular-nums;
}
.wizard-main .wz-stat-sub { font-size: 12.5px; color: var(--qb-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   8 · Label/value rows — gray question, black answer
   ═══════════════════════════════════════════════════════════════════════════ */
.wizard-main .wz-row { padding: 7px 0; }
.wizard-main .wz-row-label,
.wizard-main .q-calc-label { font-size: 14px; color: var(--qb-muted); }
.wizard-main .wz-row-value,
.wizard-main .q-calc-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--qb-ink);
  font-variant-numeric: tabular-nums;
}
.wizard-main .wz-row-border,
.wizard-main .q-calc-border { border-top: 1px solid var(--qb-line); }
.wizard-main .wz-row-bold .wz-row-label,
.wizard-main .q-calc-bold .q-calc-label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--qb-ink);
}
.wizard-main .wz-row-bold .wz-row-value,
.wizard-main .q-calc-bold .q-calc-value {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--qb-ink);
}
.wizard-main .q-calc { padding: 6px 0; }
.wizard-main .q-calc-indent .q-calc-label,
.wizard-main .q-calc-indent .q-calc-value { font-size: 13px; color: var(--qb-muted); }
.wizard-main .q-calc-indent .q-calc-value { font-weight: 600; }

/* Micro-caps: the one place uppercase survives. */
.wizard-main .q-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--qb-muted);
  margin: 18px 0 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9 · Forms — filled, borderless at rest; the ring appears on focus
   ═══════════════════════════════════════════════════════════════════════════ */
.wizard-main .form-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--qb-muted);
  margin-bottom: 7px;
}
.wizard-main .form-control,
.wizard-main input[type="text"],
.wizard-main input[type="email"],
.wizard-main input[type="number"],
.wizard-main input[type="search"],
.wizard-main select,
.wizard-main textarea {
  height: 42px;
  font-size: 14px;
  padding: 0 14px;
  background: var(--qb-band-soft) !important;
  border: 1px solid transparent !important;
  border-radius: var(--qb-r-sm) !important;
  color: var(--qb-ink) !important;
  font-weight: 500;
}
.wizard-main .form-control:hover,
.wizard-main input[type="text"]:hover,
.wizard-main select:hover,
.wizard-main textarea:hover { background: var(--bg-raised) !important; border-color: transparent !important; }
.wizard-main .form-control:focus,
.wizard-main input:focus:not([type="checkbox"]):not([type="radio"]),
.wizard-main select:focus,
.wizard-main textarea:focus {
  background: var(--bg-surface) !important;
  border-color: var(--qb-accent) !important;
  box-shadow: 0 0 0 3px var(--qb-accent-wash) !important;
}
.wizard-main .form-control::placeholder { color: var(--qb-muted) !important; font-weight: 400; }
.wizard-main textarea.form-control { min-height: 104px; padding: 11px 14px; line-height: 20px; }
.wizard-main .form-group { margin-bottom: 20px; }

/* ═══════════════════════════════════════════════════════════════════════════
   10 · Buttons — primary is a solid pill, secondary is a gray pill
   ═══════════════════════════════════════════════════════════════════════════ */
.wizard-main .btn,
.wizard-main .wizard-footer .btn {
  height: 38px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
  border-radius: var(--qb-pill) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease;
}
.wizard-main .btn-primary,
.wizard-main button.btn-primary,
.wizard-main .wizard-footer .btn-primary {
  /* The one action on the step: the brightest surface, carrying no hue.
     Steel is reserved for selection (the active step circle, the tab underline),
     so a steel-filled CTA reads as "selected" and only clears 3.1:1 anyway. */
  background: var(--ac-fill) !important;
  color: var(--ac-ink) !important;
  border-color: var(--ac-fill) !important;
}
.wizard-main .btn-primary:hover,
.wizard-main .wizard-footer .btn-primary:hover {
  background: var(--ac-hover) !important;
  color: var(--ac-ink) !important;
  border-color: var(--ac-hover) !important;
  box-shadow: none !important;
  transform: none;
}
.wizard-main .btn-outline,
.wizard-main .btn-secondary,
.wizard-main .wizard-footer .btn-outline {
  background: var(--qb-band) !important;
  color: var(--qb-ink) !important;
  border-color: transparent !important;
}
.wizard-main .btn-outline:hover,
.wizard-main .btn-secondary:hover,
.wizard-main .wizard-footer .btn-outline:hover {
  background: var(--bd-default) !important;
  color: var(--qb-ink) !important;
  border-color: transparent !important;
}
.wizard-main .btn:disabled { opacity: .45; }

.wizard-main .btn-icon { border-radius: var(--qb-pill) !important; color: var(--qb-muted); }

.wizard-main .wizard-footer {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--qb-line);
}

/* ═══════════════════════════════════════════════════════════════════════════
   11 · Tags, empty states
   ═══════════════════════════════════════════════════════════════════════════ */
.wizard-main .wz-tag,
.wizard-main .q-tag {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--qb-pill);
  background: var(--qb-band);
  color: var(--qb-muted-2);
}

.wizard-main .wz-empty {
  background: var(--qb-surface);
  border: none;
  border-radius: var(--qb-r);
  box-shadow: var(--qb-shadow);
  padding: 52px 32px;
  color: var(--qb-muted);
}
.wizard-main .wz-empty-text { font-size: 14px; color: var(--qb-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   12 · Single-page scroll mode
   ───────────────────────────────────────────────────────────────────────────
   qb-scroll.js adds .qb-scroll to <body>, so none of this applies unless that
   script is loaded — the wizard layout survives underneath, intact.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Every section on screen at once. Beats .wizard-panel.active on specificity;
   panel-3 stays hidden because its inline `display:none !important` outranks
   any stylesheet rule, which is exactly what we want — renderStep(3) reassigns
   the step pointer and must never run. */
body.qb-scroll .wizard-panel { display: block; }
body.qb-scroll .wizard-panel {
  margin-bottom: 46px;
  scroll-margin-top: 78px;   /* anchor scrolling clears the sticky header */
}
body.qb-scroll .wizard-panel:last-of-type { margin-bottom: 8px; }

/* The Tech Report's title lives in a flex row with its buttons rather than in a
   bare h2, so it needs the pin applied to the row. */
body.qb-scroll #panel-10 > div:first-child {
  position: sticky;
  top: 60px;
  z-index: 20;
  background: var(--qb-canvas);
  padding: 16px 0 10px;
  margin-bottom: 18px !important;
}

/* Sub-tabs are meaningless once Devices / Manpower / Panels are all visible. */
body.qb-scroll #wz-subtabs { display: none; }

/* The rail is now an anchor nav for nine sections — it needs to scroll itself
   on short viewports rather than push the page down. */
body.qb-scroll .wizard-main .stepper {
  max-height: calc(100vh - 60px);
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
body.qb-scroll .wizard-main .stepper::-webkit-scrollbar { width: 4px; }
body.qb-scroll .wizard-main .stepper::-webkit-scrollbar-thumb {
  background: var(--bd-default); border-radius: 2px;
}

/* A section whose prerequisites aren't met yet. Replaces the old "you may not
   go there" toast with the reason, in place, where the section will appear. */
.qb-locked {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 22px;
  border-radius: var(--qb-r);
  background: var(--qb-surface);
  box-shadow: var(--qb-shadow);
  color: var(--qb-muted);
  font-size: 14px;
  line-height: 20px;
}
.qb-locked svg { flex-shrink: 0; color: var(--tx-tertiary); }

/* Save / Create ride along at the bottom instead of ending the wizard. */
body.qb-scroll .wizard-footer {
  position: sticky;
  bottom: 0;
  z-index: 30;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 0;
  background: linear-gradient(to top, var(--qb-canvas) 62%, rgba(246,246,247,0));
  border-top: none;
}
body.qb-scroll #btn-prev { display: none; }

/* #alert-container sits above the first section, so on a long page an alert
   would fire somewhere the user is not looking. */
body.qb-scroll #alert-container {
  position: fixed;
  top: 74px;
  right: 22px;
  z-index: 200;
  width: min(380px, calc(100vw - 44px));
}
body.qb-scroll #alert-container:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   13 · Mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* The desktop rules above are all .wizard-main-prefixed, so the phone layout
     has to restate the geometry at the same specificity — a media query on its
     own does not outrank them. */
  .wizard-main .stepper {
    width: 100%;
    min-height: auto;
    position: static;
    top: auto;
    padding: 8px 12px;
    background: var(--qb-canvas) !important;
    border-bottom: 1px solid var(--qb-line) !important;
    gap: 4px;
  }
  .wizard-main .step { padding: 6px 8px; }
  .wizard-main .step.active::after { display: none; }
  .wizard-main .step.active { background: rgba(89,136,180,0.10) !important; border-radius: var(--qb-r-sm); }
  .wizard-content-area { padding: 16px 16px 56px; }
  .wizard-panel h2 { position: static; font-size: 21px; padding: 4px 0 8px; }
  .wizard-main .wz-card-body,
  .wizard-main .q-card-body { padding: 15px 16px 17px; }
  .wizard-main .wz-card-header,
  .wizard-main .q-card-header,
  .wizard-main .floor-header { padding: 13px 16px; }
  .wizard-main .room-list { padding: 14px 16px 16px; }
  #wz-subtabs > div { display: flex !important; width: 100%; overflow-x: auto; }

  /* Scroll mode: the rail becomes a horizontally scrolling strip of nine
     sections pinned under the header, so it stays reachable while you scroll. */
  body.qb-scroll .wizard-main .stepper {
    position: sticky;
    top: 60px;
    z-index: 40;
    max-height: none;
    overflow-y: hidden;
    overflow-x: auto;
  }
  body.qb-scroll .wizard-panel { scroll-margin-top: 132px; margin-bottom: 32px; }
  body.qb-scroll .wizard-panel > h2,
  body.qb-scroll .wizard-panel > .q-page-title,
  body.qb-scroll #panel-10 > div:first-child { position: static; }
  body.qb-scroll #alert-container { top: 128px; right: 12px; left: 12px; width: auto; }

  /* At 390px the header items no longer fit on one line, and the overflow put a
     horizontal scrollbar on the whole page. The running total earns its place
     more than the autosave status, so that is what goes. */
  .qz-header { padding: 0 12px; gap: 8px; overflow: hidden; }
  /* Collapse the back link to its arrow — font-size:0 drops the word, the icon
     is sized back up. That buys the ~70px the title needs to not be clipped. */
  .qz-header-back { padding: 6px 8px; font-size: 0; }
  .qz-header-back svg { display: block; width: 17px; height: 17px; }
  .qz-header-sep { display: none; }
  .qz-header-title { font-size: 14px; min-width: 0; }
  body.qb-scroll #save-status { display: none !important; }
  #qz-live-total { margin-right: 8px !important; }

  /* The rail scrolls sideways, so each section may take the width its label
     needs — the fixed 52px min-width from the wizard made nine longer labels
     run into each other. */
  body.qb-scroll .wizard-main .step {
    min-width: 0;
    flex: 0 0 auto;
    padding: 6px 12px;
  }
  body.qb-scroll .wizard-main .step-label { font-size: 12px; }
}