feat(backend): mobile-first styling and client-side title search

Also fixes a CSS specificity bug found during manual browser testing:
.chapter-form { display: flex } has the same specificity as the browser's
built-in [hidden] { display: none } rule and wins by cascade order, so the
per-card chapter-edit form stayed visible even with the hidden attribute
set. Added .chapter-form[hidden] { display: none } alongside the existing
.card[hidden] override.

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

backend/static/filter.js

@@ -1,4 +1,24 @@
-// Title search and tab-state handling land in Task 7.
+// Title search runs entirely in the browser: the full list is already in the
+// DOM, so filtering it needs no request.
+(function () {
+  function applyFilter() {
+    var box = document.getElementById("search");
+    if (!box) return;
+    var needle = box.value.trim().toLowerCase();
+    document.querySelectorAll(".card").forEach(function (card) {
+      var title = (card.dataset.title || "").toLowerCase();
+      card.hidden = needle !== "" && title.indexOf(needle) === -1;
+    });
+  }
+
+  document.addEventListener("input", function (e) {
+    if (e.target && e.target.id === "search") applyFilter();
+  });
+
+  // htmx replaces the list on a tab switch, so re-apply to the new cards.
+  document.body.addEventListener("htmx:afterSwap", applyFilter);
+})();
+
 function setActiveTab(el) {
   el.parentElement.querySelectorAll("[role=tab]").forEach(function (t) {
     t.classList.toggle("active", t === el);