ux(goals): polish detail page + unbreak render

- Fix render-blocker: Money#symbol doesn't exist (use #currency.symbol).
- Sanitize projection_summary so the _html locale renders <strong> markup
  instead of escaping it.
- Switch donut + card ring track to --budget-unused-fill;
  --budget-unallocated-fill resolves to the same gray as bg-surface in
  light mode so the unfilled arc was invisible on the detail page.
- Mobile detail: drop avatar, right-align action buttons, stack
  projection header (subtitle + legend) so the subtitle reads on one
  line; bump legend gap on mobile.
- Nowrap the projected reach-date so e.g. "Jul 2026" stays together.

app/javascript/controllers/goal_projection_chart_controller.js

@@ -570,8 +570,8 @@ export default class extends Controller {
 
   _fmtMoneyShort(amount, _currency) {
     // The server ships `currency_symbol` via projection_payload (resolved
-    // through Money.new(0, code).symbol so EUR/GBP/JPY/etc. render with
-    // the family-locale-correct glyph). Fall back to "$" if a stale
+    // through Money.new(0, code).currency.symbol so EUR/GBP/JPY/etc. render
+    // with the family-locale-correct glyph). Fall back to "$" if a stale
     // payload reaches us mid-deploy.
     const symbol = this.dataValue?.currency_symbol || "$";
     const abs = Math.abs(amount);