Design PR 2: Sidebar sections become M3 elevated cards

[scottstanie]

Second in the design refresh series. Built on the tokens landed in #43.

This PR turns the flat scroll of sidebar sections into elevated M3 cards and does three structural cleanups that the token PR deferred.

1. Cards

Each section (Layers, Visualization, Reference Point, Masking, Point Buffer) now sits on an elevated surface with a 1px border, --radius-md (12px) corners, and M3 Elevation 1 shadow (one scrim shadow + one key shadow). The previous border-bottom divider is gone.

• Internal padding: 16px
• Between cards: 12px vertical
• Horizontal margin: 8px (tighter than vertical on purpose — keeps the 5-button histogram row on one line; 12px horizontal caused wrap)

2. Compact Visualization card (MIN / colorbar / MAX on one row)

Collapses the old layout

┌──────────────────────────────────┐
│ [colormap select]       [invert] │
├──────────────────────────────────┤
│ [        colorbar image        ] │
├──────────────────────────────────┤
│ MIN             │            MAX │
│ [   0   ]       │        [ 1  ] │
└──────────────────────────────────┘

into a single row

┌──────────────────────────────────┐
│ [colormap select]       [invert] │
├──────────────────────────────────┤
│ [0] [====colorbar====] [1]       │
└──────────────────────────────────┘

• Labels become aria-label — position carries the semantics
• Frees ~48px of vertical space
• New CSS: .colorbar-row { grid-template-columns: 72px 1fr 72px; }

3. M3 Continuous opacity slider

.sidebar-range gets the full M3 continuous-slider treatment:

• 4px track in --sb-surface2
• 18px teal thumb with --sb-surface-color border (ring) and drop shadow
• Focus/hover: 1.12× scale + soft outer ring
• Firefox also fills ::-moz-range-progress in accent
• Applies to every slider (opacity, time step, buffer radii) — consistent

No filled-track on Chrome — would require --pct custom property updated inline on every change. The thumb alone carries the position signal clearly enough; skipped the inline-style work.

Side-fix

.histogram-chart-area was --sb-surface; now that cards sit on --sb-surface it would vanish. Bumped to --sb-surface2.

Test plan

• npm run build passes
• npm run tsc passes
• Dark + light + chart-open Playwright screenshots against Palos Verdes data; no regressions. Golden path (theme toggle, open time series chart, colormap change, MIN/MAX commit on Enter/blur) all verified.

🤖 Generated with Claude Code