feature plus ux rearrangements

frontend/src/lib/components/AccordionItem.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { title, open = $bindable(false), children }: { title: string; open?: boolean; children: Snippet } = $props();
+</script>
+
+<div class="accordion-item" class:open>
+	<button
+		class="accordion-trigger"
+		onclick={() => (open = !open)}
+		aria-expanded={open}
+	>
+		<span>{title}</span>
+		<span class="accordion-arrow">{open ? '▾' : '▸'}</span>
+	</button>
+	{#if open}
+		<div class="accordion-body">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.accordion-item { border-bottom: 1px solid #f3f4f6; }
+	.accordion-item:last-child { border-bottom: none; }
+	.accordion-trigger {
+		display: flex; justify-content: space-between; align-items: center;
+		width: 100%; padding: 0.7rem 1rem;
+		background: #fafafa; border: none;
+		font-size: 0.95rem; font-weight: 600; color: #374151;
+		cursor: pointer; text-align: left;
+	}
+	.accordion-trigger:hover { background: #f3f4f6; }
+	.accordion-arrow { font-size: 0.8rem; color: #9ca3af; }
+	.accordion-body { padding: 1rem; }
+</style>