Reorder: Fuel type → Stations (sort picker inside) → Key legend; drop emoji legend

FuelBoard/ContentView.swift

@@ -49,23 +49,11 @@ struct ContentView: View {
         NavigationStack {
             List {
                 Section {
-                    Text("\(sortMode == .closest ? "Closest" : "Cheapest") \(selectedFuel.displayName) — tap a station for directions. 🟢 great value · 🟡 okay · 🔴 pricey")
+                    Text("\(sortMode == .closest ? "Closest" : "Cheapest") \(selectedFuel.displayName) — tap a station for directions.")
                         .font(.footnote)
                         .foregroundStyle(.secondary)
                 }
 
-                Section("Sort by") {
-                    Picker("Sort by", selection: $sortMode) {
-                        ForEach(SortMode.allCases) { mode in
-                            Text(mode.displayName).tag(mode)
-                        }
-                    }
-                    .pickerStyle(.segmented)
-                    .onChange(of: sortMode) { _, newValue in
-                        FuelStore.saveSortMode(newValue)
-                    }
-                }
-
                 Section("Fuel type") {
                     Picker("Fuel type", selection: $selectedFuel) {
                         ForEach(FuelType.allCases) { fuel in
@@ -80,6 +68,17 @@ struct ContentView: View {
                 }
 
                 Section("Stations") {
+                    Picker("Sort by", selection: $sortMode) {
+                        ForEach(SortMode.allCases) { mode in
+                            Text(mode.displayName).tag(mode)
+                        }
+                    }
+                    .pickerStyle(.segmented)
+                    .onChange(of: sortMode) { _, newValue in
+                        FuelStore.saveSortMode(newValue)
+                    }
+                    .padding(.vertical, 2)
+
                     if isLoading {
                         HStack(spacing: 10) {
                             ProgressView()
@@ -101,6 +100,34 @@ struct ContentView: View {
                     }
                 }
 
+                Section("Key") {
+                    HStack(spacing: 8) {
+                        Circle().fill(.green).frame(width: 12, height: 12)
+                        Text("Best value — within 1.5p of the cheapest")
+                            .font(.caption)
+                    }
+                    HStack(spacing: 8) {
+                        Circle().fill(.orange).frame(width: 12, height: 12)
+                        Text("Okay — within 4p of the cheapest")
+                            .font(.caption)
+                    }
+                    HStack(spacing: 8) {
+                        Circle().fill(.red).frame(width: 12, height: 12)
+                        Text("Pricey — more than 4p over the cheapest")
+                            .font(.caption)
+                    }
+                    HStack(spacing: 8) {
+                        Text("TOP")
+                            .font(.caption2.bold())
+                            .padding(.horizontal, 5)
+                            .padding(.vertical, 1)
+                            .background(Capsule().fill(.blue.opacity(0.15)))
+                            .foregroundStyle(.blue)
+                        Text("Top result for the current sort")
+                            .font(.caption)
+                    }
+                }
+
                 Section("Location") {
                     if let location {
                         Text("Using location \(String(format: "%.4f, %.4f", location.lat, location.lng))")