Add LocationSearchCard and add to homepage for testing.

Run `npm run format`

src/lib/components/ui/cards/BaseCard.svelte

@@ -1,94 +1,101 @@
 <script lang="ts">
-    import type { Snippet } from 'svelte';
-    import { IconHelpCircle } from '@tabler/icons-svelte';
-    import { slide } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+	import { IconHelpCircle } from '@tabler/icons-svelte';
+	import { slide } from 'svelte/transition';
 
-    interface Props {
-        children: Snippet;
-        header?: string;
-        helpText?: string;
-    }
+	interface Props {
+		children: Snippet;
+		header?: string;
+		helpText?: string;
+	}
 
-    let {
-        children,
-        header = "",
-        helpText,
-    }: Props = $props();
+	let { children, header = '', helpText }: Props = $props();
 
-    let showHelp = $state(false);
+	let showHelp = $state(false);
 </script>
 
 <div class="card">
-    {#if header || helpText}
-        <header class="card-header">
-            <div class="header-content">
-                {header}
-            </div>
-            {#if helpText}
-                <button
-                    type="button"
-                    class="help-toggle"
-                    onclick={() => showHelp = !showHelp}
-                    aria-label="Show Help"
-                >
-                    <IconHelpCircle size={26} stroke={2.25} color={showHelp ? 'var(--color-brand)' : 'var(--color-title)'} />
-                </button>
-            {/if}
-        </header>
+	{#if header || helpText}
+		<header class="card-header">
+			<div class="header-content">
+				{header}
+			</div>
+			{#if helpText}
+				<button
+					type="button"
+					class="help-toggle"
+					onclick={() => (showHelp = !showHelp)}
+					aria-label="Show Help"
+				>
+					<IconHelpCircle
+						size={26}
+						stroke={2.25}
+						color={showHelp ? 'var(--color-brand)' : 'var(--color-title)'}
+					/>
+				</button>
+			{/if}
+		</header>
 
-        {#if showHelp && helpText}
-            <div class="help-drawer" transition:slide={{ duration: 400 }}>
-                <p>{helpText}</p>
-            </div>
-        {/if}
-    {/if}
+		{#if showHelp && helpText}
+			<div class="help-drawer" transition:slide={{ duration: 400 }}>
+				<p>{helpText}</p>
+			</div>
+		{/if}
+	{/if}
 
-    <div class="card-body">
-        {@render children?.()}
-    </div>
+	<div class="card-body">
+		{@render children?.()}
+	</div>
 </div>
 
 <style>
-    .card {
-        background: var(--color-accent);
-        position: relative;
-        border-radius: 20px;
-        overflow: hidden;
-        width: 95%;
-        max-width: 600px;
-        text-align: center;
-        font-family: 'URW Gothic', sans-serif;
-        color: var(--color-title);
-    }
+	.card {
+		background: var(--color-accent);
+		position: relative;
+		border-radius: 20px;
+		overflow: visible;
+		width: 95%;
+		max-width: 600px;
+		text-align: center;
+		font-family: 'URW Gothic', sans-serif;
+		color: var(--color-brand);
+		padding: 10px 0;
+	}
 
-    .header-content { flex: 1;
-    font-size: 1.5rem; font-weight: 600; }
+	.header-content {
+		flex: 1;
+		margin: 0;
+		font-size: 1.3rem;
+		font-weight: 600;
+	}
 
-    .help-toggle {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        background: none;
-        border: none;
-        padding: 4px;
-        cursor: help;
-        opacity: 0.6;
-        z-index: 2;
-        transition: opacity 0.2s, transform 0.2s;
-    }
+	.help-toggle {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: help;
+		opacity: 0.6;
+		z-index: 2;
+		transition:
+			opacity 0.2s,
+			transform 0.2s;
+	}
 
-    .help-toggle:hover {
-        opacity: 1;
-        transform: scale(1.1);
-    }
+	.help-toggle:hover {
+		opacity: 1;
+		transform: scale(1.1);
+	}
 
-    .help-drawer {
-        background-color: var(--color-accent);
-        padding: 4px 16px;
-        font-size: 0.95rem;
-        line-height: 1.2;
-        margin: auto;
-        border-bottom: 1px solid rgba(255,255,255,0.05);
-        color: var(--color-title);
-    }
-</style>
+	.help-drawer {
+		background-color: var(--color-accent);
+		padding: 4px 16px;
+		font-size: 0.95rem;
+		line-height: 1.2;
+		margin: auto;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+		color: var(--color-title);
+	}
+</style>