feat: configurable map orientation (Settings > App)

Three modes selectable from Settings > App > Map orientation:
- North up: map always points north (MapLibre 'default')
- Compass: rotates with device compass heading ('heading')
- Course up: rotates to direction of travel ('course')

Default is North up. Setting persisted in AsyncStorage via ThemeContext.

src/screens/SettingsScreen.tsx

@@ -6,7 +6,7 @@ import {
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { login, logout, loadAuthState } from '../services/auth';
 import { colors, PALETTES, type PaletteKey, type FontSizeKey } from '../theme';
-import { useTheme } from '../ThemeContext';
+import { useTheme, type MapOrientation } from '../ThemeContext';
 
 type Tab = 'ui' | 'app' | 'sync';
 
@@ -93,8 +93,14 @@ function UITab() {
 
 // ─── App tab ─────────────────────────────────────────────────────────────────
 
+const MAP_ORIENTATION_OPTIONS: { key: MapOrientation; label: string; sub: string }[] = [
+  { key: 'north',   label: 'North up',   sub: 'Map always points north' },
+  { key: 'compass', label: 'Compass',    sub: 'Rotates with device heading' },
+  { key: 'course',  label: 'Course up',  sub: 'Rotates to direction of travel' },
+];
+
 function AppTab() {
-  const { accent } = useTheme();
+  const { accent, accentDim, mapOrientation, setMapOrientation } = useTheme();
   const [kmNotifications, setKmNotifications] = useState(true);
 
   useEffect(() => {
@@ -110,6 +116,24 @@ function AppTab() {
 
   return (
     <ScrollView contentContainerStyle={styles.content}>
+      <Text style={styles.sectionTitle}>Map orientation</Text>
+      {MAP_ORIENTATION_OPTIONS.map(({ key, label, sub }) => {
+        const active = mapOrientation === key;
+        return (
+          <TouchableOpacity
+            key={key}
+            style={[styles.row, active && { borderColor: accent, backgroundColor: accentDim }]}
+            onPress={() => setMapOrientation(key)}
+          >
+            <View>
+              <Text style={[styles.rowLabel, active && { color: accent }]}>{label}</Text>
+              <Text style={styles.rowSub}>{sub}</Text>
+            </View>
+            {active && <Text style={{ color: accent, fontSize: 16 }}>✓</Text>}
+          </TouchableOpacity>
+        );
+      })}
+
       <Text style={styles.sectionTitle}>Notifications</Text>
       <View style={styles.row}>
         <View>