The chooser's marks are × at the left, tappable once marked

From the development repository at 5252a58.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

client/js/chooser.js

@@ -4,8 +4,10 @@
  * notebooks and the pages kept in them, and loads the chosen page.
  *
  * It also deletes (Andy, 2026-10-11): every notebook and every page card
- * carries a mark at its left, a dot that a tap turns into a tick (not a
- * × at the right, which in many interfaces means "delete" itself), and one "Delete"
+ * carries a mark at its left, a × that a tap turns into a tick (at the
+ * left, since a × at the top right means "delete" itself in many
+ * interfaces; a dot was tried and implied a generality that does not
+ * exist), and one "Delete"
  * button in the header, which appears as soon as something is marked,
  * says how much is marked and asks for a second press before anything
  * goes, as the file chooser does for replacing a file; no system dialog.
@@ -44,7 +46,7 @@ function counted(count, noun) {
 }
 
 /**
- * A mark button: a dot until marked, then ✓.
+ * A mark button: × until marked, then ✓.
  * @param {string} help  The tooltip.
  * @returns {HTMLButtonElement}
  */
@@ -52,7 +54,7 @@ function markButton(help) {
   const mark = document.createElement('button');
   mark.type = 'button';
   mark.className = 'mark';
-  mark.textContent = '•';
+  mark.textContent = '×';
   mark.setAttribute('aria-label', 'Mark for deletion');
   mark.setAttribute('aria-pressed', 'false');
   mark.dataset.help = help;
@@ -225,7 +227,7 @@ export class NotebookChooser {
   toggleMark(mark, marked, name) {
     const now = !marked.has(name);
     if (now) marked.add(name); else marked.delete(name);
-    mark.textContent = now ? '✓' : '•';
+    mark.textContent = now ? '✓' : '×';
     mark.setAttribute('aria-pressed', String(now));
     /** @type {HTMLElement} */ (mark.parentElement).classList.toggle('marked', now);
     this.disarm();

client/kokkoja.css

@@ -439,8 +439,8 @@ h2 {
 
 .chooser_notebooks button.notebook_pick { flex: 1; min-width: 0; text-align: left; }
 
-/* Rows and cards carry a mark at their left, a dot, for deletion (a ×
-   at the right would read as "delete" itself, Andy); marked, they dim. */
+/* Rows and cards carry a mark at their left, ×, for deletion (at the
+   right it would read as "delete" itself, Andy); marked, they dim. */
 .notebook_row { display: flex; gap: 0.3rem; align-items: stretch; }
 .notebook_row.marked button.notebook_pick, .page_slot.marked .page_card { opacity: 0.45; }
 .page_slot { position: relative; display: flex; }
@@ -458,6 +458,10 @@ button.mark {
   left: 0.3rem;
   height: 1.6rem;
   background: white;
+  /* Above the card even when the card's opacity makes it a stacking
+     context painted later: without this, the second tap, to unmark,
+     landed on the dimmed card and loaded the page. */
+  z-index: 1;
 }
 button.mark[aria-pressed="true"] { color: #b42318; }
 button.mark.unavailable { opacity: 0.4; }