From a27b9abd9f4a439ddc915ef5c40737077e32594b Mon Sep 17 00:00:00 2001
From: Tudor Sitaru <tudor.sitaru@gmail.com>
Date: Tue, 14 Apr 2026 13:52:00 +0100
Subject: [PATCH] style(sats): tighten cascade bars to match approved mockup

Bars drop from 22px to 14px with softer 4px radius, percentages render
in Playfair serif to match the rest of the detail page typography,
national-average line opacity bumped from 25% to 35% for legibility.
Subject name and ruler proportions also aligned with the mockup.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 nextjs-app/components/SatsChart.module.css | 38 ++++++++++++----------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/nextjs-app/components/SatsChart.module.css b/nextjs-app/components/SatsChart.module.css
index 741a088..54f9a34 100644
--- a/nextjs-app/components/SatsChart.module.css
+++ b/nextjs-app/components/SatsChart.module.css
@@ -3,7 +3,8 @@
 .container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 2rem;
+  gap: 1.75rem;
+  padding-top: 0.25rem;
 }
 
 /* ── Individual subject column ── */
@@ -12,12 +13,12 @@
 }
 
 .subjectName {
-  font-size: 0.7rem;
-  font-weight: 600;
+  font-size: 0.65rem;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   color: var(--text-muted, #6d685f);
-  margin-bottom: 0.65rem;
+  margin-bottom: 0.75rem;
 }
 
 .chartArea {
@@ -49,20 +50,20 @@
   top: 0;
   height: calc(100% - 20px);
   width: 1.5px;
-  background: rgba(224, 114, 86, 0.25); /* --accent-coral at 25% */
+  background: rgba(224, 114, 86, 0.35); /* --accent-coral at 35% */
   z-index: 2;
   pointer-events: none;
 }
 
 .natPill {
   position: absolute;
-  top: -8px;
+  top: -10px;
   transform: translateX(-50%);
   background: var(--accent-coral, #e07256);
   color: #fff;
   font-size: 0.55rem;
   font-weight: 700;
-  padding: 0.1rem 0.4rem;
+  padding: 0.1rem 0.35rem;
   border-radius: 4px;
   white-space: nowrap;
   z-index: 3;
@@ -75,14 +76,14 @@
   z-index: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.65rem;
+  gap: 0.35rem;
   padding-top: 0.9rem;
 }
 
 .barRow {
   display: flex;
   flex-direction: column;
-  gap: 0.2rem;
+  gap: 0.18rem;
 }
 
 .barHeader {
@@ -94,13 +95,13 @@
 
 .barTrack {
   width: 100%;
-  height: 22px;
+  height: 14px;
   position: relative;
 }
 
 .bar {
   height: 100%;
-  border-radius: 6px;
+  border-radius: 4px;
   position: relative;
   transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
@@ -114,7 +115,8 @@
 }
 
 .barLabel {
-  font-size: 0.75rem;
+  font-family: var(--font-playfair), 'Playfair Display', Georgia, serif;
+  font-size: 0.78rem;
   font-weight: 700;
   color: var(--text-primary, #1a1612);
   white-space: nowrap;
@@ -125,7 +127,7 @@
 .barLabelSuffix {
   font-weight: 500;
   color: var(--text-muted, #6d685f);
-  font-size: 0.62rem;
+  font-size: 0.6rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
 }
@@ -133,8 +135,8 @@
 /* ── Ruler ── */
 .ruler {
   position: relative;
-  height: 16px;
-  margin-top: 0.5rem;
+  height: 14px;
+  margin-top: 0.3rem;
   border-top: 1px solid var(--border-color, #e5dfd5);
 }
 
@@ -142,13 +144,13 @@
   position: absolute;
   top: 0;
   width: 1px;
-  height: 4px;
+  height: 3px;
   background: var(--border-color, #e5dfd5);
 }
 
 .rulerLabel {
   position: absolute;
-  top: 6px;
+  top: 5px;
   font-size: 0.5rem;
   font-weight: 500;
   color: var(--text-muted, #6d685f);