/* School Context Comparator - colours checked for colour-blind
   separation: teal = better than expected, grey = as expected,
   terracotta = below. Never colour alone: numbers + table + badges. */
.ctx-page {
    --ctx-up: #1E7D8E;
    --ctx-mid: #98928B;
    --ctx-down: #D24E2C;
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}
.ctx-intro h1 { margin-bottom: 8px; }
.ctx-lede { font-size: 1.05rem; max-width: 760px; }
.ctx-filter { display: flex; gap: 10px; align-items: center; margin: 18px 0; flex-wrap: wrap; }
.ctx-filter label { font-weight: 600; }
.ctx-filter select { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; min-width: 220px; background: var(--color-surface); }
.ctx-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}
.ctx-card h2 { margin-top: 0; font-size: 1.25rem; }
.ctx-sub { color: var(--color-text-muted); margin-top: -4px; }
.ctx-h3 { font-size: 1rem; margin: 18px 0 8px; }
.ctx-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 8px 0 12px; font-size: 0.9rem; color: var(--color-text-muted); }
.ctx-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ctx-key { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.ctx-key.ctx-tone-up, .ctx-rownum.ctx-tone-up { background: var(--ctx-up); }
.ctx-key.ctx-tone-mid, .ctx-rownum.ctx-tone-mid { background: var(--ctx-mid); }
.ctx-key.ctx-tone-down, .ctx-rownum.ctx-tone-down { background: var(--ctx-down); }

.ctx-chart-wrap { position: relative; }
.ctx-chart { display: block; width: 100%; height: auto; }
.ctx-grid { stroke: #EFE8DF; stroke-width: 1; }
.ctx-tick { font-size: 12px; fill: var(--color-text-muted); }
.ctx-axis-title { font-size: 13px; fill: var(--color-text); font-weight: 600; }
.ctx-zone { font-size: 12px; fill: var(--color-text-muted); font-style: italic; }
.ctx-strip { fill: #F3EFEA; }
.ctx-diagonal { stroke: #B8B1A8; stroke-width: 2; stroke-dasharray: 6 5; }
.ctx-hit { fill: transparent; }
.ctx-mark { stroke: #FFFFFF; stroke-width: 2; }
.ctx-tone-up .ctx-mark { fill: var(--ctx-up); }
.ctx-tone-mid .ctx-mark { fill: var(--ctx-mid); }
.ctx-tone-down .ctx-mark { fill: var(--ctx-down); }
.ctx-num { font-size: 10px; font-weight: 700; fill: #FFFFFF; pointer-events: none; }
.ctx-dot { cursor: pointer; outline: none; }
.ctx-dot.is-active .ctx-mark, .ctx-dot:focus-visible .ctx-mark { stroke: var(--color-text); stroke-width: 2.5; }
.ctx-tooltip {
    position: absolute;
    z-index: 5;
    background: var(--color-assistant-bg, #454A54);
    color: #FFFFFF;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
    line-height: 1.35;
    max-width: 280px;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.ctx-tooltip strong, .ctx-tooltip span { display: block; }

.ctx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ctx-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 720px; }
.ctx-table th, .ctx-table td { padding: 9px 10px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.ctx-table th { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 600; background: var(--color-bg); }
.ctx-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctx-table tr.is-active td { background: #F7F3EE; }
.ctx-rownum { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #FFFFFF; font-size: 0.75rem; font-weight: 700; }
.ctx-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.ctx-badge-well_above { background: #1E7D8E; color: #FFFFFF; }
.ctx-badge-above { background: #DDEFF1; color: #155A66; }
.ctx-badge-expected { background: #EEEAE4; color: #5C554E; }
.ctx-badge-below { background: #F8E0D8; color: #8E3A20; }
.ctx-badge-well_below { background: #B8431F; color: #FFFFFF; }
.ctx-footnote { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 12px; }
.ctx-notscored { padding-left: 18px; font-size: 0.92rem; }
.ctx-explain ul { padding-left: 20px; }
.ctx-explain li { margin-bottom: 6px; }
.ctx-source { font-size: 0.8rem; color: var(--color-text-muted); }

@media (max-width: 600px) {
    .ctx-card { padding: 14px; }
    .ctx-num { font-size: 11px; }
}
.ctx-leader { stroke: #8A847D; stroke-width: 1; }
.ctx-true { fill: #8A847D; }
.ctx-chart-narrow { display: none; }
@media (max-width: 600px) {
    .ctx-chart-wide { display: none; }
    .ctx-chart-narrow { display: block; }
    .ctx-chart-narrow .ctx-tick { font-size: 11px; }
    .ctx-chart-narrow .ctx-zone { font-size: 11px; }
    .ctx-chart-narrow .ctx-axis-title { font-size: 12px; }
}

/* National cloud + band summary */
.ctx-cloud-up { fill: var(--ctx-up); }
.ctx-cloud-mid { fill: var(--ctx-mid); }
.ctx-cloud-down { fill: var(--ctx-down); }
.ctx-cloud-national path { fill-opacity: 0.55; }
.ctx-cloud-bg { fill: #CFC8BF; fill-opacity: 0.6; }
.ctx-band-bar { display: flex; gap: 2px; height: 14px; margin: 14px 0 10px; border-radius: 7px; overflow: hidden; }
.ctx-band-seg { display: block; height: 100%; padding: 0; border-radius: 0; }
.ctx-band-list { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 0 0 8px; font-size: 0.9rem; }
.ctx-next { margin: 14px 0 0; padding: 10px 14px; background: var(--color-bg); border-radius: 10px; }

/* Centred intro like other pages; page-intro supplies centring */
.ctx-page { padding: 0; max-width: none; }
.ctx-intro.page-intro { margin-bottom: 20px; }
.ctx-lede { max-width: none; }
.ctx-filter { justify-content: center; }

/* Schools the visitor compared */
.ctx-dot-compared .ctx-mark { stroke: #111111; stroke-width: 3; }
.ctx-compared-note { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: 0 0 8px; }
.ctx-compared-key { width: 14px; height: 14px; border-radius: 50%; background: var(--ctx-mid); border: 3px solid #111111; box-sizing: border-box; flex: none; }
.ctx-compared-tag { display: inline-block; margin-left: 4px; padding: 0 7px; border: 1.5px solid #111111; border-radius: 999px; font-size: 0.72rem; font-weight: 700; vertical-align: middle; }
.ctx-other-area { color: var(--color-text-muted); font-size: 0.85rem; }
.ctx-table tr.ctx-row-compared td { background: #FAF6F0; }

/* Secondary / Primary switch */
.ctx-phase-tabs { display: flex; justify-content: center; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.ctx-phase-tabs a { padding: 8px 16px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); text-decoration: none; color: var(--color-primary-dark); font-weight: 600; font-size: 0.95rem; }
.ctx-phase-tabs a.is-current { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; }
.ctx-phase-tabs a:not(.is-current):hover { border-color: var(--color-primary); }
.ctx-th-sub { display: block; font-weight: 400; font-size: 0.72rem; }

/* National dots are painted on a canvas behind each chart */
.ctx-svg-box { position: relative; }
.ctx-svg-box .ctx-chart { position: relative; z-index: 1; }
.ctx-cloud-canvas { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; }
.ctx-chart-narrow-box { display: none; }
@media (max-width: 600px) {
    .ctx-chart-wide-box { display: none; }
    .ctx-chart-narrow-box { display: block; }
}
.ctx-strip { fill: rgba(230, 222, 212, 0.55); }

/* Loading panel while the national picture arrives */
.ctx-loading {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 20px; text-align: center;
    background: rgba(255, 255, 255, 0.86);
    border-radius: 10px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.ctx-loading.is-visible { opacity: 1; pointer-events: auto; }
.ctx-loading.is-done { opacity: 0; pointer-events: none; }
.ctx-loading-title { margin: 0; font-weight: 700; color: var(--color-primary-dark); }
.ctx-loading-fact { margin: 0; max-width: 420px; font-size: 0.92rem; color: var(--color-text-muted); }
.ctx-loading-fact span { transition: opacity 0.25s ease; }
.ctx-loading-fact span.is-fading { opacity: 0; }
.ctx-loading.is-error .ctx-loading-title { color: var(--color-text-muted); font-weight: 400; }
.ctx-loading-dots { display: flex; gap: 6px; align-items: flex-end; height: 26px; }
.ctx-loading-dots span {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--ctx-mid);
    animation: ctx-bob 1.2s ease-in-out infinite;
}
.ctx-loading-dots span:nth-child(1), .ctx-loading-dots span:nth-child(2) { background: var(--ctx-up); }
.ctx-loading-dots span:nth-child(4), .ctx-loading-dots span:nth-child(5) { background: var(--ctx-down); }
.ctx-loading-dots span:nth-child(2) { animation-delay: 0.12s; }
.ctx-loading-dots span:nth-child(3) { animation-delay: 0.24s; }
.ctx-loading-dots span:nth-child(4) { animation-delay: 0.36s; }
.ctx-loading-dots span:nth-child(5) { animation-delay: 0.48s; }
@keyframes ctx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .ctx-loading-dots span { animation: none; } }

/* Low teacher turnover: green ring around the dot (outside any black "compared" outline) */
.ctx-turnover-ring { fill: none; stroke: #2E9443; stroke-width: 2.5; pointer-events: none; }
.ctx-turnover-key { width: 16px; height: 16px; border-radius: 50%; background: var(--ctx-mid); box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px #2E9443; flex: none; margin: 0 4px; }
.ctx-turnover-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2E9443; margin-right: 5px; vertical-align: middle; }

/* 'What we found' table (teacher turnover vs results) */
.ctx-table.ctx-found-table { min-width: 0; max-width: 640px; margin: 4px 0 10px; }

/* Teacher turnover band under the % in the comparator table */
.ctx-tv-label { display: block; font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; }