fix(ui): render safeguarding as a standard metric card for visual consistency

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

nextjs-app/components/SchoolDetailView.module.css

@@ -482,18 +482,7 @@
 .rcGrade4 { background: rgba(249, 115, 22, 0.12); color: #c2410c; }                        /* Needs attention */
 .rcGrade5 { background: rgba(224, 114, 86, 0.15); color: var(--accent-coral, #e07256); }   /* Urgent improvement */
 
-/* Safeguarding badge */
+/* Safeguarding value (used inside a standard metricCard) */
-.safeguardingRow {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-.safeguardingLabel {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--text-primary, #1a1612);
-}
 .safeguardingMet {
   display: inline-block;
   padding: 0.2rem 0.6rem;

nextjs-app/components/SchoolDetailView.tsx

@@ -220,15 +220,15 @@ export function SchoolDetailView({
               <p className={styles.ofstedDisclaimer}>
                 From November 2025, Ofsted replaced single overall grades with Report Cards rating schools across several areas.
               </p>
-              {ofsted.rc_safeguarding_met != null && (
-                <div className={styles.safeguardingRow}>
-                  <span className={styles.safeguardingLabel}>Safeguarding</span>
-                  <span className={ofsted.rc_safeguarding_met ? styles.safeguardingMet : styles.safeguardingNotMet}>
-                    {ofsted.rc_safeguarding_met ? 'Met' : 'Not met'}
-                  </span>
-                </div>
-              )}
               <div className={styles.metricsGrid}>
+                {ofsted.rc_safeguarding_met != null && (
+                  <div className={styles.metricCard}>
+                    <div className={styles.metricLabel}>Safeguarding</div>
+                    <div className={`${styles.metricValue} ${ofsted.rc_safeguarding_met ? styles.safeguardingMet : styles.safeguardingNotMet}`}>
+                      {ofsted.rc_safeguarding_met ? 'Met' : 'Not met'}
+                    </div>
+                  </div>
+                )}
                 {RC_CATEGORIES.map(({ key, label }) => {
                   const value = ofsted[key] as number | null;
                   return value != null ? (