fix(client): calm the stat box grid and firm up borders

Three fixes, all fallout from giving `divider` a real value:

- The graph-paper texture behind the status counts is drawn with
  `divider`. That used to be rgba(0,0,0,.12) and near-invisible; now it
  is opaque, so the grid jumped forward and read as the loudest thing on
  the page. It is texture, not a rule, so it now takes divider at 40%.

- GradientBox called lighten() on background.paper to build its
  gradient. paper is white in light mode and lightening white is a
  no-op, so the gradient collapsed flat. Darkens slightly toward the
  page ground instead.

- Borders were too faint at #D9E1DD (1.33:1 against paper). Now #C7D2CC
  (1.55:1), and dark mode #2C3532 -> #3A4642 (1.73:1), so tables and
  cards have a visible edge without turning into hard rules.

Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd

client/src/Components/design-elements/StatBox.tsx

@@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
-import { lighten } from "@mui/material/styles";
+import { darken, lighten } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import type { PaletteKey } from "@/Utils/Theme/Theme";
 import { BaseBox, TooltipWithInfo } from "@/Components/design-elements";
@@ -19,7 +19,9 @@ export const GradientBox = ({ children, palette, sx, interactive }: GradientBox)
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isLight = theme.palette.mode === "light";
 	const paper = theme.palette.background.paper;
-	const paperStart = lighten(paper, isLight ? 0.06 : 0.08);
+	// In light mode `paper` is white, and lightening white is a no-op - the
+	// gradient collapses flat. Darken slightly towards the page ground instead.
+	const paperStart = isLight ? darken(paper, 0.02) : lighten(paper, 0.08);
 	const paperEnd = paper;
 	const bg = palette
 		? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)`

client/src/Components/design-elements/StatusBox.tsx

@@ -5,7 +5,7 @@ import { BaseBox } from "@/Components/design-elements";
 import { useTranslation } from "react-i18next";
 import type { SxProps } from "@mui/material";
 
-import { useTheme } from "@mui/material/styles";
+import { alpha, useTheme } from "@mui/material/styles";
 
 type StatusBoxProps = React.PropsWithChildren<{
 	children: React.ReactNode;
@@ -33,9 +33,12 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => {
 				bottom={0}
 				sx={{
 					pointerEvents: "none",
+					// Deliberately far fainter than `divider` - this is texture
+					// behind the number, not a rule, and it must never compete
+					// with the box's own border.
 					backgroundImage: `
-						linear-gradient(${theme.palette.divider} 1px, transparent 1px),
-						linear-gradient(90deg, ${theme.palette.divider} 1px, transparent 1px)
+						linear-gradient(${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px),
+						linear-gradient(90deg, ${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px)
 					`,
 					backgroundSize: "24px 24px",
 					maskImage:

client/src/Utils/Theme/Palette.ts

@@ -24,14 +24,14 @@ export const colors = {
 	ink600: "#55635C",
 	ink400: "#7C8983",
 	surface50: "#F6F8F7",
-	rule200: "#D9E1DD",
+	rule200: "#C7D2CC",
 	// Semantic colours derived from the brand rather than Material's defaults
 	successMain: "#0D6049",
 	errorMain: "#A02B24",
 	warningMain: "#8C5806",
 	inkDark900: "#ECEFED",
 	inkDark600: "#A3ADA8",
-	ruleDark: "#2C3532",
+	ruleDark: "#3A4642",
 	successDark: "#4BC49E",
 	errorDark: "#E8837A",
 	warningDark: "#E0A458",