Add stage 5: list detail page with items UI and drag reorder

API: new PUT /api/lists/{id}/items/order takes the full ordered id set and
rewrites positions 0..n-1 in a transaction (422 unless the set matches the
list exactly). TodoItemRepository gains idsForList() and reorder().

Frontend: lists on the home page are now links to /lists/:id (ListView).
ListView shows the list title, a "M of N done" summary, and each item as a
drag handle + checkbox + inline-editable text (saved on blur) + delete
button, with a create-item form at the bottom. Drag-and-drop uses
vuedraggable; on drop the whole order is persisted via the new endpoint and
the response replaces local state, with a resync-on-error fallback. New
items store; items store is also reset on logout.

Tests: reorder happy path, incomplete-set rejection, owner scoping. Backend
suite: 23 passing.

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

web/src/style.css

@@ -123,7 +123,18 @@ h1 {
 .lists__item {
   border: 1px solid var(--border);
   border-radius: 8px;
+}
+
+.lists__link {
+  display: block;
   padding: 0.75rem 0.9rem;
+  color: inherit;
+  text-decoration: none;
+  border-radius: 8px;
+}
+
+.lists__link:hover {
+  background: var(--bg);
 }
 
 .lists__head {
@@ -138,10 +149,90 @@ h1 {
   word-break: break-word;
 }
 
-.lists__item .muted {
+.lists__link .muted {
   margin: 0.35rem 0 0;
 }
 
+/* --- list detail: items ------------------------------------------------- */
+
+.items {
+  list-style: none;
+  margin: 1rem 0 0;
+  padding: 0;
+  display: grid;
+  gap: 0.4rem;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.4rem 0.55rem;
+  background: var(--surface);
+}
+
+.item--ghost {
+  opacity: 0.5;
+}
+
+.item__handle {
+  cursor: grab;
+  color: var(--muted);
+  user-select: none;
+  padding: 0 0.15rem;
+  line-height: 1;
+}
+
+.item__check {
+  flex: none;
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
+.item__text {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text);
+  font-size: 1rem;
+  padding: 0.3rem 0.4rem;
+}
+
+.item__text:hover {
+  border-color: var(--border);
+}
+
+.item__text:focus {
+  outline: none;
+  border-color: var(--accent);
+  background: var(--bg);
+}
+
+.item--done .item__text {
+  text-decoration: line-through;
+  color: var(--muted);
+}
+
+.item__delete {
+  flex: none;
+  border: none;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0.2rem 0.4rem;
+  border-radius: 6px;
+}
+
+.item__delete:hover {
+  color: var(--error);
+  background: var(--bg);
+}
+
 .form {
   display: grid;
   gap: 1rem;