Rework the dashboard into two looks over one behaviour

A dashboard is a wall panel somebody hangs in their own hallway, so it
now wears what they choose: a look, and a palette of their own colours.

Two complete component sets live under `Dashboard/ui/` — `glass`
(translucent panes over a slowly moving ground) and `material` (Material
3 tonal cards) — behind one prop contract. Every control's state,
keyboard and `aria-` live in `ui/core` and are shared, so the two sets
are the same dashboard drawn twice rather than two products: a set only
decides what a control looks like while doing it.

Four settings join the channel, each drivable by a flow like any other:
`look`, `palette`, `background` and `touch`. A palette is an ordered list
of hex colours — background, surface, primary, accent, text, then more
chart colours — pasted from a coolors.co link or typed, written onto the
canvas as the token variables everything already reads. Trailing roles
are derived, so three colours are a whole dashboard, and derived text is
held to AA rather than trusted (`theme.check.ts` measures it). A palette
also decides light or dark, since its first colour is the ground.

Widgets are measured against their own tile with container queries rather
than against the viewport, animate through `motion`, and can be drawn
without their title. The three reworks:

- a bar draws a row per reading, up to eight, each in the dashboard's own
  data colours and each able to carry its own scale — replacing readings
  nested in one fill, which could only ever share one colour and stop at
  three. Documents written the old way are read as rows.
- a chart's range picker moved to a column down its right-hand edge, which
  gives the plot back a whole row of a short tile.
- the colour wheel became a disc: hue is the angle and saturation the
  distance from the middle, so a colour is one gesture rather than three,
  with brightness on a slider beside it.

`index.css` and `lib/motion.ts` are untouched — the dashboard overrides
token *values* on its canvas, never the blocks the two repos share.

frontend/src/routes/panel.$id.tsx

@@ -8,7 +8,10 @@ import {
   dashboardQueryOptions,
   panelQueryOptions,
 } from "@/components/Dashboard/queries"
-import { useDashboardTheme } from "@/components/Dashboard/settings"
+import {
+  LookProvider,
+  useCanvasRoot,
+} from "@/components/Dashboard/ui/core/look"
 import { useFlowSocket } from "@/components/Flow/useFlowSocket"
 import { isLoggedIn } from "@/hooks/useAuth"
 import { useIsMobile } from "@/hooks/useMobile"
@@ -56,11 +59,11 @@ function PanelRoute() {
   })
   const stacked = useIsMobile()
   const rail = dashboards.length > 1
-  // The screen is the dashboard here, so its theme covers the whole of it —
-  // the rail and the letterbox around a scaled canvas included. This is the
-  // surface the setting exists for: a panel in a room has no other way to be
-  // told which theme to wear.
-  const theme = useDashboardTheme(dashboard as Dashboard | undefined)
+  // The screen is the dashboard here, so its appearance covers the whole of
+  // it — the rail and the letterbox around a scaled canvas included. This is
+  // the surface these settings exist for: a panel in a room has no other way
+  // to be told what to wear.
+  const root = useCanvasRoot(dashboard as Dashboard | undefined)
 
   if (panel && dashboards.length === 0) {
     return (
@@ -74,27 +77,35 @@ function PanelRoute() {
 
   return (
     <main
+      data-look={root["data-look"]}
+      data-touch={root["data-touch"]}
+      data-palette={root["data-palette"]}
       className={cn(
         "relative h-svh w-full bg-background p-4 text-foreground",
-        theme,
+        root.className,
         stacked ? "overflow-y-auto" : "overflow-hidden",
       )}
-      style={rail ? { paddingLeft: RAIL_INSET } : undefined}
+      style={{
+        ...root.style,
+        ...(rail ? { paddingLeft: RAIL_INSET } : {}),
+      }}
     >
-      {rail && current ? (
-        <PanelRail
-          dashboards={dashboards}
-          current={current}
-          linkFor={(name) => ({
-            to: "/panel/$id",
-            params: { id },
-            search: { d: name },
-          })}
-        />
-      ) : null}
-      {dashboard ? (
-        <PanelSurface dashboard={dashboard as Dashboard} stacked={stacked} />
-      ) : null}
+      <LookProvider dashboard={dashboard as Dashboard | undefined}>
+        {rail && current ? (
+          <PanelRail
+            dashboards={dashboards}
+            current={current}
+            linkFor={(name) => ({
+              to: "/panel/$id",
+              params: { id },
+              search: { d: name },
+            })}
+          />
+        ) : null}
+        {dashboard ? (
+          <PanelSurface dashboard={dashboard as Dashboard} stacked={stacked} />
+        ) : null}
+      </LookProvider>
     </main>
   )
 }