feat(web): mobile mechanical sweep — pointer-aware arrows, h3 dividers, modal safe-area

- HorizontalScrollRow arrows bump 32px → 40px on coarse pointers
  (touch screens) for finger-friendly hits; mouse pointers unchanged.
- AlphabeticalGrid divider letter is now <h3> so screen readers
  announce it as a section heading. Margin reset to preserve layout.
- Modal overlay gets p-4 so max-w-md modals stay inside the safe
  area at 375px viewport. Covers all routes that use the shared
  <Modal> component (discover track-confirm, quarantine
  typed-DELETE, users password-reset, etc.).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/src/lib/components/HorizontalScrollRow.svelte

@@ -152,4 +152,12 @@
   }
   .arrow:hover:not(:disabled) { color: var(--fs-parchment); }
   .arrow:disabled { opacity: 0.3; cursor: not-allowed; }
+  /* Coarse pointers (touch screens) get larger arrows for finger-friendly
+     hit area; mouse pointers keep the visually compact 32px size. */
+  @media (pointer: coarse) {
+    .arrow {
+      width: 40px;
+      height: 40px;
+    }
+  }
 </style>