Merge pull request 'Twelve themes, and the Theme section folds away' (#8) from claude/themes into main

public/admin/admin.css

@@ -451,6 +451,36 @@ a.btn { text-decoration: none; }
 
 /* one swatch per preset: a miniature dashboard (page, a tile on it, the
    accent as a status dot) and the name; the current one wears the accent */
+/* ── a collapsible admin section ─────────────────────────────────────
+   The pattern for any section of this page that folds. The markup is a
+   <details class="admin-fold"> holding the section's contents, headed by a
+   <summary class="admin-h1 admin-fold-title">: the title keeps the same
+   type as every other section heading — a <summary> would otherwise come
+   out at the normal weight — and the caret follows the words, so a folded
+   section still reads as a heading first. The whole row is the hit target. */
+details.admin-fold > summary.admin-fold-title {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700; /* matches h1.admin-h1; summary defaults to normal */
+  user-select: none;
+}
+details.admin-fold > summary.admin-fold-title::-webkit-details-marker { display: none; }
+/* after the title, not before it — the heading reads first, the caret says
+   there is more behind it */
+details.admin-fold > summary.admin-fold-title::after {
+  content: "";
+  width: 0; height: 0;
+  border-left: 6px solid var(--muted);
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  transition: transform 0.15s;
+}
+details.admin-fold[open] > summary.admin-fold-title::after { transform: rotate(90deg); }
+details.admin-fold > summary.admin-fold-title:hover { color: var(--accent); }
+
 .theme-swatches {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));

public/admin/index.html

@@ -41,9 +41,11 @@
     </section>
 
     <section id="theme-section" hidden>
-      <h1 class="admin-h1">Theme</h1>
-      <div class="theme-swatches" id="theme-swatches" role="radiogroup" aria-label="Theme"></div>
-      <div class="admin-status" id="theme-status"></div>
+      <details class="admin-fold">
+        <summary class="admin-h1 admin-fold-title">Theme</summary>
+        <div class="theme-swatches" id="theme-swatches" role="radiogroup" aria-label="Theme"></div>
+        <div class="admin-status" id="theme-status"></div>
+      </details>
     </section>
 
     <section id="modules-section" hidden>