add iching tarot links

app/ui-iching.js

@@ -315,6 +315,8 @@
       return;
     }
 
+    clearChildren(elements.ichingDetailTarotEl);
+
     const upperKey = normalizeSearchValue(entry?.upperTrigram);
     const lowerKey = normalizeSearchValue(entry?.lowerTrigram);
     const upperCards = upperKey ? state.tarotByTrigramName[upperKey] || [] : [];
@@ -325,15 +327,79 @@
     const upperLabel = upperTrigram?.element || entry?.upperTrigram || "--";
     const lowerLabel = lowerTrigram?.element || entry?.lowerTrigram || "--";
 
-    const lines = [];
-    if (upperKey) {
-      lines.push(`Upper (${upperLabel}): ${upperCards.length ? upperCards.join(", ") : "--"}`);
-    }
-    if (lowerKey) {
-      lines.push(`Lower (${lowerLabel}): ${lowerCards.length ? lowerCards.join(", ") : "--"}`);
+    function buildTarotTarget(cardName) {
+      const label = String(cardName || "").trim();
+      if (!label) {
+        return null;
+      }
+
+      const trumpMatch = label.match(/^key\s*(\d{1,2})\s*:/i);
+      if (trumpMatch) {
+        return {
+          label,
+          detail: { trumpNumber: Number(trumpMatch[1]) }
+        };
+      }
+
+      return {
+        label,
+        detail: { cardName: label }
+      };
     }
 
-    elements.ichingDetailTarotEl.textContent = lines.length ? lines.join("\n\n") : "--";
+    function appendTarotGroup(groupLabel, trigramLabel, cards) {
+      const group = document.createElement("div");
+      group.className = "iching-tarot-group";
+
+      const title = document.createElement("div");
+      title.className = "iching-tarot-group-title";
+      title.textContent = `${groupLabel} (${trigramLabel}):`;
+      group.appendChild(title);
+
+      if (!cards.length) {
+        const empty = document.createElement("div");
+        empty.className = "planet-text";
+        empty.textContent = "--";
+        group.appendChild(empty);
+        elements.ichingDetailTarotEl.appendChild(group);
+        return;
+      }
+
+      const buttonRow = document.createElement("div");
+      buttonRow.className = "alpha-nav-btns";
+
+      cards.forEach((cardName) => {
+        const target = buildTarotTarget(cardName);
+        if (!target) {
+          return;
+        }
+
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "alpha-nav-btn";
+        button.textContent = `${target.label} ↗`;
+        button.addEventListener("click", () => {
+          document.dispatchEvent(new CustomEvent("nav:tarot-trump", {
+            detail: target.detail
+          }));
+        });
+        buttonRow.appendChild(button);
+      });
+
+      group.appendChild(buttonRow);
+      elements.ichingDetailTarotEl.appendChild(group);
+    }
+
+    if (upperKey) {
+      appendTarotGroup("Upper", upperLabel, upperCards);
+    }
+    if (lowerKey) {
+      appendTarotGroup("Lower", lowerLabel, lowerCards);
+    }
+
+    if (!elements.ichingDetailTarotEl.childElementCount) {
+      elements.ichingDetailTarotEl.textContent = "--";
+    }
   }
 
   function renderCalendarMonths(entry, elements) {