station sheet: an × in the top right instead of a CLOSE button

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01K6897PWcUEwHiqZMcVnNF6

index.html

@@ -82,6 +82,8 @@ input,textarea{font:inherit;color:inherit}
 #stationSheet,#picker,#tapePick{z-index:6}
 #stationSheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(480px,100%);background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));z-index:6;box-shadow:0 -20px 60px rgba(0,0,0,.6)}
 #stationSheet h4{font:600 10px var(--font);letter-spacing:.2em;color:var(--dim);margin:0 0 10px}
+#stationSheet .x{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--dim);font:300 22px var(--sans);line-height:1}
+#stationSheet .x:hover{color:var(--ink);background:var(--bg)}
 #stationSheet label{display:block;color:var(--dim);font-size:12px;margin:8px 0 4px}
 #stationSheet input{width:100%;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none}
 #stationSheet .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@@ -853,6 +855,8 @@ async function stationSheet(id) {
   const s = (await db.all("stations")).find((x) => x.id === id); if (!s) return;
   const p = $("#stationSheet"); p.innerHTML = "";
   p.append(Object.assign(document.createElement("h4"), { textContent: "STATION" }));
+  const x = Object.assign(document.createElement("button"), { className: "x", textContent: "×", title: "close" }); x.setAttribute("aria-label", "close");
+  x.addEventListener("click", () => p.classList.add("hidden")); p.append(x);
   const name = document.createElement("input"); name.value = s.name || ""; name.placeholder = s.seed; name.maxLength = 60;
   p.append(Object.assign(document.createElement("label"), { textContent: "name" }), name, Object.assign(document.createElement("label"), { textContent: "seed · " + s.seed + " · " + (s.played || 0) + " tracks" }));
   const lookRow = document.createElement("div"); lookRow.className = "row"; lookRow.style.marginTop = "8px";
@@ -908,8 +912,7 @@ async function stationSheet(id) {
     if (state.stationId === id) { state.audio.pause(); state.playing = false; setPlayIcon(); state.current = null; state.nextJob = null; state.stationId = ""; state.seed = ""; state.station = ""; $("#player").classList.add("hidden"); $("#seed").classList.remove("hidden"); $("#nowRow").classList.add("hidden"); setUrl(); }
     p.classList.add("hidden"); listStations().catch(() => {}); toast("Station deleted.");
   });
-  const close = Object.assign(document.createElement("button"), { textContent: "CLOSE" }); close.addEventListener("click", () => p.classList.add("hidden"));
-  row.append(save, reset, del, close); p.append(row); p.classList.remove("hidden"); name.focus({ preventScroll: true });
+  row.append(save, reset, del); p.append(row); p.classList.remove("hidden"); name.focus({ preventScroll: true });
 }
 $("#stationName").addEventListener("click", () => { if (state.stationId && !state.tape) stationSheet(state.stationId); });
 /* links: the URL follows the station (#seed); a share link carries the current track's sheet music (?t=) so the same