Fuel-type segmented control: coloured pump icons per fuel

- Custom capsule segmented control (native .segmented can't tint per-segment)
- fuelpump.fill icon per segment: green=Unleaded, purple=Premium, grey=Diesel
- FuelType.tintColor: Premium blue -> purple (also updates the nav title icon)
- Selected segment keeps the raised-capsule look; save+widget reload unchanged

FuelBoard/StationsView.swift

@@ -46,13 +46,7 @@ struct StationsView: View {
                 }
 
                 Section("Fuel type") {
-                    Picker("Fuel type", selection: $selectedFuel) {
+                    FuelTypeSegmentedPicker(selection: $selectedFuel) { newValue in
-                        ForEach(FuelType.allCases) { fuel in
-                            Text(fuel.shortName).tag(fuel)
-                        }
-                    }
-                    .pickerStyle(.segmented)
-                    .onChange(of: selectedFuel) { _, newValue in
                         FuelStore.saveSelectedFuel(newValue)
                         WidgetCenter.shared.reloadAllTimelines()
                     }
@@ -196,13 +190,55 @@ extension FuelType {
         }
     }
 
-    /// Pump-handle colour convention (UK): green = unleaded, blue = premium,
+    /// Pump-handle colour convention (UK): green = unleaded, purple = premium,
     /// dark grey = diesel. Used for the fuel-type tab icons and the title icon.
     var tintColor: Color {
         switch self {
         case .e10: return .green
-        case .e5: return .blue
+        case .e5: return .purple
         case .diesel: return Color(red: 0.35, green: 0.38, blue: 0.42)
         }
     }
 }
+
+/// Fuel-type selector styled like a segmented control, with a coloured pump
+/// icon per fuel (green = unleaded, purple = premium, grey = diesel). Built
+/// custom because the native `.segmented` picker tints every segment the same
+/// accent colour — it can't show per-fuel pump colours.
+private struct FuelTypeSegmentedPicker: View {
+    @Binding var selection: FuelType
+    var onSelect: (FuelType) -> Void
+
+    var body: some View {
+        HStack(spacing: 3) {
+            ForEach(FuelType.allCases) { fuel in
+                let isSelected = fuel == selection
+                Button {
+                    selection = fuel
+                    onSelect(fuel)
+                } label: {
+                    HStack(spacing: 5) {
+                        Image(systemName: "fuelpump.fill")
+                            .font(.caption2)
+                            .foregroundStyle(fuel.tintColor)
+                        Text(fuel.shortName)
+                            .font(.subheadline.weight(isSelected ? .semibold : .regular))
+                    }
+                    .foregroundStyle(isSelected ? Color.primary : Color.secondary)
+                    .frame(maxWidth: .infinity)
+                    .padding(.vertical, 7)
+                    .background {
+                        if isSelected {
+                            Capsule()
+                                .fill(Color(UIColor.systemBackground))
+                                .shadow(color: .black.opacity(0.08), radius: 1, y: 0.5)
+                        }
+                    }
+                }
+                .buttonStyle(.plain)
+            }
+        }
+        .padding(3)
+        .background(Capsule().fill(Color(.secondarySystemBackground)))
+    }
+}