fix(detail): scale SATs cascade bars against full chart width

Labels were sharing a flex row with the bar, so the bar's width %
was computed against the flex remainder after the label rather than
the full chart area. A 96% bar rendered around the 75% ruler mark,
and mobile was worse. Move labels to a header row above each bar and
give the bar a full-width track, so X% now aligns with X% on the ruler.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

nextjs-app/components/SatsChart.module.css

@@ -75,18 +75,31 @@
   z-index: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.65rem;
   padding-top: 0.9rem;
 }
 
 .barRow {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.barHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
   gap: 0.5rem;
 }
 
-.bar {
+.barTrack {
+  width: 100%;
   height: 22px;
+  position: relative;
+}
+
+.bar {
+  height: 100%;
   border-radius: 6px;
   position: relative;
   transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -101,19 +114,20 @@
 }
 
 .barLabel {
-  font-size: 0.72rem;
-  font-weight: 600;
+  font-size: 0.75rem;
+  font-weight: 700;
   color: var(--text-primary, #1a1612);
   white-space: nowrap;
-  flex-shrink: 0;
   position: relative;
   z-index: 3;
 }
 
 .barLabelSuffix {
-  font-weight: 400;
+  font-weight: 500;
   color: var(--text-muted, #6d685f);
-  font-size: 0.68rem;
+  font-size: 0.62rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
 }
 
 /* ── Ruler ── */