Redesign station cards with compact layout, improved typography, and expandable details

- Reduce header size and weight, convert all-caps brand names to title case
- Replace address line with distance-only in collapsed state, move brand label to expanded section
- Apply monospace font to pricing, reduce size and weight across labels
- Move badge list and full details into expandable section
- Normalize font weights throughout (semibold for headings, medium for labels)
- Create `.pill` component class with `.is-active` state for consistent filter styling
- Apply pill styling to SearchBar filters, StationList sort buttons, and brand filter
- Add `name` attributes to fuel type and radius selects
- Update package dependencies (@tailwindcss/node, @tailwindcss/oxide, @rolldown/*)

resources/js/components/SearchBar.vue

@@ -1,19 +1,12 @@
 <template>
-    <div class="flex flex-wrap items-center gap-2 md:gap-2.5 py-3 border-b border-zinc-200">
+    <div class="flex flex-wrap items-center gap-2 md:gap-2.5">
         <!-- Leading label -->
         <span class="hidden md:inline text-xs font-mono uppercase tracking-widest text-zinc-400 mr-1">
             Refine
         </span>
 
         <!-- Fuel type -->
-        <label
-            :class="[
-                'relative group inline-flex items-center gap-2 h-10 pl-3 pr-2 rounded-full border transition-colors cursor-pointer',
-                fuelType !== DEFAULTS.fuelType
-                    ? 'bg-primary/10 border-primary text-primary'
-                    : 'bg-white border-zinc-200 hover:border-zinc-300',
-            ]"
-        >
+        <label :class="{ 'is-active': fuelType !== DEFAULTS.fuelType }" class="pill group">
             <iconify-icon class="text-sm opacity-70" icon="lucide:fuel"></iconify-icon>
             <span class="text-sm font-medium">{{ fuelLabel }}</span>
             <iconify-icon class="text-sm opacity-50 group-hover:opacity-100" icon="lucide:chevron-down"></iconify-icon>
@@ -21,20 +14,14 @@
                 v-model="fuelType"
                 aria-label="Fuel type"
                 class="absolute inset-0 opacity-0 cursor-pointer"
+				name="fuelType"
             >
                 <option v-for="fuel in FUEL_TYPES" :key="fuel.value" :value="fuel.value">{{ fuel.label }}</option>
             </select>
         </label>
 
         <!-- Radius -->
-        <label
-            :class="[
-                'relative group inline-flex items-center gap-2 h-10 pl-3 pr-2 rounded-full border transition-colors cursor-pointer',
-                radius !== DEFAULTS.radius
-                    ? 'bg-primary/10 border-primary text-primary'
-                    : 'bg-white border-zinc-200 hover:border-zinc-300',
-            ]"
-        >
+        <label :class="{ 'is-active': radius !== DEFAULTS.radius }" class="pill group">
             <iconify-icon class="text-sm opacity-70" icon="lucide:circle-dot"></iconify-icon>
             <span class="text-sm font-medium">{{ radius }} miles</span>
             <iconify-icon class="text-sm opacity-50 group-hover:opacity-100" icon="lucide:chevron-down"></iconify-icon>
@@ -42,6 +29,7 @@
                 v-model.number="radius"
                 aria-label="Search radius"
                 class="absolute inset-0 opacity-0 cursor-pointer"
+				name="radius"
             >
                 <option :value="5">5 miles</option>
                 <option :value="10">10 miles</option>
@@ -51,13 +39,9 @@
 
         <!-- Show / hide map -->
         <button
+            :class="{ 'is-active': mapOpen }"
+            class="pill"
             :aria-expanded="mapOpen"
-            :class="[
-                'inline-flex items-center gap-2 h-10 pl-3 pr-2 rounded-full border transition-colors cursor-pointer',
-                mapOpen
-                    ? 'bg-primary/10 border-primary text-primary'
-                    : 'bg-white border-zinc-200 text-zinc-700 hover:border-zinc-300',
-            ]"
             aria-controls="leaflet-map-panel"
             type="button"
             @click="emit('toggle-map')"