designmd-forge 1.2.0

package/dist/data/designs/ios-garmin-connect-android.md

@@ -0,0 +1,531 @@
+# Garmin Connect (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Garmin Connect's data-cockpit visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s for the activity-detail screen (route map, stat grid, Training Status ring, Body Battery gauge, HR zones), navigation, motion, and haptics.
+
+> Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral. This file keeps the *visual* identity (true-black canvas, single Garmin-Blue accent, condensed tabular numerals, glowing GPS route, fixed-meaning data-viz colors) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `Canvas` for the route + rings, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for any tile imagery. Garmin Connect is **dark-first**; a light scheme is provided but the dark palette is the default. **Do not** enable Material You dynamic color — Garmin's identity is the fixed true-black + single blue, and data-viz colors are semantic.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/GCColors.kt
+import androidx.compose.ui.graphics.Color
+
+object GCColors {
+    // Canvas & Surfaces (Dark — primary)
+    val Canvas   = Color(0xFF000000)   // true black — the Garmin signature
+    val Surface1 = Color(0xFF121417)
+    val Surface2 = Color(0xFF1B1E22)
+    val Surface3 = Color(0xFF23272C)
+    val Divider  = Color(0xFF2A2E33)
+
+    // Canvas & Surfaces (Light — optional)
+    val LightCanvas  = Color(0xFFFFFFFF)
+    val LightSurface = Color(0xFFF4F5F7)
+    val LightDivider = Color(0xFFE2E5E9)
+
+    // Text
+    val TextPrimary     = Color(0xFFFFFFFF)
+    val TextSecondary   = Color(0xFFA6ACB3)
+    val TextTertiary    = Color(0xFF6B7178)
+    val LightTextPrimary = Color(0xFF1A1D21)
+
+    // Brand (single accent)
+    val Blue        = Color(0xFF007CC3)   // fills (buttons, route)
+    val BlueOnDark  = Color(0xFF2A9FD6)   // text / active on black (AA)
+    val BluePressed = Color(0xFF00689F)
+
+    // Functional / data-viz (fixed meaning — theme-invariant)
+    val BodyBattery   = Color(0xFF2EA8E0)
+    val BodyBatteryLo = Color(0xFF1E6FA8)
+    val Intensity     = Color(0xFF00A8A8)
+    val Steps         = Color(0xFFC8B560)
+    val Zone1 = Color(0xFF9AA0A6)
+    val Zone2 = Color(0xFF4CAF50)
+    val Zone3 = Color(0xFFC8B560)
+    val Zone4 = Color(0xFFF0A030)
+    val Zone5 = Color(0xFFE5402A)
+
+    // Semantic
+    val Success = Color(0xFF4CAF50)
+    val Warning = Color(0xFFF0A030)
+    val Error   = Color(0xFFE5402A)
+    val Track   = Color(0xFF23272C)
+}
+```
+
+Wire it into both schemes. Garmin is dark-first; the dark scheme is the default.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+
+private val GCDark = darkColorScheme(
+    primary        = GCColors.Blue,
+    onPrimary      = GCColors.TextPrimary,
+    background     = GCColors.Canvas,
+    onBackground   = GCColors.TextPrimary,
+    surface        = GCColors.Surface1,
+    onSurface      = GCColors.TextPrimary,
+    surfaceVariant = GCColors.Surface2,
+    outline        = GCColors.Divider,
+    error          = GCColors.Error,
+)
+
+private val GCLight = lightColorScheme(
+    primary        = GCColors.Blue,
+    onPrimary      = GCColors.TextPrimary,
+    background     = GCColors.LightCanvas,
+    onBackground   = GCColors.LightTextPrimary,
+    surface        = GCColors.LightSurface,
+    onSurface      = GCColors.LightTextPrimary,
+    surfaceVariant = Color(0xFFEDEFF2),
+    outline        = GCColors.LightDivider,
+    error          = GCColors.Error,
+)
+
+@Composable
+fun GCTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) GCDark else GCLight,   // dark is the intended default
+    typography  = GCTypography,
+    content     = content,
+)
+```
+
+## 2. Typography
+
+Garmin pairs **Roboto** (UI/body/labels) with **Roboto Condensed** (every meaningful number, tabular). Drop the TTFs in `res/font/`. Both Apache 2.0. The value is the visual hero; labels are small uppercase whispers.
+
+```kotlin
+// ui/theme/GCType.kt
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextGeometricTransform
+import androidx.compose.ui.unit.sp
+
+val Roboto = FontFamily(
+    Font(R.font.roboto_regular, FontWeight.Normal),
+    Font(R.font.roboto_medium,  FontWeight.Medium),
+    Font(R.font.roboto_bold,    FontWeight.Bold),
+    Font(R.font.roboto_black,   FontWeight.Black),
+)
+val RobotoCondensed = FontFamily(
+    Font(R.font.roboto_condensed_regular, FontWeight.Normal),
+    Font(R.font.roboto_condensed_bold,    FontWeight.Bold),
+)
+
+// Helper: every metric must use tabular figures
+import androidx.compose.ui.text.font.FontFeatureSetting
+private val TNUM = "tnum"
+
+object GCText {
+    // Roboto — UI / body / labels
+    val ScreenTitle = TextStyle(Roboto, fontWeight = FontWeight.Black,  fontSize = 32.sp, lineHeight = 37.sp, letterSpacing = (-0.6).sp)
+    val Section     = TextStyle(Roboto, fontWeight = FontWeight.Bold,   fontSize = 20.sp, lineHeight = 24.sp, letterSpacing = (-0.1).sp)
+    val Body        = TextStyle(Roboto, fontWeight = FontWeight.Medium, fontSize = 16.sp, lineHeight = 24.sp)
+    val BodyRegular = TextStyle(Roboto, fontWeight = FontWeight.Normal, fontSize = 16.sp, lineHeight = 24.sp)
+    val Meta        = TextStyle(Roboto, fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 20.sp)
+    val Eyebrow     = TextStyle(Roboto, fontWeight = FontWeight.Bold,   fontSize = 12.sp, lineHeight = 15.sp, letterSpacing = 0.5.sp)
+    val Unit        = TextStyle(Roboto, fontWeight = FontWeight.Medium, fontSize = 11.sp, lineHeight = 13.sp)
+    val Caption     = TextStyle(Roboto, fontWeight = FontWeight.Medium, fontSize = 11.sp, lineHeight = 14.sp)
+    val Button      = TextStyle(Roboto, fontWeight = FontWeight.Bold,   fontSize = 15.sp, lineHeight = 15.sp, letterSpacing = 0.5.sp)
+    val Tab         = TextStyle(Roboto, fontWeight = FontWeight.Medium, fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
+    val Axis        = TextStyle(Roboto, fontWeight = FontWeight.Medium, fontSize = 10.sp, lineHeight = 10.sp)
+
+    // Roboto Condensed — metrics (tabular via fontFeatureSettings)
+    val HeroMetric   = TextStyle(RobotoCondensed, fontWeight = FontWeight.Bold, fontSize = 40.sp, lineHeight = 42.sp, letterSpacing = (-0.5).sp, fontFeatureSettings = TNUM)
+    val ActivityName = TextStyle(RobotoCondensed, fontWeight = FontWeight.Bold, fontSize = 26.sp, lineHeight = 29.sp, letterSpacing = (-0.2).sp, fontFeatureSettings = TNUM)
+    val StatValue    = TextStyle(RobotoCondensed, fontWeight = FontWeight.Bold, fontSize = 22.sp, lineHeight = 24.sp, fontFeatureSettings = TNUM)
+    val StatValueLg  = TextStyle(RobotoCondensed, fontWeight = FontWeight.Bold, fontSize = 28.sp, lineHeight = 30.sp, fontFeatureSettings = TNUM)
+}
+
+// Map onto Material 3 slots
+val GCTypography = Typography(
+    headlineLarge = GCText.ScreenTitle,
+    titleLarge    = GCText.Section,
+    bodyLarge     = GCText.Body,
+    labelSmall    = GCText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Activity Detail Header
+
+```kotlin
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ActivityHeader(type: String, name: String, whenText: String) {
+    Column(Modifier.fillMaxWidth().padding(horizontal = 16.dp).padding(bottom = 16.dp)) {
+        Text(type.uppercase(), style = GCText.Eyebrow, color = GCColors.BlueOnDark)
+        Text(name, style = GCText.ActivityName, color = GCColors.TextPrimary, modifier = Modifier.padding(top = 4.dp))
+        Text(whenText, style = GCText.Meta, color = GCColors.TextSecondary, modifier = Modifier.padding(top = 4.dp))
+    }
+}
+```
+
+### GPS Route Map (Canvas)
+
+```kotlin
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.*
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.foundation.shape.RoundedCornerShape
+
+@Composable
+fun RouteMap(points: List<Offset>, modifier: Modifier = Modifier) {
+    val draw = remember { Animatable(0f) }
+    LaunchedEffect(Unit) { draw.animateTo(1f, tween(700, easing = LinearOutSlowInEasing)) }
+
+    Box(
+        modifier
+            .fillMaxWidth()
+            .height(168.dp)
+            .padding(horizontal = 16.dp)
+            .clip(RoundedCornerShape(12.dp))
+            .background(Brush.linearGradient(listOf(Color(0xFF1A2329), Color(0xFF0C1216)))),
+    ) {
+        Canvas(Modifier.fillMaxSize()) {
+            if (points.size < 2) return@Canvas
+            val pts = points.map { Offset(it.x * size.width, it.y * size.height) }
+            val path = Path().apply {
+                moveTo(pts.first().x, pts.first().y)
+                pts.drop(1).forEach { lineTo(it.x, it.y) }
+            }
+            val measure = PathMeasure().apply { setPath(path, false) }
+            val partial = Path()
+            measure.getSegment(0f, measure.length * draw.value, partial, true)
+            // soft glow
+            drawPath(partial, GCColors.Blue.copy(alpha = 0.5f),
+                style = Stroke(width = 10.dp.toPx(), cap = StrokeCap.Round, join = StrokeJoin.Round))
+            drawPath(partial, GCColors.Blue,
+                style = Stroke(width = 4.dp.toPx(), cap = StrokeCap.Round, join = StrokeJoin.Round))
+            // pins
+            drawCircle(Color.White, 9.dp.toPx(), pts.first())
+            drawCircle(GCColors.Success, 7.dp.toPx(), pts.first())
+            drawCircle(Color.White, 9.dp.toPx(), pts.last())
+            drawCircle(GCColors.Error, 7.dp.toPx(), pts.last())
+        }
+    }
+}
+```
+
+### Stat Grid
+
+```kotlin
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+
+data class Stat(val label: String, val value: String, val unit: String = "")
+
+@Composable
+fun StatGrid(stats: List<Stat>) {
+    Box(
+        Modifier
+            .padding(horizontal = 16.dp)
+            .clip(RoundedCornerShape(12.dp))
+            .background(GCColors.Divider),
+    ) {
+        LazyVerticalGrid(
+            columns = GridCells.Fixed(3),
+            userScrollEnabled = false,
+            horizontalArrangement = Arrangement.spacedBy(1.dp),
+            verticalArrangement   = Arrangement.spacedBy(1.dp),
+            modifier = Modifier.heightIn(max = 1000.dp),
+        ) {
+            items(stats) { s ->
+                Column(
+                    Modifier
+                        .fillMaxWidth()
+                        .defaultMinSize(minHeight = 64.dp)
+                        .background(GCColors.Surface1)
+                        .padding(vertical = 14.dp, horizontal = 12.dp),
+                ) {
+                    Text(s.label.uppercase(), style = GCText.Eyebrow, color = GCColors.TextSecondary)
+                    Row(verticalAlignment = Alignment.Bottom) {
+                        Text(s.value, style = GCText.StatValue, color = GCColors.TextPrimary)
+                        if (s.unit.isNotEmpty())
+                            Text(" ${s.unit}", style = GCText.Unit, color = GCColors.TextTertiary)
+                    }
+                }
+            }
+        }
+    }
+}
+```
+
+### Training Status Ring + Body Battery Gauge
+
+```kotlin
+@Composable
+fun TrainingStatusCard(progress: Float, status: String, detail: String) {
+    val p = remember { Animatable(0f) }
+    LaunchedEffect(Unit) {
+        p.animateTo(progress, spring(dampingRatio = 0.85f, stiffness = Spring.StiffnessMediumLow))
+    }
+    Row(
+        Modifier
+            .padding(horizontal = 16.dp)
+            .clip(RoundedCornerShape(12.dp))
+            .background(GCColors.Surface1)
+            .then(borderModifier())
+            .padding(16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Canvas(Modifier.size(52.dp)) {
+            val sw = 6.dp.toPx()
+            drawArc(GCColors.Track, 0f, 360f, false, style = Stroke(sw))
+            drawArc(GCColors.Blue, -90f, 360f * p.value, false,
+                style = Stroke(sw, cap = StrokeCap.Round))
+        }
+        Column(Modifier.padding(start = 14.dp)) {
+            Text("TRAINING STATUS", style = GCText.Eyebrow, color = GCColors.TextSecondary)
+            Text(status, style = GCText.Body.copy(fontWeight = FontWeight.Bold), color = GCColors.BlueOnDark)
+            Text(detail, style = GCText.Unit, color = GCColors.TextSecondary)
+        }
+    }
+}
+
+@Composable
+fun BodyBatteryCard(value: Int) {
+    val w = remember { Animatable(0f) }
+    LaunchedEffect(Unit) { w.animateTo(value / 100f, tween(600, easing = LinearOutSlowInEasing)) }
+    Column(
+        Modifier
+            .padding(horizontal = 16.dp)
+            .clip(RoundedCornerShape(12.dp))
+            .background(GCColors.Surface1)
+            .then(borderModifier())
+            .padding(16.dp),
+    ) {
+        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.Bottom) {
+            Text("Body Battery", style = GCText.Body.copy(fontSize = 13.sp), color = GCColors.TextPrimary)
+            Text("$value", style = GCText.StatValue, color = GCColors.BodyBattery)
+        }
+        Box(
+            Modifier
+                .padding(top = 12.dp)
+                .fillMaxWidth()
+                .height(8.dp)
+                .clip(RoundedCornerShape(4.dp))
+                .background(GCColors.Track),
+        ) {
+            Box(
+                Modifier
+                    .fillMaxWidth(w.value)
+                    .fillMaxHeight()
+                    .clip(RoundedCornerShape(4.dp))
+                    .background(Brush.horizontalGradient(listOf(GCColors.BodyBatteryLo, GCColors.BodyBattery))),
+            )
+        }
+        Row(Modifier.fillMaxWidth().padding(top = 6.dp), horizontalArrangement = Arrangement.SpaceBetween) {
+            Text("0", style = GCText.Axis, color = GCColors.TextTertiary)
+            Text("Charged", style = GCText.Axis, color = GCColors.TextTertiary)
+            Text("100", style = GCText.Axis, color = GCColors.TextTertiary)
+        }
+    }
+}
+
+import androidx.compose.foundation.border
+@Composable
+private fun borderModifier(): Modifier = Modifier.border(1.dp, GCColors.Divider, RoundedCornerShape(12.dp))
+```
+
+### Heart Rate Zones
+
+```kotlin
+data class HRZone(val name: String, val frac: Float, val dur: String, val color: Color)
+
+@Composable
+fun HRZonesCard(
+    zones: List<HRZone> = listOf(
+        HRZone("Z2", 0.26f, "9:48",  GCColors.Zone2),
+        HRZone("Z3", 0.54f, "22:30", GCColors.Zone3),
+        HRZone("Z4", 0.38f, "8:12",  GCColors.Zone4),
+        HRZone("Z5", 0.10f, "1:48",  GCColors.Zone5),
+    ),
+) {
+    Column(
+        Modifier
+            .padding(horizontal = 16.dp)
+            .clip(RoundedCornerShape(12.dp))
+            .background(GCColors.Surface1)
+            .then(borderModifier())
+            .padding(16.dp),
+    ) {
+        Text("Heart Rate Zones", style = GCText.Body.copy(fontSize = 13.sp),
+            color = GCColors.TextPrimary, modifier = Modifier.padding(bottom = 12.dp))
+        zones.forEach { z ->
+            Row(verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier.padding(bottom = 8.dp)) {
+                Text(z.name, style = GCText.Caption, color = GCColors.TextSecondary,
+                    modifier = Modifier.width(30.dp))
+                Box(
+                    Modifier
+                        .weight(1f)
+                        .height(10.dp)
+                        .clip(RoundedCornerShape(3.dp))
+                        .background(GCColors.Track),
+                ) {
+                    Box(
+                        Modifier
+                            .fillMaxWidth(z.frac)
+                            .fillMaxHeight()
+                            .clip(RoundedCornerShape(3.dp))
+                            .background(z.color),
+                    )
+                }
+                Text(z.dur, style = GCText.Caption, color = GCColors.TextSecondary,
+                    modifier = Modifier.width(40.dp), textAlign = androidx.compose.ui.text.style.TextAlign.End)
+            }
+        }
+    }
+}
+```
+
+## 4. Navigation
+
+Garmin has minimal chrome: a 4-tab bottom strip and a back-style top app bar. No tint pill — active is just the brightened Garmin Blue.
+
+```kotlin
+import androidx.compose.material3.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+
+@Composable
+fun GCBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = GCColors.Surface1, tonalElevation = 0.dp) {
+        val items = listOf(
+            "My Day"     to Icons.Filled.RadioButtonChecked,
+            "Challenges" to Icons.Filled.TrendingUp,
+            "Calendar"   to Icons.Filled.CalendarMonth,
+            "More"       to Icons.Filled.AccountCircle,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(22.dp)) },
+                label = { Text(label, style = GCText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = GCColors.BlueOnDark,
+                    selectedTextColor   = GCColors.BlueOnDark,
+                    unselectedIconColor = GCColors.TextTertiary,
+                    unselectedTextColor = GCColors.TextTertiary,
+                    indicatorColor      = Color.Transparent,   // no Material pill — Garmin has none
+                ),
+            )
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun GCActivityTopBar(parent: String, onBack: () -> Unit) {
+    TopAppBar(
+        title = {},
+        navigationIcon = {
+            Row(verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier.padding(start = 8.dp)) {
+                Icon(Icons.Filled.ChevronLeft, contentDescription = "Back",
+                    tint = GCColors.TextPrimary, modifier = Modifier.size(18.dp))
+                Text(parent, style = GCText.Body, color = GCColors.TextPrimary)
+            }
+        },
+        actions = {
+            Icon(Icons.Filled.Settings, "Settings", tint = GCColors.TextPrimary,
+                modifier = Modifier.size(19.dp).padding(end = 16.dp))
+            Icon(Icons.Filled.IosShare, "Share", tint = GCColors.TextPrimary,
+                modifier = Modifier.size(19.dp).padding(end = 16.dp))
+        },
+        colors = TopAppBarDefaults.topAppBarColors(containerColor = GCColors.Canvas),
+    )
+}
+```
+
+## 5. Motion
+
+Garmin motion is purposeful — the route draws on, rings/bars fill from 0, stat cells stagger-rise; quiet otherwise. 150–700ms ease-out.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Route line draws on | `PathMeasure.getSegment` + `Animatable` 0→1 `tween(700, LinearOutSlowInEasing)` |
+| Ring / gauge fill | `Animatable` 0→progress `spring(dampingRatio = 0.85f)` (slight overshoot) |
+| Bar fill | `Animatable` 0→frac `tween(600, LinearOutSlowInEasing)` |
+| Stat cells reveal | `AnimatedVisibility` per cell `fadeIn() + slideInVertically { 6.dp }`, 30ms stagger |
+| Card expand (Splits/HR) | chevron `animateFloatAsState` 0→90° `tween(150)`; body `expandVertically(tween(220))` |
+| Tab switch | `Crossfade(tween(150))`; glyph color tween 120ms |
+| Pull to sync | `PullToRefreshContainer`; success → `Snackbar` "Synced" auto-dismiss |
+| Live value tick | `animateIntAsState` with tabular figures so width is stable |
+
+```kotlin
+// Canonical Garmin motion — ring filling from zero
+val p = remember { Animatable(0f) }
+LaunchedEffect(target) {
+    p.animateTo(target, spring(dampingRatio = 0.85f, stiffness = Spring.StiffnessMediumLow))
+}
+```
+
+Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` on goal-met and tab change (soft impact analog); a `View.performHapticFeedback(HapticFeedbackConstants.CLOCK_TICK)` on segmented-range change; success haptic on sync complete. Auto-sync that succeeds silently shows only a "Synced" snackbar.
+
+## 6. Icons
+
+Garmin ships custom activity glyphs; the closest first-party set is `androidx.compose.material:material-icons-extended`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| My Day (tab) | `circle.circle.fill` | `Icons.Filled.RadioButtonChecked` |
+| Challenges (tab) | `chart.line.uptrend.xyaxis` | `Icons.Filled.TrendingUp` |
+| Calendar (tab) | `calendar` | `Icons.Filled.CalendarMonth` |
+| More (tab) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
+| Back | `chevron.left` | `Icons.Filled.ChevronLeft` |
+| Settings | `gearshape` | `Icons.Filled.Settings` |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| Expand card | `chevron.right` / `chevron.down` | `Icons.Filled.ChevronRight` (rotate 90°) |
+| Heart rate | `heart.fill` | `Icons.Filled.Favorite` |
+| Run | `figure.run` | `Icons.Filled.DirectionsRun` |
+| Cycling | `figure.outdoor.cycle` | `Icons.Filled.DirectionsBike` |
+| Elevation | `mountain.2.fill` | `Icons.Filled.Terrain` |
+| Body Battery | `bolt.fill` | `Icons.Filled.Bolt` |
+| Steps | `shoeprints.fill` | `Icons.Filled.DirectionsWalk` |
+| Map / route | `map` | `Icons.Filled.Map` |
+| Sync | `arrow.triangle.2.circlepath` | `Icons.Filled.Sync` |
+| Goal met | `checkmark.circle.fill` | `Icons.Filled.CheckCircle` |
+
+## 7. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; `Canvas`/`PathMeasure` + modern motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; true-black canvas wants light-content system bars in dark mode. The bottom button respects the navigation bar inset via `Modifier.navigationBarsPadding()`; the activity top bar respects the camera cutout.
+- **Tabular numerals**: every metric `TextStyle` sets `fontFeatureSettings = "tnum"` so split tables and live values don't shift. Do **not** substitute a proportional font for Roboto Condensed numbers.
+- **Font scaling**: `sp` honors the user's font scale — keep it on screen titles, section headings, body, meta. Pin layout-sensitive text (stat values, units, 10sp tab labels, chart axis, eyebrow labels) by deriving from `dp` or `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
+- **TalkBack**: merge label + value + unit into one node via `Modifier.semantics(mergeDescendants = true) { contentDescription = "Average pace 5 minutes 2 seconds per kilometre" }`; HR-zone rows announced "Zone 4 threshold, 8 minutes 12 seconds"; expose the route `Canvas` with `contentDescription = "Route, 8.42 kilometres, Cedar Loop Trail"`.
+- **Color is never the only signal**: HR-zone bars keep a Z2…Z5 text label; goal-met pairs `#4CAF50` with a check icon.
+- **Touch targets**: Material guidance is 48.dp — give the tab icons, card-expand chevrons, and stat cells ≥ 48.dp hit areas (stat cells are full-cell tappable, ≥ 64.dp tall); primary buttons ≥ 48.dp.
+- **Contrast**: `#FFFFFF` on `#000000` is maximal; `#2A9FD6` on `#000000` passes WCAG AA — never render small text in raw `#007CC3` on black.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, skip the route draw-on (draw full path), set rings/bars to final value via a `Crossfade`, and drop the stat-cell stagger.
+- **Dark mode**: dark is the default; surfaces step `#000000 → #121417 → #1B1E22`; floating layers (sheets/menus) get `#1B1E22` + a soft `0.6` black shadow. **Do not** enable Material You `dynamicColorScheme()` — Garmin's true-black + single-blue identity and semantic data-viz colors must hold regardless of wallpaper.