updated relationship display in cycle details to use inline links instead of alpha nav buttons, and added related cycle links to planet details; added element display to astrology alphabet details; updated decan range display in calendar detail panels; updated tarot card detail script to latest version; added element script to index.html

app/ui-zodiac.js

@@ -59,6 +59,14 @@
     return String(s || "").charAt(0).toUpperCase() + String(s || "").slice(1);
   }
 
+  function normalizeHebrewLetterId(value) {
+    return String(value || "")
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "");
+  }
+
   function buildSearchText(sign) {
     return norm([
       sign.name?.en, sign.meaning?.en, sign.elementId, sign.quadruplicity,
@@ -142,7 +150,7 @@
     const sections = [];
 
     // ── Sign Details ──────────────────────────────────────────────────
-    const elemBadge = `<span class="zod-badge ${elemStyle.badge || ""}">${elemStyle.emoji || ""} ${cap(sign.elementId)}</span>`;
+    const elemBadge = `<button class="detail-inline-link zod-badge ${elemStyle.badge || ""}" data-nav="element" data-element-id="${sign.elementId}">${elemStyle.emoji || ""} ${cap(sign.elementId)}</button>`;
     const quadBadge = `<span class="zod-badge zod-badge--quad">${cap(sign.quadruplicity)}</span>`;
     sections.push(`<div class="planet-meta-card">
       <strong>Sign Details</strong>
@@ -178,13 +186,15 @@
     // ── Kabbalah Path + Trump ─────────────────────────────────────────
     if (kabPath) {
       const hl = kabPath.hebrewLetter || {};
+      const hebrewLetterId = normalizeHebrewLetterId(hl.transliteration);
+      const hebrewLetterLabel = hl.transliteration || hl.char || "";
       sections.push(`<div class="planet-meta-card">
         <strong>Kabbalah & Major Arcana</strong>
         <div class="planet-text">
           <div style="display:flex;align-items:center;gap:12px;margin-bottom:8px">
             <span class="zod-hebrew-glyph">${hl.char || ""}</span>
             <div>
-              <div style="font-weight:600">${hl.transliteration || ""} (${hl.meaning || ""})</div>
+              <div style="font-weight:600">${hebrewLetterId ? `<button class="detail-inline-link" data-nav="alphabet" data-hebrew-letter-id="${hebrewLetterId}">${hebrewLetterLabel}</button>` : hebrewLetterLabel}${hl.meaning ? ` (${hl.meaning})` : ""}</div>
               <div class="planet-list-meta">${cap(hl.letterType || "")} letter · <button class="detail-inline-link" data-nav="kab-path" data-path-number="${kabPath.pathNumber}">Path ${kabPath.pathNumber}</button></div>
             </div>
           </div>
@@ -203,7 +213,7 @@
         const sym = PLANET_SYMBOLS[d.rulerPlanetId] || "";
         return `<div class="zod-decan-row">
           <span class="zod-decan-ord">${ord}</span>
-          <span class="zod-decan-planet">${sym} ${cap(d.rulerPlanetId)}</span>
+          <span class="zod-decan-planet">${sym ? `${sym} ` : ""}<button class="detail-inline-link" data-nav="planet" data-planet-id="${d.rulerPlanetId}">${cap(d.rulerPlanetId)}</button></span>
           <button class="detail-inline-link" data-nav="tarot-card" data-card-name="${d.tarotMinorArcana}">
             ${d.tarotMinorArcana}
           </button>
@@ -249,6 +259,17 @@
           document.dispatchEvent(new CustomEvent("nav:planet", {
             detail: { planetId: btn.dataset.planetId }
           }));
+        } else if (nav === "element") {
+          document.dispatchEvent(new CustomEvent("nav:elements", {
+            detail: { elementId: btn.dataset.elementId }
+          }));
+        } else if (nav === "alphabet") {
+          document.dispatchEvent(new CustomEvent("nav:alphabet", {
+            detail: {
+              alphabet: "hebrew",
+              hebrewLetterId: btn.dataset.hebrewLetterId
+            }
+          }));
         } else if (nav === "kab-path") {
           document.dispatchEvent(new CustomEvent("tarot:view-kab-path", {
             detail: { pathNumber: Number(btn.dataset.pathNumber) }