diff --git a/nextjs-app/components/SecondarySchoolDetailView.module.css b/nextjs-app/components/SecondarySchoolDetailView.module.css index 92bd5fa..0757bae 100644 --- a/nextjs-app/components/SecondarySchoolDetailView.module.css +++ b/nextjs-app/components/SecondarySchoolDetailView.module.css @@ -1,778 +1,815 @@ /* SecondarySchoolDetailView — borrows heavily from SchoolDetailView.module.css */ .container { - width: 100%; + width: 100%; } /* ── Header ──────────────────────────────────────────── */ .header { - background: var(--bg-card, white); - border: 1px solid var(--border-color, #e5dfd5); - border-radius: 10px; - padding: 1.25rem 1.5rem; - margin-bottom: 0; - box-shadow: var(--shadow-soft); + background: var(--bg-card, white); + border: 1px solid var(--border-color, #e5dfd5); + border-radius: 10px; + padding: 1.25rem 1.5rem; + margin-bottom: 0; + box-shadow: var(--shadow-soft); } .headerContent { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 1.5rem; + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1.5rem; } .titleSection { - flex: 1; + flex: 1; } .schoolName { - font-size: clamp(2rem, 5vw, 3.25rem); - font-weight: 700; - color: var(--text-primary, #1a1612); - margin-bottom: 0.5rem; - line-height: 1.15; - font-family: var(--font-playfair), 'Playfair Display', serif; - overflow-wrap: break-word; + font-size: clamp(2rem, 5vw, 3.25rem); + font-weight: 700; + color: var(--text-primary, #1a1612); + margin-bottom: 0.5rem; + line-height: 1.15; + font-family: var(--font-playfair), "Playfair Display", serif; + overflow-wrap: break-word; } .badges { - display: flex; - flex-wrap: wrap; - gap: 0.375rem; - margin-bottom: 0.5rem; + display: flex; + flex-wrap: wrap; + gap: 0.375rem; + margin-bottom: 0.5rem; } .badge { - font-size: 0.8125rem; - color: var(--text-secondary, #5c564d); - padding: 0.125rem 0.5rem; - background: var(--bg-secondary, #f3ede4); - border-radius: 3px; + font-size: 0.8125rem; + color: var(--text-secondary, #5c564d); + padding: 0.125rem 0.5rem; + background: var(--bg-secondary, #f3ede4); + border-radius: 3px; } .badgeSelective { - background: rgba(180, 120, 0, 0.1); - color: #8a6200; + background: rgba(180, 120, 0, 0.1); + color: #8a6200; } .badgeFaith { - background: rgba(45, 125, 125, 0.1); - color: var(--accent-teal, #2d7d7d); + background: rgba(45, 125, 125, 0.1); + color: var(--accent-teal, #2d7d7d); } .address { - font-size: 0.875rem; - color: var(--text-muted, #8a847a); - margin: 0 0 0.75rem; - overflow-wrap: break-word; + font-size: 0.875rem; + color: var(--text-muted, #8a847a); + margin: 0 0 0.75rem; + overflow-wrap: break-word; } .headerDetails { - display: flex; - flex-wrap: wrap; - gap: 0.5rem 1.25rem; - margin-top: 0.5rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem 1.25rem; + margin-top: 0.5rem; } .headerDetail { - font-size: 0.8125rem; - color: var(--text-secondary, #5c564d); + font-size: 0.8125rem; + color: var(--text-secondary, #5c564d); } .headerDetail strong { - color: var(--text-primary, #1a1612); - font-weight: 600; + color: var(--text-primary, #1a1612); + font-weight: 600; } .headerDetail a { - color: var(--accent-teal, #2d7d7d); - text-decoration: none; + color: var(--accent-teal, #2d7d7d); + text-decoration: none; } .headerDetail a:hover { - text-decoration: underline; + text-decoration: underline; } .actions { - display: flex; - gap: 0.5rem; - flex-shrink: 0; + display: flex; + gap: 0.5rem; + flex-shrink: 0; } .btnAdd, .btnRemove { - padding: 0.5rem 1rem; - font-size: 0.875rem; - font-weight: 600; - border: none; - border-radius: 6px; - cursor: pointer; - transition: all 0.2s ease; - white-space: nowrap; + padding: 0.5rem 1rem; + font-size: 0.875rem; + font-weight: 600; + border: none; + border-radius: 6px; + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; } .btnAdd { - background: var(--accent-coral, #e07256); - color: white; + background: var(--accent-coral, #e07256); + color: white; } .btnAdd:hover { - background: var(--accent-coral-dark, #c45a3f); - transform: translateY(-1px); + background: var(--accent-coral-dark, #c45a3f); + transform: translateY(-1px); } .btnRemove { - background: var(--accent-teal, #2d7d7d); - color: white; + background: var(--accent-teal, #2d7d7d); + color: white; } .btnRemove:hover { - opacity: 0.9; + opacity: 0.9; } /* ── Tab Navigation (sticky) ─────────────────────────── */ .tabNav { - position: sticky; - top: 3.5rem; - z-index: 10; - background: var(--bg-card, white); - border: 1px solid var(--border-color, #e5dfd5); - border-top: none; - border-radius: 0 0 10px 10px; - padding: 0.5rem 1rem; - margin-bottom: 1rem; - overflow-x: auto; - white-space: nowrap; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); + position: sticky; + top: 4rem; + z-index: 10; + background: var(--bg-card, white); + border: 1px solid var(--border-color, #e5dfd5); + border-top: none; + border-radius: 0 0 10px 10px; + padding: 0.5rem 1rem; + margin-bottom: 1rem; + overflow-x: auto; + white-space: nowrap; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); } .tabNav::-webkit-scrollbar { - display: none; + display: none; } .tabNavInner { - display: inline-flex; - gap: 0.25rem; - align-items: center; + display: inline-flex; + gap: 0.25rem; + align-items: center; } .backBtn { - display: inline-flex; - align-items: center; - padding: 0.3rem 0.625rem; - font-size: 0.75rem; - font-weight: 600; - color: var(--accent-coral, #e07256); - background: none; - border: 1px solid var(--border-color, #e5dfd5); - border-radius: 4px; - cursor: pointer; - white-space: nowrap; - transition: all 0.15s ease; - margin-right: 0.25rem; + display: inline-flex; + align-items: center; + padding: 0.3rem 0.625rem; + font-size: 0.75rem; + font-weight: 600; + color: var(--accent-coral, #e07256); + background: none; + border: 1px solid var(--border-color, #e5dfd5); + border-radius: 4px; + cursor: pointer; + white-space: nowrap; + transition: all 0.15s ease; + margin-right: 0.25rem; } .backBtn:hover { - background: var(--bg-secondary, #f3ede4); - border-color: var(--accent-coral, #e07256); + background: var(--bg-secondary, #f3ede4); + border-color: var(--accent-coral, #e07256); } .tabNavDivider { - width: 1px; - height: 1rem; - background: var(--border-color, #e5dfd5); - margin: 0 0.25rem; - flex-shrink: 0; + width: 1px; + height: 1rem; + background: var(--border-color, #e5dfd5); + margin: 0 0.25rem; + flex-shrink: 0; } .tabBtn { - display: inline-block; - padding: 0.3rem 0.75rem; - font-size: 0.75rem; - font-weight: 500; - color: var(--text-secondary, #5c564d); - background: none; - border: none; - border-radius: 4px; - cursor: pointer; - transition: all 0.15s ease; - white-space: nowrap; - text-decoration: none; + display: inline-block; + padding: 0.3rem 0.75rem; + font-size: 0.75rem; + font-weight: 500; + color: var(--text-secondary, #5c564d); + background: none; + border: none; + border-radius: 4px; + cursor: pointer; + transition: all 0.15s ease; + white-space: nowrap; + text-decoration: none; } .tabBtn:hover { - background: var(--bg-secondary, #f3ede4); - color: var(--text-primary, #1a1612); + background: var(--bg-secondary, #f3ede4); + color: var(--text-primary, #1a1612); } .tabBtnActive { - background: var(--accent-coral, #e07256); - color: white; - font-weight: 600; + background: var(--accent-coral, #e07256); + color: white; + font-weight: 600; } .tabBtnActive:hover { - background: var(--accent-coral-dark, #c45a3f); - color: white; + background: var(--accent-coral-dark, #c45a3f); + color: white; } /* ── Card ────────────────────────────────────────────── */ .card { - background: var(--bg-card, white); - border: 1px solid var(--border-color, #e5dfd5); - border-radius: 10px; - padding: 1.25rem 1.5rem; - margin-bottom: 1rem; - box-shadow: var(--shadow-soft); - scroll-margin-top: 6rem; + background: var(--bg-card, white); + border: 1px solid var(--border-color, #e5dfd5); + border-radius: 10px; + padding: 1.25rem 1.5rem; + margin-bottom: 1rem; + box-shadow: var(--shadow-soft); + scroll-margin-top: 6rem; } /* ── Section Title ───────────────────────────────────── */ .sectionTitle { - font-size: 1.125rem; - font-weight: 600; - color: var(--text-primary, #1a1612); - margin-bottom: 0.875rem; - padding-bottom: 0.5rem; - border-bottom: 2px solid var(--border-color, #e5dfd5); - font-family: var(--font-playfair), 'Playfair Display', serif; - display: flex; - align-items: center; - gap: 0.375rem; - flex-wrap: wrap; - overflow-wrap: break-word; - min-width: 0; + font-size: 1.125rem; + font-weight: 600; + color: var(--text-primary, #1a1612); + margin-bottom: 0.875rem; + padding-bottom: 0.5rem; + border-bottom: 2px solid var(--border-color, #e5dfd5); + font-family: var(--font-playfair), "Playfair Display", serif; + display: flex; + align-items: center; + gap: 0.375rem; + flex-wrap: wrap; + overflow-wrap: break-word; + min-width: 0; } .sectionTitle::before { - content: ''; - display: inline-block; - width: 3px; - height: 1em; - background: var(--accent-coral, #e07256); - border-radius: 2px; - flex-shrink: 0; + content: ""; + display: inline-block; + width: 3px; + height: 1em; + background: var(--accent-coral, #e07256); + border-radius: 2px; + flex-shrink: 0; } .sectionSubtitle { - font-size: 0.85rem; - color: var(--text-muted, #8a847a); - margin: -0.5rem 0 1rem; + font-size: 0.85rem; + color: var(--text-muted, #8a847a); + margin: -0.5rem 0 1rem; } .subSectionTitle { - font-size: 0.875rem; - font-weight: 600; - color: var(--text-secondary, #5c564d); - margin: 1.25rem 0 0.75rem; + font-size: 0.875rem; + font-weight: 600; + color: var(--text-secondary, #5c564d); + margin: 1.25rem 0 0.75rem; } .responseBadge { - font-size: 0.75rem; - font-weight: 500; - font-family: var(--font-dm-sans), sans-serif; - color: var(--text-muted, #8a847a); - background: var(--bg-secondary, #f3ede4); - padding: 0.1rem 0.5rem; - border-radius: 999px; - margin-left: auto; + font-size: 0.75rem; + font-weight: 500; + font-family: var(--font-dm-sans), sans-serif; + color: var(--text-muted, #8a847a); + background: var(--bg-secondary, #f3ede4); + padding: 0.1rem 0.5rem; + border-radius: 999px; + margin-left: auto; } /* ── Progress 8 suspension banner ───────────────────── */ .p8Banner { - background: rgba(180, 120, 0, 0.1); - border: 1px solid rgba(180, 120, 0, 0.3); - color: #8a6200; - border-radius: 6px; - padding: 0.625rem 0.875rem; - font-size: 0.825rem; - margin-bottom: 1rem; - line-height: 1.5; + background: rgba(180, 120, 0, 0.1); + border: 1px solid rgba(180, 120, 0, 0.3); + color: #8a6200; + border-radius: 6px; + padding: 0.625rem 0.875rem; + font-size: 0.825rem; + margin-bottom: 1rem; + line-height: 1.5; } /* ── Metrics Grid & Cards ────────────────────────────── */ .metricsGrid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); - gap: 0.75rem; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 0.75rem; } .metricCard { - background: var(--bg-secondary, #f3ede4); - border: 1px solid var(--border-color, #e5dfd5); - border-radius: 6px; - padding: 0.75rem; - text-align: center; + background: var(--bg-secondary, #f3ede4); + border: 1px solid var(--border-color, #e5dfd5); + border-radius: 6px; + padding: 0.75rem; + text-align: center; } .metricLabel { - font-size: 0.6875rem; - color: var(--text-muted, #8a847a); - margin-bottom: 0.25rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.03em; + font-size: 0.6875rem; + color: var(--text-muted, #8a847a); + margin-bottom: 0.25rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.03em; } .metricValue { - font-size: 1.25rem; - font-weight: 700; - color: var(--text-primary, #1a1612); - display: flex; - align-items: center; - justify-content: center; - gap: 0.25rem; - overflow-wrap: break-word; - word-break: break-word; + font-size: 1.25rem; + font-weight: 700; + color: var(--text-primary, #1a1612); + display: flex; + align-items: center; + justify-content: center; + gap: 0.25rem; + overflow-wrap: break-word; + word-break: break-word; } .metricHint { - font-size: 0.7rem; - color: var(--text-muted, #8a847a); - margin-top: 0.3rem; - font-style: italic; + font-size: 0.7rem; + color: var(--text-muted, #8a847a); + margin-top: 0.3rem; + font-style: italic; } /* ── Progress score colours ──────────────────────────── */ .progressPositive { - color: var(--accent-teal, #2d7d7d); - font-weight: 700; + color: var(--accent-teal, #2d7d7d); + font-weight: 700; } .progressNegative { - color: var(--accent-coral, #e07256); - font-weight: 700; + color: var(--accent-coral, #e07256); + font-weight: 700; } /* ── Status colours ──────────────────────────────────── */ .statusGood { - background: var(--accent-teal-bg); - color: var(--accent-teal, #2d7d7d); + background: var(--accent-teal-bg); + color: var(--accent-teal, #2d7d7d); } .statusWarn { - background: var(--accent-gold-bg); - color: #b8920e; + background: var(--accent-gold-bg); + color: #b8920e; } /* ── Metric table (row-based) ────────────────────────── */ .metricTable { - display: flex; - flex-direction: column; - gap: 0.375rem; + display: flex; + flex-direction: column; + gap: 0.375rem; } .metricRow { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.375rem 0.625rem; - background: var(--bg-secondary, #f3ede4); - border-radius: 4px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.375rem 0.625rem; + background: var(--bg-secondary, #f3ede4); + border-radius: 4px; } .metricName { - font-size: 0.75rem; - color: var(--text-secondary, #5c564d); + font-size: 0.75rem; + color: var(--text-secondary, #5c564d); } .metricRow .metricValue { - font-size: 0.875rem; - font-weight: 600; - color: var(--accent-teal, #2d7d7d); + font-size: 0.875rem; + font-weight: 600; + color: var(--accent-teal, #2d7d7d); } /* ── Charts & Map ────────────────────────────────────── */ .chartContainer { - width: 100%; - height: 280px; - position: relative; + width: 100%; + height: 280px; + position: relative; } .mapContainer { - width: 100%; - height: 300px; - border-radius: 6px; - overflow: hidden; + width: 100%; + height: 300px; + border-radius: 6px; + overflow: hidden; } /* ── History table ───────────────────────────────────── */ .tableWrapper { - overflow-x: auto; - margin-top: 0.5rem; + overflow-x: auto; + margin-top: 0.5rem; } .historicalSubtitle { - font-size: 0.8rem; - color: var(--text-muted, #8a847a); - margin: 1.25rem 0 0.25rem; + font-size: 0.8rem; + color: var(--text-muted, #8a847a); + margin: 1.25rem 0 0.25rem; } .dataTable { - width: 100%; - border-collapse: collapse; - font-size: 0.8125rem; + width: 100%; + border-collapse: collapse; + font-size: 0.8125rem; } .dataTable thead { - background: var(--bg-secondary, #f3ede4); + background: var(--bg-secondary, #f3ede4); } .dataTable th { - padding: 0.625rem 0.75rem; - text-align: left; - font-weight: 600; - font-size: 0.6875rem; - text-transform: uppercase; - letter-spacing: 0.03em; - color: var(--text-primary, #1a1612); - border-bottom: 2px solid var(--border-color, #e5dfd5); + padding: 0.625rem 0.75rem; + text-align: left; + font-weight: 600; + font-size: 0.6875rem; + text-transform: uppercase; + letter-spacing: 0.03em; + color: var(--text-primary, #1a1612); + border-bottom: 2px solid var(--border-color, #e5dfd5); } .dataTable td { - padding: 0.5rem 0.75rem; - border-bottom: 1px solid var(--border-color, #e5dfd5); - color: var(--text-secondary, #5c564d); + padding: 0.5rem 0.75rem; + border-bottom: 1px solid var(--border-color, #e5dfd5); + color: var(--text-secondary, #5c564d); } .dataTable tbody tr:last-child td { - border-bottom: none; + border-bottom: none; } .dataTable tbody tr:hover { - background: var(--bg-secondary, #f3ede4); + background: var(--bg-secondary, #f3ede4); } .yearCell { - font-weight: 600; - color: var(--accent-gold, #c9a227); + font-weight: 600; + color: var(--accent-gold, #c9a227); } /* ── Ofsted ──────────────────────────────────────────── */ .ofstedHeader { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 0.75rem; - margin-bottom: 1rem; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.75rem; + margin-bottom: 1rem; } .ofstedGrade { - display: inline-block; - padding: 0.35rem 0.75rem; - font-size: 1rem; - line-height: 1.4; - font-weight: 700; - border-radius: 6px; - white-space: nowrap; + display: inline-block; + padding: 0.35rem 0.75rem; + font-size: 1rem; + line-height: 1.4; + font-weight: 700; + border-radius: 6px; + white-space: nowrap; } -.ofstedGrade1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); } -.ofstedGrade2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; } -.ofstedGrade3 { background: var(--accent-gold-bg); color: #b8920e; } -.ofstedGrade4 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); } +.ofstedGrade1 { + background: var(--accent-teal-bg); + color: var(--accent-teal, #2d7d7d); +} +.ofstedGrade2 { + background: rgba(60, 140, 60, 0.12); + color: #3c8c3c; +} +.ofstedGrade3 { + background: var(--accent-gold-bg); + color: #b8920e; +} +.ofstedGrade4 { + background: var(--accent-coral-bg); + color: var(--accent-coral, #e07256); +} -.rcGrade1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); } -.rcGrade2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; } -.rcGrade3 { background: var(--accent-gold-bg); color: #b8920e; } -.rcGrade4 { background: rgba(249, 115, 22, 0.12); color: #c2410c; } -.rcGrade5 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); } +.rcGrade1 { + background: var(--accent-teal-bg); + color: var(--accent-teal, #2d7d7d); +} +.rcGrade2 { + background: rgba(60, 140, 60, 0.12); + color: #3c8c3c; +} +.rcGrade3 { + background: var(--accent-gold-bg); + color: #b8920e; +} +.rcGrade4 { + background: rgba(249, 115, 22, 0.12); + color: #c2410c; +} +.rcGrade5 { + background: var(--accent-coral-bg); + color: var(--accent-coral, #e07256); +} .safeguardingMet { - display: inline-block; - padding: 0.2rem 0.6rem; - border-radius: 4px; - font-size: 0.8125rem; - font-weight: 600; - background: var(--accent-teal-bg); - color: var(--accent-teal, #2d7d7d); + display: inline-block; + padding: 0.2rem 0.6rem; + border-radius: 4px; + font-size: 0.8125rem; + font-weight: 600; + background: var(--accent-teal-bg); + color: var(--accent-teal, #2d7d7d); } .safeguardingNotMet { - display: inline-block; - padding: 0.2rem 0.6rem; - border-radius: 4px; - font-size: 0.8125rem; - font-weight: 700; - background: var(--accent-coral-bg); - color: var(--accent-coral, #e07256); + display: inline-block; + padding: 0.2rem 0.6rem; + border-radius: 4px; + font-size: 0.8125rem; + font-weight: 700; + background: var(--accent-coral-bg); + color: var(--accent-coral, #e07256); } .ofstedDisclaimer { - font-size: 0.8rem; - color: var(--text-muted, #8a847a); - font-style: italic; - margin: 0 0 1rem; + font-size: 0.8rem; + color: var(--text-muted, #8a847a); + font-style: italic; + margin: 0 0 1rem; } .ofstedDate { - font-size: 0.85rem; - color: var(--text-muted, #8a847a); + font-size: 0.85rem; + color: var(--text-muted, #8a847a); } .ofstedPrevious { - font-size: 0.8125rem; - color: var(--text-muted, #8a847a); - font-style: italic; + font-size: 0.8125rem; + color: var(--text-muted, #8a847a); + font-style: italic; } .ofstedReportLink { - font-size: 0.8125rem; - color: var(--accent-teal, #2d7d7d); - text-decoration: none; - margin-left: auto; - white-space: nowrap; + font-size: 0.8125rem; + color: var(--accent-teal, #2d7d7d); + text-decoration: none; + margin-left: auto; + white-space: nowrap; } .ofstedReportLink:hover { - text-decoration: underline; + text-decoration: underline; } /* ── Parent View ─────────────────────────────────────── */ .parentRecommendLine { - font-size: 0.85rem; - color: var(--text-secondary, #5c564d); - margin: 0.5rem 0 0; + font-size: 0.85rem; + color: var(--text-secondary, #5c564d); + margin: 0.5rem 0 0; } .parentRecommendLine strong { - color: var(--accent-teal, #2d7d7d); - font-weight: 700; + color: var(--accent-teal, #2d7d7d); + font-weight: 700; } .parentViewGrid { - display: flex; - flex-direction: column; - gap: 0.5rem; + display: flex; + flex-direction: column; + gap: 0.5rem; } .parentViewRow { - display: flex; - align-items: center; - gap: 0.75rem; - font-size: 0.875rem; + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 0.875rem; } .parentViewLabel { - flex: 0 0 18rem; - color: var(--text-secondary, #5c564d); - font-size: 0.8125rem; + flex: 0 0 18rem; + color: var(--text-secondary, #5c564d); + font-size: 0.8125rem; } .parentViewBar { - flex: 1; - height: 0.5rem; - background: var(--bg-secondary, #f3ede4); - border-radius: 4px; - overflow: hidden; + flex: 1; + height: 0.5rem; + background: var(--bg-secondary, #f3ede4); + border-radius: 4px; + overflow: hidden; } .parentViewFill { - height: 100%; - background: var(--accent-teal, #2d7d7d); - border-radius: 4px; - transition: width 0.4s ease; + height: 100%; + background: var(--accent-teal, #2d7d7d); + border-radius: 4px; + transition: width 0.4s ease; } .parentViewPct { - flex: 0 0 2.75rem; - text-align: right; - font-size: 0.8125rem; - font-weight: 600; - color: var(--text-primary, #1a1612); + flex: 0 0 2.75rem; + text-align: right; + font-size: 0.8125rem; + font-weight: 600; + color: var(--text-primary, #1a1612); } /* ── Admissions ──────────────────────────────────────── */ .admissionsTypeBadge { - border-radius: 6px; - padding: 0.5rem 0.875rem; - font-size: 0.8125rem; - margin-bottom: 1rem; - line-height: 1.5; + border-radius: 6px; + padding: 0.5rem 0.875rem; + font-size: 0.8125rem; + margin-bottom: 1rem; + line-height: 1.5; } .admissionsSelective { - background: rgba(180, 120, 0, 0.1); - color: #8a6200; - border: 1px solid rgba(180, 120, 0, 0.25); + background: rgba(180, 120, 0, 0.1); + color: #8a6200; + border: 1px solid rgba(180, 120, 0, 0.25); } .admissionsFaith { - background: rgba(45, 125, 125, 0.08); - color: var(--accent-teal, #2d7d7d); - border: 1px solid rgba(45, 125, 125, 0.2); + background: rgba(45, 125, 125, 0.08); + color: var(--accent-teal, #2d7d7d); + border: 1px solid rgba(45, 125, 125, 0.2); } .admissionsBadge { - display: inline-flex; - align-items: center; - gap: 0.35rem; - padding: 0.3rem 0.75rem; - border-radius: 6px; - font-size: 0.8125rem; - font-weight: 600; - margin-top: 0.75rem; + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.3rem 0.75rem; + border-radius: 6px; + font-size: 0.8125rem; + font-weight: 600; + margin-top: 0.75rem; } .sixthFormNote { - margin-top: 1rem; - padding: 0.625rem 0.875rem; - background: var(--bg-secondary, #f3ede4); - border-radius: 6px; - font-size: 0.825rem; - color: var(--text-secondary, #5c564d); - border-left: 3px solid var(--accent-teal, #2d7d7d); + margin-top: 1rem; + padding: 0.625rem 0.875rem; + background: var(--bg-secondary, #f3ede4); + border-radius: 6px; + font-size: 0.825rem; + color: var(--text-secondary, #5c564d); + border-left: 3px solid var(--accent-teal, #2d7d7d); } /* ── Deprivation ─────────────────────────────────────── */ .deprivationDots { - display: flex; - gap: 0.375rem; - margin: 0.75rem 0 0.5rem; - align-items: center; + display: flex; + gap: 0.375rem; + margin: 0.75rem 0 0.5rem; + align-items: center; } .deprivationDot { - width: 1.25rem; - height: 1.25rem; - border-radius: 50%; - background: var(--bg-secondary, #f3ede4); - border: 2px solid var(--border-color, #e5dfd5); - flex-shrink: 0; + width: 1.25rem; + height: 1.25rem; + border-radius: 50%; + background: var(--bg-secondary, #f3ede4); + border: 2px solid var(--border-color, #e5dfd5); + flex-shrink: 0; } .deprivationDotFilled { - background: var(--accent-teal, #2d7d7d); - border-color: var(--accent-teal, #2d7d7d); + background: var(--accent-teal, #2d7d7d); + border-color: var(--accent-teal, #2d7d7d); } .deprivationDesc { - font-size: 0.875rem; - color: var(--text-secondary, #5c564d); - line-height: 1.5; - margin: 0; + font-size: 0.875rem; + color: var(--text-secondary, #5c564d); + line-height: 1.5; + margin: 0; } .deprivationScaleLabel { - display: flex; - justify-content: space-between; - font-size: 0.7rem; - color: var(--text-muted, #8a847a); - margin-top: 0.25rem; + display: flex; + justify-content: space-between; + font-size: 0.7rem; + color: var(--text-muted, #8a847a); + margin-top: 0.25rem; } /* ── Ofsted all-same collapse ────────────────────────── */ .ofstedAllSame { - font-size: 0.9375rem; - color: var(--text-secondary, #5c564d); - margin: 0.5rem 0 0; - line-height: 1.5; + font-size: 0.9375rem; + color: var(--text-secondary, #5c564d); + margin: 0.5rem 0 0; + line-height: 1.5; } .ofstedAllSame strong { - color: var(--text-primary, #1a1612); + color: var(--text-primary, #1a1612); } /* ── Hero chips strip ────────────────────────────────── */ .heroChips { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; - margin-top: 1.25rem; + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 1.25rem; } .heroChip { - flex: 0 0 240px; - padding: 0.75rem 1rem; - border-radius: 8px; - border-left: 3px solid var(--border-color, #e5dfd5); - background: var(--bg-secondary, #f3ede4); - color: var(--text-primary, #1a1612); - display: flex; - flex-direction: column; - gap: 0.15rem; + flex: 0 0 240px; + padding: 0.75rem 1rem; + border-radius: 8px; + border-left: 3px solid var(--border-color, #e5dfd5); + background: var(--bg-secondary, #f3ede4); + color: var(--text-primary, #1a1612); + display: flex; + flex-direction: column; + gap: 0.15rem; } .heroChipTitle { - font-size: 0.9375rem; - font-weight: 700; - line-height: 1.3; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + font-size: 0.9375rem; + font-weight: 700; + line-height: 1.3; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .heroChipSub { - font-size: 0.75rem; - color: var(--text-secondary, #5c564d); - line-height: 1.4; + font-size: 0.75rem; + color: var(--text-secondary, #5c564d); + line-height: 1.4; } .heroChipDetail { - font-size: 0.75rem; - font-weight: 600; - line-height: 1.4; - margin-top: 0.1rem; + font-size: 0.75rem; + font-weight: 600; + line-height: 1.4; + margin-top: 0.1rem; } /* Hero tone system */ -.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); } +.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)); + border-left-color: var(--hero-tone); + background: color-mix(in srgb, var(--hero-tone) 10%, var(--bg-card, white)); } .heroChip.tone-neutral { - background: var(--bg-secondary, #f3ede4); + background: var(--bg-secondary, #f3ede4); } /* ── Hero at-a-glance stats ──────────────────────────── */ .heroStats { - display: flex; - flex-wrap: wrap; - gap: 1.25rem 3rem; - margin-top: 1.5rem; - padding-top: 1.5rem; - border-top: 1px solid var(--border-color, #e5dfd5); + display: flex; + flex-wrap: wrap; + gap: 1.25rem 3rem; + margin-top: 1.5rem; + padding-top: 1.5rem; + border-top: 1px solid var(--border-color, #e5dfd5); } .heroStat { - display: flex; - flex-direction: column; - gap: 0.35rem; - min-width: 0; - flex: 0 0 auto; + display: flex; + flex-direction: column; + gap: 0.35rem; + min-width: 0; + flex: 0 0 auto; } .heroStatNumber, .heroStatNumberSerif { - font-family: var(--font-playfair), 'Playfair Display', serif; - font-weight: 700; - line-height: 1; - color: var(--text-primary, #1a1612); - min-height: clamp(2rem, 4vw, 2.75rem); - display: flex; - align-items: flex-end; + font-family: var(--font-playfair), "Playfair Display", serif; + font-weight: 700; + line-height: 1; + color: var(--text-primary, #1a1612); + min-height: clamp(2rem, 4vw, 2.75rem); + display: flex; + align-items: flex-end; } .heroStatNumber { - font-size: clamp(2rem, 4vw, 2.75rem); - font-variant-numeric: tabular-nums; + font-size: clamp(2rem, 4vw, 2.75rem); + font-variant-numeric: tabular-nums; } .heroStatNumberSerif { - font-size: clamp(1.75rem, 3.5vw, 2.25rem); + font-size: clamp(1.75rem, 3.5vw, 2.25rem); } .heroStatNumberSerif.tone-teal, @@ -780,366 +817,368 @@ .heroStatNumberSerif.tone-gold, .heroStatNumberSerif.tone-coral, .heroStatNumberSerif.tone-neutral { - color: var(--hero-tone); + color: var(--hero-tone); } .heroStatLabel { - font-size: 0.6875rem; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--text-secondary, #5c564d); + font-size: 0.6875rem; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-secondary, #5c564d); } .heroStatFoot { - font-size: 0.75rem; - color: var(--text-muted, #8a847a); + font-size: 0.75rem; + color: var(--text-muted, #8a847a); } .heroDataNote { - margin: 0.5rem 0 0; - font-size: 0.75rem; - color: var(--text-muted, #8a847a); + margin: 0.5rem 0 0; + font-size: 0.75rem; + color: var(--text-muted, #8a847a); } /* ── GCSE hero stat cards (mirrors primary heroStatCard) ─ */ .heroStatGrid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 0.85rem; - margin-bottom: 0.25rem; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 0.85rem; + margin-bottom: 0.25rem; } .heroStatCard { - background: rgba(45, 125, 125, 0.1); - border: 1px solid rgba(45, 125, 125, 0.2); - border-radius: 12px; - padding: 1rem 1.1rem; - display: flex; - flex-direction: column; - gap: 0.25rem; + background: rgba(45, 125, 125, 0.1); + border: 1px solid rgba(45, 125, 125, 0.2); + border-radius: 12px; + padding: 1rem 1.1rem; + display: flex; + flex-direction: column; + gap: 0.25rem; } .heroStatCard .heroStatLabel { - font-size: 0.6rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--text-muted, #6d685f); + font-size: 0.6rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-muted, #6d685f); } .heroStatCard .heroStatValue { - font-family: var(--font-playfair), 'Playfair Display', serif; - font-size: 2.1rem; - font-weight: 700; - line-height: 1; - color: var(--accent-teal, #2d7d7d); - display: flex; - align-items: baseline; - gap: 0.4rem; - flex-wrap: wrap; + font-family: var(--font-playfair), "Playfair Display", serif; + font-size: 2.1rem; + font-weight: 700; + line-height: 1; + color: var(--accent-teal, #2d7d7d); + display: flex; + align-items: baseline; + gap: 0.4rem; + flex-wrap: wrap; } .heroStatCard .heroStatHint { - font-size: 0.7rem; - color: var(--text-muted, #6d685f); - font-style: normal; - margin-top: 0; + font-size: 0.7rem; + color: var(--text-muted, #6d685f); + font-style: normal; + margin-top: 0; } /* ── Attainment 8 visual bar ─────────────────────────── */ .att8Viz { - margin: 1.25rem 0 0.5rem; + margin: 1.25rem 0 0.5rem; } .att8VizLabel { - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.07em; - color: var(--text-muted, #6d685f); - margin-bottom: 0.5rem; + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.07em; + color: var(--text-muted, #6d685f); + margin-bottom: 0.5rem; } .att8VizTrack { - position: relative; - height: 14px; - background: rgba(45, 125, 125, 0.08); - border: 1px solid var(--border-color, #e5dfd5); - border-radius: 4px; - overflow: visible; + position: relative; + height: 14px; + background: rgba(45, 125, 125, 0.08); + border: 1px solid var(--border-color, #e5dfd5); + border-radius: 4px; + overflow: visible; } .att8VizFill { - height: 100%; - background: var(--accent-teal, #2d7d7d); - border-radius: 4px 0 0 4px; - transition: width 0.6s ease; + height: 100%; + background: var(--accent-teal, #2d7d7d); + border-radius: 4px 0 0 4px; + transition: width 0.6s ease; } .att8VizNatLine { - position: absolute; - top: -4px; - bottom: -4px; - width: 2px; - background: var(--accent-coral, #e07256); - border-radius: 2px; - z-index: 2; + position: absolute; + top: -4px; + bottom: -4px; + width: 2px; + background: var(--accent-coral, #e07256); + border-radius: 2px; + z-index: 2; } .att8VizNatPill { - position: absolute; - top: -20px; - transform: translateX(-50%); - background: var(--accent-coral, #e07256); - color: #fff; - font-size: 0.6rem; - font-weight: 700; - padding: 0.1rem 0.3rem; - border-radius: 3px; - white-space: nowrap; + position: absolute; + top: -20px; + transform: translateX(-50%); + background: var(--accent-coral, #e07256); + color: #fff; + font-size: 0.6rem; + font-weight: 700; + padding: 0.1rem 0.3rem; + border-radius: 3px; + white-space: nowrap; } .att8VizTicks { - display: flex; - justify-content: space-between; - margin-top: 0.25rem; - font-size: 0.6rem; - color: var(--text-muted, #6d685f); + display: flex; + justify-content: space-between; + margin-top: 0.25rem; + font-size: 0.6rem; + color: var(--text-muted, #6d685f); } /* ── Progress 8 number line ──────────────────────────── */ .p8Viz { - margin: 1.25rem 0 0.5rem; + margin: 1.25rem 0 0.5rem; } .p8VizLabel { - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.07em; - color: var(--text-muted, #6d685f); - margin-bottom: 0.5rem; + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.07em; + color: var(--text-muted, #6d685f); + margin-bottom: 0.5rem; } .p8VizTrack { - position: relative; - height: 14px; - background: rgba(45, 125, 125, 0.06); - border: 1px solid var(--border-color, #e5dfd5); - border-radius: 4px; - overflow: visible; + position: relative; + height: 14px; + background: rgba(45, 125, 125, 0.06); + border: 1px solid var(--border-color, #e5dfd5); + border-radius: 4px; + overflow: visible; } .p8VizCi { - position: absolute; - top: 0; - bottom: 0; - background: rgba(45, 125, 125, 0.18); - border-radius: 3px; + position: absolute; + top: 0; + bottom: 0; + background: rgba(45, 125, 125, 0.18); + border-radius: 3px; } .p8VizZero { - position: absolute; - top: -4px; - bottom: -4px; - width: 2px; - background: var(--border-color, #e5dfd5); - z-index: 1; + position: absolute; + top: -4px; + bottom: -4px; + width: 2px; + background: var(--border-color, #e5dfd5); + z-index: 1; } .p8VizDot { - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - width: 12px; - height: 12px; - border-radius: 50%; - background: var(--accent-teal, #2d7d7d); - border: 2px solid white; - box-shadow: 0 1px 4px rgba(0,0,0,0.2); - z-index: 3; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + width: 12px; + height: 12px; + border-radius: 50%; + background: var(--accent-teal, #2d7d7d); + border: 2px solid white; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); + z-index: 3; } .p8VizDotNeg { - background: var(--accent-coral, #e07256); + background: var(--accent-coral, #e07256); } .p8VizTicks { - display: flex; - justify-content: space-between; - margin-top: 0.25rem; - font-size: 0.6rem; - color: var(--text-muted, #6d685f); + display: flex; + justify-content: space-between; + margin-top: 0.25rem; + font-size: 0.6rem; + color: var(--text-muted, #6d685f); } /* ── History accordion ───────────────────────────────── */ .historyDisclosure { - margin-top: 1rem; + margin-top: 1rem; } .historyToggle { - list-style: none; - cursor: pointer; - font-size: 0.8125rem; - font-weight: 600; - color: var(--text-muted, #6d685f); - padding: 0.5rem 0; - display: flex; - align-items: center; - gap: 0.375rem; - user-select: none; + list-style: none; + cursor: pointer; + font-size: 0.8125rem; + font-weight: 600; + color: var(--text-muted, #6d685f); + padding: 0.5rem 0; + display: flex; + align-items: center; + gap: 0.375rem; + user-select: none; } -.historyToggle::-webkit-details-marker { display: none; } +.historyToggle::-webkit-details-marker { + display: none; +} .historyToggle::before { - content: '▶'; - font-size: 0.6rem; - transition: transform 0.2s ease; + content: "▶"; + font-size: 0.6rem; + transition: transform 0.2s ease; } .historyDisclosure[open] .historyToggle::before { - transform: rotate(90deg); + transform: rotate(90deg); } /* ── Responsive ──────────────────────────────────────── */ @media (max-width: 768px) { - .header { - padding: 1rem; - } + .header { + padding: 1rem; + } - .headerContent { - flex-direction: column; - gap: 1rem; - } + .headerContent { + flex-direction: column; + gap: 1rem; + } - .actions { - width: 100%; - } + .actions { + width: 100%; + } - .btnAdd, - .btnRemove { - flex: 1; - } + .btnAdd, + .btnRemove { + flex: 1; + } - .schoolName { - word-break: break-word; - } + .schoolName { + word-break: break-word; + } - .badges { - gap: 0.25rem; - } + .badges { + gap: 0.25rem; + } - .badge { - font-size: 0.75rem; - padding: 0.1rem 0.375rem; - } + .badge { + font-size: 0.75rem; + padding: 0.1rem 0.375rem; + } - .headerDetails { - flex-direction: column; - gap: 0.375rem; - } + .headerDetails { + flex-direction: column; + gap: 0.375rem; + } - .metricsGrid { - grid-template-columns: repeat(2, 1fr); - } + .metricsGrid { + grid-template-columns: repeat(2, 1fr); + } - .metricValue { - font-size: 1rem; - } + .metricValue { + font-size: 1rem; + } - .heroStatGrid { - grid-template-columns: 1fr; - } + .heroStatGrid { + grid-template-columns: 1fr; + } - .heroStatCard .heroStatValue { - font-size: 1.85rem; - } + .heroStatCard .heroStatValue { + font-size: 1.85rem; + } - .chartContainer { - height: 220px; - } + .chartContainer { + height: 220px; + } - .dataTable { - font-size: 0.75rem; - } + .dataTable { + font-size: 0.75rem; + } - .dataTable th, - .dataTable td { - padding: 0.5rem 0.375rem; - } + .dataTable th, + .dataTable td { + padding: 0.5rem 0.375rem; + } - .card { - padding: 1rem; - } + .card { + padding: 1rem; + } - .sectionTitle { - font-size: 1rem; - } + .sectionTitle { + font-size: 1rem; + } - .parentViewLabel { - flex-basis: 10rem; - } + .parentViewLabel { + flex-basis: 10rem; + } - .ofstedReportLink { - margin-left: 0; - display: block; - margin-top: 0.25rem; - } + .ofstedReportLink { + margin-left: 0; + display: block; + margin-top: 0.25rem; + } - .admissionsTypeBadge { - font-size: 0.75rem; - } + .admissionsTypeBadge { + font-size: 0.75rem; + } - .heroChips { - gap: 0.5rem; - margin-top: 1rem; - } + .heroChips { + gap: 0.5rem; + margin-top: 1rem; + } - .heroChip { - min-width: 100%; - } + .heroChip { + min-width: 100%; + } - .heroStats { - gap: 1rem 1.5rem; - } + .heroStats { + gap: 1rem 1.5rem; + } } @media (max-width: 480px) { - .parentViewRow { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } + .parentViewRow { + flex-direction: column; + align-items: flex-start; + gap: 0.25rem; + } - .parentViewLabel { - flex: none; - max-width: 100%; - } + .parentViewLabel { + flex: none; + max-width: 100%; + } - .parentViewBar { - width: 100%; - } + .parentViewBar { + width: 100%; + } - .parentViewPct { - flex: none; - } + .parentViewPct { + flex: none; + } - .metricsGrid { - grid-template-columns: 1fr 1fr; - gap: 0.5rem; - } + .metricsGrid { + grid-template-columns: 1fr 1fr; + gap: 0.5rem; + } - .metricCard { - padding: 0.5rem; - } + .metricCard { + padding: 0.5rem; + } - .metricLabel { - font-size: 0.625rem; - } + .metricLabel { + font-size: 0.625rem; + } - .card { - padding: 0.75rem; - } + .card { + padding: 0.75rem; + } }