Refactor guestbook submission form to use details element for better accessibility and UX

src/pages/guestbook.astro

@@ -32,8 +32,13 @@ const errorMsg = errorParam ? (errorMessages[errorParam] ?? decodeURIComponent(e
     </header>
 
     <!-- Submission form -->
-    <section class="card form-section" aria-labelledby="form-heading">
-      <h2 id="form-heading">Leave a message</h2>
+    <section class="card form-section" aria-label="Leave a message">
+      <details class="compose" open={submitted || Boolean(errorMsg)}>
+        <summary class="compose-toggle">
+          <span class="compose-toggle-text">Leave a message</span>
+        </summary>
+
+        <div class="compose-body">
           <p class="form-note">
             Messages are reviewed before being published. Please don't include personal or
             sensitive information — this is a public guestbook.
@@ -133,6 +138,8 @@ const errorMsg = errorParam ? (errorMessages[errorParam] ?? decodeURIComponent(e
               <button type="submit" class="btn-submit">send message</button>
             </div>
           </form>
+        </div>
+      </details>
     </section>
 
     <!-- Approved entries -->
@@ -245,6 +252,55 @@ const errorMsg = errorParam ? (errorMessages[errorParam] ?? decodeURIComponent(e
     margin-bottom: var(--space-md);
   }
 
+  .compose {
+    width: 100%;
+  }
+
+  .compose-toggle {
+    list-style: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--color-accent-bright);
+    font-size: 1.1rem;
+    font-weight: bold;
+    margin-bottom: var(--space-sm);
+    user-select: none;
+  }
+
+  .compose-toggle::-webkit-details-marker {
+    display: none;
+  }
+
+  .compose-toggle:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  .compose-toggle::before {
+    content: '+';
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.2em;
+    height: 1.2em;
+    border: 1px solid var(--color-accent);
+    border-radius: 4px;
+    color: var(--color-accent);
+    font-weight: normal;
+    line-height: 1;
+  }
+
+  .compose[open] .compose-toggle::before {
+    content: '−';
+  }
+
+  .compose-body {
+    margin-top: var(--space-sm);
+  }
+
   .guestbook-form {
     display: flex;
     flex-direction: column;