/* WZS-CSS:BEGIN — SOURCE _shared/wizard-shell.css, inlined by tools/build-wizard-shell.py; edit the source */
/* wizard-shell — the one visual system for every choice wizard and single-step fit check (2026-09-09, owner
   brief; 2026-09-10 visual standardisation pass). SOURCE: _shared/wizard-shell.css. tools/build-wizard-shell.py
   inlines it into every canonical wizard page and tools/build-fitcheck.py into every fit-check page;
   tools/audit-wizard-shell.py fails when any page's copy differs or when page CSS touches a wzs- selector.
   Two standardised sections, in this order:
     A. panel header   .wzs-progress — `Step X of Y` + segmented track (multi-step) or `<Context> fit check`
                       with no track (single-step, data-wzs-variant="fit-check"); same inset, type, baseline.
     B. decision area  question (.wzs-q) · supporting sentence (.wzs-lede) · option primitive (.wzs-opt, grid or
                       list, radio or checkbox mark) · action row (.wzs-foot: Back left, primary action right;
                       full-width action under 640px — the one responsive rule).
   Every part rule is scoped under .wzs-shell (0,2,0), so a page's element rule inside the hero (`.hero p`) cannot
   reach the card. Tokens only — no page hook, no colour accent, no fixed height, no absolute positioning, no !important,
   no nth-child. Data may vary step count, copy, option count, helper text, input type and the action label. */
.wzs-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); min-width: 0; }
/* progress row — first element in the card */
.wzs-shell .wzs-progress { grid-area: 1 / 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.wzs-shell .wzs-progress-label{ white-space: nowrap; }
.wzs-shell .wzs-progress-label b{ font-weight: 500; color: var(--muted); }
/* the track shrinks before it wraps: a long flow (8 steps) keeps a one-line header at 390px */
.wzs-shell .wzs-track { display: flex; gap: 6px; min-width: 0; flex: 0 1 auto; }
.wzs-shell .wzs-seg{ display: block; flex: 0 1 22px; width: 22px; min-width: 6px; height: 3px; border-radius: 2px; background: var(--line); }
.wzs-shell .wzs-seg[data-done="true"]{ background: var(--text); }
.wzs-shell .wzs-seg[data-active="true"]{ background: var(--muted); }
/* steps — every step shares one grid cell so the card is always as tall as its tallest step (no jump on Next, no fixed height);
   a fit check wraps its single step and action row in a <form> that contributes its children to the same grid */
.wzs-shell .wzs-form { display: contents; }
.wzs-shell .wzs-step{ grid-area: 2 / 1; margin: 0; padding: 0; border: 0; min-width: 0; visibility: hidden; }
.wzs-shell .wzs-step[data-active="true"]{ visibility: visible; }
.wzs-shell[data-phase="result"] .wzs-step, .wzs-shell[data-phase="result"] .wzs-progress, .wzs-shell[data-phase="result"] .wzs-foot{ display: none; }
.wzs-shell .wzs-legend{ padding: 0; margin: 0; max-width: 100%; }
.wzs-shell .wzs-q{ font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--text); margin: 0 0 8px; }
.wzs-shell .wzs-q:focus{ outline: none; }
/* the supporting sentence: 16px / 1.6 — the size the reference card (cs-golden-visa, before the pass) rendered at,
   now a shell token so every consumer reads the same instead of inheriting whatever its hero declared */
.wzs-shell .wzs-lede{ color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0 0 22px; }
/* options — grid (default) or list, declared by the step's data, never inferred */
.wzs-shell .wzs-options { display: grid; gap: 12px; }
.wzs-shell .wzs-step[data-layout="grid"] .wzs-options{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wzs-shell .wzs-step[data-layout="list"] .wzs-options{ grid-template-columns: minmax(0, 1fr); gap: 8px; }
.wzs-shell .wzs-opt{ position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; transition: border-color .18s, background-color .18s; }
/* a list step differs from a grid step in layout only: same padding, same border, same radius — the two were
   16/18 and 14/16 until 2026-09-10, which is what made a fit check read as a different card from a wizard */
.wzs-shell .wzs-step[data-layout="list"] .wzs-opt{ align-items: center; }
.wzs-shell .wzs-opt:hover{ border-color: var(--line-strong); }
.wzs-shell .wzs-opt[data-selected="true"]{ border-color: var(--text); background: var(--line-soft); }
.wzs-shell .wzs-opt-input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wzs-shell .wzs-opt:has(> .wzs-opt-input:focus-visible){ outline: 2px solid var(--focus-ring); outline-offset: 3px; }
/* the control indicator: a radio is a circle, a checkbox a square — the one visible difference between a single- and a multi-select step */
.wzs-shell .wzs-opt-mark { position: relative; display: block; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: transparent; transition: border-color .18s, background-color .18s; }
.wzs-shell .wzs-step[data-layout="list"] .wzs-opt-mark{ margin-top: 0; }
.wzs-shell .wzs-step[data-mode="multiple"] .wzs-opt-mark{ border-radius: 4px; }
.wzs-shell .wzs-opt[data-selected="true"] .wzs-opt-mark{ border-color: var(--text); }
.wzs-shell .wzs-step[data-mode="single"] .wzs-opt[data-selected="true"] .wzs-opt-mark::after{ content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--text); }
.wzs-shell .wzs-step[data-mode="multiple"] .wzs-opt[data-selected="true"] .wzs-opt-mark{ background: var(--text); }
.wzs-shell .wzs-step[data-mode="multiple"] .wzs-opt[data-selected="true"] .wzs-opt-mark::after{ content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid var(--bg); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.wzs-shell .wzs-opt-body{ display: block; min-width: 0; }
.wzs-shell .wzs-opt-label{ display: block; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
.wzs-shell .wzs-opt-flag{ display: inline-block; width: 20px; height: 13px; margin-right: 9px; vertical-align: -1px; border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); filter: saturate(.6); opacity: .9; }
.wzs-shell .wzs-opt-flag svg{ display: block; width: 100%; height: 100%; }
.wzs-shell .wzs-opt[data-selected="true"] .wzs-opt-flag{ filter: saturate(.8); opacity: 1; }
.wzs-shell .wzs-opt-help{ display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.wzs-shell .wzs-step[data-layout="list"] .wzs-opt-help{ margin-top: 3px; }
/* an option declared `wide` in data spans the grid (the router's third answer); a list ignores it */
.wzs-shell .wzs-step[data-layout="grid"] .wzs-opt[data-wide="true"] { grid-column: 1 / -1; }
/* action row — inside the card, in flow: Back left (margin-right auto), the primary action right; a row with only the
   action (fit check, gate form) keeps it right-aligned by the same rule */
.wzs-shell .wzs-foot, .wzs-shell .wzs-form-actions { grid-area: auto; display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 8px; }
.wzs-shell .wzs-back, .wzs-shell .wzs-next{ display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 10px 18px; border-radius: 10px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .18s, border-color .18s, opacity .18s; }
.wzs-shell .wzs-back{ margin-right: auto; background: none; border: 1px solid var(--line); color: var(--muted); }
.wzs-shell .wzs-back:hover{ color: var(--text); border-color: var(--line-strong); }
.wzs-shell .wzs-back[hidden]{ display: inline-flex; visibility: hidden; }
/* an auto-advance step shows no forward action while it is unanswered (owner brief 2026-09-10). The row keeps
   its height from Back, so the card does not resize as the visitor moves between auto and manual steps.
   `.wzs-next` sets display, so [hidden] alone loses — the same trap as the result CTA. */
.wzs-shell .wzs-next[hidden]{ display: none; }
/* the primary action: compact, filled with the text token (dark on paper, light on dark); disabled = outlined, faint */
.wzs-shell .wzs-next { background: var(--text); border: 1px solid var(--text); color: var(--bg); }
.wzs-shell .wzs-next:hover:not(:disabled){ background: var(--muted); border-color: var(--muted); }
.wzs-shell .wzs-next:disabled{ background: transparent; border-color: var(--line); color: var(--faint); cursor: default; }
.wzs-shell .wzs-back svg, .wzs-shell .wzs-next svg{ width: 14px; height: 14px; }
.wzs-shell .wzs-back:focus-visible, .wzs-shell .wzs-next:focus-visible{ outline: 2px solid var(--focus-ring); outline-offset: 3px; }
/* result screen — replaces the steps (auto-placed: an explicit row 4 left three empty tracks and their gaps above it) */
.wzs-shell .wzs-result { grid-area: auto; }
.wzs-shell .wzs-result[hidden]{ display: none; }
.wzs-shell .wzs-result-title{ font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: var(--text); margin: 0 0 12px; }
.wzs-shell .wzs-result-title:focus{ outline: none; }
.wzs-shell .wzs-result-lede{ color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0 0 24px; }
/* result parts every flow may use: badge (classification), facts (label / value rows), note, and a free body for flows whose result is prose */
.wzs-shell .wzs-badge { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.wzs-shell .wzs-badge[hidden], .wzs-shell .wzs-result-title[hidden], .wzs-shell .wzs-result-lede[hidden], .wzs-shell .wzs-result-body[hidden], .wzs-shell .wzs-facts[hidden], .wzs-shell .wzs-note[hidden], .wzs-shell .wzs-result-list[hidden]{ display: none; }
.wzs-shell .wzs-facts{ margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.wzs-shell .wzs-fact{ display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.wzs-shell .wzs-fact:first-child{ border-top: 0; }
.wzs-shell .wzs-fact dt{ margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.wzs-shell .wzs-fact dd{ margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.5; }
.wzs-shell .wzs-fact dt small, .wzs-shell .wzs-fact dd small{ display: block; font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.wzs-shell .wzs-fact dd .wzs-flag{ display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-strong); font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.wzs-shell .wzs-fact dd .wzs-flag[data-kind="no"]{ border-style: dashed; color: var(--muted); }
.wzs-shell .wzs-note{ margin: 0 0 20px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.wzs-shell .wzs-result-body{ margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--text); }
.wzs-shell .wzs-result-body h3{ font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 8px; }
.wzs-shell .wzs-result-body p{ margin: 0 0 10px; color: var(--muted); }
.wzs-shell .wzs-result-body ul{ margin: 0 0 12px; padding-left: 18px; color: var(--muted); }
.wzs-shell .wzs-result-body li{ margin: 4px 0; }
.wzs-shell .wzs-result-body .wzs-band{ display: inline-block; margin: 0 0 12px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.wzs-shell .wzs-result-body .wzs-warn{ margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 2px solid var(--line-strong); border-radius: 10px; font-size: 13px; color: var(--muted); }
.wzs-shell .wzs-result-body:focus{ outline: none; }
/* generic result parts a flow's body may use: a mono group label, a ticked list, chips, an open-points list */
.wzs-shell .wzs-result-body h4 { margin: 18px 0 8px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.wzs-shell .wzs-checks{ list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; }
.wzs-shell .wzs-checks li{ display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--muted); }
.wzs-shell .wzs-checks svg{ width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--text); }
.wzs-shell .wzs-chips{ display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.wzs-shell .wzs-chip{ font-size: 12.5px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); }
.wzs-shell .wzs-open{ margin: 0; padding-left: 18px; list-style: disc; }
.wzs-shell .wzs-open li{ font-size: 13.5px; line-height: 1.6; color: var(--muted); margin-bottom: 5px; }
/* a contact gate rendered by a flow before its recommendation: the same field primitive on every flow */
.wzs-shell .wzs-fields { display: grid; gap: 10px; margin: 0; }
.wzs-shell .wzs-field-row{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wzs-shell .wzs-field{ display: block; min-width: 0; }
.wzs-shell .wzs-field span{ display: block; font-size: 12px; color: var(--faint); margin-bottom: 6px; }
.wzs-shell .wzs-field input{ width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; }
.wzs-shell .wzs-field input::placeholder{ color: var(--faint); }
.wzs-shell .wzs-field input:focus{ outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wzs-shell .wzs-result-list{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 24px; }
.wzs-shell .wzs-row{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .18s; }
.wzs-shell .wzs-row:hover{ border-color: var(--line-strong); }
.wzs-shell .wzs-row[data-primary="true"]{ border-color: var(--text); background: var(--line-soft); }
.wzs-shell .wzs-row:focus-visible{ outline: 2px solid var(--focus-ring); outline-offset: 3px; }
/* the identity column is sized by the mark itself (BankIdentity compact: 104–130px slot, plus the dark-theme paper plate) */
.wzs-shell .wzs-row .bkid-logo { max-width: 100%; object-fit: contain; }
.wzs-shell .wzs-row-body{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wzs-shell .wzs-row-note{ font-size: 13px; color: var(--muted); line-height: 1.5; }
.wzs-shell .wzs-row-flag{ display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.wzs-shell .wzs-row-flag[data-tier="primary"]{ border-color: var(--text); color: var(--text); }
.wzs-shell .wzs-row-flag[data-tier="strong"]{ border-color: var(--line-strong); color: var(--text); }
.wzs-shell .wzs-caveat{ padding: 16px 20px; border: 1px solid var(--line-soft); border-radius: 10px; font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 20px; }
.wzs-shell .wzs-caveat b{ color: var(--text); font-weight: 500; }
.wzs-shell .wzs-result-cta{ display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.wzs-shell .wzs-result-cta[hidden]{ display: none; }
/* a flow may hide the primary CTA (`cta: false`) — the .btn class sets display, so [hidden] alone loses */
.wzs-shell .wzs-result-cta [hidden]{ display: none; }
/* a gated result: the flow renders the real classification, heading and value it computed, and blurs them until the
   visitor identifies themselves. Nothing behind the blur is invented — a mocked number under a blur is the thing this
   site retired on 2026-09-06 and must never come back. */
.wzs-shell[data-wzs-locked] .wzs-badge, .wzs-shell[data-wzs-locked] .wzs-result-title,
.wzs-shell[data-wzs-locked] .wzs-fact dd{ filter: blur(5px); user-select: none; }
.wzs-shell .wzs-lock{ width: 15px; height: 15px; margin-left: 8px; color: var(--faint); vertical-align: -2px; }
.wzs-shell .wzs-gate-note{ margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); }
/* a ranked result part: rank · name · sub · score, with a detail column the flow fills (a blurred teaser before the
   gate, the full reasons after it). Used by the route test's preview and its report — one part, both stages. */
.wzs-shell .wzs-ranked{ display: grid; gap: 12px; margin: 0 0 20px; }
.wzs-shell .wzs-rank{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 16px; align-items: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; }
.wzs-shell .wzs-rank-no{ font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: .12em; color: var(--faint); line-height: 1.5; }
.wzs-shell .wzs-rank-id{ display: block; min-width: 0; }
.wzs-shell .wzs-rank-name{ display: block; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; color: var(--text); }
.wzs-shell .wzs-rank-sub{ display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.wzs-shell .wzs-rank-score{ font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 13px; color: var(--text); white-space: nowrap; }
.wzs-shell .wzs-rank-score sub{ margin-left: 3px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); vertical-align: baseline; }
.wzs-shell .wzs-rank-detail{ grid-column: 1 / -1; display: block; }
.wzs-shell .wzs-rank-headline{ margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.wzs-shell .wzs-rank-blur{ display: grid; gap: 7px; margin-top: 10px; }
.wzs-shell .wzs-rank-blur i{ display: block; height: 8px; border-radius: 4px; background: var(--line); }
.wzs-shell .wzs-rank-blur i[data-short]{ width: 62%; }
/* label / prose rows a flow uses for paired name + reason ("why not the others", the runners-up) */
.wzs-shell .wzs-rows{ display: grid; gap: 8px; margin: 0 0 16px; }
.wzs-shell .wzs-row-line{ display: grid; grid-template-columns: minmax(110px, 26%) minmax(0, 1fr); gap: 12px; font-size: 13px; line-height: 1.55; }
.wzs-shell .wzs-row-line b{ font-weight: 500; color: var(--text); }
.wzs-shell .wzs-row-line span{ color: var(--muted); }
.wzs-shell .wzs-more{ margin: 0; }
.wzs-shell .wzs-more summary{ cursor: pointer; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.wzs-shell .wzs-more summary:hover{ color: var(--text); }
.wzs-shell .wzs-more[open] summary{ margin-bottom: 10px; }
/* an intake template inside a result (the home router, 2026-09-10): the panel is the intake panel's own markup, so its
   heading arrives as an h3 — which the result body sizes like the result title. It sits UNDER the outcome, one step
   down. The form is the ONLY action on the ending — no link away before the details are in (owner, 2026-09-18). */
.wzs-shell .wzs-intake{ margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.wzs-shell .wzs-result-body .wzs-intake h3{ margin: 0 0 12px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; color: var(--text); }
@media (max-width: 900px) { .wzs-shell{ padding: 24px; } }   /* radius stays 18px at every width — the hero token and the modal agree */
@media (max-width: 640px) {
  .wzs-shell{ padding: 20px; gap: 20px; }
  .wzs-shell .wzs-fact{ grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .wzs-shell .wzs-step[data-layout="grid"] .wzs-options{ grid-template-columns: minmax(0, 1fr); }
  .wzs-shell .wzs-row{ grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
  .wzs-shell .wzs-row-flag{ grid-column: 1 / -1; justify-self: start; }
  .wzs-shell .wzs-progress{ gap: 12px; }
  .wzs-shell .wzs-field-row{ grid-template-columns: minmax(0, 1fr); }
  .wzs-shell .wzs-rank{ grid-template-columns: auto minmax(0, 1fr); }
  .wzs-shell .wzs-rank-score{ grid-column: 2; }
  .wzs-shell .wzs-row-line{ grid-template-columns: minmax(0, 1fr); gap: 2px; }
  /* the one responsive action rule: the primary action fills the row; Back keeps its line above it */
  .wzs-shell .wzs-foot, .wzs-shell .wzs-form-actions { flex-wrap: wrap; }
  .wzs-shell .wzs-next{ flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .wzs-shell .wzs-opt, .wzs-shell .wzs-opt-mark, .wzs-shell .wzs-back, .wzs-shell .wzs-next, .wzs-shell .wzs-row{ transition: none; } }
/* WZS-CSS:END */