Fix comments UX regressions and HTMX/Turnstile behavior

- standardize comment and reply UI layout
- target replies with stable OOB container IDs
- remove stale empty-state on approved HTMX comments
- initialize Turnstile widgets after HTMX swaps
- add regression tests for empty-state, OOB targets, and reply form rerender

Refs #48

templates/comments/_reply.html

@@ -1,14 +1,9 @@
-<article id="comment-{{ reply.id }}" class="bg-zinc-50/50 dark:bg-zinc-900/30 border border-zinc-100 dark:border-zinc-800 p-5 sm:p-6">
-  <div class="flex items-start gap-3 mb-3">
-    <div class="w-8 h-8 bg-gradient-to-tr from-brand-pink to-brand-cyan shrink-0 rounded-sm"></div>
-    <div class="flex-1 min-w-0">
-      <div class="flex flex-wrap items-baseline gap-x-2">
-        <span class="font-display font-bold text-sm text-zinc-900 dark:text-zinc-100">{{ reply.author_name }}</span>
-        <time datetime="{{ reply.created_at|date:'c' }}" class="font-mono text-[10px] text-zinc-400 uppercase tracking-wider">{{ reply.created_at|date:"M j, Y" }}</time>
-      </div>
-      <div class="mt-2 prose prose-sm dark:prose-invert max-w-none text-zinc-600 dark:text-zinc-400 leading-relaxed text-sm">
-        {{ reply.body|linebreaks }}
-      </div>
-    </div>
+<article id="comment-{{ reply.id }}" class="rounded-md border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900/40">
+  <header class="mb-2 flex flex-wrap items-center gap-x-2 gap-y-1">
+    <span class="font-display text-sm font-bold text-zinc-900 dark:text-zinc-100">{{ reply.author_name }}</span>
+    <time datetime="{{ reply.created_at|date:'c' }}" class="font-mono text-[10px] uppercase tracking-wider text-zinc-500">{{ reply.created_at|date:"M j, Y" }}</time>
+  </header>
+  <div class="prose prose-sm max-w-none text-sm leading-relaxed text-zinc-700 dark:prose-invert dark:text-zinc-300">
+    {{ reply.body|linebreaks }}
   </div>
 </article>