Stack a bar's readings, and stop widgets taking the phone sideways

A bar drew its nested reading on top of the outer one in --chart-5, which
measures 2.53:1 against --primary and lost the 3:1 guideline for non-text. The
readings now partition the fill end to end, up to three of them, in a token of
their own: --primary-nested, the primary hue a few steps deeper, 3.14:1 light
and 3.12:1 dark. It cannot also clear 3:1 against --muted — in dark those two
are 5.82:1 apart and a colour 3:1 from both would need a 9:1 gap — so a segment
is drawn inside a gutter of outer fill rather than ever bordering the track,
which is what separates neighbours too, and what caps the count at three. A
nested value larger than its outer used to spill onto the track; it is clamped.
`inner` still reads as a single binding, so no dashboard needs migrating.

On a phone, .widget-grid took its width from the widest thing any widget held —
a truncating flex item still offers its whole unwrapped line as a min-content
contribution — and a handful of widgets had no floor of their own: the uPlot
legend is a table, a fieldset carries min-inline-size: min-content from the UA
sheet, and buttons are whitespace-nowrap. Each is capped now. A widget's body
scrolls rather than clipping, so long text stops painting over the title.

Gauges and bars move between readings instead of jumping, and a segmented
control slides one thumb rather than recolouring cells. The gauge arc is drawn
whole and revealed by its dash, because `d` cannot be transitioned.

UplotChart pushed new readings only when the point count changed, so once a
rolling window was full a refetch left the old values on screen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Uq8mtNb97A7praJLyeEYgs

frontend/src/index.css

@@ -48,6 +48,7 @@
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+  --color-primary-nested: var(--primary-nested);
   --color-brand-secondary: var(--brand-secondary);
   --color-brand-secondary-foreground: var(--brand-secondary-foreground);
   --color-secondary: var(--secondary);
@@ -86,6 +87,16 @@
  * 4.04:1 against white, below AA for the label sitting on a bg-primary fill.
  * #59849b remains the wordmark colour (index/src/assets/fluksio-*.svg). See the root
  * DESIGN-GUIDELINES.md → Colour tokens.
+ *
+ * `--primary-nested` is that same hue and saturation a few steps deeper, for
+ * a reading drawn inside a `--primary` fill — the bar widget's stacked
+ * segments. No slot of the chart ramp clears the 3:1 non-text guideline
+ * against `--primary` (`--chart-5`, which the bar used, measures 2.53:1), so
+ * the nested fill needs a token of its own. It cannot clear 3:1 against
+ * `--muted` as well in dark: `--primary` and `--muted` are only 5.82:1 apart
+ * there, and a colour 3:1 from both would have to sit in a 9:1 gap. The
+ * segment is therefore drawn inside a gutter of the fill rather than ever
+ * bordering the track.
  */
 :root {
   --background: #ffffff;
@@ -96,6 +107,7 @@
   --popover-foreground: #333232;
   --primary: #4a7189;
   --primary-foreground: #ffffff;
+  --primary-nested: #152128; /* on --primary 3.14:1, on --muted 14.6:1 */
   --brand-secondary: #de8f6e;
   --brand-secondary-foreground: #333232;
   --secondary: #f2f2f2;
@@ -133,6 +145,7 @@
   --popover-foreground: #f5f5f5;
   --primary: #7ba3b8;
   --primary-foreground: #0a0a0a;
+  --primary-nested: #345160; /* on --primary 3.12:1, on --muted 1.86:1 */
   --brand-secondary: #e5a184;
   --brand-secondary-foreground: #0a0a0a;
   --secondary: #232323;