fix(web): visible 30d chart + populate homepage analytics panels

- price-area-chart + sparkline: replace non-existent `var(--color-signal-up)`
  with proper `hsl(var(--signal-up))` (and same for -down + border +
  muted-foreground). The previous tokens resolved to undefined, leaving
  the chart line + sparkline invisible against the dark background.
- public/page: switch `currentPeriod()` from monthly (YYYY-MM) to
  quarterly (YYYY-Qn) to match the MarketIndex aggregation period —
  heatmap and district stats now find rows.
- import-market-data: add `2026-Q2` to seeded periods so the current
  quarter has data on a freshly seeded dev DB.
- new scripts/seed-bulk-listings-per-district.ts: top up the dev DB
  with 12 synthetic listings per district per 7-day window so the
  movers query (which requires >= 10 listings/district/window) has
  signal to compute against.
- update price-area-chart.spec to match new color tokens.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/components/charts/__tests__/price-area-chart.spec.tsx

@@ -58,7 +58,7 @@ describe('PriceAreaChart', () => {
     );
     expect(screen.getByTestId('area-avgPriceM2')).toHaveAttribute(
       'data-stroke',
-      'var(--color-signal-up)',
+      'hsl(var(--signal-up))',
     );
   });
 
@@ -73,7 +73,7 @@ describe('PriceAreaChart', () => {
     );
     expect(screen.getByTestId('area-avgPriceM2')).toHaveAttribute(
       'data-stroke',
-      'var(--color-signal-down)',
+      'hsl(var(--signal-down))',
     );
   });
 
@@ -81,7 +81,7 @@ describe('PriceAreaChart', () => {
     render(<PriceAreaChart data={[]} />);
     expect(screen.getByTestId('area-avgPriceM2')).toHaveAttribute(
       'data-stroke',
-      'var(--color-signal-down)',
+      'hsl(var(--signal-down))',
     );
   });
 

apps/web/components/charts/price-area-chart.tsx

@@ -29,12 +29,12 @@ export function PriceAreaChart({ data, height = 280, className }: PriceAreaChart
   const isUp =
     data.length >= 2 && data[data.length - 1]!.avgPriceM2 >= data[0]!.avgPriceM2;
 
-  const strokeColor = isUp
-    ? 'var(--color-signal-up)'
-    : 'var(--color-signal-down)';
-  const fillColor = isUp
-    ? 'var(--color-signal-up)'
-    : 'var(--color-signal-down)';
+  // CSS tokens are stored as raw HSL components (`--signal-up: 142 72% 50%`),
+  // so they must be wrapped in `hsl(...)`. The previous `var(--color-signal-up)`
+  // form referenced a non-existent variable, leaving recharts with `undefined`
+  // and rendering an invisible line/area.
+  const strokeColor = isUp ? 'hsl(var(--signal-up))' : 'hsl(var(--signal-down))';
+  const fillColor = strokeColor;
 
   return (
     <div className={className}>
@@ -48,17 +48,17 @@ export function PriceAreaChart({ data, height = 280, className }: PriceAreaChart
           </defs>
           <CartesianGrid
             strokeDasharray="3 3"
-            stroke="var(--color-border)"
+            stroke="hsl(var(--border))"
             strokeOpacity={0.5}
           />
           <XAxis
             dataKey="period"
-            tick={{ fontSize: 11, fill: 'var(--color-foreground-muted)' }}
+            tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
             tickLine={false}
             axisLine={false}
           />
           <YAxis
-            tick={{ fontSize: 11, fill: 'var(--color-foreground-muted)' }}
+            tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
             tickLine={false}
             axisLine={false}
             tickFormatter={(v: number) =>

apps/web/components/listings/sparkline.tsx

@@ -49,7 +49,7 @@ export function Sparkline({ listingId, width = 64, height = 20 }: SparklineProps
 
   // Color based on trend direction
   const trending = prices[prices.length - 1]! >= prices[0]!;
-  const strokeColor = trending ? 'var(--color-signal-up)' : 'var(--color-signal-down)';
+  const strokeColor = trending ? 'hsl(var(--signal-up))' : 'hsl(var(--signal-down))';
 
   return (
     <svg