/* KS4 Benchmark: the CVCC v6 staff tools look (header banner, pill bars, panels, summary cards) */

:root{
    --blue:#003b8e;
    --dark-blue:#00255b;
    --light-blue:#dce7f8;
    --panel:#eef4ff;
    --shadow:rgba(0,0,0,.15);
    --pos:#1e8e3e;
    --pos-bg:#e3f4e7;
    --neg:#c5221f;
    --neg-bg:#fbe4e2;
    --neu:#5f6b7a;
    --eng:#444;
    --la:#ef6c00;
    --reg:#00838f;
    --trust:#7b3fe4;
    --school:#003b8e;
    --muted:#666;
}

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

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f2f4f7;
    color:#222;
    padding:20px;
}

button{ cursor:pointer; font:inherit; }
a{ color:var(--blue); }

.app{ max-width:1600px; margin:auto; }

/* ---------- header ---------- */
.header-banner{
    position:relative;
    background:var(--blue);
    color:#fff;
    text-align:center;
    padding:18px 170px;
    border:3px solid var(--dark-blue);
    margin-bottom:15px;
}
.header-banner .cvcc-logo{ position:absolute; left:18px; top:50%; transform:translateY(-50%); height:80px; }
.header-banner h1{ font-size:30px; }
.header-banner p{ margin-top:6px; opacity:.9; font-size:14px; }
.app-icon{ margin-right:10px; }
.app-tag{ font-size:13px; font-weight:normal; background:rgba(255,255,255,.18); border-radius:999px; padding:2px 10px; vertical-align:middle; margin-left:8px; }

.cvcc-help-btn{
    position:absolute; right:18px; top:50%; transform:translateY(-50%); font-weight:bold; font-size:15px;
    background:#fff; color:var(--blue); border:2px solid #000; border-radius:999px; padding:8px 16px;
}
.cvcc-help-btn:hover{ background:var(--light-blue); }

@media(max-width:1000px){
    .header-banner{ padding:18px; }
    .header-banner .cvcc-logo{ position:static; transform:none; display:block; margin:0 auto 10px; }
    .cvcc-help-btn{ position:static; transform:none; display:block; margin:10px auto 0; }
}

/* ---------- bars of controls ---------- */
.filter-bar{
    background:#fff; border-radius:10px; padding:10px 12px; box-shadow:0 2px 6px var(--shadow);
    display:flex; gap:12px; flex-wrap:wrap; align-items:center; font-size:14px; margin-bottom:12px;
}
.bar-label{ font-weight:bold; color:var(--blue); white-space:nowrap; }
.pill-group{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.pill{
    background:#fff; color:var(--blue); border:1px solid var(--blue); border-radius:999px; padding:6px 13px; font-size:14px;
}
.pill:hover{ background:var(--light-blue); }
.pill.active{ background:var(--blue); color:#fff; font-weight:bold; }
.pill.small{ padding:3px 10px; font-size:12.5px; }
.spacer{ flex:1; }

.btn{
    background:var(--blue); color:#fff; border:1px solid var(--blue); padding:8px 14px; border-radius:6px;
    text-decoration:none; display:inline-block; font-size:14px;
}
.btn.secondary{ background:#fff; color:var(--blue); }
.btn.small{ padding:4px 9px; font-size:12.5px; }
.btn:disabled{ opacity:.45; cursor:default; }

select, input[type=text], input[type=search], input[type=number]{
    padding:7px 9px; border:1px solid #bbb; border-radius:6px; font:inherit; font-size:13.5px; background:#fff;
}

.status{ font-size:13px; color:#555; }
.status.error{ color:var(--neg); font-weight:bold; }

/* ---------- school picker ---------- */
.picker{ position:relative; flex:1 1 340px; max-width:520px; }
.picker input{ width:100%; padding:9px 12px; font-size:15px; border:2px solid var(--blue); border-radius:8px; }
.picker-list{
    position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:3px; background:#fff; border:1px solid #bbb;
    border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.2); max-height:380px; overflow:auto;
}
.picker-list[hidden]{ display:none; }
.picker-item{ padding:7px 11px; cursor:pointer; font-size:13.5px; border-bottom:1px solid #eef0f4; }
.picker-item small{ color:#666; display:block; font-size:11.5px; margin-top:1px; }
.picker-item.on, .picker-item:hover{ background:var(--light-blue); }
.picker-item.nodata{ opacity:.6; }

/* ---------- school identity strip ---------- */
.identity{
    background:#fff; border-radius:10px; box-shadow:0 2px 6px var(--shadow); padding:12px 16px; margin-bottom:12px;
    display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; border-left:8px solid var(--blue);
}
.identity h2{ font-size:22px; color:var(--blue); }
.identity .facts{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
    display:inline-block; font-size:12px; background:#eef1f6; color:#334; border-radius:999px; padding:3px 9px; white-space:nowrap;
}
.tag.trust{ background:#efe7fd; color:#4b1fa3; cursor:pointer; }
.tag.warn{ background:#fff3d6; color:#7a5300; }
.tag.home{ background:#fff7c2; color:#5a4a00; }

/* context indicators (IDSR-style fifths: neutral colours, as context is neither good nor bad) */
.inds{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:6px; width:100%; }
.ind{ border-radius:8px; padding:6px 8px; font-size:11px; background:var(--ib); color:var(--it); border:1px solid rgba(0,0,0,.06); }
.ind-label{ font-weight:bold; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ind-val{ font-size:19px; font-weight:bold; margin:1px 0; }
.ind-band{ font-weight:bold; text-transform:uppercase; font-size:9.5px; letter-spacing:.03em; }
.ind-cmp{ opacity:.85; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* IDSR shading: blue well above, orange well below, the rest unshaded grey */
.ind.q1{ --ib:#e8710a; --it:#fff; } .ind.q5{ --ib:#1f5fbf; --it:#fff; }
.ind.q2, .ind.q3, .ind.q4{ --ib:#eceef1; --it:#333; }
.ind.q2{ border-left:4px solid #e8710a; } .ind.q4{ border-left:4px solid #1f5fbf; }
.ind-key{ font-size:11.5px; color:#555; width:100%; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.ind-key .ind{ padding:1px 7px; font-size:10.5px; }

/* ---------- cards ---------- */
.summary-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:10px; margin-bottom:14px; }
.summary-card{
    background:#fff; border-radius:8px; padding:12px 13px; box-shadow:0 2px 6px var(--shadow);
    border-top:5px solid var(--c, var(--blue)); position:relative;
}
.summary-title{ font-size:12.5px; color:#555; margin-bottom:4px; font-weight:bold; }
.summary-value{ font-size:28px; font-weight:bold; color:var(--blue); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.summary-value .unit{ font-size:14px; color:#666; font-weight:normal; }
.summary-sub{ font-size:12px; color:#555; margin-top:5px; line-height:1.45; }
.summary-sub b{ color:#222; }
.na{ color:#999; font-size:15px; font-weight:normal; }

.delta{ font-size:13px; font-weight:bold; border-radius:999px; padding:2px 8px; white-space:nowrap; }
.delta.up{ color:var(--pos); background:var(--pos-bg); }
.delta.down{ color:var(--neg); background:var(--neg-bg); }
.delta.flat{ color:var(--neu); background:#eef0f4; }
.delta.faint{ font-weight:normal; opacity:.75; }

.band{ display:inline-block; font-size:11.5px; font-weight:bold; border-radius:6px; padding:2px 7px; color:#fff; }
.band.b2{ background:#0b6b2b; } .band.b1{ background:#34a853; } .band.b0{ background:#8a94a3; }
.band.b-1{ background:#f29900; } .band.b-2{ background:#c5221f; }
/* the IDSR's KS4 bandings: blue above and significant, orange below and significant, grey otherwise */
.band.idsr-up{ background:#1f5fbf; } .band.idsr-down{ background:#e8710a; } .band.idsr-flat{ background:#eceef1; color:#333; font-weight:normal; }

/* ---------- panels ---------- */
.panel{
    background:#fff; border:2px solid #444; border-radius:14px; padding:13px 15px; box-shadow:0 2px 6px var(--shadow);
    min-width:0; margin-bottom:14px;
}
.grid .panel{ margin-bottom:0; }
.panel h2{ font-size:18px; color:var(--blue); margin-bottom:10px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.panel h2 small{ font-size:12px; font-weight:normal; color:#555; }
.panel h3{ font-size:13.5px; color:#333; margin:12px 0 6px; }
.panel p.note{ font-size:12px; color:#666; margin-top:8px; line-height:1.45; }
.panel-tools{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; font-size:13px; }

.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(460px, 1fr)); gap:14px; margin-bottom:14px; }
.grid.thirds{ grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); }
@media(max-width:560px){
    body{ padding:10px; }
    .grid, .grid.thirds{ grid-template-columns:1fr; }
}

.key{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:#444; margin-top:6px; }
.key span::before{
    content:""; display:inline-block; width:11px; height:11px; border-radius:3px; background:var(--c); margin-right:5px; vertical-align:-1px;
}
.key span.line::before{ height:3px; vertical-align:3px; border-radius:2px; }

/* ---------- tables ---------- */
.table-wrap{ overflow:auto; max-width:100%; }
.table-wrap.tall{ max-height:640px; }
table.data{ border-collapse:collapse; width:100%; font-size:13px; }
table.data th, table.data td{ padding:6px 8px; border-bottom:1px solid #e3e7ee; text-align:right; white-space:nowrap; }
table.data th{ background:#f3f6fb; color:#223; position:sticky; top:0; z-index:2; font-size:12px; vertical-align:bottom; }
table.data th.sortable{ cursor:pointer; }
table.data th.sortable:hover{ background:var(--light-blue); }
table.data th.sorted::after{ content:" ▼"; font-size:10px; }
table.data th.sorted.asc::after{ content:" ▲"; }
table.data td:first-child, table.data th:first-child, table.data .l{ text-align:left; }
table.data td.name{ text-align:left; white-space:normal; min-width:200px; }
table.data tr:hover td{ background:#f7f9fd; }
table.data tr.me td{ background:#fff7c2 !important; font-weight:bold; }
table.data tr.bench td{ background:#f1f3f6; color:#333; font-style:italic; }
table.data td.pos{ color:var(--pos); font-weight:bold; }
table.data td.neg{ color:var(--neg); font-weight:bold; }
table.data td.best{ background:var(--pos-bg); font-weight:bold; }
table.data td.small{ color:#999; }
table.data .rank{ color:#777; font-size:12px; }
.link{ color:var(--blue); cursor:pointer; text-decoration:underline; text-decoration-color:#9fb4d8; }
.link:hover{ text-decoration-color:var(--blue); }
.addbtn{ border:1px solid var(--blue); background:#fff; color:var(--blue); border-radius:999px; width:22px; height:22px; line-height:18px; font-weight:bold; padding:0; }
.addbtn.on{ background:var(--blue); color:#fff; }

/* heat cells */
td.heat{ color:#111; font-weight:bold; text-align:center !important; }

/* ---------- compare columns ---------- */
.cmp-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
    display:inline-flex; align-items:center; gap:6px; border:2px solid var(--c, var(--blue)); border-radius:999px; padding:3px 6px 3px 10px;
    background:#fff; font-size:13px;
}
.chip button{ border:none; background:#eef1f6; border-radius:50%; width:20px; height:20px; line-height:18px; padding:0; color:#444; }
.chip i{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--c); }

.cmp-grid{ display:grid; gap:10px; margin-bottom:14px; }
.cmp-col{ background:#fff; border-radius:12px; box-shadow:0 2px 6px var(--shadow); border-top:8px solid var(--c); padding:12px; min-width:0; }
.cmp-col h3{ font-size:15px; color:#222; min-height:38px; line-height:1.25; }
.cmp-col .meta{ font-size:11.5px; color:#666; margin:4px 0 8px; min-height:30px; }
.cmp-metric{ border-top:1px solid #eef0f4; padding:7px 0; }
.cmp-metric .lbl{ font-size:11.5px; color:#666; }
.cmp-metric .val{ font-size:20px; font-weight:bold; color:#222; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.cmp-metric.best .val{ color:var(--pos); }
.cmp-metric.best .val::after{ content:"★"; font-size:13px; }
.mini-bar{ height:6px; border-radius:3px; background:#eef0f4; margin-top:4px; position:relative; }
.mini-bar i{ position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--c); }
.mini-bar b{ position:absolute; top:-3px; bottom:-3px; width:2px; background:#222; }

/* ---------- charts ---------- */
svg.chart{ width:100%; height:auto; display:block; overflow:visible; font-family:Arial, Helvetica, sans-serif; }
svg.chart text{ font-size:11px; fill:#444; }
svg.chart .axis line, svg.chart .grid line{ stroke:#e3e7ee; }
svg.chart .axis text{ fill:#666; }
svg.chart .zero{ stroke:#888; stroke-dasharray:3 3; }
svg.chart .hover-dot{ cursor:pointer; }
.chart-tip{
    position:fixed; z-index:50; pointer-events:none; background:#222; color:#fff; font-size:12px; padding:6px 9px;
    border-radius:6px; max-width:300px; line-height:1.4; box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.chart-tip[hidden]{ display:none; }

/* horizontal comparison bars */
.hbar{ display:grid; grid-template-columns:minmax(120px, 210px) 1fr 64px; gap:8px; align-items:center; font-size:12.5px; margin:5px 0; }
.hbar .track{ position:relative; height:18px; background:#eef0f4; border-radius:5px; }
.hbar .track i{ position:absolute; left:0; top:0; bottom:0; border-radius:5px; background:var(--c, var(--blue)); }
.hbar .track b{ position:absolute; top:-3px; bottom:-3px; width:3px; background:#222; border-radius:1px; }
.hbar .v{ text-align:right; font-weight:bold; }

/* strengths list */
.sw{ list-style:none; font-size:13px; }
.sw li{ padding:6px 8px; border-radius:6px; margin-bottom:4px; display:flex; gap:8px; align-items:baseline; }
.sw li.s{ background:var(--pos-bg); }
.sw li.w{ background:var(--neg-bg); }
.sw li b{ white-space:nowrap; }

.empty{ text-align:center; color:#666; padding:30px 10px; font-size:14px; }
.loading{ text-align:center; color:var(--blue); padding:40px 10px; font-size:15px; }
.loading::before{
    content:""; display:inline-block; width:16px; height:16px; border:3px solid var(--light-blue); border-top-color:var(--blue);
    border-radius:50%; animation:spin 0.8s linear infinite; vertical-align:-3px; margin-right:8px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.footer{ text-align:center; font-size:12px; color:#666; margin:20px 0 8px; line-height:1.6; }

/* ---------- help ---------- */
.cvcc-help-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; z-index:1000; }
.cvcc-help-backdrop.open{ display:flex; }
.cvcc-help{ background:#fff; color:#222; text-align:left; border-radius:12px; padding:22px 26px; width:100%; max-width:820px; box-shadow:0 10px 40px rgba(0,0,0,.4); font-size:14px; line-height:1.5; }
.cvcc-help-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:6px; }
.cvcc-help-head h2{ color:var(--blue); font-size:22px; margin:0; }
.cvcc-help h3{ color:var(--blue); font-size:15px; margin:16px 0 4px; }
.cvcc-help ul{ padding-left:20px; }
.cvcc-help li{ margin-bottom:5px; }
.cvcc-help-close{ background:none; border:none; font-size:28px; line-height:1; color:#555; }

/* ---------- print ---------- */
.print-only{ display:none; }
@media print{
    @page{ size:A4 landscape; margin:10mm; }
    body{ background:#fff; padding:0; font-size:12px; }
    .filter-bar, .no-print, .cvcc-help-btn, .addbtn, .picker{ display:none !important; }
    .print-only{ display:block; }
    .panel, .summary-card, .cmp-col, .identity{ box-shadow:none; break-inside:avoid; }
    .panel{ border:1px solid #888; }
    .table-wrap.tall{ max-height:none; overflow:visible; }
    .header-banner, .band, .delta, td.heat, .tag, .ind, .cmp-col, .hbar .track i, .mini-bar i, tr.me td{
        -webkit-print-color-adjust:exact; print-color-adjust:exact;
    }
}

/* interactive maps */
.school-map{ width:100%; border-radius:10px; background:#f6f8fb; z-index:0; }
.school-map .leaflet-tile-pane{ filter:grayscale(.75) brightness(1.06) contrast(.9); }
.school-map .leaflet-tooltip{ font-size:12px; line-height:1.4; }
.leaflet-tooltip.map-tag{ background:rgba(255,255,255,.85); border:none; box-shadow:none; font-weight:bold; font-size:11px; padding:0 3px; }
.leaflet-tooltip.map-tag::before{ display:none; }
@media print{ .school-map{ break-inside:avoid; } }

/* trust view: the headline boxes are the trust's averages, not the chosen school's */
.trust-note{ background:#f3eefc; border-left:4px solid #7b4fc9; padding:8px 12px; border-radius:6px; margin:0 0 10px; font-size:13.5px; }
.summary-card.trust-card{ border-left:4px solid #7b4fc9; background:#fbf9fe; }
.summary-card.trust-card .summary-title{ color:#5a3696; }

/* similar schools setup: off by default; DfE's list (exact) or the stand-in model */
.opt-card{ border:1px solid #d5dbe5; border-radius:8px; padding:12px 14px; background:#fafbfd; }
.opt-card.on{ border-color:#2e7d32; background:#f3faf3; }
.opt-card h3{ margin:0 0 8px; font-size:15px; }
.opt-card textarea{ width:100%; font:inherit; font-size:13px; padding:8px; border:1px solid #bbb; border-radius:6px; box-sizing:border-box; }
.opt-card details{ margin-top:8px; font-size:13px; }
.opt-card summary{ cursor:pointer; color:#003b8e; font-weight:600; }
.howto{ margin:6px 0 6px 18px; padding:0; font-size:13px; line-height:1.45; }
.howto li{ margin-bottom:4px; }
.switch{ display:flex; gap:8px; align-items:center; font-weight:600; margin-bottom:6px; }
.sim-off{ border-left:4px solid #2e7d32; }