fix(dashboard): spread the hero rings across phone width

On phones the four score rings wrapped into a 2-up grid clustered in
the centre with dead margin on either side. They now spread evenly
across the full width — equal space before, between, and after — so the
block reads symmetric on all four sides instead of centred; desktop's
right-aligned row is unchanged.

CHANGELOG.md

@@ -9,7 +9,7 @@
 - The installable app now survives being offline. A network failure on the auth probe was treated as a logged-out session — it wiped the offline caches and redirected to the login page, defeating the entire offline layer. Offline relaunches now render the dashboard from cache with the offline banner; only a real 401/403 or an explicit logout clears anything.
 - Chart text is readable in the light theme again — 23 chart surfaces drew their ticks and axis text in colours measuring near-invisible contrast; they now use the semantic text tokens (measured 13.2:1 in light, dark byte-identical).
 - On the mood insights page, correlation captions no longer escape their tiles on phone widths; the density guard now covers that route too. Row checkboxes gained a 32 px touch target at unchanged visual size.
-- The dashboard hero breathes: the score rings space at 24 px on desktop and the briefing section separates from the greeting row at the same rhythm as the card padding.
+- The dashboard hero breathes: the score rings space at 24 px on desktop, on phones the four rings spread evenly across the full width instead of clustering in the centre, and the briefing section separates from the greeting row at the same rhythm as the card padding.
 
 ### Changed
 

src/components/dashboard/hero/dashboard-hero.tsx

@@ -323,7 +323,17 @@ export function DashboardHero({
             collapses; missing selected rings render nothing. */}
           <div
             data-slot="dashboard-hero-rings"
-            className="flex shrink-0 flex-wrap items-center justify-center gap-4 md:justify-end md:gap-6"
+            className={cn(
+              // Mobile: the rings stack under the greeting as a full-width
+              // row that wraps to a 2-up grid at four rings. `justify-evenly`
+              // spreads them with equal space before / between / after so
+              // the block reads symmetric edge-to-edge instead of a centred
+              // cluster with dead outer margin; `gap-y-6` gives the wrapped
+              // rows the same breathing room as the horizontal spread.
+              // Desktop: back to a right-aligned inline row beside the copy.
+              "flex w-full flex-wrap items-center justify-evenly gap-x-3 gap-y-6",
+              "md:w-auto md:shrink-0 md:justify-end md:gap-6",
+            )}
           >
             {scoreRings.map((ring) => (
               <div