The chooser's marks are dots at the left

From the development repository at 06a7ffb.

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

client/js/chooser.js

@@ -4,7 +4,8 @@
  * 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, ×, that a tap turns into a tick, and one "Delete"
+ * 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"
  * 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.
@@ -43,7 +44,7 @@ function counted(count, noun) {
 }
 
 /**
- * A mark button: × until marked, then ✓.
+ * A mark button: a dot until marked, then ✓.
  * @param {string} help  The tooltip.
  * @returns {HTMLButtonElement}
  */
@@ -51,7 +52,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;
@@ -146,7 +147,7 @@ export class NotebookChooser {
         }
         this.toggleMark(mark, this.markedNotebooks, notebook);
       });
-      row.append(button, mark);
+      row.append(mark, button);
       list.append(row);
     }
     this.showMarks();
@@ -199,7 +200,7 @@ export class NotebookChooser {
         mark.setAttribute('aria-pressed', 'true');
         slot.classList.add('marked');
       }
-      slot.append(card, mark);
+      slot.append(mark, card);
       grid.append(slot);
     }
     this.markedPages.set(notebook, marked);
@@ -224,7 +225,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,7 +439,8 @@ h2 {
 
 .chooser_notebooks button.notebook_pick { flex: 1; min-width: 0; text-align: left; }
 
-/* Rows and cards carry a mark, ×, for deletion; marked, they dim. */
+/* 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. */
 .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; }
@@ -454,7 +455,7 @@ button.mark {
 .page_slot button.mark {
   position: absolute;
   top: 0.3rem;
-  right: 0.3rem;
+  left: 0.3rem;
   height: 1.6rem;
   background: white;
 }