fix(savings): DS conformance pass on stepper, ring, card, status pill

- StatusPill: use functional `text-success` / `text-warning` tokens with
  matching icon colors and `px-2 py-1`, mirroring
  `app/views/budget_categories/_budget_category.html.erb:29-43`.
- ProgressRing: rework center text to match `_budget_donut.html.erb`
  (small "Saved" label, `text-3xl font-medium` headline, "of $X"
  underline). Stroke color now derives from goal.status (yellow when
  behind, blue on track, green reached, gray for no-date).
- GoalCard bar: track height + transition match budget category bar
  (`h-1.5`, `transition-all duration-500`, `inline-size`).
- Index/show layouts: render page header inline (`<h1>` + actions). The
  default application layout doesn't yield `:page_actions`, so the
  CTA + kebab menu wouldn't appear when emitted via `content_for`.
- Stepper review summary: target the actual form inputs by `name`
  rather than relying on the `data-target` Stimulus attribute, since
  `money_field` puts the attribute on the wrapper. Step 1 validation
  scoped to the step 1 panel.
- Demo generator: filter Depository accounts via
  `where(accountable_type: "Depository")` — Rails delegated_type
  generates the `depository?` predicate, not a `.depository` scope.

app/javascript/controllers/savings_goal_stepper_controller.js

@@ -52,10 +52,13 @@ export default class extends Controller {
   }
 
   validateStep1() {
+    const requiredInputs = this.step1PanelTarget.querySelectorAll(
+      'input[name="savings_goal[name]"], input[name="savings_goal[target_amount]"]'
+    );
     let ok = true;
-    this.step1FieldTargets.forEach((field) => {
-      if (!field.checkValidity()) {
-        field.reportValidity();
+    requiredInputs.forEach((input) => {
+      if (typeof input.checkValidity === "function" && !input.checkValidity()) {
+        input.reportValidity();
         ok = false;
       }
     });
@@ -95,11 +98,13 @@ export default class extends Controller {
   updateReview() {
     if (!this.hasReviewPanelTarget) return;
 
-    if (this.hasReviewNameTarget && this.hasNameFieldTarget) {
-      this.reviewNameTarget.textContent = this.nameFieldTarget.value || "—";
+    if (this.hasReviewNameTarget) {
+      const nameInput = this.element.querySelector('input[name="savings_goal[name]"]');
+      this.reviewNameTarget.textContent = nameInput?.value || "—";
     }
-    if (this.hasReviewAmountTarget && this.hasTargetAmountFieldTarget) {
-      this.reviewAmountTarget.textContent = this.targetAmountFieldTarget.value || "—";
+    if (this.hasReviewAmountTarget) {
+      const amountInput = this.element.querySelector('input[name="savings_goal[target_amount]"]');
+      this.reviewAmountTarget.textContent = amountInput?.value || "—";
     }
     if (this.hasReviewDateTarget) {
       const dateInput = this.element.querySelector('input[type="date"][name="savings_goal[target_date]"]');