/* area.php (prototype) - one area's schools at a glance, dashboard style.
   No boxes: bands separated by rules, tiles marked by a left accent line.
   Tiles are <details>: hover shows a short tip, click opens the detail. */
.at-page { max-width: 1080px; margin: 0 auto; padding: 0 0 24px; }

.at-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; margin: 4px 0 6px; }
.at-head h1 { margin: 0; font-size: 1.9rem; color: var(--color-primary-dark); line-height: 1.15; }
.at-kicker { margin: 0 0 2px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
.at-area-form select { padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); font-size: 0.95rem; max-width: 70vw; }
.at-hint { margin: 0 0 18px; font-size: 0.85rem; color: var(--color-text-muted); }
.at-muted { color: var(--color-text-muted); font-weight: 400; }

/* Bands */
.at-band { border-top: 2px solid var(--color-border); padding: 14px 0 18px; }
.at-band-title { margin: 0 0 10px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-primary); }
.at-band-title .at-muted { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.85rem; margin-left: 6px; }
.at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 6px 14px; align-items: start; }

/* Tiles */
.at-tile { position: relative; border-left: 3px solid var(--color-primary); }
.at-tile > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 1px; padding: 8px 10px 8px 12px; border-radius: 0 8px 8px 0; transition: background-color 0.15s; outline-offset: 2px; }
.at-tile > summary::-webkit-details-marker { display: none; }
.at-tile > summary:hover, .at-tile > summary:focus-visible, .at-tile[open] > summary { background: rgba(42, 111, 119, 0.07); }
.at-value { font-size: 2rem; font-weight: 800; line-height: 1.05; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
.at-value small { font-size: 0.95rem; font-weight: 600; color: var(--color-text-muted); margin-left: 1px; }
.at-label { font-size: 0.88rem; font-weight: 600; color: var(--color-text); }
.at-sub { font-size: 0.8rem; color: var(--color-text-muted); }
.at-more { align-self: flex-start; margin-top: 3px; font-size: 0.75rem; font-weight: 700; color: var(--color-primary); }
.at-more::after { content: " \25BE"; }
.at-tile[open] .at-more::after { content: " \25B4"; }
.at-tile[open] .at-more { font-size: 0; }
.at-tile[open] .at-more::before { content: "Less"; font-size: 0.75rem; }
.at-tile[open] .at-more::after { font-size: 0.75rem; }
.at-tone-good { border-left-color: #3F7D5C; }
.at-tone-good .at-value { color: #2F6B4F; }
.at-tone-warn { border-left-color: #C27A5C; }
.at-tone-warn .at-value { color: #A0523A; }

/* Hover tip (desktop only - on touch screens the click shows the detail) */
.at-tip { display: none; position: absolute; z-index: 20; left: 10px; bottom: calc(100% + 6px); width: max-content; max-width: 260px; padding: 7px 10px; border-radius: 8px; background: var(--color-assistant-bg, #454A54); color: #fff; font-size: 0.8rem; font-weight: 400; line-height: 1.4; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); pointer-events: none; }
@media (hover: hover) {
    .at-tile:not([open]) > summary:hover .at-tip,
    .at-tile:not([open]) > summary:focus-visible .at-tip { display: block; animation: at-tip-in 0.15s ease 0.25s both; }
}
@keyframes at-tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Open tile: takes the full row, detail underneath */
.at-tile[open] { grid-column: 1 / -1; }
.at-tile[open] > summary { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.at-tile[open] .at-value { font-size: 1.5rem; }
.at-tile[open] > summary .at-bar { display: none; }
.at-panel { padding: 6px 12px 12px; font-size: 0.92rem; line-height: 1.5; }
.at-panel p { margin: 6px 0; }
.at-schools { columns: 3 200px; column-gap: 24px; margin: 4px 0 8px; padding: 0; list-style: none; font-size: 0.9rem; }
.at-schools li { break-inside: avoid; padding: 2px 0; }
.at-plain { margin: 4px 0 8px; padding: 0; list-style: none; }
.at-plain li { padding: 3px 0; border-bottom: 1px dotted var(--color-border); }

/* Bars */
.at-bar { display: flex; height: 8px; width: 100%; max-width: 140px; border-radius: 4px; overflow: hidden; background: #EDE5DA; margin-top: 3px; }
.at-panel .at-bar { height: 12px; max-width: 360px; margin: 6px 0; }
.at-bar i { display: block; height: 100%; min-width: 3px; }
.ab-well-above { background: #2F6B4F; }
.ab-above { background: #7DB46C; }
.ab-expected { background: #C9CDD1; }
.ab-below { background: #E3A27F; }
.ab-well-below { background: #B25B4A; }
.fb-shared { background: #3F7D5C; }
.fb-waiting { background: #E0B85A; }
.fb-declined { background: #B25B4A; }
.at-ring { display: inline-block; width: 9px; height: 9px; border: 2px solid #2E9443; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* Journalists - folded away at the bottom */
.at-press { border-top: 2px solid var(--color-border); padding: 12px 0; font-size: 0.92rem; }
.at-press > summary { cursor: pointer; font-weight: 700; color: var(--color-primary-dark); }
.at-stories { margin: 10px 0; padding-left: 20px; line-height: 1.5; }
.at-stories li { margin-bottom: 8px; }
.at-stories .at-muted { display: block; font-size: 0.8rem; }

@media (max-width: 600px) {
    .at-head h1 { font-size: 1.5rem; }
    .at-grid { grid-template-columns: 1fr 1fr; gap: 4px 8px; }
    .at-value { font-size: 1.6rem; }
    .at-schools { columns: 1; }
}
.at-hint-hover { display: none; }
@media (hover: hover) { .at-hint-hover { display: inline; } }

/* ================================================================
   Top-level section tabs (Overview / Results / Admissions / SEN)
   ================================================================ */
.at-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 20px;
    padding: 0 0 2px;
}

.at-nav-tab {
    flex: 0 0 auto;
    padding: 10px 22px;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface, #fff);
    color: var(--color-primary-dark);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    line-height: 1.3;
}
.at-nav-tab:hover {
    background: rgba(42, 111, 119, 0.06);
    border-color: var(--color-primary);
}
.at-nav-tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(31, 86, 92, 0.2);
}
@media (max-width: 600px) {
    .at-nav { gap: 5px; }
    .at-nav-tab { padding: 7px 12px; font-size: 0.82rem; }
}

/* Section visibility - JS toggles the hidden attribute */
.at-section[hidden] { display: none; }

/* Intro blurb at the top of a section */
.at-section-intro {
    margin: 0 0 18px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-text);
    max-width: 720px;
}
.at-section-intro p { margin: 0 0 6px; }

/* Capacity / admissions tables */
.at-cap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: 8px 0 4px;
}
.at-cap-table thead th {
    background: var(--color-primary);
    color: #fff;
    padding: 8px 10px;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}
.at-cap-table thead th:first-child { border-radius: 8px 0 0 0; width: 32px; text-align: center; }
.at-cap-table thead th:last-child { border-radius: 0 8px 0 0; }
.at-cap-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.at-cap-table td:first-child { text-align: center; font-weight: 700; color: var(--color-primary); }
.at-cap-table tbody tr:hover { background: rgba(42, 111, 119, 0.04); }
@media (max-width: 600px) {
    .at-cap-table { font-size: 0.82rem; }
    .at-cap-table thead th, .at-cap-table td { padding: 6px 6px; }
}

/* Fill-rate colour badges */
.at-fill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.82rem;
}
.at-fill-low  { background: #DAF0E0; color: #2B6A42; }
.at-fill-mid  { background: #E6EEF0; color: #2A5A60; }
.at-fill-high { background: #FBE3DA; color: #8E4133; }
.at-fill-over { background: #FBEAE7; color: #8E2E1D; font-weight: 800; }

/* Two columns on wide screens */
.at-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
@media (min-width: 980px) {
    .at-layout { grid-template-columns: minmax(0, 1fr) 290px; }
    .at-aside { position: sticky; top: 16px; align-self: start; }
}
/* Results section: league tables (main) + figure tiles (aside, wider) */
@media (min-width: 980px) {
    .at-layout-results { grid-template-columns: minmax(0, 1fr) 320px; }
}
.at-aside { padding-top: 6px; }
.at-aside-figures { padding-top: 0; }
.at-top { border-top: 2px solid var(--color-border); padding: 14px 0 12px; }

/* League table section */
.at-league { border-top: 2px solid var(--color-border); padding-top: 14px; }
.at-league .at-band-title { margin-bottom: 10px; }

/* League tab panel display */
.at-league-tabs .at-tab-input:nth-of-type(1):checked ~ .at-results-panel:nth-of-type(1),
.at-league-tabs .at-tab-input:nth-of-type(2):checked ~ .at-results-panel:nth-of-type(2) { display: block; }

/* Two-column companion + raw results */
.at-results-cols { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 14px; }
@media (min-width: 640px) {
    .at-results-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.at-results-col { min-width: 0; }
.at-col-title { font-size: 0.88rem; font-weight: 800; color: var(--color-primary-dark); margin: 0; display: flex; align-items: center; gap: 5px; }
.at-col-icon { font-size: 0.72rem; color: var(--color-primary); }
.at-col-sub { font-size: 0.76rem; color: var(--color-muted); margin: 2px 0 0; }
.at-results-col .at-top-list { font-size: 0.85rem; }
.at-results-col .at-top-list li { padding: 4px 0; }

/* Single-column tile grid for aside */
.at-grid-aside { grid-template-columns: 1fr !important; }

/* Compact phase tabs inside the aside so Primary + Secondary fit on one line */
.at-aside-figures .at-phase-tabs { gap: 4px; }
.at-aside-figures .at-phase-tab { padding: 4px 10px; font-size: 0.78rem; white-space: nowrap; }
.at-aside-figures .at-phase-count { font-size: 0.7rem; }
.at-small { font-size: 0.8rem; margin: 6px 0 0; }

/* CSS-only Primary / Secondary switch */
.at-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.at-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.at-tab { cursor: pointer; padding: 3px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--color-primary-dark); border: 1px solid var(--color-border); }
.at-tab-input:checked + .at-tab { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.at-tab-input:focus-visible + .at-tab { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.at-tab-panel { display: none; flex: 1 1 100%; }
.at-tab-input:nth-of-type(1):checked ~ ol:nth-of-type(1),
.at-tab-input:nth-of-type(2):checked ~ ol:nth-of-type(2) { display: block; }
/* Generic div tab panels (admissions tables, capacity tables, etc.) */
.at-tab-input:nth-of-type(1):checked ~ div.at-tab-panel:nth-of-type(1),
.at-tab-input:nth-of-type(2):checked ~ div.at-tab-panel:nth-of-type(2) { display: block; }
.at-top-list { margin: 8px 0 0; padding-left: 22px; font-size: 0.9rem; }
.at-top-list li { padding: 5px 0; border-bottom: 1px dotted var(--color-border); }
.at-top-list li::marker { font-weight: 800; color: var(--color-primary); }
.at-top-main { display: block; font-size: 0.82rem; font-weight: 700; color: var(--color-primary-dark); }
.at-top-sub { display: block; font-size: 0.78rem; }

/* Who runs the schools */
.at-trusts { list-style: none; margin: 0; padding: 0; }
.at-trusts > li { border-bottom: 1px solid var(--color-border); }
.at-trusts summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 2.4fr) 72px 100px minmax(0, 1.3fr) minmax(0, 1.3fr); gap: 4px 12px; align-items: center; padding: 8px 6px; font-size: 0.9rem; border-radius: 6px; }
.at-trusts summary::-webkit-details-marker { display: none; }
.at-trusts summary:hover, .at-trusts details[open] > summary { background: rgba(42, 111, 119, 0.07); }
.at-trust-name { font-weight: 700; color: var(--color-primary-dark); }
.at-trust-name::before { content: "\25B8 "; color: var(--color-primary); }
.at-trusts details[open] .at-trust-name::before { content: "\25BE "; }
.at-trust-n { color: var(--color-text-muted); font-size: 0.85rem; }
.at-trust-res .at-bar { max-width: 110px; margin: 0; }
.at-trust-hq, .at-trust-reserve { font-weight: 700; white-space: nowrap; }
.at-trust-hq small, .at-trust-reserve small { font-weight: 400; color: var(--color-text-muted); font-size: 0.75rem; }
.at-pill { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; vertical-align: 1px; }
.at-pill-low { background: #FBE3DA; color: #8E4133; }
.at-pill-typical { background: #E6EEF0; color: #2A5A60; }
.at-pill-high { background: #FCEFD2; color: #7A5A12; }
@media (max-width: 700px) {
    .at-trusts summary { grid-template-columns: 1fr auto; }
    .at-trust-res, .at-trust-hq, .at-trust-reserve { grid-column: 1 / -1; }
    .at-trust-res .at-bar { max-width: 160px; }
}

/* Headline carousel */
.at-carousel { position: relative; margin: 6px 0 4px; }
.at-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: 14px; scrollbar-width: none; outline-offset: 3px; }
.at-slides::-webkit-scrollbar { display: none; }
.at-slide { flex: 0 0 100%; scroll-snap-align: start; min-height: 230px; display: flex; align-items: center; background-size: cover; background-position: right center; color: #fff; }
.at-slide-text { max-width: 62%; padding: 26px 28px; }
.at-slide-big { margin: 0; font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #FFFFFF; }
.at-slide-big small { font-size: 1.15rem; font-weight: 600; letter-spacing: 0; color: #CFE3E5; margin-left: 4px; }
.at-slide-line { margin: 10px 0 8px; font-size: 1.1rem; line-height: 1.4; font-weight: 600; }
.at-slide-source { margin: 0; font-size: 0.78rem; color: #BFD6D9; }
.at-slide-source a { color: #FFFFFF; font-weight: 700; }
.at-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.at-car-btn, .at-car-pause { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border); background: transparent; color: var(--color-primary-dark); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.at-car-pause { font-size: 0.7rem; letter-spacing: -2px; }
.at-car-btn:hover, .at-car-pause:hover { background: rgba(42, 111, 119, 0.08); }
.at-car-dots { display: flex; gap: 6px; }
.at-car-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: #D5CABD; cursor: pointer; }
.at-car-dot[aria-current="true"] { background: var(--color-primary); width: 22px; border-radius: 5px; }
@media (max-width: 600px) {
    .at-slide { min-height: 250px; align-items: flex-end; background-position: 70% center; }
    .at-slide-text { max-width: 100%; padding: 18px; }
    .at-slide-big { font-size: 2.5rem; }
    .at-slide-line { font-size: 1rem; }
}

/* At a glance list */
.at-glance-list { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: 28px; }
.at-glance-list > li { break-inside: avoid; border-bottom: 1px dotted var(--color-border); }
.at-glance-list summary, .at-glance-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 4px; }
.at-glance-list summary { list-style: none; cursor: pointer; border-radius: 6px; }
.at-glance-list summary::-webkit-details-marker { display: none; }
.at-glance-list summary:hover, .at-glance-list details[open] > summary { background: rgba(42, 111, 119, 0.07); }
.at-glance-n { flex: 0 0 64px; text-align: right; font-size: 1.35rem; font-weight: 800; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
.at-glance-label { flex: 1; font-weight: 600; font-size: 0.95rem; }
.at-glance-sub { display: block; font-weight: 400; font-size: 0.8rem; color: var(--color-text-muted); }
.at-glance-more::after { content: "\25BE"; color: var(--color-primary); font-size: 0.8rem; }
.at-glance-list details[open] .at-glance-more::after { content: "\25B4"; }
.at-glance-detail { padding: 2px 6px 10px 80px; font-size: 0.88rem; }
@media (max-width: 600px) { .at-glance-detail { padding-left: 10px; } .at-glance-n { flex-basis: 52px; } }
/* Phones: darken the whole slide so the text reads over the drawing */
.at-slide { position: relative; }
.at-slide-text { position: relative; z-index: 1; }
@media (max-width: 600px) {
    .at-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 52, 56, 0.92) 0%, rgba(20, 52, 56, 0.75) 55%, rgba(20, 52, 56, 0.25) 100%); border-radius: inherit; }
}
.at-glance-n { flex: 0 0 auto; min-width: 64px; }
@media (max-width: 600px) { .at-glance-n { min-width: 52px; } }

/* At a glance - donut of every school by kind, who runs them, key facts */
.at-area-form select { background: #fff; }
.at-glance-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px 34px; align-items: start; }
.at-donut-wrap { display: flex; align-items: center; gap: 22px; }
.at-donut { position: relative; flex: 0 0 210px; width: 210px; height: 210px; }
.at-donut-svg { width: 100%; height: 100%; transform: rotate(0deg); }
.at-donut-slice { transition: opacity 0.15s, stroke-width 0.15s; cursor: default; }
.at-donut-wrap.is-hl .at-donut-slice { opacity: 0.3; }
.at-donut-wrap.is-hl .at-donut-slice.is-on { opacity: 1; stroke-width: 7.6; }
.at-donut-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.at-donut-total { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--color-primary-dark); }
.at-donut-cap { margin-top: 4px; font-size: 0.78rem; font-weight: 600; line-height: 1.25; color: var(--color-text-muted); }
.at-key { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; }
.at-key > li { border-radius: 8px; transition: background-color 0.15s; }
.at-key > li.is-on { background: rgba(42, 111, 119, 0.08); }
.at-key summary, .at-key-row { display: flex; align-items: center; gap: 9px; padding: 5px 6px; color: inherit; text-decoration: none; cursor: pointer; list-style: none; border-radius: 8px; }
.at-key summary::-webkit-details-marker { display: none; }
.at-key-row:hover { text-decoration: none; }
.at-key-dot { flex: 0 0 12px; height: 12px; border-radius: 4px; }
.at-key-n { flex: 0 0 auto; min-width: 26px; font-weight: 800; font-size: 1.05rem; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
.at-key-label { flex: 1; font-weight: 600; font-size: 0.9rem; line-height: 1.25; }
.at-key-sub { display: block; font-weight: 400; font-size: 0.76rem; color: var(--color-text-muted); }
.at-key details[open] .at-glance-more::after, .at-sen-chip[open] .at-glance-more::after { content: "\25B4"; }
.at-key-detail { padding: 0 6px 8px 47px; font-size: 0.86rem; }
.at-glance-side { display: flex; flex-direction: column; gap: 16px; }
.at-side-title { margin: 0 0 7px; font-size: 0.85rem; font-weight: 700; color: var(--color-primary-dark); }
.at-runs-bar { display: flex; height: 30px; border-radius: 9px; overflow: hidden; }
.at-runs-bar span { display: flex; align-items: center; justify-content: center; min-width: 30px; color: #fff; font-weight: 800; font-size: 0.9rem; }
.at-runs-acad { background: #6B4FA0; }
.at-runs-council { background: #2A8C96; }
.at-runs-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font-size: 0.8rem; color: var(--color-text-muted); }
.at-runs-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.at-runs .at-small { margin: 6px 0 0; }
.at-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; margin: 0; padding: 0; }
.at-facts li, .at-sen-chip summary { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 12px; background: #fff; border: 1px solid var(--color-border); }
.at-fact-icon { font-size: 1.15rem; line-height: 1; }
.at-fact-n { font-weight: 800; font-size: 1.1rem; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
.at-fact-label { font-size: 0.8rem; line-height: 1.25; color: var(--color-text-muted); font-weight: 600; }
.at-sen-chip summary { cursor: pointer; list-style: none; }
.at-sen-chip summary::-webkit-details-marker { display: none; }
.at-sen-chip summary .at-fact-label { flex: 1; }
.at-sen-chip .at-key-detail { padding: 8px 4px 2px; }
@media (max-width: 860px) {
    .at-glance-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .at-donut-wrap { flex-direction: column; align-items: stretch; }
    .at-donut { align-self: center; flex-basis: auto; }
    .at-key-detail { padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) { .at-donut-slice, .at-key > li { transition: none; } }
/* the page has a sidebar on desktop, so stack: chart + key, then who-runs beside the facts */
.at-glance-grid { grid-template-columns: 1fr; }
.at-glance-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px 26px; align-items: start; }
.at-sen-chip { grid-column: 1 / -1; }
.at-key { columns: 2 210px; column-gap: 14px; }
.at-key > li { break-inside: avoid; }
@media (max-width: 640px) { .at-glance-side { grid-template-columns: 1fr; } }

/* Primary / Secondary as tabs, same style as the Most oversubscribed tabs */
.at-phase-tabs { gap: 6px; }
.at-phase-tab { padding: 6px 16px; font-size: 0.92rem; }
.at-phase-count { font-weight: 600; font-size: 0.8rem; opacity: 0.8; margin-left: 4px; }
.at-phase-panel { display: none; flex: 1 1 100%; margin-top: 12px; }
.at-phases .at-tab-input:nth-of-type(1):checked ~ .at-phase-panel:nth-of-type(1),
.at-phases .at-tab-input:nth-of-type(2):checked ~ .at-phase-panel:nth-of-type(2) { display: block; }

/* Top 5 for results - third "Raw results" tab (both phases, league-table order) */
.at-tab-input-raw:checked ~ .at-tab-panel-raw { display: block; }
.at-raw-head { margin: 10px 0 0; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); }
.at-tab-panel-raw .at-top-list { margin-top: 4px; }

/* SEN places */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 30px; align-items: start; }
.sp-kicker { margin: 0 0 4px; font-size: 0.8rem; font-weight: 800; color: var(--color-primary-dark); }
.sp-head { margin: 0; font-size: 1.05rem; color: var(--color-text); }
.sp-head b { font-size: 1.6rem; font-weight: 800; color: var(--color-primary-dark); }
.sp-head.sp-over b:first-child { color: #A0452B; }
.sp-verdict { margin: 2px 0 8px; font-size: 0.85rem; font-weight: 700; }
.sp-verdict.sp-over { color: #A0452B; } .sp-verdict.sp-full { color: #8A6413; } .sp-verdict.sp-space { color: #2E7D4F; }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-list li { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 2px 10px; align-items: center; padding: 6px 0; border-bottom: 1px dotted var(--color-border); font-size: 0.88rem; }
.sp-name small { display: block; font-size: 0.75rem; color: var(--color-text-muted); }
.sp-num { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.82rem; }
.sp-bar { display: flex; height: 9px; border-radius: 5px; background: #EFE6DC; overflow: hidden; }
.sp-bar i { display: block; height: 100%; }
.sp-over i { background: #C4573A; } .sp-full i { background: #E0A23A; } .sp-space i { background: #2E7D4F; }
.sp-bar i.sp-bar-over { background: repeating-linear-gradient(45deg, #7A2E1F 0 3px, #C4573A 3px 6px); }
.sp-more summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--color-primary); padding: 2px 0 6px; }
.sp-stats { list-style: none; margin: 0; padding: 0; }
.sp-stats li { padding: 6px 0; border-bottom: 1px dotted var(--color-border); font-size: 0.88rem; }
.sp-stats b { font-size: 1.25rem; font-weight: 800; color: var(--color-primary-dark); margin-right: 3px; }
.sp-stats li.sp-bad b { color: #A0452B; } .sp-stats li.sp-good b { color: #2E7D4F; }
.sp-stats small { display: block; font-size: 0.75rem; color: var(--color-text-muted); }
.sp-caveat { margin-top: 10px; }

/* SEN places sits on its own soft-lavender panel to break up the page */
.sp-band { margin: 18px 0; padding: 16px 20px 14px; border-top: 0; border-radius: 16px; background: #F3EFFA; box-shadow: inset 0 0 0 1px #E4DCF2; }
.sp-band .at-band-title { color: #6B4FA0; }
.sp-band .sp-list li, .sp-band .sp-stats li { border-bottom-color: #DCD2EE; }
.sp-band .sp-bar { background: #E2D9F0; }
@media (max-width: 600px) { .sp-band { margin-left: -6px; margin-right: -6px; padding: 14px 14px 12px; border-radius: 12px; } }

/* SEN swipe card: the area and England, one swipe apart */
.sw { margin: 2px 0 18px; }
.sw-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 10px; }
.sw-pills { display: inline-flex; padding: 3px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #DCD2EE; }
.sw-pill { padding: 6px 16px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 0.88rem; font-weight: 700; color: #6B4FA0; cursor: pointer; }
.sw-pill[aria-current="true"] { background: #6B4FA0; color: #fff; }
.sw-hint { font-size: 0.8rem; color: var(--color-text-muted); }
.sw-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sw-track::-webkit-scrollbar { display: none; }
.sw-track:focus-visible { outline: 2px solid #6B4FA0; outline-offset: 4px; border-radius: 12px; }
.sw-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.sw-place { margin: 0 0 8px; font-size: 1.15rem; font-weight: 800; color: #4A3478; }
.sw-place small { display: block; font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); }
.sw-national .sw-place { color: #2A6F77; }
.sw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.sw-card { min-width: 0; padding: 12px 14px 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 0 #E4DCF2, 0 0 0 1px #EDE7F6; }
.sw-k { margin: 0 0 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #6B4FA0; }
.sw-big { margin: 0; font-size: 0.82rem; line-height: 1.3; color: var(--color-text); }
.sw-big b { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--color-primary-dark); }
.sw-big.sp-over b { color: #A0452B; } .sw-big.sp-full b { color: #8A6413; }
.sw-sub { margin: 3px 0 8px; font-size: 0.76rem; color: var(--color-text-muted); }
.sw-sub strong { color: var(--color-text); }
.sw-cols { display: flex; align-items: stretch; gap: 4px; height: 74px; }
.sw-col { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 15px; }
.sw-col i { display: block; border-radius: 3px 3px 0 0; background: #CDBDE8; }
.sw-col-now i { background: #6B4FA0; }
.sw-col em { font-style: normal; text-align: center; font-size: 0.75rem; color: var(--color-text-muted); }
.sw-col small { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 0.62rem; color: var(--color-text-muted); }
.sw-needs { list-style: none; margin: 2px 0 0; padding: 0; }
.sw-needs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; margin: 0 0 6px; font-size: 0.78rem; line-height: 1.25; }
.sw-needs b { font-size: 0.85rem; color: var(--color-primary-dark); }
.sw-hbar { grid-column: 1 / -1; display: block; height: 7px; border-radius: 4px; background: #EEE8F7; overflow: hidden; }
.sw-hbar i { display: block; height: 100%; border-radius: 4px; background: #6B4FA0; }
.sw-stack { display: flex; height: 14px; margin: 8px 0 8px; border-radius: 6px; overflow: hidden; }
.sw-stack i { display: block; height: 100%; }
.sw-s-mainstream { background: #2A6F77; } .sw-s-special { background: #6B4FA0; } .sw-s-college { background: #E0A23A; } .sw-s-other { background: #C9C2D3; }
.sw-legend { list-style: none; margin: 0; padding: 0; font-size: 0.76rem; }
.sw-legend li { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.sw-legend li i { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 2px; }
.sw-legend b { margin-left: auto; }
.sw-card .sp-bar { margin: 8px 0 0; }
.sw-dots { display: none; justify-content: center; gap: 6px; margin-top: 10px; }
.sw-dot { width: 7px; height: 7px; border-radius: 50%; background: #CDBDE8; }
.sw-dot.is-on { width: 18px; border-radius: 4px; background: #6B4FA0; }
@media (max-width: 600px) {
    .sw-dots { display: flex; }
    .sw-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
    .sw-card { padding: 10px 11px; }
    .sw-big b { font-size: 1.45rem; }
}
@media (max-width: 380px) { .sw-cards { grid-template-columns: 1fr; } }

/* The units column runs down the right-hand side over two rows, so opening
   "See each unit" only lengthens that column - the EHC plan figures stay
   where they are instead of being pushed down the page. */
.sp-grid { grid-auto-flow: row dense; grid-template-rows: auto 1fr; }
.sp-col-units { grid-row: span 2; }

/* ── Area page companion assistant overrides ── */
.area-assistant-box {
    right: 70px;
    width: clamp(260px, calc((100vw - 980px) / 2 - 90px), 380px);
}

/* ── Capacity progress bars ── */
.at-cap-bars { display: flex; flex-direction: column; gap: 10px; }
.at-cap-row { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.at-cap-name { font-size: 0.85rem; font-weight: 600; line-height: 1.25; min-width: 0; }
.at-cap-name a { color: var(--color-text); text-decoration: none; }
.at-cap-name a:hover { color: var(--color-primary); text-decoration: underline; }
.at-cap-track { position: relative; height: 22px; border-radius: 11px; background: #EAEDF2; overflow: visible; }
.at-cap-fill { height: 100%; border-radius: 11px; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; min-width: 36px; transition: width 0.4s ease; }
.at-cap-label { font-size: 0.72rem; font-weight: 800; color: #fff; white-space: nowrap; text-shadow: 0 1px 1px rgba(0,0,0,0.15); }
.at-cap-blue { background: linear-gradient(90deg, #4A90C4, #3578B0); }
.at-cap-amber { background: linear-gradient(90deg, #D4922A, #C07B18); }
.at-cap-red { background: linear-gradient(90deg, #C4573A, #A63D24); }
.at-cap-mark { position: absolute; left: 90.9%; top: -3px; bottom: -3px; width: 2px; background: #888; border-radius: 1px; z-index: 2; opacity: 0.6; }
.at-cap-detail { font-size: 0.76rem; color: var(--color-text-muted); white-space: nowrap; }
.at-cap-spare { color: #2E7D4F; font-weight: 600; }
.at-cap-over { color: #C4573A; font-weight: 600; }

@media (max-width: 640px) {
    .at-cap-row { grid-template-columns: 1fr; gap: 2px; }
    .at-cap-detail { font-size: 0.72rem; }
}