Spaces:

pantdipendra
/

checklist

Running

App Files Files Community

pantdipendra commited on Sep 5, 2025

Commit

ab477c5

verified ·

1 Parent(s): 1652feb

V2

Browse files

Files changed (1) hide show

app.js +1158 -659

app.js CHANGED Viewed

@@ -1,698 +1,1197 @@
-      /* ------------ Data ------------ */
-      const PURPOSES = [
-        {
-          id: "research",
-          title: "Health Research (HRA)",
-          blurb: "Scientific knowledge.",
-          refs: [],
-        },
-        {
-          id: "quality",
-          title: "Quality Improvement",
-          blurb: "Improve your own service.",
-          refs: [],
-        },
-        {
-          id: "statistics",
-          title: "Statistics / Official",
-          blurb: "Org/regional/national stats.",
-          refs: [],
-        },
-        {
-          id: "innovation",
-          title: "Innovation / AI",
-          blurb: "Tool/algorithm/model.",
-          refs: [],
-        },
-        {
-          id: "anon",
-          title: "Exclusively Anonymized Data",
-          blurb: "No reasonable reidentification risk.",
-          refs: [],
-        },
-      ];
-      const STEPS = [
-        {
-          num: 1,
-          key: "classification",
-          title: "Project classification",
-          items: [
-            { k: "1a", label: "(a) Confirm pathway.", req: true },
-            {
-              k: "1b",
-              label: "(b) Controller / joint controller — Art. 4(7).",
-              req: true,
-            },
-            { k: "1c", label: "(c) 1-page summary.", req: true },
-            { k: "1d", label: "(d) Special categories? — Art. 9.", req: true },
-            { k: "1e", label: "(e) Vulnerable groups screened.", req: true },
-            {
-              k: "1f",
-              label: "(f) DPIA screening / DPIA — Art. 35.",
-              req: true,
-            },
-            { k: "1g", label: "(g) Transfers (if any) — Chap. V.", req: false },
-            {
-              k: "1h",
-              label: "(h) Plan anonymization/pseudonymization — Recital 26.",
-              req: false,
-            },
-          ],
-        },
-        {
-          num: 2,
-          key: "legal",
-          title: "Legal basis & consent",
-          items: [
-            { k: "2a", label: "(a) Art. 6 lawful basis.", req: true },
-            { k: "2b", label: "(b) Art. 9(2) condition.", req: true },
-            {
-              k: "2d",
-              label: "(d) Purpose limitation — Art. 5(1)(b).",
-              req: true,
-            },
-            {
-              k: "2c",
-              label: "(c) Consent quality/withdrawal (if used).",
-              req: false,
-            },
-            {
-              k: "2e",
-              label: "(e) Research/statistics safeguards — Art. 89.",
-              req: false,
-            },
-          ],
-        },
-        {
-          num: 3,
-          key: "ethics",
-          title: "Approvals",
-          items: [
-            {
-              k: "3a",
-              label: "(a) Research: IRB/HRA §§2–4, §9, §33.",
-              req: true,
-              showFor: ["research"],
-            },
-            {
-              k: "3b",
-              label: "(b) Statistics: HRL §19–19h.",
-              req: true,
-              showFor: ["statistics"],
-            },
-            {
-              k: "3c",
-              label: "(c) QI/Other: internal governance.",
-              req: true,
-              showFor: ["quality", "other"],
-            },
-            {
-              k: "3d",
-              label: "(d) Innovation/AI: risk review / AI Act.",
-              req: true,
-              showFor: ["innovation"],
-            },
-            {
-              k: "3e",
-              label: "(e) RoPA + notices — Arts. 30, 13/14.",
-              req: true,
-            },
-          ],
-        },
-        {
-          num: 4,
-          key: "access",
-          title: "Data access & contracts",
-          items: [
-            { k: "4a", label: "(a) Access route confirmed.", req: true },
-            { k: "4b", label: "(b) DPA / sharing / DUA ready.", req: true },
-            { k: "4c", label: "(c) Minimize data — Art. 5(1)(c).", req: true },
-            { k: "4d", label: "(d) Transfers (if any) — Chap. V.", req: false },
-          ],
-        },
-        {
-          num: 5,
-          key: "security",
-          title: "Security & privacy",
-          items: [
-            { k: "5a", label: "(a) TOMs — Art. 32.", req: true },
-            { k: "5b", label: "(b) Pseudonymize; separate keys.", req: true },
-            { k: "5c", label: "(c) DPIA outcomes signed.", req: true },
-            { k: "5d", label: "(d) Breach plan — 33/34.", req: true },
-          ],
-        },
-        {
-          num: 6,
-          key: "quality",
-          title: "Data minimization and quality",
-          items: [
-            { k: "6a", label: "(a) Provenance & dictionary.", req: true },
-            {
-              k: "6b",
-              label: "(b) Validation / missing data plan.",
-              req: true,
-            },
-          ],
-        },
-        {
-          num: 7,
-          key: "analysis",
-          title: "Analysis & AI development",
-          items: [
-            { k: "7a", label: "(a) Extract matches approvals.", req: true },
-            {
-              k: "7c",
-              label: "(c) AI docs & bias checks (if AI).",
-              req: true,
-              showFor: ["innovation"],
-            },
-          ],
-        },
-        {
-          num: 8,
-          key: "compliance",
-          title: "Compliance monitoring and auditing",
-          items: [
-            { k: "8a", label: "(a) Internal audit.", req: true },
-            { k: "8b", label: "(b) Keep RoPA up to date.", req: true },
-          ],
-        },
-        {
-          num: 9,
-          key: "closeout",
-          title: "Dissemination, closeout, retention & deletion",
-          items: [
-            { k: "9a", label: "(a) Disclosure control OK.", req: true },
-            {
-              k: "9c",
-              label: "(c) Retention/deletion — Art. 5(1)(e).",
-              req: true,
-            },
-          ],
-        },
-      ];
-      /* Flow questions derived from the flowchart */
-      const FLOW = {
-        1: {
-          q: "Project classification complete & documented?",
-          onYes: 2,
-          onNo: 1,
-        },
-        2: { q: "Valid legal route and consent completed?", onYes: 3, onNo: 2 },
-        3: {
-          q: "All ethical and regulatory approvals in place?",
-          onYes: 4,
-          onNo: 3,
-        },
-        4: { q: "Data access route & contracts are ok?", onYes: 5, onNo: 4 },
-        5: {
-          q: "Information security & privacy measures and risks controlled?",
-          onYes: 6,
-          onNo: 5,
-        },
-        6: { q: "Proceed to analysis?", onYes: 7, onNo: 6 },
-        /* Step 7 has several conditional checks in order */
-        7: [
-          { q: "Extract matches necessary approvals?", yes: 8, no: 3 },
-          { q: "Any new purpose?", yes: 1, no: "next" },
-          { q: "Any new approvals needed?", yes: 3, no: "next" },
-          { q: "Any new access/contracts?", yes: 4, no: 8 },
         ],
-        8: { q: "Any gaps found?", onYes: 4, onNo: 9 },
-        9: { q: "Retain/reuse beyond plan?", onYes: 1, onNo: "end" },
-      };
-      /* ------------ State ------------ */
-      const STORAGE = "suhr_flow_v1";
-      const $ = (s) => document.querySelector(s);
-      const $$ = (s) => Array.from(document.querySelectorAll(s));
-      const state = {
-        purpose: null,
-        checks: {},
-        savedAt: null,
-        visible: 0,
-        step: 0,
-        subQ: 0,
-        reachedEnd: false, // track if user ever reached the end screen
-      };
-      /* ------------ Purpose UI ------------ */
-      function renderPurposes() {
-        const host = $("#purposeList");
-        host.innerHTML = "";
-        PURPOSES.forEach((p) => {
-          const el = document.createElement("label");
-          el.className = "option";
-          el.innerHTML = `
-            <input type="radio" name="purpose" value="${p.id}">
-            <div style="display:flex;justify-content:space-between;gap:8px">
-              <div><b>${p.title}</b><div class="tiny" style="margin-top:4px">${
-            p.blurb
-          }</div></div>
-              <span class="tag gdpr">${
-                p.id === "anon" ? "No GDPR" : "GDPR"
-              }</span>
-            </div>`;
-          el.addEventListener("click", () => {
-            state.purpose = p.id;
-            save(true);
-            $("#anonMsg").classList.toggle("hidden", state.purpose !== "anon");
-            if (p.id === "anon") {
-              hideFlow();
-              renderDots(0);
-              $("#timeline").innerHTML = "";
-              $("#finish").classList.remove("show");
-              state.reachedEnd = false;
-              return;
-            }
-            // start at step 1
-            state.visible = 1;
-            state.step = 1;
-            state.subQ = 0;
-            state.reachedEnd = false;
-            save(true);
-            $("#finish").classList.remove("show");
-            renderDots(state.visible);
-            renderTimeline();
-            showFlow();
-            askCurrent(); // auto-expand step 1
-          });
-          host.appendChild(el);
-        });
-        if (state.purpose) {
-          $$('input[name="purpose"]').forEach((i) => {
-            if (i.value === state.purpose) {
-              i.checked = true;
-              i.closest(".option").classList.add("active");
-            }
-          });
-          $("#anonMsg").classList.toggle("hidden", state.purpose !== "anon");
-        }
-      }
-      /* ------------ Timeline (accordion) ------------ */
-      function renderTimeline() {
-        const host = $("#timeline");
-        host.innerHTML = "";
-        if (!state.purpose || state.purpose === "anon") return;
-        const v = state.visible || 1;
-        for (let i = 0; i < v; i++) addStep(host, STEPS[i], i + 1);
-        expandDetailsForStep(state.step);
-      }
-      function addStep(host, step, idx) {
-        const done = isStepComplete(step);
-        const sec = document.createElement("section");
-        sec.className = "step" + (done ? " done" : "");
-        sec.dataset.step = step.key;
-        sec.innerHTML = `
-          <div class="head">
-            <div class="title">
-              <span class="num">${step.num}</span>
-              <div><b>${step.title}</b></div>
-            </div>
-            <div style="display:flex;gap:8px;align-items:center">
-              <span class="badge" id="badge_${step.key}">${
-          done ? "Complete ✓" : "In progress"
-        }</span>
-              <button class="toggle" data-fold="${step.key}">Details</button>
-            </div>
-          </div>
-          <div class="body fold" id="fold_${step.key}">
-            <ul class="list"></ul>
-          </div>`;
-        const ul = sec.querySelector(".list");
-        step.items.forEach((it) => {
-          if (it.showFor && !it.showFor.includes(state.purpose)) return;
-          const checked = !!state.checks[step.key]?.[it.k];
-          const li = document.createElement("li");
-          li.className = "li";
-          const id = `${step.key}_${it.k}`;
-          li.innerHTML = `
-            <div class="letters">${it.k}</div>
-            <label for="${id}">${it.label}${
-            it.req
-              ? ` <span class='req'>★</span>`
-              : " <span class='opt'>(opt)</span>"
-          }</label>
-            <div style="display:flex;align-items:center;gap:8px">
-              <input class="chk" type="checkbox" id="${id}" ${
-            checked ? "checked" : ""
-          }/>
-              <svg class="box" viewBox="0 0 24 24" aria-hidden="true"><path class="tick" d="M5 13l4 4L19 7"/></svg>
-            </div>`;
-          li.querySelector(".chk").addEventListener("change", (e) => {
-            (state.checks[step.key] ??= {})[it.k] = e.target.checked;
-            save(true);
-            const nowDone = isStepComplete(step);
-            $("#badge_" + step.key).textContent = nowDone
-              ? "Complete ✓"
-              : "In progress";
-            if (nowDone && !sec.classList.contains("done")) {
-              sec.classList.add("done");
-              if (idx === 1) advanceToStep(2); // auto show Step 2 when Step 1 completes
-            } else if (!nowDone) {
-              sec.classList.remove("done");
-            }
-            renderDots(state.visible); // refresh top dots' done state
-            updateProgress();
-            // If the end screen is visible (or was reached before), update/show its message when all steps are complete.
-            if ($("#finish").classList.contains("show")) {
-              refreshFinishBanner();
-            } else if (state.reachedEnd && allStepsComplete()) {
-              finish();
-            }
-          });
-          li.addEventListener("click", (e) => {
-            if (e.target.closest("a, button, input, .toggle")) return;
-            if (e.target.closest("label")) e.preventDefault();
-            const cb = li.querySelector(".chk");
-            cb.checked = !cb.checked;
-            cb.dispatchEvent(new Event("change", { bubbles: true }));
-          });
-          ul.appendChild(li);
-        });
-        // "Details" toggle
-        sec.querySelector(".toggle").addEventListener("click", () => {
-          const pane = document.getElementById("fold_" + step.key);
-          pane.classList.toggle("fold");
-        });
-        host.appendChild(sec);
-      }
-      /* Expand current step details and collapse others while asking each question */
-      function expandDetailsForStep(stepNum) {
-        if (!stepNum) return;
-        // collapse all
-        $$("#timeline .body").forEach((pane) => pane.classList.add("fold"));
-        const current = STEPS[stepNum - 1];
-        if (!current) return;
-        const pane = document.getElementById("fold_" + current.key);
-        if (pane) pane.classList.remove("fold");
-      }
-      /* ------------ Dots / progress ------------ */
-      function renderDots(visible) {
-        const d = $("#dots");
-        d.innerHTML = "";
-        for (let i = 1; i <= STEPS.length; i++) {
-          const stepObj = STEPS[i - 1];
-          const stepDone = isStepComplete(stepObj);
-          const dot = document.createElement("div");
-          dot.className =
-            "dot" +
-            (i <= visible ? " unlocked" : "") +
-            (i === state.step ? " active" : "") +
-            (stepDone ? " done" : "");
-          dot.textContent = i;
-          dot.setAttribute(
-            "aria-label",
-            `Step ${i}${stepDone ? " complete" : ""}`
-          );
-          if (i <= visible) {
-            dot.addEventListener("click", () => {
-              state.step = i;
-              state.subQ = 0;
-              save(true);
-              askCurrent();
-              scrollToStep(i);
-              highlightDot();
-            });
-          }
-          d.appendChild(dot);
-        }
         updateProgress();
       }
-      function highlightDot() {
-        $$("#dots .dot").forEach((el, idx) => {
-          el.classList.toggle("active", idx + 1 === state.step);
         });
-      }
-      function scrollToStep(n) {
-        const el = document.querySelector(`.step:nth-of-type(${n})`);
-        if (!el) return;
-        el.scrollIntoView({ behavior: "smooth", block: "start" });
-        el.animate(
-          [
-            { outlineColor: "#56b4e9", outlineWidth: "0px" },
-            { outlineColor: "#56b4e9", outlineWidth: "6px" },
-            { outlineColor: "transparent", outlineWidth: "0px" },
-          ],
-          { duration: 800 }
-        );
-      }
-      /* ------------ Flow controller (Yes/No) ------------ */
-      const flow = $("#flow"),
-        qtxt = $("#qtxt"),
-        yesBtn = $("#yesBtn"),
-        noBtn = $("#noBtn");
-      function showFlow() {
-        flow.classList.remove("hidden");
-      }
-      function hideFlow() {
-        flow.classList.add("hidden");
       }
-      function askCurrent() {
-        // Reset finish visibility text live region while navigating
-        $("#finish").classList.remove("show");
-        if (state.purpose === "anon" || !state.step) {
-          hideFlow();
-          return;
-        }
-        // Ensure the current step's checklist is expanded (and others collapsed)
-        expandDetailsForStep(state.step);
-        // Step 7 special sequence
-        if (state.step === 7) {
-          const seq = FLOW[7];
-          let idx = state.subQ;
-          if (idx >= seq.length) {
-            state.step = 8;
-            state.subQ = 0;
-            renderDots(state.visible);
-            askCurrent();
-            return;
-          }
-          const node = seq[idx];
-          qtxt.textContent = node.q;
-          yesBtn.onclick = () => {
-            if (node.yes === "next") {
-              state.subQ++;
-              askCurrent();
-              return;
-            }
-            goto(node.yes);
-          };
-          noBtn.onclick = () => {
-            if (node.no === "next") {
-              state.subQ++;
-              askCurrent();
-              return;
-            }
-            goto(node.no);
-          };
-          return;
-        }
-        // Regular step question
-        const node = FLOW[state.step];
-        if (!node) {
-          hideFlow();
-          return;
-        }
-        qtxt.textContent = node.q;
-        yesBtn.onclick = () => goto(node.onYes);
-        noBtn.onclick = () => goto(node.onNo);
-      }
-      function goto(dest) {
-        if (dest === "end") {
-          finish();
-          return;
-        }
-        // move
-        state.step = dest;
-        state.subQ = 0;
-        if (state.step > state.visible) state.visible = state.step; // grow visibility
-        renderDots(state.visible);
-        renderTimeline();
-        askCurrent();
-        scrollToStep(state.step);
-        save(true);
-      }
-      /* Called when step 1 completes to auto reveal step 2 */
-      function advanceToStep(n) {
-        if (state.visible < n) {
-          state.visible = n;
-          renderDots(state.visible);
-          renderTimeline();
-          scrollToStep(n);
-        }
-        state.step = n;
         state.subQ = 0;
-        askCurrent();
         save(true);
-      }
-      /* ------------ Helpers ------------ */
-      function isStepComplete(step) {
-        const d = state.checks[step.key] || {};
-        const req = step.items.filter(
-          (it) => !(it.showFor && !it.showFor.includes(state.purpose)) && it.req
-        );
-        return req.length ? req.every((it) => !!d[it.k]) : true;
-      }
-      function allStepsComplete() {
-        if (!state.purpose || state.purpose === "anon") return false;
-        return STEPS.every((s) => isStepComplete(s));
       }
-      function updateProgress() {
-        let total = 0,
-          done = 0;
-        STEPS.forEach((s) => {
-          if (state.purpose === "anon" && s.num > 1) return;
-          s.items.forEach((it) => {
-            if (it.showFor && !it.showFor.includes(state.purpose)) return;
-            if (it.req) {
-              total++;
-              if (state.checks[s.key]?.[it.k]) done++;
-            }
-          });
-        });
-        const pct = total ? Math.round((100 * done) / total) : 0;
-        $("#pbar").style.width = pct + "%";
       }
-      /* ------------ Finish ------------ */
-      function finish() {
-        hideFlow();
-        state.reachedEnd = true;
-        save(true);
-        const ok = allStepsComplete();
-        const finishEl = $("#finish");
-        const titleEl = $("#finishTitle");
-        const subEl = $("#finishSub");
-        const confettiHost = $("#confetti");
-        if (ok) {
-          titleEl.textContent = "End 🎉";
-          subEl.textContent = "All flow checks passed.";
-          confettiHost.innerHTML = "";
-          confetti(24);
-        } else {
-          titleEl.textContent = "End";
-          subEl.textContent = "";
-          confettiHost.innerHTML = ""; // no confetti if not fully complete
-        }
-        finishEl.classList.add("show");
-      }
-      function refreshFinishBanner() {
-        // Update finish banner live without toggling visibility
-        const ok = allStepsComplete();
-        const titleEl = $("#finishTitle");
-        const subEl = $("#finishSub");
-        const confettiHost = $("#confetti");
-        if (ok) {
-          titleEl.textContent = "End 🎉";
-          subEl.textContent = "All flow checks passed.";
-          confettiHost.innerHTML = "";
-          confetti(24);
-        } else {
-          titleEl.textContent = "End";
-          subEl.textContent = "";
-          confettiHost.innerHTML = "";
-        }
       }
-      function confetti(n) {
-        const host = $("#confetti");
-        host.innerHTML = "";
-        for (let i = 0; i < n; i++) {
-          const piece = document.createElement("i");
-          piece.style.setProperty("--dx", Math.random() * 300 - 150 + "px");
-          piece.style.left = 20 + Math.random() * 60 + "%";
-          piece.style.background = i % 2 ? "#0072B2" : "#E69F00";
-          piece.style.animationDelay = Math.random() * 0.4 + "s";
-          host.appendChild(piece);
         }
-      }
-      /* ------------ Save/Load ------------ */
-      function save(quiet = false) {
-        state.savedAt = Date.now();
-        localStorage.setItem(STORAGE, JSON.stringify(state));
-        if (!quiet) updateProgress();
       }
-      function load() {
-        try {
-          const raw = localStorage.getItem(STORAGE);
-          if (raw) Object.assign(state, JSON.parse(raw));
-        } catch (e) {}
       }
-      /* ------------ Clear / Reset ------------ */
-      function clearAll() {
-        try {
-          localStorage.removeItem(STORAGE);
-        } catch (e) {}
-        state.purpose = null;
-        state.checks = {};
-        state.savedAt = null;
-        state.visible = 0;
-        state.step = 0;
-        state.subQ = 0;
-        state.reachedEnd = false;
-        renderPurposes();
-        renderDots(0);
-        $("#timeline").innerHTML = "";
-        $("#finish").classList.remove("show");
-        $("#anonMsg").classList.add("hidden");
-        hideFlow();
-        updateProgress();
-      }
-      /* ------------ Boot ------------ */
-      load();
-      renderPurposes();
-      if (state.purpose && state.purpose !== "anon") {
-        state.visible = state.visible || 1;
-        state.step = state.step || 1;
-        renderDots(state.visible);
-        renderTimeline();
-        showFlow();
-        askCurrent();
-      } else {
-        hideFlow();
-      }
-      updateProgress();
-      // Clear button handler
-      document.getElementById("clearBtn").addEventListener("click", () => {
-        const ok = confirm(
-          "Clear all saved progress and do fresh start? This will remove your selections!"
-        );
-        if (ok) clearAll();
-      });

+const PURPOSES = [
+  { id: "research",   title: "Health Research",        blurb: "Scientific knowledge.", refs: [] },
+  { id: "quality",    title: "Quality Improvement",    blurb: "Improve your own service.", refs: [] },
+  { id: "statistics", title: "Statistics / Official",  blurb: "Org/regional/national stats.", refs: [] },
+  { id: "innovation", title: "Innovation / AI",        blurb: "Tool/algorithm/model.", refs: [] },
+  { id: "anon",       title: "Exclusively Anonymized Data", blurb: "No reasonable reidentification risk.", refs: [] },
+];
+const STEPS = [
+  {
+    num: 1,
+    key: "classification",
+    title: "Project classification",
+    items: [
+      {
+        k: "1a",
+        label:
+          "Classify per Figure 1; record purpose, controller(s)/processor(s), roles and identifiability.",
+        req: true,
+        refs: [
+          { title: "HRA §2 (scope)", url: "https://lovdata.no/lov/2008-06-20-44/%C2%A72" },
+          { title: "HRA §4 (definitions)", url: "https://lovdata.no/lov/2008-06-20-44/%C2%A74" },
+          { title: "GDPR Art. 4; Art. 4(7)", url: "https://gdpr-info.eu/art-4-gdpr/" }
         ],
+      },
+      {
+        k: "1b",
+        label:
+          "Identify data status: personal / special category (health/genetic/biometric) / anonymized. Pseudonymized data remains personal; genetics falls under biotechnology.",
+        req: true,
+        refs: [
+          { title: "GDPR Art. 9(1) (special)", url: "https://gdpr-info.eu/art-9-gdpr/" },
+          { title: "GDPR Recital 26 (anonymized)", url: "https://gdpr-info.eu/recitals/no-26/" },
+          { title: "GDPR Art. 4(5) (pseudonymized)", url: "https://gdpr-info.eu/art-4-gdpr/" }
+        ],
+      },
+      {
+        k: "1c",
+        label:
+          "If medical/health research: HRA applies and REK decides scope (before access).",
+        req: true,
+        showFor: ["research"],
+        refs: [
+          { title: "HRA §2; §4; REK scope", url: "https://lovdata.no/lov/2008-06-20-44" }
+        ],
+      },
+      {
+        k: "1d",
+        label:
+          "If using health registers: record registry restrictions.",
+        req: false,
+        showFor: ["statistics", "research", "quality", "innovation"],
+        refs: [
+          { title: "HRL §§8–11 (registers)", url: "https://lovdata.no/dokument/NL/lov/2014-06-20-43" }
+        ],
+      },
+      {
+        k: "1e",
+        label:
+          "Non-medical/health research: consult health trusts, use Figure 4, consult DPO, retain written rationale.",
+        req: true,
+        showFor: ["quality", "statistics", "innovation"],
+        refs: [
+          { title: "GDPR Art. 5(2) (accountability)", url: "https://gdpr-info.eu/art-5-gdpr/" },
+          { title: "GDPR Art. 24(1) (responsibility)", url: "https://gdpr-info.eu/art-24-gdpr/" }
+        ],
+      },
+      {
+        k: "1f",
+        label:
+          "Plan periodic re-review as tech/law evolve (accountability).",
+        req: false,
+        refs: [{ title: "GDPR Art. 5(2)", url: "https://gdpr-info.eu/art-5-gdpr/" }],
+      },
+    ],
+  },
+  {
+    num: 2,
+    key: "legal",
+    title: "Legal basis & consent",
+    items: [
+      {
+        k: "2a",
+        label:
+          "Select legal route (public interest/official authority — 6(1)(e); research/statistics — 9(2)(j) with 89(1) safeguards; healthcare/management/QI — 9(2)(h)).",
+        req: true,
+        refs: [
+          { title: "GDPR Art. 6(1)(e)", url: "https://gdpr-info.eu/art-6-gdpr/" },
+          { title: "GDPR Art. 9(2)(h)/(j)", url: "https://gdpr-info.eu/art-9-gdpr/" },
+          { title: "GDPR Art. 89(1)", url: "https://gdpr-info.eu/art-89-gdpr/" }
+        ],
+      },
+      {
+        k: "2b",
+        label:
+          "DPIA where processing is likely high risk; document rationale if not.",
+        req: true,
+        refs: [{ title: "GDPR Art. 35 (DPIA)", url: "https://gdpr-info.eu/art-35-gdpr/" }],
+      },
+      {
+        k: "2c",
+        label:
+          "Health-law confidentiality satisfied via valid consent or dispensation (archival/research/statistics in public interest).",
+        req: true,
+        refs: [
+          { title: "HPA §21 (confidentiality)", url: "https://lovdata.no/lov/1999-07-02-64/%C2%A721" },
+          { title: "HPA §29; HRL §19e (dispensation)", url: "https://lovdata.no/dokument/NL/lov/2014-06-20-43" }
+        ],
+      },
+      {
+        k: "2d",
+        label:
+          "If using consent: GDPR-valid; information duties; withdrawal covered (re-consent if needed).",
+        req: false,
+        refs: [
+          { title: "GDPR Art. 7 (consent)", url: "https://gdpr-info.eu/art-7-gdpr/" },
+          { title: "GDPR Arts. 13–14 (information)", url: "https://gdpr-info.eu/art-13-gdpr/" },
+          { title: "HRA §13 (consent, if HRA)", url: "https://lovdata.no/lov/2008-06-20-44/%C2%A713" }
+        ],
+      },
+    ],
+  },
+  {
+    num: 3,
+    key: "ethics",
+    title: "Ethics & regulatory approvals",
+    items: [
+      {
+        k: "3a",
+        label: "REK approval or exemption before research access/use.",
+        req: true,
+        showFor: ["research"],
+        refs: [
+          { title: "HRA §9; §33", url: "https://lovdata.no/lov/2008-06-20-44" }
+        ],
+      },
+      {
+        k: "3b",
+        label:
+          "Take into account ethics/regulators (REK), DPA (Datatilsynet), registry/data holders (e.g., linkage constraints).",
+        req: true,
+        refs: [
+          { title: "Datatilsynet — rules/tools", url: "https://www.datatilsynet.no/regelverk-og-verktoy/lover-og-regler/" }
+        ],
+      },
+      {
+        k: "3c",
+        label: "RoPA & transparency notices ready.",
+        req: true,
+        refs: [
+          { title: "GDPR Art. 30 (RoPA)", url: "https://gdpr-info.eu/art-30-gdpr/" },
+          { title: "GDPR Arts. 13–14 (transparency)", url: "https://gdpr-info.eu/art-13-gdpr/" }
+        ],
+      },
+      {
+        k: "3d",
+        label: "Include AI details in materials where applicable; plan obligations.",
+        req: true,
+        showFor: ["innovation"],
+        refs: [{ title: "AI Act Arts. 9–15", url: "https://ai-act-law.eu/article/9/" }],
+      },
+    ],
+  },
+  {
+    num: 4,
+    key: "access",
+    title: "Data access & agreements",
+    items: [
+      {
+        k: "4a",
+        label:
+          "Obtain DUA/DSA (or equivalent) with data provider: scope, purpose, duration, security, confidentiality, post-hoc control, return/destruction.",
+        req: true,
+      },
+      {
+        k: "4b",
+        label:
+          "Security controls for controller/processor incl. access control & logging.",
+        req: true,
+        refs: [
+          { title: "GDPR Art. 32 (security)", url: "https://gdpr-info.eu/art-32-gdpr/" },
+          { title: "PRA §22; PRR §14 (logging)", url: "https://lovdata.no/forskrift/2019-03-01-168/%C2%A714" },
+          { title: "Normen §5.2; §5.4.4", url: "https://www.helsedirektoratet.no/english/the-code-of-conduct-for-information-security-and-data-protection" }
+        ],
+      },
+      {
+        k: "4c",
+        label:
+          "Team confidentiality/training completed (duty of confidentiality).",
+        req: true,
+        refs: [
+          { title: "HPA §21", url: "https://lovdata.no/lov/1999-07-02-64/%C2%A721" }
+        ],
+      },
+      {
+        k: "4d",
+        label:
+          "Use SPE/SAE (e.g., TSD/HUNT Cloud/SAFE). Transfers via secure channels (logging, access control, encryption).",
+        req: true,
+        refs: [
+          { title: "GDPR Art. 32", url: "https://gdpr-info.eu/art-32-gdpr/" },
+          { title: "Normen (logging/encryption)", url: "https://www.helsedirektoratet.no/normen/logging-og-innsyn-i-logg-faktaark-15" }
+        ],
+      },
+      {
+        k: "4e",
+        label:
+          "If data comes from an external source (outside your institution: registries/health trusts).",
+        req: false,
+        children: [
+          {
+            k: "4e-1",
+            label:
+              "Obtain data access agreements; dispensation where applicable.",
+            req: true,
+            refs: [
+              { title: "HRL §19e; HPA §29", url: "https://lovdata.no/dokument/NL/lov/2014-06-20-43" }
+            ],
+          },
+          {
+            k: "4e-2",
+            label:
+              "Processor/joint controller contracts (GDPR 28(3), 26) and DSA/DUA signed (scope, duration, security, destruction/return).",
+            req: true,
+            refs: [
+              { title: "GDPR Art. 28(3)", url: "https://gdpr-info.eu/art-28-gdpr/" },
+              { title: "GDPR Art. 26", url: "https://gdpr-info.eu/art-26-gdpr/" }
+            ],
+          },
+        ],
+      },
+      {
+        k: "4f",
+        label:
+          "Maximum permitted retention/access period set and followed.",
+        req: true,
+        refs: [{ title: "HRL §19f", url: "https://lovdata.no/dokument/NL/lov/2014-06-20-43" }],
+      },
+      {
+        k: "4g",
+        label:
+          "Agreement aligns with SPE/Secure Processing Environment checklists.",
+        req: true,
+      },
+      {
+        k: "4h",
+        label:
+          "EHDS alignment for cross-border/secondary use (permit; SPE; permitted purposes).",
+        req: false,
+        refs: [
+          { title: "EHDS Art. 68 (permit); Arts. 73/75 (SPE); Art. 53 (purposes)", url: "https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=OJ:L_202500327" }
+        ],
+      },
+    ],
+  },
+  {
+    num: 5,
+    key: "security",
+    title: "Data security & privacy",
+    items: [
+      {
+        k: "5a",
+        label: "Pseudonymize where possible; keep keys separate.",
+        req: true,
+        refs: [{ title: "GDPR Art. 4(5)", url: "https://gdpr-info.eu/art-4-gdpr/" }],
+      },
+      {
+        k: "5b",
+        label:
+          "Encrypted storage in transit/at rest, RBAC, MFA, network segregation, key mgmt, logging with risk-based review.",
+        req: true,
+        refs: [
+          { title: "GDPR Art. 32", url: "https://gdpr-info.eu/art-32-gdpr/" },
+          { title: "PRA §22; PRR §14; Normen factsheets", url: "https://www.helsedirektoratet.no/normen/logging-og-innsyn-i-logg-faktaark-15" }
+        ],
+      },
+      {
+        k: "5c",
+        label:
+          "Derived datasets with personal data protected equally.",
+        req: true,
+        refs: [{ title: "GDPR Art. 5(1)(f); Art. 32", url: "https://gdpr-info.eu/art-5-gdpr/" }],
+      },
+      {
+        k: "5d",
+        label:
+          "DPIA done before analysis (large-scale health/innovative AI/vulnerable groups) or rationale recorded.",
+        req: true,
+        refs: [{ title: "GDPR Art. 35", url: "https://gdpr-info.eu/art-35-gdpr/" }],
+      },
+      {
+        k: "5e",
+        label:
+          "Consult DPO as required; record advice and implement recommendations.",
+        req: false,
+        refs: [{ title: "GDPR Arts. 37–39", url: "https://gdpr-info.eu/chapter-4/" }],
+      },
+      {
+        k: "5f",
+        label:
+          "Sharing within NO/EU: verify permission, lawful basis/principles; respect IP/licensing/REK terms.",
+        req: false,
+        refs: [
+          { title: "GDPR Art. 5(1)(b)-(c); Art. 6(1)", url: "https://gdpr-info.eu/art-5-gdpr/" },
+          { title: "GDPR Arts. 44–49 (transfers)", url: "https://gdpr-info.eu/chapter-5/" },
+          { title: "HRA §33 (conditions)", url: "https://lovdata.no/lov/2008-06-20-44/%C2%A733" }
+        ],
+      },
+      {
+        k: "5g",
+        label:
+          "Transfers outside EEA: lawful mechanism (adequacy/SCCs/derogations); TIA documented; approvals/logs kept.",
+        req: true,
+        refs: [
+          { title: "GDPR Arts. 44–46", url: "https://gdpr-info.eu/chapter-5/" },
+          { title: "GDPR Art. 49", url: "https://gdpr-info.eu/art-49-gdpr/" }
+        ],
+      },
+      {
+        k: "5h",
+        label:
+          "Third-party tools/vendors: GDPR 28 DPAs; safeguards vetted.",
+        req: true,
+        refs: [{ title: "GDPR Art. 28", url: "https://gdpr-info.eu/art-28-gdpr/" }],
+      },
+      {
+        k: "5i",
+        label:
+          "Data breach: notify DPA within 72h where required; assess duty to inform subjects.",
+        req: true,
+        refs: [{ title: "GDPR Arts. 33–34", url: "https://gdpr-info.eu/art-33-gdpr/" }],
+      },
+      { k: "5j", label: "Periodic review of security (incl. SPE/SAE).", req: true },
+    ],
+  },
+  {
+    num: 6,
+    key: "quality",
+    title: "Data minimisation & quality",
+    items: [
+      {
+        k: "6a",
+        label:
+          "Identify & extract only necessary/approved fields (minimisation & purpose limitation).",
+        req: true,
+        refs: [{ title: "GDPR Art. 5(1)(b)-(c)", url: "https://gdpr-info.eu/art-5-gdpr/" }],
+      },
+      {
+        k: "6b",
+        label:
+          "Post-extraction sweeps for unexpected/disallowed content (free text/images) unless approved.",
+        req: true,
+        refs: [{ title: "GDPR Art. 5(1)(c); Art. 25", url: "https://gdpr-info.eu/art-25-gdpr/" }],
+      },
+      {
+        k: "6c",
+        label:
+          "Conform to approvals, scope & objectives.",
+        req: true,
+      },
+      {
+        k: "6d",
+        label:
+          "Periodic data quality review aligned with emerging standards/regulatory updates (accuracy/accountability).",
+        req: true,
+        refs: [{ title: "GDPR Art. 5(1)(d); 5(2)", url: "https://gdpr-info.eu/art-5-gdpr/" }],
+      },
+    ],
+  },
+  {
+    num: 7,
+    key: "analysis",
+    title: "Analysis & AI development",
+    items: [
+      {
+        k: "7a",
+        label:
+          "Analyse strictly within SPE/SAE; validated tools; no re-identification unless legally authorised.",
+        req: true,
+        refs: [{ title: "GDPR Art. 5(1)(a)-(b)", url: "https://gdpr-info.eu/art-5-gdpr/" }],
+      },
+      {
+        k: "7b",
+        label:
+          "Maintain comprehensive preprocessing documentation (cleaning/transforms/anonymity) & technical documentation.",
+        req: true,
+        refs: [
+          { title: "AI Act Art. 10; Annex XI–XII", url: "https://ai-act-law.eu/article/10/" },
+          { title: "GDPR Art. 5(2)", url: "https://gdpr-info.eu/art-5-gdpr/" }
+        ],
+      },
+      {
+        k: "7c",
+        label:
+          "Perform an AI risk classification assessment; document (classification framework, Annex III categories).",
+        req: true,
+        showFor: ["innovation"],
+        refs: [
+          { title: "AI Act Arts. 6–7; Annex III", url: "https://ai-act-law.eu/article/6/" }
+        ],
+        children: [
+          {
+            k: "7c-1",
+            label:
+              "High-risk AI: implement risk mgmt & controls; define human oversight; validate performance; manage drift; ensure cybersecurity.",
+            req: true,
+            refs: [{ title: "AI Act Arts. 9–15", url: "https://ai-act-law.eu/article/9/" }],
+          },
+          {
+            k: "7c-2",
+            label:
+              "High-risk AI: data governance for train/val/test — representative, relevant, accurate; bias assessed.",
+            req: true,
+            refs: [{ title: "AI Act Art. 10(2)", url: "https://ai-act-law.eu/article/10/" }],
+          },
+          {
+            k: "7c-3",
+            label:
+              "Non-high-risk AI: adopt good practice on data quality, bias (subgroup eval/mitigation/monitoring), transparency & human oversight; consider voluntary codes.",
+            req: false,
+            refs: [{ title: "AI Act Arts. 95–96", url: "https://ai-act-law.eu/article/95/" }],
+          },
+          {
+            k: "7c-4",
+            label:
+              "Maintain technical documentation & record-keeping (model, algorithms, data sources, intended purpose).",
+            req: true,
+            refs: [
+              { title: "AI Act Art. 11 (tech docs)", url: "https://ai-act-law.eu/article/11/" },
+              { title: "AI Act Art. 12 (records)", url: "https://ai-act-law.eu/article/12/" }
+            ],
+          },
+          {
+            k: "7c-5",
+            label:
+              "For AI projects: ongoing obligations — risk mgmt, data governance, docs, record-keeping, transparency, human oversight, accuracy & cybersecurity.",
+            req: true,
+            refs: [{ title: "AI Act Arts. 9–15", url: "https://ai-act-law.eu/article/9/" }],
+          },
+          {
+            k: "7c-6",
+            label:
+              "If developing an AI model: verify permission & GDPR legal basis; remove personal data or ensure vetted/validated use; respect IP/licensing & REK terms.",
+            req: true,
+            refs: [
+              { title: "AI Act Art. 2(7) (scope)", url: "https://ai-act-law.eu/article/2/" },
+              { title: "GDPR Art. 5(1)(b)-(c); Art. 6(1); Arts. 44–49", url: "https://gdpr-info.eu/art-6-gdpr/" }
+            ],
+          },
+          {
+            k: "7c-7",
+            label:
+              "If deploying on EU market: conformity/CE/registration in EU AI database where required.",
+            req: false,
+            refs: [{ title: "AI Act Arts. 30 & 43", url: "https://ai-act-law.eu/article/30/" }],
+          },
+          {
+            k: "7c-8",
+            label:
+              "Risk mgmt & bias mitigation documented for interpretation of results.",
+            req: true,
+            refs: [
+              { title: "AI Act Art. 9; Art. 10(2)(e)", url: "https://ai-act-law.eu/article/9/" },
+              { title: "GDPR Art. 35 (DPIA)", url: "https://gdpr-info.eu/art-35-gdpr/" },
+            ],
+          },
+          {
+            k: "7c-9",
+            label:
+              "Exclude malpractice data; run fairness checks (e.g., demographic parity, equalised odds, subgroup analysis); schedule bias audits & compliance reviews; handle subject rights.",
+            req: true,
+            refs: [
+              { title: "AI Act Arts. 9, 10(2)(e), 15", url: "https://ai-act-law.eu/article/9/" },
+              { title: "GDPR Arts. 12–22 (rights)", url: "https://gdpr-info.eu/chapter-3/" }
+            ],
+          },
+          {
+            k: "7c-10",
+            label:
+              "Plan periodic reassessment & review as tech/regulations evolve.",
+            req: true,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    num: 8,
+    key: "compliance",
+    title: "Compliance monitoring & auditing",
+    items: [
+      {
+        k: "8a",
+        label:
+          "Internal audit (e.g., by/with health trust); remediate discrepancies.",
+        req: true,
+        refs: [{ title: "GDPR Art. 5(2); Art. 24", url: "https://gdpr-info.eu/art-24-gdpr/" }],
+      },
+      { k: "8b", label: "Maintain a compliance report (docs/approvals/permits/agreements).", req: true },
+      {
+        k: "8c",
+        label:
+          "All source-system extractions logged (who/when/what); periodic risk-based log review.",
+        req: true,
+        refs: [{ title: "PRA §22; PRR §14; Normen 5.4.4", url: "https://lovdata.no/forskrift/2019-03-01-168/%C2%A714" }],
+      },
+      {
+        k: "8d",
+        label:
+          "Use only for approved protocol; seek amendments before new purposes or analyses.",
+        req: true,
+        refs: [{ title: "GDPR Art. 5(1)(b); HRA §33", url: "https://gdpr-info.eu/art-5-gdpr/" }],
+      },
+      {
+        k: "8e",
+        label:
+          "Review & update audit/compliance process periodically (law & technology changes).",
+        req: true,
+      },
+    ],
+  },
+  {
+    num: 9,
+    key: "closeout",
+    title: "Dissemination, close-out, retention & deletion",
+    items: [
+      {
+        k: "9a",
+        label:
+          "Before releasing results, ensure no individual can be identified in outputs.",
+        req: true,
+        refs: [{ title: "GDPR Art. 5(1)(c); Art. 89(1)", url: "https://gdpr-info.eu/art-89-gdpr/" }],
+      },
+      {
+        k: "9b",
+        label:
+          "Publications/reports include ethics & data-protection statements (e.g., REK ref., GDPR compliance; Helsinki where applicable).",
+        req: false,
+      },
+      {
+        k: "9c",
+        label:
+          "If an AI product/service: disclose intended use, limitations, validation status; transparency.",
+        req: false,
+        refs: [{ title: "AI Act Art. 13", url: "https://ai-act-law.eu/article/13/" }],
+      },
+      {
+        k: "9d",
+        label:
+          "Fulfil reporting obligations (REK/registries/funders; EU AI database if required).",
+        req: false,
+        refs: [{ title: "AI Act Chapter III", url: "https://ai-act-law.eu/chapter/3/" }],
+      },
+      {
+        k: "9e",
+        label: "Post-project closure actions (expand when ready).",
+        req: false,
+        children: [
+          {
+            k: "9e-1",
+            label:
+              "Delete/anonymize all personal data at retention end; double-check backups & stray copies; document date & method.",
+            req: true,
+            refs: [{ title: "GDPR Art. 5(1)(e); 5(2)", url: "https://gdpr-info.eu/art-5-gdpr/" }],
+          },
+          {
+            k: "9e-2",
+            label:
+              "Archive key documentation securely (approvals, consent, scripts, final reports, DPIA), typically 5–10 years without identifiable raw data.",
+            req: true,
+            refs: [{ title: "GDPR Art. 5(1)(e); Art. 89(1)", url: "https://gdpr-info.eu/art-89-gdpr/" }],
+          },
+          {
+            k: "9e-3",
+            label:
+              "If retaining/reusing data: record new legal basis (renewed consent, extended REK, or lawful data bank/registry/biobank).",
+            req: true,
+            refs: [
+              { title: "GDPR Art. 6(1); Art. 9(2)", url: "https://gdpr-info.eu/art-6-gdpr/" },
+              { title: "HRA §§13–14; §33", url: "https://lovdata.no/lov/2008-06-20-44/%C2%A713" },
+              { title: "HRL rules", url: "https://lovdata.no/dokument/NL/lov/2014-06-20-43" }
+            ],
+          },
+          {
+            k: "9e-4",
+            label:
+              "Final debrief meeting; note best practices and recommendations.",
+            req: false,
+          },
+          {
+            k: "9e-5",
+            label:
+              "Notify relevant bodies (e.g., REK) that the study is concluded and data destroyed; update RoPA to mark project finished.",
+            req: true,
+            refs: [{ title: "GDPR Art. 30 (RoPA)", url: "https://gdpr-info.eu/art-30-gdpr/" }],
+          },
+          {
+            k: "9e-6",
+            label:
+              "If an AI model continues in clinical use: govern under ops protocols (monitoring/maintenance/fallback); if discontinued: purge model artifacts to ensure no personal data persists.",
+            req: false,
+            refs: [{ title: "AI Act Arts. 9–15; 30; 43", url: "https://ai-act-law.eu/article/9/" }],
+          },
+        ],
+      },
+    ],
+  },
+];
+/* Flow questions*/
+const FLOW = {
+  1: { q: "Project classification complete & documented?", onYes: 2, onNo: 1 },
+  2: { q: "Valid legal route and consent completed?", onYes: 3, onNo: 2 },
+  3: { q: "All ethical and regulatory approvals in place?", onYes: 4, onNo: 3 },
+  4: { q: "Data access route & contracts are ok?", onYes: 5, onNo: 4 },
+  5: {
+    q: "Information security & privacy measures and risks controlled?",
+    onYes: 6,
+    onNo: 5,
+  },
+  6: { q: "Extract matches necessary data approvals?", onYes: 7, onNo: 6 },
+  /* Step 7 has several conditional questions */
+  7: [
+    { q: "Any new purpose?", yes: 1, no: "next" },
+    { q: "Any new approvals needed?", yes: 3, no: "next" },
+    { q: "Any new access/contracts?", yes: 4, no: 8 },
+  ],
+  8: { q: "Any gaps found?", onYes: 4, onNo: 9 },
+  9: { q: "Will you retain or reuse data beyond approved plan?", onYes: 1, onNo: "end" },
+};
+/* ------------ State ------------ */
+const STORAGE = "suhr_flow_v2_nested";
+const $  = (s) => document.querySelector(s);
+const $$ = (s) => Array.from(document.querySelectorAll(s));
+const state = {
+  purpose: null,
+  checks: {},
+  savedAt: null,
+  visible: 0,
+  step: 0,
+  subQ: 0,
+  reachedEnd: false,
+};
+/* ------------ Purpose UI ------------ */
+function renderPurposes() {
+  const host = $("#purposeList");
+  host.innerHTML = "";
+  PURPOSES.forEach((p) => {
+    const el = document.createElement("label");
+    el.className = "option";
+    el.innerHTML = `
+      <input type="radio" name="purpose" value="${p.id}">
+      <div style="display:flex;justify-content:space-between;gap:8px">
+        <div><b>${p.title}</b><div class="tiny" style="margin-top:4px">${p.blurb}</div></div>
+        <span class="tag gdpr">${p.id === "anon" ? "No GDPR" : "GDPR"}</span>
+      </div>`;
+    el.addEventListener("click", (e) => {
+      host.querySelectorAll(".option").forEach(opt => opt.classList.remove("active"));
+      el.classList.add("active");
+      host.querySelectorAll('input[name="purpose"]').forEach(inp => {
+        inp.checked = (inp.value === p.id);
+      });
+      state.purpose = p.id;
+      save(true);
+      $("#anonMsg").classList.toggle("hidden", state.purpose !== "anon");
+      if (p.id === "anon") {
+        hideFlow();
+        renderDots(0);
+        $("#timeline").innerHTML = "";
+        $("#finish").classList.remove("show");
+        state.reachedEnd = false;
         updateProgress();
+        return;
       }
+      state.visible = Math.max(1, state.visible || 1);
+      state.step = 1;
+      state.subQ = 0;
+      state.reachedEnd = false;
+      save(true);
+      $("#finish").classList.remove("show");
+      renderDots(state.visible);
+      renderTimeline();
+      showFlow();
+      askCurrent();
+    });
+    host.appendChild(el);
+  });
+  if (state.purpose) {
+    $$('input[name="purpose"]').forEach((i) => {
+      const isMatch = i.value === state.purpose;
+      i.checked = isMatch;
+      if (isMatch) i.closest(".option").classList.add("active");
+    });
+    $("#anonMsg").classList.toggle("hidden", state.purpose !== "anon");
+  }
+}
+/* ------------ Timeline (accordion) ------------ */
+function renderTimeline() {
+  const host = $("#timeline");
+  host.innerHTML = "";
+  if (!state.purpose || state.purpose === "anon") return;
+  const v = state.visible || 1;
+  for (let i = 0; i < v; i++) addStep(host, STEPS[i], i + 1);
+  expandDetailsForStep(state.step);
+}
+function addStep(host, step, idx) {
+  const done = isStepComplete(step);
+  const sec = document.createElement("section");
+  sec.className = "step" + (done ? " done" : "");
+  sec.dataset.step = step.key;
+  sec.innerHTML = `
+    <div class="head">
+      <div class="title">
+        <span class="num">${step.num}</span>
+        <div><b>${step.title}</b></div>
+      </div>
+      <div style="display:flex;gap:8px;align-items:center">
+        <span class="badge" id="badge_${step.key}">${done ? "Complete ✓" : "In progress"}</span>
+        <button class="toggle" data-fold="${step.key}" aria-expanded="${!done}">Details</button>
+      </div>
+    </div>
+    <div class="body fold" id="fold_${step.key}">
+      <ul class="list"></ul>
+    </div>`;
+  const ul = sec.querySelector(".list");
+  step.items.forEach((it) => {
+    if (it.showFor && !it.showFor.includes(state.purpose)) return;
+    const checked = !!state.checks[step.key]?.[it.k];
+    const li = document.createElement("li");
+    li.className = "li" + (it.children && it.children.length ? " has-children" : "");
+    const id = `${step.key}_${it.k}`;
+    const refsHtml =
+      it.refs && it.refs.length
+        ? ` <small class="refs">` +
+          it.refs
+            .map(
+              (r) =>
+                `<a href="${r.url}" target="_blank" rel="noreferrer noopener">${(r.title || r.url)}</a>`
+            )
+            .join(" • ") +
+          `</small>`
+        : "";
+    li.innerHTML = `
+      <div class="letters">${it.k}</div>
+      <label for="${id}">${it.label}${
+      it.req ? ` <span class='req'>★</span>` : " <span class='opt'>(opt)</span>"
+    }${refsHtml}</label>
+      <div style="display:flex;align-items:center;gap:8px">
+        <input class="chk" type="checkbox" id="${id}" ${checked ? "checked" : ""}/>
+        <svg class="box" viewBox="0 0 24 24" aria-hidden="true"><path class="tick" d="M5 13l4 4L19 7"/></svg>
+      </div>`;
+    li.addEventListener("click", (e) => {
+      if (e.target.closest("a, button, input, .toggle")) return;
+      if (e.target.closest(".sublist")) return;
+      if (e.target.closest("label")) e.preventDefault();
+      const cb = li.querySelector(".chk");
+      cb.checked = !cb.checked;
+      cb.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    let sublist;
+    if (it.children && it.children.length) {
+      sublist = document.createElement("ul");
+      sublist.className = "sublist";
+      sublist.style.display = checked ? "block" : "none";
+      it.children.forEach((ch) => {
+        if (ch.showFor && !ch.showFor.includes(state.purpose)) return;
+        const cChecked = !!state.checks[step.key]?.[ch.k];
+        const cli = document.createElement("li");
+        cli.className = "li subitem";
+        const cid = `${step.key}_${ch.k}`;
+        const cRefsHtml =
+          ch.refs && ch.refs.length
+            ? ` <small class="refs">` +
+              ch.refs
+                .map(
+                  (r) =>
+                    `<a href="${r.url}" target="_blank" rel="noreferrer noopener">${(r.title || r.url)}</a>`
+                )
+                .join(" • ") +
+              `</small>`
+            : "";
+        cli.innerHTML = `
+          <div class="letters">${ch.k}</div>
+          <label for="${cid}">${ch.label}${
+          ch.req ? ` <span class='req'>★</span>` : " <span class='opt'>(opt)</span>"
+        }${cRefsHtml}</label>
+          <div style="display:flex;align-items:center;gap:8px">
+            <input class="chk" type="checkbox" id="${cid}" ${cChecked ? "checked" : ""}/>
+            <svg class="box" viewBox="0 0 24 24" aria-hidden="true"><path class="tick" d="M5 13l4 4L19 7"/></svg>
+          </div>`;
+        cli.addEventListener("click", (e) => {
+          if (e.target.closest("a, button, input, .toggle")) { e.stopPropagation(); return; }
+          if (e.target.closest("label")) e.preventDefault();
+          const ccb = cli.querySelector(".chk");
+          ccb.checked = !ccb.checked;
+          ccb.dispatchEvent(new Event("change", { bubbles: true }));
+          e.stopPropagation();
         });
+        cli.querySelector(".chk").addEventListener("change", (e) => {
+          (state.checks[step.key] ??= {})[ch.k] = e.target.checked;
+          save(true);
+          updateStepBadgeAndProgress(step, sec, idx);
+        });
+        sublist.appendChild(cli);
+      });
+      li.appendChild(sublist);
+    }
+    li.querySelector(".chk").addEventListener("change", (e) => {
+      (state.checks[step.key] ??= {})[it.k] = e.target.checked;
+      if (sublist) {
+        sublist.style.display = e.target.checked ? "block" : "none";
       }
+      save(true);
+      updateStepBadgeAndProgress(step, sec, idx);
+    });
+    ul.appendChild(li);
+  });
+  const detailsBtn = sec.querySelector(".toggle");
+  detailsBtn.addEventListener("click", () => {
+    const pane = document.getElementById("fold_" + step.key);
+    const nowFold = pane.classList.toggle("fold");
+    detailsBtn.setAttribute("aria-expanded", (!nowFold).toString());
+  });
+  host.appendChild(sec);
+}
+function updateStepBadgeAndProgress(step, sec, idx) {
+  const nowDone = isStepComplete(step);
+  $("#badge_" + step.key).textContent = nowDone ? "Complete ✓" : "In progress";
+  if (nowDone && !sec.classList.contains("done")) {
+    sec.classList.add("done");
+    /*if (idx === 1) advanceToStep(2); */
+  } else if (!nowDone) {
+    sec.classList.remove("done");
+  }
+  renderDots(state.visible);
+  updateProgress();
+  if ($("#finish").classList.contains("show")) {
+    refreshFinishBanner();
+  } else if (state.reachedEnd && allStepsComplete()) {
+    finish();
+  }
+}
+function expandDetailsForStep(stepNum) {
+  if (!stepNum) return;
+  $$("#timeline .body").forEach((pane) => pane.classList.add("fold"));
+  const current = STEPS[stepNum - 1];
+  if (!current) return;
+  const pane = document.getElementById("fold_" + current.key);
+  if (pane) {
+    pane.classList.remove("fold");
+    const btn = document.querySelector(`button.toggle[data-fold="${current.key}"]`);
+    if (btn) btn.setAttribute("aria-expanded", "true");
+  }
+}
+/* ------------ Dots / progress ------------ */
+function renderDots(visible) {
+  const d = $("#dots");
+  d.innerHTML = "";
+  for (let i = 1; i <= STEPS.length; i++) {
+    const stepObj = STEPS[i - 1];
+    const stepDone = isStepComplete(stepObj);
+    const dot = document.createElement("div");
+    dot.className =
+      "dot" +
+      (i <= visible ? " unlocked" : "") +
+      (i === state.step ? " active" : "") +
+      (stepDone ? " done" : "");
+    dot.textContent = i;
+    dot.setAttribute("aria-label", `Step ${i}${stepDone ? " complete" : ""}`);
+    if (i <= visible) {
+      dot.addEventListener("click", () => {
+        state.step = i;
         state.subQ = 0;
         save(true);
+        askCurrent();
+        scrollToStep(i);
+        highlightDot();
+      });
+    }
+    d.appendChild(dot);
+  }
+  updateProgress();
+}
+function highlightDot() {
+  $$("#dots .dot").forEach((el, idx) => {
+    el.classList.toggle("active", idx + 1 === state.step);
+  });
+}
+function scrollToStep(n) {
+  const el = document.querySelector(`.step:nth-of-type(${n})`);
+  if (!el) return;
+  el.scrollIntoView({ behavior: "smooth", block: "start" });
+  el.animate(
+    [
+      { outlineColor: "#56b4e9", outlineWidth: "0px" },
+      { outlineColor: "#56b4e9", outlineWidth: "6px" },
+      { outlineColor: "transparent", outlineWidth: "0px" },
+    ],
+    { duration: 800 }
+  );
+}
+/* ------------ Flow controller (Yes/No) ------------ */
+const flow = $("#flow"),
+  qtxt = $("#qtxt"),
+  yesBtn = $("#yesBtn"),
+  noBtn = $("#noBtn");
+function showFlow() { flow.classList.remove("hidden"); }
+function hideFlow() { flow.classList.add("hidden"); }
+function askCurrent() {
+  $("#finish").classList.remove("show");
+  if (state.purpose === "anon" || !state.step) {
+    hideFlow();
+    return;
+  }
+  expandDetailsForStep(state.step);
+  if (state.step === 7) {
+    const seq = FLOW[7];
+    let idx = state.subQ;
+    if (idx >= seq.length) {
+      state.step = 8;
+      state.subQ = 0;
+      renderDots(state.visible);
+      askCurrent();
+      return;
+    }
+    const node = seq[idx];
+    qtxt.textContent = node.q;
+    yesBtn.onclick = () => {
+      if (node.yes === "next") {
+        state.subQ++;
+        askCurrent();
+        return;
       }
+      goto(node.yes);
+    };
+    noBtn.onclick = () => {
+      if (node.no === "next") {
+        state.subQ++;
+        askCurrent();
+        return;
       }
+      goto(node.no);
+    };
+    return;
+  }
+  const node = FLOW[state.step];
+  if (!node) {
+    hideFlow();
+    return;
+  }
+  qtxt.textContent = node.q;
+  yesBtn.onclick = () => goto(node.onYes);
+  noBtn.onclick = () => goto(node.onNo);
+}
+function goto(dest) {
+  if (dest === "end") {
+    finish();
+    return;
+  }
+  state.step = dest;
+  state.subQ = 0;
+  if (state.step > state.visible) state.visible = state.step;
+  renderDots(state.visible);
+  renderTimeline();
+  askCurrent();
+  scrollToStep(state.step);
+  save(true);
+}
+/* Called when step 1 completes to auto reveal step 2 */
+function advanceToStep(n) {
+  if (state.visible < n) {
+    state.visible = n;
+    renderDots(state.visible);
+    renderTimeline();
+    scrollToStep(n);
+  }
+  state.step = n;
+  state.subQ = 0;
+  askCurrent();
+  save(true);
+}
+/* ------------ Helpers ------------ */
+function itemVisibleForPurpose(it) {
+  return !(it.showFor && !it.showFor.includes(state.purpose));
+}
+function isStepComplete(step) {
+  const d = state.checks[step.key] || {};
+  const checkItem = (it, parentChecked = true) => {
+    if (!itemVisibleForPurpose(it)) return true;
+    if (!parentChecked) return true;
+    if (it.req && !d[it.k]) return false;
+    if (it.children && d[it.k]) {
+      for (const ch of it.children) {
+        if (!itemVisibleForPurpose(ch)) continue;
+        if (ch.req && !d[ch.k]) return false;
       }
+    }
+    return true;
+  };
+  for (const it of step.items) {
+    if (!checkItem(it, true)) return false;
+  }
+  return true;
+}
+function allStepsComplete() {
+  if (!state.purpose || state.purpose === "anon") return false;
+  return STEPS.every((s) => isStepComplete(s));
+}
+function updateProgress() {
+  let total = 0, done = 0;
+  STEPS.forEach((s) => {
+    if (state.purpose === "anon" && s.num > 1) return;
+    const d = state.checks[s.key] || {};
+    s.items.forEach((it) => {
+      if (!itemVisibleForPurpose(it)) return;
+      const countChild = (ch, parentChecked) => {
+        if (!itemVisibleForPurpose(ch) || !parentChecked) return;
+        if (ch.req) {
+          total++;
+          if (d[ch.k]) done++;
         }
+      };
+      if (it.req) {
+        total++;
+        if (d[it.k]) done++;
       }
+      if (it.children && d[it.k]) {
+        it.children.forEach((ch) => countChild(ch, true));
       }
+    });
+  });
+  const pct = total ? Math.round((100 * done) / total) : 0;
+  $("#pbar").style.width = pct + "%";
+}
+/* ------------ Finish ------------ */
+function finish() {
+  hideFlow();
+  state.reachedEnd = true;
+  save(true);
+  const ok = allStepsComplete();
+  const titleEl = $("#finishTitle");
+  const subEl = $("#finishSub");
+  const confettiHost = $("#confetti");
+  if (ok) {
+    titleEl.textContent = "End 🎉";
+    subEl.textContent = "All flow checks passed.";
+    confettiHost.innerHTML = "";
+    confetti(24);
+  } else {
+    titleEl.textContent = "End";
+    subEl.textContent = "";
+    confettiHost.innerHTML = "";
+  }
+  $("#finish").classList.add("show");
+}
+function refreshFinishBanner() {
+  const ok = allStepsComplete();
+  const titleEl = $("#finishTitle");
+  const subEl = $("#finishSub");
+  const confettiHost = $("#confetti");
+  if (ok) {
+    titleEl.textContent = "End 🎉";
+    subEl.textContent = "All flow checks passed.";
+    confettiHost.innerHTML = "";
+    confetti(24);
+  } else {
+    titleEl.textContent = "End";
+    subEl.textContent = "";
+    confettiHost.innerHTML = "";
+  }
+}
+function confetti(n) {
+  const host = $("#confetti");
+  host.innerHTML = "";
+  for (let i = 0; i < n; i++) {
+    const piece = document.createElement("i");
+    piece.style.setProperty("--dx", Math.random() * 300 - 150 + "px");
+    piece.style.left = 20 + Math.random() * 60 + "%";
+    piece.style.background = i % 2 ? "#0072B2" : "#E69F00";
+    piece.style.animationDelay = Math.random() * 0.4 + "s";
+    host.appendChild(piece);
+  }
+}
+/* ------------ Save/Load ------------ */
+function save(quiet = false) {
+  state.savedAt = Date.now();
+  localStorage.setItem(STORAGE, JSON.stringify(state));
+  if (!quiet) updateProgress();
+}
+function load() {
+  try {
+    const raw = localStorage.getItem(STORAGE);
+    if (raw) Object.assign(state, JSON.parse(raw));
+  } catch (e) {}
+}
+/* ------------ Clear / Reset ------------ */
+function clearAll() {
+  try { localStorage.removeItem(STORAGE); } catch (e) {}
+  state.purpose = null;
+  state.checks = {};
+  state.savedAt = null;
+  state.visible = 0;
+  state.step = 0;
+  state.subQ = 0;
+  state.reachedEnd = false;
+  renderPurposes();
+  renderDots(0);
+  $("#timeline").innerHTML = "";
+  $("#finish").classList.remove("show");
+  $("#anonMsg").classList.add("hidden");
+  hideFlow();
+  updateProgress();
+}
+/* ------------ Boot ------------ */
+load();
+renderPurposes();
+if (state.purpose && state.purpose !== "anon") {
+  state.visible = state.visible || 1;
+  state.step = state.step || 1;
+  renderDots(state.visible);
+  renderTimeline();
+  showFlow();
+  askCurrent();
+} else {
+  hideFlow();
+}
+updateProgress();
+// Clear button handler
+document.getElementById("clearBtn").addEventListener("click", () => {
+  const ok = confirm("Clear all saved progress and do a fresh start? This will remove your selections!");
+  if (ok) clearAll();
+});