fix(goals): UI polish — submit validation, container-responsive cards, picker & filter fixes (#2160)

* fix(ds): disabled buttons use not-allowed cursor

Tailwind v4 preflight sets cursor:pointer on every <button>, including
disabled ones. Add disabled:cursor-not-allowed to the DS button base so
disabled buttons read as non-interactive.

* fix(goals): disable new-goal submit until required fields valid

The submit button was always enabled, and the funding-accounts checkbox
group has no native 'required', so a goal with no linked account could be
submitted and only fail server-side (422). Disable the submit until name,
a positive target amount, and >=1 account are present, and add a
submit-time guard that surfaces inline errors and focuses the first
offending field as a backstop.

* fix(goals): keep color/icon picker from shifting the form

DS::Disclosure wraps its body in an mt-2 div that sits in normal flow, so
opening the absolutely-positioned picker popover nudged the form down ~8px.
Use a raw <details> for the picker so the popover overlays without
reflowing the content beneath it.

* fix(goals): container-responsive cards, meta-line status, scrollable tabs

- Card grids + KPI strip switch from viewport breakpoints to container
  queries (@container), so columns track the actual content width when the
  account/AI sidebars are open instead of crushing three columns into a
  narrow center.
- Move the status pill from the title row to the meta line; the title now
  gets the full header width (no more 'Hou...' truncation at 3-up). Drop
  the secondary line when the pill already states it (completed / open).
- Card internals harden for narrow widths (ring shrink-0, footer wrap,
  shorter 'N days left' secondary).
- Filter tabs scroll horizontally instead of wrapping 'On track' mid-label
  or forcing the row wider than the viewport.

* fix(goals): only require a funding account on the create form

GoalsController#edit renders account checkboxes from visible accounts only,
so a goal backed solely by a now-hidden (disabled / pending_deletion)
account renders none checked. The submit-validation then wedged the edit
form — a name/notes change couldn't be saved even though #update preserves
existing links when account_ids is omitted. Gate the account requirement on
a require-account Stimulus value that is true only for the create form.

* fix(goals): give the color/icon picker trigger an accessible name

The hand-rolled <summary> is icon-only (pen), so screen readers announced an
unlabeled control. Add a localized aria-label.

* fix(goals): render form validation errors inline on server re-render

The client-side controller already surfaces name / amount / account errors
inline and disables submit, but a server 422 (JS disabled, or a race that
lets an invalid submit through) fell back to the top run-on banner
("X must be filled and Y and Z."). Make the existing inline error hints
server-aware so a failed submit shows the same per-field red text the
client path does, and drop the base-error banner — base only ever carries
the account requirement, which now renders beside the funding-accounts
list.

* fix(goals): blur projection chart under privacy mode

The projection chart's SVG axis labels and annotations (target, "$X short",
$200K/$400K ticks) rendered in cleartext while privacy mode blurred every
other number on the page. Tag the chart container `privacy-sensitive`, the
same wrapper-level treatment the net-worth and cashflow-sankey charts
already use, so it blurs with the rest.

* fix(goals): stop target-date input stretching when amount error shows

The target-amount / target-date row is a two-column grid. The amount
column carries its inline error <p> underneath, so when that error
appears the column grows and the default `items-stretch` makes the
sibling date input stretch to match — the date box visibly grew taller
than the amount box. Anchor the row with `items-start` so each input
keeps its natural height and the error just extends below its own column.

* fix(goals): make invalid submit announce errors instead of dead-ending

Review follow-ups:
- Swap the submit gate from the disabled attribute to aria-disabled: a
  truly disabled default submit also blocks Enter-key implicit
  submission, so an invalid form was a dead button with every inline
  error still hidden. The button now stays clickable and lets
  validateOnSubmit surface the errors; DS buttonish styles the
  aria-disabled state (cursor-not-allowed + opacity-50). Side effect:
  loading_button_controller submits also dim while busy, which reads as
  an upgrade.
- Focus the first funding-account checkbox when accounts are the only
  missing field (focus previously went nowhere).
- Drop the now-orphaned goals.goal_card.days_left_by locale key.

app/javascript/controllers/goal_form_controller.js

@@ -18,6 +18,7 @@ export default class extends Controller {
     "accountsError",
     "linkedAccountCheckbox",
     "suggested",
+    "submitButton",
   ];
 
   static INVALID_INPUT_CLASSES = ["ring-2", "ring-destructive", "border-destructive"];
@@ -26,6 +27,11 @@ export default class extends Controller {
     currency: { type: String, default: "USD" },
     suggestedWithDate: { type: String, default: "Save {monthly}/mo across {accounts} to hit it on time." },
     suggestedNoDate: { type: String, default: "Set a target date to project a finish line." },
+    // Only the create form must pick an account. On edit the checkboxes are
+    // populated from visible accounts only, so a goal backed by a now-hidden
+    // account renders none — and the controller preserves existing links when
+    // account_ids is omitted. Requiring a checkbox there would wedge the form.
+    requireAccount: { type: Boolean, default: true },
   };
 
   connect() {
@@ -35,12 +41,16 @@ export default class extends Controller {
       this._defaultAvatarHTML = this.avatarPreviewTarget.innerHTML;
     }
     this.updateSuggested();
+    // Edit form arrives pre-filled (valid) so this clears immediately; new
+    // form arrives empty so the submit starts visually disabled.
+    this.refreshSubmitState();
   }
 
   nameChanged() {
     if (this.hasNameInputTarget) {
       this.clearFieldError(this.nameInputTarget, this.hasNameErrorTarget ? this.nameErrorTarget : null);
     }
+    this.refreshSubmitState();
     if (!this.hasAvatarPreviewTarget || !this.hasNameInputTarget) return;
 
     // If the user has explicitly picked an icon, leave it alone. Name
@@ -62,6 +72,7 @@ export default class extends Controller {
     if (this.hasAmountInputTarget) {
       this.clearFieldError(this.amountInputTarget, this.hasAmountErrorTarget ? this.amountErrorTarget : null);
     }
+    this.refreshSubmitState();
   }
 
   linkedAccountChanged() {
@@ -69,6 +80,64 @@ export default class extends Controller {
     if (this.linkedAccountCheckboxTargets.some((cb) => cb.checked) && this.hasAccountsErrorTarget) {
       this.accountsErrorTarget.classList.add("hidden");
     }
+    this.refreshSubmitState();
+  }
+
+  // Required to create a goal: a name, a positive target amount, and at least
+  // one funding account. Mirrors the server-side Goal validations (name
+  // presence, target_amount > 0, must_have_at_least_one_linked_account) so the
+  // button only enables when a submit would actually succeed.
+  isValid() {
+    const name = this.hasNameInputTarget ? this.nameInputTarget.value.trim() : "";
+    const amount = this.hasAmountInputTarget ? Number.parseFloat(this.amountInputTarget.value) : Number.NaN;
+    const accountOk = !this.requireAccountValue || this.linkedAccountCheckboxTargets.some((cb) => cb.checked);
+    return name.length > 0 && Number.isFinite(amount) && amount > 0 && accountOk;
+  }
+
+  // `aria-disabled` instead of the `disabled` attribute: a truly disabled
+  // default submit also blocks Enter-key implicit submission, so an invalid
+  // form would be a dead button with every inline error still hidden. With
+  // aria-disabled the button keeps its not-allowed affordance (styled via the
+  // DS `aria-disabled:` variants) while clicks and Enter still reach
+  // validateOnSubmit, which surfaces the errors and moves focus.
+  refreshSubmitState() {
+    if (this.hasSubmitButtonTarget) {
+      this.submitButtonTarget.setAttribute("aria-disabled", String(!this.isValid()));
+    }
+  }
+
+  // The real gate for the submit: covers the funding-accounts group (a
+  // checkbox group can't carry native `required`) and everything the
+  // aria-disabled affordance merely hints at. Surfaces the inline errors and
+  // focuses the first offending field instead of a silent no-op.
+  validateOnSubmit(event) {
+    if (this.isValid()) return;
+
+    event.preventDefault();
+
+    const nameEmpty = !(this.hasNameInputTarget && this.nameInputTarget.value.trim().length > 0);
+    const amount = this.hasAmountInputTarget ? Number.parseFloat(this.amountInputTarget.value) : Number.NaN;
+    const amountInvalid = !(Number.isFinite(amount) && amount > 0);
+    const noAccount = this.requireAccountValue && !this.linkedAccountCheckboxTargets.some((cb) => cb.checked);
+
+    if (nameEmpty) {
+      this.showFieldError(this.nameInputTarget, this.hasNameErrorTarget ? this.nameErrorTarget : null);
+    }
+    if (amountInvalid) {
+      this.showFieldError(this.amountInputTarget, this.hasAmountErrorTarget ? this.amountErrorTarget : null);
+    }
+    if (noAccount && this.hasAccountsErrorTarget) {
+      this.accountsErrorTarget.classList.remove("hidden");
+    }
+
+    const firstInvalid = nameEmpty
+      ? this.nameInputTarget
+      : amountInvalid
+        ? this.amountInputTarget
+        : noAccount
+          ? this.linkedAccountCheckboxTargets[0]
+          : null;
+    firstInvalid?.focus();
   }
 
   // Hook for any input that influences the suggested-pace hint