From 22e9eb2d48b0d6623e88fd67cb6ca8e5e4074583 Mon Sep 17 00:00:00 2001
From: Tudor <tudor@Tudors-MacBook-Pro.local>
Date: Tue, 21 Jul 2026 10:01:10 +0100
Subject: [PATCH] fix(home): make Att8 bar match its numbers and separate
 safeguarding

Two internal-consistency fixes on the "What you'll see" mock:

- The Attainment 8 bar had drifted from the numbers beside it (fill 68%
  / line 57% vs a 54.8 score and 45.9 national avg). Restored the mock's
  original 1:1 value-to-percent mapping: fill 54.8%, national line 45.9%.
- The report card grouped "Safeguarding: Met" in the same five-point
  list as the graded areas, but safeguarding is a separate binary
  met/not-met judgement under the real framework. Moved it below the
  list behind a divider, with an outlined chip and a "separate check"
  label so it no longer reads as a graded area.

Verified with tsc --noEmit and next build.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
---
 nextjs-app/components/HomeView.module.css   | 23 +++++++++++++++++++++
 nextjs-app/components/HowItWorksSection.tsx | 12 +++++++----
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/nextjs-app/components/HomeView.module.css b/nextjs-app/components/HomeView.module.css
index 538de4b..cbe4fc0 100644
--- a/nextjs-app/components/HomeView.module.css
+++ b/nextjs-app/components/HomeView.module.css
@@ -922,6 +922,29 @@
   color: var(--accent-gold-text, #7a6800);
 }
 
+/* Safeguarding is a separate binary met/not-met judgement, not a graded area,
+   so it sits below the five-point list behind a divider with its own chip. */
+.rcSafeguarding {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: 0.05rem;
+  padding-top: 0.35rem;
+  border-top: 1px dashed var(--border-color, #e5dfd5);
+}
+
+.rcSep {
+  color: var(--text-muted, #8a847a);
+  font-style: italic;
+}
+
+.rcChipMet {
+  background: transparent;
+  color: var(--accent-teal, #2d7d7d);
+  border: 1px solid rgba(45, 125, 125, 0.4);
+}
+
 .ofstedMeta {
   font-size: 0.6rem;
   color: var(--text-muted, #6d685f);
diff --git a/nextjs-app/components/HowItWorksSection.tsx b/nextjs-app/components/HowItWorksSection.tsx
index 5927458..75a3783 100644
--- a/nextjs-app/components/HowItWorksSection.tsx
+++ b/nextjs-app/components/HowItWorksSection.tsx
@@ -19,12 +19,12 @@ export function HowItWorksSection() {
     { label: 'Ofsted', a: 'Outstanding', b: 'Good', aHi: true },
   ];
   // Report card (Ofsted's framework from Nov 2025): one rating per area of
-  // school life on a five-point scale, plus a stand-alone safeguarding outcome.
+  // school life on a five-point scale. Safeguarding is judged separately, as a
+  // binary met/not-met outcome — kept out of this list and shown on its own.
   const reportCard: Array<{ area: string; grade: string; good: boolean }> = [
     { area: 'Achievement', grade: 'Strong', good: true },
     { area: 'Curriculum & teaching', grade: 'Expected standard', good: false },
     { area: 'Attendance & behaviour', grade: 'Strong', good: true },
-    { area: 'Safeguarding', grade: 'Met', good: true },
   ];
 
   return (
@@ -62,8 +62,8 @@ export function HowItWorksSection() {
                 <div className={styles.att8BarWrap}>
                   <div className={styles.att8BarHead}><span>This school</span><span>National avg 45.9</span></div>
                   <div className={styles.att8Track}>
-                    <div className={styles.att8Fill} style={{ width: '68%' }} />
-                    <div className={styles.att8NatLine} style={{ left: '57%' }} />
+                    <div className={styles.att8Fill} style={{ width: '54.8%' }} />
+                    <div className={styles.att8NatLine} style={{ left: '45.9%' }} />
                   </div>
                 </div>
                 <div className={styles.att8Score}>
@@ -97,6 +97,10 @@ export function HowItWorksSection() {
                   </div>
                 ))}
               </div>
+              <div className={styles.rcSafeguarding}>
+                <span className={styles.rcArea}>Safeguarding <span className={styles.rcSep}>· separate check</span></span>
+                <span className={`${styles.rcChip} ${styles.rcChipMet}`}>Met</span>
+              </div>
               <div className={styles.ofstedMeta}>Full inspection · March 2026</div>
             </div>
           </div>