feat: add profile rank badges and guide

tasks/plan.md

@@ -0,0 +1,24 @@
+# Rank guide and badge art
+
+## Outcome
+
+Replace the profile rank help dialog with a standalone, responsive visual guide at `/rank-guide`. The profile help control opens the guide in a new tab. Show every current overall level and activity badge milestone with its transparent PNG, label, and earning requirement. Profile badge collections continue to show earned badges only.
+
+## Design direction
+
+- Keep the association's teal surface and border tokens, with cobalt, cyan, and gold drawn from the approved glossy medal artwork.
+- Lead with a visual five-level progression strip, then show four activity ladders as image-led rows.
+- Keep scoring and reversal rules in short supporting blocks; no text is embedded in badge images.
+- Make larger overall-level art distinct from activity badges, and keep the layout RTL and responsive.
+
+## Implementation tasks
+
+1. Add an explicit catalog mapping API badge IDs to the 18 generated PNG assets, labels, milestones, and concise explanations.
+2. Replace the profile help dialog with an accessible new-tab link to `/rank-guide` and show the user's current overall badge larger in the rank card.
+3. Render earned badge artwork in signed-in and public profiles without exposing unearned badges.
+4. Build `/rank-guide` with all five overall levels, all activity milestones, scoring rules, and short guidance on reversals.
+5. Verify assets have transparency, lint affected components, and run a production build.
+
+## Backend contract
+
+The backend already returns current levels, points per activity, activity badge thresholds, and earned badge IDs. This page uses the existing contract and current rules; it does not require a migration or a new scoring API. Keep frontend asset IDs aligned with the backend's current IDs (`post-*`, singular `comment-*`, `attendance-*`, `likes-*`, and `level-*`).