fix(charts): address review — glide opt-in, no shadowed var, truncate cap

- The 80ms left/top transition moved out of .chart-tooltip: it eased the
  snap-positioned goal tooltip but made cursor-following tooltips
  (sankey, time-series) trail the pointer by a frame. Goal projection
  opts back in via inline style; the component comment documents the
  split.
- setRelation reuses _draw()'s targetAmount const instead of declaring
  a local 'target' that shadowed the target-date const.
- Sankey context line gets max-w-64 so truncate has a constraint to
  fire against on deep flows.
- Component comment now says 10x12 padding, matching the declaration.

app/javascript/controllers/goal_projection_chart_controller.js

@@ -449,6 +449,10 @@ export default class extends Controller {
     // hand-copied class string that drifted from the other charts the moment
     // the contract changed.
     const tooltip = createChartTooltip(root);
+    // This tooltip snaps between discrete dates (not raw cursor positions),
+    // so the glide reads as easing, not lag. Cursor-following tooltips must
+    // not do this — see the .chart-tooltip comment in components.css.
+    tooltip.style.transition = "left 80ms ease-out, top 80ms ease-out";
     const tooltipDate = document.createElement("div");
     tooltipDate.className = CHART_TOOLTIP_CONTEXT_CLASSES;
     const tooltipValue = document.createElement("div");
@@ -461,12 +465,13 @@ export default class extends Controller {
     tooltip.replaceChildren(tooltipDate, tooltipValue, tooltipRelation);
 
     const setRelation = (amount) => {
-      const target = Number(data.target_amount) || 0;
-      if (target <= 0 || !data.target_amount_short_label) {
+      // `targetAmount` is _draw()'s outer const (data.target_amount) — no
+      // local copy, which previously shadowed the `target` date const.
+      if (targetAmount <= 0 || !data.target_amount_short_label) {
         tooltipRelation.style.display = "none";
         return;
       }
-      const percent = Math.round((amount / target) * 100);
+      const percent = Math.round((amount / targetAmount) * 100);
       tooltipRelation.textContent = this.targetRelationTemplateValue
         .replace("{percent}", percent)
         .replace("{target}", data.target_amount_short_label);

app/javascript/controllers/sankey_chart_controller.js

@@ -550,7 +550,9 @@ export default class extends Controller {
   // what's hovered. No color swatch — the hover highlight on the diagram
   // itself already says which ribbon the card belongs to.
   #tooltipContext(label) {
-    return `<div class="text-xs text-secondary mb-1 truncate">${label}</div>`;
+    // max-w-64 gives truncate a constraint to fire against — an absolute
+    // tooltip otherwise grows to fit and never ellipsizes deep flows.
+    return `<div class="max-w-64 text-xs text-secondary mb-1 truncate">${label}</div>`;
   }
 
   #showTooltip(event, value, percentage, contextHtml = null) {