refactor(stage): lead random mode with the sun track

src/stage/RandomStage.tsx

@@ -1,8 +1,9 @@
-// Responsibility: Random-mode stage orchestration — intro + pool status + summary + select all / clear all + collage or empty state. No sampling.
+// Responsibility: Random-mode stage orchestration — today's sun track, pool status, summary + select all /
+//       clear all, then the collage or the empty state. No sampling.
 import { randomStore, selectAll, clearAll } from "@/store/random.store";
 import { availableThemeIds } from "@/store/catalog.selectors";
 import { t } from "@/i18n";
-import { createMemo } from "solid-js";
+import { createMemo, Show } from "solid-js";
 import { WriteNote } from "./WriteNote";
 import { RandomStats } from "./RandomStats";
 import { RandomSunPath } from "./RandomSunPath";
@@ -17,12 +18,19 @@ export function RandomStage() {
 
   return (
     <>
-      <p class="max-w-145 font-display text-[15px] font-semibold leading-relaxed text-foreground">
-        {t("stage.randomIntro")}
-      </p>
+      {/* The track leads: it is the only part of this stage that moves during the day. An
+          empty pool has nothing drawn, so it stays out of the way then. */}
+      <Show when={poolSize() > 0}>
+        <RandomSunPath />
+      </Show>
       <WriteNote />
       <div class="flex flex-wrap items-center gap-x-5 gap-y-2">
         <RandomStats />
+        {/* The explanation sits in the space the figures leave, at caption size: it is a
+            note about the mode, not a heading over the stage. */}
+        <p class="min-w-0 max-w-120 flex-1 text-[11.5px] leading-relaxed text-muted-foreground">
+          {t("stage.randomIntro")}
+        </p>
         <div class="ml-auto flex items-center gap-4 text-[12px]">
           <button
             type="button"
@@ -42,16 +50,7 @@ export function RandomStage() {
           </button>
         </div>
       </div>
-      {poolSize() === 0 ? (
-        <PoolEmpty />
-      ) : (
-        <>
-          {/* The pool area reports rather than asks, so the track sits with it: it belongs
-              to the theme drawn for today, not to the whole pool. */}
-          <RandomSunPath />
-          <PoolCollage />
-        </>
-      )}
+      {poolSize() === 0 ? <PoolEmpty /> : <PoolCollage />}
       <RandomCommitRow />
     </>
   );

src/stage/RandomSunPath.tsx

@@ -55,6 +55,13 @@ export function RandomSunPath() {
     <Show when={list().length > 0 && current()}>
       {(cur) => (
         <div class="flex flex-col gap-1.5">
+          <SunPathPanel
+            wallpapers={list()}
+            current={cur()}
+            matchedEntry={matchedEntry() ?? null}
+            fullWidth
+          />
+          {/* Below the track, and quiet: it names the theme, it is not a heading. */}
           <div class="flex items-center gap-1.5 font-mono text-[10.5px] text-muted-foreground">
             <span class="size-1.5 shrink-0 rounded-full bg-success" />
             <span class="truncate">
@@ -63,11 +70,6 @@ export function RandomSunPath() {
               })}
             </span>
           </div>
-          <SunPathPanel
-            wallpapers={list()}
-            current={cur()}
-            matchedEntry={matchedEntry() ?? null}
-          />
         </div>
       )}
     </Show>

src/stage/SunPathPanel.tsx

@@ -31,6 +31,12 @@ interface Props {
   /** Entry the user picked; omit it, and `onSelect`, for a track that only reports. */
   selIndex?: number | null;
   onSelect?: (index: number | null) => void;
+  /**
+   * Fill the column instead of the fixed-mode card width. The random-mode stage is as wide as
+   * the window, and a narrow track centred in it reads as a floating island; there the track
+   * also becomes the day's own horizontal axis, so the azimuth labels spread out.
+   */
+  fullWidth?: boolean;
 }
 
 export function SunPathPanel(props: Props) {
@@ -78,7 +84,9 @@ export function SunPathPanel(props: Props) {
   );
 
   return (
-    <div class="mx-auto w-full max-w-155 shrink-0">
+    <div
+      class={clsx("w-full shrink-0", !props.fullWidth && "mx-auto max-w-155")}
+    >
       <div class="relative h-28 shrink-0 overflow-hidden rounded-xl border border-border bg-card shadow-[0_1px_2px_rgba(0,0,0,.05),0_6px_18px_rgba(0,0,0,.06)]">
         <div
           class={clsx(