TudorandClaude Opus 4.8
0b36eace9d
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m2s
PR Checks / Backend Smoke (pull_request) Successful in 7s
PR Checks / Build Backend (no push) (pull_request) Successful in 10s
PR Checks / Build Frontend (no push) (pull_request) Successful in 46s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 12s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 1m38s
Three review points on the special-schools change: 1. Copy accuracy — the context note said "Its pupils have special educational needs" for every isSpecialSchool() match, but the helper also matches pupil referral units and alternative provision, whose pupils are educated outside a mainstream setting (e.g. after exclusion) and are not necessarily SEND. Extracted a shared <SpecialSchoolNote> with type-aware copy: SEND wording only for genuine special schools; PRUs/AP get their own accurate wording. 2. Same-school trend was conflated with the England comparison — SchoolRow's year-over-year trend arrow (and the school's own figure) were gated on the same flag that drops the vs-England delta, hiding a still-meaningful trend for special schools with real data. Split the two: the school's OWN RWM figure + trend show whenever there's a real value (special schools included; only a placeholder all-zero row is hidden); only the vs-England delta is additionally dropped for special/PRU/AP. Mirrored in SecondarySchoolRow (own Attainment 8 shown; only the vs-LA delta dropped). 3. De-duplicated the .specialNote CSS (was copy-pasted between the two detail view module files) into SpecialSchoolNote.module.css, owned by the shared component so it can't drift. New SpecialSchoolNote unit tests assert SEND wording for special schools and NOT for PRUs/AP. tsc clean; 112/112 unit. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
1121 lines
24 KiB
CSS
1121 lines
24 KiB
CSS
/* SecondarySchoolDetailView — borrows heavily from SchoolDetailView.module.css */
|
|
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Standalone back link, sits above the header card on the page background. */
|
|
.topBack {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
margin: 0 0 0.75rem;
|
|
padding: 0.25rem 0;
|
|
font-size: 1.0625rem;
|
|
font-weight: 600;
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
line-height: 1.2;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.topBack:hover {
|
|
color: var(--accent-coral-dark, #c85a3e);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
/* ── Header ──────────────────────────────────────────── */
|
|
.header {
|
|
position: relative;
|
|
background: var(--bg-card, white);
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
border-radius: 10px;
|
|
/* Padding lives on .headerContent so the map band can bleed to the edges. */
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
box-shadow: var(--shadow-soft);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.headerContent {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1.5rem;
|
|
padding: 1.25rem 1.5rem;
|
|
}
|
|
|
|
/* With a map band above, slide the title up under the fade so map and title
|
|
read as one object; the Compare button floats glassy over the map. */
|
|
.headerHasMap .headerContent {
|
|
padding-top: 0;
|
|
margin-top: -0.5rem;
|
|
}
|
|
|
|
/* The title (not the whole content row) rises above the map fade. Keeping
|
|
.headerContent unpositioned matters: .actions must anchor to .header so it
|
|
floats over the map band, not over the title. */
|
|
.headerHasMap .titleSection {
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.headerHasMap .actions {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 14px;
|
|
z-index: 6;
|
|
margin: 0;
|
|
/* Beat the mobile `.actions { width: 100% }` rule — a floating button
|
|
must never stretch across the title. */
|
|
width: auto;
|
|
}
|
|
|
|
.headerHasMap .actions .btnAdd {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
border-color: transparent;
|
|
-webkit-backdrop-filter: blur(6px);
|
|
backdrop-filter: blur(6px);
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
|
|
}
|
|
|
|
.headerHasMap .actions .btnAdd:hover {
|
|
background: #fff;
|
|
}
|
|
|
|
/* Full label by default; phones over the map get an icon-only button
|
|
(same compact treatment as the section-nav compare icon). */
|
|
.btnCompareGlyph {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.headerHasMap .actions .btnCompareLabel {
|
|
display: none;
|
|
}
|
|
|
|
.headerHasMap .actions .btnCompareGlyph {
|
|
display: inline;
|
|
}
|
|
|
|
.headerHasMap .actions .btnAdd,
|
|
.headerHasMap .actions .btnRemove {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 0;
|
|
border-radius: 999px;
|
|
font-size: 1.375rem;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
/* Inline "View on map ↗" trigger next to the address. */
|
|
.mapLink {
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
font: inherit;
|
|
font-weight: 600;
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mapLink:hover {
|
|
color: var(--accent-coral-dark, #c45a3f);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.titleSection {
|
|
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;
|
|
}
|
|
|
|
.badges {
|
|
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;
|
|
}
|
|
|
|
.badgeSelective {
|
|
background: rgba(180, 120, 0, 0.1);
|
|
color: #8a6200;
|
|
}
|
|
|
|
.badgeFaith {
|
|
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;
|
|
}
|
|
|
|
.headerDetails {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem 1.25rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.headerDetail {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
}
|
|
|
|
.headerDetail strong {
|
|
color: var(--text-primary, #1a1612);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.headerDetail a {
|
|
color: var(--accent-teal, #2d7d7d);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.headerDetail a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.actions {
|
|
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;
|
|
}
|
|
|
|
.btnAdd {
|
|
background: var(--accent-coral-dark, #b04a2e);
|
|
color: white;
|
|
}
|
|
|
|
.btnAdd:hover {
|
|
background: var(--accent-coral-darker, #9c3f26);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btnRemove {
|
|
background: var(--accent-teal, #2d7d7d);
|
|
color: white;
|
|
}
|
|
|
|
.btnRemove:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* ── Tab Navigation (sticky) ─────────────────────────── */
|
|
.tabNav {
|
|
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;
|
|
}
|
|
|
|
.tabNavInner {
|
|
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-dark, #b04a2e);
|
|
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);
|
|
}
|
|
|
|
.tabNavDivider {
|
|
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;
|
|
}
|
|
|
|
.tabBtn:hover {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
color: var(--text-primary, #1a1612);
|
|
}
|
|
|
|
.tabBtnActive {
|
|
background: var(--accent-coral-dark, #b04a2e);
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tabBtnActive:hover {
|
|
background: var(--accent-coral-darker, #9c3f26);
|
|
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;
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|
|
|
|
.sectionTitle::before {
|
|
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;
|
|
}
|
|
|
|
.subSectionTitle {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary, #5c564d);
|
|
margin: 1.25rem 0 0.75rem;
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|
|
|
|
/* ── Metrics Grid & Cards ────────────────────────────── */
|
|
.metricsGrid {
|
|
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;
|
|
}
|
|
|
|
.metricLabel {
|
|
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;
|
|
}
|
|
|
|
.metricHint {
|
|
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;
|
|
}
|
|
|
|
.progressNegative {
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ── Status colours ──────────────────────────────────── */
|
|
.statusGood {
|
|
background: var(--accent-teal-bg);
|
|
color: var(--accent-teal, #2d7d7d);
|
|
}
|
|
|
|
.statusWarn {
|
|
background: var(--accent-gold-bg);
|
|
color: var(--accent-gold-text, #7a6800);
|
|
}
|
|
|
|
/* ── Metric table (row-based) ────────────────────────── */
|
|
.metricTable {
|
|
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;
|
|
}
|
|
|
|
.metricName {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
}
|
|
|
|
.metricRow .metricValue {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--accent-teal, #2d7d7d);
|
|
}
|
|
|
|
/* ── Charts & Map ────────────────────────────────────── */
|
|
.chartContainer {
|
|
width: 100%;
|
|
height: 280px;
|
|
position: relative;
|
|
}
|
|
|
|
/* ── History table ───────────────────────────────────── */
|
|
.tableWrapper {
|
|
overflow-x: auto;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.historicalSubtitle {
|
|
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;
|
|
}
|
|
|
|
.dataTable thead {
|
|
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);
|
|
}
|
|
|
|
.dataTable td {
|
|
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;
|
|
}
|
|
|
|
.dataTable tbody tr:hover {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
}
|
|
|
|
.yearCell {
|
|
font-weight: 600;
|
|
color: var(--accent-gold, #c9a227);
|
|
}
|
|
|
|
/* ── Ofsted ──────────────────────────────────────────── */
|
|
.ofstedHeader {
|
|
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;
|
|
}
|
|
|
|
.ofstedGrade1 {
|
|
background: var(--accent-teal-bg);
|
|
color: var(--accent-teal, #2d7d7d);
|
|
}
|
|
.ofstedGrade2 {
|
|
background: rgba(60, 140, 60, 0.12);
|
|
color: #2f7a2f;
|
|
}
|
|
.ofstedGrade3 {
|
|
background: var(--accent-gold-bg);
|
|
color: var(--accent-gold-text, #7a6800);
|
|
}
|
|
.ofstedGrade4 {
|
|
background: var(--accent-coral-bg);
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
}
|
|
|
|
.rcGrade1 {
|
|
background: var(--accent-teal-bg);
|
|
color: var(--accent-teal, #2d7d7d);
|
|
}
|
|
.rcGrade2 {
|
|
background: rgba(60, 140, 60, 0.12);
|
|
color: #2f7a2f;
|
|
}
|
|
.rcGrade3 {
|
|
background: var(--accent-gold-bg);
|
|
color: var(--accent-gold-text, #7a6800);
|
|
}
|
|
.rcGrade4 {
|
|
background: rgba(249, 115, 22, 0.12);
|
|
color: #c2410c;
|
|
}
|
|
.rcGrade5 {
|
|
background: var(--accent-coral-bg);
|
|
color: var(--accent-coral-dark, #b04a2e);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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-dark, #b04a2e);
|
|
}
|
|
|
|
.ofstedDisclaimer {
|
|
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);
|
|
}
|
|
|
|
.ofstedPrevious {
|
|
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;
|
|
}
|
|
|
|
.ofstedReportLink:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ── Admissions ──────────────────────────────────────── */
|
|
.admissionsTypeBadge {
|
|
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);
|
|
}
|
|
|
|
.admissionsFaith {
|
|
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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* ── Deprivation ─────────────────────────────────────── */
|
|
.deprivationDots {
|
|
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;
|
|
}
|
|
|
|
.deprivationDotFilled {
|
|
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;
|
|
}
|
|
|
|
.deprivationScaleLabel {
|
|
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;
|
|
}
|
|
|
|
.ofstedAllSame strong {
|
|
color: var(--text-primary, #1a1612);
|
|
}
|
|
|
|
/* .heroStatLabel is shared by the GCSE / Pupils stat cards below. */
|
|
.heroStatLabel {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary, #5c564d);
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.heroStatCard .heroStatLabel {
|
|
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;
|
|
}
|
|
|
|
.heroStatCard .heroStatHint {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted, #6d685f);
|
|
font-style: normal;
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Gender split — attached beneath the Total pupils stat value */
|
|
.genderBar {
|
|
display: flex;
|
|
height: 4px;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
background: rgba(0, 0, 0, 0.08);
|
|
margin-top: 0.45rem;
|
|
}
|
|
|
|
.genderBarGirls {
|
|
background: #a04a68;
|
|
}
|
|
|
|
.genderBarBoys {
|
|
background: var(--accent-teal, #2d7d7d);
|
|
}
|
|
|
|
.genderSplitHint {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted, #6d685f);
|
|
margin-top: 0.35rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.genderSplitGirls {
|
|
color: #a04a68;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.genderSplitBoys {
|
|
color: var(--accent-teal, #2d7d7d);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.genderSplitSep {
|
|
color: var(--border-color, #e5dfd5);
|
|
}
|
|
|
|
/* ── Attainment 8 visual bar ─────────────────────────── */
|
|
.att8Viz {
|
|
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;
|
|
}
|
|
|
|
.att8VizTrack {
|
|
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;
|
|
}
|
|
|
|
.att8VizNatLine {
|
|
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-dark, #b04a2e);
|
|
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);
|
|
}
|
|
|
|
/* ── Progress 8 number line ──────────────────────────── */
|
|
.p8Viz {
|
|
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;
|
|
}
|
|
|
|
.p8VizTrack {
|
|
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;
|
|
}
|
|
|
|
.p8VizZero {
|
|
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;
|
|
}
|
|
|
|
.p8VizDotNeg {
|
|
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);
|
|
}
|
|
|
|
/* ── History accordion ───────────────────────────────── */
|
|
.historyDisclosure {
|
|
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;
|
|
}
|
|
|
|
.historyToggle::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.historyToggle::before {
|
|
content: "▶";
|
|
font-size: 0.6rem;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.historyDisclosure[open] .historyToggle::before {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* ── Responsive ──────────────────────────────────────── */
|
|
@media (max-width: 768px) {
|
|
.header {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.headerContent {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.actions {
|
|
width: 100%;
|
|
}
|
|
|
|
.btnAdd,
|
|
.btnRemove {
|
|
flex: 1;
|
|
}
|
|
|
|
.schoolName {
|
|
word-break: break-word;
|
|
}
|
|
|
|
.badges {
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.badge {
|
|
font-size: 0.75rem;
|
|
padding: 0.1rem 0.375rem;
|
|
}
|
|
|
|
.headerDetails {
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.metricsGrid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.metricValue {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.heroStatGrid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.heroStatCard .heroStatValue {
|
|
font-size: 1.85rem;
|
|
}
|
|
|
|
/* On mobile let the chart container flow naturally — PerformanceChart's
|
|
own .chartWrapper carries the definite canvas height (220px) plus the
|
|
chip strip above it. A fixed 220px here double-constrained the two and
|
|
clipped the chips onto the plot area. */
|
|
.chartContainer {
|
|
height: auto;
|
|
}
|
|
|
|
.dataTable {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.dataTable th,
|
|
.dataTable td {
|
|
padding: 0.5rem 0.375rem;
|
|
}
|
|
|
|
.card {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.sectionTitle {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.ofstedReportLink {
|
|
margin-left: 0;
|
|
display: block;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.admissionsTypeBadge {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.metricsGrid {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.metricCard {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.metricLabel {
|
|
font-size: 0.625rem;
|
|
}
|
|
|
|
.card {
|
|
padding: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* GIAS "Open, but proposed to close" notice strip */
|
|
.closingStrip {
|
|
background: #fdf6e3;
|
|
border-left: 4px solid #e2c96f;
|
|
border-radius: 0 6px 6px 0;
|
|
padding: 0.55rem 0.9rem;
|
|
margin: 0.5rem 0;
|
|
font-size: 0.88rem;
|
|
color: #6e5a00;
|
|
max-width: 68ch;
|
|
}
|
|
.closingStrip strong {
|
|
color: #8a6200;
|
|
}
|