feat(ui): add sport backgrounds to share cards, achievement filtering, and wizard validation

- Add ShareCardSportBackground with floating sport icons for share cards
- Share cards now show sport-specific backgrounds (single or multiple sports)
- Achievement collection share respects sport filter selection
- Add ability to share individual achievements from detail sheet
- Trip wizard ReviewStep highlights missing required fields in red
- Add FieldValidation model to TripWizardViewModel

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

SportsTime/Export/Sharing/AchievementCardGenerator.swift

@@ -38,6 +38,8 @@ struct AchievementSpotlightContent: ShareableContent {
 struct AchievementCollectionContent: ShareableContent {
     let achievements: [AchievementProgress]
     let year: Int
+    var sports: Set<Sport> = []  // Sports for background icons
+    var filterSport: Sport? = nil  // The sport filter applied (for header title)
 
     var cardType: ShareCardType { .achievementCollection }
 
@@ -46,6 +48,8 @@ struct AchievementCollectionContent: ShareableContent {
         let cardView = AchievementCollectionView(
             achievements: achievements,
             year: year,
+            sports: sports,
+            filterSport: filterSport,
             theme: theme
         )
 
@@ -120,9 +124,16 @@ private struct AchievementSpotlightView: View {
     let achievement: AchievementProgress
     let theme: ShareTheme
 
+    private var sports: Set<Sport> {
+        if let sport = achievement.definition.sport {
+            return [sport]
+        }
+        return []
+    }
+
     var body: some View {
         ZStack {
-            ShareCardBackground(theme: theme)
+            ShareCardBackground(theme: theme, sports: sports)
 
             VStack(spacing: 50) {
                 Spacer()
@@ -176,6 +187,8 @@ private struct AchievementSpotlightView: View {
 private struct AchievementCollectionView: View {
     let achievements: [AchievementProgress]
     let year: Int
+    let sports: Set<Sport>
+    let filterSport: Sport?
     let theme: ShareTheme
 
     private let columns = [
@@ -184,13 +197,20 @@ private struct AchievementCollectionView: View {
         GridItem(.flexible(), spacing: 30)
     ]
 
+    private var headerTitle: String {
+        if let sport = filterSport {
+            return "My \(String(year)) \(sport.rawValue) Achievements"
+        }
+        return "My \(String(year)) Achievements"
+    }
+
     var body: some View {
         ZStack {
-            ShareCardBackground(theme: theme)
+            ShareCardBackground(theme: theme, sports: sports)
 
             VStack(spacing: 40) {
                 // Header
-                Text("My \(String(year)) Achievements")
+                Text(headerTitle)
                     .font(.system(size: 48, weight: .bold, design: .rounded))
                     .foregroundStyle(theme.textColor)
 
@@ -241,9 +261,16 @@ private struct AchievementMilestoneView: View {
 
     private let goldColor = Color(hex: "FFD700")
 
+    private var sports: Set<Sport> {
+        if let sport = achievement.definition.sport {
+            return [sport]
+        }
+        return []
+    }
+
     var body: some View {
         ZStack {
-            ShareCardBackground(theme: theme)
+            ShareCardBackground(theme: theme, sports: sports)
 
             // Confetti burst pattern
             ConfettiBurst()
@@ -304,9 +331,16 @@ private struct AchievementContextView: View {
     let mapSnapshot: UIImage?
     let theme: ShareTheme
 
+    private var sports: Set<Sport> {
+        if let sport = achievement.definition.sport {
+            return [sport]
+        }
+        return []
+    }
+
     var body: some View {
         ZStack {
-            ShareCardBackground(theme: theme)
+            ShareCardBackground(theme: theme, sports: sports)
 
             VStack(spacing: 40) {
                 // Header with badge and name

SportsTime/Export/Sharing/ProgressCardGenerator.swift

@@ -53,7 +53,7 @@ private struct ProgressCardView: View {
 
     var body: some View {
         ZStack {
-            ShareCardBackground(theme: theme)
+            ShareCardBackground(theme: theme, sports: [progress.sport])
 
             VStack(spacing: 40) {
                 ShareCardHeader(

SportsTime/Export/Sharing/ShareCardComponents.swift

@@ -13,13 +13,18 @@ import UIKit
 
 struct ShareCardBackground: View {
     let theme: ShareTheme
+    var sports: Set<Sport>? = nil
 
     var body: some View {
-        LinearGradient(
-            colors: theme.gradientColors,
-            startPoint: .top,
-            endPoint: .bottom
-        )
+        if let sports = sports, !sports.isEmpty {
+            ShareCardSportBackground(sports: sports, theme: theme)
+        } else {
+            LinearGradient(
+                colors: theme.gradientColors,
+                startPoint: .top,
+                endPoint: .bottom
+            )
+        }
     }
 }
 

SportsTime/Export/Sharing/ShareCardSportBackground.swift

@@ -0,0 +1,80 @@
+//
+//  ShareCardSportBackground.swift
+//  SportsTime
+//
+//  Sport-specific background with floating league icons for share cards.
+//
+
+import SwiftUI
+
+struct ShareCardSportBackground: View {
+    let sports: Set<Sport>
+    let theme: ShareTheme
+
+    /// Fixed positions for 12 scattered icons (x, y as percentage, rotation, scale)
+    private let iconConfigs: [(x: CGFloat, y: CGFloat, rotation: Double, scale: CGFloat)] = [
+        (0.08, 0.08, -20, 0.9),
+        (0.92, 0.05, 15, 0.85),
+        (0.15, 0.28, 25, 0.8),
+        (0.88, 0.22, -10, 0.95),
+        (0.05, 0.48, 30, 0.85),
+        (0.95, 0.45, -25, 0.9),
+        (0.12, 0.68, -15, 0.8),
+        (0.90, 0.65, 20, 0.85),
+        (0.08, 0.88, 10, 0.9),
+        (0.92, 0.85, -30, 0.8),
+        (0.50, 0.15, 5, 0.75),
+        (0.50, 0.90, -5, 0.75)
+    ]
+
+    /// Get icon name for a given index, cycling through sports
+    private func iconName(at index: Int) -> String {
+        let sportArray = Array(sports).sorted { $0.rawValue < $1.rawValue }
+        guard !sportArray.isEmpty else {
+            return "sportscourt.fill"
+        }
+        return sportArray[index % sportArray.count].iconName
+    }
+
+    var body: some View {
+        ZStack {
+            // Base gradient
+            LinearGradient(
+                colors: theme.gradientColors,
+                startPoint: .top,
+                endPoint: .bottom
+            )
+
+            // Scattered sport icons
+            GeometryReader { geo in
+                ForEach(0..<iconConfigs.count, id: \.self) { index in
+                    let config = iconConfigs[index]
+                    Image(systemName: iconName(at: index))
+                        .font(.system(size: 32 * config.scale))
+                        .foregroundStyle(theme.accentColor.opacity(0.15))
+                        .rotationEffect(.degrees(config.rotation))
+                        .position(
+                            x: geo.size.width * config.x,
+                            y: geo.size.height * config.y
+                        )
+                }
+            }
+        }
+    }
+}
+
+#Preview("Single Sport - MLB") {
+    ShareCardSportBackground(
+        sports: [.mlb],
+        theme: .sunset
+    )
+    .frame(width: 400, height: 600)
+}
+
+#Preview("Multiple Sports") {
+    ShareCardSportBackground(
+        sports: [.mlb, .nba, .nfl],
+        theme: .dark
+    )
+    .frame(width: 400, height: 600)
+}

SportsTime/Export/Sharing/TripCardGenerator.swift

@@ -60,7 +60,7 @@ private struct TripCardView: View {
 
     var body: some View {
         ZStack {
-            ShareCardBackground(theme: theme)
+            ShareCardBackground(theme: theme, sports: trip.uniqueSports)
 
             VStack(spacing: 40) {
                 ShareCardHeader(