Add a collapse/expand-all toggle to the pedigree

A header button folds the whole tree down to just the dog or opens every
branch at once, alongside the per-dog toggles. Grouped with the zoom
controls, which the header now wraps on narrow screens.

src/app.js

@@ -2486,6 +2486,19 @@
   pedZoomIn.addEventListener("click", () => pedZoomBy(0.2));
   pedZoomOut.addEventListener("click", () => pedZoomBy(-0.2));
   pedZoomReset.addEventListener("click", () => { pedZoom = 1; applyPedZoom(); });
+
+  // ---- collapse / expand all ----
+  const pedFoldAll = document.getElementById("ped-foldall");
+  function pedSetAll(collapsed) {
+    pedTree.querySelectorAll("li").forEach((li) => {
+      if (!li.querySelector(":scope > ul")) return; // no ancestors to fold
+      li.classList.toggle("collapsed", collapsed);
+      const t = li.querySelector(":scope > .ped-card > .ped-toggle");
+      if (t) t.textContent = collapsed ? "+" : "−";
+    });
+    pedFoldAll.textContent = collapsed ? "Expand all" : "Collapse all";
+  }
+  pedFoldAll.addEventListener("click", () => pedSetAll(pedFoldAll.textContent[0] === "C"));
   // Trackpad/desktop: ctrl or ⌘ + wheel zooms instead of scrolling the page.
   pedTree.addEventListener("wheel", (e) => {
     if (!e.ctrlKey && !e.metaKey) return;
@@ -2729,6 +2742,7 @@
     ul.className = "ped-tree-h";
     ul.append(root);
     pedTree.append(ul);
+    if (pedFoldAll) pedFoldAll.textContent = "Collapse all"; // fresh tree starts partly open
   }
 
   // Highlight (or unhighlight) every card that is the same dog as `key`.