Make the remove confirm name the stake and take a thumb

The one irreversible path was defended with 40px buttons 8px apart and a
question — "Remove this?" — that never said what was leaving or what it cost.

Confirm buttons go to 46px with a 12px gap (all three rows), and the remove
question names the series and the loss. The row wraps, so a long title takes
the width it needs instead of overflowing; verified at 320 and 390 in both
themes with a 90-character title.

Button order is unchanged: the group is right-aligned with Cancel outermost, so
the destructive button already sits further from a right thumb's arc than
Cancel does, and all three rows keep the same shape.

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

backend/static/style.css

@@ -524,14 +524,17 @@ button { cursor: pointer; }
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 12px;
   padding: 14px;
   background: var(--danger-wash);
 }
-.confirm-row span { font: 400 17px var(--font-display); color: var(--danger-soft); }
+/* The remove question names the series, so it has to be able to take the row
-.confirm-row div { display: flex; gap: 8px; }
+   to itself and push the buttons onto their own line. */
+.confirm-row span { flex: 1 1 16ch; font: 400 17px/1.3 var(--font-display); color: var(--danger-soft); }
+.confirm-row div { display: flex; flex: none; gap: 12px; margin-left: auto; }
 .confirm-row button {
-  height: 40px;
+  height: 46px;
   padding: 0 14px;
   border: 1px solid var(--field-line);
   background: transparent;

backend/templates/card.html

@@ -122,7 +122,7 @@
   </div>
   {{end}}
   <div class="confirm-row" id="confirm-remove-{{.Key}}" role="group" aria-live="polite" hidden>
-    <span>Remove this?</span>
+    <span>Remove “{{.Title}}”? Chapter progress is lost.</span>
     <div>
       <button class="danger-solid"
               hx-delete="/ui/bookmarks/{{.Key}}"