diff --git a/app/assets/tailwind/sure-design-system/components.css b/app/assets/tailwind/sure-design-system/components.css
index 7d814388f..0594759c3 100644
--- a/app/assets/tailwind/sure-design-system/components.css
+++ b/app/assets/tailwind/sure-design-system/components.css
@@ -150,4 +150,31 @@
       fill: var(--color-white);
     }
   }
+
+  /*
+    Chart hover tooltip surface (see utils/chart_tooltip.js for the JS-side
+    contract). Matches the design reference exactly: hairline border ring
+    composed with a soft 8/24 drop shadow (Tailwind shadow utilities don't
+    compose, hence the component class), 10px radius, 12x14 padding, and an
+    80ms left/top glide so the card eases between scrub positions instead of
+    teleporting. Dark mode swaps the ring to alpha-white; the drop shadow is
+    near-invisible there, which is fine — the ring carries the edge.
+  */
+  .chart-tooltip {
+    background: var(--color-container);
+    border-radius: 10px;
+    padding: 12px 14px;
+    box-shadow:
+      0 0 0 1px var(--color-alpha-black-50),
+      0 8px 24px rgba(11, 11, 11, 0.12);
+    transition:
+      left 80ms ease-out,
+      top 80ms ease-out;
+
+    @variant theme-dark {
+      box-shadow:
+        0 0 0 1px var(--color-alpha-white-50),
+        0 8px 24px rgba(11, 11, 11, 0.12);
+    }
+  }
 }
diff --git a/app/javascript/controllers/sankey_chart_controller.js b/app/javascript/controllers/sankey_chart_controller.js
index 2219ef4b6..8b0d4376e 100644
--- a/app/javascript/controllers/sankey_chart_controller.js
+++ b/app/javascript/controllers/sankey_chart_controller.js
@@ -528,7 +528,7 @@ export default class extends Controller {
         (c) =>
           ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c],
       );
-    const valueLine = `<span class="font-medium tabular-nums">${this.#formatCurrency(value)}</span> <span class="text-secondary">(${percentage || 0}%)</span>`;
+    const valueLine = `<span class="font-mono font-medium tabular-nums">${this.#formatCurrency(value)}</span> <span class="text-secondary">(${percentage || 0}%)</span>`;
     const content = title
       ? `<div class="text-xs text-secondary mb-1">${esc(title)}</div><div>${valueLine}</div>`
       : valueLine;
diff --git a/app/javascript/controllers/time_series_chart_controller.js b/app/javascript/controllers/time_series_chart_controller.js
index 0628d0315..696ce1af4 100644
--- a/app/javascript/controllers/time_series_chart_controller.js
+++ b/app/javascript/controllers/time_series_chart_controller.js
@@ -389,7 +389,7 @@ export default class extends Controller {
         ${datum.date_formatted}
       </div>
       <div class="flex items-center gap-4">
-        <div class="flex items-center gap-2 text-primary font-medium tabular-nums">
+        <div class="flex items-center gap-2 text-primary font-mono font-medium tabular-nums">
           <div class="flex items-center justify-center h-4 w-4">
             ${this._getTrendIcon(datum)}
           </div>
@@ -400,7 +400,7 @@ export default class extends Controller {
           datum.trend.value === 0
             ? `<span class="w-20"></span>`
             : `
-          <span class="tabular-nums" style="color: ${datum.trend.color};">
+          <span class="font-mono tabular-nums" style="color: ${datum.trend.color};">
             ${this._extractFormattedValue(datum.trend.value)} (${datum.trend.percent_formatted})
           </span>
         `
diff --git a/app/javascript/utils/chart_tooltip.js b/app/javascript/utils/chart_tooltip.js
index 690f7802f..942a11cee 100644
--- a/app/javascript/utils/chart_tooltip.js
+++ b/app/javascript/utils/chart_tooltip.js
@@ -11,20 +11,21 @@
 // Not to be confused with DS::Tooltip — that is the info-icon hint primitive
 // (bg-inverse, aria-describedby, anchored to a static trigger). This is a
 // data-card surface created and updated inside D3 handler code.
-// Visual target: the borderless soft-shadow card from the design reference —
-// generous padding, large radius, no edge ring in light mode (the shadow alone
-// defines the surface). Dark mode keeps a 1px alpha ring because a shadow is
-// nearly invisible against dark surfaces and the card would otherwise melt
-// into the chart background.
+// The surface itself lives in the design system as `.chart-tooltip`
+// (sure-design-system/components.css): container bg, 10px radius, 12x14
+// padding, hairline ring composed with a soft 8/24 drop shadow, 80ms
+// left/top glide. It's a component class because Tailwind shadow utilities
+// can't compose a ring with a custom drop shadow. This constant adds the
+// behavioural classes shared by every chart tooltip.
 export const CHART_TOOLTIP_CLASSES =
-  "bg-container text-primary text-sm font-sans absolute p-4 rounded-2xl shadow-xl theme-dark:ring-1 theme-dark:ring-alpha-white-200 pointer-events-none z-50 privacy-sensitive";
+  "chart-tooltip text-primary text-sm font-sans absolute pointer-events-none z-50 privacy-sensitive";
 
 // Content conventions (kept here so the controllers stay aligned):
 //   - context line (date / node title): `text-xs text-secondary mb-1`
-//   - value figures: `font-medium tabular-nums`, secondary parentheticals in
-//     `text-secondary`
+//   - money / numeric figures: mono + tabular so digits don't jitter while
+//     the scrubber moves; secondary parentheticals in `text-secondary`
 export const CHART_TOOLTIP_CONTEXT_CLASSES = "text-xs text-secondary mb-1";
-export const CHART_TOOLTIP_VALUE_CLASSES = "font-medium tabular-nums";
+export const CHART_TOOLTIP_VALUE_CLASSES = "font-mono font-medium tabular-nums";
 
 // Convenience factory for the raw-DOM idiom (no d3.select). Creates a hidden
 // tooltip div carrying the shared contract and appends it to `parent`.