fix(savings): refine hero spacing, goal/account card padding, sparkline negative range

- Sparkline (`savings-sparkline` controller): dropped the `Math.max(0,
  yMin)` clamp on the y-axis domain so negative balances (or any series
  that dips into negative territory) render fully instead of being
  cropped off the canvas.
- Hero card: padding `p-6` → `p-7`, column ratio
  `[minmax(0,1fr)_minmax(0,1.6fr)]` so the chart breathes, min height
  bumped to 220px, sparkline container `h-full min-h-[200px]` so it
  fills the card vertically. Stats row now sits at the bottom of the
  text column via `mt-auto pt-6`; labels promoted to `text-xs`, values
  to `text-lg`.
- Section vertical rhythm: outer `space-y-6` → `space-y-8`.
- Goal card: padding `p-[18px]` → `p-6`. Internal gap from header row
  to amount line `mt-3.5` → `mt-5`. Account-row gap `mt-3` → `mt-4`.
- Account card: padding `p-5` → `p-6`.
- Status pill "Behind" dot: `bg-yellow-500` → `bg-yellow-600` for a
  warmer/ambery tone matching the Claude Design reference.
- Goal card donut "behind" stroke: `var(--color-yellow-500)` →
  `var(--color-yellow-600)` to match the pill.

app/components/savings/account_card_component.html.erb

@@ -1,4 +1,4 @@
-<div class="bg-container rounded-xl shadow-border-xs p-5">
+<div class="bg-container rounded-xl shadow-border-xs p-6">
   <div class="flex items-center gap-3 mb-3">
     <span class="inline-flex items-center justify-center w-9 h-9 rounded-full text-inverse text-sm font-semibold"
           style="background-color: var(--color-blue-500);">

app/components/savings/goal_card_component.html.erb

@@ -1,5 +1,5 @@
 <%= link_to savings_goal_path(goal),
-            class: "group block bg-container rounded-xl shadow-border-xs hover:bg-surface-hover transition-colors p-[18px]",
+            class: "group block bg-container rounded-xl shadow-border-xs hover:bg-surface-hover transition-colors p-6",
             data: {
               savings_goals_filter_target: "card",
               goal_name: goal.name,
@@ -40,14 +40,14 @@
     </div>
   </div>
 
-  <div class="mt-3.5">
+  <div class="mt-5">
     <div class="flex items-baseline gap-1.5">
       <span class="text-lg font-medium text-primary tabular-nums privacy-sensitive"><%= goal.current_balance_money.format %></span>
       <span class="text-xs text-subdued tabular-nums">/ <%= goal.target_amount_money.format %></span>
     </div>
   </div>
 
-  <div class="mt-3 flex items-center justify-between">
+  <div class="mt-4 flex items-center justify-between">
     <div class="flex items-center gap-2">
       <%= render Savings::AccountStackComponent.new(accounts: linked_accounts) %>
       <span class="text-[11px] text-subdued"><%= linked_accounts_count_label %></span>

app/components/savings/goal_card_component.rb

@@ -15,7 +15,7 @@ class Savings::GoalCardComponent < ApplicationComponent
   def ring_color
     case goal.status
     when :reached then "var(--color-green-600)"
-    when :behind then "var(--color-yellow-500)"
+    when :behind then "var(--color-yellow-600)"
     when :on_track then "var(--text-primary)"
     else "var(--text-subdued)"
     end

app/components/savings/status_pill_component.rb

@@ -1,7 +1,7 @@
 class Savings::StatusPillComponent < ApplicationComponent
   VARIANTS = {
     on_track: { classes: "bg-green-500/10 text-success", dot: "bg-green-600" },
-    behind: { classes: "bg-yellow-500/10 text-warning", dot: "bg-yellow-500" },
+    behind: { classes: "bg-yellow-500/10 text-warning", dot: "bg-yellow-600" },
     reached: { classes: "bg-green-500/10 text-success", dot: "bg-green-600" },
     no_target_date: { classes: "bg-surface-inset text-secondary", dot: "bg-gray-400" }
   }.freeze