Add color-coded backgrounds to DecisionCard

Per dashboard.md spec requirements:
- RED background and text for REST decisions
- YELLOW background and text for GENTLE/LIGHT/REDUCED decisions
- GREEN background and text for TRAIN decisions

Added 8 new tests for color-coded backgrounds (19 total).
Updated IMPLEMENTATION_PLAN.md to mark spec gap as complete.

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

src/components/dashboard/decision-card.tsx

@@ -1,17 +1,43 @@
 // ABOUTME: Dashboard card displaying today's training decision.
-// ABOUTME: Shows decision status, icon, and reason prominently.
+// ABOUTME: Shows decision status, icon, and reason with color-coded backgrounds.
 import type { Decision } from "@/types";
 
 interface DecisionCardProps {
   decision: Decision;
 }
 
+function getStatusColors(status: Decision["status"]): {
+  background: string;
+  text: string;
+} {
+  switch (status) {
+    case "REST":
+      return { background: "bg-red-100 border-red-300", text: "text-red-700" };
+    case "GENTLE":
+    case "LIGHT":
+    case "REDUCED":
+      return {
+        background: "bg-yellow-100 border-yellow-300",
+        text: "text-yellow-700",
+      };
+    case "TRAIN":
+      return {
+        background: "bg-green-100 border-green-300",
+        text: "text-green-700",
+      };
+    default:
+      return { background: "border", text: "text-gray-600" };
+  }
+}
+
 export function DecisionCard({ decision }: DecisionCardProps) {
+  const colors = getStatusColors(decision.status);
+
   return (
-    <div className="rounded-lg border p-6">
+    <div className={`rounded-lg p-6 ${colors.background}`}>
       <div className="text-4xl mb-2">{decision.icon}</div>
       <h2 className="text-2xl font-bold">{decision.status}</h2>
-      <p className="text-gray-600">{decision.reason}</p>
+      <p className={colors.text}>{decision.reason}</p>
     </div>
   );
 }