/* =====================================================================
 * RSG Forms — production runtime design engine.
 * One craft engine + a per-client seed → four skins (immersive default).
 * Public runtime: hand-written CSS, no build. Animate transform/opacity only.
 * ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #0c1420; }

#rsg-form-root {
  /* motion tokens — LOCKED across all clients = the "RSG feel" */
  --dur-press: 80ms; --dur-fast: 140ms; --dur-exit: 200ms; --dur-enter: 340ms; --dur-celebrate: 480ms;
  --ease-entrance: cubic-bezier(.16,1,.3,1);
  --ease-exit: cubic-bezier(.5,0,.75,0);
  --ease-overshoot: cubic-bezier(.34,1.56,.64,1);
  --pad: clamp(20px, 6.2vw, 34px);
  --tap: 58px;

  position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  font-family: var(--font-body); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
#rsg-form-root, #rsg-form-root * { min-width: 0; }

.rsg-scene { position: absolute; inset: 0; z-index: 0; }
.rsg-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rsg-inner { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; height: 100svh; }

.rsg-top { display: flex; flex-direction: column; gap: 12px; padding: max(20px, env(safe-area-inset-top)) var(--pad) 0; }
.rsg-brandrow { display: flex; align-items: center; justify-content: space-between; }
.rsg-brand { display: flex; align-items: center; gap: 9px; font-weight: 750; letter-spacing: -.01em; font-size: 15px; }
.rsg-brand img { height: 26px; width: auto; display: block; }
.rsg-mark { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 14px; }
.rsg-meta { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* route-dot / milestone progress (industry-native signature) */
.rsg-route { display: flex; align-items: center; height: 16px; }
.rsg-seg { flex: 1; height: 3px; background: var(--track); position: relative; border-radius: 3px; overflow: hidden; }
.rsg-seg::after { content: ""; position: absolute; inset: 0; background: var(--accent); border-radius: 3px; transform: scaleX(var(--fill,0)); transform-origin: left; transition: transform var(--dur-celebrate) var(--ease-entrance); }
.rsg-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--track); margin: 0 -1px; z-index: 1; flex: 0 0 auto; transition: background var(--dur-fast), transform var(--dur-fast); }
.rsg-dot[data-on="1"] { background: var(--accent); }
.rsg-dot[data-cur="1"] { transform: scale(1.25); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); }

.rsg-body { position: relative; flex: 1; min-height: 0; }
.rsg-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 4px var(--pad) 0; overflow-y: auto; will-change: transform, opacity; }
.rsg-spacer { flex: 0 0 clamp(14px, 6vh, 44px); }
.rsg-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 650; margin: 0 0 12px; }
.rsg-title { font-family: var(--font-display); font-weight: var(--q-weight, 660); font-size: var(--q-size); line-height: 1.14; letter-spacing: -.022em; margin: 0; text-wrap: balance; max-width: 20ch; color: var(--ink); }
.rsg-help { color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; margin: 12px 0 0; max-width: 30ch; }
.rsg-control { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }

.rsg-choice { appearance: none; text-align: left; width: 100%; min-height: var(--tap); display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--field); color: var(--ink); font: inherit; font-size: 16.5px; font-weight: 520; cursor: pointer; position: relative; transition: transform var(--dur-press) var(--ease-overshoot), border-color var(--dur-fast), background var(--dur-fast); }
.rsg-choice:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.rsg-key { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--key-radius, 7px); display: grid; place-items: center; background: var(--key-bg); color: var(--key-ink); font-size: 13px; font-weight: 680; border: 1px solid var(--line); }
.rsg-choice-label { flex: 1; }
.rsg-check { flex: 0 0 auto; width: 22px; height: 22px; opacity: 0; }
.rsg-check path { stroke: var(--accent-ink); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; }
.rsg-choice.is-sel { border-color: var(--accent); background: color-mix(in oklab, var(--accent) var(--sel-fill,100%), var(--field)); color: var(--accent-ink); }
.rsg-choice.is-sel .rsg-key { background: color-mix(in oklab, var(--accent-ink) 16%, transparent); color: var(--accent-ink); border-color: transparent; }
.rsg-choice.is-sel .rsg-check { opacity: 1; }
.rsg-choice.is-sel .rsg-check path { animation: rsg-draw .28s var(--ease-entrance) forwards; }
@keyframes rsg-draw { to { stroke-dashoffset: 0; } }

.rsg-field { width: 100%; min-height: 60px; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--field); color: var(--ink); font: inherit; font-size: 17px; padding: 16px 18px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.rsg-field::placeholder { color: color-mix(in oklab, var(--ink) 42%, transparent); }
.rsg-label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin: 6px 2px 2px; }
.rsg-field:focus-visible, .rsg-choice:focus-visible, .rsg-btn:focus-visible, .rsg-file:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent); }
.rsg-fieldrow { display: flex; flex-direction: column; }
.rsg-err { color: var(--err, #e0603a); font-size: 13.5px; margin: 8px 2px 0; min-height: 0; }
.rsg-valid { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ok, #1a9e6a); margin-top: 8px; opacity: 0; transition: opacity var(--dur-fast); font-weight: 560; }
.rsg-valid.show { opacity: 1; }

.rsg-file { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; width: 100%; min-height: 72px; justify-content: center; padding: 16px 18px; border-radius: var(--radius); border: 1.5px dashed var(--line); background: var(--field); color: var(--ink); font: inherit; cursor: pointer; }
.rsg-file small { color: var(--ink-soft); font-size: 13px; }
.rsg-file.has-file { border-style: solid; border-color: var(--accent); }
.rsg-link { appearance: none; background: none; border: none; color: var(--ink-soft); font: inherit; font-size: 14.5px; text-decoration: underline; cursor: pointer; padding: 8px 2px; align-self: flex-start; }

.rsg-recap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.rsg-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 12%, var(--field)); color: var(--ink); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); font-size: 14.5px; font-weight: 560; }
.rsg-chip b { font-weight: 720; }
.rsg-goodnews { margin-top: 22px; display: flex; gap: 11px; align-items: flex-start; padding: 15px 16px; border-radius: var(--radius); background: color-mix(in oklab, var(--ok,#1a9e6a) 12%, var(--field)); border: 1px solid color-mix(in oklab, var(--ok,#1a9e6a) 30%, transparent); font-size: 15px; line-height: 1.45; }
.rsg-goodnews svg { flex: 0 0 auto; margin-top: 1px; }

.rsg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px var(--pad) max(16px, env(safe-area-inset-bottom)); background: var(--foot-bg); border-top: 1px solid var(--foot-line); }
.rsg-back { appearance: none; border: none; background: transparent; color: var(--ink-soft); font: inherit; font-size: 15px; font-weight: 540; cursor: pointer; padding: 10px 6px; border-radius: 10px; display: inline-flex; align-items: center; gap: 5px; }
.rsg-back:hover { color: var(--ink); }
.rsg-back[hidden] { visibility: hidden; }
.rsg-foot-spacer { flex: 1; }
.rsg-legal { flex-basis: 100%; font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); opacity: .85; text-align: center; }
.rsg-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rsg-btn { appearance: none; border: none; cursor: pointer; font: inherit; font-weight: 640; font-size: 16px; color: var(--accent-ink); background: var(--accent); border-radius: var(--radius); padding: 0 22px; min-height: 52px; display: inline-flex; align-items: center; gap: 8px; justify-content: center; transition: transform var(--dur-press) var(--ease-overshoot), opacity var(--dur-fast); }
.rsg-btn .kbd { font-size: 12px; opacity: .8; }
.rsg-btn:active { transform: scale(.98); }
.rsg-btn.is-dim { opacity: .45; }
.rsg-hint { font-size: 12.5px; color: var(--ink-soft); }
.rsg-hint .kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--line); background: var(--field); font-size: 11.5px; font-weight: 620; color: var(--ink-soft); }

.rsg-done { align-items: center; text-align: center; justify-content: center; }
.rsg-seal { width: 76px; height: 76px; border-radius: 999px; display: grid; place-items: center; margin: 0 auto 20px; background: var(--accent); color: var(--accent-ink); }
.rsg-seal.review { background: color-mix(in oklab, var(--accent) 22%, var(--field)); color: var(--ink); border: 1.5px solid var(--accent); }
.rsg-seal svg path { stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: rsg-draw .5s .1s var(--ease-entrance) forwards; }
.rsg-done .rsg-title { max-width: 22ch; margin: 0 auto; }
.rsg-done .rsg-help { margin: 14px auto 0; }
.rsg-confetti { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.rsg-spinner { width: 34px; height: 34px; border-radius: 999px; border: 3px solid color-mix(in oklab, var(--ink) 20%, transparent); border-top-color: var(--accent); animation: rsg-spin .8s linear infinite; margin: 0 auto 18px; }
@keyframes rsg-spin { to { transform: rotate(360deg); } }

/* ============================ SKINS ============================ */
/* defaults (immersive) live here; applyTheme() overrides accent/fonts via inline vars */
[data-skin="immersive"] {
  --accent: #ffb43e; --accent-ink: #21160a; --ink: #f4f6fb; --ink-soft: #b9c2d4;
  --bg: #0c1420; --radius: 17px; --q-size: clamp(1.55rem, 5.6vw, 1.9rem);
  --field: rgba(255,255,255,.09); --line: rgba(255,255,255,.16); --track: rgba(255,255,255,.16);
  --key-bg: rgba(255,255,255,.10); --key-ink: #dfe6f2; --sel-fill: 100%;
  --foot-bg: transparent; --foot-line: rgba(255,255,255,.08); --ok: #56d6a0; --err: #ff9a7a;
  --font-display: -apple-system, "SF Pro Display", system-ui, sans-serif;
  --font-body: -apple-system, "SF Pro Text", system-ui, sans-serif;
}
[data-skin="immersive"] .rsg-scene {
  background:
    radial-gradient(120% 90% at 20% 12%, hsl(var(--sh,212) 55% 42% / .9), transparent 55%),
    radial-gradient(130% 120% at 90% 100%, hsl(calc(var(--sh,212) + 26) 60% 30% / .95), transparent 60%),
    linear-gradient(160deg, hsl(var(--sh,212) 45% 16%), hsl(calc(var(--sh,212) + 20) 55% 9%));
}
[data-skin="immersive"] .rsg-scene::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 44px), radial-gradient(60% 40% at 75% 8%, rgba(255,255,255,.14), transparent 70%); mix-blend-mode: screen; opacity: .5; }
[data-skin="immersive"] .rsg-scene.has-hero { background-size: cover; background-position: center; }
/* Wit chipje achter het logo: donkere/gekleurde wordmerken (bv. Lenferink-groen) blijven
   leesbaar op de donkere hero. Alleen immersive; de lichte skins hebben het niet nodig. */
[data-skin="immersive"] .rsg-brand img { background: #fff; padding: 5px 9px; border-radius: 8px; box-shadow: 0 1px 6px rgba(0,0,0,.28); height: 24px; box-sizing: content-box; }
[data-skin="immersive"] .rsg-vignette { background: linear-gradient(180deg, rgba(6,10,16,.35) 0%, transparent 26%, transparent 50%, rgba(6,10,16,.72) 100%); }
[data-skin="immersive"] .rsg-glass { margin: 0 calc(var(--pad) * -0.35); padding: 22px calc(var(--pad) * 0.9) 8px; background: rgba(16,24,38,.42); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); box-shadow: 0 20px 50px -24px rgba(0,0,0,.6); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-skin="immersive"] .rsg-glass { background: rgba(14,22,36,.92); } }
[data-skin="immersive"] .rsg-foot { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(8,13,21,.55); }
[data-skin="immersive"] .rsg-btn { box-shadow: 0 12px 30px -12px color-mix(in oklab, var(--accent) 70%, transparent); }

[data-skin="kinetic"] {
  --accent: #3d6bff; --accent-ink: #fff; --ink: #f6f7fb; --ink-soft: #9aa0b4;
  --bg: #0b0b0f; --radius: 14px; --key-radius: 999px; --q-size: clamp(2rem, 9vw, 2.6rem); --q-weight: 760;
  --field: #15151d; --line: #262633; --track: #23232e; --key-bg: #1c1c26; --key-ink: #cfd2e0; --sel-fill: 100%;
  --foot-bg: transparent; --foot-line: rgba(255,255,255,.07); --ok: #56d6a0; --err: #ff8a6a; --tap: 62px;
  --font-display: -apple-system, "SF Pro Display", system-ui, sans-serif;
  --font-body: -apple-system, "SF Pro Text", system-ui, sans-serif;
}
[data-skin="kinetic"] .rsg-scene { background: #0b0b0f; }
[data-skin="kinetic"] .rsg-title { letter-spacing: -.03em; line-height: 1.06; }
[data-skin="kinetic"] .rsg-ghost { position: absolute; top: 2px; right: var(--pad); font-family: var(--font-display); font-weight: 800; font-size: 78px; line-height: 1; color: color-mix(in oklab, var(--accent) 14%, transparent); z-index: 0; letter-spacing: -.05em; }
[data-skin="kinetic"] .rsg-btn { border-radius: 999px; }

[data-skin="editorial"] {
  --accent: #1c3a6e; --accent-ink: #fbfbf7; --ink: #17171a; --ink-soft: #5f6066;
  --bg: #faf9f5; --radius: 12px; --q-size: clamp(1.7rem, 6.2vw, 2.1rem); --q-weight: 640;
  --field: #fff; --line: #e2ded2; --track: #e7e3d7; --key-bg: #f3f0e7; --key-ink: #5f6066; --sel-fill: 9%;
  --foot-bg: transparent; --foot-line: #e7e3d7; --ok: #1a7a52; --err: #b4472a;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --font-body: -apple-system, "SF Pro Text", system-ui, sans-serif;
}
[data-skin="editorial"] .rsg-scene { background: radial-gradient(140% 100% at 50% 0%, #fdfdfa, #f6f4ec); }
[data-skin="editorial"] .rsg-scene::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(120,110,80,.06) 1px, transparent 1.4px); background-size: 4px 4px; }
[data-skin="editorial"] .rsg-choice.is-sel { color: var(--ink); }
[data-skin="editorial"] .rsg-choice.is-sel .rsg-check path { stroke: var(--accent); }
[data-skin="editorial"] .rsg-meta { font-family: var(--font-display); font-style: italic; font-size: 14px; }

[data-skin="soft"] {
  --accent: #4f46e5; --accent-ink: #fff; --ink: #14141a; --ink-soft: #6a6a78;
  --bg: #f7f7f5; --radius: 12px; --q-size: clamp(1.6rem, 6vw, 2rem); --q-weight: 620;
  --field: #fff; --line: #e4e4e9; --track: #e9e9ee; --key-bg: #f1f1f4; --key-ink: #6a6a78; --sel-fill: 9%;
  --foot-bg: rgba(247,247,245,.85); --foot-line: #e9e9ee; --ok: #1a9e6a; --err: #d0492a;
  --font-display: -apple-system, "SF Pro Display", system-ui, sans-serif;
  --font-body: -apple-system, "SF Pro Text", system-ui, sans-serif;
}
[data-skin="soft"] .rsg-scene { background: radial-gradient(80% 60% at 100% 0%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%), #f7f7f5; }
[data-skin="soft"] .rsg-choice.is-sel { color: var(--ink); background: color-mix(in oklab, var(--accent) 9%, #fff); }
[data-skin="soft"] .rsg-choice.is-sel .rsg-check path { stroke: var(--accent); }
[data-skin="soft"] .rsg-btn { box-shadow: 0 1px 2px rgba(20,20,40,.12), 0 8px 20px -10px color-mix(in oklab, var(--accent) 60%, transparent); }

/* daylight — lichte skin op de merkkleuren van de klant. Gebouwd voor Fijnthuiszorg:
   diep paars als inkt en knop, zonnewit als vlak, bloesemroze als selectie. De foto blijft,
   maar het waas eroverheen is creme in plaats van zwart (zie de scene-regels per variant).
   immersive is bewust ongemoeid gelaten: daar draaien de andere klantfunnels op. */
[data-skin="daylight"] {
  --accent: #251934; --accent-ink: #f5ebe4; --ink: #251934; --ink-soft: #5d5468;
  --bg: #f5ebe4; --radius: 16px; --q-size: clamp(1.6rem, 6vw, 2rem); --q-weight: 640;
  --field: #fffdfb; --line: #e2d8d2; --track: #e2d8d2; --key-bg: #f5ebe4; --key-ink: #5d5468; --sel-fill: 100%;
  --foot-bg: rgba(245,235,228,.9); --foot-line: #e2d8d2; --ok: #1a7a52; --err: #b4472a;
  --font-display: -apple-system, "SF Pro Display", system-ui, sans-serif;
  --font-body: -apple-system, "SF Pro Text", system-ui, sans-serif;
}
[data-skin="daylight"] .rsg-scene { background: var(--bg); }
/* gekozen antwoord: bloesemroze vulling met paarse tekst. Op de donkere skin vulde dit zich
   met het volle donkerpaars en zag je nauwelijks wat je gekozen had. */
[data-skin="daylight"] .rsg-choice.is-sel { background: #edcbc2; border-color: var(--accent); color: var(--ink); }
[data-skin="daylight"] .rsg-choice.is-sel .rsg-key { background: rgba(37,25,52,.14); color: var(--ink); border-color: transparent; }
[data-skin="daylight"] .rsg-choice.is-sel .rsg-check path { stroke: var(--accent); }
[data-skin="daylight"] .rsg-chip { background: #edcbc2; border-color: rgba(37,25,52,.22); }
[data-skin="daylight"] .rsg-btn { box-shadow: 0 10px 24px -12px rgba(37,25,52,.55); }
[data-skin="daylight"] .rsg-seal.review { background: #edcbc2; color: var(--ink); }
/* variant C, cremeglas: de foto blijft schermvullend en goed zichtbaar, maar het waas
   eroverheen is creme in plaats van zwart en het paneel over de vraag is melkglas.
   Bewust GEEN witte plaat achter het logo hier: dat mag kaal op de foto staan (Seth,
   25-08). De chip-regel van immersive blijft wel staan voor de andere klanten. */
[data-skin="daylight"] .rsg-scene.has-hero {
  background-image: linear-gradient(rgba(245,235,228,.42), rgba(245,235,228,.58)), var(--hero-img);
  background-size: cover; background-position: center;
}
[data-skin="daylight"] .rsg-vignette { background: linear-gradient(180deg, rgba(245,235,228,.62) 0%, transparent 22%, transparent 46%, rgba(245,235,228,.88) 100%); }
[data-skin="daylight"] .rsg-glass {
  margin: 0 calc(var(--pad) * -0.35); padding: 22px calc(var(--pad) * 0.9) 8px;
  background: rgba(255,253,251,.74); border: 1px solid rgba(255,255,255,.8); border-radius: 22px;
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 20px 50px -24px rgba(37,25,52,.4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-skin="daylight"] .rsg-glass { background: rgba(255,253,251,.95); } }
/* :not(.is-sel) zodat de bloesemroze selectie hier niet overschreven wordt */
[data-skin="daylight"] .rsg-choice:not(.is-sel) { background: rgba(255,253,251,.86); }
[data-skin="daylight"] .rsg-foot { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(245,235,228,.62); }

@media (prefers-reduced-motion: reduce) {
  #rsg-form-root * { transition-duration: .001ms !important; }
  .rsg-check path, .rsg-seal svg path { animation: none !important; stroke-dashoffset: 0 !important; }
  .rsg-seg::after { transition: none !important; }
}

/* telefoonveld met landcode-dropdown */
.rsg-telrow { display: flex; gap: 8px; }
.rsg-telrow .rsg-cc { flex: 0 0 auto; width: auto; min-width: 104px; padding-right: 28px; }
.rsg-telrow .rsg-field:not(.rsg-cc) { flex: 1 1 auto; min-width: 0; }