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.tsx

@@ -62,25 +62,31 @@ function SubjectColumn({ subject }: { subject: SubjectData }) {
         <div className={styles.barGroup}>
           {expectedPct != null && (
             <div className={styles.barRow}>
-              <div
-                ref={expectedRef}
-                className={`${styles.bar} ${styles.barExpected}`}
-                data-width={expectedPct}
-              />
-              <div className={styles.barLabel}>
-                {expectedPct.toFixed(0)}% <span className={styles.barLabelSuffix}>expected</span>
+              <div className={styles.barHeader}>
+                <span className={styles.barLabelSuffix}>Expected</span>
+                <span className={styles.barLabel}>{expectedPct.toFixed(0)}%</span>
+              </div>
+              <div className={styles.barTrack}>
+                <div
+                  ref={expectedRef}
+                  className={`${styles.bar} ${styles.barExpected}`}
+                  data-width={expectedPct}
+                />
               </div>
             </div>
           )}
           {exceedingPct != null && (
             <div className={styles.barRow}>
-              <div
-                ref={exceedingRef}
-                className={`${styles.bar} ${styles.barExceeding}`}
-                data-width={exceedingPct}
-              />
-              <div className={styles.barLabel}>
-                {exceedingPct.toFixed(0)}% <span className={styles.barLabelSuffix}>exceeding</span>
+              <div className={styles.barHeader}>
+                <span className={styles.barLabelSuffix}>Exceeding</span>
+                <span className={styles.barLabel}>{exceedingPct.toFixed(0)}%</span>
+              </div>
+              <div className={styles.barTrack}>
+                <div
+                  ref={exceedingRef}
+                  className={`${styles.bar} ${styles.barExceeding}`}
+                  data-width={exceedingPct}
+                />
               </div>
             </div>
           )}