fix(client): sidebar selection ordering, and clear second review pass

The sidebar regression is the real fix here. NavItem paints the selected
item with action.selected but hovers unselected items with MUI's default
action.hover. Once the sidebar moved onto `paper`, selected composited to
rgb(31,38,41) - darker than the ground - while hover came out lighter at
rgb(46,46,51), so hovering any other item made it read as more selected
than the actual selection. Both states now come from the same family
(selectedHover / rowHover), so selected always reads stronger.

Also from review:

- Dropped "Inter" from the status page SANS_STACK. Its webfont went with
  the Google Fonts import, so on Windows and Linux the stack was silently
  falling through to Segoe UI / Roboto on pages users publish.
- Button focus rings now use the same dark-mode green as input focus
  rings. They were still on primary.main at 2.86:1, which is the exact
  problem primary.light was added to solve.
- Removed 13 size={16} props made redundant by the Icon default change.
  The load-bearing pins stay: size={20} on the public status page, and
  the header pins that were relying on the old default.
- Documented that alpha() replaces rather than multiplies the alpha
  channel in StatusBox, so the grid is coupled to `divider` being opaque.
- Noted on the isRowSelected JSDoc that the small-screen card branch does
  not style selection, same limitation getRowSx already had.

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

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

@@ -35,7 +35,10 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => {
 					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.
+					// with the box's own border. Note alpha() *replaces* the
+					// alpha channel, so this relies on `divider` being an opaque
+					// hex; if it ever goes translucent this gets stronger, not
+					// weaker.
 					backgroundImage: `
 						linear-gradient(${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px),
 						linear-gradient(90deg, ${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px)

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

@@ -52,7 +52,11 @@ type DataTableProps<T extends { id?: string | number; _id?: string | number }> =
 	emptyViewText?: string;
 	emptyViewPositive?: boolean;
 	getRowSx?: (row: T) => SxProps<Theme>;
-	/** Marks a row selected so it gets the shared selected + hover treatment. */
+	/**
+	 * Marks a row selected so it gets the shared selected + hover treatment.
+	 * Desktop table only - the small-screen card branch does not style
+	 * selection yet, same as `getRowSx`.
+	 */
 	isRowSelected?: (row: T) => boolean;
 };