/* ============================================================
   FPF demo: "Bouw een dataplatform"
   Everything is scoped under .fpf-demo and prefixed fd-, so it can sit
   inside the DataMotuz site without clashing with its classes.
   Uses the site tokens when present, with the brand values as fallback.
   ============================================================ */
.fpf-demo{
  --fd-ink:var(--ink,#20283C); --fd-ink2:var(--ink-2,#2A3450); --fd-ink3:var(--ink-3,#3A465F);
  --fd-paper:var(--paper,#FCFCFB); --fd-paper2:var(--paper-2,#F1F3F7); --fd-mist:var(--mist,#E4E8EE);
  --fd-muted:var(--muted,#4C5867); --fd-mutedd:var(--muted-dark,#A7B2C2); --fd-light:#F4F6F8;
  --fd-accent:var(--accent,#FF7A2F); --fd-accentd:var(--accent-deep,#E85F18); --fd-accents:var(--accent-soft,#FFE7DA);
  --fd-display:var(--display,"Space Grotesk",system-ui,sans-serif);
  --fd-body:var(--body,"IBM Plex Sans",system-ui,sans-serif);
  --fd-mono:var(--mono,"IBM Plex Mono",ui-monospace,monospace);
  --fd-ease:cubic-bezier(0.22,1,0.36,1);
  /* layer colours: medallion bronze/silver/gold, the rest from the palette;
     orange is kept for the framework only */
  --fd-fund:#A7B2C2; --fd-brons:#C08457; --fd-zilver:#D3D9E2; --fd-goud:#D4A93A; --fd-model:#9C9298; --fd-rapport:#F4F6F8;
  font-family:var(--fd-body); color:var(--fd-ink); line-height:1.5; position:relative;
}
.fpf-demo *,.fpf-demo *::before,.fpf-demo *::after{box-sizing:border-box}
:where(.fpf-demo button){font:inherit;color:inherit;cursor:pointer}
.fpf-demo :focus-visible{outline:2px solid var(--fd-accent);outline-offset:2px}
.fpf-demo [hidden]{display:none !important}
.fd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* head */
.fd-head{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:22px}
.fd-eyebrow{font:500 13px/1 var(--fd-mono);text-transform:uppercase;letter-spacing:.15em;color:var(--fd-ink);display:inline-flex;align-items:center;gap:.65em;margin:0 0 12px}
.fd-eyebrow::before{content:"";width:1.6em;height:2px;border-radius:1px;background:var(--fd-accent)}
.fd-title{font:700 clamp(28px,3.4vw,42px)/1.06 var(--fd-display);letter-spacing:-.02em;margin:0}
.fd-intro{margin:12px 0 0;color:var(--fd-muted);max-width:62ch;font-size:16px}
.fd-controls{display:flex;flex-wrap:wrap;gap:8px}
.fd-btn{display:inline-flex;align-items:center;gap:.55em;font:500 13px/1 var(--fd-mono);letter-spacing:.04em;padding:.9em 1.2em;border-radius:4px;border:1px solid color-mix(in srgb,var(--fd-ink) 22%,transparent);background:transparent;color:var(--fd-ink);text-decoration:none;transition:transform .2s var(--fd-ease),background .2s,border-color .2s}
.fd-btn:active{transform:scale(.97)}
.fd-btn--primary{background:var(--fd-accent);border-color:var(--fd-accent);color:var(--fd-ink)}
.fd-btn[aria-pressed="true"]{border-color:var(--fd-accent);box-shadow:inset 0 0 0 1px var(--fd-accent)}
@media (hover:hover) and (pointer:fine){.fd-btn:hover{border-color:var(--fd-ink)}.fd-btn--primary:hover{border-color:var(--fd-accentd)}}

/* stage */
.fd-stage{background:var(--fd-ink);border-radius:12px;padding:24px 22px 22px;color:var(--fd-light);position:relative;overflow:hidden;display:flex;flex-direction:column}
.fd-meter{display:flex;align-items:center;gap:14px;margin-bottom:18px;font:500 12px var(--fd-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fd-mutedd)}
.fd-bar{flex:1;height:6px;background:var(--fd-ink3);border-radius:6px;overflow:hidden}
.fd-bar i{display:block;height:100%;background:var(--fd-accent);border-radius:6px;transform-origin:left;transform:scaleX(0);transition:transform .5s var(--fd-ease)}
.fd-meter b{color:var(--fd-light);font:600 15px var(--fd-display);letter-spacing:0;white-space:nowrap}

.fd-row{display:flex;align-items:stretch}
.fd-src{width:88px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;color:var(--fd-mutedd)}
.fd-src svg{width:32px;height:32px;stroke:var(--fd-mutedd);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fd-src span{font:500 11px var(--fd-mono);letter-spacing:.12em;text-transform:uppercase}
.fd-pipe{width:30px;flex-shrink:0;position:relative;align-self:center;height:6px;background:var(--fd-ink3);border-radius:6px;overflow:hidden}
.fd-pipe i{position:absolute;top:0;left:-8px;width:6px;height:6px;border-radius:50%;background:var(--fd-accent);opacity:0}
.fd-pipe.fd-on i{opacity:1;animation:fd-flow 1.1s linear infinite}
.fd-pipe.fd-on i:nth-child(2){animation-delay:.37s}.fd-pipe.fd-on i:nth-child(3){animation-delay:.74s}
@keyframes fd-flow{from{transform:translateX(0)}to{transform:translateX(42px)}}

.fd-st{flex:1;min-width:0;background:var(--fd-ink2);border-radius:10px;padding:13px 12px 12px;border:1.5px solid transparent;transition:border-color .35s,opacity .35s,transform .35s var(--fd-ease);display:flex;flex-direction:column;gap:9px}
.fd-st.fd-dim{opacity:.72}
.fd-st.fd-over{border-color:var(--fd-accent);transform:translateY(-3px)}
.fd-st.fd-lit{border-color:var(--c)}
.fd-st-h{display:flex;align-items:center;gap:8px;font:700 16px var(--fd-display)}
.fd-medal{width:13px;height:13px;border-radius:50%;background:var(--c);flex-shrink:0}
.fd-tag{margin-left:auto;font:500 10.5px var(--fd-mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;border-radius:4px;display:none;white-space:nowrap}
.fd-lit .fd-tag{display:inline-block}
.fd-tag--fw{background:var(--fd-accent);color:var(--fd-ink)}
.fd-tag--own{background:transparent;color:var(--fd-mutedd);box-shadow:inset 0 0 0 1px var(--fd-mutedd)}
.fd-formula{font-size:12.5px;color:var(--fd-mutedd);line-height:1.35;min-height:34px;margin:0}
.fd-count{font:500 11px var(--fd-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fd-light);margin:-4px 0 0}
.fd-slots{display:flex;flex-wrap:wrap;gap:5px}
.fd-slot{font-size:12px;padding:4px 8px;border-radius:5px;border:1.3px dashed #66728F;color:var(--fd-mutedd);background:transparent;max-width:100%;text-align:left;overflow-wrap:break-word;transition:background .25s,color .25s,border-color .25s}
button.fd-slot{cursor:pointer}
.fd-slot.fd-on{background:var(--c);border:1.3px solid var(--c);color:var(--fd-ink);font-weight:600}
/* self-built: hand-made look, a first version */
.fd-mode-zelf .fd-slot.fd-on{background:repeating-linear-gradient(135deg,var(--c) 0 6px,color-mix(in srgb,var(--c) 70%,var(--fd-ink2)) 6px 12px);border-style:dashed}
.fd-slot.fd-fw{border-color:color-mix(in srgb,var(--fd-accent) 55%,transparent);color:#E9B392}
.fd-slot.fd-fw.fd-on{background:color-mix(in srgb,var(--fd-accent) 18%,transparent);border:1.3px solid var(--fd-accent);color:#FFE1CF;font-weight:500;animation:fd-zap .5s var(--fd-ease)}
@keyframes fd-zap{0%{transform:scale(.7)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.fd-slot.fd-target{border-color:var(--fd-accent);color:var(--fd-accent);display:inline-flex;align-items:center;gap:5px;animation:fd-blink 1.6s ease-in-out 3}
.fd-slot.fd-target svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
@keyframes fd-blink{50%{opacity:.4}}
.fd-wait{font-size:12px;color:var(--fd-mutedd);font-style:italic}
.fd-res{display:none;margin-top:auto;padding-top:4px}
.fd-lit .fd-res{display:block;animation:fd-pop .55s var(--fd-ease) both}
.fd-still .fd-res{animation:none}
@keyframes fd-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.fd-chips{display:flex;flex-wrap:wrap;gap:4px;margin:0}
.fd-chips span{font:500 11px var(--fd-mono);background:var(--fd-ink3);border-radius:4px;padding:3px 6px;color:var(--fd-light)}
.fd-hist{display:flex;gap:3px}
.fd-hist i{height:8px;flex:1;border-radius:3px;background:#5A6684}
.fd-hist i.fd-now{background:var(--c)}
.fd-small{font-size:12px;color:var(--fd-mutedd);margin-top:5px}
.fd-chart{display:flex;align-items:flex-end;gap:4px;height:52px}
.fd-chart i{flex:1;background:var(--fd-mutedd);border-radius:3px 3px 0 0;transform-origin:bottom;animation:fd-grow .8s var(--fd-ease) both}
.fd-chart i.fd-hi{background:var(--c)}
@keyframes fd-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.fd-star{width:100%;height:auto;display:block}

.fd-slabwrap{margin-top:16px;margin-left:118px}  /* source column + first pipe: starts under Brons */
.fd-slab{position:relative;overflow:hidden;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px}
.fd-slab .fd-st-h{min-width:140px}
.fd-slab .fd-tag{margin-left:6px}
.fd-slab .fd-formula{min-height:0;flex-basis:100%;order:3;margin:0}
.fd-slab .fd-slots{flex:1}
.fd-slab .fd-res{margin:0;padding:0}
.fd-slab.fd-boost{border-color:var(--fd-accent)}
.fd-slab::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,122,47,.35) 50%,transparent 70%);transform:translateX(-100%);opacity:0}
.fd-slab.fd-boost::after{animation:fd-sweep 1.3s var(--fd-ease) both}
@keyframes fd-sweep{0%{transform:translateX(-100%);opacity:1}100%{transform:translateX(100%);opacity:1}}
.fd-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--fd-accent);pointer-events:none;z-index:5}

/* finale */
.fd-finale{display:none;margin-top:18px;background:var(--fd-light);color:var(--fd-ink);border-radius:10px;padding:22px}
.fd-finale.fd-show{display:block;animation:fd-pop .6s var(--fd-ease) both}
.fd-finale h3{font:700 24px/1.1 var(--fd-display);margin:0 0 6px;outline:none}
.fd-finale p{margin:6px 0 0;color:var(--fd-muted);font-size:15px;max-width:68ch}
.fd-fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px 30px;margin-top:16px;align-items:start}
.fd-level{width:100%;border-collapse:collapse;font-size:14px}
.fd-level th{font:500 11px var(--fd-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fd-muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--fd-mist)}
.fd-level td{padding:7px 8px;border-bottom:1px solid var(--fd-mist)}
.fd-level .fd-yes{color:var(--fd-ink);font-weight:600}
.fd-level .fd-yes::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--fd-accent);margin-right:7px}
.fd-level .fd-no{color:var(--fd-muted)}
.fd-score{display:flex;gap:24px}
.fd-score div{text-align:center}
.fd-score b{display:block;font:700 40px/1 var(--fd-display)}
.fd-score span{font:500 11px var(--fd-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fd-muted)}
.fd-score .fd-me b{color:var(--fd-accentd)}
.fd-note{font-size:12.5px !important;margin-top:12px !important}
.fd-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--fd-mist)}
.fd-cta p{flex-basis:100%;margin:0 0 4px !important;color:var(--fd-ink) !important}
.fd-linkbtn{background:none;border:0;padding:6px 4px;font:500 13px var(--fd-mono);color:var(--fd-ink);text-decoration:underline;text-underline-offset:3px}

/* tray */
.fd-tray{padding:20px 0 8px;background:var(--fd-paper)}
.fd-tray-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.fd-tray-h .fd-eyebrow{margin:0}
.fd-hint{font-size:14px;color:var(--fd-muted)}
.fd-choice{display:none;gap:12px 16px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.fd-choice.fd-show{display:flex;animation:fd-pop .5s var(--fd-ease) both}
.fd-fpf{display:flex;align-items:center;gap:14px;padding:15px 20px;border-radius:10px;border:0;cursor:grab;text-align:left;color:var(--fd-ink);background:var(--fd-accent);box-shadow:0 10px 26px -10px rgba(232,95,24,.7);animation:fd-nudge 1.4s var(--fd-ease) 3}
.fd-fpf svg{width:26px;height:26px;flex-shrink:0;fill:none;stroke:var(--fd-ink);stroke-width:1.8;stroke-linejoin:round}
.fd-fpf b{font:700 18px/1.15 var(--fd-display);display:block}
.fd-fpf small{display:block;font-size:13px;margin-top:3px}
@keyframes fd-nudge{50%{transform:translateY(-3px)}}
.fd-choice.fd-mini .fd-fpf{padding:9px 14px;animation:none;box-shadow:none}
.fd-choice.fd-mini .fd-fpf b{font-size:15px}
.fd-choice.fd-mini .fd-fpf small,.fd-choice.fd-mini .fd-or{display:none}
.fd-or{font:500 12px var(--fd-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fd-muted)}
.fd-toks{display:flex;flex-wrap:wrap;gap:8px;min-height:44px}
.fd-tok{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:8px;border:1.5px solid var(--fd-mist);background:#fff;font-size:14px;font-weight:500;cursor:grab;user-select:none;transition:transform .18s var(--fd-ease),opacity .2s,border-color .18s}
@media (hover:hover) and (pointer:fine){.fd-tok:not(.fd-locked):hover{transform:translateY(-2px);border-color:var(--fd-accent)}}
.fd-tok .fd-dot{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(32,40,60,.35)}
.fd-tok .fd-lock{display:none;width:13px;height:13px;fill:none;stroke:var(--fd-muted);stroke-width:2}
.fd-tok.fd-locked{opacity:.55;cursor:not-allowed}
.fd-tok.fd-locked .fd-lock{display:block}
.fd-gone{display:none !important}
.fd-flyer{position:fixed;z-index:60;pointer-events:none;margin:0}
.fd-shake{animation:fd-shake .4s}
@keyframes fd-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.fd-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--fd-ink);color:var(--fd-light);padding:10px 16px;border-radius:6px;font-size:14px;opacity:0;transition:opacity .25s,transform .25s var(--fd-ease);pointer-events:none;z-index:70;max-width:calc(100vw - 32px)}
.fd-toast.fd-show{opacity:1;transform:translate(-50%,0)}
.fd-paused *{animation-play-state:paused !important}

/* empty folder: capacity + workspace and nothing else, until the layer model exists */
.fd-rowwrap{position:relative}
.fd-empty{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:16px;pointer-events:none;z-index:2}
.fd-nolayers .fd-empty{display:flex}
.fd-empty>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;max-width:440px}
.fd-empty .fd-folder{width:44px;height:44px;fill:none;stroke:var(--fd-mutedd);stroke-width:1.4;stroke-linejoin:round}
.fd-empty b{font:700 22px/1.1 var(--fd-display);color:var(--fd-light)}
.fd-empty span{font-size:14px;color:var(--fd-mutedd)}
.fd-nolayers .fd-row .fd-st{background:transparent;border:1.5px dashed #46516B;opacity:1}
.fd-nolayers .fd-row .fd-st>*{visibility:hidden}
.fd-nolayers .fd-pipe,.fd-nolayers .fd-src{opacity:.2}
@keyframes fd-rise{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
/* round 2 */
.fd-slot.fd-new{border-color:var(--fd-light);color:var(--fd-light)}
.fd-slot.fd-new.fd-on{border-color:var(--c);color:var(--fd-ink)}
.fd-next{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:18px;padding:14px 16px;border-radius:8px;background:var(--fd-paper2)}
.fd-next p{margin:0 !important;color:var(--fd-ink) !important;flex:1;min-width:220px}
.fd-btn--dark{background:var(--fd-ink);border-color:var(--fd-ink);color:var(--fd-light)}

/* stacked below ~1180px: five side-by-side layers get too narrow for words like "Persoonsgegevens" */
@media (max-width:1180px){
  .fd-head{grid-template-columns:1fr}
  .fd-controls{justify-content:flex-start}
  .fd-meter{order:0}.fd-slabwrap{order:1;margin:0 0 6px}.fd-rowwrap{order:2}.fd-row{flex-direction:column}.fd-finale{order:3}
  .fd-src{width:auto;flex-direction:row;padding:6px 0}
  .fd-pipe{width:6px;height:24px}
  .fd-pipe i{left:0;top:-8px}
  .fd-pipe.fd-on i{animation-name:fd-flowv}
  .fd-formula{min-height:0}
  .fd-fgrid{grid-template-columns:minmax(0,1fr)}
  /* keep the blocks in reach while scrolling through the layers */
  .fd-tray{position:sticky;bottom:0;z-index:20;max-height:42vh;overflow:auto;padding:12px 0;box-shadow:0 -12px 18px -14px rgba(32,40,60,.35)}
}
@keyframes fd-flowv{from{transform:translateY(0)}to{transform:translateY(32px)}}
@media (max-width:560px){
  .fd-stage{padding:16px 12px}
  .fd-finale{padding:18px 14px}
  .fd-level{font-size:13px}
  .fd-level th,.fd-level td{padding:6px 5px}
  .fd-score b{font-size:32px}
  .fd-fpf b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.fpf-demo *{animation:none !important;transition:none !important}}