feat(timeline): make a grouped cluster one contained card

Wraps each cluster in a bordered, rounded surface card (keeping the colour rail)
so the header and its letters read as a single unit.

Refs #827

frontend/src/lib/timeline/LetterBucket.svelte

@@ -57,16 +57,20 @@ let revealed = $state(bucket.kind !== 'fallback');
 </script>
 
 <section
-	class="my-3 border-l-2 pl-3"
+	class="my-3 overflow-hidden rounded-md border border-l-2 border-line bg-surface shadow-sm"
 	class:border-l-brand-mint={isEventCluster}
-	class:border-line={!railColor && !isEventCluster}
 	class:border-dashed={isDrawer}
 	style={railStyle}
 	data-testid="letter-bucket"
 	data-bucket-kind={bucket.kind}
 >
 	{#if !nested}
-		<header class="mb-2 flex items-center gap-2">
+		<header
+			class="flex items-center gap-2 px-3 py-2"
+			class:bg-canvas={isEventCluster}
+			class:border-b={!isDrawer}
+			class:border-line={!isDrawer}
+		>
 			{#if mode === 'thema' && bucket.kind === 'tag'}
 				<BucketHeaderChip name={bucket.title ?? ''} color={bucket.color} />
 			{:else if mode === 'event' && bucket.kind === 'event'}
@@ -81,6 +85,7 @@ let revealed = $state(bucket.kind !== 'fallback');
 		</header>
 	{/if}
 
+	<div class="px-3 py-2">
 		{#if !revealed}
 			<button
 				type="button"
@@ -119,4 +124,5 @@ let revealed = $state(bucket.kind !== 'fallback');
 				</button>
 			{/if}
 		{/if}
+	</div>
 </section>

frontend/src/lib/timeline/LetterBucket.svelte.spec.ts

@@ -161,3 +161,20 @@ describe('LetterBucket — leftover drawer (#827 redesign)', () => {
 		expect(document.querySelector('[data-testid="bucket-show-more"]')).not.toBeNull();
 	});
 });
+
+describe('LetterBucket — card chrome (#827 redesign)', () => {
+	it('renders the cluster as a contained card (bordered, rounded, surface)', () => {
+		const bucket: Bucket = {
+			key: 'tag:t1',
+			kind: 'tag',
+			title: 'Krieg',
+			color: 'sienna',
+			letters: [makeEntry({ documentId: 'a' })]
+		};
+		render(LetterBucket, { bucket, mode: 'thema', year: 1916 });
+		const card = document.querySelector('[data-testid="letter-bucket"]') as HTMLElement;
+		expect(card.className).toMatch(/\brounded\b|rounded-/);
+		expect(card.className).toContain('border');
+		expect(card.className).toContain('bg-surface');
+	});
+});