feat(FN-4719): complete Step 3-4 — goals view lazy wiring and changeset

Fusion-Task-Id: FN-4719
Fusion-Task-Lineage: 53fb716e-2d3e-40c7-ad7a-e9f315f33c34

packages/dashboard/app/components/GoalsView.css

@@ -0,0 +1,104 @@
+.goals-view {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+  padding: var(--space-lg);
+}
+
+.goals-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.goals-title {
+  margin: 0;
+  color: var(--text);
+  font-size: calc(var(--space-lg) + var(--space-xs));
+}
+
+.goals-count {
+  margin: 0;
+  color: var(--text-muted);
+}
+
+.goals-add-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.goals-add-button:focus-visible,
+.goals-card:focus-visible,
+.goals-activate-button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-strong);
+}
+
+.goals-warning {
+  margin: 0;
+  padding: var(--space-md);
+  border-radius: var(--radius-md);
+  border: calc(var(--space-xs) / 4) solid var(--color-warning);
+  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
+  color: var(--color-warning);
+}
+
+.goals-error {
+  margin: 0;
+}
+
+.goals-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.goals-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+}
+
+.goals-card-main {
+  min-width: 0;
+}
+
+.goals-card-title {
+  margin: 0;
+  color: var(--text);
+  font-size: calc(var(--space-md) + var(--space-xs));
+}
+
+.goals-card-status {
+  margin: var(--space-xs) 0 0;
+  color: var(--text-muted);
+}
+
+.goals-activate-button {
+  min-width: calc(var(--space-2xl) * 2);
+}
+
+.goals-empty {
+  color: var(--text-muted);
+}
+
+@media (max-width: 768px) {
+  .goals-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .goals-add-button,
+  .goals-card,
+  .goals-activate-button {
+    min-height: calc(var(--space-xl) + var(--space-md));
+  }
+
+  .goals-card {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}