:root {
  color-scheme: light;
  /* Slice UI-16 — global Emigratieplan / STS palette. The wizard
   * surface (intake + review) reads directly from these tokens. The
   * legacy `--bg` / `--surface` / `--ink` / etc. names alias to the
   * tokens below so older surfaces keep matching the same hues
   * without any per-surface overrides. The Results v2 surface keeps
   * its scoped `--emp-v2-*` cascade (see `.app-results-v2` block
   * further down) and is intentionally untouched.
   */
  --emp-bg: #f5f1ea;
  --emp-surface: #ffffff;
  --emp-surface-soft: #fbf7f0;
  --emp-surface-raised: #ffffff;
  --emp-ink: #1a140f;
  --emp-ink-strong: #18120e;
  --emp-muted: #6b6056;
  --emp-line: #e3dccf;
  --emp-line-strong: #c9bfac;
  --emp-accent: #b85a3a;
  --emp-accent-soft: #f7e7df;
  --emp-accent-ink: #6f2e18;
  --emp-radius: 12px;
  --emp-radius-soft: 8px;
  --emp-shadow: 0 1px 2px rgba(24, 18, 14, 0.06),
    0 1px 1px rgba(24, 18, 14, 0.04);
  --emp-shadow-raised: 0 6px 18px rgba(24, 18, 14, 0.07),
    0 2px 4px rgba(24, 18, 14, 0.04);
  --emp-focus-ring: 0 0 0 3px rgba(184, 90, 58, 0.22);

  --bg: var(--emp-bg);
  --surface: var(--emp-surface);
  --ink: var(--emp-ink);
  --muted: var(--emp-muted);
  --line: var(--emp-line);
  --accent: var(--emp-accent);
  --warn-bg: #fbe9d8;
  --warn-ink: #6f2e18;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}

button,
input,
select {
  font: inherit;
}

button,
.import-control,
input[type="file"],
.form-field input,
.form-field select {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

button,
.import-control {
  min-height: 2.4rem;
  padding: 0.55rem 0.85rem;
}

.app-shell {
  display: grid;
  gap: 1rem;
  min-height: 100vh;
  padding: 1.25rem clamp(1rem, 3vw, 2rem) 2rem;
}

.app-header,
.app-screen,
.warning-rail,
.app-actions {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 1rem;
}

.export-status {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink);
}

.app-header {
  display: grid;
  gap: 0.2rem;
}

.app-header h1,
.app-header p,
.app-screen h2,
.app-screen p,
.warning-rail p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

.app-status-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.app-progress {
  color: var(--muted);
}

.app-screen {
  display: grid;
  gap: 0.75rem;
}

.screen-content,
.person-panel,
.radio-group,
.form-field,
.inline-warnings,
.validation-errors,
.housing-panel,
.review-screen,
.review-block,
.review-list {
  display: grid;
  gap: 0.55rem;
}

.person-panel,
.radio-group,
.housing-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem;
}

.form-field span,
.radio-group legend,
.person-panel legend,
.housing-panel summary {
  font-weight: 700;
}

.form-field input,
.form-field select {
  min-height: 2.35rem;
  padding: 0.45rem 0.55rem;
  width: min(100%, 26rem);
}

.form-field input:disabled,
.form-field select:disabled {
  background: #eef2ed;
  color: var(--muted);
  cursor: not-allowed;
}

.radio-group label,
.acknowledgement-control {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.field-helper {
  color: var(--muted);
  font-size: 0.9rem;
}

.inline-warnings,
.validation-errors {
  border-radius: 8px;
  padding: 0.75rem;
}

.inline-warnings {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.validation-errors {
  border: 1px solid #d94a38;
  background: #fff1ef;
  color: #8d2113;
}

.warning-rail {
  border-color: #e2bf64;
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.import-control {
  display: inline-flex;
  align-items: center;
  cursor: default;
}

input[type="file"] {
  max-width: 20rem;
  padding: 0.45rem;
}

.review-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem;
}

.review-block h3 {
  margin: 0;
}

.review-table {
  border-collapse: collapse;
  font-size: 0.92rem;
  width: 100%;
}

.review-table th,
.review-table td {
  border-top: 1px solid var(--line);
  padding: 0.42rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.review-table th {
  color: var(--muted);
  font-weight: 700;
  width: 42%;
  overflow-wrap: anywhere;
}

.review-table td {
  overflow-wrap: anywhere;
}

.default-marker {
  color: var(--muted);
  font-size: 0.86em;
  font-weight: 700;
}

.review-list {
  margin: 0;
  padding-left: 1.2rem;
}

.results-screen,
.result-panel,
.result-list {
  display: grid;
  gap: 0.6rem;
}

.result-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.85rem;
}

.result-panel h3,
.result-panel h4 {
  margin: 0;
}

.result-table-scroll {
  overflow-x: auto;
}

.result-table,
.result-detail-table {
  border-collapse: collapse;
  font-size: 0.9rem;
  width: 100%;
}

.result-table th,
.result-table td,
.result-detail-table th,
.result-detail-table td {
  border-top: 1px solid var(--line);
  padding: 0.42rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.result-table tr[data-selected-row="true"] {
  background: #edf8f4;
}

.result-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.result-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
}

.result-badge[data-active="true"] {
  border-color: #d79d1e;
  background: var(--warn-bg);
  color: var(--warn-ink);
}

/* -----------------------------------------------------------------
 * Slice UI-2 — client-facing shell foundation.
 *
 * Neutral CSS custom properties that future slices can override with
 * an Emigratieplan/STS palette. No external CSS libraries; no runtime
 * dependencies.
 * ---------------------------------------------------------------*/

:root {
  --emp-info-bg: #f1ece2;
  --emp-info-ink: #2c2418;
  --emp-attention-bg: #fbe9d8;
  --emp-attention-ink: #6f2e18;
  --emp-required-bg: #f7d9b8;
  --emp-required-ink: #5e2812;
  --emp-blocking-bg: #f1c5b8;
  --emp-blocking-ink: #561b0b;
  --emp-pad: 0.95rem;
}

.app-shell-frame {
  display: grid;
  gap: 0.85rem;
}

.app-shell-body {
  display: grid;
  gap: 0.85rem;
}

.app-shell-main,
.app-shell-sidebar {
  min-width: 0;
}

.app-shell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
}

.app-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.app-status-pill {
  border: 1px solid var(--emp-line);
  border-radius: 999px;
  background: var(--emp-surface);
  color: var(--emp-muted);
  font-size: 0.86rem;
  padding: 0.18rem 0.6rem;
}

.app-status-pill--ok {
  border-color: #2c8c63;
  color: #1d5e44;
  background: #eaf6ee;
}

.app-status-pill--stale {
  border-color: #c98a2b;
  color: var(--emp-attention-ink);
  background: var(--emp-attention-bg);
}

.app-panel {
  border: 1px solid var(--emp-line);
  border-radius: var(--emp-radius);
  background: var(--emp-surface);
  padding: var(--emp-pad);
  display: grid;
  gap: 0.55rem;
}

.app-panel.panel--muted {
  background: #fafbfa;
}

.app-panel.panel--warning {
  border-color: #e2bf64;
  background: var(--emp-attention-bg);
  color: var(--emp-attention-ink);
}

.app-panel.panel--blocking {
  border-color: #b94a3a;
  background: var(--emp-blocking-bg);
  color: var(--emp-blocking-ink);
}

.app-section-header {
  display: grid;
  gap: 0.15rem;
}

.app-section-eyebrow {
  margin: 0;
  color: var(--emp-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.app-section-title {
  margin: 0;
  font-size: 1.05rem;
}

.app-panel-body {
  display: grid;
  gap: 0.5rem;
}

.btn {
  border: 1px solid var(--emp-line);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  background: var(--emp-surface);
  color: var(--emp-ink);
  cursor: pointer;
  font-weight: 600;
}

.btn--primary {
  background: var(--emp-accent);
  border-color: var(--emp-accent);
  color: #ffffff;
}

.btn--primary[disabled],
.btn--secondary[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.app-warning-rail {
  display: grid;
  gap: 0.5rem;
}

.app-warning-rail--empty {
  color: var(--emp-muted);
}

.app-warning-empty {
  margin: 0;
}

.app-warning {
  border: 1px solid var(--emp-line);
  border-radius: var(--emp-radius);
  padding: 0.7rem 0.9rem;
  background: var(--emp-info-bg);
  color: var(--emp-info-ink);
  display: grid;
  gap: 0.3rem;
}

.app-warning--info {
  background: var(--emp-info-bg);
  color: var(--emp-info-ink);
  border-color: #c8d8d6;
}

.app-warning--attention {
  background: var(--emp-attention-bg);
  color: var(--emp-attention-ink);
  border-color: #e2bf64;
}

.app-warning--required {
  background: var(--emp-required-bg);
  color: var(--emp-required-ink);
  border-color: #c98a2b;
}

.app-warning--blocking {
  background: var(--emp-blocking-bg);
  color: var(--emp-blocking-ink);
  border-color: #b94a3a;
}

.app-warning-headline {
  font-weight: 700;
}

.app-warning-body,
.app-warning-action {
  margin: 0;
}

.app-warning-action {
  font-style: italic;
  color: inherit;
  opacity: 0.9;
}

.app-technical-details {
  border-top: 1px dashed var(--emp-line);
  padding-top: 0.45rem;
  margin-top: 0.2rem;
  color: var(--emp-muted);
  font-size: 0.85rem;
}

.app-technical-details summary {
  cursor: pointer;
  user-select: none;
}

.app-technical-details-body {
  margin-top: 0.4rem;
  display: grid;
  gap: 0.3rem;
}

.app-technical-id code,
.app-technical-message {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.app-technical-message {
  margin: 0;
  background: var(--emp-surface);
  border: 1px solid var(--emp-line);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
}

.app-run-error {
  border: 1px solid #b94a3a;
  background: var(--emp-blocking-bg);
  color: var(--emp-blocking-ink);
  border-radius: var(--emp-radius);
  padding: var(--emp-pad);
  display: grid;
  gap: 0.4rem;
}

.app-run-error-headline {
  font-weight: 700;
}

.app-run-error-body,
.app-run-error-action {
  margin: 0;
}

/* -----------------------------------------------------------------
 * Slice UI-7 — Results foundation structural CSS.
 *
 * Foundation slice only: no chart styles, no theme rewrite, no final
 * dashboard layout. The classes below give the migrated Results
 * screen a predictable rhythm consistent with the other migrated
 * screens (`.app-screen-content` / `.app-panel`). The final visual
 * dashboard remains future work.
 * ---------------------------------------------------------------*/

.app-result-shell {
  display: grid;
  gap: 0.85rem;
}

.app-result-summary-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.app-result-card {
  display: grid;
  gap: 0.2rem;
  border: 1px solid var(--emp-line);
  border-radius: 0.55rem;
  padding: 0.55rem 0.75rem;
  background: var(--emp-surface);
}

.app-result-table-wrap {
  overflow-x: auto;
}

.app-result-detail-panel {
  display: grid;
  gap: 0.55rem;
}

.app-result-technical {
  display: grid;
  gap: 0.55rem;
}

.app-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

/* -----------------------------------------------------------------
 * Slice UI-3 — reference-screen polish.
 *
 * Minimal reusable styling for the intro reference screen and the
 * surfaces it shares with future migrations: app-shell spacing, the
 * panel/card rhythm, the section header, the `i` info-tooltip badge,
 * acknowledgement rows, and the primary-action row. No external CSS
 * libraries; no runtime dependencies.
 * ---------------------------------------------------------------*/

.app-screen-content {
  display: grid;
  gap: 0.85rem;
}

.app-screen-content > .app-section-header h2.app-section-title {
  font-size: 1.25rem;
}

.app-screen-lead {
  margin: 0;
  color: var(--emp-muted);
}

.info-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

.info-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--emp-line);
  background: var(--emp-info-bg);
  color: var(--emp-info-ink);
  font-size: 0.72rem;
  font-weight: 700;
  font-style: normal;
  cursor: help;
}

.acknowledgement-control {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0;
}

.acknowledgement-control input[type="checkbox"] {
  margin-top: 0.18rem;
}

.acknowledgement-control-body {
  margin: 0 0 0.45rem 1.6rem;
  color: var(--emp-muted);
  font-size: 0.92rem;
}

.app-ack-row {
  border-top: 1px dashed var(--emp-line);
  padding-top: 0.65rem;
  margin-top: 0.25rem;
}

.app-shell-actions .btn,
.app-actions-row .btn {
  min-width: 8rem;
}

.app-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

/* Slice UI-4 — Household / AOW reference pattern. */
.app-radio-group {
  border: 1px solid var(--emp-line);
  border-radius: 0.55rem;
  padding: 0.65rem 0.85rem;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}

.app-radio-group legend {
  font-weight: 600;
  padding: 0 0.35rem;
}

.app-radio-group .radio-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0;
}

.app-form-field {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 0.55rem 0;
}

.app-form-field-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-weight: 500;
}

.app-form-field input[type="text"],
.app-form-field input[type="number"] {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--emp-line);
  border-radius: 0.35rem;
  font: inherit;
  background: var(--emp-surface, #fff);
}

.app-field-helper {
  margin: 0.2rem 0 0 0;
  color: var(--emp-muted);
  font-size: 0.92rem;
}

.app-person-panel {
  border: 1px solid var(--emp-line);
  border-radius: 0.55rem;
  padding: 0.65rem 0.85rem 0.4rem 0.85rem;
  margin: 0 0 0.65rem 0;
  display: grid;
  gap: 0.4rem;
}

.app-person-panel legend {
  font-weight: 600;
  padding: 0 0.35rem;
}

/* Slice UI-5 — Income / Pension / Assets reference-pattern surfaces.
 * Reuses the existing person-panel and form-field rhythm; adds two
 * small variants:
 *   * `.app-pension-scheme-section` — visually subordinate fieldset
 *     for the per-person pension-scheme group inside the income panel.
 *   * `.app-asset-grid` — two-column grid for the asset start /
 *     returns fields so the screen scans like a compact summary
 *     instead of a long stack on wide screens.
 * No external libraries; no chart/table/dashboard styling. */

.app-pension-scheme-section {
  border: 1px dashed var(--emp-line);
  border-radius: 0.45rem;
  padding: 0.5rem 0.75rem 0.25rem 0.75rem;
  margin: 0 0 0.5rem 0;
  display: grid;
  gap: 0.35rem;
}

.app-pension-scheme-section legend {
  font-weight: 600;
  padding: 0 0.3rem;
  color: var(--emp-muted);
}

.app-pension-scheme-section[data-pension-scheme-section="disabled"] {
  background: var(--emp-info-bg);
}

.app-asset-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .app-asset-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.85rem;
  }

  .app-asset-grid > legend {
    grid-column: 1 / -1;
  }
}

/* Slice UI-6 — Housing + Scenario-meta reference-pattern surfaces.
 * Reuse the person-panel rhythm so the migrated screens visually
 * match Income / AOW / Assets. No new icons / charts / dashboards. */

.app-housing-panel {
  display: grid;
  gap: 0.35rem;
}

.app-housing-panel[data-housing-panel="bl"] {
  background: var(--emp-info-bg);
}

@media (min-width: 720px) {
  .app-housing-panel {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.85rem;
  }

  .app-housing-panel > legend {
    grid-column: 1 / -1;
  }
}

.app-scenario-meta-panel {
  display: grid;
  gap: 0.35rem;
}

@media (min-width: 720px) {
  .app-scenario-meta-panel {
    grid-template-columns: 1fr 1fr;
    column-gap: 0.85rem;
  }

  .app-scenario-meta-panel > legend {
    grid-column: 1 / -1;
  }
}

/* Slice UI-10 — Results v2 layout foundation (opt-in, off by default).
 * Minimal structural styles only — no chart libraries, no brand-final
 * design, no chart placeholder visuals. The default Results render
 * (v1) keeps its existing styles untouched. */

.app-results-v2 {
  display: grid;
  gap: 0.85rem;
}

.app-results-v2-header {
  display: grid;
  gap: 0.25rem;
}

.app-results-v2-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0;
  font-size: 0.92rem;
  color: var(--emp-muted);
}

.app-results-v2-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}

.app-results-v2-section {
  display: grid;
  gap: 0.45rem;
}

.app-results-v2-kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

@media (min-width: 640px) {
  .app-results-v2-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .app-results-v2-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.app-results-v2-kpi-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--emp-line);
  border-radius: 0.55rem;
}

.app-results-v2-kpi-label {
  font-size: 0.82rem;
  color: var(--emp-muted);
}

.app-results-v2-kpi-value {
  font-size: 1.1rem;
  font-weight: 600;
}

.app-results-v2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-bottom: 1px solid var(--emp-line);
  padding: 0 0 0.35rem 0;
}

.app-results-v2-tab {
  font: inherit;
  background: transparent;
  border: 1px solid var(--emp-line);
  border-radius: 0.4rem;
  padding: 0.3rem 0.65rem;
  color: var(--emp-muted);
  cursor: pointer;
}

.app-results-v2-tab[aria-disabled='true'] {
  opacity: 0.85;
  cursor: default;
}

/* Slice UI-11 — minimal active/inactive tab styling. Final visual
 * polish is intentionally deferred to a later slice; this rule only
 * lifts the active tab visually so the interactive contract is
 * observable while keeping `cursor: pointer` on every interactive
 * tab. */
.app-results-v2-tab[data-result-v2-tab-active='true'],
.app-results-v2-tab[aria-selected='true'] {
  background: var(--emp-surface, #fff);
  border-color: var(--emp-accent, #1f4ea8);
  color: var(--emp-text, #1a1a1a);
}

[data-result-v2-panel][hidden] {
  display: none;
}

/* Slice UI-11 — invisible chart-slot foundation. The slot stays
 * `hidden` by default and renders no visible content. The CSS rule is
 * defensive: even if a future stylesheet override accidentally
 * un-hides the element, the slot itself contains no copy and no
 * chart, so no unfinished UI can leak to users from this layer. */
.app-results-v2-chart-slot[hidden] {
  display: none;
}

.app-results-v2-projection {
  display: grid;
  gap: 0.55rem;
}

.app-results-v2-table-wrap {
  display: grid;
  gap: 0.45rem;
}

/* -----------------------------------------------------------------
 * Slice UI-12 — Results v2 visual dashboard polish.
 *
 * Visual-only slice. CSS variables introduce a STS / Emigratieplan
 * compatible palette (dark brown / near-black ink, warm terracotta
 * accent, sand off-white panels) layered on top of the existing
 * `--emp-*` foundation so the v1 path remains visually unchanged.
 * No external assets; no chart libraries; no icon fonts; no runtime
 * dependencies. The v2 wrapper opts in via the `app-results-v2`
 * class set in `renderV2`. The default render path keeps using the
 * neutral `--emp-*` tokens unchanged.
 * ---------------------------------------------------------------*/

.app-results-v2 {
  --emp-v2-base: #18120e;
  --emp-v2-ink: #1a140f;
  --emp-v2-muted: #6b6056;
  --emp-v2-line: #e3dccf;
  --emp-v2-line-strong: #c9bfac;
  --emp-v2-surface: #fbf8f1;
  --emp-v2-surface-raised: #ffffff;
  --emp-v2-accent: #b85a3a;
  --emp-v2-accent-ink: #6f2e18;
  --emp-v2-accent-soft: #f7e7df;
  --emp-v2-positive: #2f6a4a;
  --emp-v2-positive-soft: #e6f1ea;
  --emp-v2-attention: #8a4014;
  --emp-v2-attention-soft: #fbe9d8;
  --emp-v2-shadow: 0 1px 2px rgba(24, 18, 14, 0.06),
    0 1px 1px rgba(24, 18, 14, 0.04);
  color: var(--emp-v2-ink);
  gap: 1rem;
}

/* Outcome panel — dominant card. Keeps existing decision-summary
 * markup intact; only restyles the wrapper. */
.app-results-v2-outcome-card {
  background: var(--emp-v2-surface);
  border: 1px solid var(--emp-v2-line);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: var(--emp-v2-shadow);
  display: grid;
  gap: 0.6rem;
}

.app-results-v2-outcome-card .app-results-v2-header {
  gap: 0.15rem;
}

.app-results-v2-outcome-card .app-section-title {
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--emp-v2-base);
}

.app-results-v2-outcome-card .app-section-eyebrow {
  color: var(--emp-v2-accent-ink);
  letter-spacing: 0.08em;
}

.app-results-v2-outcome-card .app-results-v2-meta {
  color: var(--emp-v2-muted);
  font-size: 0.88rem;
}

.app-results-v2-outcome-card [data-result-decision-summary] {
  background: var(--emp-v2-surface-raised);
  border: 1px solid var(--emp-v2-line);
  border-radius: 10px;
}

/* KPI cards — restrained palette, tone is purely presentational. */
.app-results-v2-kpis-card {
  gap: 0.6rem;
}

.app-results-v2-kpi-card {
  background: var(--emp-v2-surface-raised);
  border: 1px solid var(--emp-v2-line);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  gap: 0.3rem;
  box-shadow: var(--emp-v2-shadow);
}

.app-results-v2-kpi-card .app-results-v2-kpi-label {
  color: var(--emp-v2-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-results-v2-kpi-card .app-results-v2-kpi-value {
  color: var(--emp-v2-ink);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app-results-v2-kpi-card--positive {
  border-color: #c9dccd;
  background: var(--emp-v2-positive-soft);
}

.app-results-v2-kpi-card--positive .app-results-v2-kpi-value {
  color: var(--emp-v2-positive);
}

.app-results-v2-kpi-card--attention {
  border-color: #e8c8a6;
  background: var(--emp-v2-attention-soft);
}

.app-results-v2-kpi-card--attention .app-results-v2-kpi-value {
  color: var(--emp-v2-attention);
}

.app-results-v2-kpi-card--neutral {
  /* inherits the base card surface */
}

/* Aandachtspunten card — calm attention rim, no rainbow colours. */
.app-results-v2-aandachtspunten-card {
  background: var(--emp-v2-surface);
  border: 1px solid var(--emp-v2-line);
  border-left: 3px solid var(--emp-v2-accent);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  gap: 0.55rem;
}

.app-results-v2-aandachtspunten-card .app-section-title {
  color: var(--emp-v2-accent-ink);
}

.app-results-v2-aandachtspunten-card .app-warning-rail--empty {
  color: var(--emp-v2-muted);
  font-style: italic;
}

/* Tabs — premium, calm active state. Inactive tabs read as muted
 * navigation; active tab carries the warm terracotta accent. */
.app-results-v2 .app-results-v2-tabs {
  gap: 0.15rem;
  border-bottom: 1px solid var(--emp-v2-line-strong);
  padding-bottom: 0;
}

.app-results-v2 .app-results-v2-tab {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--emp-v2-muted);
  font-weight: 500;
  padding: 0.55rem 0.9rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}

.app-results-v2 .app-results-v2-tab:hover {
  color: var(--emp-v2-ink);
}

.app-results-v2 .app-results-v2-tab[data-result-v2-tab-active='true'],
.app-results-v2 .app-results-v2-tab[aria-selected='true'] {
  background: transparent;
  color: var(--emp-v2-accent-ink);
  border-bottom-color: var(--emp-v2-accent);
}

/* Yearly table card — responsive scroll wrapper with subtle zebra
 * rows and a sticky header. All CSS-only. No sorting / filtering. */
.app-results-v2-yearly-card {
  background: var(--emp-v2-surface-raised);
  border: 1px solid var(--emp-v2-line);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  gap: 0.45rem;
  box-shadow: var(--emp-v2-shadow);
}

.app-results-v2-yearly-card .app-results-v2-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

.app-results-v2-yearly-card .result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.app-results-v2-yearly-card .result-table thead th {
  position: sticky;
  top: 0;
  background: var(--emp-v2-surface);
  color: var(--emp-v2-muted);
  font-weight: 600;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--emp-v2-line-strong);
  letter-spacing: 0.02em;
}

.app-results-v2-yearly-card .result-table tbody td {
  padding: 0.42rem 0.6rem;
  border-bottom: 1px solid var(--emp-v2-line);
  color: var(--emp-v2-ink);
}

.app-results-v2-yearly-card .result-table tbody tr:nth-child(even) td {
  background: var(--emp-v2-surface);
}

.app-results-v2-yearly-card .result-table tbody tr[data-selected-row='true'] td {
  background: var(--emp-v2-accent-soft);
  color: var(--emp-v2-accent-ink);
}

/* Selected-year card — group cards, calmer hierarchy. */
.app-results-v2-selected-year-card {
  background: var(--emp-v2-surface-raised);
  border: 1px solid var(--emp-v2-line);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  gap: 0.6rem;
  box-shadow: var(--emp-v2-shadow);
}

.app-results-v2-selected-year-card .result-detail-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .app-results-v2-selected-year-card .result-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .app-results-v2-selected-year-card .result-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.app-results-v2-selected-year-card .result-detail-block {
  background: var(--emp-v2-surface);
  border: 1px solid var(--emp-v2-line);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  display: grid;
  gap: 0.3rem;
}

.app-results-v2-selected-year-card .result-detail-block h4 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emp-v2-muted);
}

.app-results-v2-selected-year-card .result-detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.2rem;
}

.app-results-v2-selected-year-card .result-detail-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.app-results-v2-selected-year-card .result-detail-label {
  color: var(--emp-v2-muted);
}

.app-results-v2-selected-year-card .result-detail-value {
  color: var(--emp-v2-ink);
  font-weight: 600;
}

/* -----------------------------------------------------------------
 * Slice UI-13 — Results v2 wealth-projection chart (inline SVG).
 *
 * Visual-only slice. The chart is rendered as inline SVG inside the
 * existing chart slot, gated behind `resultsV2WealthChart === true`.
 * No external chart library, no canvas, no animations. CSS classes
 * use the scoped `.app-results-v2` palette introduced in UI-12.
 * ---------------------------------------------------------------*/

.app-results-v2 .app-v2-chart-card {
  margin: 0;
  padding: 0.65rem 0.8rem 0.45rem 0.8rem;
  background: var(--emp-v2-surface-raised);
  border: 1px solid var(--emp-v2-line);
  border-radius: 12px;
  box-shadow: var(--emp-v2-shadow);
  display: block;
}

.app-results-v2 .app-v2-wealth-chart {
  display: block;
  width: 100%;
  height: auto;
  font-size: 0.78rem;
  color: var(--emp-v2-ink);
}

.app-results-v2 .app-v2-chart-axis {
  fill: var(--emp-v2-muted);
  font-size: 0.72rem;
  font-family: inherit;
}

.app-results-v2 .app-v2-chart-line {
  stroke: var(--emp-v2-accent);
  stroke-width: 2;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.app-results-v2 .app-v2-chart-zero {
  stroke: var(--emp-v2-line-strong);
  stroke-dasharray: 3 3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.app-results-v2 .app-v2-chart-label {
  fill: var(--emp-v2-ink);
  font-size: 0.74rem;
  font-family: inherit;
}

.app-results-v2 .app-v2-chart-label--zero {
  fill: var(--emp-v2-muted);
  font-style: italic;
}

.app-results-v2 .app-v2-chart-point {
  fill: var(--emp-v2-accent);
  stroke: var(--emp-v2-surface-raised);
  stroke-width: 1.5;
}

.app-results-v2-chart-slot--active {
  display: block;
}

/* ----------------------------------------------------------------
 * Slice UI-14 — Results v2 wealth-chart insight block + risk markers.
 *
 * Adds a small client-facing wrapper around the SVG (title, intro,
 * marker summary lines, marker legend) so the chart reads as a
 * decision signal. The marker dots themselves are styled inside the
 * SVG via the `.app-v2-chart-marker--*` classes. All styles are
 * scoped under `.app-results-v2` so the v1 path is unaffected and
 * the global palette is untouched.
 * --------------------------------------------------------------- */

.app-results-v2 .app-results-v2-chart-insight {
  display: block;
  margin: 0 0 0.5rem 0;
  padding: 0.55rem 0.65rem 0.5rem 0.65rem;
  background: var(--emp-v2-surface-raised);
  border: 1px solid var(--emp-v2-line);
  border-radius: 10px;
  box-shadow: var(--emp-v2-shadow);
}

.app-results-v2 .app-results-v2-chart-insight-title {
  margin: 0 0 0.2rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--emp-v2-base);
  letter-spacing: 0.005em;
}

.app-results-v2 .app-results-v2-chart-insight-intro {
  margin: 0 0 0.25rem 0;
  font-size: 0.85rem;
  color: var(--emp-v2-ink);
  line-height: 1.35;
}

.app-results-v2 .app-results-v2-chart-insight-line {
  margin: 0;
  font-size: 0.8rem;
  color: var(--emp-v2-muted);
  line-height: 1.35;
}

.app-results-v2 .app-results-v2-chart-marker-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  list-style: none;
  margin: 0.4rem 0 0 0;
  padding: 0;
}

.app-results-v2 .app-results-v2-chart-marker-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--emp-v2-line);
  background: var(--emp-v2-surface);
  font-size: 0.75rem;
  color: var(--emp-v2-ink);
}

.app-results-v2 .app-results-v2-chart-marker-chip-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--emp-v2-attention);
  border: 1px solid var(--emp-v2-attention-soft);
}

.app-results-v2 .app-results-v2-chart-marker-chip--shortfall .app-results-v2-chart-marker-chip-dot {
  background: var(--emp-v2-attention);
  border-color: var(--emp-v2-attention-soft);
}

.app-results-v2 .app-results-v2-chart-marker-chip--negative-wealth .app-results-v2-chart-marker-chip-dot {
  background: var(--emp-v2-accent);
  border-color: var(--emp-v2-accent-soft);
}

.app-results-v2 .app-results-v2-chart-marker-chip--shortfall-and-negative-wealth .app-results-v2-chart-marker-chip-dot {
  background: var(--emp-v2-accent-ink);
  border-color: var(--emp-v2-accent-soft);
}

/* SVG marker dots themselves. The default class (`.app-v2-chart-marker`)
 * styles every marker; the per-type modifier overrides the fill so
 * shortfall vs. negative-wealth vs. combined are visually distinct.
 */
.app-results-v2 .app-v2-chart-marker {
  pointer-events: none;
}

.app-results-v2 .app-v2-chart-marker .app-v2-chart-marker-dot {
  fill: var(--emp-v2-attention);
  stroke: var(--emp-v2-surface-raised);
  stroke-width: 2;
}

.app-results-v2 .app-v2-chart-marker--shortfall .app-v2-chart-marker-dot {
  fill: var(--emp-v2-attention);
}

.app-results-v2 .app-v2-chart-marker--negative-wealth .app-v2-chart-marker-dot {
  fill: var(--emp-v2-accent);
}

.app-results-v2 .app-v2-chart-marker--shortfall-and-negative-wealth .app-v2-chart-marker-dot {
  fill: var(--emp-v2-accent-ink);
}

/* ----------------------------------------------------------------
 * Slice UI-15B — Results v2 wealth-decomposition layer.
 *
 * Adds gated wealth-decomposition bands inside the existing chart
 * SVG plus a compact legend below the chart. The line remains the
 * visual authority; bands sit at reduced opacity and use the
 * existing v2 palette tokens. All styles are scoped under
 * `.app-results-v2` so the v1 path and the global palette stay
 * untouched.
 * --------------------------------------------------------------- */

.app-results-v2 .app-v2-chart-decomposition {
  pointer-events: none;
}

.app-results-v2 .app-v2-chart-decomposition-layer {
  fill: var(--emp-v2-accent);
  fill-opacity: 0.18;
  stroke: none;
}

.app-results-v2 .app-v2-chart-decomposition-layer--cash {
  fill: var(--emp-v2-accent-soft);
  fill-opacity: 0.28;
}

.app-results-v2 .app-v2-chart-decomposition-layer--investments {
  fill: var(--emp-v2-accent);
  fill-opacity: 0.22;
}

.app-results-v2 .app-v2-chart-decomposition-layer--nl-equity-positive,
.app-results-v2 .app-v2-chart-decomposition-layer--nl-equity-negative {
  fill: var(--emp-v2-accent-ink);
  fill-opacity: 0.16;
}

.app-results-v2 .app-v2-chart-decomposition-layer--bl-equity-positive,
.app-results-v2 .app-v2-chart-decomposition-layer--bl-equity-negative {
  fill: var(--emp-v2-attention);
  fill-opacity: 0.16;
}

.app-results-v2 .app-results-v2-chart-decomposition-legend {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.65rem;
  background: var(--emp-v2-surface-raised);
  border: 1px solid var(--emp-v2-line);
  border-radius: 10px;
}

.app-results-v2 .app-results-v2-chart-decomposition-legend-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--emp-v2-ink);
}

.app-results-v2 .app-results-v2-chart-decomposition-legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-results-v2 .app-results-v2-chart-decomposition-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  color: var(--emp-v2-ink);
}

.app-results-v2 .app-results-v2-chart-decomposition-legend-marker {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  background: var(--emp-v2-accent);
  opacity: 0.7;
}

.app-results-v2 .app-results-v2-chart-decomposition-legend-item--cash
  .app-results-v2-chart-decomposition-legend-marker {
  background: var(--emp-v2-accent-soft);
}

.app-results-v2 .app-results-v2-chart-decomposition-legend-item--investments
  .app-results-v2-chart-decomposition-legend-marker {
  background: var(--emp-v2-accent);
}

.app-results-v2 .app-results-v2-chart-decomposition-legend-item--nlEquity
  .app-results-v2-chart-decomposition-legend-marker {
  background: var(--emp-v2-accent-ink);
}

.app-results-v2 .app-results-v2-chart-decomposition-legend-item--blEquity
  .app-results-v2-chart-decomposition-legend-marker {
  background: var(--emp-v2-attention);
}

.app-results-v2 .app-results-v2-chart-decomposition-caveat {
  margin: 0;
  font-size: 0.72rem;
  color: var(--emp-v2-muted);
  font-style: italic;
}

/* -----------------------------------------------------------------
 * Slice UI-16 — global wizard shell + Emigratieplan visual polish.
 *
 * Targets the intake / review screens (intro → review). The Results v2
 * surface is intentionally untouched (it keeps its scoped `--emp-v2-*`
 * cascade above). All polish is layered via attribute selectors and
 * the existing `app-*` class names so Slice UI-2..UI-15B markup
 * remains valid; the new wizard-specific markup is selected via
 * `[data-wizard-shell]`, `.emp-wizard-progress`, and
 * `.emp-wizard-step-header`.
 * --------------------------------------------------------------- */

body {
  background:
    radial-gradient(at 0% 0%, rgba(184, 90, 58, 0.05), transparent 45%),
    radial-gradient(at 100% 0%, rgba(24, 18, 14, 0.04), transparent 50%),
    var(--emp-bg);
  color: var(--emp-ink);
}

.app-shell {
  max-width: 64rem;
  margin: 0 auto;
  gap: 1.1rem;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 2.5rem;
}

.app-header {
  background: var(--emp-surface);
  border: 1px solid var(--emp-line);
  border-radius: var(--emp-radius);
  box-shadow: var(--emp-shadow);
  padding: 1rem 1.2rem;
  gap: 0.25rem;
}

.app-header h1 {
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--emp-ink-strong);
  margin: 0;
}

.app-header .app-status-label {
  color: var(--emp-accent-ink);
  letter-spacing: 0.06em;
  font-weight: 700;
}

.app-header .app-progress {
  color: var(--emp-muted);
  font-size: 0.88rem;
}

/* Each per-screen anchor is a sibling section in `index.html`. The
 * wizard shell is rendered into the visible (current) section so we
 * keep the per-section spacing calm and unobtrusive. */
.app-screen {
  background: transparent;
  border: 0;
  padding: 0;
}

[data-wizard-shell="true"] {
  background: var(--emp-surface);
  border: 1px solid var(--emp-line);
  border-radius: var(--emp-radius);
  box-shadow: var(--emp-shadow-raised);
  padding: 1.1rem 1.2rem 1.2rem;
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 720px) {
  [data-wizard-shell="true"] {
    padding: 1.4rem 1.6rem 1.5rem;
    gap: 1rem;
  }
}

/* Wizard progress indicator — counter pill + ordered list. */
.emp-wizard-progress {
  display: grid;
  gap: 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--emp-line);
}

.emp-wizard-progress-counter {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--emp-accent-ink);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.emp-wizard-progress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.emp-wizard-progress-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem;
  border: 1px solid var(--emp-line);
  border-radius: 999px;
  background: var(--emp-surface-soft);
  color: var(--emp-muted);
  font-size: 0.82rem;
  line-height: 1.1;
  white-space: nowrap;
}

.emp-wizard-progress-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--emp-surface);
  border: 1px solid var(--emp-line);
  color: var(--emp-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.emp-wizard-progress-step[data-wizard-step-state="completed"] {
  background: var(--emp-surface);
  color: var(--emp-ink);
  border-color: var(--emp-line-strong);
}

.emp-wizard-progress-step[data-wizard-step-state="completed"] .emp-wizard-progress-step-index {
  background: var(--emp-accent-soft);
  border-color: var(--emp-accent-soft);
  color: var(--emp-accent-ink);
}

.emp-wizard-progress-step[data-wizard-step-state="current"] {
  background: var(--emp-accent-soft);
  color: var(--emp-accent-ink);
  border-color: var(--emp-accent);
  font-weight: 600;
}

.emp-wizard-progress-step[data-wizard-step-state="current"] .emp-wizard-progress-step-index {
  background: var(--emp-accent);
  border-color: var(--emp-accent);
  color: #ffffff;
}

.emp-wizard-progress-step[data-wizard-step-state="upcoming"] {
  opacity: 0.85;
}

/* Wizard step header — eyebrow above title, optional helper paragraph. */
.emp-wizard-step-header {
  display: grid;
  gap: 0.2rem;
}

.emp-wizard-step-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emp-accent-ink);
}

.emp-wizard-step-title {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--emp-ink-strong);
}

.emp-wizard-step-helper {
  margin: 0;
  color: var(--emp-muted);
  font-size: 0.95rem;
}

/* Wizard actions footer — Slice UI-17 inline Back / Next CTAs. */
.emp-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--emp-line);
  padding-top: 0.85rem;
}

.emp-wizard-action {
  appearance: none;
  border: 1px solid var(--emp-line-strong);
  border-radius: var(--emp-radius-sm, 6px);
  padding: 0.55rem 1.05rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--emp-surface, #fff);
  color: var(--emp-ink-strong);
  transition: background-color 120ms ease, border-color 120ms ease,
    color 120ms ease, opacity 120ms ease;
}

.emp-wizard-action:hover:not([disabled]),
.emp-wizard-action:focus-visible:not([disabled]) {
  background: var(--emp-surface-soft);
  border-color: var(--emp-accent, var(--emp-line-strong));
}

.emp-wizard-action[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.emp-wizard-action--back {
  margin-right: auto;
  background: transparent;
}

.emp-wizard-action--next,
.emp-wizard-action--calculate {
  background: var(--emp-accent, #b75c2a);
  border-color: var(--emp-accent, #b75c2a);
  color: #fff;
}

.emp-wizard-action--next:hover:not([disabled]),
.emp-wizard-action--next:focus-visible:not([disabled]),
.emp-wizard-action--calculate:hover:not([disabled]),
.emp-wizard-action--calculate:focus-visible:not([disabled]) {
  background: var(--emp-accent-strong, #9c4d22);
  border-color: var(--emp-accent-strong, #9c4d22);
  color: #fff;
}

/* Slice UI-17 — brand header presentation. */
.app-brand-header .app-brand-eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emp-muted);
  font-weight: 600;
}

.app-brand-header .app-brand-title {
  margin: 0 0 0.4rem;
  font-size: 1.85rem;
  letter-spacing: -0.01em;
  color: var(--emp-ink-strong);
}

.app-brand-header .app-brand-subtitle {
  margin: 0 0 0.85rem;
  color: var(--emp-muted);
  font-size: 0.95rem;
  max-width: 56ch;
}

/* Slice UI-27 — compact language toggle in the app header. The
 * toggle is presentation-only; it never persists, never reads
 * navigator/URL, and never re-runs the engine. The active option
 * uses `aria-pressed="true"`. */
.app-language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
}

.app-language-toggle-label {
  color: var(--emp-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.app-language-toggle-option {
  appearance: none;
  border: 1px solid var(--emp-line-strong);
  border-radius: 999px;
  background: var(--emp-surface);
  color: var(--emp-muted);
  padding: 0.18rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-height: 1.65rem;
  transition: background-color 120ms ease, border-color 120ms ease,
    color 120ms ease;
}

.app-language-toggle-option:hover:not([aria-pressed="true"]) {
  border-color: var(--emp-accent);
  color: var(--emp-accent-ink);
}

.app-language-toggle-option:focus-visible {
  outline: none;
  box-shadow: var(--emp-focus-ring);
}

.app-language-toggle-option[aria-pressed="true"] {
  background: var(--emp-accent-soft);
  border-color: var(--emp-accent);
  color: var(--emp-accent-ink);
}

/* Promote the existing app-section header (Slice UI-2) inside the
 * wizard frame so per-screen titles read as part of the polished
 * step header rhythm. */
[data-wizard-shell="true"] .app-section-header {
  gap: 0.2rem;
}

[data-wizard-shell="true"] .app-section-title {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--emp-ink-strong);
}

[data-wizard-shell="true"] .app-screen-content > .app-section-header h2.app-section-title {
  font-size: 1.5rem;
}

/* Panels inside the wizard frame: warmer surface, subtle terracotta
 * accent on the left edge. The Slice UI-2 `app-panel` class still
 * carries the rhythm; these rules only re-tone the colours. */
[data-wizard-shell="true"] .app-panel {
  background: var(--emp-surface-soft);
  border-color: var(--emp-line);
  border-radius: var(--emp-radius);
  box-shadow: none;
  padding: 1rem 1.1rem;
}

[data-wizard-shell="true"] .app-panel.panel--surface {
  border-left: 3px solid var(--emp-accent-soft);
}

[data-wizard-shell="true"] .app-panel.panel--muted {
  background: var(--emp-info-bg);
}

[data-wizard-shell="true"] .app-panel.panel--warning {
  background: var(--emp-attention-bg);
  border-color: var(--emp-line-strong);
  color: var(--emp-attention-ink);
}

[data-wizard-shell="true"] .app-panel.panel--blocking {
  background: var(--emp-blocking-bg);
  border-color: var(--emp-line-strong);
  color: var(--emp-blocking-ink);
}

/* Person panels and fieldsets inside the wizard frame — soften the
 * border and background so the person-by-person rhythm stays calm. */
[data-wizard-shell="true"] .app-person-panel,
[data-wizard-shell="true"] .app-radio-group,
[data-wizard-shell="true"] .app-pension-scheme-section {
  background: var(--emp-surface);
  border-color: var(--emp-line);
  border-radius: var(--emp-radius-soft);
}

[data-wizard-shell="true"] .app-pension-scheme-section[data-pension-scheme-section="disabled"] {
  background: var(--emp-info-bg);
  border-style: dashed;
}

/* Inputs, selects, textareas inside the wizard frame. */
[data-wizard-shell="true"] .app-form-field input[type="text"],
[data-wizard-shell="true"] .app-form-field input[type="number"],
[data-wizard-shell="true"] .form-field input[type="text"],
[data-wizard-shell="true"] .form-field input[type="number"],
[data-wizard-shell="true"] .form-field select {
  border: 1px solid var(--emp-line-strong);
  border-radius: var(--emp-radius-soft);
  background: var(--emp-surface);
  color: var(--emp-ink);
  padding: 0.5rem 0.65rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

[data-wizard-shell="true"] .app-form-field input:focus-visible,
[data-wizard-shell="true"] .form-field input:focus-visible,
[data-wizard-shell="true"] .form-field select:focus-visible {
  outline: none;
  border-color: var(--emp-accent);
  box-shadow: var(--emp-focus-ring);
}

[data-wizard-shell="true"] .app-form-field input:disabled,
[data-wizard-shell="true"] .form-field input:disabled,
[data-wizard-shell="true"] .form-field select:disabled {
  background: var(--emp-info-bg);
  color: var(--emp-muted);
  border-style: dashed;
}

[data-wizard-shell="true"] .app-form-field-label {
  color: var(--emp-ink);
  font-weight: 600;
}

[data-wizard-shell="true"] .app-field-helper {
  color: var(--emp-muted);
}

/* Info-tooltip pill inside the wizard frame. */
[data-wizard-shell="true"] .info-tooltip {
  background: var(--emp-accent-soft);
  border-color: var(--emp-accent-soft);
  color: var(--emp-accent-ink);
}

/* Acknowledgement rows — clearer checklist items. */
[data-wizard-shell="true"] .app-ack-row,
[data-wizard-shell="true"] .acknowledgement-control {
  align-items: flex-start;
  background: var(--emp-surface);
  border: 1px solid var(--emp-line);
  border-radius: var(--emp-radius-soft);
  padding: 0.55rem 0.7rem;
}

[data-wizard-shell="true"] .app-ack-row {
  border-top: 1px solid var(--emp-line);
}

[data-wizard-shell="true"] .acknowledgement-control input[type="checkbox"] {
  accent-color: var(--emp-accent);
  margin-top: 0.18rem;
}

/* Warning rail polish — calm "Aandachtspunten" framing. */
[data-wizard-shell="true"] .app-warning-rail {
  border-radius: var(--emp-radius-soft);
}

[data-wizard-shell="true"] .app-warning-rail--empty {
  background: var(--emp-info-bg);
  border: 1px dashed var(--emp-line-strong);
  padding: 0.55rem 0.7rem;
  color: var(--emp-muted);
  font-style: italic;
}

[data-wizard-shell="true"] .app-warning {
  border-radius: var(--emp-radius-soft);
}

[data-wizard-shell="true"] .app-warning--required,
[data-wizard-shell="true"] .app-warning--blocking {
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--emp-accent);
}

/* Review screen polish — visual grouping of review blocks. */
.review-screen {
  display: grid;
  gap: 1rem;
}

.review-screen .review-lead {
  margin: 0;
  color: var(--emp-muted);
  font-size: 0.95rem;
}

[data-wizard-shell="true"] .review-block {
  background: var(--emp-surface);
  border: 1px solid var(--emp-line);
  border-left: 3px solid var(--emp-accent-soft);
  border-radius: var(--emp-radius-soft);
  padding: 0.85rem 0.95rem;
  box-shadow: none;
  display: grid;
  gap: 0.55rem;
}

[data-wizard-shell="true"] .review-block h3 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--emp-ink-strong);
  letter-spacing: 0.005em;
}

[data-wizard-shell="true"] .review-block[data-review-block="warningsAcknowledgements"] {
  border-left-color: var(--emp-accent);
  background: var(--emp-surface-soft);
}

[data-wizard-shell="true"] .review-block[data-review-block="assumptionsDefaults"],
[data-wizard-shell="true"] .review-block[data-review-block="limitationsTaxReference"] {
  border-left-color: var(--emp-line-strong);
  background: var(--emp-info-bg);
}

[data-wizard-shell="true"] .review-table th {
  color: var(--emp-muted);
  font-size: 0.85rem;
}

[data-wizard-shell="true"] .review-table td {
  color: var(--emp-ink);
}

[data-wizard-shell="true"] .review-table tr:hover td {
  background: var(--emp-surface-soft);
}

[data-wizard-shell="true"] .review-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--emp-ink);
}

[data-wizard-shell="true"] .review-list.acknowledgement-status li {
  font-size: 0.9rem;
  color: var(--emp-muted);
}

/* App actions row — promote the export controls with the same
 * polished frame the wizard surface uses. The primary navigation
 * call-to-action lives on the inline `.emp-wizard-action` row inside
 * the wizard frame (see Slice UI-17 / UI-19). */
.app-actions {
  background: var(--emp-surface);
  border: 1px solid var(--emp-line);
  border-radius: var(--emp-radius);
  box-shadow: var(--emp-shadow);
  padding: 0.8rem 1rem;
}

.app-actions button {
  border-radius: var(--emp-radius-soft);
  background: var(--emp-surface);
  color: var(--emp-ink);
  border: 1px solid var(--emp-line-strong);
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease,
    box-shadow 120ms ease;
}

.app-actions button:hover {
  border-color: var(--emp-accent);
  color: var(--emp-accent-ink);
}

.app-actions button:focus-visible {
  outline: none;
  box-shadow: var(--emp-focus-ring);
}

.app-actions .import-control {
  border-color: var(--emp-line-strong);
}

/* Mobile / tablet — keep the wizard frame scrollable and compact. */
@media (max-width: 540px) {
  [data-wizard-shell="true"] {
    padding: 0.95rem 0.95rem 1.05rem;
  }

  .emp-wizard-progress-list {
    gap: 0.3rem;
  }

  .emp-wizard-progress-step {
    padding: 0.28rem 0.55rem;
    font-size: 0.78rem;
  }

  .emp-wizard-progress-step-index {
    min-width: 1.2rem;
    height: 1.2rem;
    font-size: 0.7rem;
  }
}

/* -----------------------------------------------------------------
 * POST_F2_BETA_V1_UI_POLISH_FIX_BATCH — visual-only polish.
 *
 * Scope is intentionally narrow:
 *   * H1 / M3 — give the auth + access route shells a branded card so
 *     /login, /auth/callback, /access-denied, /choose-countries no
 *     longer render as raw unstyled HTML inside the wizard grid.
 *   * M1 — stop the cold-load warning rail + export action row from
 *     leaking below the wizard frame on / (the per-screen wizard
 *     panel renders its own warning list; the export controls only
 *     belong at the results stage).
 *   * M2 — once the binder hydrates and writes the per-mode status
 *     label, hide the duplicate cold-load `Beta` eyebrow so only one
 *     beta indicator remains.
 *
 * No engine, export, payment/entitlement, Supabase function or
 * source-chain content is touched here.
 * ---------------------------------------------------------------*/

/* M2 — once hydration completes the binder writes the per-mode status
 * label ("Bèta" in PUBLIC, "Interne testversie" in INTERNAL). At that
 * point the static cold-load "Beta" eyebrow paragraph duplicates the
 * status label, so we collapse it. Pre-hydration the eyebrow stays
 * visible so a flash of unbranded text never happens. */
.app-shell[data-app-bootstrapped="true"] .app-brand-header #app-brand-eyebrow {
  display: none;
}

/* M1 — the per-screen wizard panel renders its own warning rail
 * inline, so the legacy aside duplicates the same paragraphs below
 * the wizard frame. The aside element is preserved in the DOM (the
 * binder still writes to it) but collapsed visually. */
.app-shell #warning-rail.warning-rail {
  display: none;
}

/* M1 — the legacy export-action row leaks under the wizard frame in
 * cold-load and intake screens. The binder still wires the buttons,
 * so we only collapse the row visually until the user reaches the
 * results screen (where exports make sense). */
.app-shell .app-actions {
  display: none;
}

.app-shell[data-current-screen="results"] .app-actions {
  display: flex;
}

/* H1 / M3 — branded card layout for the auth / access route shells.
 * `clearChildren(root)` in auth-bootstrap / access-bootstrap removes
 * the cold-load brand header, so the route delegates now inject a
 * compact branded strip inside the section as its first child. The
 * section itself becomes the visible card.
 *
 * The selectors only target the dedicated auth / access modifier
 * classes so the wizard surface (which also uses `.app-screen` as a
 * neutral anchor) stays untouched. */
.app-screen--auth,
.app-screen--access {
  display: grid;
  align-self: start;
  align-content: start;
  gap: 0.85rem;
  max-width: 28rem;
  margin: 2.25rem auto;
  padding: 1.6rem 1.5rem 1.75rem;
  background: var(--emp-surface);
  border: 1px solid var(--emp-line);
  border-radius: var(--emp-radius);
  box-shadow: var(--emp-shadow-raised);
  color: var(--emp-ink);
}

.app-auth-brand,
.app-access-brand {
  display: grid;
  gap: 0.15rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--emp-line);
}

.app-auth-brand-eyebrow,
.app-access-brand-eyebrow {
  margin: 0;
  color: var(--emp-accent-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.app-auth-brand-wordmark,
.app-access-brand-wordmark {
  margin: 0;
  color: var(--emp-ink-strong);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-screen--auth h1,
.app-screen--access h1 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  color: var(--emp-ink-strong);
}

.app-screen--auth p,
.app-screen--access p {
  margin: 0;
  color: var(--emp-ink);
  line-height: 1.5;
}

.app-screen--auth form[data-auth-login-form] {
  display: grid;
  gap: 0.55rem;
}

.app-screen--auth form[data-auth-login-form] label {
  font-weight: 600;
  color: var(--emp-ink);
  font-size: 0.9rem;
}

.app-screen--auth form[data-auth-login-form] input[type="email"] {
  width: 100%;
  border: 1px solid var(--emp-line-strong);
  border-radius: var(--emp-radius-soft);
  background: var(--emp-surface);
  color: var(--emp-ink);
  padding: 0.55rem 0.7rem;
  font: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.app-screen--auth form[data-auth-login-form] input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--emp-accent);
  box-shadow: var(--emp-focus-ring);
}

.app-screen--auth form[data-auth-login-form] button[type="submit"] {
  appearance: none;
  margin-top: 0.25rem;
  border: 1px solid var(--emp-accent);
  border-radius: var(--emp-radius-soft);
  background: var(--emp-accent);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease,
    opacity 120ms ease;
}

.app-screen--auth form[data-auth-login-form] button[type="submit"]:hover:not([disabled]),
.app-screen--auth form[data-auth-login-form] button[type="submit"]:focus-visible:not([disabled]) {
  background: var(--emp-accent-ink);
  border-color: var(--emp-accent-ink);
}

.app-screen--auth form[data-auth-login-form] button[type="submit"][disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.app-screen--auth form[data-auth-login-form] [data-auth-login-status] {
  margin: 0.1rem 0 0;
  color: var(--emp-muted);
  font-size: 0.9rem;
  min-height: 1.2em;
}

.app-screen--auth [data-auth-callback-status] {
  color: var(--emp-muted);
  font-size: 0.95rem;
}

.app-screen--auth [data-auth-callback-retry],
.app-screen--auth [data-auth-callback-continue],
.app-screen--access [data-access-denied-login-cta] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  border: 1px solid var(--emp-accent);
  border-radius: var(--emp-radius-soft);
  background: var(--emp-accent);
  color: #ffffff;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.app-screen--auth [data-auth-callback-retry]:hover,
.app-screen--auth [data-auth-callback-retry]:focus-visible,
.app-screen--auth [data-auth-callback-continue]:hover,
.app-screen--auth [data-auth-callback-continue]:focus-visible,
.app-screen--access [data-access-denied-login-cta]:hover,
.app-screen--access [data-access-denied-login-cta]:focus-visible {
  background: var(--emp-accent-ink);
  border-color: var(--emp-accent-ink);
  color: #ffffff;
}

.app-screen--access [data-choose-countries-list] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.app-screen--access [data-choose-countries-list] li {
  display: grid;
  gap: 0.3rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--emp-line);
  border-radius: var(--emp-radius-soft);
  background: var(--emp-surface-soft);
}

.app-screen--access [data-choose-countries-not-wired] {
  color: var(--emp-muted);
  font-size: 0.9rem;
  font-style: italic;
}

.app-screen--access [data-access-denied-body] {
  color: var(--emp-ink);
}

@media (max-width: 540px) {
  .app-screen--auth,
  .app-screen--access {
    margin: 1.25rem 0.85rem;
    padding: 1.3rem 1.1rem 1.4rem;
  }
}