/**
 * Funnelplanner (module funnelplanner). CSS van Mitchel (move fast/2026-10-23-funnelplanner-site-v9.html),
 * afgeschermd onder .ace-fp en met de kleuren en het lettertype van de site. Gegenereerd door een
 * bouwscript; pas bij voorkeur Mitchels bron aan en bouw opnieuw, of pas hier aan en houd het bij.
 */
.ace-fp [hidden] { display: none !important; }
/* Layout: werkbank. Smalle intro, dan het gereedschap (palet | canvas | inspector) op volle breedte, daaronder uitleg, bronnen en CTA. */
.ace-fp {
  --paper: var(--awb-color3);
  --surface: var(--awb-color1);
  --surface-2: #fbfaf7;
  --ink: var(--awb-color2);
  --muted: var(--awb-color6);
  --line: var(--awb-custom_color_4);
  --grid: #d9d4c8;
  --gold: var(--awb-color4);
  --gold-ink: #7a5900;
  --gold-soft: #fff3cc;
  --teal: var(--awb-color2);
  --teal-soft: var(--awb-color3);
  --good: #1E7347;
  --good-soft: #E1F1E7;
  --warn: #9A5B00;
  --warn-soft: #FBEBD2;
  --bad: #A8271F;
  --bad-soft: #F8E1DE;
  --shadow: 0 1px 2px rgba(26,24,19,.06), 0 4px 14px rgba(26,24,19,.06);
  --font-display: Inter, Arial, Helvetica, sans-serif;
  --font-body: Inter, Arial, Helvetica, sans-serif;
  --font-mono: Inter, Arial, Helvetica, sans-serif;
  --r: 0px;
}
.ace-fp * { box-sizing: border-box; }
.ace-fp { -webkit-text-size-adjust: 100%; }
.ace-fp {
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
}
.ace-fp a { color: var(--teal); text-underline-offset: 2px; }
.ace-fp button, .ace-fp input, .ace-fp select, .ace-fp textarea { font: inherit; color: inherit; }
.ace-fp :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.ace-fp .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ace-fp .wrap {
  max-width: 1480px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
/* Intro */
.ace-fp .intro { padding-block: 22px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 32px; align-items: end; }
.ace-fp .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.01em; font-size: 15px; grid-column: 1 / -1; }
.ace-fp .brand-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--gold); display: grid; place-items: center; color: #1A1813; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.ace-fp .brand small { font-weight: 500; color: var(--muted); font-size: 13px; }
.ace-fp .intro h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.015em; margin: 0; text-wrap: balance; max-width: 22ch; font-variation-settings: "opsz" 72; }
.ace-fp .intro p { margin: 8px 0 0; color: var(--muted); max-width: 62ch; font-size: 15px; }
.ace-fp .steps-hint { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin: 0; padding: 0; list-style: none; }
.ace-fp .steps-hint li { display: flex; gap: 8px; align-items: baseline; }
.ace-fp .steps-hint b { font-family: var(--font-mono); color: var(--ink); font-weight: 600; font-size: 12px; }
/* Toolbar */
.ace-fp .toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; }
.ace-fp .field-inline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ace-fp .field-inline label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ace-fp select, .ace-fp input[type="text"], .ace-fp input[type="number"] {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; min-width: 0;
}
.ace-fp #funnelSelect { max-width: 280px; font-weight: 600; }
.ace-fp .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.ace-fp .seg button { border: 0; background: transparent; padding: 6px 11px; font-size: 13px; cursor: pointer; color: var(--muted); }
.ace-fp .seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
.ace-fp .spacer { flex: 1 1 auto; }
.ace-fp .btn { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap; }
.ace-fp .btn:hover { border-color: var(--muted); }
.ace-fp .btn.primary { background: var(--gold); border-color: var(--gold); color: #1A1813; font-weight: 600; }
.ace-fp .btn.primary:hover { filter: brightness(.97); }
.ace-fp .btn.ghost { background: transparent; }
.ace-fp .btn.danger { color: var(--bad); }
.ace-fp .btn[disabled] { opacity: .45; cursor: default; }
.ace-fp .menu { position: relative; }
.ace-fp .menu-pop { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; z-index: 30; min-width: 220px; display: grid; gap: 2px; }
.ace-fp .menu-pop button { text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.ace-fp .menu-pop button:hover { background: var(--surface-2); }
.ace-fp .menu-pop small { display: block; color: var(--muted); font-size: 11.5px; }
/* Werkbank */
.ace-fp .work { display: grid; grid-template-columns: minmax(0, 1fr) 340px; height: min(760px, calc(100vh - 120px)); min-height: 560px; border: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); background: var(--surface); overflow: hidden; }
.ace-fp .palette { position: absolute; left: 12px; top: 56px; bottom: 12px; width: 248px; overflow-y: auto; padding: 12px 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 20; }
.ace-fp .pal-head { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 8px; font-weight: 600; font-size: 13px; }
.ace-fp .canvas-tl { position: absolute; left: 12px; top: 12px; display: grid; gap: 8px; justify-items: start; z-index: 15; max-width: calc(100% - 24px); }
.ace-fp #cv:focus { outline: none; }
.ace-fp .palette h3 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 10px 4px 6px; font-weight: 600; }
.ace-fp .palette h3:first-child { margin-top: 0; }
.ace-fp .pal-list { display: grid; gap: 4px; }
.ace-fp .pal-item { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 6px 8px; cursor: grab; font-size: 12.5px; text-align: left; width: 100%; user-select: none; }
.ace-fp .pal-item:hover { border-color: var(--muted); }
.ace-fp .pal-item .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ace-fp .sw.source { background: var(--teal); border-radius: 50%; }
.ace-fp .sw.step { background: var(--muted); }
.ace-fp .sw.conv { background: var(--gold); transform: rotate(45deg); }
.ace-fp .pal-note { font-size: 11.5px; color: var(--muted); margin: 12px 4px 0; }
.ace-fp .canvas-wrap { position: relative; min-width: 0; min-height: 0; background: var(--surface-2); touch-action: none; }
.ace-fp #cv { width: 100%; height: 100%; display: block; cursor: default; user-select: none; -webkit-user-select: none; }
.ace-fp #cv.panning { cursor: grabbing; }
.ace-fp .zoom { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 4px; }
.ace-fp .zoom button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-family: var(--font-mono); font-size: 14px; box-shadow: var(--shadow); }
.ace-fp .zoom button.wide { width: auto; padding: 0 10px; font-family: var(--font-body); font-size: 12px; }
.ace-fp .canvas-badge { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; pointer-events: none; }
.ace-fp .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; border-radius: 99px; padding: 3px 9px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.ace-fp .chip.gold { background: var(--gold-soft); border-color: transparent; color: var(--gold-ink); font-weight: 600; }
.ace-fp .chip.good { background: var(--good-soft); color: var(--good); border-color: transparent; font-weight: 600; }
.ace-fp .chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; font-weight: 600; }
.ace-fp .chip.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; font-weight: 600; }
.ace-fp .canvas-help { font-size: 11.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; max-width: 300px; }
.ace-fp .inspector { border-left: 1px solid var(--line); overflow-y: auto; padding: 16px 16px 24px; min-width: 0; }
.ace-fp .insp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ace-fp .eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ace-fp .insp-title { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.2; margin: 2px 0 6px; letter-spacing: -.01em; text-wrap: balance; }
.ace-fp .insp-desc { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.ace-fp .sec { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }
.ace-fp .sec h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ace-fp .lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.ace-fp .row { display: grid; gap: 4px; margin-bottom: 10px; }
.ace-fp .row input[type="text"], .ace-fp .row select { width: 100%; }
.ace-fp .tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ace-fp .tri label { display: grid; gap: 2px; font-size: 10.5px; color: var(--muted); }
.ace-fp .tri input { width: 100%; font-family: var(--font-mono); font-size: 13px; padding: 5px 7px; }
.ace-fp .tri label.on input { border-color: var(--ink); background: var(--surface); }
.ace-fp .unit-in { position: relative; }
.ace-fp .bench { font-size: 11.5px; color: var(--muted); margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.ace-fp .bench .changed { color: var(--warn); font-weight: 600; }
.ace-fp .linkbtn { border: 0; background: none; padding: 0; color: var(--teal); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: 11.5px; }
.ace-fp table.sum { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ace-fp table.sum th, .ace-fp table.sum td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ace-fp table.sum th:first-child, .ace-fp table.sum td:first-child { text-align: left; white-space: normal; color: var(--muted); font-family: var(--font-body); }
.ace-fp table.sum thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ace-fp table.sum td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ace-fp table.sum .on { background: var(--gold-soft); color: var(--ink); font-weight: 600; }
.ace-fp table.sum thead th.on { color: var(--gold-ink); }
.ace-fp table.sum tr.key td:first-child { color: var(--ink); font-weight: 600; }
.ace-fp .verdict { display: flex; gap: 10px; align-items: flex-start; border-radius: 9px; padding: 10px 12px; font-size: 12.5px; margin-top: 10px; }
.ace-fp .verdict.good { background: var(--good-soft); }
.ace-fp .verdict.warn { background: var(--warn-soft); }
.ace-fp .verdict.bad { background: var(--bad-soft); }
.ace-fp .verdict b { display: block; font-size: 13px; }
.ace-fp .verdict .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; }
.ace-fp .verdict.good .dot { background: var(--good); }
.ace-fp .verdict.warn .dot { background: var(--warn); }
.ace-fp .verdict.bad .dot { background: var(--bad); }
.ace-fp .checks { display: grid; gap: 8px; }
.ace-fp .check { border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-size: 12.5px; display: grid; gap: 3px; }
.ace-fp .check-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ace-fp .check-top b { font-size: 13px; }
.ace-fp .check p { margin: 0; color: var(--muted); }
.ace-fp .check p strong { color: var(--ink); font-weight: 600; }
.ace-fp .srcs { margin: 0; padding-left: 16px; font-size: 12px; color: var(--muted); display: grid; gap: 4px; }
.ace-fp .note { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.ace-fp .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ace-fp .metric-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 8px; }
.ace-fp .metric-big div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.ace-fp .metric-big span { display: block; font-size: 11px; color: var(--muted); }
.ace-fp .metric-big strong { font-family: var(--font-mono); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* i-tjes */
.ace-fp .tip { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); font-size: 10px; font-family: var(--font-mono); color: var(--muted); cursor: help; background: var(--surface); flex: none; padding: 0; line-height: 1; }
.ace-fp .tip-pop { position: fixed; z-index: 60; max-width: 280px; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.45; border-radius: 8px; padding: 8px 10px; box-shadow: var(--shadow); pointer-events: none; }
/* Toast */
.ace-fp .toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 9px 14px; border-radius: 9px; font-size: 13px; z-index: 70; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
/* Uitleg & bronnen */
.ace-fp .below { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; padding-block: 44px 20px; }
.ace-fp .below h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -.01em; margin: 0 0 12px; text-wrap: balance; }
.ace-fp .below p, .ace-fp .below li { color: var(--muted); max-width: 65ch; }
.ace-fp .below p strong, .ace-fp .below li strong { color: var(--ink); }
.ace-fp .formula { font-family: var(--font-mono); font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; display: grid; gap: 6px; color: var(--ink); overflow-x: auto; }
.ace-fp .bronlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ace-fp .bronlist li { font-size: 13px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.ace-fp .bronlist .mono { font-size: 11px; color: var(--muted); display: block; }
.ace-fp .cta { margin-block: 28px 40px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 28px clamp(18px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: center; }
.ace-fp .cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 8px; letter-spacing: -.01em; text-wrap: balance; max-width: 26ch; }
.ace-fp .cta p { margin: 0; color: color-mix(in srgb, var(--paper) 78%, transparent); max-width: 60ch; }
.ace-fp .cta a.btn { background: var(--gold); border-color: var(--gold); color: #1A1813; font-weight: 600; padding: 11px 18px; font-size: 14px; text-decoration: none; }
.ace-fp footer { color: var(--muted); font-size: 12px; padding-block: 0 32px; }
/* Stappenmodus */
.ace-fp .stepper { position: relative; display: flex; align-items: center; gap: 10px 16px; padding: 12px 14px 15px; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; }
.ace-fp .stepper::before, .ace-fp .stepper::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; }
.ace-fp .stepper::before { right: 0; background: var(--line); }
.ace-fp .stepper::after { width: var(--prog, 33.4%); background: var(--gold); transition: width .25s ease; }
.ace-fp .stp-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; }
.ace-fp .stp-list li { display: flex; align-items: center; min-width: 0; }
.ace-fp .stp-list li:not(:last-child)::after { content: ""; flex: 1 1 auto; min-width: 12px; height: 2px; margin: 0 12px; background: var(--line); border-radius: 1px; }
.ace-fp .stp-list li.done:not(:last-child)::after { background: var(--gold); }
.ace-fp .stp { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 4px 6px 4px 2px; border-radius: 9px; cursor: pointer; color: var(--muted); text-align: left; min-width: 0; flex: none; }
.ace-fp .stp:hover .stp-l { color: var(--ink); }
.ace-fp .stp-n { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--muted); display: grid; place-items: center; font: 700 13px var(--font-mono); flex: none; color: var(--muted); background: var(--surface); }
.ace-fp .stp-t { display: grid; gap: 1px; min-width: 0; }
.ace-fp .stp-l { font-size: 14px; font-weight: 600; line-height: 1.2; }
.ace-fp .stp-sub { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.ace-fp .stp[aria-current="step"] .stp-l { color: var(--ink); }
.ace-fp .stp[aria-current="step"] .stp-n { background: var(--gold); border-color: var(--gold); color: #1A1813; box-shadow: 0 0 0 4px var(--gold-soft); }
.ace-fp .stp.done .stp-n { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ace-fp .stp.done .stp-l { color: var(--ink); }
.ace-fp .stp-s { display: none; }
.ace-fp .answers { margin: 0 0 4px; font-size: 13px; color: var(--muted); background: var(--surface-2); border-radius: 9px; padding: 9px 11px; }
.ace-fp .app.guided .toolbar { display: none; }
.ace-fp .app.expert .stepper { display: none; }
.ace-fp .app.guided #btnAdd, .ace-fp .app.guided #canvasHelp, .ace-fp .app.guided .palette { display: none; }
.ace-fp .app.expert #funnelChip { display: none; }
.ace-fp .app.guided .port, .ace-fp .app.guided .porthit { display: none; }
.ace-fp .app.guided .node, .ace-fp .app.guided .elabel, .ace-fp .app.guided .ehit { cursor: default; }
.ace-fp #funnelChip { font-size: 12px; padding: 5px 11px; }
.ace-fp .sec.first { border-top: 0; padding-top: 0; margin-top: 4px; }
.ace-fp .q { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.ace-fp .q legend { font-weight: 600; font-size: 13.5px; margin-bottom: 7px; padding: 0; }
.ace-fp .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ace-fp .opt { border: 1px solid var(--line); background: var(--surface-2); border-radius: 99px; padding: 6px 12px; font-size: 13px; cursor: pointer; text-align: left; }
.ace-fp .opt:hover { border-color: var(--muted); }
.ace-fp .opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ace-fp .matches { display: grid; gap: 8px; }
.ace-fp .match, .ace-fp .pick-item { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: grid; gap: 6px; width: 100%; }
.ace-fp .match:hover, .ace-fp .pick-item:hover { border-color: var(--muted); }
.ace-fp .match.on, .ace-fp .pick-item.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.ace-fp .match-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 13.5px; }
.ace-fp .bar { display: block; height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.ace-fp .bar i { display: block; height: 100%; background: var(--gold); border-radius: 3px; }
.ace-fp .match-why, .ace-fp .pick-item span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.ace-fp .pick-item b { font-size: 13px; }
.ace-fp .pick-list { display: grid; gap: 6px; margin-top: 10px; }
.ace-fp details.more { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.ace-fp details.more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--teal); }
.ace-fp .navrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.ace-fp .live-line { background: var(--gold-soft); border-radius: 9px; padding: 10px 12px; font-size: 13px; margin-top: 8px; color: var(--ink); }
.ace-fp .hero-num { display: grid; gap: 2px; margin: 4px 0 12px; }
.ace-fp .hero-num span { font-size: 12.5px; color: var(--muted); }
.ace-fp .hero-num strong { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ace-fp .hero-num small, .ace-fp .metric-big small { font-size: 11.5px; color: var(--muted); display: block; }
.ace-fp .cta-mini { background: var(--ink); color: var(--paper); border-radius: 12px; padding: 16px; display: grid; gap: 8px; justify-items: start; margin-top: 16px; }
.ace-fp .cta-mini b { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.25; }
.ace-fp .cta-mini p { margin: 0; font-size: 12.5px; color: color-mix(in srgb, var(--paper) 78%, transparent); }
.ace-fp .cta-mini a.btn { background: var(--gold); border-color: var(--gold); color: #1A1813; font-weight: 600; text-decoration: none; }
@media (max-width: 1100px) {.ace-fp .work { grid-template-columns: minmax(0, 1fr); height: auto; }
.ace-fp .canvas-wrap { height: min(620px, 70vh); min-height: 420px; }
.ace-fp .inspector { border-left: 0; border-top: 1px solid var(--line); }
.ace-fp .app.guided .inspector { order: -1; border-top: 0; border-bottom: 1px solid var(--line); }
.ace-fp .app.guided .canvas-wrap { height: min(520px, 56vh); min-height: 360px; }

}
@media (max-width: 780px) {.ace-fp .intro { grid-template-columns: minmax(0, 1fr); }
.ace-fp .canvas-wrap { height: 64vh; min-height: 400px; }
.ace-fp .palette { width: auto; right: 12px; }
.ace-fp .below { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ace-fp .cta { grid-template-columns: minmax(0, 1fr); }
.ace-fp #funnelSelect { max-width: 100%; }
.ace-fp .toolbar .field-inline:first-child { flex: 1 1 100%; }
.ace-fp .toolbar .field-inline:first-child select { flex: 1; }
.ace-fp .canvas-help { display: none; }
.ace-fp .stepper { padding: 10px 10px 13px; gap: 8px; }
.ace-fp .stp-list li:not(:last-child)::after { margin: 0 6px; min-width: 6px; }
.ace-fp .stp { gap: 6px; padding: 2px; }
.ace-fp .stp-n { width: 26px; height: 26px; font-size: 12px; }
.ace-fp .stp-l, .ace-fp .stp-sub { display: none; }
.ace-fp .stp-s { display: inline; font-size: 12.5px; font-weight: 600; }
.ace-fp .stp[aria-current="step"] .stp-s, .ace-fp .stp.done .stp-s { color: var(--ink); }
.ace-fp #btnExpert { padding: 6px 9px; }
.ace-fp .canvas-badge { left: 12px; right: auto; bottom: 52px; justify-content: flex-start; }

}
@media (prefers-reduced-motion: reduce) {.ace-fp * { transition: none !important; animation: none !important; }
 }
.ace-fp #btnExpert .stp-l { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
/* Stappenmodus: inhoud boven het canvas */
.ace-fp .app.guided .work { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
.ace-fp .app.guided .inspector { order: -1; border-left: 0; border-top: 0; border-bottom: 1px solid var(--line); overflow: visible; max-height: none; padding: 20px 22px 22px; }
.ace-fp .app.guided .canvas-wrap { height: min(460px, 62vh); min-height: 340px; }
.ace-fp .g-head .insp-desc { max-width: 72ch; }
.ace-fp .g-sub { margin: 14px 0 8px; font-size: 13px; font-weight: 600; }
.ace-fp .qgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 2px; }
.ace-fp .q { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 14px; display: grid; gap: 10px; align-content: start; }
.ace-fp .qlab { margin: 0; display: flex; gap: 8px; align-items: baseline; font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.ace-fp .qn { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #1A1813; font: 700 11px var(--font-mono); display: inline-grid; place-items: center; transform: translateY(-1px); }
.ace-fp .qgrid .opts { flex-direction: column; align-items: stretch; }
.ace-fp .qgrid .opt { border-radius: 9px; background: var(--surface); }
.ace-fp .qgrid .opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ace-fp .matches.row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ace-fp .g-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 16px; }
.ace-fp .g-foot .note { margin: 0; }
.ace-fp .pick-list.grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ace-fp .g2grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 4px; align-items: start; }
.ace-fp .gcard { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface-2); }
.ace-fp .gcard h4 { margin: 0 0 10px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.ace-fp .gcard .row:last-child { margin-bottom: 0; }
.ace-fp .gcard.live { background: var(--gold-soft); border-color: transparent; }
.ace-fp .gcard.live .hero-num { margin: 0 0 6px; }
.ace-fp .live-cpa { margin: 0 0 8px; font-size: 13px; }
.ace-fp .g3grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }
.ace-fp .g3grid .sec { border-top: 0; padding-top: 0; margin-top: 0; }
.ace-fp .cta-mini.wide { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; }
.ace-fp .cta-mini.wide > div { display: grid; gap: 6px; }
@media (max-width: 1100px) {.ace-fp .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ace-fp .g2grid, .ace-fp .g3grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ace-fp .g2grid > .live, .ace-fp .g3grid > :last-child { grid-column: 1 / -1; }
.ace-fp .matches.row3 { grid-template-columns: minmax(0, 1fr); }

}
@media (max-width: 780px) {.ace-fp .qgrid, .ace-fp .g2grid, .ace-fp .g3grid { grid-template-columns: minmax(0, 1fr); }
.ace-fp .cta-mini.wide { grid-template-columns: minmax(0, 1fr); justify-items: start; }
.ace-fp .app.guided .inspector { padding: 16px; }
.ace-fp .app.guided .canvas-wrap { height: 56vh; min-height: 360px; }

}
/* Branche en leadformulier */
.ace-fp .gcard.branch { grid-column: 1 / -1; background: var(--surface); }
.ace-fp .opt-lbl { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.ace-fp .branch-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 4px 16px; align-items: end; }
.ace-fp .branch-row .row { margin-bottom: 6px; }
.ace-fp .branch-row .seg { align-self: start; }
.ace-fp .gcard.branch .bench { margin-top: 0; font-size: 12.5px; }
.ace-fp .gcard.branch .bench strong { color: var(--ink); }
.ace-fp .lead-card { margin-top: 18px; border: 1px solid var(--gold); border-radius: 12px; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 24px; background: var(--surface-2); }
.ace-fp .lead-card.done { grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-color: var(--good); }
.ace-fp .lead-intro { display: grid; gap: 4px; align-content: start; }
.ace-fp .lead-intro b { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.25; }
.ace-fp .lead-intro p { margin: 0; font-size: 12.5px; color: var(--muted); }
.ace-fp .lead-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.ace-fp .lead-fields .row { margin-bottom: 0; }
.ace-fp .lead-fields input { width: 100%; }
.ace-fp .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.ace-fp .consent { grid-column: 2; display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); }
.ace-fp .consent input { margin-top: 2px; accent-color: var(--ink); }
.ace-fp .lead-actions { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ace-fp .lead-card.done .lead-actions { grid-column: auto; }
.ace-fp .cta-mini .lead-actions { grid-column: auto; }
.ace-fp .cta-mini a.btn.ghost-dark { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); }
.ace-fp .lead-err { grid-column: 2; margin: 0; font-size: 12.5px; color: var(--bad); font-weight: 600; }
@media (max-width: 1100px) {.ace-fp .lead-card, .ace-fp .lead-card.done { grid-template-columns: minmax(0, 1fr); }
.ace-fp .consent, .ace-fp .lead-actions, .ace-fp .lead-err { grid-column: auto; }

}
@media (max-width: 780px) {.ace-fp .branch-row, .ace-fp .lead-fields { grid-template-columns: minmax(0, 1fr); }

}
.ace-fp .gcard.branch .bench { display: block; }
.ace-fp .lead-fields { row-gap: 10px; }
.ace-fp .lead-actions a.btn { text-decoration: none; }
/* Stap 2: eigen cijfers */
.ace-fp .ch-grp { padding-top: 10px; margin-top: 10px; border-top: 1px dashed var(--line); }
.ace-fp .ch-grp:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.ace-fp .ch-name { margin: 0 0 8px; font-weight: 600; font-size: 13px; }
.ace-fp .note.top { margin: -4px 0 10px; }
.ace-fp .fld { margin-bottom: 12px; }
.ace-fp .fld:last-child { margin-bottom: 0; }
.ace-fp .fld .lbl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ace-fp .fld-row { display: flex; gap: 6px; align-items: stretch; }
.ace-fp .fld-row input { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 13.5px; }
.ace-fp .btn.mini { padding: 5px 9px; font-size: 12px; flex: none; }
.ace-fp .fld-ref { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.6; }
.ace-fp .fld-ref .chip { font-size: 11px; padding: 1px 8px; margin-left: 2px; }
.ace-fp .fld.is-bench input { border-style: dashed; border-color: var(--gold); background: var(--gold-soft); }
.ace-fp .fld.is-bench input::placeholder { color: var(--gold-ink); opacity: 1; }
.ace-fp .fld.missing input { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.ace-fp .gcard.live { grid-column: 1 / -1; }
.ace-fp .live-todo { display: grid; gap: 4px; }
.ace-fp .live-todo b { font-size: 14px; }
.ace-fp .live-todo p { margin: 0; font-size: 13px; color: var(--muted); }
.ace-fp .live-done { display: flex; flex-wrap: wrap; gap: 6px 32px; align-items: end; }
.ace-fp .live-done .hero-num { margin: 0; }
.ace-fp .live-done .note { margin: 0; }
.ace-fp #g2next.is-off { opacity: .55; }
.ace-fp .canvas-wrap.pending #nodes, .ace-fp .canvas-wrap.pending #edges { opacity: .35; transition: opacity .2s; }
.ace-fp .cmp-list { display: grid; gap: 6px; }
.ace-fp .cmp-row { display: grid; grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1.4fr) auto; gap: 6px 14px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 12.5px; }
.ace-fp .cmp-l { font-weight: 600; }
.ace-fp .cmp-v { font-size: 13px; font-weight: 600; }
.ace-fp .cmp-r { color: var(--muted); }
.ace-fp .sec.cmp { margin-top: 18px; }
@media (max-width: 780px) {.ace-fp .cmp-row { grid-template-columns: minmax(0, 1fr) auto; }
.ace-fp .cmp-r { grid-column: 1 / -1; }

}
/* Knoppen naar rendabel */
.ace-fp .verdict.plan { background: var(--gold-soft); }
.ace-fp .verdict.plan .dot { background: var(--gold); }
.ace-fp .levers { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.ace-fp .levers li { line-height: 1.45; }
.ace-fp .lv-note { color: var(--muted); }
.ace-fp .ch-pick { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.ace-fp .ch-pick .opts { gap: 5px; }
.ace-fp .ch-pick .opt { font-size: 12.5px; padding: 5px 10px; }
.ace-fp .ch-pick .opt[aria-pressed="true"]::before { content: "✓ "; }
.ace-fp .ch-pick + .ch-grp { border-top: 0; padding-top: 0; margin-top: 0; }
/* Funnelbouwer als startpunt */
.ace-fp .btn.assist { background: var(--teal); border-color: var(--teal); color: var(--paper); font-weight: 600; }
.ace-fp .btn.assist:hover { filter: brightness(1.08); }
.ace-fp .btn.build { border-color: var(--gold); border-width: 1.5px; font-weight: 600; }
.ace-fp .mobile-note { display: none; margin: 0; padding: 10px 14px; background: var(--gold-soft); color: var(--ink); font-size: 12.5px; border: 1px solid var(--line); border-bottom: 0; }
@media (max-width: 780px) {.ace-fp .app .mobile-note { display: block; }
 }
.ace-fp .example-note { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.ace-fp details.range { margin-top: 4px; padding-top: 10px; }
.ace-fp details.range summary { font-size: 12.5px; }
.ace-fp details.range .row:first-of-type { margin-top: 8px; }
/* Rondleiding */
.ace-fp .tour { position: fixed; inset: 0; z-index: 90; }
.ace-fp .tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(8, 8, 6, .62); outline: 2px solid var(--gold); transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
.ace-fp .tour-card { position: fixed; width: min(360px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); padding: 14px 16px; display: grid; gap: 6px; }
.ace-fp .tour-anim { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ace-fp .tour-anim svg { display: block; width: 100%; height: auto; }
.ace-fp .tour-step { margin: 4px 0 0; font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.ace-fp .tour-card h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.ace-fp .tour-text { margin: 0; font-size: 13px; color: var(--muted); }
.ace-fp .tour-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.ace-fp .tour-nav span { display: flex; gap: 6px; }
.ace-fp .tour-nav .btn[disabled] { opacity: .4; }
/* animaties in de kaartjes */
.ace-fp .ta text { font-family: var(--font-body); fill: var(--ink); }
.ace-fp .ta .ta-t { font-size: 13px; font-weight: 600; }
.ace-fp .ta .ta-s { font-size: 11px; fill: var(--muted); }
.ace-fp .ta .ta-n { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.ace-fp .ta .ta-p { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-anchor: middle; }
.ace-fp .ta .ta-bt { font-size: 13px; font-weight: 600; text-anchor: middle; fill: var(--paper); }
.ace-fp .ta-box, .ace-fp .ta-panel { fill: var(--surface); stroke: var(--line); }
.ace-fp .ta-node { fill: var(--surface); stroke: var(--line); }
.ace-fp .ta-node.goal { stroke: var(--gold); stroke-width: 2; }
.ace-fp .ta-chip, .ace-fp .ta-chip2 { fill: var(--surface-2); stroke: var(--line); }
.ace-fp .ta-ink { stroke: var(--muted); }
.ace-fp .ta-hl { fill: var(--gold-soft); }
.ace-fp .ta-cursor { fill: var(--gold); stroke: var(--ink); stroke-width: 1.5; }
.ace-fp .ta-port { fill: var(--gold); }
.ace-fp .ta-line { stroke: var(--teal); stroke-width: 2.5; stroke-dasharray: 92; stroke-dashoffset: 92; }
.ace-fp .ta-edge { stroke: var(--muted); stroke-width: 1.6; }
.ace-fp .ta-pill { fill: var(--surface); stroke: var(--line); }
.ace-fp .ta-bar { fill: var(--ink); opacity: .55; transform-box: fill-box; transform-origin: left center; }
.ace-fp .ta-bar2 { fill: var(--gold); }
.ace-fp .ta-mark { stroke: var(--ink); stroke-dasharray: 3 3; }
.ace-fp .ta-ok { fill: var(--good); opacity: 0; }
.ace-fp .ta-okv { stroke: var(--paper); stroke-width: 2.5; opacity: 0; }
.ace-fp .ta-btn { fill: var(--teal); }
.ace-fp .ta-pulse { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {.ace-fp .ta-select .ta-hl { animation: taSel 3s infinite; }
.ace-fp .ta-add .ta-move { animation: taMove 3s ease-in-out infinite; }
.ace-fp .ta-add .ta-cursor { animation: taCur 3s ease-in-out infinite; }
.ace-fp .ta-connect .ta-line { animation: taLine 3s ease-in-out infinite; }
.ace-fp .ta-connect .ta-cursor { animation: taConn 3s ease-in-out infinite; }
.ace-fp .ta-edit .a1 { animation: taOut 3s infinite; }
.ace-fp .ta-edit .a2 { animation: taIn 3s infinite; }
.ace-fp .ta-edit .ta-pill { animation: taPill 3s infinite; }
.ace-fp .ta-edit .ta-cursor { animation: taTap 3s infinite; }
.ace-fp .ta-result .ta-bar { animation: taBar 3s ease-in-out infinite; }
.ace-fp .ta-result .ta-ok, .ace-fp .ta-result .ta-okv { animation: taOk 3s infinite; }
.ace-fp .ta-help .ta-pulse { animation: taPulse 1.6s ease-in-out infinite; }

}
@media (prefers-reduced-motion: reduce) {.ace-fp .ta-line { stroke-dashoffset: 0; }
.ace-fp .ta-edit .a1 { opacity: 0; }
.ace-fp .ta-ok, .ace-fp .ta-okv { opacity: 1; }
.ace-fp .ta-add .ta-move { transform: translate(170px, 30px); }
.ace-fp .ta-result .ta-bar { transform: scaleX(.66); }

}
.ace-fp .ta-edit .a2 { opacity: 0; }
.ace-fp .ta-add .ta-move { opacity: .95; }
.ace-fp .ta-add .ta-cursor { transform: translate(54px, 31px); }
@keyframes taSel { 0%, 20% { transform: translateY(0); } 35%, 55% { transform: translateY(23px); } 70%, 100% { transform: translateY(46px); } }
@keyframes taMove { 0%, 15% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .95; } 60%, 100% { transform: translate(170px, 30px); opacity: .95; } }
@keyframes taCur { 0%, 15% { transform: translate(54px, 31px); opacity: 0; } 20% { opacity: 1; } 60% { transform: translate(224px, 61px); opacity: 1; } 75%, 100% { transform: translate(224px, 61px); opacity: 0; } }
@keyframes taLine { 0%, 15% { stroke-dashoffset: 92; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes taConn { 0%, 15% { transform: translateX(0); opacity: 1; } 60% { transform: translateX(90px); opacity: 1; } 75%, 100% { transform: translateX(90px); opacity: 0; } }
@keyframes taOut { 0%, 40% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes taIn { 0%, 40% { opacity: 0; } 48%, 100% { opacity: 1; } }
@keyframes taPill { 0%, 30% { fill: var(--surface); } 36%, 52% { fill: var(--gold-soft); } 60%, 100% { fill: var(--surface); } }
@keyframes taTap { 0%, 25% { opacity: 0; r: 5; } 32% { opacity: 1; r: 7; } 40% { r: 4; } 55%, 100% { opacity: 0; } }
@keyframes taBar { 0%, 20% { transform: scaleX(1); } 60%, 100% { transform: scaleX(.66); } }
@keyframes taOk { 0%, 60% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes taPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
/* Zoeken en inklappen in het palet */
.ace-fp .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ace-fp .pal-search { margin: 0 2px 10px; }
.ace-fp .pal-search input { width: 100%; }
.ace-fp .pal-grp { margin: 0 0 6px; }
.ace-fp .pal-grp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 6px 4px; border-radius: 6px; }
.ace-fp .pal-grp > summary::-webkit-details-marker { display: none; }
.ace-fp .pal-grp > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.ace-fp .pal-grp[open] > summary::before { transform: rotate(45deg); }
.ace-fp .pal-grp > summary:hover { color: var(--ink); background: var(--surface-2); }
.ace-fp .pal-grp .pal-list { padding: 2px 0 6px; }
.ace-fp .pal-empty { font-size: 12px; color: var(--muted); margin: 6px 4px; }
/* Uitleg en bronnen inklapbaar */
.ace-fp .below { align-items: start; }
.ace-fp .below-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.ace-fp .below-sec > summary::-webkit-details-marker { display: none; }
.ace-fp .below-sec > summary h2 { margin: 0; }
.ace-fp .below-sec > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .15s; flex: none; }
.ace-fp .below-sec[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.ace-fp .below-sec > summary:hover h2 { color: var(--teal); }
.ace-fp .below-sec[open] > summary { margin-bottom: 12px; }
.ace-fp .pal-search input { background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; }
/* Quiz-strook boven het canvas */
.ace-fp .quiz-panel { background: var(--surface); border: 1px solid var(--line); border-bottom: 0; padding: 18px 22px 20px; }
.ace-fp .quiz-panel[hidden] { display: none; }
.ace-fp .qp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ace-fp .qp-head .insp-desc { max-width: 72ch; }
.ace-fp .app.quiz-open #btnGuided { box-shadow: 0 0 0 3px var(--gold-soft); }
/* Zijpaneel: kop met uitkomst, tabs */
.ace-fp .work { grid-template-columns: minmax(0, 1fr) 372px; }
.ace-fp .sum-head { margin: 4px 0 12px; }
.ace-fp .todo { background: var(--gold-soft); border-radius: 12px; padding: 12px 13px; display: grid; gap: 8px; }
.ace-fp .todo-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.ace-fp .todo p { margin: 0; font-size: 12.5px; color: var(--ink); }
.ace-fp .todo p.note { color: var(--muted); font-size: 11.5px; }
.ace-fp .todo .bar { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.ace-fp .todo .btn.primary { justify-self: start; }
.ace-fp .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ace-fp .kpis > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 9px; display: grid; gap: 3px; align-content: start; min-width: 0; }
.ace-fp .kpis span { font-size: 11px; color: var(--muted); line-height: 1.3; }
.ace-fp .kpis strong { font-family: var(--font-mono); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ace-fp .kpi-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.ace-fp .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 -16px 4px; padding: 0 12px; position: sticky; top: -16px; background: var(--surface); z-index: 2; }
.ace-fp .tabs [role="tab"] { border: 0; background: transparent; padding: 10px 10px 9px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
.ace-fp .tabs [role="tab"]:hover { color: var(--ink); }
.ace-fp .tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.ace-fp .tab-b { font: 700 10.5px var(--font-mono); border-radius: 99px; padding: 1px 6px; }
.ace-fp .tab-b.warn { background: var(--warn-soft); color: var(--warn); }
.ace-fp .tab-b.good { background: var(--good-soft); color: var(--good); }
.ace-fp .tab-b.dot { width: 7px; height: 7px; padding: 0; }
.ace-fp .tab-b.dot.good { background: var(--good); }
.ace-fp .tab-b.dot.warn { background: var(--gold); }
.ace-fp .tab-b.dot.off { display: none; }
.ace-fp .tab-body > .verdict:first-child, .ace-fp .tab-body > .live-todo:first-child { margin-top: 12px; }
.ace-fp .live-todo .actions { margin-top: 8px; }
.ace-fp .fgrp { padding: 12px 0 6px; border-top: 1px solid var(--line); }
.ace-fp .fgrp h5 { margin: 0 0 10px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ace-fp .inspector .ch-pick { padding: 12px 0; margin: 0; border-bottom: 0; border-top: 1px solid var(--line); }
.ace-fp details.branch-d { margin: 0; border-top: 0; padding: 12px 0; }
.ace-fp details.branch-d .branch { margin-top: 10px; }
.ace-fp .inspector .branch-row { grid-template-columns: minmax(0, 1fr); }
.ace-fp .inspector .branch .bench { font-size: 12px; color: var(--muted); margin: 0; }
.ace-fp .inspector .branch .bench strong { color: var(--ink); }
.ace-fp .inspector .lead-card, .ace-fp .inspector .lead-card.done { grid-template-columns: minmax(0, 1fr); }
.ace-fp .inspector .consent, .ace-fp .inspector .lead-actions, .ace-fp .inspector .lead-err { grid-column: auto; }
.ace-fp .inspector .lead-fields { grid-template-columns: minmax(0, 1fr); }
.ace-fp .inspector .cmp-row { grid-template-columns: minmax(0, 1fr) auto; }
.ace-fp .inspector .cmp-r { grid-column: 1 / -1; }
/* Open velden en focus op het canvas */
.ace-fp #cv .edge.open .elabel rect { stroke: var(--gold); stroke-dasharray: 3 3; fill: var(--gold-soft); }
.ace-fp #cv .edge.open .elabel text { fill: var(--gold-ink); }
.ace-fp #cv .edge.open .eline { stroke-dasharray: 4 4; }
.ace-fp #cv .node.unk .nval { fill: var(--muted); }
.ace-fp #cv .node.hl .nbox { stroke: var(--gold); stroke-width: 2.4; }
.ace-fp #cv .edge.hl .eline { stroke: var(--gold); stroke-width: 2.6; }
.ace-fp #cv .edge.hl .elabel rect { stroke: var(--gold); stroke-width: 2; stroke-dasharray: none; }
/* Animatie: klik op een stap */
.ace-fp .ta .ta-n.sm { font-size: 11px; }
.ace-fp .ta .ta-s.xs { font-size: 9px; }
.ace-fp .ta-inspect .ta-slide { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {.ace-fp .ta-inspect .ta-cursor { animation: taTap 3s infinite; }
.ace-fp .ta-inspect .ta-sel { animation: taSelN 3s infinite; }
.ace-fp .ta-inspect .ta-slide { animation: taSlide 3s ease-out infinite; }

}
@keyframes taSelN { 0%, 30% { stroke: var(--line); stroke-width: 1; } 38%, 100% { stroke: var(--gold); stroke-width: 2.4; } }
@keyframes taSlide { 0%, 34% { opacity: 0; transform: translateX(24px); } 50%, 100% { opacity: 1; transform: translateX(0); } }
@media (max-width: 1100px) {.ace-fp .work { grid-template-columns: minmax(0, 1fr); }
.ace-fp .tabs { top: 0; }

}
@media (max-width: 780px) {.ace-fp #btnTour, .ace-fp #btnNew { display: none; }
.ace-fp .quiz-panel { padding: 16px; }
.ace-fp .kpis strong { font-size: 16px; }

}


/* SVG van het canvas (zelfde regels als SVG_CSS in de JS, die ook voor de PNG-export gebruikt wordt) */
.ace-fp #cv .dot, .ace-fp .dot { fill: var(--grid); }
.ace-fp .arrow { fill: var(--muted); }
.ace-fp .arrow.sel { fill: var(--ink); }
.ace-fp .eline { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.ace-fp .edge.sel .eline { stroke: var(--ink); stroke-width: 2.2; }
.ace-fp .ehit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; }
.ace-fp .elabel { cursor: pointer; }
.ace-fp .elabel rect { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.ace-fp .elabel text { font: 600 11px var(--font-mono); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.ace-fp .edge.changed .elabel rect { stroke: var(--warn); stroke-width: 1.5; }
.ace-fp .edge.sel .elabel rect { fill: var(--ink); stroke: var(--ink); }
.ace-fp .edge.sel .elabel text { fill: var(--paper); }
.ace-fp .node { cursor: grab; }
.ace-fp .nbox { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.ace-fp .node:hover .nbox { stroke: var(--muted); }
.ace-fp .node.goal .nbox { stroke: var(--gold); stroke-width: 2.5; }
.ace-fp .node.sel .nbox { stroke: var(--ink); stroke-width: 2; }
.ace-fp .nstripe.source { fill: var(--teal); }
.ace-fp .nstripe.step { fill: var(--muted); }
.ace-fp .nstripe.conv { fill: var(--gold); }
.ace-fp .ntag { font: 600 9.5px var(--font-mono); letter-spacing: .06em; fill: var(--muted); }
.ace-fp .nlabel { font: 600 13px var(--font-body); fill: var(--ink); }
.ace-fp .nval { font: 600 19px var(--font-mono); fill: var(--ink); }
.ace-fp .nunit { font: 400 10.5px var(--font-body); fill: var(--muted); }
.ace-fp .nsub { font: 500 10px var(--font-mono); fill: var(--muted); text-anchor: end; }
.ace-fp .nsub.rev { fill: var(--good); }
.ace-fp .goalbadge rect { fill: var(--gold); }
.ace-fp .goalbadge text { font: 700 9px var(--font-mono); fill: #1A1813; text-anchor: middle; dominant-baseline: central; letter-spacing: .06em; }
.ace-fp .port { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; }
.ace-fp .port.out { cursor: crosshair; }
.ace-fp .porthit { fill: transparent; cursor: crosshair; }
.ace-fp .node:hover .port.out, .ace-fp .node.sel .port.out { fill: var(--gold); stroke: var(--gold); }
.ace-fp .ghost { fill: none; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 5 4; }