Unify capsule, station label and price rating styling

One adaptive tone palette and one shape rule now drive every capsule on
Stations, Favourites, the detail sheet and the Key.

- CapsuleTone: the light/dark palette pairs in one place, resolved through a
  UIColor dynamic provider so a List row that re-renders without rebuilding
  its body still follows an appearance switch. Every pair clears 4.5:1
  foreground-on-background in both appearances (4.96-6.72:1).
- AdaptiveCapsule: capsule at one drawn line, rounded rect at two or more,
  radius 8 -> 10, measuring content before padding so insets cannot inflate
  the line count.
- Listing verdict capsules move from white-on-muted-solid to the tinted
  palette, so Saves, Break even, Costs and Closest station read the same in
  the rows and in the detail sheet.
- Best Value is purple, not green: green stays reserved for a financial
  saving, which is what the Saves capsule beside it means.
- Price dots standardise to 12pt in the app (widget keeps its own 6pt dot;
  PriceRatingDot now takes a diameter so the difference is deliberate).
- Station labels are sentence case with their recommended symbols (medal, tag,
  location.north.fill, trophy) and StationLabelKind replaces the Key's
  string-literal dispatch, so renaming a label can no longer drop a row.
- Key says "Costs", matching the capsule's own headline (was "Costs more").

FuelBoard.xcodeproj/project.pbxproj

@@ -533,7 +533,7 @@
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
 				CODE_SIGN_ENTITLEMENTS = Config/WatchApp.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 29;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = F3BE6NE7U3;
 				ENABLE_PREVIEWS = YES;
 				ENABLE_USER_SCRIPT_SANDBOXING = YES;
@@ -599,7 +599,7 @@
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
 				CODE_SIGN_ENTITLEMENTS = Config/WatchApp.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 29;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = F3BE6NE7U3;
 				ENABLE_PREVIEWS = YES;
 				ENABLE_USER_SCRIPT_SANDBOXING = YES;
@@ -663,7 +663,7 @@
 				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 29;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = F3BE6NE7U3;
 				ENABLE_PREVIEWS = YES;
 				ENABLE_USER_SCRIPT_SANDBOXING = YES;
@@ -728,7 +728,7 @@
 				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 29;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = F3BE6NE7U3;
 				ENABLE_PREVIEWS = YES;
 				ENABLE_USER_SCRIPT_SANDBOXING = YES;
@@ -826,7 +826,7 @@
 				CODE_SIGN_ENTITLEMENTS = Config/App.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 29;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = F3BE6NE7U3;
 				GENERATE_INFOPLIST_FILE = NO;
 				INFOPLIST_FILE = "Config/App-Info.plist";
@@ -851,7 +851,7 @@
 				CODE_SIGN_ENTITLEMENTS = Config/App.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 29;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = F3BE6NE7U3;
 				GENERATE_INFOPLIST_FILE = NO;
 				INFOPLIST_FILE = "Config/App-Info.plist";
@@ -875,7 +875,7 @@
 				APPLICATION_EXTENSION_API_ONLY = YES;
 				CODE_SIGN_ENTITLEMENTS = Config/Widget.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 29;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = F3BE6NE7U3;
 				GENERATE_INFOPLIST_FILE = NO;
 				INFOPLIST_FILE = "Config/Widget-Info.plist";
@@ -900,7 +900,7 @@
 				APPLICATION_EXTENSION_API_ONLY = YES;
 				CODE_SIGN_ENTITLEMENTS = Config/Widget.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 29;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = F3BE6NE7U3;
 				GENERATE_INFOPLIST_FILE = NO;
 				INFOPLIST_FILE = "Config/Widget-Info.plist";

FuelBoard/CapsuleStyles.swift

@@ -0,0 +1,155 @@
+import SwiftUI
+
+/// One semantic capsule tone: a foreground and a background for each appearance.
+///
+/// The palette is deliberately a TINTED pair rather than a saturated solid. Every
+/// tone below clears 4.5:1 for its own foreground on its own background in BOTH
+/// appearances (measured, 4.96:1 to 6.72:1), which is what lets one component
+/// carry the same meaning on a white row and a dark card without a second
+/// colour per status.
+///
+/// The pairs are resolved through `UIColor`'s dynamic provider rather than
+/// SwiftUI's `@Environment(\.colorScheme)`: a capsule inside a `List` is often
+/// re-rendered without its body being rebuilt, so a scheme read at body time can
+/// lag one switch behind. This way the colour itself follows the appearance.
+struct CapsuleTone: Equatable {
+    let lightForeground: Color
+    let lightBackground: Color
+    let darkForeground: Color
+    let darkBackground: Color
+
+    var foreground: Color { dynamic(light: lightForeground, dark: darkForeground) }
+    var background: Color { dynamic(light: lightBackground, dark: darkBackground) }
+
+    private func dynamic(light: Color, dark: Color) -> Color {
+        let lightUI = UIColor(light)
+        let darkUI = UIColor(dark)
+        return Color(UIColor { traits in
+            traits.userInterfaceStyle == .dark ? darkUI : lightUI
+        })
+    }
+}
+
+extension CapsuleTone {
+    /// Green: a financial saving.
+    static let saves = CapsuleTone(
+        lightForeground: Color(hex: 0x176B3D), lightBackground: Color(hex: 0xDDF3E5),
+        darkForeground: Color(hex: 0x66D69A), darkBackground: Color(hex: 0x204333)
+    )
+
+    /// Grey: a neutral outcome, neither saving nor costing.
+    static let breakEven = CapsuleTone(
+        lightForeground: Color(hex: 0x555B64), lightBackground: Color(hex: 0xE9EAED),
+        darkForeground: Color(hex: 0xD0D0D5), darkBackground: Color(hex: 0x404044)
+    )
+
+    /// Red: an additional cost.
+    static let costs = CapsuleTone(
+        lightForeground: Color(hex: 0xA63F3D), lightBackground: Color(hex: 0xF9E1DF),
+        darkForeground: Color(hex: 0xEF9690), darkBackground: Color(hex: 0x4B3032)
+    )
+
+    /// Purple: best overall value after travel.
+    static let bestValue = CapsuleTone(
+        lightForeground: Color(hex: 0x7043A1), lightBackground: Color(hex: 0xEEE4F8),
+        darkForeground: Color(hex: 0xD1B4FA), darkBackground: Color(hex: 0x44354F)
+    )
+
+    /// Blue: the lowest fuel price in range.
+    static let cheapest = CapsuleTone(
+        lightForeground: Color(hex: 0x225F9B), lightBackground: Color(hex: 0xE0EFFB),
+        darkForeground: Color(hex: 0x8BC5FA), darkBackground: Color(hex: 0x293F53)
+    )
+
+    /// Neutral grey: proximity. Same family as `breakEven` — both mean "no
+    /// judgement" — but kept as its own pair so proximity and a break-even
+    /// verdict stay independently tunable.
+    static let closestStation = CapsuleTone(
+        lightForeground: Color(hex: 0x525967), lightBackground: Color(hex: 0xE8EAF0),
+        darkForeground: Color(hex: 0xC0C3CC), darkBackground: Color(hex: 0x424349)
+    )
+
+    /// Blue, like `cheapest`: the top favourite IS the cheapest favourite, so it
+    /// must not read as a different class of thing.
+    static let top = CapsuleTone(
+        lightForeground: Color(hex: 0x225F9B), lightBackground: Color(hex: 0xE0EFFB),
+        darkForeground: Color(hex: 0x8BC5FA), darkBackground: Color(hex: 0x293F53)
+    )
+}
+
+/// The one shape rule every capsule in the app follows.
+///
+/// A capsule while the content is a single line; a rounded rectangle once it
+/// wraps. A pill's semicircular ends crowd the text corners at two lines or
+/// more, while a 10pt radius does not. The shape follows what the content
+/// actually DREW, not how many lines it declared, because a label can wrap in a
+/// narrow column without the data changing — "Closest station" is the case that
+/// forced this: one declared line that wraps to two in the listing's price
+/// column.
+///
+/// Measuring happens on the content BEFORE padding, so the drawn line count is
+/// never inflated by the capsule's own insets.
+struct AdaptiveCapsule<Content: View>: View {
+    /// The tone's background fill. The caller resolves it from its own semantics.
+    let fill: Color
+    /// One line's height for the content's font, already scaled with Dynamic
+    /// Type — pass a `@ScaledMetric` so the division below tracks the user's size.
+    let lineHeight: CGFloat
+    /// Lines the content declares, used for the first layout pass before a
+    /// measured height exists.
+    var declaredLineCount: Int = 1
+    var cornerRadius: CGFloat = 10
+    var horizontalPadding: CGFloat
+    var verticalPadding: CGFloat
+    @ViewBuilder let content: Content
+
+    @State private var drawnHeight: CGFloat = 0
+
+    private var lineCount: Int {
+        guard drawnHeight > 0, lineHeight > 0 else { return max(1, declaredLineCount) }
+        return max(1, Int((drawnHeight / lineHeight).rounded()))
+    }
+
+    private var shape: AnyShape {
+        lineCount > 1
+            ? AnyShape(RoundedRectangle(cornerRadius: cornerRadius, style: .continuous))
+            : AnyShape(Capsule())
+    }
+
+    var body: some View {
+        content
+            .background(
+                GeometryReader { proxy in
+                    Color.clear.preference(key: CapsuleContentHeightKey.self,
+                                           value: proxy.size.height)
+                }
+            )
+            .padding(.horizontal, horizontalPadding)
+            .padding(.vertical, verticalPadding)
+            .background(shape.fill(fill))
+            .onPreferenceChange(CapsuleContentHeightKey.self) { drawnHeight = $0 }
+    }
+}
+
+/// Carries the drawn height of a capsule's content up to `lineCount`.
+private struct CapsuleContentHeightKey: PreferenceKey {
+    static let defaultValue: CGFloat = 0
+    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = max(value, nextValue())
+    }
+}
+
+extension Color {
+    /// A fixed sRGB colour from a 24-bit literal. The capsule palette is
+    /// appearance-specific and supplied per tone, so these are deliberately NOT
+    /// dynamic — `CapsuleTone` resolves the pair itself.
+    init(hex: UInt32) {
+        self.init(
+            .sRGB,
+            red: Double((hex >> 16) & 0xFF) / 255,
+            green: Double((hex >> 8) & 0xFF) / 255,
+            blue: Double(hex & 0xFF) / 255,
+            opacity: 1
+        )
+    }
+}

FuelBoard/ContentView.swift

@@ -1941,14 +1941,18 @@ struct StationRow: View {
 
                 // Name, full address, distance
                 VStack(alignment: .leading, spacing: 2) {
-                    // The name WRAPS instead of truncating: the row is tall
+                    // The name wraps, capped at THREE lines. The row is tall
-                    // enough now, and a name cut to "Z A Service Stat…" cannot
+                    // enough for a two-line name, but an unbounded wrap let one
-                    // be told apart from the station next door. Baseline
+                    // very long forecourt name set the height of the whole row —
-                    // alignment keeps the notice symbols on the name's FIRST
+                    // the excessive row heights this refinement removes. Past
-                    // line instead of floating beside a two-line name.
+                    // three lines the name ellipsises; the full name is always
+                    // in Station Details. Baseline alignment keeps the notice
+                    // symbols on the name's FIRST line instead of floating
+                    // beside a two-line name.
                     HStack(alignment: .firstTextBaseline, spacing: 6) {
                         Text(station.name)
                             .font(.headline)
+                            .lineLimit(3)
                             .multilineTextAlignment(.leading)
                             .fixedSize(horizontal: false, vertical: true)
                         ForEach(StationNotice.notices(for: station)) { notice in
@@ -2019,27 +2023,33 @@ struct StationRow: View {
                 if let badge = recommendationBadge {
                     badgeCapsule(badge)
                 }
-                // Price line: the status dot and the price, leading-aligned on
+                // The price and its verdict capsule are ONE vertically grouped
-                // the column's one axis. The star no longer ends this line — it
+                // element: 5pt binds them as "this price, this outcome", while
-                // sits under the station logo — so this whole column width now
+                // the badge keeps the column's full 12pt above so the three
-                // belongs to the price, which is what lets the wide pounds &
+                // lines do not read as equals.
-                // pence form (£1.58⁷/L) render at full size rather than being
+                VStack(alignment: .leading, spacing: 5) {
-                // scaled down or truncated.
+                    // Price line: the status dot and the price, leading-aligned
-                if let price = station.prices[fuel] {
+                    // on the column's one axis. The star no longer ends this
-                    HStack(spacing: 5) {
+                    // line — it sits under the station logo — so this whole
-                        PriceRatingDot(color: ragColor)
+                    // column width now belongs to the price, which is what lets
-                        FuelStore.priceTextAttributed(price, style: priceDisplayStyle,
+                    // the wide pounds & pence form (£1.58⁷/L) render at full
-                                                     size: priceSize, weight: .bold)
+                    // size rather than being scaled down or truncated.
-                            .lineLimit(1)
+                    if let price = station.prices[fuel] {
-                            .minimumScaleFactor(0.8)
+                        HStack(spacing: 5) {
+                            PriceRatingDot(color: ragColor)
+                            FuelStore.priceTextAttributed(price, style: priceDisplayStyle,
+                                                         size: priceSize, weight: .bold)
+                                .lineLimit(1)
+                                .minimumScaleFactor(0.8)
+                        }
+                        // The visible "+1.8p vs cheapest" line is gone with the
+                        // redesign, so the comparison rides on the price's label.
+                        .accessibilityElement(children: .ignore)
+                        .accessibilityLabel(priceSpokenLabel(price))
+                    }
+                    if let result = fuelSavings?.result {
+                        savingsCapsule(result)
                     }
-                    // The visible "+1.8p vs cheapest" line is gone with the
-                    // redesign, so the comparison rides on the price's label.
-                    .accessibilityElement(children: .ignore)
-                    .accessibilityLabel(priceSpokenLabel(price))
-                }
-                if let result = fuelSavings?.result {
-                    savingsCapsule(result)
                 }
             }
             .frame(maxWidth: .infinity, alignment: .leading)
@@ -2065,39 +2075,35 @@ struct StationRow: View {
         .buttonStyle(.borderless)
     }
 
-    /// Listing-only verdict. It deliberately omits money and the repeated
+    /// The listing's verdict capsule — ONE component for every status, so the
-    /// comparison caption; the full monetary result remains in More info.
+    /// baseline's "Closest station" pill carries the same soft blue fill, white
-    @ViewBuilder
+    /// text and shape rules as Saves, Costs and Break even. The detail sheet
+    /// keeps `FuelSavingsCapsule` to itself, unchanged.
     private func savingsCapsule(_ result: FuelSavingsResult) -> some View {
-        if result.status == .baseline {
+        ListingFuelSavingsCapsule(result: result)
-            FuelSavingsCapsule(result: result)
-        } else {
-            ListingFuelSavingsCapsule(result: result)
-        }
     }
 
-    /// One recommendation badge, above the price it annotates. Tinted rather
+    /// One recommendation badge, above the price it annotates. Badges stay
-    /// than the mockup's solid fill, like every other badge and capsule in the
+    /// TINTED with coloured text — unlike the verdict capsule beneath, which is
-    /// app: coloured text keeps its contrast in both appearances, at every
+    /// filled: a badge annotates the price rather than reporting an outcome, so it
-    /// Dynamic Type size, without introducing a colour outside the palette.
+    /// stays quieter than the pill below it, and tinted text keeps its contrast in
+    /// both appearances at every Dynamic Type size.
     private func badgeCapsule(_ badge: StationRecommendationBadge) -> some View {
-        StationLabelBadge(label: badge.title, color: badge.tint)
+        StationLabelBadge(kind: badge.labelKind)
     }
 }
 
 /// Badge copy and colour for `StationRecommendationBadge` — view concerns, so
 /// they stay out of the shared model the tests cover.
 private extension StationRecommendationBadge {
-    var title: String {
+    /// The shared label kind, so a row's badge and the Key's legend for the same
+    /// meaning can never drift apart.
+    var labelKind: StationLabelKind {
         switch self {
-        case .bestValue:
+        case .bestValue: return .bestValue
-            return String(localized: "BEST VALUE", comment: "Station badge: saving clears the Best Value threshold")
+        case .cheapest: return .cheapest
-        case .cheapest:
-            return String(localized: "CHEAPEST", comment: "Station badge: cheapest price in range")
         }
     }
-
-    var tint: Color { self == .bestValue ? .green : .blue }
 }
 
 // MARK: - Location manager

FuelBoard/FavouritesView.swift

@@ -48,6 +48,14 @@ struct FavouritesView: View {
     /// Trends sheet (price history chart) presentation state.
     @State private var showTrends = false
 
+    /// The Key (legend) sheet — the same sheet the Stations tab presents, opened
+    /// from the info button beside Edit.
+    @State private var showKey = false
+    /// The Key sheet's two nested sheets, owned here because its rows set them
+    /// (same arrangement as StationsView, so the QA hooks behave identically).
+    @State private var showBestValueInfo = false
+    @State private var showImportantInformation = false
+
     /// Station picked for the More-info sheet (tap action = showDetails).
     @State private var detailStation: FuelStation?
 
@@ -206,8 +214,8 @@ struct FavouritesView: View {
             }
             .navigationTitle(String(localized: "Favourites", comment: "Favourites tab title"))
             .toolbar {
-                if !favourites.isEmpty {
+                ToolbarItemGroup(placement: .topBarTrailing) {
-                    ToolbarItemGroup(placement: .topBarTrailing) {
+                    if !favourites.isEmpty {
                         Button {
                             showTrends = true
                         } label: {
@@ -216,8 +224,24 @@ struct FavouritesView: View {
                         }
                         EditButton()
                     }
+                    // Same button and same slot as the Stations tab: last in the
+                    // group, so it sits to the right of Edit. Shown even with no
+                    // favourites — the legend explains the prices and labels, which
+                    // matter before anything is starred.
+                    Button {
+                        showKey = true
+                    } label: {
+                        Image(systemName: "info.circle")
+                    }
+                    .accessibilityLabel(String(localized: "Key", comment: "Key button accessibility label"))
                 }
             }
+            .sheet(isPresented: $showKey) {
+                KeySheetView(
+                    showBestValueInfo: $showBestValueInfo,
+                    showImportantInformation: $showImportantInformation
+                )
+            }
             .sheet(isPresented: $showTrends) {
                 TrendsView(
                     favourites: favourites,

FuelBoard/FuelSavingsViews.swift

@@ -105,38 +105,51 @@ struct FuelSavingsCapsule: View {
     let result: FuelSavingsResult
     var compact: Bool = true
 
+    /// One line of `.headline` / `.caption`, scaled with Dynamic Type, so the
+    /// shared shape rule can tell one drawn line from two.
+    @ScaledMetric(relativeTo: .headline) private var headlineLineHeight: CGFloat = 22
+    @ScaledMetric(relativeTo: .caption) private var captionLineHeight: CGFloat = 14
+
+    private var tone: CapsuleTone { Self.tone(for: result.status) }
+
     var body: some View {
-        HStack(spacing: compact ? 3 : 5) {
+        AdaptiveCapsule(
-            Image(systemName: Self.symbol(for: result.status))
+            fill: tone.background,
-                .accessibilityHidden(true)
+            lineHeight: compact ? captionLineHeight : headlineLineHeight,
-            Text(compact ? result.capsuleHeadline() : result.detailCapsuleHeadline())
+            horizontalPadding: compact ? 8 : 12,
-                .lineLimit(1)
+            verticalPadding: compact ? 4 : 7
-                // Measured on a 393pt screen: the capsule is handed ~101pt, of
+        ) {
-                // which the icon, its spacing and the 8pt padding either side
+            HStack(spacing: compact ? 3 : 5) {
-                // take 32pt, leaving ~69pt for the text. "Closest station" needs
+                Image(systemName: Self.symbol(for: result.status))
-                // ~90pt at full size, so a 0.8 floor — 72pt — could not reach it
+                    .accessibilityHidden(true)
-                // and the row showed "Closest stati…" instead. 0.7 leaves ~63pt,
+                Text(compact ? result.capsuleHeadline() : result.detailCapsuleHeadline())
-                // which clears it at ~10pt type: scaled, never truncated.
+                    // The detail sheet's capsule sits beside a headline and has the
-                .minimumScaleFactor(0.7)
+                    // width for its wording; the listing's is narrow and scales.
+                    .lineLimit(compact ? 1 : nil)
+                    .minimumScaleFactor(compact ? 0.7 : 1)
+            }
+            .font(compact ? .caption.weight(.semibold) : .headline)
+            .foregroundStyle(tone.foreground)
         }
-        .font(compact ? .caption.weight(.semibold) : .headline)
-        .foregroundStyle(Self.color(for: result.status))
-        .padding(.horizontal, compact ? 8 : 12)
-        .padding(.vertical, compact ? 4 : 7)
-        .background(Capsule().fill(Self.color(for: result.status).opacity(0.15)))
     }
 
-    /// Verdict colour: green save, red worse off, grey break even, blue
+    /// Verdict tone: green save, red worse off, grey break even, neutral-grey
-    /// baseline — the same green/amber/red family the price dot already uses.
+    /// baseline — the same meanings the price dot's RAG family carries.
-    static func color(for status: FuelSavingsStatus) -> Color {
+    static func tone(for status: FuelSavingsStatus) -> CapsuleTone {
         switch status {
-        case .worthTheDrive: return .green
+        case .worthTheDrive: return .saves
-        case .notWorthTheDrive: return .red
+        case .notWorthTheDrive: return .costs
-        case .breakEven: return .secondary
+        case .breakEven: return .breakEven
-        case .baseline: return .blue
+        case .baseline: return .closestStation
         }
     }
 
+    /// Foreground-only form, for a `Text` that is tinted rather than filled (the
+    /// detail sheet's Total row). Keeps one source for the verdict colour.
+    static func color(for status: FuelSavingsStatus) -> Color {
+        tone(for: status).foreground
+    }
+
     static func symbol(for status: FuelSavingsStatus) -> String {
         switch status {
         case .worthTheDrive: return "checkmark.circle.fill"
@@ -147,28 +160,81 @@ struct FuelSavingsCapsule: View {
     }
 }
 
-/// Amount-free, neutral verdict used by station listing rows only. Keeping this
+/// The station listing's verdict capsule: the words on the first line, the figure
-/// separate from `FuelSavingsCapsule` preserves the detail sheet's monetary,
+/// on its own line beneath, and "(approx.)" on a third when the journey is an
-/// colour-coded verdict and comparison presentation.
+/// estimate.
+///
+/// Stations and Favourites share `StationRow`, so both render this. The detail
+/// sheet keeps `FuelSavingsCapsule`'s colour-coded monetary verdict on one line;
+/// the Key sheet's legend renders this with `showsAmount: false` so it never
+/// displays an invented figure.
 struct ListingFuelSavingsCapsule: View {
     let result: FuelSavingsResult
+    /// Station rows carry the figure; the Key sheet's legend shows the wording only.
+    var showsAmount: Bool = true
+
+    /// One caption line's height, scaled with Dynamic Type, for the shared shape
+    /// rule. The drawn height is divided by this, so the shape follows the lines
+    /// actually on screen rather than the number the verdict declares.
+    @ScaledMetric(relativeTo: .caption) private var captionLineHeight: CGFloat = 14
+
+    private var verdict: FuelSavingsResult.ListingVerdict {
+        result.listingVerdict(showsAmount: showsAmount)
+    }
+
+    private var tone: CapsuleTone { FuelSavingsCapsule.tone(for: result.status) }
 
     var body: some View {
-        HStack(alignment: .firstTextBaseline, spacing: 3) {
+        AdaptiveCapsule(
-            Image(systemName: symbol)
+            fill: tone.background,
-                .accessibilityHidden(true)
+            lineHeight: captionLineHeight,
-            Text(result.listingCapsuleHeadline())
+            declaredLineCount: verdict.lines.count,
-                .lineLimit(nil)
+            horizontalPadding: 8,
-                .fixedSize(horizontal: false, vertical: true)
+            verticalPadding: 4
+        ) {
+            HStack(alignment: .firstTextBaseline, spacing: 3) {
+                Image(systemName: symbol)
+                    .accessibilityHidden(true)
+                // One Text per line, not a "\n" inside one string: each line keeps its
+                // own localisation key and the amount can be monospaced on its own.
+                // Left-aligned: the word and its figure share a left edge, so the
+                // block reads as a column rather than a ragged centre.
+                VStack(alignment: .leading, spacing: 0) {
+                    Text(verdict.headline)
+                    if let amount = verdict.amount {
+                        Text(amount)
+                            .monospacedDigit()
+                    }
+                    if let qualifier = verdict.qualifier {
+                        Text(qualifier)
+                    }
+                }
                 .multilineTextAlignment(.leading)
+                // Never compress or truncate: the capsule wraps and the row grows taller.
+                .fixedSize(horizontal: false, vertical: true)
+            }
+            // Tinted foreground on a tinted fill. These capsules carry a figure the
+            // eye is asked to read at a glance, so they are filled rather than
+            // tinted-text-only; every badge above them stays the quieter tinted form.
+            .font(.caption.weight(.semibold))
+            .foregroundStyle(tone.foreground)
         }
-        .font(.caption.weight(.semibold))
+        // Saves and Costs share one minimum width, so their trailing edges line
-        .foregroundStyle(.primary)
+        // up down the list whatever the figure's length. Break even and Closest
-        .padding(.horizontal, 8)
+        // station carry no figure and keep their natural width.
-        .padding(.vertical, 4)
+        .frame(minWidth: minimumWidth, alignment: .leading)
-        .background(Capsule().fill(Color.secondary.opacity(0.14)))
         .accessibilityElement(children: .combine)
-        .accessibilityLabel(result.listingCapsuleHeadline())
+        .accessibilityLabel(verdict.spokenText)
+    }
+
+    /// Saves and Costs only — the two verdicts that carry a figure. 84pt is the
+    /// width the widest common amount needs ("£123.45 more"), so shorter figures
+    /// pad rather than shrink the pill.
+    private var minimumWidth: CGFloat {
+        switch result.status {
+        case .worthTheDrive, .notWorthTheDrive: return 84
+        case .breakEven, .baseline: return 0
+        }
     }
 
     private var symbol: String {
@@ -179,4 +245,4 @@ struct ListingFuelSavingsCapsule: View {
         case .baseline: return "location.circle"
         }
     }
-}
+}

FuelBoard/StationsView.swift

@@ -1,6 +1,101 @@
 import SwiftUI
 import WidgetKit
 
+/// The "Key" legend: price ratings, savings capsules, station labels, the
+/// favourite glyph, then the two deeper explanations. One sheet for both list
+/// tabs — Stations opens it from the info button in the navigation bar,
+/// Favourites from the button beside Edit — so the legend cannot drift between
+/// them.
+///
+/// Dismisses through the environment rather than the presenting view's state, and
+/// takes the two nested-sheet flags as bindings, so each tab keeps owning its own
+/// QA launch-argument hooks.
+struct KeySheetView: View {
+    @Binding var showBestValueInfo: Bool
+    @Binding var showImportantInformation: Bool
+
+    @Environment(\.dismiss) private var dismiss
+
+    var body: some View {
+        NavigationStack {
+            List {
+                Section {
+                    KeySheetDescriptionRow(item: KeySheetContent.priceRatings[0]) {
+                        KeyPriceRatingIndicator(item: KeySheetContent.priceRatings[0], color: .green)
+                    }
+                    KeySheetDescriptionRow(item: KeySheetContent.priceRatings[1]) {
+                        KeyPriceRatingIndicator(item: KeySheetContent.priceRatings[1], color: .orange)
+                    }
+                    KeySheetDescriptionRow(item: KeySheetContent.priceRatings[2]) {
+                        KeyPriceRatingIndicator(item: KeySheetContent.priceRatings[2], color: .red)
+                    }
+                } header: {
+                    Text("Price ratings")
+                }
+
+                Section {
+                    ForEach(KeySheetContent.savings, id: \.label) { item in
+                        KeySheetDescriptionRow(item: item) {
+                            KeySavingsCapsule(label: item.label)
+                        }
+                    }
+                } header: {
+                    Text("Savings")
+                }
+
+                Section {
+                    ForEach(StationLabelKind.allCases, id: \.self) { kind in
+                        KeySheetDescriptionRow(item: item(for: kind)) {
+                            KeyStationLabelIndicator(kind: kind)
+                        }
+                    }
+                } header: {
+                    Text("Station labels")
+                }
+
+                Section {
+                    KeySheetDescriptionRow(item: KeySheetContent.favourite) {
+                        FavouriteStarGlyph(isFavourite: true)
+                    }
+                } header: {
+                    Text("Favourites")
+                }
+
+                Section {
+                    HowBestValueRow { showBestValueInfo = true }
+                }
+
+                Section {
+                    ImportantInformationRow { showImportantInformation = true }
+                }
+            }
+            .navigationTitle("Key")
+            .navigationBarTitleDisplayMode(.inline)
+            .toolbar {
+                ToolbarItem(placement: .confirmationAction) {
+                    Button("Done") { dismiss() }
+                }
+            }
+            // Nested sheet: the Key sheet stays behind the explanation.
+            .sheet(isPresented: $showBestValueInfo) { HowBestValueSheet() }
+            // Nested sheet: the Key sheet stays behind the disclaimer.
+            .importantInformationSheet(isPresented: $showImportantInformation)
+        }
+        .presentationDetents([.fraction(0.6), .large])
+        .presentationBackground(Color(UIColor.systemGroupedBackground))
+    }
+
+    /// The Key row's copy for a label kind. Fails loudly in debug rather than
+    /// silently rendering a blank row if a kind is ever added without its entry.
+    private func item(for kind: StationLabelKind) -> KeySheetContent.Item {
+        if let match = KeySheetContent.stationLabels.first(where: { $0.label == kind.label }) {
+            return match
+        }
+        assertionFailure("No KeySheetContent.stationLabels entry for \(kind)")
+        return KeySheetContent.Item(label: kind.label, description: "")
+    }
+}
+
 /// Stations tab — the main list with fuel picker, distance filter, sort, pagination.
 struct StationsView: View {
     let stations: [FuelStation]
@@ -296,73 +391,14 @@ struct StationsView: View {
         )
     }
 
+    /// The legend sheet, shared with the Favourites tab. Nothing varies by fuel:
+    /// every station label has a fixed semantic tone, so the legend reads the same
+    /// whichever grade the reader is looking at.
     private var keySheet: some View {
-        NavigationStack {
+        KeySheetView(
-            List {
+            showBestValueInfo: $showBestValueInfo,
-                Section {
+            showImportantInformation: $showImportantInformation
-                    KeySheetDescriptionRow(item: KeySheetContent.priceRatings[0]) {
+        )
-                        KeyPriceRatingIndicator(item: KeySheetContent.priceRatings[0], color: .green)
-                    }
-                    KeySheetDescriptionRow(item: KeySheetContent.priceRatings[1]) {
-                        KeyPriceRatingIndicator(item: KeySheetContent.priceRatings[1], color: .orange)
-                    }
-                    KeySheetDescriptionRow(item: KeySheetContent.priceRatings[2]) {
-                        KeyPriceRatingIndicator(item: KeySheetContent.priceRatings[2], color: .red)
-                    }
-                } header: {
-                    Text("Price ratings")
-                }
-
-                Section {
-                    ForEach(KeySheetContent.savings, id: \.label) { item in
-                        KeySheetDescriptionRow(item: item) {
-                            KeySavingsCapsule(label: item.label)
-                        }
-                    }
-                } header: {
-                    Text("Savings")
-                }
-
-                Section {
-                    ForEach(KeySheetContent.stationLabels, id: \.label) { item in
-                        KeySheetDescriptionRow(item: item) {
-                            KeyStationLabelIndicator(label: item.label, fuelColor: selectedFuel.tintColor)
-                        }
-                    }
-                } header: {
-                    Text("Station labels")
-                }
-
-                Section {
-                    KeySheetDescriptionRow(item: KeySheetContent.favourite) {
-                        FavouriteStarGlyph(isFavourite: true)
-                    }
-                } header: {
-                    Text("Favourites")
-                }
-
-                Section {
-                    HowBestValueRow { showBestValueInfo = true }
-                }
-
-                Section {
-                    ImportantInformationRow { showImportantInformation = true }
-                }
-            }
-            .navigationTitle("Key")
-            .navigationBarTitleDisplayMode(.inline)
-            .toolbar {
-                ToolbarItem(placement: .confirmationAction) {
-                    Button("Done") { showKey = false }
-                }
-            }
-            // Nested sheet: the Key sheet stays behind the explanation.
-            .sheet(isPresented: $showBestValueInfo) { HowBestValueSheet() }
-            // Nested sheet: the Key sheet stays behind the disclaimer.
-            .importantInformationSheet(isPresented: $showImportantInformation)
-        }
-        .presentationDetents([.fraction(0.6), .large])
-        .presentationBackground(Color(UIColor.systemGroupedBackground))
     }
 
     private func stationRow(_ station: FuelStation) -> some View {
@@ -443,10 +479,12 @@ private struct KeySheetDescriptionRow<Indicator: View>: View {
 private struct KeySavingsCapsule: View {
     let label: String
 
+    /// Keyed on the shared label so the legend cannot demonstrate a word the
+    /// listing capsule never draws.
     private var status: FuelSavingsStatus {
         switch label {
-        case "Saves": return .worthTheDrive
+        case String(localized: "Saves"): return .worthTheDrive
-        case "Costs more": return .notWorthTheDrive
+        case String(localized: "Costs"): return .notWorthTheDrive
         default: return .breakEven
         }
     }
@@ -465,18 +503,30 @@ private struct KeySavingsCapsule: View {
     }
 
     var body: some View {
-        ListingFuelSavingsCapsule(result: result)
+        // The legend demonstrates the wording, not a figure: `result` above is a
+        // placeholder verdict, and its £1.00 must never reach the screen.
+        ListingFuelSavingsCapsule(result: result, showsAmount: false)
     }
 }
 
 /// Shared RAG dot used beside live station prices and in the Key.
+///
+/// 12pt is the app's one diameter: it reads at a glance beside a 22pt price
+/// without competing with it, and it is large enough that the three colours are
+/// distinguishable for colour-vision-deficient users at arm's length. The widget
+/// keeps a smaller dot of its own — its rows are far tighter than a phone row —
+/// so this size is deliberately the APP's.
 struct PriceRatingDot: View {
     let color: Color
+    var diameter: CGFloat = PriceRatingDot.standardDiameter
+
+    /// The app's standard dot diameter, in points.
+    static let standardDiameter: CGFloat = 12
 
     var body: some View {
         Circle()
             .fill(color)
-            .frame(width: 8, height: 8)
+            .frame(width: diameter, height: diameter)
             .accessibilityHidden(true)
     }
 }
@@ -493,40 +543,51 @@ struct FavouriteStarGlyph: View {
 
 /// Shared station-label capsule. `StationRow` uses the same view for its live
 /// BEST VALUE/CHEAPEST badge, so the Key cannot drift from the listing style.
+///
+/// One tone per label kind, from the shared palette: purple for best value, blue
+/// for cheapest and top (a top favourite IS the cheapest favourite, so they share
+/// a class), neutral for proximity. The symbol is the label's own meaning, sized
+/// to sit on the caption's cap height rather than to dominate it.
 struct StationLabelBadge: View {
-    let label: String
+    let kind: StationLabelKind
-    let color: Color
+
+    private var tone: CapsuleTone {
+        switch kind {
+        case .bestValue: return .bestValue
+        case .cheapest: return .cheapest
+        case .closestStation: return .closestStation
+        case .top: return .top
+        }
+    }
 
     var body: some View {
-        Text(LocalizedStringKey(label))
+        HStack(spacing: 3) {
-            .font(.caption2.bold())
+            Image(systemName: kind.symbol)
-            .foregroundStyle(color)
+                .font(.caption2.weight(.semibold))
-            .padding(.horizontal, 7)
+                .accessibilityHidden(true)
-            .padding(.vertical, 3)
+            Text(LocalizedStringKey(kind.label))
-            .background(Capsule().fill(color.opacity(0.15)))
+                .font(.caption.weight(.semibold))
-            .fixedSize(horizontal: true, vertical: false)
+                .fixedSize(horizontal: true, vertical: false)
+        }
+        .foregroundStyle(tone.foreground)
+        .padding(.horizontal, 7)
+        .padding(.vertical, 3)
+        .background(Capsule().fill(tone.background))
     }
 }
 
+/// The Key sheet's indicator for a station label. The closest station is the one
+/// exception: it renders the listing's real verdict capsule, so the legend
+/// demonstrates the same fill, text and shape the rows show. Everything else is
+/// the shared badge.
 private struct KeyStationLabelIndicator: View {
-    let label: String
+    let kind: StationLabelKind
-    let fuelColor: Color
 
     var body: some View {
-        switch label {
+        if kind == .closestStation {
-        case "BEST VALUE":
+            ListingFuelSavingsCapsule(result: baselineResult)
-            StationLabelBadge(label: label, color: .green)
+        } else {
-        case "CHEAPEST":
+            StationLabelBadge(kind: kind)
-            StationLabelBadge(label: label, color: .blue)
-        case "CLOSEST":
-            FuelSavingsCapsule(result: baselineResult)
-        default:
-            Text("TOP")
-                .font(.caption2.bold())
-                .padding(.horizontal, 4)
-                .padding(.vertical, 2)
-                .background(fuelColor.opacity(0.18), in: Capsule())
-                .fixedSize(horizontal: true, vertical: false)
         }
     }
 

FuelBoard/en.lproj/Localizable.strings

@@ -9,9 +9,10 @@
 "Alerts" = "Alerts";
 "Settings" = "Settings";
 "FuelBoard" = "FuelBoard";
-"TOP" = "TOP";
+"Top" = "Top";
-"BEST VALUE" = "BEST VALUE";
+"Best value" = "Best value";
-"CHEAPEST" = "CHEAPEST";
+"Cheapest" = "Cheapest";
+"Closest station" = "Closest station";
 
 /* Stations tab */
 "Closest %@ stations — closest first, lowest price within %lld %@ · %lld stations" = "Closest %@ stations — closest first, lowest price within %lld %@ · %lld stations";
@@ -37,10 +38,13 @@
 "You’ll save money compared with your closest station, including travel costs." = "You’ll save money compared with your closest station, including travel costs.";
 "Break even" = "Break even";
 "The saving or extra cost is negligible." = "The saving or extra cost is negligible.";
-"Costs more" = "Costs more";
+"Costs" = "Costs";
 "Filling up here costs more than at your closest station, including travel." = "Filling up here costs more than at your closest station, including travel.";
+/* Station listing verdict capsule: the words above the figure */
+"(approx.)" = "(approx.)";
+"%@ more" = "%@ more";
 "Station labels" = "Station labels";
-"CLOSEST" = "CLOSEST";
+"Closest station" = "Closest station";
 "Meets your minimum saving after travel costs." = "Meets your minimum saving after travel costs.";
 "The lowest fuel price per litre within your selected range." = "The lowest fuel price per litre within your selected range.";
 "The nearest station by journey distance." = "The nearest station by journey distance.";

FuelBoardTests/Tests/FuelBoardSharedTests/FuelSavingsEstimateTests.swift

@@ -18,7 +18,7 @@ final class FuelSavingsEstimateTests: XCTestCase {
     )
     private let amount = FuelSavingsFillAmount(value: 40, unit: .pounds)
 
-    func testListingCapsuleUsesSixShortFinancialVerdictsWithoutAmounts() {
+    func testListingCapsulePutsTheFigureOnItsOwnLine() {
         func result(_ status: FuelSavingsStatus, _ confidence: JourneyConfidence) -> FuelSavingsResult {
             FuelSavingsResult(
                 fillLitres: 30,
@@ -31,12 +31,33 @@ final class FuelSavingsEstimateTests: XCTestCase {
             )
         }
 
-        XCTAssertEqual(result(.worthTheDrive, .confirmed).listingCapsuleHeadline(), "Saves")
+        // The figure takes its own line, so the capsule's shape is decided by the
-        XCTAssertEqual(result(.worthTheDrive, .estimated).listingCapsuleHeadline(), "Saves (approx.)")
+        // data rather than by how much width the price column hands it.
-        XCTAssertEqual(result(.notWorthTheDrive, .confirmed).listingCapsuleHeadline(), "Costs more")
+        XCTAssertEqual(result(.worthTheDrive, .confirmed).listingVerdict().lines,
-        XCTAssertEqual(result(.notWorthTheDrive, .estimated).listingCapsuleHeadline(), "Costs more (approx.)")
+                       ["Saves", "£12.50"])
-        XCTAssertEqual(result(.breakEven, .confirmed).listingCapsuleHeadline(), "Break even")
+        XCTAssertEqual(result(.worthTheDrive, .estimated).listingVerdict().lines,
-        XCTAssertEqual(result(.breakEven, .estimated).listingCapsuleHeadline(), "Break even (approx.)")
+                       ["Saves", "£12.50", "(approx.)"])
+        XCTAssertEqual(result(.notWorthTheDrive, .confirmed).listingVerdict().lines,
+                       ["Costs", "£123.45 more"])
+        XCTAssertEqual(result(.notWorthTheDrive, .estimated).listingVerdict().lines,
+                       ["Costs", "£123.45 more", "(approx.)"])
+
+        // Break even carries no figure — ±£0.05 is noise — so it stays one line
+        // when confirmed and gains a second only for the estimate qualifier.
+        XCTAssertEqual(result(.breakEven, .confirmed).listingVerdict().lines, ["Break even"])
+        XCTAssertEqual(result(.breakEven, .estimated).listingVerdict().lines,
+                       ["Break even", "(approx.)"])
+        XCTAssertEqual(result(.baseline, .confirmed).listingVerdict().lines, ["Closest station"])
+
+        // The Key sheet's legend demonstrates the wording, never a figure.
+        XCTAssertEqual(
+            result(.notWorthTheDrive, .confirmed).listingVerdict(showsAmount: false).lines,
+            ["Costs"]
+        )
+
+        // VoiceOver keeps a single line: a drawn break is a spoken pause.
+        XCTAssertEqual(result(.worthTheDrive, .estimated).listingCapsuleHeadline(),
+                       "Saves £12.50 (approx.)")
     }
 
     func testDetailCapsulePlacesApproximationAfterTheFinancialResult() {

FuelBoardTests/Tests/FuelBoardSharedTests/FuelSavingsTests.swift

@@ -271,17 +271,51 @@ final class KeySheetContentTests: XCTestCase {
         XCTAssertEqual(KeySheetContent.savings, [
             .init(label: "Saves", description: "You’ll save money compared with your closest station, including travel costs."),
             .init(label: "Break even", description: "The saving or extra cost is negligible."),
-            .init(label: "Costs more", description: "Filling up here costs more than at your closest station, including travel.")
+            // "Costs" — the listing capsule's own headline, not "Costs more".
+            .init(label: "Costs", description: "Filling up here costs more than at your closest station, including travel.")
         ])
         XCTAssertFalse(KeySheetContent.savings.contains { $0.label == "Small saving" })
     }
 
+    /// Every Key label is sentence case: the capsules are read as phrases, and an
+    /// all-caps set reads as shouting beside the sentence-case copy around it.
+    func testEveryKeyLabelIsSentenceCase() {
+        let labels = (KeySheetContent.priceRatings
+                      + KeySheetContent.savings
+                      + KeySheetContent.stationLabels).map(\.label)
+        for label in labels {
+            XCTAssertNotEqual(label, label.uppercased(),
+                              "\(label) must be sentence case, not all caps")
+        }
+        XCTAssertEqual(KeySheetContent.stationLabels.map(\.label),
+                       ["Best value", "Cheapest", "Closest station", "Top"])
+    }
+
+    /// The Key dispatches its indicators on `StationLabelKind`, so every kind must
+    /// have exactly one entry in the legend — and each entry's label must be the
+    /// kind's own, or the row would describe one label and draw another.
+    func testEveryStationLabelKindHasOneMatchingLegendEntry() {
+        XCTAssertEqual(StationLabelKind.allCases.count, KeySheetContent.stationLabels.count)
+        for kind in StationLabelKind.allCases {
+            let matches = KeySheetContent.stationLabels.filter { $0.label == kind.label }
+            XCTAssertEqual(matches.count, 1, "\(kind) must own exactly one legend entry")
+        }
+    }
+
+    /// Recommended symbols, pinned so a rename cannot silently blank a badge.
+    func testStationLabelKindsUseTheirRecommendedSymbols() {
+        XCTAssertEqual(StationLabelKind.bestValue.symbol, "medal")
+        XCTAssertEqual(StationLabelKind.cheapest.symbol, "tag")
+        XCTAssertEqual(StationLabelKind.closestStation.symbol, "location.north.fill")
+        XCTAssertEqual(StationLabelKind.top.symbol, "trophy")
+    }
+
     func testStationLabelsDescribeTheCurrentQualificationAndRangeRules() {
         XCTAssertEqual(KeySheetContent.stationLabels, [
-            .init(label: "BEST VALUE", description: "Meets your minimum saving after travel costs."),
+            .init(label: "Best value", description: "Meets your minimum saving after travel costs."),
-            .init(label: "CHEAPEST", description: "The lowest fuel price per litre within your selected range."),
+            .init(label: "Cheapest", description: "The lowest fuel price per litre within your selected range."),
-            .init(label: "CLOSEST", description: "The nearest station by journey distance."),
+            .init(label: "Closest station", description: "The nearest station by journey distance."),
-            .init(label: "TOP", description: "The cheapest station in your Favourites for the selected fuel.")
+            .init(label: "Top", description: "The cheapest station in your Favourites for the selected fuel.")
         ])
     }
 

FuelBoardWatch Watch App/ContentView.swift

@@ -516,8 +516,10 @@ struct ContentView: View {
                             .fontWeight(favourite.isCheapest ? .semibold : .regular)
                             .lineLimit(1)
                         if favourite.isCheapest {
-                            Text("TOP")
+                            // Sentence case, to match every other surface: the watch
-                                .font(.system(size: 9, weight: .bold))
+                            // row is the same label as the phone's, not a different one.
+                            Text("Top")
+                                .font(.system(size: 9, weight: .semibold))
                                 .padding(.horizontal, 4)
                                 .padding(.vertical, 2)
                                 .background(fuel.color.opacity(0.18), in: Capsule())

Shared/FuelSavings.swift

@@ -263,18 +263,73 @@ extension FuelSavingsResult {
         headline(compact: true)
     }
 
-    /// Short, amount-free verdict used only by station listing rows. The detail
+    /// The station-listing capsule's verdict, split into the lines the capsule
-    /// sheet continues to use `capsuleHeadline()` so its full monetary verdict is
+    /// draws.
-    /// unchanged. Confidence follows the existing journey provenance exactly.
+    ///
-    func listingCapsuleHeadline() -> String {
+    /// The amount always takes its OWN line, so where the capsule breaks is
-        let approximate = journeyConfidence.isEstimated ? " (approx.)" : ""
+    /// decided by the data, never by the width it was handed: the figure can
+    /// never straddle two lines, and a taller verdict grows the capsule downward
+    /// instead of widening the row's fixed price column.
+    struct ListingVerdict: Equatable {
+        /// "Saves", "Costs", "Break even" or "Closest station".
+        let headline: String
+        /// "£3.10" / "£1.20 more" — nil when there is no figure to show.
+        let amount: String?
+        /// "(approx.)" when the journey behind the figure was estimated.
+        let qualifier: String?
+
+        var lines: [String] { [headline, amount, qualifier].compactMap { $0 } }
+
+        /// Single-line form, for VoiceOver and tests. A drawn newline is a pause
+        /// in the middle of a phrase when spoken.
+        var spokenText: String { lines.joined(separator: " ") }
+    }
+
+    /// Verdict for the station listing rows — Stations and Favourites share one
+    /// row, so they share this. `showsAmount: false` is the Key sheet's legend,
+    /// which demonstrates the wording without inventing a figure.
+    func listingVerdict(showsAmount: Bool = true) -> ListingVerdict {
+        let qualifier = journeyConfidence.isEstimated ? String(localized: "(approx.)") : nil
         switch status {
-        case .worthTheDrive: return "Saves\(approximate)"
+        case .worthTheDrive:
-        case .notWorthTheDrive: return "Costs more\(approximate)"
+            return ListingVerdict(
-        case .breakEven: return "Break even\(approximate)"
+                headline: String(localized: "Saves"),
-        case .baseline: return Self.baselineHeadline
+                amount: showsAmount ? FuelSavingsFormat.money(netSavingGBP) : nil,
+                qualifier: qualifier
+            )
+        case .notWorthTheDrive:
+            return ListingVerdict(
+                headline: String(localized: "Costs"),
+                amount: showsAmount ? Self.amountWithMore(abs(netSavingGBP)) : nil,
+                qualifier: qualifier
+            )
+        case .breakEven:
+            // No figure: ±£0.05 is noise, so this stays a single line unless the
+            // estimate qualifier adds its own.
+            return ListingVerdict(
+                headline: String(localized: "Break even"),
+                amount: nil,
+                qualifier: qualifier
+            )
+        case .baseline:
+            return ListingVerdict(
+                headline: Self.baselineHeadline,
+                amount: nil,
+                qualifier: nil
+            )
         }
     }
+
+    /// "£1.20 more" — kept as a format string so the copy editor owns the word.
+    private static func amountWithMore(_ value: Double) -> String {
+        String(format: String(localized: "%@ more"), FuelSavingsFormat.money(value))
+    }
+
+    /// One-line verdict for voice and tests; the capsule itself renders
+    /// `listingVerdict()`'s lines separately.
+    func listingCapsuleHeadline() -> String {
+        listingVerdict().spokenText
+    }
 }
 
 /// One station's journey distance, plus how it was obtained.
@@ -309,41 +364,81 @@ struct FuelSavingsRankedStation: Equatable {
     let pricePencePerLitre: Double
 }
 
-/// The user-facing copy shown by the Stations tab's Key sheet. Keeping the
+    /// The user-facing copy shown by the Stations tab's Key sheet. Keeping the
-/// descriptions in one Foundation-only model lets tests pin the exact meaning of
+    /// descriptions in one Foundation-only model lets tests pin the exact meaning of
-/// each visual indicator without coupling the wording to SwiftUI layout.
+    /// each visual indicator without coupling the wording to SwiftUI layout.
-enum KeySheetContent {
+    ///
-    struct Item: Equatable {
+    /// Every label is SENTENCE CASE ("Best value", not "BEST VALUE"): the labels
-        let label: String
+    /// are read as phrases, and a capsule set in all caps reads as shouting beside
-        let description: String
+    /// the sentence-case copy in the rows around it. The tests pin these exact
+    /// strings, and `StationLabelKind` maps each one to its indicator, so the view
+    /// never matches on the literal text.
+    enum KeySheetContent {
+        struct Item: Equatable {
+            let label: String
+            let description: String
+        }
+
+        static let priceRatings = [
+            Item(label: "Good price", description: "Within 1.5p/L of the cheapest."),
+            Item(label: "Okay", description: "More than 1.5p/L, up to 4p/L above the cheapest."),
+            Item(label: "Pricey", description: "More than 4p/L above the cheapest.")
+        ]
+
+        /// The same three verdicts the listing capsule draws, so the legend and the
+        /// rows cannot disagree on a word. "Costs" is the capsule's own headline.
+        static let savings = [
+            Item(label: "Saves", description: "You’ll save money compared with your closest station, including travel costs."),
+            Item(label: "Break even", description: "The saving or extra cost is negligible."),
+            Item(label: "Costs", description: "Filling up here costs more than at your closest station, including travel.")
+        ]
+
+        static let stationLabels = [
+            Item(label: "Best value", description: "Meets your minimum saving after travel costs."),
+            Item(label: "Cheapest", description: "The lowest fuel price per litre within your selected range."),
+            Item(label: "Closest station", description: "The nearest station by journey distance."),
+            Item(label: "Top", description: "The cheapest station in your Favourites for the selected fuel.")
+        ]
+
+        static let favourite = Item(
+            label: "Favourites",
+            description: "Star a station to save it to your Favourites."
+        )
+
+        static let helpTitle = "How does Best Value work?"
     }
 
-    static let priceRatings = [
+    /// A station label's meaning, independent of its copy.
-        Item(label: "Good price", description: "Within 1.5p/L of the cheapest."),
+    ///
-        Item(label: "Okay", description: "More than 1.5p/L, up to 4p/L above the cheapest."),
+    /// The Key sheet used to dispatch its indicator on the label's literal text
-        Item(label: "Pricey", description: "More than 4p/L above the cheapest.")
+    /// (`case "BEST VALUE":`), so renaming a label silently dropped that row to the
-    ]
+    /// fallback indicator. The enum makes the mapping explicit and lets the
+    /// compiler catch a missing case.
+    enum StationLabelKind: String, CaseIterable {
+        case bestValue
+        case cheapest
+        case closestStation
+        case top
 
-    static let savings = [
+        /// Matches the corresponding `KeySheetContent.stationLabels` entry.
-        Item(label: "Saves", description: "You’ll save money compared with your closest station, including travel costs."),
+        var label: String {
-        Item(label: "Break even", description: "The saving or extra cost is negligible."),
+            switch self {
-        Item(label: "Costs more", description: "Filling up here costs more than at your closest station, including travel.")
+            case .bestValue: return String(localized: "Best value")
-    ]
+            case .cheapest: return String(localized: "Cheapest")
+            case .closestStation: return FuelSavingsResult.baselineHeadline
+            case .top: return String(localized: "Top")
+            }
+        }
 
-    static let stationLabels = [
+        var symbol: String {
-        Item(label: "BEST VALUE", description: "Meets your minimum saving after travel costs."),
+            switch self {
-        Item(label: "CHEAPEST", description: "The lowest fuel price per litre within your selected range."),
+            case .bestValue: return "medal"
-        Item(label: "CLOSEST", description: "The nearest station by journey distance."),
+            case .cheapest: return "tag"
-        Item(label: "TOP", description: "The cheapest station in your Favourites for the selected fuel.")
+            case .closestStation: return "location.north.fill"
-    ]
+            case .top: return "trophy"
-
+            }
-    static let favourite = Item(
+        }
-        label: "Favourites",
+    }
-        description: "Star a station to save it to your Favourites."
-    )
-
-    static let helpTitle = "How does Best Value work?"
-}
 
 /// Which recommendation badge a station listing row shows, if any.
 ///