Adjust comment UX per feedback: reply alignment and Turnstile init

- move reply controls into normal left-aligned flow
- restore stronger primary/reply button treatments
- render Turnstile when reply details panels are opened
- rebuild Tailwind CSS

static/js/comments.js

@@ -76,6 +76,14 @@
     onTurnstileReady(target);
   });
 
+  document.addEventListener("toggle", function (event) {
+    const details = event.target;
+    if (!details || details.tagName !== "DETAILS" || !details.open) {
+      return;
+    }
+    onTurnstileReady(details);
+  });
+
   window.addEventListener("load", function () {
     syncCommentsEmptyState();
     onTurnstileReady(document);

templates/comments/_comment.html

@@ -15,10 +15,10 @@
       {{ comment.body|linebreaks }}
     </div>
 
-    <div class="mt-5 flex items-center justify-between gap-4 border-t border-zinc-100 pt-4 dark:border-zinc-800">
+    <div class="mt-5 border-t border-zinc-100 pt-4 dark:border-zinc-800">
       {% include "comments/_reactions.html" with comment=comment counts=comment.reaction_counts user_reacted=comment.user_reacted %}
 
-      <details class="group/details">
+      <details class="group/details mt-3">
         <summary class="list-none cursor-pointer font-mono text-xs font-bold uppercase tracking-wider text-zinc-500 transition-colors hover:text-brand-cyan [&::-webkit-details-marker]:hidden">
           <span class="group-open/details:hidden">Reply</span>
           <span class="hidden group-open/details:inline">Cancel reply</span>

templates/comments/_comment_form.html

@@ -82,12 +82,15 @@
         <div class="cf-turnstile" data-sitekey="{{ turnstile_site_key }}" data-theme="auto"></div>
       {% endif %}
 
-      <div>
+      <div class="pt-1">
         <button
           type="submit"
-          class="inline-flex items-center rounded-md bg-brand-pink px-5 py-2.5 font-display text-sm font-bold uppercase tracking-wider text-white transition hover:bg-brand-pink/90 focus:outline-none focus:ring-2 focus:ring-brand-pink/40"
+          class="group relative inline-flex items-center gap-3 rounded-md bg-brand-pink px-7 py-3 font-display text-sm font-bold uppercase tracking-widest text-white transition-all hover:-translate-y-0.5 hover:bg-brand-pink/90 focus:outline-none focus:ring-2 focus:ring-brand-pink/40 active:translate-y-0"
         >
-          Post comment
+          <span>Post comment</span>
+          <svg class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+          </svg>
         </button>
       </div>
     </form>

templates/comments/_reply_form.html

@@ -64,11 +64,11 @@
       <div class="cf-turnstile" data-sitekey="{{ turnstile_site_key }}" data-theme="auto" data-size="flexible"></div>
     {% endif %}
 
-    <div class="flex justify-end">
+    <div class="flex justify-start">
       <button
         type="submit"
         data-testid="post-reply-btn"
-        class="inline-flex items-center rounded-md bg-brand-pink px-4 py-2 font-display text-sm font-bold uppercase tracking-wider text-white transition hover:bg-brand-pink/90 focus:outline-none focus:ring-2 focus:ring-brand-pink/40"
+        class="inline-flex items-center rounded-md bg-brand-pink px-5 py-2.5 font-display text-sm font-bold uppercase tracking-wider text-white shadow-solid-dark transition-all hover:-translate-y-0.5 hover:bg-brand-pink/90 hover:shadow-solid-dark/80 focus:outline-none focus:ring-2 focus:ring-brand-pink/40 active:translate-y-0"
       >
         Post reply
       </button>