test new global styles for inline buttons in details, and add links to tarot cards in planet details

app/ui-elements.js

@@ -90,6 +90,38 @@
       .join(" ");
   }
 
+  function appendInlineParts(target, parts) {
+    (Array.isArray(parts) ? parts : []).forEach((part) => {
+      if (part instanceof Node) {
+        target.appendChild(part);
+        return;
+      }
+
+      const text = String(part ?? "");
+      if (text) {
+        target.appendChild(document.createTextNode(text));
+      }
+    });
+  }
+
+  function createInlineButton(label, onActivate) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "detail-inline-link";
+    button.textContent = String(label || "—");
+    button.addEventListener("click", () => {
+      onActivate?.();
+    });
+    return button;
+  }
+
+  function createInlineParagraph(parts) {
+    const line = document.createElement("p");
+    line.className = "planet-text detail-inline-value";
+    appendInlineParts(line, parts);
+    return line;
+  }
+
   function buildTarotAliasText(cardNames) {
     if (typeof getTarotCardSearchAliases !== "function") {
       return Array.isArray(cardNames) ? cardNames.join(" ") : "";
@@ -252,47 +284,44 @@
     const tarotTitle = document.createElement("strong");
     tarotTitle.textContent = "Tarot Correspondence";
 
-    const tarotText = document.createElement("div");
-    tarotText.className = "planet-text";
-    tarotText.textContent = [
-      entry.aceCardName ? `Ace: ${entry.aceCardName}` : "",
-      entry.courtRank ? `Court Rank: ${entry.courtRank} (all suits)` : ""
-    ].filter(Boolean).join(" · ") || "--";
-
-    tarotCard.append(tarotTitle, tarotText);
-
-    if (entry.aceCardName || entry.courtCardNames.length) {
-      const navWrap = document.createElement("div");
-      navWrap.className = "alpha-nav-btns";
-
-      if (entry.aceCardName) {
-        const tarotBtn = document.createElement("button");
-        tarotBtn.type = "button";
-        tarotBtn.className = "alpha-nav-btn";
-        tarotBtn.textContent = `Open ${entry.aceCardName} ↗`;
-        tarotBtn.addEventListener("click", () => {
+    const tarotParts = [];
+    if (entry.aceCardName) {
+      tarotParts.push(
+        "Ace: ",
+        createInlineButton(entry.aceCardName, () => {
           document.dispatchEvent(new CustomEvent("nav:tarot-trump", {
             detail: { cardName: entry.aceCardName }
           }));
-        });
-
-        navWrap.appendChild(tarotBtn);
+        })
+      );
+    }
+    if (entry.courtRank) {
+      if (tarotParts.length) {
+        tarotParts.push(" · ");
       }
+      tarotParts.push(`Court Rank: ${entry.courtRank} (all suits)`);
+    }
 
-      entry.courtCardNames.forEach((cardName) => {
-        const courtBtn = document.createElement("button");
-        courtBtn.type = "button";
-        courtBtn.className = "alpha-nav-btn";
-        courtBtn.textContent = `Open ${cardName} ↗`;
-        courtBtn.addEventListener("click", () => {
+    const tarotText = tarotParts.length
+      ? createInlineParagraph(tarotParts)
+      : document.createTextNode("--");
+
+    tarotCard.append(tarotTitle, tarotText);
+
+    if (entry.courtCardNames.length) {
+      const courtParts = ["Court cards: "];
+      entry.courtCardNames.forEach((cardName, index) => {
+        if (index > 0) {
+          courtParts.push(", ");
+        }
+        courtParts.push(createInlineButton(cardName, () => {
           document.dispatchEvent(new CustomEvent("nav:tarot-trump", {
             detail: { cardName }
           }));
-        });
-        navWrap.appendChild(courtBtn);
+        }));
       });
 
-      tarotCard.appendChild(navWrap);
+      tarotCard.appendChild(createInlineParagraph(courtParts));
     }
 
     const smallCardCard = document.createElement("div");
@@ -317,36 +346,32 @@
       `;
       row.appendChild(head);
 
-      const navWrap = document.createElement("div");
-      navWrap.className = "alpha-nav-btns";
-
       if (group.signId) {
-        const signBtn = document.createElement("button");
-        signBtn.type = "button";
-        signBtn.className = "alpha-nav-btn";
-        signBtn.textContent = `Open ${group.signName} ↗`;
-        signBtn.addEventListener("click", () => {
-          document.dispatchEvent(new CustomEvent("nav:zodiac", {
-            detail: { signId: group.signId }
-          }));
-        });
-        navWrap.appendChild(signBtn);
+        row.appendChild(createInlineParagraph([
+          "Sign: ",
+          createInlineButton(group.signName, () => {
+            document.dispatchEvent(new CustomEvent("nav:zodiac", {
+              detail: { signId: group.signId }
+            }));
+          })
+        ]));
       }
 
-      (group.cardNames || []).forEach((cardName) => {
-        const cardBtn = document.createElement("button");
-        cardBtn.type = "button";
-        cardBtn.className = "alpha-nav-btn";
-        cardBtn.textContent = `Open ${cardName} ↗`;
-        cardBtn.addEventListener("click", () => {
-          document.dispatchEvent(new CustomEvent("nav:tarot-trump", {
-            detail: { cardName }
+      if ((group.cardNames || []).length) {
+        const cardParts = ["Cards: "];
+        group.cardNames.forEach((cardName, index) => {
+          if (index > 0) {
+            cardParts.push(", ");
+          }
+          cardParts.push(createInlineButton(cardName, () => {
+            document.dispatchEvent(new CustomEvent("nav:tarot-trump", {
+              detail: { cardName }
+            }));
           }));
         });
-        navWrap.appendChild(cardBtn);
-      });
+        row.appendChild(createInlineParagraph(cardParts));
+      }
 
-      row.appendChild(navWrap);
       smallCardStack.appendChild(row);
     });