Add list styles: Podium, Spotlight, Grid, List

- Each list picks a style in List settings (new lists default to Podium);
  existing lists keep Grid or List
- Podium: top 3 on medal-colored steps (#1 center and raised), the rest
  behind a native <details> "Show N more"; stacks #1 over #2/#3 on phones
- Spotlight: #1 as a feature card (art, why-note or description, play
  button), the rest as a numbered list
- Visitors can switch styles on a list page (?style=), preserved across
  pages; later pages fall back to a plain list since they don't start at #1
- Entries' detail data now lives on a wrapper per list, so featured and
  collapsed entries all open the detail view

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/static/js/list-form.js

@@ -22,7 +22,7 @@ const autoTitle = (n, cat) => (cat.key === "custom" ? "" : `Top ${n} ${cat.label
  * @param {string} [o.category]  preselected category for a new list
  * @param {(list: object) => void} o.onSaved
  */
-export function openListForm({ categories, limits, list, category, onSaved }) {
+export function openListForm({ categories, limits, styles, list, category, onSaved }) {
   const editing = !!list;
   const catByKey = Object.fromEntries(categories.map((c) => [c.key, c]));
   const state = {
@@ -77,11 +77,12 @@ export function openListForm({ categories, limits, list, category, onSaved }) {
 
   const desc = h("textarea", { name: "description", rows: 2, maxlength: 1000, placeholder: "Optional: a line about what makes this list", value: list?.description || "" });
   const slug = editing && h("input", { name: "slug", value: list.slug, maxlength: 60, pattern: "[a-z0-9-]+", spellcheck: false });
-  const layout = list?.layout || "grid";
-  const layoutGroup = h("div", { class: "radio-cards" },
-    h("label", {}, h("input", { type: "radio", name: "layout", value: "grid", checked: layout === "grid" }), icon("grid"), "Artwork grid"),
-    h("label", {}, h("input", { type: "radio", name: "layout", value: "rows", checked: layout === "rows" }), icon("rows"), "Ranked list"),
-  );
+  const layout = list?.layout || styles[0].key;
+  const layoutGroup = h("div", { class: "style-picker", role: "radiogroup", "aria-label": "Style" },
+    styles.map((st) => h("label", { class: "style-option" },
+      h("input", { type: "radio", name: "layout", value: st.key, checked: layout === st.key }),
+      h("span", {}, icon(st.icon), h("b", {}, st.label), h("small", {}, st.description)),
+    )));
   // Custom lists choose their artwork shape; built-in categories have one.
   const art = list?.art || "square";
   const artField = h("div", { class: "field", hidden: !isCustom() },
@@ -106,7 +107,8 @@ export function openListForm({ categories, limits, list, category, onSaved }) {
       h("label", { class: "field" }, h("span", { class: "field-label" }, "Description"), desc),
       editing && h("label", { class: "field" }, h("span", { class: "field-label" }, "Address"),
         h("div", { class: "input-group", style: { alignItems: "center" } }, h("span", { class: "muted" }, "/l/"), slug)),
-      h("div", { class: "field" }, h("span", { class: "field-label" }, "Layout"), layoutGroup),
+      h("div", { class: "field" }, h("span", { class: "field-label" }, "Style"), layoutGroup,
+        h("span", { class: "field-hint" }, "How the list looks on your page. Visitors can switch styles on the list's own page.")),
       artField,
       h("label", { class: "check" }, visible, "Show this list on my public page"),
       error,