From 7e1112929739e3c32b6e2989d4f2aab9e06cc979 Mon Sep 17 00:00:00 2001
From: Tudor <tudor@Tudors-MacBook-Pro.local>
Date: Thu, 2 Jul 2026 09:22:33 +0100
Subject: [PATCH] feat(school-rows): quiet chips for characteristics, uniform
 sizing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the faint middot separators on the characteristics line with
subtle borderless "quiet chips" so each attribute (type, age, faith,
gender) is its own scannable unit. Keep the coloured phase pill as the
one accent, and align every chip — including phase and provision tags —
to a single size/weight/radius (0.75rem / 600 / 4px).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 nextjs-app/components/SchoolRow.module.css    | 28 ++++++++-----
 nextjs-app/components/SchoolRow.tsx           |  8 ++--
 .../components/SecondarySchoolRow.module.css  | 40 +++++++++++--------
 nextjs-app/components/SecondarySchoolRow.tsx  |  4 +-
 4 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/nextjs-app/components/SchoolRow.module.css b/nextjs-app/components/SchoolRow.module.css
index ffb3830..9c17b2c 100644
--- a/nextjs-app/components/SchoolRow.module.css
+++ b/nextjs-app/components/SchoolRow.module.css
@@ -66,12 +66,12 @@
 /* Phase label pill */
 .phaseLabel {
   display: inline-block;
-  padding: 0.0625rem 0.375rem;
-  font-size: 0.6875rem;
+  padding: 0.0625rem 0.4rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  border-radius: 3px;
+  line-height: 1.4;
+  border-radius: 4px;
   white-space: nowrap;
-  margin-right: 0.25rem;
 }
 
 .phaseLabelPrimary    { background: var(--phase-primary-bg); color: var(--phase-primary-text); }
@@ -83,15 +83,21 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0;
-  font-size: 0.8rem;
-  color: var(--text-muted, #8a847a);
+  gap: 0.35rem;
 }
 
-.line2 span:not(:last-child)::after {
-  content: '·';
-  margin: 0 0.4rem;
-  color: var(--border-color, #e5dfd5);
+/* Quiet chip — one shared size/weight for every attribute (Ages, faith, etc.);
+   the phase pill keeps its colour but matches this sizing. */
+.attr {
+  display: inline-block;
+  padding: 0.0625rem 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+  border-radius: 4px;
+  white-space: nowrap;
+  background: rgba(26, 22, 18, 0.05);
+  color: var(--text-secondary, #5c564d);
 }
 
 /* Line 3: stats */
diff --git a/nextjs-app/components/SchoolRow.tsx b/nextjs-app/components/SchoolRow.tsx
index 5c5f96d..71fd763 100644
--- a/nextjs-app/components/SchoolRow.tsx
+++ b/nextjs-app/components/SchoolRow.tsx
@@ -74,10 +74,10 @@ export function SchoolRow({
               {phase.label}
             </span>
           )}
-          {school.school_type && <span>{school.school_type}</span>}
-          {school.age_range && <span>{formatAgeRange(school.age_range)}</span>}
-          {showDenomination && <span>{school.religious_denomination}</span>}
-          {showGender && <span>{school.gender}</span>}
+          {school.school_type && <span className={styles.attr}>{school.school_type}</span>}
+          {school.age_range && <span className={styles.attr}>{formatAgeRange(school.age_range)}</span>}
+          {showDenomination && <span className={styles.attr}>{school.religious_denomination}</span>}
+          {showGender && <span className={styles.attr}>{school.gender}</span>}
         </div>
 
         {/* Line 3: Key stats */}
diff --git a/nextjs-app/components/SecondarySchoolRow.module.css b/nextjs-app/components/SecondarySchoolRow.module.css
index 001e3b6..d4d56bb 100644
--- a/nextjs-app/components/SecondarySchoolRow.module.css
+++ b/nextjs-app/components/SecondarySchoolRow.module.css
@@ -68,15 +68,21 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0.25rem 0;
-  font-size: 0.8rem;
-  color: var(--text-muted, #8a847a);
+  gap: 0.35rem;
 }
 
-.line2 > span:not(.provisionTag):not(:last-child)::after {
-  content: '·';
-  margin: 0 0.4rem;
-  color: var(--border-color, #e5dfd5);
+/* Quiet chip — one shared size/weight for every attribute (Ages, type, etc.);
+   the phase pill keeps its colour but matches this sizing. */
+.attr {
+  display: inline-block;
+  padding: 0.0625rem 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+  border-radius: 4px;
+  white-space: nowrap;
+  background: rgba(26, 22, 18, 0.05);
+  color: var(--text-secondary, #5c564d);
 }
 
 /* Line 3: KS4 stats */
@@ -151,12 +157,12 @@
 /* Phase label pill */
 .phaseLabel {
   display: inline-block;
-  padding: 0.0625rem 0.375rem;
-  font-size: 0.6875rem;
+  padding: 0.0625rem 0.4rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  border-radius: 3px;
+  line-height: 1.4;
+  border-radius: 4px;
   white-space: nowrap;
-  margin-right: 0.25rem;
 }
 
 .phaseLabelSecondary  { background: var(--phase-secondary-bg); color: var(--phase-secondary-text); }
@@ -165,14 +171,14 @@
 
 .provisionTag {
   display: inline-block;
-  padding: 0.0625rem 0.375rem;
+  padding: 0.0625rem 0.4rem;
   font-size: 0.75rem;
-  font-weight: 500;
-  background: var(--bg-secondary, #f3ede4);
-  color: var(--text-secondary, #5c5650);
-  border-radius: 3px;
+  font-weight: 600;
+  line-height: 1.4;
+  background: rgba(26, 22, 18, 0.05);
+  color: var(--text-secondary, #5c564d);
+  border-radius: 4px;
   white-space: nowrap;
-  margin-left: 0.375rem;
 }
 
 .selectiveTag {
diff --git a/nextjs-app/components/SecondarySchoolRow.tsx b/nextjs-app/components/SecondarySchoolRow.tsx
index a302d6f..61097ae 100644
--- a/nextjs-app/components/SecondarySchoolRow.tsx
+++ b/nextjs-app/components/SecondarySchoolRow.tsx
@@ -83,8 +83,8 @@ export function SecondarySchoolRow({
               {phase.label}
             </span>
           )}
-          {school.school_type && <span>{school.school_type}</span>}
-          {school.age_range && <span>{formatAgeRange(school.age_range)}</span>}
+          {school.school_type && <span className={styles.attr}>{school.school_type}</span>}
+          {school.age_range && <span className={styles.attr}>{formatAgeRange(school.age_range)}</span>}
           {showGender && (
             <span className={styles.provisionTag}>{school.gender}</span>
           )}