fix: align help accordions consistently

Author: Shik3i

website/help.html

@@ -292,9 +292,8 @@ <h3>Compatibility & troubleshooting</h3>
             </div>
         </section>
 
-        <section id="first-setup" class="support-card support-anchor-section" aria-labelledby="first-setup-title">
-            <span class="support-eyebrow">First setup</span>
-            <h2 id="first-setup-title">Install KoalaSync and prepare your browser</h2>
+        <details id="first-setup" class="support-card support-anchor-section support-accordion" aria-labelledby="first-setup-title">
+            <summary><span class="support-eyebrow">First setup</span><h2 id="first-setup-title">Install KoalaSync and prepare your browser</h2></summary>
             <ol class="support-steps">
                 <li>Install KoalaSync from the official Chrome, Firefox, or Edge store. Pin the KoalaSync icon to the browser toolbar if you want quicker access.</li>
                 <li>Each person needs KoalaSync in their own supported desktop browser and their own access to the video website.</li>
@@ -303,11 +302,10 @@ <h2 id="first-setup-title">Install KoalaSync and prepare your browser</h2>
                 <li>Open the video website. If the browser asks whether KoalaSync may access it, allow access for that site and reload the page.</li>
             </ol>
             <p>KoalaSync does not provide or stream the video. Everyone opens the same content locally, and KoalaSync coordinates playback controls.</p>
-        </section>
+        </details>
 
-        <section id="rooms" class="support-card support-anchor-section" aria-labelledby="rooms-title">
-            <span class="support-eyebrow">Rooms &amp; invitations</span>
-            <h2 id="rooms-title">Create a room or join your friends</h2>
+        <details id="rooms" class="support-card support-anchor-section support-accordion" aria-labelledby="rooms-title">
+            <summary><span class="support-eyebrow">Rooms &amp; invitations</span><h2 id="rooms-title">Create a room or join your friends</h2></summary>
             <h3>Create and invite</h3>
             <ol class="support-steps">
                 <li>Open KoalaSync and select <strong>Room</strong>.</li>
@@ -318,31 +316,29 @@ <h3>Create and invite</h3>
             <h3>Join</h3>
             <p>Open the invite in the same desktop browser profile where KoalaSync is installed. The join page passes the room settings to the extension. You can also use <strong>Manual Connect / Advanced</strong> to enter a room ID and optional password, or select a public room, but manual and legacy joins do not provide the current chat secret.</p>
             <p>Room credentials remain available locally until you leave or replace the room. Click <strong>Leave Room</strong> when you are finished.</p>
-        </section>
+        </details>
 
-        <section id="select-video" class="support-card support-anchor-section" aria-labelledby="select-video-title">
-            <span class="support-eyebrow">Video selection</span>
-            <h2 id="select-video-title">Choose the local video tab</h2>
+        <details id="select-video" class="support-card support-anchor-section support-accordion" aria-labelledby="select-video-title">
+            <summary><span class="support-eyebrow">Video selection</span><h2 id="select-video-title">Choose the local video tab</h2></summary>
             <ol class="support-steps">
                 <li>Open the video you want to watch and start it once so the player is loaded.</li>
                 <li>Open KoalaSync, select <strong>Sync</strong>, then choose the browser tab under <strong>Select Video</strong>.</li>
                 <li>Every participant selects their own local video tab. Selecting yours does not select or open a tab for anyone else.</li>
                 <li>Use the highlighted matching titles as a hint, not a guarantee. Confirm the episode or video yourself before synchronizing.</li>
             </ol>
             <p><strong>Hide Clutter Tabs</strong> removes likely non-video tabs from the list. Turn it off under <strong>Settings → Playback &amp; Sync</strong> if the correct tab is missing.</p>
-        </section>
+        </details>
 
-        <section id="sync-controls" class="support-card support-anchor-section" aria-labelledby="sync-controls-title">
-            <span class="support-eyebrow">Synchronization &amp; control</span>
-            <h2 id="sync-controls-title">Play, pause, seek, and Force Sync</h2>
+        <details id="sync-controls" class="support-card support-anchor-section support-accordion" aria-labelledby="sync-controls-title">
+            <summary><span class="support-eyebrow">Synchronization &amp; control</span><h2 id="sync-controls-title">Play, pause, seek, and Force Sync</h2></summary>
             <p>When room control is open to everyone, actions on the selected player and the popup's <strong>Play</strong> and <strong>Pause</strong> buttons are sent to the room. The <strong>Last Activity Status</strong> shows the most recent room action.</p>
             <ul>
                 <li><strong>Jump to Others:</strong> moves your selected video to the known time reported by other participants. It requires another participant with a usable playback time.</li>
                 <li><strong>Jump to Me:</strong> uses your selected video's current time as the target and moves the room to you.</li>
                 <li><strong>Sync:</strong> runs the selected Force Sync mode as a coordinated room action. Use it when normal play, pause, or seeking left someone behind.</li>
             </ul>
             <p>Force Sync cannot fix different videos, missing website access, an unloaded player, or a site that blocks the required playback action. Check that everyone selected the intended content first.</p>
-        </section>
+        </details>
 
         <details id="host-control" class="support-card support-anchor-section support-accordion" aria-labelledby="host-control-title">
             <summary><span class="support-eyebrow">Host &amp; Co-Hosts</span><h2 id="host-control-title">Choose who can control the room</h2></summary>

website/styles/support.css

@@ -254,20 +254,20 @@
 .support-accordion > summary::after {
     grid-column: 2;
     grid-row: 1 / span 2;
-    content: "+";
-    display: grid;
+    content: "";
     width: 2rem;
     height: 2rem;
-    place-items: center;
     border: 1px solid color-mix(in oklch, var(--accent) 35%, var(--card-border));
     border-radius: 999px;
+    background:
+        linear-gradient(currentColor, currentColor) center / 10px 1px no-repeat,
+        linear-gradient(currentColor, currentColor) center / 1px 10px no-repeat;
     color: var(--accent);
-    font-size: 1.35rem;
-    line-height: 1;
 }
 
 .support-accordion[open] > summary::after {
-    content: "−";
+    background:
+        linear-gradient(currentColor, currentColor) center / 10px 1px no-repeat;
 }
 
 .support-accordion > summary .support-eyebrow {