/* Compare My School — shared stylesheet
   Editorial direction: warm cream + charcoal, Source Serif 4 headings,
   system sans body, burgundy accent, pill badges, clean Leaflet maps. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream: #f6f1e8;
  --cream-dim: #ece7de;
  --charcoal: #1e1e2c;
  --mid: #4a4a5a;
  --grey: #475569;
  --grey-light: #cbd5e1;
  --blue: #2563eb;
  --green: #15803d;
  --orange: #9a3412;
  --purple: #7c2d2c;        /* now burgundy, kept as variable name for backward compat */
  --accent: #7c2d2c;
  --teal: #0d9488;
  --amber: #b45309;
  --red: #b91c1c;
  --line: #e5e0d8;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--cream);
  color: var(--charcoal);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--charcoal); text-decoration: none; }
a:hover { color: var(--purple); }

h1, h2, h3, h4 { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }

/* ─── HEADER ─── */
.site-header {
  background: var(--charcoal); color: var(--cream);
  padding: 21px 24px 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--cream); }
.brand:hover { color: var(--cream); opacity: 0.85; }
.brand-mark {
  height: 40px; width: 40px; display: block; flex-shrink: 0;
  border-radius: 50%;
}
.brand-text {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 700; font-size: 1.32rem; letter-spacing: -0.01em;
  color: var(--cream); line-height: 1; white-space: nowrap;
}
.brand-text-accent { color: #d99a7c; }
@media (max-width: 600px) {
  .brand-text { font-size: 1.12rem; }
  .brand-mark { height: 34px; width: 34px; }
}
.brand-name { display: none; }
.header-meta {
  margin-left: auto; font-size: 0.66rem; color: #a0a8b8;
  text-align: right; line-height: 1.55;
}

.crumbs {
  max-width: 1280px; margin: 8px auto 0;
  font-size: 0.7rem; color: #a0a8b8;
}
.crumbs a { color: #a0a8b8; }
.crumbs a:hover { color: var(--cream); }
.crumb-sep { margin: 0 4px; opacity: 0.5; }
.crumb-current { color: var(--cream); font-weight: 500; }

/* ─── AD SLOTS ─── */
.ad-slot {
  max-width: 1280px; margin: 18px auto;
  background: var(--cream-dim); border: 1px dashed var(--line);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--grey); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.ad-leaderboard, .ad-footer { height: 90px; max-width: 728px; }
.ad-rect { height: 250px; max-width: 300px; }
.ad-placeholder { user-select: none; }

/* ─── MAIN PAGE LAYOUT ─── */
.page {
  max-width: 1280px; margin: 0 auto; padding: 0 24px 40px;
}

/* ─── HERO ─── */
.hero {
  padding: 36px 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.hero h1 {
  font-size: 2.2rem; margin-bottom: 10px;
}
.hero-accent { color: var(--purple); font-style: italic; }
.hero-sub {
  font-size: 1rem; color: var(--mid); max-width: 720px;
}
.hero-region h1, .hero-la h1, .hero-list h1 { font-size: 1.9rem; }

/* ─── REGION GRID (homepage) ─── */
.region-grid { margin-bottom: 40px; }
.region-grid h2 { font-size: 1.4rem; margin-bottom: 18px; }
.region-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.region-card, .la-card {
  display: block;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  transition: all 0.15s;
}
.region-card:hover, .la-card:hover {
  border-color: var(--purple);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12);
  transform: translateY(-1px);
}
.region-card h3, .la-card h3 {
  font-size: 1.05rem; margin-bottom: 8px; color: var(--charcoal);
}
.region-stats, .la-stats {
  display: flex; gap: 14px;
  font-size: 0.75rem; color: var(--mid); margin-bottom: 6px;
}
.region-stats strong, .la-stats strong { color: var(--charcoal); font-weight: 600; }
.region-score, .la-score {
  font-size: 0.72rem; color: var(--grey);
  border-top: 1px solid var(--line); padding-top: 6px; margin-top: 6px;
}
.region-score strong, .la-score strong { color: var(--purple); font-weight: 600; }

/* ─── LA GRID (region page) ─── */
.la-grid-section { margin: 40px 0; }
.la-grid-section h2 { font-size: 1.4rem; margin-bottom: 18px; }
.la-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* ─── MAP SECTION ─── */
.map-section {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 18px;
  margin-bottom: 28px;
}
.map-section h2 {
  font-size: 1.2rem; margin-bottom: 14px;
}
.map-container {
  width: 100%; height: 500px;
  border-radius: 8px; overflow: hidden;
  background: var(--cream-dim);
}
.map-container.map-small { height: 320px; }
.map-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 12px; font-size: 0.72rem; color: var(--mid);
}
.lg-item { display: inline-flex; align-items: center; gap: 5px; }
.lg-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--charcoal); display: inline-block;
}
.lg-note { margin-left: auto; color: var(--grey); font-size: 0.68rem; }

/* ─── TOP LISTS (homepage / region / LA) ─── */
.top-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
.top-col h2 { font-size: 1.25rem; margin-bottom: 14px; }
.top-list {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.top-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
}
.top-row:last-child { border-bottom: none; }
.top-row:hover { background: var(--cream-dim); }
.top-rank {
  font-size: 0.7rem; font-weight: 700; color: white;
  min-width: 24px; height: 24px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.top-info { flex: 1; min-width: 0; }
.top-name {
  display: block; font-size: 0.85rem; font-weight: 500;
  color: var(--charcoal);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top-meta { display: block; font-size: 0.7rem; color: var(--grey); margin-top: 2px; }
.see-all {
  display: block;
  text-align: center;
  margin-top: 10px;
  padding: 9px;
  background: white; border: 1px solid var(--line); border-radius: 8px;
  font-size: 0.78rem; font-weight: 500;
  color: var(--purple);
  transition: all 0.12s;
}
.see-all:hover {
  background: var(--purple); color: white; border-color: var(--purple);
}

/* ─── PILLS ─── */
.pill {
  font-size: 0.72rem; font-weight: 600;
  padding: 3px 9px; border-radius: 20px;
  white-space: nowrap;
  display: inline-block;
  flex-shrink: 0;
}
.pill-vhigh { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.pill-high  { background: #ecfccb; color: #3f6212; }
.pill-mid   { background: #fef9c3; color: #854d0e; }
.pill-avg   { background: #ffedd5; color: #9a3412; }
.pill-low   { background: #fee2e2; color: #991b1b; }
.pill-na    { background: #f1f5f9; color: #475569; }

/* ─── RANKED LIST (LA primary/secondary page) ─── */
.ranked-list { display: flex; flex-direction: column; gap: 8px; }
.list-row {
  display: flex; gap: 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  transition: all 0.15s;
}
.list-row:hover {
  border-color: var(--purple);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.1);
}
.list-rank {
  font-size: 0.85rem; font-weight: 700; color: white;
  min-width: 32px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.list-main { flex: 1; min-width: 0; }
.list-name-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.list-name {
  font-size: 0.95rem; font-weight: 600; color: var(--charcoal);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-meta {
  font-size: 0.72rem; color: var(--mid); margin-bottom: 8px;
}
.list-metrics {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 0.72rem;
}
.metric {
  display: inline-flex; flex-direction: column; gap: 1px;
}
.metric-label { color: var(--grey); font-size: 0.68rem; }
.metric-val { color: var(--charcoal); font-weight: 600; font-size: 0.85rem; }
.rank-tag {
  display: block; margin-top: 8px;
  font-size: 0.66rem; color: var(--grey);
}

/* ─── INDIVIDUAL SCHOOL PAGE ─── */
.school-hero {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.school-hero-main { flex: 1; }
.school-hero h1 { font-size: 2.1rem; margin-bottom: 8px; }
.school-subline {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 0.85rem; color: var(--mid); margin-bottom: 6px;
}
/* The subline is two self-contained groups — category info, then location info.
   Separators live INSIDE a group, so a wrap never leaves a dangling or leading
   middot, and the postcode always sits beside the town rather than on its own
   line. (.school-address is retained only for any page still on the old markup.) */
.sub-sep { font-style: normal; color: var(--grey-light); margin: 0 8px; }
.school-address { font-size: 0.8rem; color: var(--grey); }
.school-hero-score {
  text-align: center; flex-shrink: 0; padding-top: 4px;
}
.score-label {
  font-size: 0.68rem; color: var(--grey);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.score-pill {
  font-size: 1.5rem; padding: 8px 18px; font-weight: 700;
}

.ranks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
.rank-tile {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.rank-num {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 1.6rem; font-weight: 700;
  color: var(--purple);
  margin-bottom: 4px;
}
.rank-label {
  font-size: 0.72rem; color: var(--mid);
}

.school-section {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 22px;
}
/* Auto-generated overview box (rendered by templates.school_summary) */
.school-summary {
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 22px;
}
.school-summary h2 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.school-summary p {
  margin-bottom: 12px;
  color: var(--charcoal);
  font-size: 0.98rem;
}
.school-summary p:last-child {
  margin-bottom: 0;
  font-size: 0.78rem;
  color: var(--grey);
  font-style: italic;
}
/* All-through schools: note above the secondary (KS4) performance section */
.all-through-note {
  font-size: 0.85rem;
  color: var(--mid);
  margin-bottom: 14px;
}
/* First / infant school: explanatory panel in place of KS2 performance */
.first-school-notice {
  background: var(--cream-dim, #f7f4ee);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 18px 20px;
}
.first-school-notice p { margin: 0 0 10px; line-height: 1.55; color: var(--mid); }
.first-school-notice p:last-child { margin-bottom: 0; }
.first-school-notice .first-school-sub { font-size: 0.88rem; color: var(--grey); }
/* First-school hero badge replaces the composite-score pill */
.first-type-badge {
  font-size: 0.95rem; font-weight: 600;
  padding: 6px 14px; white-space: nowrap;
}
.first-type-ages {
  margin-top: 6px; font-size: 0.78rem; color: var(--grey);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.school-section h2 {
  font-size: 1.25rem; margin-bottom: 18px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.stat {
  padding: 14px;
  background: var(--cream-dim);
  border-radius: 8px;
}
.stat-label {
  font-size: 0.72rem; color: var(--mid);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.stat-value {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 1.6rem; font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.stat-note {
  font-size: 0.7rem; color: var(--grey);
}
.stat-bar {
  height: 6px; background: white; border-radius: 4px;
  overflow: hidden; margin: 6px 0;
}
.stat-fill { height: 100%; border-radius: 4px; }

.trend-row {
  margin-top: 18px; padding: 12px 14px;
  background: var(--cream-dim); border-radius: 8px;
  font-size: 0.82rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.trend-label { color: var(--mid); font-weight: 500; margin-right: 8px; }
.trend-prev { color: var(--grey); }
.trend-curr { color: var(--charcoal); font-weight: 600; }
.trend-up { color: var(--green); font-weight: 600; }
.trend-down { color: var(--red); font-weight: 600; }
.trend-flat { color: var(--grey); }

.demo-row {
  display: flex; flex-wrap: wrap; gap: 22px;
}
.demo-item {
  display: inline-flex; flex-direction: column;
}
.demo-label {
  font-size: 0.7rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.demo-val {
  font-size: 1.05rem; font-weight: 600; color: var(--charcoal);
}

.no-data {
  padding: 20px; background: var(--cream-dim); border-radius: 8px;
  color: var(--mid); font-size: 0.85rem;
}

/* ─── NEARBY SECTION ─── */
.nearby-section {
  background: white; border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 24px;
  margin-bottom: 22px;
}
.nearby-section h2 { font-size: 1.2rem; margin-bottom: 14px; }
.nearby-list { display: flex; flex-direction: column; gap: 6px; }
.nearby-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  transition: all 0.12s;
}
.nearby-row:hover {
  border-color: var(--purple); background: var(--cream-dim);
}
.nearby-info { flex: 1; min-width: 0; }
.nearby-name {
  display: block; font-size: 0.85rem; font-weight: 500; color: var(--charcoal);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nearby-meta { display: block; font-size: 0.7rem; color: var(--grey); }

/* ─── FOOTER ─── */
.site-footer {
  background: var(--charcoal); color: #a0a8b8;
  padding: 28px 24px 22px;
  margin-top: 40px;
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: 28px;
  font-size: 0.78rem;
}
.site-footer strong { color: var(--cream); font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-size: 0.95rem; }
.footer-tagline { font-size: 0.72rem; }
.footer-source { font-size: 0.72rem; line-height: 1.7; }
.footer-nav { display: flex; flex-direction: column; gap: 6px; text-align: right; }
.footer-nav a { color: #a0a8b8; font-size: 0.78rem; }
.footer-nav a:hover { color: var(--cream); }

/* ─── LEAFLET POPUP STYLING ─── */
.leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.16);
}
.leaflet-popup-content { margin: 12px 14px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.78rem; }
.pp b { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-size: 0.95rem; display: block; margin-bottom: 4px; }
.pp-meta { color: var(--grey); font-size: 0.72rem; }
.pp-nodata { color: var(--grey); font-size: 0.72rem; font-style: italic; display: inline-block; margin-top: 4px; }
.pp a { color: var(--purple); font-weight: 600; font-size: 0.78rem; display: inline-block; margin-top: 4px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .top-section { grid-template-columns: 1fr; }
  .ranks-grid { grid-template-columns: repeat(2, 1fr); }
  .school-hero { flex-direction: column; }
  .school-hero-score { align-self: flex-start; text-align: left; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-nav { flex-direction: row; text-align: left; }
  .header-meta { display: none; }
}
@media (max-width: 640px) {
  .page { padding: 0 16px 32px; }
  .hero { padding: 24px 0 18px; margin-bottom: 22px; }
  .hero h1, .school-hero h1 { font-size: 1.7rem; }
  .map-container { height: 380px; }
  .ranks-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rank-num { font-size: 1.3rem; }
  .school-section { padding: 16px 18px; }
  .stat-grid { gap: 12px; }
}

/* ─── OFFICIAL EXTERNAL LINKS ─── */
.official-links .official-blurb {
  color: var(--mid);
  font-size: 0.88rem;
  margin: -4px 0 14px;
}
.official-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.official-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--cream-dim);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.15s ease, transform 0.15s ease;
  position: relative;
}
.official-card::after {
  content: "↗";
  position: absolute;
  top: 12px;
  right: 14px;
  color: var(--grey);
  font-size: 0.85rem;
}
.official-card:hover {
  border-color: var(--purple);
  transform: translateY(-1px);
}
.official-card:hover::after { color: var(--purple); }
.official-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--charcoal);
}
.official-host {
  font-size: 0.75rem;
  color: var(--grey);
  font-variant: small-caps;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .official-grid { grid-template-columns: 1fr; }
}

/* ─── ACCESSIBILITY HELPERS ─── */
.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px; overflow: hidden;
  white-space: nowrap;
}

/* ─── HEADER SEARCH ─── */
.header-search {
  position: relative;
  flex: 1; max-width: 360px;
  margin: 0 18px;
}
.header-search input {
  width: 100%;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid #3a3a4a;
  background: #2a2a3a;
  color: var(--cream);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
}
.header-search input::placeholder { color: #8b8ba0; }
.header-search input:focus {
  border-color: var(--purple);
  background: #303045;
}
.search-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  overflow: hidden;
  z-index: 100;
}
.search-suggest:empty { display: none; }
.search-suggest .suggest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 0.82rem;
  color: var(--charcoal);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.search-suggest .suggest-row:last-child { border-bottom: none; }
.search-suggest .suggest-row:hover,
.search-suggest .suggest-active { background: var(--cream-dim); }
.search-suggest .suggest-text { flex: 1 1 auto; min-width: 0; }
.search-suggest .suggest-row strong {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 1px;
}
.search-suggest .suggest-meta {
  font-size: 0.7rem; color: var(--grey);
}
.search-suggest .suggest-badge {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #2f6f4f);
  background: var(--cream-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ─── GLOSSARY (?) ICON ─── */
.glossary-q {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--cream-dim);
  border: 1px solid var(--grey-light);
  color: var(--mid);
  font-size: 0.65rem; font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
  vertical-align: 1px;
}
.glossary-q:hover {
  background: var(--purple); color: white; border-color: var(--purple);
}

/* ─── YEAR PILL + LAST UPDATED ─── */
.school-hero-meta {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 4px;
  margin-right: 10px;
}
.year-pill {
  display: inline-block;
  padding: 3px 10px;
  background: var(--charcoal); color: var(--cream);
  border-radius: 14px;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.02em;
}
.last-updated {
  font-size: 0.7rem; color: var(--grey);
}

/* ─── SCORE CAVEAT ─── */
.score-caveat {
  text-align: center;
  font-size: 0.7rem; color: var(--mid);
  max-width: 200px;
  margin: 6px auto 0;
  line-height: 1.4;
}
.score-caveat a {
  color: var(--purple); text-decoration: underline;
}

/* ─── CATCHMENT NOTICE ─── */
.catchment-notice {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fff7ed;
  border-left: 3px solid #b45309;
  border-radius: 4px;
  font-size: 0.78rem; color: var(--mid);
  max-width: 720px;
}

/* ─── "WHY NO DATA?" LINK INSIDE STAT TILES ─── */
.why-no-data {
  display: inline-flex; align-items: center;
  margin-top: 4px;
  padding: 4px 9px;
  background: white;
  border: 1px dashed var(--grey-light);
  border-radius: 14px;
  font-size: 0.7rem; color: var(--purple); font-weight: 600;
  text-decoration: none;
}
.why-no-data::before { content: "?"; margin-right: 4px; }
.why-no-data:hover { background: var(--purple); color: white; border-color: var(--purple); }

/* ─── COHORT TOGGLE ─── */
.cohort-toggle {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 20px 0 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.cohort-toggle label {
  font-size: 0.85rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.cohort-toggle .cohort-checkbox { accent-color: var(--purple); }
.cohort-toggle .cohort-help {
  font-size: 0.74rem; color: var(--grey);
}
.cohort-toggle a { color: var(--purple); }

/* ─── NEAR-ME WIDGET (homepage) ─── */
.near-me-section {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 28px;
}
.near-me-section h2 { font-size: 1.3rem; margin-bottom: 6px; }
.near-me-blurb {
  color: var(--mid); font-size: 0.9rem; margin-bottom: 14px;
}
.near-me-form {
  display: flex; gap: 8px;
  max-width: 420px;
}
.near-me-form input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit; font-size: 0.95rem;
  text-transform: uppercase;
}
.near-me-form input:focus {
  outline: none; border-color: var(--purple);
}
.near-me-form button {
  padding: 10px 22px;
  background: var(--purple); color: white;
  border: none; border-radius: 8px;
  font-family: inherit; font-weight: 600; font-size: 0.9rem;
  cursor: pointer;
}
.near-me-form button:hover { background: #6d28d9; }
.near-me-status {
  margin-top: 10px; font-size: 0.82rem; color: var(--mid);
}
.near-me-status.near-me-error { color: var(--red); }
.near-me-results { margin-top: 18px; }
.near-me-results h3 {
  font-size: 1rem; margin-bottom: 10px;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
}

/* ─── COMPARE PAGE ─── */
.compare-pickers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: end;
  margin: 22px 0 18px;
}
.compare-picker { position: relative; }
.compare-picker label {
  font-size: 0.75rem;
  color: var(--grey);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 6px; display: block;
}
.compare-input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 0.95rem;
}
.compare-input:focus { outline: none; border-color: var(--purple); }
.compare-vs {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 1.3rem; color: var(--grey);
  padding-bottom: 10px;
}
.compare-suggest {
  position: absolute; top: 100%; left: 0; right: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  margin-top: 4px;
  max-height: 280px; overflow: auto;
  z-index: 50;
}
.compare-suggest:empty { display: none; }
.compare-suggest .suggest-row {
  display: block; padding: 9px 14px;
  font-size: 0.85rem; color: var(--charcoal);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.compare-suggest .suggest-row:last-child { border-bottom: none; }
.compare-suggest .suggest-row:hover { background: var(--cream-dim); }
.compare-suggest strong { display: block; font-weight: 600; margin-bottom: 1px; }
.compare-suggest .suggest-meta { font-size: 0.72rem; color: var(--grey); }
.compare-loading { color: var(--grey); font-size: 0.85rem; padding: 12px 0; }
.compare-table {
  width: 100%; border-collapse: collapse;
  margin: 14px 0 12px;
  font-size: 0.85rem;
}
.compare-table th, .compare-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  background: var(--cream-dim);
  font-size: 0.95rem; font-weight: 600;
}
.compare-table thead th a { color: var(--purple); }
.compare-meta { display: block; font-weight: 400; font-size: 0.72rem; color: var(--grey); margin-top: 2px; }
.compare-table tbody th { font-weight: 500; color: var(--mid); width: 36%; }
.compare-table td { color: var(--charcoal); font-weight: 600; }
.compare-table .section-row td {
  background: var(--cream-dim);
  font-size: 0.75rem; color: var(--grey);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600;
}
.compare-table .better-a td:nth-child(2) { background: #ecfdf5; color: #065f46; }
.compare-table .better-b td:nth-child(3) { background: #ecfdf5; color: #065f46; }
.compare-caveat { font-size: 0.78rem; color: var(--grey); margin-top: 12px; }
.article-lede { color: var(--mid); font-size: 1rem; max-width: 760px; margin-bottom: 18px; }
.article-h2 {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 1.2rem; margin: 22px 0 8px;
}
.article-footnote {
  margin-top: 14px; font-size: 0.78rem; color: var(--grey);
}
.article-footnote code {
  background: var(--cream-dim); padding: 2px 6px; border-radius: 4px;
  font-family: SF Mono, Menlo, monospace; font-size: 0.78rem;
}

/* ─── FOOTER FEEDBACK ─── */
.footer-feedback {
  font-size: 0.7rem; color: #a0a8b8; margin-top: 6px;
}
.footer-feedback a { color: var(--cream); text-decoration: underline; }
.footer-feedback-note { color: #707080; font-style: italic; }

/* ─── RESPONSIVE TWEAKS ─── */
@media (max-width: 900px) {
  .header-search { max-width: 200px; margin: 0 10px; }
  .school-hero-meta { align-items: flex-start; margin-right: 0; }
  .compare-pickers { grid-template-columns: 1fr; }
  .compare-vs { text-align: center; padding: 0; }
}
@media (max-width: 640px) {
  .header-search { display: none; }
  .compare-table th, .compare-table td { padding: 8px; font-size: 0.78rem; }
}

/* ─── 3-SCHOOL COMPARE UI ─── */
.compare-pickers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: end;
  margin: 22px 0 18px;
}
.compare-pickers .compare-vs { display: none; } /* legacy "vs" no longer needed */
.compare-picker-c { position: relative; }
.compare-remove {
  background: transparent;
  border: none;
  color: var(--grey);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: 6px;
  padding: 0 4px;
  line-height: 1;
}
.compare-remove:hover { color: var(--red); }
.compare-add-slot {
  display: flex; align-items: end;
}
.compare-add-btn {
  width: 100%;
  padding: 10px 14px;
  background: white;
  border: 1.5px dashed var(--grey-light);
  border-radius: 8px;
  color: var(--purple);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}
.compare-add-btn:hover {
  background: var(--purple);
  color: white;
  border-color: var(--purple);
  border-style: solid;
}

.compare-scroll {
  overflow-x: auto;
  margin: 14px 0 12px;
}
.compare-table.compare-cols-2 { min-width: 0; }
.compare-table.compare-cols-3 { min-width: 580px; }
.compare-table tbody td.cell-best {
  background: #ecfdf5;
  color: #065f46;
  font-weight: 700;
}
.compare-table tbody tr:hover td { background: #fafaf7; }
.compare-table tbody tr:hover td.cell-best { background: #d1fae5; }
.compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.compare-table tbody th {
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}

@media (max-width: 900px) {
  .compare-pickers { grid-template-columns: 1fr; gap: 12px; }
  .compare-add-slot { margin-top: 0; }
  .compare-table { font-size: 0.78rem; }
  .compare-table th, .compare-table td { padding: 8px; }
}


/* ─── COMPARE-FEATURE DISCOVERY ─── */

/* Header right-side nav with the Compare CTA */
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-cta {
  background: var(--accent); color: var(--cream);
  padding: 7px 14px; border-radius: 4px;
  font-weight: 600; font-size: 0.82rem; letter-spacing: 0.01em;
  border: 1px solid var(--accent);
  transition: opacity 0.12s, transform 0.12s;
  white-space: nowrap;
}
.nav-cta:hover { color: var(--cream); opacity: 0.9; transform: translateY(-1px); }

/* Hero CTA on the homepage */
.hero-cta {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px;
  background: white;
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  padding: 14px 20px;
  border-radius: 4px;
  color: var(--charcoal);
  max-width: 720px;
  transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
}
.hero-cta:hover {
  color: var(--charcoal);
  background: #fdfaf3;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(124, 45, 44, 0.08);
}
.hero-cta-icon {
  font-size: 1.5rem; color: var(--accent); line-height: 1; flex-shrink: 0;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
}
.hero-cta-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hero-cta-text strong {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 1.05rem; font-weight: 600; color: var(--charcoal);
}
.hero-cta-sub { font-size: 0.82rem; color: var(--mid); }
.hero-cta-arrow { color: var(--accent); font-size: 1.2rem; flex-shrink: 0; }

/* On a school detail page: 'Compare this school with another' */
.school-compare-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 4px 0 24px;
  padding: 10px 16px;
  background: white;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-weight: 600; font-size: 0.88rem;
  transition: background 0.12s, color 0.12s;
}
.school-compare-cta:hover {
  background: var(--accent); color: var(--cream);
}

/* Compress the header CTA on narrow screens */
@media (max-width: 560px) {
  .nav-cta { padding: 6px 10px; font-size: 0.78rem; }
  .hero-cta { padding: 12px 14px; gap: 10px; }
  .hero-cta-text strong { font-size: 1rem; }
  .hero-cta-sub { font-size: 0.78rem; }
}

/* ─── Top-N list filters (cohort, selective) ───────────────────────────── */
.row-filters {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 22px;
  padding: 12px 16px;
  margin: 18px 0;
  background: var(--cream-dim, #f5efe2);
  border: 1px solid var(--grey-light, #e0d9c5);
  border-radius: 8px;
  font-size: 0.92rem;
}
.row-filter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.row-filter input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent, #7c3aed); }
.row-filter-hint { color: var(--mid, #6b6b80); font-weight: 400; }
.row-filter-note { flex-basis: 100%; margin: 0; font-size: 0.82rem; color: var(--mid, #6b6b80); }

/* Visual feedback when rows are hidden */
.top-row.is-hidden,
.list-row.is-hidden { display: none; }

/* Stronger 'tied' rank prefix */
.top-rank.is-tied::before,
.list-rank.is-tied::before { content: "="; font-weight: 700; margin-right: 1px; opacity: 0.95; }

/* ─── Ofsted per-area card grid (v2) ────────────────────────────────────── */
/*  Renders below the Performance section. Visually matches the .stat cards
    so a parent reads them as parallel pieces of information. Colour is
    applied as a left border accent + a coloured grade chip, NOT a solid
    background, so the cards still feel like part of the page rather than
    pulsing decorations. */
.ofsted-section {
  margin: 32px 0;
  padding: 22px 24px;
  background: var(--cream-dim, #f5efe2);
  border-radius: 12px;
}
.ofsted-section-head { margin-bottom: 16px; }
.ofsted-section-head h2 {
  margin: 0 0 4px;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 1.35rem; font-weight: 700;
  color: var(--charcoal, #1e1e2c);
}
.ofsted-meta { margin: 0; font-size: 0.85rem; color: var(--mid, #6b6b80); }
.ofsted-meta a { color: var(--accent, #7c3aed); text-decoration: none; }
.ofsted-meta a:hover { text-decoration: underline; }

.ofsted-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.ofsted-card {
  padding: 14px;
  background: #fff;
  border-radius: 8px;
  border-left: 4px solid #475569;     /* default grey; per-grade classes override */
  display: flex; flex-direction: column; gap: 6px;
}
.ofsted-cat {
  font-size: 0.72rem; color: var(--mid, #6b6b80);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ofsted-grade {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 1.25rem; font-weight: 700;
  color: var(--charcoal, #1e1e2c);
}

/* Card accent colours.
   - outstanding (deep green): Outstanding / Exceptional — top of scale
   - good        (mid green):  Good / Strong standard
   - secure      (sage green): Expected standard — meets standard, positive
   - ri          (amber):      Requires improvement / Needs attention
   - inadequate  (red):        Inadequate / Urgent improvement
   - other       (grey):       safeguarding "Yes" / unknown
   All chosen to pass WCAG AA against the white card background. */
.ofsted-card.ofsted-outstanding { border-left-color: #15803d; }
.ofsted-card.ofsted-good        { border-left-color: #4d7c0f; }
.ofsted-card.ofsted-secure      { border-left-color: #65a30d; }
.ofsted-card.ofsted-ri          { border-left-color: #b45309; }
.ofsted-card.ofsted-inadequate  { border-left-color: #b91c1c; }
.ofsted-card.ofsted-other       { border-left-color: #475569; }

@media (max-width: 560px) {
  .ofsted-section { padding: 16px; }
}

/* ─── 'Why no data?' link under empty progress tiles ───────────────────── */
.why-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--accent, #7c3aed);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.why-link:hover { opacity: 0.8; }

/* ─── Enhancements: compare buttons, 3-year trend, homepage tools ───────── */

/* Restyle the school-page compare CTA: filled, more prominent, with arrow */
.school-compare-cta {
  background: var(--accent);
  color: var(--cream);
  border: 1px solid var(--accent);
  padding: 12px 18px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.school-compare-cta:hover { background: #5e2120; border-color: #5e2120; color: #fff; }
.school-compare-cta::after { content: "→"; margin-left: 6px; transition: transform 0.12s; }
.school-compare-cta:hover::after { transform: translateX(3px); }

/* Second CTA near the foot of the page */
.school-compare-cta-wrap { text-align: center; margin: 28px 0 8px; }
.school-compare-cta-bottom { margin: 0; font-size: 0.95rem; padding: 13px 22px; }

/* Three-year trend mini-chart */
.trend-3yr {
  margin-top: 18px; padding: 14px 16px;
  background: var(--cream-dim); border-radius: 8px;
}
.trend-3yr-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 6px 14px;
  font-size: 0.82rem; margin-bottom: 6px;
}
.trend-3yr-title { font-weight: 600; color: var(--charcoal); }
.trend-spark { width: 100%; max-width: 340px; height: auto; display: block; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--accent); stroke: var(--cream); stroke-width: 1.5; }
.spark-val { fill: var(--charcoal); font-size: 12px; font-weight: 600; }
.spark-yr { fill: var(--grey); font-size: 11px; }

/* Homepage Find & Compare section */
.home-tools { margin: 22px 0 8px; }
.home-tools h1 { font-size: 1.7rem; margin-bottom: 6px; }
.home-tools h2 { margin-bottom: 6px; }
.home-tools-sub { color: var(--mid); font-size: 0.92rem; margin-bottom: 16px; }
.home-tools-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: stretch; }
@media (max-width: 760px) { .home-tools-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .home-tools h1 { font-size: 1.5rem; } }

.tool-card {
  background: white; border: 1px solid var(--line);
  border-radius: 10px; padding: 18px 18px 20px;
}
.tool-card h3 { font-size: 1.02rem; margin-bottom: 4px; }
.tool-card .tool-hint { color: var(--mid); font-size: 0.84rem; margin-bottom: 12px; }

/* Compare widget */
.cmp-slots { display: grid; gap: 10px; }
.cmp-slot { position: relative; }
.cmp-input, .near-me-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; font-size: 0.92rem;
  border: 1px solid var(--grey-light); border-radius: 6px;
  background: var(--cream); color: var(--charcoal);
}
.cmp-input:focus, .near-me-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.cmp-suggest, .near-me-suggest {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  background: white; border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 6px 6px; max-height: 260px; overflow-y: auto;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
.cmp-suggest:empty { display: none; }
.cmp-suggest-row { padding: 8px 12px; cursor: pointer; font-size: 0.88rem; }
.cmp-suggest-row:hover, .cmp-suggest-row.active { background: var(--cream-dim); }
.cmp-suggest-row .s-meta { color: var(--grey); font-size: 0.78rem; }

.cmp-result { margin-top: 14px; overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.cmp-table th, .cmp-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp-table th { background: var(--cream-dim); font-weight: 600; }
.cmp-table td.metric { color: var(--mid); }
.cmp-remove { cursor: pointer; color: var(--accent); font-weight: 700; border: none; background: none; font-size: 1rem; }
.cmp-actions { margin-top: 12px; }
.cmp-open {
  display: inline-block; padding: 9px 16px; border-radius: 6px;
  background: var(--accent); color: var(--cream); font-weight: 600; font-size: 0.86rem;
}
.cmp-open:hover { background: #5e2120; }

/* Near-me widget */
.near-me-form { display: flex; gap: 8px; }
.near-me-form .near-me-input { flex: 1; }
.near-me-btn {
  padding: 10px 16px; border: none; border-radius: 6px; cursor: pointer;
  background: var(--accent); color: var(--cream); font-weight: 600; font-size: 0.9rem;
}
.near-me-btn:hover { background: #5e2120; }
.near-me-status { font-size: 0.82rem; color: var(--grey); margin-top: 8px; min-height: 1em; }
.near-me-status.near-me-error { color: var(--red); }
.near-me-results { margin-top: 10px; display: grid; gap: 6px; }
.near-me-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 0.86rem; background: var(--cream);
}
.near-me-row .nm-dist { color: var(--grey); font-size: 0.78rem; }
.near-me-row .pill { font-size: 0.78rem; }

/* Boxless 'Schools near you' search panel (homepage) */
.near-panel {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 14px;
  padding: 20px 18px; height: 100%;
}
.near-pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--cream-dim); color: var(--accent);
}
.near-title { font-size: 1.25rem; margin: 0; }
.near-panel .near-me-form {
  display: flex; align-items: center; gap: 0;
  width: 100%; max-width: 360px;
  background: white; border: 1px solid var(--grey-light);
  border-radius: 999px; padding: 4px 4px 4px 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.near-panel .near-me-form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,45,44,0.12);
}
.near-panel .near-me-input {
  flex: 1; min-width: 0; border: none; background: transparent;
  padding: 9px 12px; font-size: 0.92rem; color: var(--charcoal);
}
.near-panel .near-me-input:focus { outline: none; }
.near-panel .near-me-btn { border-radius: 999px; padding: 9px 20px; flex-shrink: 0; }
.near-panel .near-me-status { margin-top: 0; }
.near-panel #near-me-output { width: 100%; }
@media (max-width: 760px) {
  .near-panel { padding: 8px 0 4px; height: auto; }
}

/* Compare widget: highlighted composite row + linked school names */
.cmp-table th a { color: var(--accent); font-weight: 700; }
.cmp-table th a:hover { text-decoration: underline; }
.cmp-row-hl td { background: var(--cream-dim); font-weight: 600; }

/* Multi-metric three-year trend grid (school pages) — v2 */
.school-trends { margin-top: 20px; }
.trends-title { font-size: 1rem; margin: 0 0 4px; }
.trends-note { color: var(--mid); font-size: 0.82rem; margin: 0 0 14px; max-width: 760px; }
.trends-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .trends-grid { grid-template-columns: 1fr; } }
.trend-card { background: var(--cream-dim); border-radius: 8px; padding: 12px 14px; }
.tc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tc-label { font-size: 0.78rem; font-weight: 600; color: var(--charcoal); }
.tc-delta { font-size: 0.72rem; font-weight: 600; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.tc-up   { color: #166534; background: #dcfce7; }
.tc-down { color: var(--red); background: #fdeaea; }
.tc-flat { color: var(--grey); background: #e3e1da; }
.tc-chart { position: relative; height: 52px; }
.tc-yaxis { position: absolute; left: 0; top: 0; bottom: 0; width: 20px; }
.tc-yaxis span { position: absolute; right: 0; font-size: 9px; color: #9a958c; line-height: 1; }
.tc-plot { position: absolute; left: 26px; right: 2px; top: 0; bottom: 0; }
.tc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tc-gridline { stroke: #d7d0c2; stroke-width: 1; }
.tc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-dot { position: absolute; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; transform: translate(-50%, -50%); }
.tc-dot-cur { width: 9px; height: 9px; border: 1.5px solid var(--cream-dim); }
.tc-points { display: flex; margin-top: 4px; padding-left: 26px; padding-right: 2px; }
.tc-pt { flex: 1; text-align: center; }
.tc-pt b { font-size: 13.5px; font-weight: 600; color: var(--charcoal); display: block; }
.tc-pt b.tc-cur { color: var(--accent); }
.tc-yr { font-size: 11px; color: var(--grey); }

/* Compare widget — header + input/chip slots (v2) */
.cmp-header { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.cmp-header-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--accent); color: var(--cream); border-radius: 8px; font-size: 1.1rem; flex-shrink: 0; }
.cmp-header-title { font-size: 1.15rem; margin: 0; }
.cmp-slots { display: flex; flex-direction: column; gap: 8px; }
.cmp-slot { position: relative; display: flex; align-items: center; gap: 10px; border: 1px solid var(--grey-light); border-radius: 8px; padding: 9px 12px; background: var(--cream); }
.cmp-slot-optional { border-style: dashed; background: white; }
.cmp-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; background: var(--cream-dim); color: var(--accent); flex-shrink: 0; }
.cmp-num-on { background: var(--accent); color: #fff; }
.cmp-search-icon { color: var(--accent); opacity: 0.5; font-size: 1rem; flex-shrink: 0; }
.cmp-input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 0.92rem; color: var(--charcoal); outline: none; padding: 2px 0; min-width: 0; }
.cmp-input::placeholder { color: #9a958c; }
.cmp-name { flex: 1; font-size: 0.92rem; font-weight: 500; color: var(--charcoal); }
.cmp-x { border: none; background: none; color: var(--accent); font-weight: 700; font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0 2px; }
.cmp-x:hover { color: var(--red); }
.cmp-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: white; border: 1px solid var(--line); border-radius: 8px; max-height: 260px; overflow-y: auto; box-shadow: 0 6px 16px rgba(0,0,0,0.10); }
.cmp-suggest:empty { display: none; }
.cmp-suggest-row { padding: 8px 12px; cursor: pointer; font-size: 0.88rem; }
.cmp-suggest-row:hover { background: var(--cream-dim); }
.cmp-suggest-row .s-meta { color: var(--grey); font-size: 0.78rem; }


/* ── Phone-only: the composite-score block sits alone in a column with the
   whole right-hand side empty, so give it the full width, centre it and
   size it up. Desktop and tablet (>640px) are untouched. ───────────────── */
@media (max-width: 640px) {
  .school-hero { padding-bottom: 14px; }
  .school-hero-score { align-self: stretch; text-align: center; padding-top: 2px; }
  .school-hero-score .score-label { display: none; }
  .school-hero-score .score-pill { font-size: 2rem; padding: 9px 26px; border-radius: 24px; }
  .school-hero-score .first-type-badge { font-size: 1.1rem; padding: 9px 20px; }
  .school-hero-score .first-type-ages { margin-top: 8px; }
}

/* The composite score links through to the methodology page — it must not look
   like body-copy link text, so it keeps the pill's own colour and weight. */
.score-link { text-decoration: none; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease; }
.score-link:hover, .score-link:focus-visible { filter: brightness(0.97); box-shadow: 0 0 0 3px rgba(30,30,44,0.10); }
.school-postcode { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Phone-only readability floor. Several labels sit at 0.66–0.70rem (~11px),
   below the ~12px that is comfortable on a phone and that Google's mobile
   readability check looks for. Lifted only at phone widths so desktop grids,
   which are sized around the smaller text, are unchanged. SVG chart labels
   (.spark-yr, .tc-yr, .tc-yaxis, .cmp-num) are deliberately NOT touched —
   they are chart furniture inside fixed viewBox geometry, not body text. ── */
@media (max-width: 640px) {
  .crumbs, .lg-note, .top-rank, .top-meta, .metric-label, .rank-tag,
  .stat-note, .demo-label, .nearby-meta, .year-pill, .last-updated,
  .score-caveat, .why-no-data, .footer-feedback, .glossary-q, .ad-slot,
  .search-suggest .suggest-meta { font-size: 0.75rem; }
  .search-suggest .suggest-badge { font-size: 0.7rem; }
}

/* ── Unified hero search ──────────────────────────────────────────────────
   One box for school name, postcode or area, replacing the postcode-only
   "Schools near you" form. Mirrors the pill styling the old form had, plus
   position:relative so the suggestion dropdown anchors to it. Note the old
   `.near-me-form input { text-transform: uppercase }` deliberately does NOT
   apply here — it was right for postcodes, wrong for school names. ──────── */
.hero-search-wrap {
  position: relative;
  display: flex; align-items: center; gap: 0;
  width: 100%; max-width: 420px;
  background: white; border: 1px solid var(--grey-light); border-radius: 999px;
}
.hero-search-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,45,44,0.12); }
.hero-search-wrap .near-me-input {
  flex: 1; min-width: 0; border: none; background: transparent;
  padding: 10px 16px; font-size: 0.92rem; color: var(--charcoal);
  text-transform: none;
}
.hero-search-wrap .near-me-input:focus { outline: none; }
.hero-search-wrap .near-me-input::-webkit-search-cancel-button { cursor: pointer; }
.hero-search-wrap .near-me-btn { border-radius: 999px; padding: 9px 20px; flex-shrink: 0; margin: 2px; }
.hero-suggest { text-align: left; z-index: 40; }
.hero-search-hint { margin: 0; font-size: 0.78rem; color: var(--grey); max-width: 420px; }
@media (max-width: 640px) {
  .hero-search-wrap { max-width: none; }
  .hero-search-hint { font-size: 0.75rem; }
}

/* ── Getting a place (admissions) ─────────────────────────────────────────── */
.adm-section .adm-lead { font-size: 1.02rem; line-height: 1.55; margin: 0 0 1rem; }
.adm-grid { margin-bottom: .75rem; }
.adm-stat .stat-fill { background: #2563eb; }
.adm-stat.adm-easy .stat-fill { background: #15803d; }
.adm-stat.adm-mid .stat-fill  { background: #b45309; }
.adm-stat.adm-hard .stat-fill { background: #b91c1c; }
.adm-stat.adm-cutoff .stat-value { font-variant-numeric: tabular-nums; }
.adm-note { font-size: .88rem; color: #4b5563; line-height: 1.5; margin: .35rem 0 0; }
.adm-caution { border-left: 3px solid #d97706; padding-left: .6rem; }
.adm-caution-mark { color: #b45309; font-weight: 700; margin-left: 1px; }
.adm-src  { font-size: .82rem; color: #6b7280; margin: .4rem 0 0; }
.adm-src a { color: inherit; }
.adm-trend { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: .5rem 0 .25rem; }
.adm-trend-label { font-size: .85rem; color: #4b5563; }
.adm-bars { display: inline-flex; align-items: flex-end; gap: .35rem; height: 58px; }
.adm-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
           height: 100%; width: 26px; }
.adm-bar i { display: block; width: 100%; background: #93c5fd; border-radius: 2px 2px 0 0; }
.adm-bar.adm-bar-over i { background: #2563eb; }
.adm-bar.adm-bar-na i { background: #e5e7eb; }
.adm-bar b { font-size: .68rem; font-weight: 500; color: #6b7280; margin-top: .2rem; }
.demo-item .demo-sub { display: block; font-size: .75rem; color: #6b7280; }
@media (max-width: 640px) {
  .adm-trend { gap: .5rem; }
  .adm-bar { width: 20px; }
}

/* ─── 24 Sept 2026: admissions trend line chart ─── */
.adm-trend { display: block; margin: .9rem 0 .4rem; }
.adm-trend .adm-trend-label { font-size: .9rem; font-weight: 600; color: var(--charcoal); margin-bottom: .35rem; }
.adm-chart { display: block; width: 100%; max-width: 480px; height: auto; overflow: visible; }
.adm-chart .adm-grid { stroke: #e5e0d8; stroke-width: 1; }
.adm-chart .adm-ylab, .adm-chart .adm-xlab { font-size: 11px; fill: #6b7280; }
.adm-chart .adm-ref { stroke: #dc2626; stroke-width: 2; stroke-dasharray: 7 6; }
.adm-chart .adm-reflab { font-size: 10.5px; fill: #b91c1c; font-weight: 600; }
.adm-chart .adm-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.adm-chart .adm-pt { fill: #fff; stroke: var(--blue); stroke-width: 2.5; }
.adm-chart .adm-pt-over { fill: var(--blue); }
.adm-chart .adm-val { font-size: 11.5px; font-weight: 700; fill: var(--charcoal); }
.adm-chart .adm-na { font-size: 12px; fill: #9ca3af; font-style: italic; }
.adm-trend-note { font-size: .8rem; color: #6b7280; margin: .3rem 0 0; }

/* ─── 24 Sept 2026: (?) explainers on the school profile ─── */
.info-tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-left: 5px; padding: 0; vertical-align: 1px;
  border-radius: 50%; border: 1px solid var(--grey-light); background: #fff;
  color: var(--grey); font: 700 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: help;
}
.info-tip:hover, .info-tip:focus { border-color: var(--purple); color: var(--purple); outline: none; }
.info-tip:hover::after, .info-tip:focus::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: min(260px, 80vw); z-index: 30;
  padding: 8px 10px; border-radius: 8px;
  background: var(--charcoal); color: #fff;
  font: 400 12.5px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-align: left; white-space: normal; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
@media (max-width: 640px) {
  /* on phones show the explanation as a bar pinned to the bottom of the screen, so it always fits */
  .info-tip:hover::after, .info-tip:focus::after {
    position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto;
    transform: none; width: auto; max-width: none; font-size: 14px; padding: 12px 14px;
  }
}

/* ─── 24 Sept 2026: area pages on phones ─── */
.top-section > .top-col { min-width: 0; }            /* long names no longer force sideways scrolling */
.rankings-head { margin: -8px 0 18px; }
.rankings-head h2 { font-size: 1.5rem; margin-bottom: 4px; }
.rankings-head p { font-size: .85rem; color: var(--grey); margin: 0; }
@media (max-width: 640px) {
  .top-name { white-space: normal; overflow: visible; }
  .map-section .map-container:not(.map-small) { height: 300px; }
  .map-section { padding: 12px; margin-bottom: 18px; }
}

/* 25 Sept: first-preferences chart restyled as a trend card (matches .trend-card) */
.trend-card.adm-trend { display: block; margin: .9rem 0 .5rem; max-width: 620px; }
.adm-trend .tc-label { font-size: .82rem; }
.adm-ref-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed #dc2626; pointer-events: none; }
.adm-ref-lab { position: absolute; right: 2px; font-size: 9.5px; font-weight: 600; color: #b91c1c; line-height: 1;
               background: var(--cream-dim); padding: 0 2px; pointer-events: none; }
.adm-trend .tc-dot { z-index: 1; }
.adm-trend .adm-trend-note { font-size: .78rem; color: var(--grey); margin: .5rem 0 0; }

/* ─── 29 Sept 2026: grouped school profile ─── */
.pf-facts {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0;
}
.pf-fact {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-radius: 8px; background: var(--cream-dim);
}
.pf-fact dt {
  font-size: .68rem; color: var(--grey); text-transform: uppercase; letter-spacing: .04em;
}
.pf-fact dd { margin: 0; font-size: .95rem; font-weight: 600; color: var(--charcoal); }
.pf-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.pf-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 12px;
  background: #fff;
}
.pf-card-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: .8rem; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px;
}
.pf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf-stat { min-width: 0; }
.pf-label { font-size: .8rem; color: var(--mid); line-height: 1.3; }
.pf-val { font-size: 1.45rem; font-weight: 700; color: var(--charcoal); line-height: 1.2; margin-top: 2px; }
.pf-typ { font-size: .74rem; color: var(--grey); margin-top: 2px; }
.pf-note { font-size: .78rem; color: var(--grey); margin: 12px 0 0; }
@media (max-width: 640px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-val { font-size: 1.3rem; }
}

/* ─── 29 Sept 2026: Mediavine's required privacy clause (inserted verbatim) ─── */
.mv-clause { color: #4a4a5a; max-width: 760px; margin: 0 0 14px; }
.mv-clause h3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--charcoal); margin: 16px 0 8px; }
.mv-clause p { margin: 0 0 12px; }
.mv-clause ul { margin: 0 0 12px 22px; }
.mv-clause li { margin-bottom: 4px; }

/* ─── Compare Schools USA additions (same visual language as the UK site) ─── */
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 100; }
.skip-link:focus { left: 12px; color: #fff; }
:focus-visible { outline: 3px solid #d99a7c; outline-offset: 2px; }
.score-of { font-size: 0.55em; font-weight: 600; opacity: 0.75; margin-left: 1px; }
.ranks-grid { margin-bottom: 14px; }
.score-caveat { margin: 0 0 26px; }
.state-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.rank-num-sm { font-size: 1.05rem !important; line-height: 1.25; }
@media (max-width: 760px) { .state-facts { grid-template-columns: 1fr 1fr; gap: 8px; } }

/* full published results table */
.results-detail { margin-top: 18px; }
.results-detail summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: 0.92rem; padding: 6px 0; }
.data-table { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 0.86rem; margin-top: 8px; }
.data-table th, .data-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { background: var(--cream-dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mid); font-weight: 600; }
.data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table tbody tr:last-child td { border-bottom: none; }

/* ranked lists grouped by school type (district / city pages) */
.list-group { margin-bottom: 34px; }
.list-group-title { font-size: 1.35rem; margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; }
.list-count { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.78rem; font-weight: 600; color: var(--grey); background: var(--cream-dim); border-radius: 20px; padding: 2px 9px; }
.list-row[hidden], .list-group[hidden] { display: none !important; }

/* state page A-Z lists */
.az-details { margin-top: 16px; background: white; border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; }
.az-details summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.az-list { list-style: none; columns: 3 220px; column-gap: 28px; margin-top: 12px; font-size: 0.88rem; }
.az-list li { break-inside: avoid; padding: 3px 0; }
.az-list a { color: var(--charcoal); }
.az-list a:hover { color: var(--accent); }
.az-n { color: var(--grey); font-size: 0.75rem; }
.region-card-soon { opacity: 0.72; }
.region-card-soon .region-stats { color: var(--grey); }

/* home: how it works */
.home-how p { font-size: 0.9rem; color: var(--mid); line-height: 1.55; }
.home-how .pf-card { padding: 16px 18px; }

/* text pages (methodology, about, privacy, terms) */
.article-page { margin-top: 24px; }
.article-page h1 { font-size: 1.8rem; margin-bottom: 16px; }
.article-page h2 { font-size: 1.25rem; margin: 26px 0 10px; }
.article-page h3 { font-size: 1.05rem; margin: 18px 0 8px; }
.article-page p, .article-page li { color: var(--mid); max-width: 760px; margin-bottom: 12px; font-size: 0.98rem; line-height: 1.6; }
.article-page ul, .article-page ol { padding-left: 1.3em; margin-bottom: 14px; }
.article-page a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-page table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin: 10px 0 18px; background: white; }
.article-page th, .article-page td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top; }
.article-page thead th { background: var(--cream-dim); }
.article-page hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; }

/* search page */
.search-page-form { max-width: 640px; position: relative; }
.search-results { margin-top: 20px; }
.search-results .nearby-row { margin-bottom: 0; }
.search-results .nearby-list { max-width: 820px; }

.page-updated { font-size: 0.75rem; color: var(--grey); text-align: center; margin-top: 10px; }
.score-caveat a, .pf-note a, .official-blurb a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.rank-note { font-size: 0.84rem; color: var(--mid); margin: 0 0 26px; max-width: 900px; line-height: 1.55; }
.rank-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.pf-val-text { font-family: inherit !important; font-size: 0.98rem !important; font-weight: 600 !important; line-height: 1.4 !important; }
.pf-val-text a { color: var(--accent); }
.table-scroll, .results-detail .compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.results-detail, .article-page, .school-section { min-width: 0; max-width: 100%; }
.results-detail .data-table, .article-page .data-table { min-width: 560px; }
.results-detail { overflow: hidden; }
.results-detail .compare-scroll { display: block; width: 100%; overflow-x: auto; }
.pf-grid > *, .pf-stats > *, .pf-stat { min-width: 0; }
.pf-val-text, .pf-val-text a { overflow-wrap: anywhere; word-break: break-word; }

/* ─── Mobile header + layout (US) ─── */
@media (max-width: 640px) {
  .site-header { padding: 14px 16px 12px; }
  .header-inner { flex-wrap: wrap; gap: 10px 12px; }
  .header-search { display: block; order: 3; flex: 1 0 100%; max-width: none; margin: 2px 0 0; }
  .header-search input { font-size: 16px; padding: 9px 14px; }
  .ranks-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .rank-tile { padding: 12px 8px; }
  .footer-nav { flex-wrap: wrap; gap: 6px 14px; }
  .footer-nav a { white-space: nowrap; }
}
@media (max-width: 420px) {
  .nav-cta-long { display: none; }
  .brand { gap: 8px; }
  .brand-text { font-size: 1.05rem; }
  .brand-mark { height: 30px; width: 30px; }
}
@media (max-width: 480px) {
  .pf-card-contact .pf-stats { grid-template-columns: 1fr; }
  .pf-card-contact .pf-val-text { overflow-wrap: break-word; }
}
@media (max-width: 640px) {
  .compare-table.compare-cols-3 { min-width: 0; }
  .compare-table { table-layout: fixed; }
  .compare-table th, .compare-table td { padding: 7px 6px; font-size: 0.76rem; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  .compare-table thead th { font-size: 0.8rem; }
  .compare-table tbody th { width: 30%; }
  .compare-table thead th:first-child { width: 30%; }
  .compare-table .section-row td { font-size: 0.68rem; letter-spacing: 0.04em; }
  .compare-table .pill { padding: 2px 7px; font-size: 0.72rem; }
}

/* ─── Collapsible ranking lists (district, city and state pages) ─── */
.list-group { margin-bottom: 14px; }
.list-group[open] { margin-bottom: 30px; }
.list-group > .list-group-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 18px 16px 20px; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: 10px; }
.list-group > .list-group-summary::-webkit-details-marker { display: none; }
.list-group > .list-group-summary:hover { background: #fffdf9; box-shadow: 0 2px 10px rgba(30,30,44,0.06); }
.list-group > .list-group-summary:focus-visible { outline: 3px solid rgba(124,45,44,0.35); outline-offset: 2px; }
.list-group[open] > .list-group-summary { margin-bottom: 14px; }
.lg-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.list-group > .list-group-summary .list-group-title { margin: 0; font-size: 1.45rem; line-height: 1.2; color: var(--charcoal); display: block; }
.lg-sub { font-size: 0.86rem; color: var(--mid); }
.lg-toggle { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--accent); border: 1px solid rgba(124,45,44,0.3); border-radius: 999px; padding: 6px 12px; }
.lg-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; transition: transform 0.15s; }
.list-group[open] .lg-toggle::after { transform: rotate(-135deg); margin-top: 3px; }
.lg-hide { display: none; }
.list-group[open] .lg-show { display: none; }
.list-group[open] .lg-hide { display: inline; }
.top-section.top-section-stack { display: block; }
.top-section-stack > .top-col { margin-bottom: 14px; }
.top-section-stack > .top-col[open] { margin-bottom: 30px; }
@media (max-width: 640px) {
  .list-group > .list-group-summary { padding: 13px 12px 13px 14px; gap: 10px; }
  .list-group > .list-group-summary .list-group-title { font-size: 1.2rem; }
  .lg-sub { font-size: 0.8rem; }
  .lg-toggle { padding: 5px 10px; }
}

/* ─── Home page state map ─── */
.us-map-wrap { position: relative; }
.us-map { display: block; width: 100%; height: auto; }
.usm-state path, .usm-state circle { stroke: #fff; stroke-width: 1; stroke-linejoin: round; transition: fill 0.12s; cursor: pointer; }
.usm-state circle { stroke: #1e1e2c; stroke-width: 1.2; }
.usm-state path, .usm-state circle { fill-opacity: 0.6; }
.usm-k0 path, .usm-k0 circle { fill: #4e79a7; }
.usm-k1 path, .usm-k1 circle { fill: #f28e2c; }
.usm-k2 path, .usm-k2 circle { fill: #59a14f; }
.usm-k3 path, .usm-k3 circle { fill: #af7aa1; }
.usm-k4 path, .usm-k4 circle { fill: #edc949; }
.usm-k5 path, .usm-k5 circle { fill: #76b7b2; }
.usm-soon path, .usm-soon circle { fill: url(#usm-hatch); fill-opacity: 1; }
.usm-state:hover path, .usm-state:focus path, .usm-state:hover circle, .usm-state:focus circle { fill-opacity: 0.9; stroke: #1e1e2c; stroke-width: 1.5; }
.usm-soon:hover path, .usm-soon:focus path { stroke: #6b6560; }
.usm-state:focus { outline: none; }
.us-map-tip { position: absolute; pointer-events: none; background: var(--charcoal); color: var(--cream); padding: 7px 11px; border-radius: 6px; font-size: 0.8rem; line-height: 1.35; box-shadow: 0 4px 14px rgba(0,0,0,0.2); z-index: 5; white-space: nowrap; }
.us-map-tip strong { display: block; font-size: 0.88rem; }
.us-map-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 0.8rem; color: var(--mid); }
.usm-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.usm-key-soon { background: repeating-linear-gradient(45deg, #e7e2d9 0 3px, #cfc8bc 3px 5px); }
.map-note { font-size: 0.78rem; color: var(--grey); margin: 10px 0 0; }
.top-metrics { display: block; font-size: 0.74rem; color: var(--mid); margin-top: 2px; } .top-metrics b { color: var(--charcoal); font-weight: 600; } .top-sep { color: var(--grey); }

/* ─── Schools near me ─── */
.near-me-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 600; font-size: 0.9rem; color: var(--accent); }
.near-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 14px; }
.near-loc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 22px; }
.near-zip-form { display: flex; gap: 6px; }
.near-zip-form .near-me-input { width: 130px; flex: none; }
.near-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.near-type { border: 1px solid var(--line); background: #fff; color: var(--charcoal); border-radius: 16px; padding: 6px 12px; font: inherit; font-size: 0.82rem; cursor: pointer; }
.near-type-on { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.near-status { font-size: 0.88rem; color: var(--mid); margin: 6px 0 10px; }
.near-list { margin-bottom: 14px; }
.state-map-layers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 10px; font-size: 0.82rem; color: var(--mid); }
.sml-btn { border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 5px 11px; font: inherit; font-size: 0.8rem; cursor: pointer; color: var(--charcoal); }
.sml-on { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.state-map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 0.78rem; color: var(--mid); align-items: center; }
.state-map-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.sml-title { font-weight: 600; color: var(--charcoal); width: 100%; }
.state-map-layers[hidden] { display: none; }