/* ═══════════════════════════════════════════════════════════════
   PestScope — Visit Wizard REDESIGN
   Fresh wizard identity that wraps every form step. Lives INSIDE the
   app shell. Harmonises around the FloorPlanScene (untouched).
   100% token-driven — every value resolves to a tokens.css variable.
   All classes are vw-* prefixed to avoid colliding with existing CSS.
   Source: Claude Design handoff-wizard (project PestScope).
   ═══════════════════════════════════════════════════════════════ */

/* ── Full-bleed escape: the wizard fills the shell content area edge-to-edge
   so the sticky header/footer pin to the viewport, exactly like the
   .scene-host escape. Keyed on .vw via :has() so every other page keeps its
   native padding. Mobile shell handled in the mobile block below. ── */
.app-shell__page:has(.vw),
.app-shell__page--tablet:has(.vw) {
  padding: 0;
  max-width: none;
  height: 100vh;
  overflow: hidden;
}

/* ── Wizard region: fills the shell content area ── */
.vw {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--page-bg);
  position: relative;
}

/* ───────────────────────── HEADER ───────────────────────── */
.vw-head {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 6;
}
.vw-head__bar {
  display: flex;
  align-items: center;
  gap: var(--space-base);
  padding: var(--space-md) var(--space-xl);
}
.vw-head__ctx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.vw-head__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-size: var(--text-12); font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.vw-head__eyebrow .pill { height: 20px; }
.vw-head__title {
  font-size: var(--text-18); font-weight: 700; color: var(--text-primary);
  letter-spacing: -0.01em; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vw-head__meta { font-size: var(--text-13); color: var(--text-secondary); }
.vw-head__right { display: flex; align-items: center; gap: var(--space-base); flex-shrink: 0; }
.vw-head__counter {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-size: var(--text-12); color: var(--text-tertiary); letter-spacing: 0.02em;
}
.vw-head__counter b {
  font-size: var(--text-15); font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* thin overall progress meter sitting on the header's bottom edge */
.vw-meter { height: 3px; background: var(--surface-2); width: 100%; overflow: hidden; }
.vw-meter__fill {
  height: 100%; background: var(--primary);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  transition: width var(--dur-slow) var(--ease-out);
}

/* ───────────────────────── BODY (rail + content) ───────────────────────── */
.vw-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 268px 1fr;
}

/* ── Vertical step rail ── */
.vw-rail {
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-xl) var(--space-base);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  background: linear-gradient(var(--page-bg), var(--page-bg));
}
.vw-rail__group {
  font-size: var(--text-12); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-tertiary);
  padding: 0 var(--space-md) var(--space-sm);
}
.vw-rail__step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  position: relative;
  text-align: left;
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.vw-rail__step:not(:disabled):hover { background: var(--surface); }
.vw-rail__step:disabled { cursor: default; }
.vw-rail__step.is-current { background: var(--surface); }
.vw-rail__step.is-current::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: var(--radius-pill); background: var(--primary);
}

/* node + connector */
.vw-rail__node {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-13); font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text-secondary);
  position: relative; flex-shrink: 0; z-index: 1;
}
.vw-rail__node svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vw-rail__step:not(:last-child) .vw-rail__node::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 1.5px; height: calc(var(--space-sm) * 2 + var(--space-2xs));
  background: var(--border-subtle);
}
.vw-rail__step.is-done .vw-rail__node { background: var(--primary); border-color: var(--primary); color: var(--text-on-primary); }
.vw-rail__step.is-done .vw-rail__node::after { background: var(--primary); }
.vw-rail__step.is-current .vw-rail__node { border-color: var(--primary); color: var(--primary); background: var(--surface-soft); }
.vw-rail__step.is-skip .vw-rail__node { border-style: dashed; color: var(--text-tertiary); }

.vw-rail__body { display: flex; flex-direction: column; gap: 1px; padding-top: 3px; min-width: 0; }
.vw-rail__label {
  font-size: var(--text-14); font-weight: 600; color: var(--text-secondary);
  line-height: 1.3; text-wrap: balance;
}
.vw-rail__step.is-current .vw-rail__label { color: var(--text-primary); }
.vw-rail__step.is-done .vw-rail__label { color: var(--text-secondary); }
.vw-rail__sub { font-size: var(--text-12); color: var(--text-tertiary); }
.vw-rail__sub--canvas { color: var(--primary); font-weight: 600; }

/* ── Content column ── */
.vw-content {
  overflow-y: auto;
  padding: var(--space-2xl) var(--space-2xl) var(--space-3xl);
  min-width: 0;
  /* Center short steps in the tall content column; safe-fallback to top-align
     (and scroll) when the step is taller than the viewport. */
  display: grid;
  align-content: safe center;
}
.vw-panel { max-width: 840px; margin: 0 auto; width: 100%; }
.vw-panel--wide { max-width: 1040px; }

.vw-step__head { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.vw-eyebrow {
  font-size: var(--text-12); font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--primary);
}
.vw-title { font-size: var(--text-30); font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); line-height: 1.15; }
.vw-help { font-size: var(--text-15); color: var(--text-secondary); max-width: 60ch; text-wrap: pretty; }

/* two-column step layout (fills wide screens, no dead zone) */
.vw-cols { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-2xl); align-items: start; }
.vw-cols__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-base); }
.vw-aside { display: flex; flex-direction: column; gap: var(--space-base); position: sticky; top: 0; }

/* ───────────────────────── FOOTER NAV ───────────────────────── */
.vw-foot {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-md) var(--space-xl);
  display: flex; align-items: center; gap: var(--space-md);
  position: sticky; bottom: 0; z-index: 6;
}
.vw-foot__spacer { flex: 1; }
.vw-foot__hint { font-size: var(--text-13); color: var(--text-tertiary); margin-right: var(--space-sm); }

/* ═══════════════ MOBILE PROGRESS HEADER ═══════════════ */
.vw-mhead {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-md) var(--space-base) var(--space-sm);
  display: flex; flex-direction: column; gap: var(--space-sm);
  position: sticky; top: 0; z-index: 6;
}
.vw-mhead__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.vw-mhead__step { font-size: var(--text-15); font-weight: 700; color: var(--text-primary); }
.vw-mhead__count { font-size: var(--text-12); font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.vw-mhead__track { display: flex; gap: 4px; }
.vw-mhead__seg {
  flex: 1; height: 4px; border-radius: var(--radius-pill);
  background: var(--surface-2);
  transition: background-color var(--dur-base) var(--ease-out);
}
.vw-mhead__seg.is-done, .vw-mhead__seg.is-current { background: var(--primary); }
.vw-mhead__seg.is-current { background: var(--primary-hover); }
.vw-mhead__ctx { font-size: var(--text-12); color: var(--text-tertiary); }

/* mobile content + footer */
.vw-mbody { flex: 1; overflow-y: auto; padding: var(--space-lg) var(--space-base) var(--space-xl); }
.vw-mfoot {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-md) var(--space-base);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: center;
}
.vw-mfoot--solo { grid-template-columns: 1fr; }

/* ═══════════════ STEP 1 · START — summary ═══════════════ */
.vw-summary {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.vw-summary__row {
  display: grid; grid-template-columns: 180px 1fr; gap: var(--space-base);
  padding: var(--space-base) var(--space-lg);
  align-items: center;
}
.vw-summary__row + .vw-summary__row { border-top: 1px solid var(--border-subtle); }
.vw-summary__k { font-size: var(--text-13); font-weight: 600; color: var(--text-secondary); }
.vw-summary__v { font-size: var(--text-15); font-weight: 600; color: var(--text-primary); }
.vw-summary__v .muted { font-weight: 400; }

.vw-nextcard {
  background: var(--surface-soft);
  border: 1px solid color-mix(in oklch, var(--primary) 22%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-base) var(--space-lg);
}
.vw-nextcard__t { font-size: var(--text-13); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); }
.vw-nextcard__t svg { width: 16px; height: 16px; stroke: var(--primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vw-nextlist { display: flex; flex-direction: column; gap: var(--space-sm); }
.vw-nextlist__item { display: flex; gap: var(--space-sm); font-size: var(--text-13); color: var(--text-secondary); align-items: baseline; }
.vw-nextlist__item b { color: var(--text-primary); font-weight: 600; }
.vw-nextlist__n {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 10px; font-weight: 700; color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════ STEP 2 · ADVICE-CHECK ═══════════════ */
.vw-bar {
  display: flex; align-items: center; gap: var(--space-base);
  padding: var(--space-md) var(--space-base);
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.vw-bar__count { font-size: var(--text-14); font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.vw-bar__track { flex: 1; height: 6px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.vw-bar__fill { height: 100%; background: var(--primary); border-radius: var(--radius-pill); transition: width var(--dur-base) var(--ease-out); }

.advice {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.advice.is-resolved { opacity: 0.62; }
.advice__head {
  display: flex; align-items: flex-start; gap: var(--space-base);
  padding: var(--space-base) var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}
.advice__head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.advice__title { font-size: var(--text-15); font-weight: 700; color: var(--text-primary); }
.advice__meta { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-12); color: var(--text-tertiary); }
.advice__meta b { color: var(--text-secondary); font-weight: 600; }
.advice__body { padding: var(--space-base) var(--space-lg); font-size: var(--text-14); color: var(--text-primary); line-height: 1.55; }

.advice__quote {
  margin: 0 var(--space-lg) var(--space-base);
  padding: var(--space-md) var(--space-base);
  background: var(--status-red-soft);
  border-left: 3px solid var(--status-red);
  border-radius: var(--radius-md);
  font-size: var(--text-13); color: var(--text-primary); line-height: 1.5;
}
.advice__quote-k { font-size: var(--text-12); font-weight: 700; color: var(--status-red); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; }

.advice__provenance {
  margin: 0 var(--space-lg) var(--space-base);
  padding: var(--space-sm) var(--space-base);
  background: var(--status-green-soft);
  border-left: 3px solid var(--status-green);
  border-radius: var(--radius-md);
  font-size: var(--text-13); color: var(--text-primary); line-height: 1.5;
  display: flex; align-items: center; gap: var(--space-sm);
}
.advice__provenance svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--status-green); }

.advice__reason {
  margin: 0 var(--space-lg) var(--space-base);
  display: none; flex-direction: column; gap: 6px;
}
.advice.show-reason .advice__reason { display: flex; }
.advice__actions {
  display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-2);
}
.advice__actions .spacer { flex: 1; }
.advice__reject { display: flex; gap: var(--space-sm); flex: 1 1 auto; min-width: 0; align-items: center; }
.advice__done {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--text-13); font-weight: 600; color: var(--status-green);
}
.advice__done svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════════ STEP 3 · PLATTEGROND KIEZEN ═══════════════ */
.planpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-base); }
.planpick__card {
  background: var(--surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-base);
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--space-md);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.planpick__card:hover { border-color: var(--primary); transform: translateY(-2px); }
.planpick__thumb {
  height: 96px; border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(0deg, var(--border-subtle) 0, var(--border-subtle) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, var(--border-subtle) 0, var(--border-subtle) 1px, transparent 1px, transparent 18px),
    var(--surface-2);
  border: 1px solid var(--border-subtle);
  position: relative; overflow: hidden;
}
.planpick__name { font-size: var(--text-15); font-weight: 700; color: var(--text-primary); }
.planpick__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.planpick__count { font-size: var(--text-13); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.planpick__count b { color: var(--text-primary); font-weight: 700; }
.planpick__ring { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-12); font-weight: 700; }
.planpick__ring svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* tiny room glyphs inside the picker thumbnail (wizard-local) */
.vw .canvas-room {
  position: absolute; border: 1.5px solid var(--text-tertiary);
  border-radius: 2px; background: transparent;
}

/* ═══════════════ STEP 5 · REPORT (Afsluiten) ═══════════════ */
.vw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-base); }
.vw-stat {
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-base) var(--space-lg);
  display: flex; flex-direction: column; gap: 4px;
}
.vw-stat__v { font-size: var(--text-30); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.vw-stat__l { font-size: var(--text-12); font-weight: 600; color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; }
.vw-stat--warn .vw-stat__v { color: var(--status-orange); }
.vw-stat--ok .vw-stat__v { color: var(--status-green); }

.vw-snippets { display: none; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-sm); }
.vw-snippets.is-open { display: flex; }
.vw-snippet {
  text-align: left; font: inherit; cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--text-13);
  display: flex; align-items: center; gap: var(--space-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.vw-snippet:hover { border-color: var(--primary); }
.vw-snippet svg { width: 14px; height: 14px; stroke: var(--primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* internal note — unmistakably private, refined within tokens */
.vw-intern {
  background: var(--status-red-soft);
  border: 1px solid color-mix(in oklch, var(--status-red) 38%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-base) var(--space-lg) var(--space-lg);
  position: relative;
}
.vw-intern__tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-12); font-weight: 700; letter-spacing: 0.04em;
  color: var(--status-red); text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.vw-intern__tag svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vw-intern .field__label { color: var(--text-primary); }
.vw-intern .textarea { background: var(--input-bg); border-color: color-mix(in oklch, var(--status-red) 28%, var(--border)); }

.vw-rollup { display: flex; flex-direction: column; gap: var(--space-sm); }
.vw-rollup__item {
  padding: var(--space-md) var(--space-lg);
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); font-size: var(--text-14); color: var(--text-primary); line-height: 1.5;
}
.vw-rollup__empty {
  padding: var(--space-lg); text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
  color: var(--text-tertiary); font-size: var(--text-13);
}

/* ═══════════════ STEP 6 · SIGNATURE ═══════════════ */
.vw-scope {
  display: flex; gap: var(--space-md); align-items: flex-start;
  padding: var(--space-md) var(--space-base);
  background: var(--status-blue-soft); border-radius: var(--radius-lg);
  font-size: var(--text-13); color: var(--text-primary); line-height: 1.5;
}
.vw-scope svg { width: 18px; height: 18px; stroke: var(--status-blue); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 1px; }

.vw-signed {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-base) var(--space-lg);
  background: var(--status-green-soft); border-radius: var(--radius-lg);
}
.vw-signed__ic { color: var(--status-green); flex-shrink: 0; }
.vw-signed__ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════════ STEP 7 · CLOSE-CHECKS ═══════════════ */
.vw-checks { display: flex; flex-direction: column; gap: var(--space-sm); }
.vw-check {
  display: flex; align-items: flex-start; gap: var(--space-base);
  padding: var(--space-base) var(--space-lg);
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-left-width: 3px; border-radius: var(--radius-lg);
}
.vw-check--pass  { border-left-color: var(--status-green); }
.vw-check--warn  { border-left-color: var(--status-orange); }
.vw-check--block { border-left-color: var(--status-red); }
.vw-check--info  { border-left-color: var(--border); }
.vw-check__ic {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.vw-check__ic svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vw-check--pass  .vw-check__ic { background: var(--status-green-soft); color: var(--status-green); }
.vw-check--warn  .vw-check__ic { background: var(--status-orange-soft); color: var(--status-orange); }
.vw-check--block .vw-check__ic { background: var(--status-red-soft); color: var(--status-red); }
.vw-check--info  .vw-check__ic { background: var(--surface-2); color: var(--text-secondary); }
.vw-check__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vw-check__label { font-size: var(--text-14); font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-sm); }
.vw-check__label .vw-check__state { font-weight: 600; color: var(--text-tertiary); }
.vw-check__msg { font-size: var(--text-13); color: var(--text-secondary); line-height: 1.5; }
.vw-check__resolve {
  align-self: flex-start; margin-top: var(--space-2xs);
  font-size: var(--text-13); font-weight: 600; color: var(--primary); text-decoration: none;
}
.vw-check__resolve:hover { color: var(--primary-hover); text-decoration: underline; }

.vw-recheck {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-13); font-weight: 600; color: var(--text-secondary);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer;
}
.vw-recheck:hover { background: var(--surface-hover); color: var(--text-primary); }
.vw-recheck:disabled { opacity: 0.6; cursor: default; }
.vw-recheck svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.vw-banner {
  display: flex; gap: var(--space-md); align-items: flex-start;
  padding: var(--space-base) var(--space-lg);
  border-radius: var(--radius-lg); font-size: var(--text-14); line-height: 1.5;
}
.vw-banner__ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.vw-banner__t { font-weight: 700; }
.vw-banner--ok    { background: var(--status-green-soft);  color: var(--status-green); }
.vw-banner--warn  { background: var(--status-orange-soft); color: var(--status-orange); }
.vw-banner--block { background: var(--status-red-soft);    color: var(--status-red); }
.vw-banner b, .vw-banner .vw-banner__body { color: var(--text-primary); font-weight: 400; }
.vw-banner__body { flex: 1; }

.vw-ack {
  display: flex; gap: var(--space-md); align-items: flex-start;
  padding: var(--space-base) var(--space-lg);
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); cursor: pointer;
}
.vw-ack__box {
  width: 20px; height: 20px; border-radius: var(--radius-sm); flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--input-bg);
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.vw-ack__box svg { width: 12px; height: 12px; stroke: var(--text-on-primary); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.vw-ack.is-checked .vw-ack__box { background: var(--primary); border-color: var(--primary); }
.vw-ack.is-checked .vw-ack__box svg { opacity: 1; }
.vw-ack__text { font-size: var(--text-13); color: var(--text-primary); line-height: 1.5; }

/* ═══════════════ RESPONSIVE: tablet (cookie-driven shell → data-bp) ═══════════════ */
.vw[data-bp="tablet"] .vw-body { grid-template-columns: 232px 1fr; }
.vw[data-bp="tablet"] .vw-content { padding: var(--space-xl) var(--space-xl) var(--space-2xl); }
.vw[data-bp="tablet"] .vw-cols { grid-template-columns: 1fr; }
.vw[data-bp="tablet"] .vw-aside { position: static; }
.vw[data-bp="tablet"] .vw-head__bar,
.vw[data-bp="tablet"] .vw-foot { padding-left: var(--space-lg); padding-right: var(--space-lg); }

/* Safety net: if the real content width is narrow, collapse the two-column step
   layout even when the cookie still says desktop (prevents cramped asides). */
@media (max-width: 1180px) {
  .vw-cols { grid-template-columns: 1fr; }
  .vw-aside { position: static; }
}

/* ═══════════════ STEP NAVIGATOR (canvas + mobile back-nav) ═══════════════
   A "Stap X / N ▾" trigger that opens the shared step list as a popover
   (desktop/tablet) or a bottom-sheet (mobile). Lives in the canvas scene top bar
   and the mobile wizard header; costs no canvas space. */
.vw-nav { position: relative; display: inline-flex; }
.vw-navtrigger {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  height: 28px; padding: 0 var(--space-sm) 0 var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); font: inherit; font-size: var(--text-13); font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.vw-navtrigger:hover { background: var(--surface-hover); color: var(--text-primary); }
.vw-navtrigger__chev { width: 14px; height: 14px; flex-shrink: 0; }
.vw-navtrigger--static { cursor: default; background: transparent; border-color: transparent; padding-left: 0; }
.vw-navtrigger--static:hover { background: transparent; color: var(--text-secondary); }

.vw-navscrim { position: fixed; inset: 0; z-index: 40; background: transparent; }
.vw-navscrim--dim { background: var(--scrim); }

.vw-navpanel { z-index: 41; background: var(--surface); overflow-y: auto; }
.vw-navpanel__head {
  font-size: var(--text-12); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary); padding: var(--space-xs) var(--space-md) var(--space-sm);
}
.vw-navpanel__list { display: flex; flex-direction: column; gap: var(--space-2xs); }

.vw-navpanel--popover {
  position: absolute; top: calc(100% + var(--space-sm)); left: 0;
  width: 288px; max-height: 60vh;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-sm);
}
.vw-navpanel--sheet {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 72vh;
  border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sheet);
  padding: var(--space-base) var(--space-base) calc(var(--space-base) + env(safe-area-inset-bottom, 0px));
}
.vw-navpanel--sheet::before {
  content: ""; display: block; width: 36px; height: 4px; border-radius: var(--radius-pill);
  background: var(--border); margin: 0 auto var(--space-sm);
}

/* ═══════════════ MOBILE SHELL FULL-BLEED ═══════════════
   Unlike the scene's mobile takeover, the wizard KEEPS the shell topbar + bottom-nav.
   We just drop the page padding and let .vw fill the shell's main area so its sticky
   mhead/mfoot pin correctly; the main's bottom padding (reserved for the bottom-nav)
   keeps the sticky mfoot sitting just above the nav. */
.mobile-shell:has(.vw) .mobile-shell__main { overflow: hidden; }
.mobile-shell:has(.vw) .mobile-shell__page { padding: 0; height: 100%; min-height: 0; }

/* Mobile step refinements: tighter stat tiles whose long Dutch labels may wrap
   instead of clipping; tighter advice/action wrapping. */
.vw[data-bp="mobile"] .vw-stats { gap: var(--space-sm); }
.vw[data-bp="mobile"] .vw-stat { padding: var(--space-sm) var(--space-md); gap: 2px; }
.vw[data-bp="mobile"] .vw-stat__v { font-size: var(--text-24); }
.vw[data-bp="mobile"] .vw-stat { padding: var(--space-sm); }
.vw[data-bp="mobile"] .vw-stat__l { font-size: 10px; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.vw[data-bp="mobile"] .vw-title { font-size: var(--text-24); }
.vw[data-bp="mobile"] .advice__actions { gap: var(--space-xs); }
.vw[data-bp="mobile"] .advice__reject { flex-wrap: wrap; }