(function () {
  "use strict";

  // ─── SVG tree layout constants ──────────────────────────────────────────────
  const NS = "http://www.w3.org/2000/svg";
  const R  = 11;   // sephira circle radius

  // Standard Hermetic GD Tree of Life positions in a 240×470 viewBox
  const NODE_POS = {
    1:  [120, 30],   // Kether      — crown of middle pillar
    2:  [200, 88],   // Chokmah     — right pillar
    3:  [40,  88],   // Binah       — left pillar
    4:  [200, 213],  // Chesed      — right pillar
    5:  [40,  213],  // Geburah     — left pillar
    6:  [120, 273],  // Tiphareth   — middle pillar
    7:  [200, 343],  // Netzach     — right pillar
    8:  [40,  343],  // Hod         — left pillar
    9:  [120, 398],  // Yesod       — middle pillar
    10: [120, 448],  // Malkuth     — bottom of middle pillar
  };

  // King-scale fill colours
  const SEPH_FILL = {
    1:  "#e8e8e8",  // Kether    — white brilliance
    2:  "#87ceeb",  // Chokmah   — soft sky blue
    3:  "#7d2b5a",  // Binah     — dark crimson
    4:  "#1a56e0",  // Chesed    — deep blue
    5:  "#d44014",  // Geburah   — scarlet
    6:  "#d4a017",  // Tiphareth — gold
    7:  "#22aa60",  // Netzach   — emerald
    8:  "#cc5500",  // Hod       — orange
    9:  "#6030c0",  // Yesod     — violet
    10: "#c8b000",  // Malkuth   — citrine / amber
  };

  // Nodes with light-ish fills get dark number text; others get white
  const DARK_TEXT = new Set([1, 2, 6, 10]);

  // Da'at – phantom sephira drawn as a dashed circle, not clickable
  const DAAT = [120, 148];
  const PATH_MARKER_SCALE = 1.33;
  const PATH_LABEL_RADIUS = 9 * PATH_MARKER_SCALE;
  const PATH_LABEL_FONT_SIZE = 8.8 * PATH_MARKER_SCALE;
  const PATH_TAROT_WIDTH = 16 * PATH_MARKER_SCALE;
  const PATH_TAROT_HEIGHT = 24 * PATH_MARKER_SCALE;
  const PATH_LABEL_OFFSET_WITH_TAROT = 11 * PATH_MARKER_SCALE;
  const PATH_TAROT_OFFSET_WITH_LABEL = 1 * PATH_MARKER_SCALE;
  const PATH_TAROT_OFFSET_NO_LABEL = 12 * PATH_MARKER_SCALE;

  // ─── state ──────────────────────────────────────────────────────────────────
  const state = {
    initialized: false,
    tree: null,
    godsData: {},
    hebrewLetterIdByToken: {},
    fourWorldLayers: [],
    showPathLetters: true,
    showPathNumbers: true,
    showPathTarotCards: false,
    selectedSephiraNumber: null,
    selectedPathNumber: null
  };

  const PLANET_NAME_TO_ID = {
    saturn: "saturn",
    jupiter: "jupiter",
    mars: "mars",
    sol: "sol",
    sun: "sol",
    venus: "venus",
    mercury: "mercury",
    luna: "luna",
    moon: "luna"
  };

  const ZODIAC_NAME_TO_ID = {
    aries: "aries",
    taurus: "taurus",
    gemini: "gemini",
    cancer: "cancer",
    leo: "leo",
    virgo: "virgo",
    libra: "libra",
    scorpio: "scorpio",
    sagittarius: "sagittarius",
    capricorn: "capricorn",
    aquarius: "aquarius",
    pisces: "pisces"
  };

  const PLANET_ID_TO_LABEL = {
    saturn: "Saturn",
    jupiter: "Jupiter",
    mars: "Mars",
    sol: "Sol",
    venus: "Venus",
    mercury: "Mercury",
    luna: "Luna"
  };

  const MINOR_RANK_BY_PLURAL = {
    aces: "Ace",
    twos: "Two",
    threes: "Three",
    fours: "Four",
    fives: "Five",
    sixes: "Six",
    sevens: "Seven",
    eights: "Eight",
    nines: "Nine",
    tens: "Ten"
  };

  const MINOR_SUITS = ["Wands", "Cups", "Swords", "Disks"];

  const HEBREW_LETTER_ALIASES = {
    aleph: "alef",
    alef: "alef",
    beth: "bet",
    bet: "bet",
    gimel: "gimel",
    daleth: "dalet",
    dalet: "dalet",
    he: "he",
    vav: "vav",
    zayin: "zayin",
    cheth: "het",
    chet: "het",
    het: "het",
    teth: "tet",
    tet: "tet",
    yod: "yod",
    kaph: "kaf",
    kaf: "kaf",
    lamed: "lamed",
    mem: "mem",
    nun: "nun",
    samekh: "samekh",
    ayin: "ayin",
    pe: "pe",
    tzaddi: "tsadi",
    tzadi: "tsadi",
    tsadi: "tsadi",
    qoph: "qof",
    qof: "qof",
    resh: "resh",
    shin: "shin",
    tav: "tav"
  };

  const DEFAULT_FOUR_QABALISTIC_WORLD_LAYERS = [
    {
      slot: "Yod",
      letterChar: "י",
      hebrewToken: "yod",
      world: "Atziluth",
      worldLayer: "Archetypal World (God’s Will)",
      worldDescription: "World of gods or specific facets or divine qualities.",
      soulLayer: "Chiah",
      soulTitle: "Life Force",
      soulDescription: "The Chiah is the Life Force itself and our true identity as reflection of Supreme Consciousness."
    },
    {
      slot: "Heh",
      letterChar: "ה",
      hebrewToken: "he",
      world: "Briah",
      worldLayer: "Creative World (God’s Love)",
      worldDescription: "World of archangels, executors of divine qualities.",
      soulLayer: "Neshamah",
      soulTitle: "Soul-Intuition",
      soulDescription: "The Neshamah is the part of our soul that transcends the thinking process."
    },
    {
      slot: "Vav",
      letterChar: "ו",
      hebrewToken: "vav",
      world: "Yetzirah",
      worldLayer: "Formative World (God’s Mind)",
      worldDescription: "World of angels who work under archangelic direction.",
      soulLayer: "Ruach",
      soulTitle: "Intellect",
      soulDescription: "The Ruach is the thinking mind that often dominates attention and identity."
    },
    {
      slot: "Heh (final)",
      letterChar: "ה",
      hebrewToken: "he",
      world: "Assiah",
      worldLayer: "Material World (God’s Creation)",
      worldDescription: "World of spirits that infuse matter and energy through specialized duties.",
      soulLayer: "Nephesh",
      soulTitle: "Animal Soul",
      soulDescription: "The Nephesh is instinctive consciousness expressed through appetite, emotion, sex drive, and survival."
    }
  ];

  function titleCase(value) {
    return String(value || "")
      .split(/[\s-_]+/)
      .filter(Boolean)
      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
      .join(" ");
  }

  function normalizeSoulId(value) {
    return String(value || "")
      .trim()
      .toLowerCase()
      .replace(/[^a-z]/g, "");
  }

  function buildFourWorldLayersFromDataset(magickDataset) {
    const worlds = magickDataset?.grouped?.kabbalah?.fourWorlds;
    const souls = magickDataset?.grouped?.kabbalah?.souls;
    if (!worlds || typeof worlds !== "object") {
      return [...DEFAULT_FOUR_QABALISTIC_WORLD_LAYERS];
    }

    const worldOrder = ["atzilut", "briah", "yetzirah", "assiah"];
    const soulAliases = {
      chiah: "chaya",
      chaya: "chaya",
      neshamah: "neshama",
      neshama: "neshama",
      ruach: "ruach",
      nephesh: "nephesh"
    };

    return worldOrder.map((worldId, index) => {
      const fallback = DEFAULT_FOUR_QABALISTIC_WORLD_LAYERS[index] || {};
      const worldEntry = worlds?.[worldId] || null;
      if (!worldEntry || typeof worldEntry !== "object") {
        return fallback;
      }

      const tetragrammaton = worldEntry?.tetragrammaton && typeof worldEntry.tetragrammaton === "object"
        ? worldEntry.tetragrammaton
        : {};

      const rawSoulId = normalizeSoulId(worldEntry?.soulId);
      const soulId = soulAliases[rawSoulId] || rawSoulId;
      const soulEntry = souls?.[soulId] && typeof souls[soulId] === "object"
        ? souls[soulId]
        : null;

      const soulLayer = soulEntry?.name?.roman || fallback.soulLayer || titleCase(rawSoulId || soulId);
      const soulTitle = soulEntry?.title?.en || fallback.soulTitle || titleCase(soulEntry?.name?.en || "");
      const soulDescription = soulEntry?.desc?.en || fallback.soulDescription || "";

      return {
        slot: tetragrammaton?.isFinal
          ? `${String(tetragrammaton?.slot || fallback.slot || "Heh")} (final)`
          : String(tetragrammaton?.slot || fallback.slot || ""),
        letterChar: String(tetragrammaton?.letterChar || fallback.letterChar || ""),
        hebrewToken: String(tetragrammaton?.hebrewLetterId || fallback.hebrewToken || "").toLowerCase(),
        world: String(worldEntry?.name?.roman || fallback.world || titleCase(worldEntry?.id || worldId)),
        worldLayer: String(worldEntry?.worldLayer?.en || fallback.worldLayer || worldEntry?.desc?.en || ""),
        worldDescription: String(worldEntry?.worldDescription?.en || fallback.worldDescription || ""),
        soulLayer: String(soulLayer || ""),
        soulTitle: String(soulTitle || ""),
        soulDescription: String(soulDescription || "")
      };
    }).filter(Boolean);
  }

  // ─── element references ─────────────────────────────────────────────────────
  function getElements() {
    return {
      treeContainerEl: document.getElementById("kab-tree-container"),
      detailNameEl:    document.getElementById("kab-detail-name"),
      detailSubEl:     document.getElementById("kab-detail-sub"),
      detailBodyEl:    document.getElementById("kab-detail-body"),
      pathLetterToggleEl: document.getElementById("kab-path-letter-toggle"),
      pathNumberToggleEl: document.getElementById("kab-path-number-toggle"),
      pathTarotToggleEl: document.getElementById("kab-path-tarot-toggle"),
    };
  }

  function resolvePathTarotImage(path) {
    const cardName = String(path?.tarot?.card || "").trim();
    if (!cardName || typeof window.TarotCardImages?.resolveTarotCardImage !== "function") {
      return null;
    }

    return window.TarotCardImages.resolveTarotCardImage(cardName);
  }

  function getPathLabel(path) {
    const glyph = String(path?.hebrewLetter?.char || "").trim();
    const pathNumber = Number(path?.pathNumber);
    const parts = [];

    if (state.showPathLetters && glyph) {
      parts.push(glyph);
    }

    if (state.showPathNumbers && Number.isFinite(pathNumber)) {
      parts.push(String(pathNumber));
    }

    return parts.join(" ");
  }

  // ─── SVG element factory ────────────────────────────────────────────────────
  function svgEl(tag, attrs, text) {
    const el = document.createElementNS(NS, tag);
    for (const [k, v] of Object.entries(attrs || {})) {
      el.setAttribute(k, String(v));
    }
    if (text != null) el.textContent = text;
    return el;
  }

  // ─── build the full SVG tree ─────────────────────────────────────────────────
  function buildTreeSVG(tree) {
    const svg = svgEl("svg", {
      viewBox: "0 0 240 470",
      width: "100%",
      role: "img",
      "aria-label": "Kabbalah Tree of Life diagram",
      class: "kab-svg",
    });

    // Subtle pillar background tracks
    svg.appendChild(svgEl("rect", {
      x: 113, y: 30, width: 14, height: 420,
      rx: 7, fill: "#ffffff07", "pointer-events": "none",
    }));
    svg.appendChild(svgEl("rect", {
      x: 33, y: 88, width: 14, height: 255,
      rx: 7, fill: "#ff220010", "pointer-events": "none",
    }));
    svg.appendChild(svgEl("rect", {
      x: 193, y: 88, width: 14, height: 255,
      rx: 7, fill: "#2244ff10", "pointer-events": "none",
    }));

    // Pillar labels
    [
      { x: 198, y: 73,  text: "Mercy",    anchor: "middle" },
      { x: 120, y: 17,  text: "Balance",  anchor: "middle" },
      { x: 42,  y: 73,  text: "Severity", anchor: "middle" },
    ].forEach(({ x, y, text, anchor }) => {
      svg.appendChild(svgEl("text", {
        x, y, "text-anchor": anchor, "dominant-baseline": "auto",
        fill: "#42425a", "font-size": "6", "pointer-events": "none",
      }, text));
    });

    // ── path lines (drawn before sephiroth so nodes sit on top) ──────────────
    tree.paths.forEach(path => {
      const [x1, y1] = NODE_POS[path.connects.from];
      const [x2, y2] = NODE_POS[path.connects.to];
      const mx = (x1 + x2) / 2;
      const my = (y1 + y2) / 2;
      const tarotImage = state.showPathTarotCards ? resolvePathTarotImage(path) : null;
      const hasTarotImage = Boolean(tarotImage);
      const pathLabel = getPathLabel(path);
      const hasLabel = Boolean(pathLabel);
      const labelY = hasTarotImage && hasLabel ? my - PATH_LABEL_OFFSET_WITH_TAROT : my;

      // Visual line (thin)
      svg.appendChild(svgEl("line", {
        x1, y1, x2, y2,
        class: "kab-path-line",
        "data-path": path.pathNumber,
        stroke: "#3c3c5c",
        "stroke-width": "1.5",
        "pointer-events": "none",
      }));

      // Invisible wide hit area for easy clicking
      svg.appendChild(svgEl("line", {
        x1, y1, x2, y2,
        class: "kab-path-hit",
        "data-path": path.pathNumber,
        stroke: "transparent",
        "stroke-width": String(12 * PATH_MARKER_SCALE),
        role: "button",
        tabindex: "0",
        "aria-label": `Path ${path.pathNumber}: ${path.hebrewLetter?.transliteration || ""} — ${path.tarot?.card || ""}`,
        style: "cursor:pointer",
      }));

      if (hasLabel) {
        // Background disc for legibility behind path label
        svg.appendChild(svgEl("circle", {
          cx: mx, cy: labelY, r: PATH_LABEL_RADIUS.toFixed(2),
          fill: "#0d0d1c", opacity: "0.82",
          "pointer-events": "none",
        }));

        // Path label at path midpoint
        svg.appendChild(svgEl("text", {
          x: mx, y: labelY + 1,
          "text-anchor": "middle",
          "dominant-baseline": "middle",
          class: "kab-path-lbl",
          "data-path": path.pathNumber,
          fill: "#a8a8e0",
          "font-size": PATH_LABEL_FONT_SIZE.toFixed(2),
          "pointer-events": "none",
        }, pathLabel));
      }

      if (hasTarotImage) {
        const tarotY = hasLabel
          ? my + PATH_TAROT_OFFSET_WITH_LABEL
          : my - PATH_TAROT_OFFSET_NO_LABEL;
        svg.appendChild(svgEl("image", {
          href: tarotImage,
          x: (mx - (PATH_TAROT_WIDTH / 2)).toFixed(2),
          y: tarotY.toFixed(2),
          width: PATH_TAROT_WIDTH.toFixed(2),
          height: PATH_TAROT_HEIGHT.toFixed(2),
          preserveAspectRatio: "xMidYMid meet",
          class: "kab-path-tarot",
          "data-path": path.pathNumber,
          role: "button",
          tabindex: "0",
          "aria-label": `Path ${path.pathNumber} Tarot card ${path.tarot?.card || ""}`,
          style: "cursor:pointer"
        }));
      }
    });

    // ── Da'at — phantom sephira (dashed, informational only) ────────────────
    svg.appendChild(svgEl("circle", {
      cx: DAAT[0], cy: DAAT[1], r: "9",
      fill: "none", stroke: "#3c3c5c",
      "stroke-dasharray": "3 2", "stroke-width": "1",
      "pointer-events": "none",
    }));
    svg.appendChild(svgEl("text", {
      x: DAAT[0] + 13, y: DAAT[1] + 1,
      "text-anchor": "start", "dominant-baseline": "middle",
      fill: "#3c3c5c", "font-size": "6.5", "pointer-events": "none",
    }, "Da'at"));

    // ── sephiroth circles (drawn last, on top of paths) ──────────────────────
    tree.sephiroth.forEach(seph => {
      const [cx, cy] = NODE_POS[seph.number];
      const fill = SEPH_FILL[seph.number] || "#555";
      const isLeft = cx < 80;
      const isMid  = cx === 120;

      // Glow halo (subtle, pointer-events:none)
      svg.appendChild(svgEl("circle", {
        cx, cy, r: "16",
        fill, opacity: "0.12",
        class: "kab-node-glow",
        "data-sephira": seph.number,
        "pointer-events": "none",
      }));

      // Main clickable circle
      svg.appendChild(svgEl("circle", {
        cx, cy, r: R,
        fill, stroke: "#00000040", "stroke-width": "1",
        class: "kab-node",
        "data-sephira": seph.number,
        role: "button",
        tabindex: "0",
        "aria-label": `Sephira ${seph.number}: ${seph.name}`,
        style: "cursor:pointer",
      }));

      // Sephira number inside the circle
      svg.appendChild(svgEl("text", {
        x: cx, y: cy + 0.5,
        "text-anchor": "middle", "dominant-baseline": "middle",
        fill: DARK_TEXT.has(seph.number) ? "#111" : "#fff",
        "font-size": "8", "font-weight": "bold",
        "pointer-events": "none",
      }, String(seph.number)));

      // Name label beside the circle
      const lx = isLeft ? cx - R - 4 : cx + R + 4;
      svg.appendChild(svgEl("text", {
        x: isMid ? cx : lx,
        y: isMid ? cy + R + 8 : cy,
        "text-anchor": isMid ? "middle" : (isLeft ? "end" : "start"),
        "dominant-baseline": isMid ? "auto" : "middle",
        fill: "#c0c0d4",
        "font-size": "7.5", "pointer-events": "none",
        class: "kab-node-lbl",
      }, seph.name));
    });

    return svg;
  }

  // ─── detail panel helpers ───────────────────────────────────────────────────
  function metaCard(label, value, wide) {
    const card = document.createElement("div");
    card.className = wide ? "planet-meta-card kab-wide-card" : "planet-meta-card";
    card.innerHTML = `<strong>${label}</strong><p class="planet-text">${value || "—"}</p>`;
    return card;
  }

  function normalizeText(value) {
    return String(value || "").trim().toLowerCase();
  }

  function normalizeLetterToken(value) {
    return String(value || "")
      .trim()
      .toLowerCase()
      .replace(/[^a-z]/g, "");
  }

  function buildHebrewLetterLookup(magickDataset) {
    const letters = magickDataset?.grouped?.hebrewLetters;
    const lookup = {};

    if (!letters || typeof letters !== "object") {
      return lookup;
    }

    Object.entries(letters).forEach(([letterId, entry]) => {
      const entryId = String(entry?.id || letterId || "");

      const idToken = normalizeLetterToken(letterId);
      const canonicalIdToken = HEBREW_LETTER_ALIASES[idToken] || idToken;
      if (canonicalIdToken && !lookup[canonicalIdToken]) {
        lookup[canonicalIdToken] = entryId;
      }

      const nameToken = normalizeLetterToken(entry?.letter?.name);
      const canonicalNameToken = HEBREW_LETTER_ALIASES[nameToken] || nameToken;
      if (canonicalNameToken && !lookup[canonicalNameToken]) {
        lookup[canonicalNameToken] = entryId;
      }
    });

    return lookup;
  }

  function resolveHebrewLetterId(value) {
    const token = normalizeLetterToken(value);
    if (!token) return null;

    const canonical = HEBREW_LETTER_ALIASES[token] || token;
    return state.hebrewLetterIdByToken[canonical] || state.hebrewLetterIdByToken[token] || null;
  }

  function resolvePlanetId(value) {
    const text = normalizeText(value);
    if (!text) return null;

    for (const [key, planetId] of Object.entries(PLANET_NAME_TO_ID)) {
      if (text === key || text.includes(key)) {
        return planetId;
      }
    }

    return null;
  }

  function resolveZodiacId(value) {
    const text = normalizeText(value);
    if (!text) return null;
    for (const [name, zodiacId] of Object.entries(ZODIAC_NAME_TO_ID)) {
      if (text === name || text.includes(name)) {
        return zodiacId;
      }
    }
    return null;
  }

  function createNavButton(label, eventName, detail) {
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = "kab-god-link";
    btn.textContent = `${label} ↗`;
    btn.addEventListener("click", () => {
      document.dispatchEvent(new CustomEvent(eventName, { detail }));
    });
    return btn;
  }

  function appendLinkRow(card, buttons) {
    if (!buttons?.length) return;
    const row = document.createElement("div");
    row.className = "kab-god-links";
    buttons.forEach((button) => row.appendChild(button));
    card.appendChild(row);
  }

  function buildPlanetLuminaryCard(planetValue) {
    const card = metaCard("Planet / Luminary", planetValue);
    const planetId = resolvePlanetId(planetValue);
    if (planetId) {
      appendLinkRow(card, [
        createNavButton(`View ${PLANET_ID_TO_LABEL[planetId] || planetValue} in Planets`, "nav:planet", { planetId })
      ]);
      return card;
    }

    const zodiacId = resolveZodiacId(planetValue);
    if (zodiacId) {
      appendLinkRow(card, [
        createNavButton(`View ${zodiacId.charAt(0).toUpperCase() + zodiacId.slice(1)} in Zodiac`, "nav:zodiac", { signId: zodiacId })
      ]);
    }
    return card;
  }

  function extractMinorRank(attribution) {
    const match = String(attribution || "").match(/\bthe\s+4\s+(aces|twos|threes|fours|fives|sixes|sevens|eights|nines|tens)\b/i);
    if (!match) return null;
    return MINOR_RANK_BY_PLURAL[(match[1] || "").toLowerCase()] || null;
  }

  function buildMinorTarotNames(attribution) {
    const rank = extractMinorRank(attribution);
    if (!rank) return [];
    return MINOR_SUITS.map((suit) => `${rank} of ${suit}`);
  }

  function buildTarotAttributionCard(attribution) {
    const card = metaCard("Tarot Attribution", attribution);
    const minorCards = buildMinorTarotNames(attribution);
    if (minorCards.length) {
      appendLinkRow(card, minorCards.map((cardName) =>
        createNavButton(cardName, "nav:tarot-trump", { cardName })
      ));
    }
    return card;
  }

  function buildAstrologyCard(astrology) {
    const astroText = astrology ? `${astrology.name} (${astrology.type})` : "—";
    const card = metaCard("Astrology", astroText);
    if (astrology?.type === "planet") {
      const planetId = resolvePlanetId(astrology.name);
      if (planetId) {
        appendLinkRow(card, [
          createNavButton(`View ${PLANET_ID_TO_LABEL[planetId] || astrology.name} in Planets`, "nav:planet", { planetId })
        ]);
      }
    } else if (astrology?.type === "zodiac") {
      const signId = resolveZodiacId(astrology.name);
      if (signId) {
        appendLinkRow(card, [
          createNavButton(`View ${signId.charAt(0).toUpperCase() + signId.slice(1)} in Zodiac`, "nav:zodiac", { signId })
        ]);
      }
    }
    return card;
  }

  function buildConnectsCard(path, fromName, toName) {
    const card = metaCard("Connects", `${fromName} → ${toName}`);
    appendLinkRow(card, [
      createNavButton(`View ${fromName}`, "nav:kabbalah-path", { pathNo: Number(path.connects.from) }),
      createNavButton(`View ${toName}`, "nav:kabbalah-path", { pathNo: Number(path.connects.to) })
    ]);
    return card;
  }

  function buildHebrewLetterCard(letter) {
    const label = `${letter.char || ""} ${letter.transliteration || ""} — "${letter.meaning || ""}" (${letter.letterType || ""})`;
    const card = metaCard("Hebrew Letter", label);
    const hebrewLetterId = resolveHebrewLetterId(letter.transliteration || letter.char || "");

    if (hebrewLetterId) {
      appendLinkRow(card, [
        createNavButton(`View ${letter.transliteration || letter.char || "Letter"} in Alphabet`, "nav:alphabet", {
          alphabet: "hebrew",
          hebrewLetterId
        })
      ]);
    }

    return card;
  }

  function findPathByHebrewToken(tree, hebrewToken) {
    const canonicalToken = HEBREW_LETTER_ALIASES[normalizeLetterToken(hebrewToken)] || normalizeLetterToken(hebrewToken);
    if (!canonicalToken) {
      return null;
    }

    const paths = Array.isArray(tree?.paths) ? tree.paths : [];
    return paths.find((path) => {
      const letterToken = normalizeLetterToken(path?.hebrewLetter?.transliteration || path?.hebrewLetter?.char);
      const canonicalLetterToken = HEBREW_LETTER_ALIASES[letterToken] || letterToken;
      return canonicalLetterToken === canonicalToken;
    }) || null;
  }

  function buildFourWorldsCard(tree, activeLetterToken = "") {
    const activeToken = HEBREW_LETTER_ALIASES[normalizeLetterToken(activeLetterToken)] || normalizeLetterToken(activeLetterToken);
    const worldLayers = Array.isArray(state.fourWorldLayers) && state.fourWorldLayers.length
      ? state.fourWorldLayers
      : DEFAULT_FOUR_QABALISTIC_WORLD_LAYERS;

    const card = document.createElement("div");
    card.className = "planet-meta-card kab-wide-card";

    const title = document.createElement("strong");
    title.textContent = "Four Qabalistic Worlds & Soul Layers";
    card.appendChild(title);

    const stack = document.createElement("div");
    stack.className = "cal-item-stack";

    worldLayers.forEach((layer) => {
      const row = document.createElement("div");
      row.className = "cal-item-row";

      const isActive = Boolean(activeToken) && activeToken === layer.hebrewToken;

      const head = document.createElement("div");
      head.className = "cal-item-head";
      head.innerHTML = `
        <span class="cal-item-name">${layer.slot}: ${layer.letterChar} — ${layer.world}</span>
        <span class="planet-list-meta">${layer.soulLayer}</span>
      `;
      row.appendChild(head);

      const worldLine = document.createElement("div");
      worldLine.className = "planet-text";
      worldLine.textContent = `${layer.worldLayer} · ${layer.worldDescription}`;
      row.appendChild(worldLine);

      const soulLine = document.createElement("div");
      soulLine.className = "planet-text";
      soulLine.textContent = `${layer.soulLayer} — ${layer.soulTitle}: ${layer.soulDescription}`;
      row.appendChild(soulLine);

      const buttonRow = [];
      const hebrewLetterId = resolveHebrewLetterId(layer.hebrewToken);
      if (hebrewLetterId) {
        buttonRow.push(
          createNavButton(`View ${layer.letterChar} in Alphabet`, "nav:alphabet", {
            alphabet: "hebrew",
            hebrewLetterId
          })
        );
      }

      const linkedPath = findPathByHebrewToken(tree, layer.hebrewToken);
      if (linkedPath?.pathNumber != null) {
        buttonRow.push(
          createNavButton(`View Path ${linkedPath.pathNumber}`, "nav:kabbalah-path", { pathNo: Number(linkedPath.pathNumber) })
        );
      }

      appendLinkRow(row, buttonRow);

      if (isActive) {
        row.style.borderColor = "#818cf8";
      }

      stack.appendChild(row);
    });

    card.appendChild(stack);
    return card;
  }

  function splitCorrespondenceNames(value) {
    return String(value || "")
      .split(/,|;|·|\/|\bor\b|\band\b|\+/i)
      .map((item) => item.trim())
      .filter(Boolean);
  }

  function uniqueNames(values) {
    const seen = new Set();
    const output = [];
    values.forEach((name) => {
      const key = String(name || "").toLowerCase();
      if (seen.has(key)) return;
      seen.add(key);
      output.push(name);
    });
    return output;
  }

  function godLinksCard(label, names, pathNo, metaText) {
    const card = document.createElement("div");
    card.className = "planet-meta-card";

    const title = document.createElement("strong");
    title.textContent = label;
    card.appendChild(title);

    if (metaText) {
      const meta = document.createElement("p");
      meta.className = "planet-text kab-god-meta";
      meta.textContent = metaText;
      card.appendChild(meta);
    }

    const row = document.createElement("div");
    row.className = "kab-god-links";

    names.forEach((name) => {
      const btn = document.createElement("button");
      btn.type = "button";
      btn.className = "kab-god-link";
      btn.textContent = name;
      btn.addEventListener("click", () => {
        document.dispatchEvent(new CustomEvent("nav:gods", {
          detail: { godName: name, pathNo: Number(pathNo) }
        }));
      });
      row.appendChild(btn);
    });

    card.appendChild(row);
    return card;
  }

  function clearHighlights() {
    document.querySelectorAll(".kab-node, .kab-node-glow")
      .forEach(el => el.classList.remove("kab-node-active"));
    document.querySelectorAll(".kab-path-hit, .kab-path-line, .kab-path-lbl, .kab-path-tarot")
      .forEach(el => el.classList.remove("kab-path-active"));
  }

  // ─── helper: append divine correspondences from gods.json ─────────────────────
  function appendGodsCards(pathNo, elements) {
    const gd = state.godsData[String(pathNo)];
    if (!gd) return;

    const hasAny = gd.greek || gd.roman || gd.egyptian || gd.egyptianPractical
      || gd.elohim || gd.archangel || gd.angelicOrder;
    if (!hasAny) return;

    const sep = document.createElement("div");
    sep.className = "planet-meta-card kab-wide-card";
    sep.innerHTML = `<strong style="color:#a1a1aa;font-size:11px;text-transform:uppercase;letter-spacing:.05em">Divine Correspondences</strong>`;
    elements.detailBodyEl.appendChild(sep);

    const greekNames = uniqueNames(splitCorrespondenceNames(gd.greek));
    const romanNames = uniqueNames(splitCorrespondenceNames(gd.roman));
    const egyptNames = uniqueNames([
      ...splitCorrespondenceNames(gd.egyptianPractical),
      ...splitCorrespondenceNames(gd.egyptian)
    ]);

    if (greekNames.length) {
      elements.detailBodyEl.appendChild(godLinksCard("Greek", greekNames, pathNo));
    }
    if (romanNames.length) {
      elements.detailBodyEl.appendChild(godLinksCard("Roman", romanNames, pathNo));
    }
    if (egyptNames.length) {
      elements.detailBodyEl.appendChild(godLinksCard("Egyptian", egyptNames, pathNo));
    }

    if (gd.elohim) {
      const g = gd.elohim;
      const meta = `${g.hebrew}${g.meaning ? "  —  " + g.meaning : ""}`;
      elements.detailBodyEl.appendChild(godLinksCard(
        "God Name",
        uniqueNames(splitCorrespondenceNames(g.transliteration)),
        pathNo,
        meta
      ));
    }
    if (gd.archangel) {
      const a = gd.archangel;
      const meta = `${a.hebrew}`;
      elements.detailBodyEl.appendChild(godLinksCard(
        "Archangel",
        uniqueNames(splitCorrespondenceNames(a.transliteration)),
        pathNo,
        meta
      ));
    }
    if (gd.angelicOrder) {
      const o = gd.angelicOrder;
      elements.detailBodyEl.appendChild(metaCard(
        "Angelic Order",
        `${o.hebrew}  ${o.transliteration}${o.meaning ? "  —  " + o.meaning : ""}`
      ));
    }

  }

  // ─── render sephira detail ───────────────────────────────────────────────────
  function renderSephiraDetail(seph, tree, elements) {
    state.selectedSephiraNumber = Number(seph?.number);
    state.selectedPathNumber = null;

    clearHighlights();
    document.querySelectorAll(`.kab-node[data-sephira="${seph.number}"], .kab-node-glow[data-sephira="${seph.number}"]`)
      .forEach(el => el.classList.add("kab-node-active"));

    elements.detailNameEl.textContent = `${seph.number} · ${seph.name}`;
    elements.detailSubEl.textContent =
      [seph.nameHebrew, seph.translation, seph.planet].filter(Boolean).join("  ·  ");

    elements.detailBodyEl.innerHTML = "";
    elements.detailBodyEl.appendChild(buildFourWorldsCard(tree));
    elements.detailBodyEl.appendChild(buildPlanetLuminaryCard(seph.planet));
    elements.detailBodyEl.appendChild(metaCard("Intelligence",      seph.intelligence));
    elements.detailBodyEl.appendChild(buildTarotAttributionCard(seph.tarot));

    if (seph.description) {
      elements.detailBodyEl.appendChild(
        metaCard(seph.name, seph.description, true)
      );
    }

    // Quick-access chips for connected paths
    const connected = tree.paths.filter(
      p => p.connects.from === seph.number || p.connects.to === seph.number
    );
    if (connected.length) {
      const card = document.createElement("div");
      card.className = "planet-meta-card kab-wide-card";
      const chips = connected.map(p =>
        `<span class="kab-chip" data-path="${p.pathNumber}" role="button" tabindex="0" title="Path ${p.pathNumber}: ${p.tarot?.card || ""}">`
        + `${p.hebrewLetter?.char || ""} <span class="kab-chip-sub">${p.pathNumber}</span>`
        + `</span>`
      ).join("");
      card.innerHTML = `<strong>Connected Paths</strong><div class="kab-chips">${chips}</div>`;
      elements.detailBodyEl.appendChild(card);

      card.querySelectorAll(".kab-chip[data-path]").forEach(chip => {
        const handler = () => {
          const path = tree.paths.find(p => p.pathNumber === Number(chip.dataset.path));
          if (path) renderPathDetail(path, tree, elements);
        };
        chip.addEventListener("click", handler);
        chip.addEventListener("keydown", e => {
          if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handler(); }
        });
      });
    }

    appendGodsCards(seph.number, elements);
  }

  // ─── render path detail ──────────────────────────────────────────────────────
  function renderPathDetail(path, tree, elements) {
    state.selectedPathNumber = Number(path?.pathNumber);
    state.selectedSephiraNumber = null;

    clearHighlights();
    document.querySelectorAll(`[data-path="${path.pathNumber}"]`)
      .forEach(el => el.classList.add("kab-path-active"));

    const letter   = path.hebrewLetter || {};
    const fromName = tree.sephiroth.find(s => s.number === path.connects.from)?.name || path.connects.from;
    const toName   = tree.sephiroth.find(s => s.number === path.connects.to)?.name   || path.connects.to;
    const astro    = path.astrology ? `${path.astrology.name} (${path.astrology.type})` : "—";
    const tarotStr = path.tarot?.card
      ? `${path.tarot.card}${path.tarot.trumpNumber != null ? "  · Trump " + path.tarot.trumpNumber : ""}`
      : "—";

    elements.detailNameEl.textContent =
      `Path ${path.pathNumber} · ${letter.char || ""} ${letter.transliteration || ""}`;
    elements.detailSubEl.textContent = [path.tarot?.card, astro].filter(Boolean).join("  ·  ");

    elements.detailBodyEl.innerHTML = "";
    elements.detailBodyEl.appendChild(buildFourWorldsCard(tree, letter.transliteration || letter.char || ""));
    elements.detailBodyEl.appendChild(buildConnectsCard(path, fromName, toName));
    elements.detailBodyEl.appendChild(buildHebrewLetterCard(letter));
    elements.detailBodyEl.appendChild(buildAstrologyCard(path.astrology));

    // Tarot card — clickable if a trump card is associated
    const tarotMetaCard = document.createElement("div");
    tarotMetaCard.className = "planet-meta-card";
    const tarotLabel = document.createElement("strong");
    tarotLabel.textContent = "Tarot";
    tarotMetaCard.appendChild(tarotLabel);
    if (path.tarot?.card && path.tarot.trumpNumber != null) {
      const tarotBtn = document.createElement("button");
      tarotBtn.type = "button";
      tarotBtn.className = "kab-tarot-link";
      tarotBtn.textContent = `${path.tarot.card}  ·  Trump ${path.tarot.trumpNumber}`;
      tarotBtn.title = "Open in Tarot section";
      tarotBtn.addEventListener("click", () => {
        document.dispatchEvent(new CustomEvent("kab:view-trump", {
          detail: { trumpNumber: path.tarot.trumpNumber }
        }));
      });
      tarotMetaCard.appendChild(tarotBtn);
    } else {
      const tarotP = document.createElement("p");
      tarotP.className = "planet-text";
      tarotP.textContent = tarotStr || "—";
      tarotMetaCard.appendChild(tarotP);
    }
    elements.detailBodyEl.appendChild(tarotMetaCard);

    elements.detailBodyEl.appendChild(metaCard("Intelligence", path.intelligence));
    elements.detailBodyEl.appendChild(metaCard("Pillar",    path.pillar));

    if (path.description) {
      const desc = document.createElement("div");
      desc.className = "planet-meta-card kab-wide-card";
      desc.innerHTML =
        `<strong>Path ${path.pathNumber} — Sefer Yetzirah</strong>`
        + `<p class="planet-text">${path.description.replace(/\n/g, "<br><br>")}</p>`;
      elements.detailBodyEl.appendChild(desc);
    }

    appendGodsCards(path.pathNumber, elements);
  }

  function bindTreeInteractions(svg, tree, elements) {
    // Delegate clicks via element's own data attributes
    svg.addEventListener("click", e => {
      const sephNum = e.target.dataset?.sephira;
      const pathNum = e.target.dataset?.path;
      if (sephNum != null) {
        const s = tree.sephiroth.find(x => x.number === Number(sephNum));
        if (s) renderSephiraDetail(s, tree, elements);
      } else if (pathNum != null) {
        const p = tree.paths.find(x => x.pathNumber === Number(pathNum));
        if (p) renderPathDetail(p, tree, elements);
      }
    });

    // Keyboard access for path hit-areas and tarot images
    svg.querySelectorAll(".kab-path-hit, .kab-path-tarot").forEach(el => {
      el.addEventListener("keydown", e => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          const p = tree.paths.find(x => x.pathNumber === Number(el.dataset.path));
          if (p) renderPathDetail(p, tree, elements);
        }
      });
    });

    // Keyboard access for sephira circles
    svg.querySelectorAll(".kab-node").forEach(el => {
      el.addEventListener("keydown", e => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          const s = tree.sephiroth.find(x => x.number === Number(el.dataset.sephira));
          if (s) renderSephiraDetail(s, tree, elements);
        }
      });
    });
  }

  function renderTree(elements) {
    if (!state.tree || !elements?.treeContainerEl) {
      return;
    }

    const svg = buildTreeSVG(state.tree);
    elements.treeContainerEl.innerHTML = "";
    elements.treeContainerEl.appendChild(svg);
    bindTreeInteractions(svg, state.tree, elements);
  }

  function renderCurrentSelection(elements) {
    if (!state.tree) {
      return;
    }

    if (Number.isFinite(Number(state.selectedPathNumber))) {
      const selectedPath = state.tree.paths.find((entry) => entry.pathNumber === Number(state.selectedPathNumber));
      if (selectedPath) {
        renderPathDetail(selectedPath, state.tree, elements);
        return;
      }
    }

    if (Number.isFinite(Number(state.selectedSephiraNumber))) {
      const selectedSephira = state.tree.sephiroth.find((entry) => entry.number === Number(state.selectedSephiraNumber));
      if (selectedSephira) {
        renderSephiraDetail(selectedSephira, state.tree, elements);
        return;
      }
    }

    renderSephiraDetail(state.tree.sephiroth[0], state.tree, elements);
  }

  // ─── initialise section ──────────────────────────────────────────────────────
  function init(magickDataset, elements) {
    const tree = magickDataset?.grouped?.kabbalah?.["kabbalah-tree"];
    if (!tree) {
      if (elements.detailNameEl) {
        elements.detailNameEl.textContent = "Kabbalah data unavailable";
        elements.detailSubEl.textContent = "Could not load kabbalah-tree.json";
      }
      return;
    }
    state.tree = tree;
    state.godsData = magickDataset?.grouped?.["gods"]?.byPath || {};
    state.hebrewLetterIdByToken = buildHebrewLetterLookup(magickDataset);
    state.fourWorldLayers = buildFourWorldLayersFromDataset(magickDataset);

    const bindPathDisplayToggle = (toggleEl, stateKey) => {
      if (!toggleEl) {
        return;
      }

      toggleEl.checked = Boolean(state[stateKey]);
      if (toggleEl.dataset.bound) {
        return;
      }

      toggleEl.addEventListener("change", () => {
        state[stateKey] = Boolean(toggleEl.checked);
        renderTree(elements);
        renderCurrentSelection(elements);
      });

      toggleEl.dataset.bound = "true";
    };

    bindPathDisplayToggle(elements.pathLetterToggleEl, "showPathLetters");
    bindPathDisplayToggle(elements.pathNumberToggleEl, "showPathNumbers");
    bindPathDisplayToggle(elements.pathTarotToggleEl, "showPathTarotCards");

    renderTree(elements);
    renderCurrentSelection(elements);
  }

  function selectPathByNumber(pathNumber) {
    if (!state.initialized || !state.tree) return;
    const el = getElements();
    const path = state.tree.paths.find(p => p.pathNumber === pathNumber);
    if (path) renderPathDetail(path, state.tree, el);
  }

  function selectSephiraByNumber(n) {
    if (!state.initialized || !state.tree) return;
    const el = getElements();
    const seph = state.tree.sephiroth.find(s => s.number === n);
    if (seph) renderSephiraDetail(seph, state.tree, el);
  }

  // select sephirah (1-10) or path (11+) by a single number
  function selectNode(n) {
    if (n >= 1 && n <= 10) selectSephiraByNumber(n);
    else selectPathByNumber(n);
  }

  // ─── public API ────────────────────────────────────────────────────────
  function ensureKabbalahSection(magickDataset) {
    if (state.initialized) return;
    state.initialized = true;
    const elements = getElements();
    init(magickDataset, elements);
  }

  window.KabbalahSectionUi = { ensureKabbalahSection, selectPathByNumber, selectSephiraByNumber, selectNode };
})();