fix(school-detail): hero Ofsted chip mislabels OEIF schools as Report Card

The API returns ``framework`` as the literal string "NULL" for older OEIF
inspections (it comes from the upstream ``event_type_grouping`` column),
not real null. The original render path checks ``=== 'ReportCard'`` and
correctly treats anything else as OEIF — but buildOfstedHeroChip inverted
that and treated anything not exactly equal to ``'OEIF'`` as Report Card,
so OLQH (inspected Nov 2023, Outstanding) was being labelled as a Report
Card school in the hero strip and the at-a-glance tile.

- Invert the helper: only branch into Report Card when framework is
  explicitly ``'ReportCard'``; treat OEIF / null / "NULL" / anything else
  as OEIF, and require ``overall_effectiveness`` to render the grade word.
- Replace the toneClass field (which reused .ofstedGrade{N} / .rcGrade{N}
  badge classes and dragged in their backgrounds) with a clean tone enum
  ``teal | green | gold | coral | neutral``. The serif Ofsted heroStat
  picked up the badge background and rendered as a green box around
  "Report Card" — gone now.
- Hero chip backgrounds use color-mix() against the tone variable so all
  five tones share one rule.

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

nextjs-app/components/SchoolDetailView.module.css

@@ -756,38 +756,26 @@
   margin-top: 0.15rem;
 }
 
-/* Tone variants — keep consistent with .ofstedGrade{N} / .rcGrade{N} */
-.heroChip.ofstedGrade1,
-.heroChip.rcGrade1,
-.heroChip.rcGrade2,
-.heroChipGood {
-  background: var(--accent-teal-bg, rgba(45, 125, 125, 0.08));
-  border-left-color: var(--accent-teal, #2d7d7d);
+/* Hero tone scheme — independent of the .ofstedGrade{N} / .rcGrade{N} badges
+   so the same tone class can be applied to a chip (background tint + border)
+   or a serif number (colour only) without one bleeding into the other. */
+.tone-teal { --hero-tone: var(--accent-teal, #2d7d7d); }
+.tone-green { --hero-tone: #3c8c3c; }
+.tone-gold { --hero-tone: var(--accent-gold, #c9a227); }
+.tone-coral { --hero-tone: var(--accent-coral, #e07256); }
+.tone-neutral { --hero-tone: var(--text-muted, #8a847a); }
+
+.heroChip.tone-teal,
+.heroChip.tone-green,
+.heroChip.tone-gold,
+.heroChip.tone-coral,
+.heroChip.tone-neutral {
+  border-left-color: var(--hero-tone);
+  background: color-mix(in srgb, var(--hero-tone) 10%, var(--bg-card, white));
 }
 
-.heroChip.ofstedGrade2 {
-  background: rgba(60, 140, 60, 0.08);
-  border-left-color: #3c8c3c;
-}
-
-.heroChip.ofstedGrade3,
-.heroChip.rcGrade3,
-.heroChipWarn {
-  background: var(--accent-gold-bg, rgba(201, 162, 39, 0.10));
-  border-left-color: var(--accent-gold, #c9a227);
-}
-
-.heroChip.ofstedGrade4,
-.heroChip.rcGrade4,
-.heroChip.rcGrade5 {
-  background: var(--accent-coral-bg, rgba(224, 114, 86, 0.10));
-  border-left-color: var(--accent-coral, #e07256);
-}
-
-.heroChip.heroChipNeutral {
+.heroChip.tone-neutral {
   background: var(--bg-secondary, #f3ede4);
-  border-left-color: var(--border-color, #e5dfd5);
-  color: var(--text-muted, #8a847a);
 }
 
 /* ── Hero at-a-glance stats (A3) ─────────────────────────────────────── */
@@ -824,15 +812,13 @@
   color: var(--text-primary, #1a1612);
 }
 
-.heroStatNumberSerif.ofstedGrade1 { color: var(--accent-teal, #2d7d7d); }
-.heroStatNumberSerif.ofstedGrade2 { color: #3c8c3c; }
-.heroStatNumberSerif.ofstedGrade3 { color: #b8920e; }
-.heroStatNumberSerif.ofstedGrade4 { color: var(--accent-coral, #e07256); }
-.heroStatNumberSerif.rcGrade1 { color: var(--accent-teal, #2d7d7d); }
-.heroStatNumberSerif.rcGrade2 { color: #3c8c3c; }
-.heroStatNumberSerif.rcGrade3 { color: #b8920e; }
-.heroStatNumberSerif.rcGrade4 { color: #c2410c; }
-.heroStatNumberSerif.rcGrade5 { color: var(--accent-coral, #e07256); }
+.heroStatNumberSerif.tone-teal,
+.heroStatNumberSerif.tone-green,
+.heroStatNumberSerif.tone-gold,
+.heroStatNumberSerif.tone-coral,
+.heroStatNumberSerif.tone-neutral {
+  color: var(--hero-tone);
+}
 
 .heroStatLabel {
   font-size: 0.6875rem;