fix(homepage): invert the widget stat hierarchy — numbers lead, labels recede

Stock Homepage builds each stat as a font-thin (weight 100) 13px value above a
font-bold 12px uppercase label, so the number you actually came to read is the
quietest thing in the card while its label shouts. Skyfall's rule is that
hierarchy comes emphatically from weight AND size, and that numbers are data.

Value now renders at --text-xl bold in tabular mono at --text-heading; label
drops to a --text-2xs tracked eyebrow at --text-faint. The well itself moves to
--surface-input, one step DOWN from the card it sits on, so stats read as inset
data rather than as another floating surface — a recess, so it takes the
hairline without the shadow.

Also drops .service-block from the generic .service-tag rule, which was what
pinned every number to --text-2xs in the first place.

Visible on Plex, Jellyfin, PaperlessNGX and Uptime Kuma.

stacks/homepage/conf/custom.css

@@ -448,6 +448,44 @@ body,
   font-variant-numeric: tabular-nums !important;
 }
 
+/* ---------- widget stat wells (Plex, Jellyfin, Paperless, Uptime Kuma) ----------
+   Stock Homepage builds each stat as:
+       <div class="font-thin text-sm">353</div>       <- the VALUE
+       <div class="font-bold text-xs uppercase">Movies</div>  <- the LABEL
+   which is exactly backwards. The number you actually came to read is
+   weight 100 at 13px; the label shouting beside it is weight 700. Skyfall's
+   rule is that hierarchy comes emphatically from weight AND size, and that
+   numbers are the data — so this inverts the pair: the value goes big, bold
+   and bright, the label drops to a quiet eyebrow.
+
+   The well itself is --surface-input, one step DOWN from the card it sits on,
+   so stats read as inset data rather than as another floating surface. Depth
+   here is a recess, so it takes the hairline without the shadow. */
+.service-block {
+  background: var(--surface-input) !important;
+  border: 1px solid var(--border-subtle) !important;
+  border-radius: var(--radius-sm) !important;
+  padding: var(--space-2) var(--space-1) !important;
+}
+
+.service-block > div:first-child {
+  color: var(--text-heading) !important;
+  font-family: var(--font-mono) !important;
+  font-size: var(--text-xl) !important;
+  font-weight: var(--weight-bold) !important;
+  line-height: var(--leading-tight) !important;
+  font-variant-numeric: tabular-nums !important;
+}
+
+.service-block > div:last-child {
+  color: var(--text-faint) !important;
+  font-family: var(--font-body) !important;
+  font-size: var(--text-2xs) !important;
+  font-weight: var(--weight-medium) !important;
+  letter-spacing: var(--tracking-caps) !important;
+  line-height: var(--leading-snug) !important;
+}
+
 /* ---------- tabs ----------
    The active rail is one of only two sanctioned accent expressions:
    a 2px accent bar plus an --accent-soft fill. No glow — glows are
@@ -526,8 +564,10 @@ body,
    Semantic colour is the whole point: the system communicates status with
    colour and icons, never emoji, and accents are semantic-ONLY. Stock
    Homepage paints every pill the same slate, which throws away the signal. */
+/* .service-block is deliberately NOT in this list — the stat wells get their
+   own treatment above, and folding them in here is what made every number
+   render at --text-2xs. */
 .service-tag,
-.service-block,
 .service-stats {
   background: var(--surface-raised) !important;
   border: 1px solid var(--border-subtle) !important;

stacks/homepage/theme/skyfall.css.in

@@ -104,6 +104,44 @@ body,
   font-variant-numeric: tabular-nums !important;
 }
 
+/* ---------- widget stat wells (Plex, Jellyfin, Paperless, Uptime Kuma) ----------
+   Stock Homepage builds each stat as:
+       <div class="font-thin text-sm">353</div>       <- the VALUE
+       <div class="font-bold text-xs uppercase">Movies</div>  <- the LABEL
+   which is exactly backwards. The number you actually came to read is
+   weight 100 at 13px; the label shouting beside it is weight 700. Skyfall's
+   rule is that hierarchy comes emphatically from weight AND size, and that
+   numbers are the data — so this inverts the pair: the value goes big, bold
+   and bright, the label drops to a quiet eyebrow.
+
+   The well itself is --surface-input, one step DOWN from the card it sits on,
+   so stats read as inset data rather than as another floating surface. Depth
+   here is a recess, so it takes the hairline without the shadow. */
+.service-block {
+  background: var(--surface-input) !important;
+  border: 1px solid var(--border-subtle) !important;
+  border-radius: var(--radius-sm) !important;
+  padding: var(--space-2) var(--space-1) !important;
+}
+
+.service-block > div:first-child {
+  color: var(--text-heading) !important;
+  font-family: var(--font-mono) !important;
+  font-size: var(--text-xl) !important;
+  font-weight: var(--weight-bold) !important;
+  line-height: var(--leading-tight) !important;
+  font-variant-numeric: tabular-nums !important;
+}
+
+.service-block > div:last-child {
+  color: var(--text-faint) !important;
+  font-family: var(--font-body) !important;
+  font-size: var(--text-2xs) !important;
+  font-weight: var(--weight-medium) !important;
+  letter-spacing: var(--tracking-caps) !important;
+  line-height: var(--leading-snug) !important;
+}
+
 /* ---------- tabs ----------
    The active rail is one of only two sanctioned accent expressions:
    a 2px accent bar plus an --accent-soft fill. No glow — glows are
@@ -182,8 +220,10 @@ body,
    Semantic colour is the whole point: the system communicates status with
    colour and icons, never emoji, and accents are semantic-ONLY. Stock
    Homepage paints every pill the same slate, which throws away the signal. */
+/* .service-block is deliberately NOT in this list — the stat wells get their
+   own treatment above, and folding them in here is what made every number
+   render at --text-2xs. */
 .service-tag,
-.service-block,
 .service-stats {
   background: var(--surface-raised) !important;
   border: 1px solid var(--border-subtle) !important;