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/AlphabeticalGrid.svelte

@@ -33,7 +33,7 @@
   {#each segments as seg, i (i)}
     {#if seg.divider}
       <div class="divider">
-        <span class="letter">{seg.divider}</span>
+        <h3 class="letter">{seg.divider}</h3>
         <span class="rule"></span>
       </div>
     {/if}
@@ -61,6 +61,8 @@
     font-size: 24px;
     font-weight: 500;
     color: var(--fs-parchment);
+    /* h3 default browser margin would push the divider; reset. */
+    margin: 0;
   }
   .rule {
     flex: 1;

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>