@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --page: #f4f5fb;
  --surface: #ffffff;
  --surface-soft: #f8f8fd;
  --surface-tint: #eff1ff;
  --ink: #172033;
  --muted: #64748b;
  --quiet: #68778d;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --accent: #5b5ce2;
  --accent-deep: #4f46e5;
  --accent-soft: #e7e8ff;
  --teal: #0f9f8e;
  --orange: #e98538;
  --danger: #b42318;
  --shadow-card: 0 12px 35px rgba(30, 53, 88, .07), 0 2px 8px rgba(30, 53, 88, .035);
  --shadow-pop: 0 18px 42px rgba(15, 23, 42, .16);
  --shadow-help: 0 32px 100px 10px rgba(15, 23, 42, .38), 0 12px 32px rgba(15, 23, 42, .26);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b1220;
  --surface: #121c2c;
  --surface-soft: #172337;
  --surface-tint: #172b48;
  --ink: #e6edf7;
  --muted: #a4b2c7;
  --quiet: #a5b4c8;
  --line: #29374b;
  --line-strong: #3b4b63;
  --accent: #aaa5ff;
  --accent-deep: #b8b2ff;
  --accent-soft: #302e5a;
  --teal: #5ed6bf;
  --orange: #ffb36f;
  --danger: #ff938a;
  --shadow-card: 0 14px 40px rgba(0, 0, 0, .24);
  --shadow-pop: 0 18px 42px rgba(0, 0, 0, .4);
  --shadow-help: 0 32px 100px 16px rgba(0, 0, 0, .85), 0 12px 36px rgba(0, 0, 0, .7), 0 0 0 1px rgba(184, 178, 255, .18);
}

* { box-sizing: border-box; }
html { background: var(--page); }
body {
  margin: 0;
  background: radial-gradient(ellipse at 8% 0%, rgba(219, 234, 254, .52), transparent 36%), radial-gradient(ellipse at 92% 4%, rgba(237, 233, 254, .7), transparent 30%), var(--page);
  color: var(--ink);
  font: 400 14px/1.55 Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { color: inherit; }

.topbar {
  position: relative;
  z-index: 4;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 0 clamp(16px, 2.5vw, 42px);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 13px; letter-spacing: .12em; font-weight: 800; }
.brand b { color: var(--accent); font-weight: 700; }
.header-tab { border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; background: var(--surface-soft); color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; }
.header-tab:hover { border-color: var(--accent); color: var(--accent-deep); }
.header-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.header-tab.getting-started-attention { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); animation: getting-started-nudge 3s ease-in-out infinite; }
.header-tab.getting-started-attention:hover, .header-tab.getting-started-attention:focus-visible { animation: none; }
@keyframes getting-started-nudge { 0%, 100% { background: var(--surface-soft); box-shadow: 0 0 0 0 rgba(91, 92, 226, 0); transform: scale(1); } 50% { background: var(--accent-soft); box-shadow: 0 0 28px 7px rgba(91, 92, 226, .48); transform: scale(1.035); } }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(145deg, #6375f5, #6d42c9); color: #fff; font: 800 18px Manrope, sans-serif; box-shadow: 0 5px 12px rgba(91, 92, 226, .28); }
.top-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 500; }
.live-dot, .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #27a47d; }
.divider { width: 1px; height: 14px; margin: 0 3px; background: var(--line-strong); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 14px; }
.theme-picker { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.theme-picker select { height: 36px; min-width: 82px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink); font-size: 12px; font-weight: 600; }
.button { border: 0; border-radius: 9px; padding: 10px 15px; font: 700 12px Inter, sans-serif; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button-dark { background: linear-gradient(115deg, #5b5ce2, #7348ce); color: #fff; box-shadow: 0 5px 12px rgba(91, 92, 226, .22); }
.button-dark:hover:not(:disabled) { background: var(--accent-deep); }
.button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.button span { margin-left: 8px; font-size: 15px; }

main { width: 100%; max-width: none; margin: 0 auto; padding: clamp(24px, 3vw, 42px) clamp(14px, 2vw, 32px) 56px; }
.hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 7px 4px 27px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font: 600 10px 'DM Mono', monospace; letter-spacing: .13em; text-transform: uppercase; }
.hero h1 { margin: 0; color: var(--ink); font: 800 clamp(37px, 4.3vw, 58px)/1.06 Manrope, Inter, sans-serif; letter-spacing: -.055em; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-intro { max-width: 610px; margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
:root[data-theme="dark"] body { background: radial-gradient(ellipse at 8% 0%, rgba(57, 77, 155, .22), transparent 36%), radial-gradient(ellipse at 92% 4%, rgba(91, 46, 123, .18), transparent 30%), var(--page); }

.notice { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; padding: 13px 16px; border: 1px solid #f3d2a8; border-radius: 12px; background: #fff8eb; color: #765229; }
.notice-icon { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border: 1px solid #eab76b; border-radius: 50%; color: #bd6e17; font: 700 11px 'DM Mono', monospace; }
.notice p { flex: 1; margin: 0; font-size: 11px; line-height: 1.6; }
.notice strong { color: var(--ink); font-weight: 700; }
.notice a, .source-footer a { color: var(--accent-deep); font-size: 10px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.notice a:hover, .source-footer a:hover { text-decoration: underline; }
:root[data-theme="dark"] .notice { border-color: #59462e; background: #2b241a; color: #e2c99e; }
:root[data-theme="dark"] .notice-icon { border-color: #977243; color: #ffd08a; }

.workbench { display: grid; grid-template-columns: minmax(220px, min(19vw, 310px)) minmax(0, 1fr); gap: 14px; align-items: start; }
.sidebar, .results { min-width: 0; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-card); }
.sidebar { position: sticky; top: 14px; padding: 20px 17px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.panel-heading h2, .panel-heading h3 { margin: 0; color: var(--ink); font: 700 20px Manrope, Inter, sans-serif; letter-spacing: -.03em; }
.panel-heading h3 { font-size: 16px; }
.panel-help { margin: 8px 0 19px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.field-label { display: block; margin: 0 0 7px; color: var(--ink); font-size: 11px; font-weight: 700; }
.field-label span { color: var(--quiet); font-weight: 400; }
.search-wrap { position: relative; }
.search-wrap input, .select-control, .range-fields input { width: 100%; height: 39px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: var(--surface-soft); color: var(--ink); font: 500 11px Inter, sans-serif; transition: border-color .15s, box-shadow .15s, background .15s; }
.search-wrap input { padding-left: 34px; }
.search-wrap input:focus, .select-control:focus, .range-fields input:focus, .theme-picker select:focus { border-color: #7aa7ed; box-shadow: 0 0 0 3px rgba(59, 130, 246, .14); }
.search-wrap input:disabled, .select-control:disabled, .range-fields input:disabled { background: var(--surface-soft); color: var(--quiet); }
.search-icon { position: absolute; z-index: 1; top: 6px; left: 11px; color: var(--quiet); font-size: 20px; }
.suggestions { position: absolute; z-index: 5; top: 43px; right: 0; left: 0; max-height: 270px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-pop); }
.suggestion { display: block; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; font: 600 11px Inter, sans-serif; cursor: pointer; }
.suggestion:last-child { border-bottom: 0; }
.suggestion:hover, .suggestion:focus { outline: none; background: var(--surface-tint); }
.suggestion small { display: block; margin-top: 3px; color: var(--quiet); font: 400 9px 'DM Mono', monospace; }
.selected-schools { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 3px; }
.empty-selection { padding: 4px 1px; color: var(--quiet); font-size: 10px; }
.school-chip { display: flex; max-width: 100%; align-items: center; gap: 6px; padding: 5px 8px 5px 10px; border: 1px solid #cfe0fa; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: 10px; font-weight: 700; }
.school-chip span { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.school-chip button { padding: 0 2px; border: 0; background: none; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.control-rule { height: 1px; margin: 16px 0; background: var(--line); }
.select-control { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-repeat: no-repeat; background-position: calc(100% - 15px) 16px, calc(100% - 11px) 16px; background-size: 4px 4px, 4px 4px; }
.small-note { margin: 7px 0 0; color: var(--quiet); font-size: 9px; line-height: 1.55; }
.school-authority-hint { margin-bottom: 14px; }
.compact { align-items: center; margin: 0 0 13px; }
.compact .eyebrow { margin-bottom: 3px; }
.range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.range-fields label span { display: block; margin-bottom: 5px; color: var(--quiet); font-size: 9px; }
.range-fields input { height: 35px; }
.text-button { padding: 7px 0; border: 0; background: none; color: var(--accent-deep); font: 700 10px Inter, sans-serif; cursor: pointer; }
.text-button:hover { text-decoration: underline; }
.text-button:disabled { opacity: .4; cursor: not-allowed; }
.sidebar > .text-button { margin-top: 12px; }

.results { padding: clamp(14px, 1.4vw, 22px); }
.results-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.results-top h2 { margin: 0; color: var(--ink); font: 800 23px Manrope, Inter, sans-serif; letter-spacing: -.04em; }
.muted { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.view-toggle { display: flex; flex: none; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.view-tab { padding: 7px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 700 10px Inter, sans-serif; cursor: pointer; }
.view-tab.active { background: var(--surface); color: var(--accent-deep); box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
.state-card { display: flex; align-items: center; gap: 13px; margin-top: 17px; padding: 21px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--surface-soft); color: var(--muted); }
.state-card strong { color: var(--ink); font-size: 12px; }
.state-card p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.loader { width: 23px; height: 23px; border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-state { border-color: #f3c5be; background: #fff7f5; }
.error-state strong { color: var(--danger); }
.error-mark { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #fee4df; color: var(--danger); font-weight: 800; }
.empty-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep); font-size: 19px; }
.report-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 10px; }
.toolbar-left { display: flex; align-items: center; gap: 15px; min-width: 0; }
.report-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 15px; }
.report-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 400 9px 'DM Mono', monospace; }
.columns-button { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--accent-deep); }
.components-toggle { margin: 0; }
.components-toggle span { margin-left: 4px; font-size: 14px; }
.table-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.results table { width: 100%; min-width: 1120px; border-collapse: separate; border-spacing: 0; table-layout: auto; }
.results th, .results td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; font-size: 10px; white-space: nowrap; }
.results th { position: sticky; top: 0; z-index: 2; background: var(--surface-soft); color: var(--muted); font: 600 9px 'DM Mono', monospace; letter-spacing: .015em; }
.sort-button { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; text-align: right; font: inherit; white-space: normal; cursor: pointer; }
.results th:first-child .sort-button { justify-content: flex-start; text-align: left; }
.sort-button:hover, .sort-button.active { color: var(--accent-deep); }
.sort-button:focus-visible { outline: 2px solid #7aa7ed; outline-offset: 3px; border-radius: 3px; }
.sort-marker { flex: none; color: var(--accent); font: 700 9px Inter, sans-serif; }
.results th:not(:first-child), .results td:not(:first-child) { min-width: 88px; }
.results th:first-child, .results td:first-child { position: sticky; left: 0; z-index: 1; min-width: 195px; text-align: left; }
.results th:first-child { z-index: 3; background: var(--surface-soft); }
.results td:first-child { background: var(--surface); color: var(--ink); font-weight: 700; }
.results td.school-name { max-width: 250px; white-space: normal; }
.school-name small { display: block; margin-top: 2px; color: var(--quiet); font: 400 9px 'DM Mono', monospace; }
.results tbody tr:last-child td { border-bottom: 0; }
.results tbody tr:not(.national-row):nth-child(even) td { background: var(--surface-soft); }
.results tbody tr:not(.national-row):nth-child(even) td:first-child { background: var(--surface-soft); }
.results tbody tr:not(.national-row):hover td, .results tbody tr:not(.national-row):hover td:first-child { background: var(--surface-tint); }
.results .national-row td, .results .national-row td:first-child { background: var(--surface-tint); color: var(--accent-deep); font-weight: 700; }
.unavailable { color: var(--quiet); }
.no-results { padding: 18px !important; color: var(--muted); text-align: left !important; }
.delta { margin-left: 4px; color: var(--teal); font-size: 9px; }
.table-footnote { margin: 9px 1px 0; color: var(--quiet); font-size: 9px; line-height: 1.6; }

.chart-view { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.chart-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.chart-title .eyebrow { margin-bottom: 4px; }
.chart-title h3, .component-heading h3 { margin: 0; color: var(--ink); font: 700 17px Manrope, Inter, sans-serif; letter-spacing: -.025em; }
.chart-title label { margin-right: 8px; color: var(--muted); font-size: 10px; }
.chart-title .select-control { width: 220px; height: 35px; font-size: 10px; }
.chart-graphic { display: flex; flex-direction: column; gap: 13px; }
.bar-row { display: grid; grid-template-columns: minmax(115px, 190px) 1fr 45px; gap: 10px; align-items: center; }
.bar-label { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { position: relative; height: 18px; border-radius: 999px; background: var(--surface-soft); }
.bar-fill { position: relative; z-index: 1; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #38bdf8, #2563eb); }
.bar-track .national-line { position: absolute; z-index: 2; top: -4px; bottom: -4px; width: 2px; background: var(--orange); }
.bar-value { color: var(--ink); text-align: right; font: 500 9px 'DM Mono', monospace; }
.chart-legend { display: flex; gap: 18px; margin: 18px 0 2px 8px; color: var(--muted); font-size: 9px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { display: inline-block; width: 11px; height: 9px; border-radius: 3px; background: #2563eb; }
.chart-legend .legend-national { width: 2px; height: 13px; margin: 0 4px; border-radius: 0; background: var(--orange); }
.components-view { margin-top: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.component-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.component-heading .eyebrow { margin-bottom: 4px; }
.component-caption { color: var(--quiet); font-size: 9px; }
.component-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.component-card { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.component-card span { color: var(--muted); font: 500 9px 'DM Mono', monospace; letter-spacing: .06em; }
.component-card strong { display: block; margin-top: 5px; color: var(--ink); font: 700 19px Manrope, Inter, sans-serif; }
.component-card small { display: block; margin-top: 2px; color: var(--quiet); font-size: 9px; }
.component-note { margin-top: 10px; }
#columnsDialog, #historyColumnsDialog, #glossaryDialog { width: min(690px, calc(100vw - 28px)); max-height: min(82vh, 760px); padding: 0; overflow: auto; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
#columnsDialog::backdrop, #historyColumnsDialog::backdrop, #glossaryDialog::backdrop { background: rgba(15, 23, 42, .46); backdrop-filter: blur(3px); }
.columns-dialog-content { padding: 23px; }
#glossaryDialog { max-height: min(86vh, 900px); }
.glossary-content { overflow: auto; }
.glossary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: min(62vh, 620px); overflow: auto; padding: 15px 2px; margin: 0; }
.glossary-list > div { padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.glossary-list dt { margin-bottom: 5px; color: var(--ink); font-size: 13px; font-weight: 800; }
.glossary-list dd { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.glossary-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.glossary-footer a { color: var(--accent-deep); font-size: 12px; font-weight: 700; text-decoration: none; }
.glossary-footer a:hover { text-decoration: underline; }
.measure-tooltip { box-sizing: border-box; position: fixed; z-index: 30; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow-pop); font-size: 12px; line-height: 1.5; pointer-events: none; }
.measure-tooltip[hidden] { display: none; }
.columns-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.columns-dialog-header .eyebrow { margin-bottom: 5px; }
.columns-dialog-header h2 { margin: 0; color: var(--ink); font: 800 21px Manrope, Inter, sans-serif; letter-spacing: -.035em; }
.columns-dialog-header .muted { margin-top: 5px; }
.dialog-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.columns-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 17px 0; }
.column-group { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 11px; }
.sex-column-options { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.sex-column-help { margin: 0 3px 4px; color: var(--quiet); font-size: 10px; line-height: 1.5; }
.column-group legend { padding: 0 5px; color: var(--muted); font: 600 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
.column-option { display: flex; align-items: flex-start; gap: 8px; padding: 6px 3px; color: var(--ink); font-size: 10px; line-height: 1.4; cursor: pointer; }
.column-option input { flex: none; margin: 1px 0 0; accent-color: #6259db; }
.columns-dialog-actions { display: flex; align-items: center; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); }
.dialog-spacer { flex: 1; }
.button-secondary { border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink); }
.source-footer { display: flex; align-items: center; gap: 15px; margin-top: 19px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--quiet); font-size: 9px; }
.source-footer span { margin-right: auto; }
.source-footer a { font-size: 9px; }
#toast { position: fixed; z-index: 20; bottom: 18px; left: 50%; padding: 10px 15px; transform: translate(-50%, 20px); border: 1px solid var(--line); border-radius: 10px; background: var(--ink); color: var(--surface); font-size: 11px; opacity: 0; pointer-events: none; transition: .2s; }
#toast.show { transform: translate(-50%, 0); opacity: 1; }

#gettingStartedSchoolsTarget, #gettingStartedCohortTarget, #gettingStartedRangeTarget, #tableView, #ofstedView { scroll-margin-top: 18px; }
.getting-started-highlight { position: fixed; z-index: 30; pointer-events: none; border: 2px solid var(--accent); border-radius: 12px; box-shadow: 0 0 0 5px rgba(91, 92, 226, .15); }
.getting-started-guide { position: fixed; z-index: 31; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px; width: 380px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 20px; border: 1px solid var(--accent); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); animation: getting-started-appear .2s ease-out; }
.getting-started-guide[hidden], .getting-started-highlight[hidden] { display: none; }
.getting-started-guide, .measure-tooltip, #columnsDialog, #historyColumnsDialog, #glossaryDialog { box-shadow: var(--shadow-help); }
.getting-started-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.getting-started-heading .eyebrow { margin-bottom: 6px; font-size: 10px; }
.getting-started-heading h2 { margin: 0; font: 800 20px/1.3 Manrope, Inter, sans-serif; letter-spacing: -.02em; }
.getting-started-heading h2:focus { outline: none; }
.getting-started-heading .dialog-close { flex: none; }
.getting-started-guide progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 99px; overflow: hidden; accent-color: var(--accent); background: var(--accent-soft); }
.getting-started-guide progress::-webkit-progress-bar { background: var(--accent-soft); }
.getting-started-guide progress::-webkit-progress-value { background: var(--accent); transition: width .2s ease; }
.getting-started-body { min-height: 0; overflow-y: auto; font-size: 14px; line-height: 1.6; }
.getting-started-body p { margin: 0 0 12px; }
.getting-started-body .getting-started-tip { padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-deep); font-size: 12px; }
.getting-started-body .getting-started-instructions { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.getting-started-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.getting-started-actions .button { min-height: 40px; font-size: 13px; }
@keyframes getting-started-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) { .getting-started-guide { max-height: 52vh; max-height: 52dvh; padding: 16px; gap: 10px; } }
@media (max-width: 700px) and (max-height: 550px) { .getting-started-guide { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); } }
@media (prefers-reduced-motion: reduce) { .getting-started-guide { animation: none; } .getting-started-guide progress::-webkit-progress-value { transition: none; } .header-tab.getting-started-attention { animation: none; box-shadow: 0 0 0 3px var(--accent-soft); } }

:root[data-theme="dark"] .hero-intro, :root[data-theme="dark"] .panel-help, :root[data-theme="dark"] .muted,
:root[data-theme="dark"] .top-meta, :root[data-theme="dark"] .field-label, :root[data-theme="dark"] .theme-picker { color: var(--muted); }
:root[data-theme="dark"] .error-state { border-color: #58352f; background: #2b1d1d; }
:root[data-theme="dark"] .error-mark { background: #4a2928; }
:root[data-theme="dark"] .school-chip { border-color: #355581; }

@media (max-width: 1000px) {
  .workbench { grid-template-columns: 250px minmax(0, 1fr); gap: 11px; }
  .results { padding: 15px; }
  .sidebar { padding: 18px 15px; }
  .notice { align-items: flex-start; flex-wrap: wrap; }
  .notice p { min-width: 80%; }
  .notice a { margin-left: 34px; }
  .source-footer { flex-wrap: wrap; }
  .source-footer span { width: 100%; }
}
@media (max-width: 700px) {
  .topbar { min-height: 60px; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
  .top-meta { display: none; }
  .brand { font-size: 11px; letter-spacing: .04em; gap: 7px; }
  .brand-mark { width: 29px; height: 29px; }
  .header-tab { padding: 7px 8px; font-size: 10px; }
  .header-actions { gap: 8px; }
  .theme-picker span { display: none; }
  .theme-picker select { min-width: 70px; height: 33px; }
  .button { padding: 9px 10px; font-size: 10px; }
  .button span { margin-left: 3px; }
  .header-actions { margin-left: auto; gap: 6px; }
  main { padding: 23px 11px 32px; }
  .hero { gap: 12px; padding: 5px 2px 20px; }
  .hero h1 { font-size: clamp(32px, 8vw, 40px); }
  .hero-intro { max-width: 90%; margin-top: 10px; font-size: 12px; }
  .notice { gap: 8px; padding: 11px; }
  .notice p { min-width: 0; font-size: 10px; }
  .notice a { margin-left: 30px; }
  .workbench { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sidebar { position: static; }
  .results { min-height: 470px; padding: 13px; }
  .results-top { align-items: flex-start; flex-direction: column; gap: 10px; }
  .results-top h2 { font-size: 21px; }
  .toolbar-left { gap: 8px; flex-wrap: wrap; }
  .columns-options { grid-template-columns: minmax(0, 1fr); }
  .columns-dialog-content { padding: 16px; }
  .glossary-list { grid-template-columns: minmax(0, 1fr); max-height: 58vh; }
  .glossary-footer { align-items: flex-start; flex-direction: column; }
  .glossary-footer .button { align-self: flex-end; }
  .columns-dialog-actions { flex-wrap: wrap; }
  .dialog-spacer { flex-basis: 100%; order: 2; }
  #cancelColumns { margin-left: auto; }
  .view-toggle { align-self: flex-start; }
  .bar-row { grid-template-columns: minmax(82px, 115px) 1fr 38px; gap: 7px; }
  .chart-title { align-items: flex-start; flex-direction: column; }
  .chart-title .select-control { width: 100%; }
  .component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-footer { gap: 8px 13px; }
  .source-footer a { white-space: normal; }
}
@media print {
  table small { display: block; margin-top: 3px; font-weight: 400 !important; line-height: 1.3; }
  .getting-started-guide, .getting-started-highlight { display: none !important; }
  body { background: #fff; color: #111827; font-size: 10px; }
  .topbar { min-height: 0; padding: 0 0 9px; border-bottom: 1px solid #cbd5e1; }
  .print-action, .theme-picker, .header-tab, .sidebar, .notice a, .view-toggle, .report-toolbar, .source-footer a { display: none !important; }
  main { max-width: none; padding: 14px 0; }
  .hero { padding: 7px 0 14px; }
  .hero h1 { font-size: 30px; }
  .hero-intro { margin-top: 7px; font-size: 10px; }
  .notice { margin-bottom: 10px; padding: 7px 9px; }
  .workbench { display: block; }
  .results { min-height: 0; padding: 9px 0; border: 0; box-shadow: none; }
  .results-top { padding-bottom: 8px; }
  .results-top h2 { font-size: 18px; }
  .results table { min-width: 0; }
  .results th, .results td { padding: 5px; font-size: 7px; }
  .results th:first-child, .results td:first-child { min-width: 140px; }
  .table-scroll { overflow: visible; }
  .table-view[hidden], .chart-view[hidden], .components-view[hidden] { display: none !important; }
  .chart-view, .components-view { break-inside: avoid; }
  .source-footer { margin-top: 10px; padding-top: 7px; }
}

@media screen {
  .top-meta, .theme-picker, .notice p, .notice a, .source-footer a,
  .panel-help, .field-label, .search-wrap input, .select-control, .range-fields input,
  .suggestion, .suggestion small, .empty-selection, .school-chip, .small-note,
  .range-fields label span, .text-button, .muted, .view-tab, .state-card p,
  .report-status, .chart-title label, .chart-title .select-control,
  .bar-label, .bar-value, .chart-legend, .component-caption, .component-card span,
  .component-card small, .source-footer, .column-group legend {
    font-size: 12px;
  }
  .results th, .sort-marker, .school-name small, .delta {
    font-size: 11px;
  }
  .results td, .column-option { font-size: 12px; }
  .results th { font-size: 11px; }
  .table-footnote { font-size: 12px; }
  .button { font-size: 12px; }
  .notice p, .panel-help, .small-note, .table-footnote { line-height: 1.7; }
}

@media print {
  .results th, .results td { font-size: 9px; }
  .table-footnote, .small-note, .source-footer { font-size: 10px; }
}
[hidden] { display: none !important; }

/* Distinct accents add colour while keeping the data cells easy to scan. */
.hero h1 em { background: linear-gradient(100deg, #5b5ce2 5%, #8a4dc7 52%, #0f9f8e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.view-tab.active { color: #4f46e5; }
.results th:nth-child(2) { background: #f0efff; color: #5549c7; }
.results th:nth-child(3) { background: #fff0f6; color: #b74178; }
.results th:nth-child(4), .results th:nth-child(5) { background: #eafaf7; color: #087e70; }
.results th:nth-child(6) { background: #fff5e9; color: #ae631c; }
.results th:nth-child(7), .results th:nth-child(8) { background: #eef5ff; color: #3568b8; }
.results th:nth-child(9) { background: #f3efff; color: #7350ad; }
.results th:nth-child(10) { background: #fff3e8; color: #b56a24; }
.results th:nth-child(11) { background: #edf8f4; color: #278168; }
.results th:nth-child(12) { background: #f0efff; color: #5549c7; }
.results .national-row td, .results .national-row td:first-child { background: #e8f7f3; color: #087e70; }
.component-card:nth-child(1) { border-top: 3px solid #7367e8; background: #f6f5ff; }
.component-card:nth-child(2) { border-top: 3px solid #e879a9; background: #fff4f8; }
.component-card:nth-child(3) { border-top: 3px solid #10a58f; background: #effbf8; }
.component-card:nth-child(4) { border-top: 3px solid #e99540; background: #fff8ef; }
:root[data-theme="dark"] .view-tab.active { color: #d6d2ff; }
:root[data-theme="dark"] .results th:nth-child(2) { background: #302e5a; color: #d2ceff; }
:root[data-theme="dark"] .results th:nth-child(3) { background: #47283a; color: #ffc0dc; }
:root[data-theme="dark"] .results th:nth-child(4), :root[data-theme="dark"] .results th:nth-child(5) { background: #173d3a; color: #9ce7db; }
:root[data-theme="dark"] .results th:nth-child(6) { background: #483421; color: #ffd39b; }
:root[data-theme="dark"] .results th:nth-child(7), :root[data-theme="dark"] .results th:nth-child(8) { background: #203b5c; color: #b8d4ff; }
:root[data-theme="dark"] .results th:nth-child(9) { background: #382d50; color: #dbc5ff; }
:root[data-theme="dark"] .results th:nth-child(10) { background: #483222; color: #ffd39b; }
:root[data-theme="dark"] .results th:nth-child(11) { background: #1c3b35; color: #a9e6d2; }
:root[data-theme="dark"] .results th:nth-child(12) { background: #302e5a; color: #d2ceff; }
:root[data-theme="dark"] .results .national-row td, :root[data-theme="dark"] .results .national-row td:first-child { background: #173d3a; color: #9ce7db; }
:root[data-theme="dark"] .component-card:nth-child(1) { border-top-color: #948bff; background: #242443; }
:root[data-theme="dark"] .component-card:nth-child(2) { border-top-color: #ed83b0; background: #372331; }
:root[data-theme="dark"] .component-card:nth-child(3) { border-top-color: #4ed1b7; background: #19352f; }
:root[data-theme="dark"] .component-card:nth-child(4) { border-top-color: #f0a04e; background: #3b2d20; }

/* Keep sex headers distinct when each measure is shown in three columns. */
.results th.sex-all { background: #f0efff; color: #5549c7; }
.results th.sex-boys { background: #eef5ff; color: #3568b8; }
.results th.sex-girls { background: #fff0f6; color: #b74178; }
.results th .sort-button > span:first-child { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.results th:first-child .sort-button > span:first-child { align-items: flex-start; }
.results th .sort-button small { color: var(--quiet); font: 500 10px Inter, sans-serif; letter-spacing: 0; }
:root[data-theme="dark"] .results th.sex-all { background: #302e5a; color: #d2ceff; }
:root[data-theme="dark"] .results th.sex-boys { background: #203b5c; color: #b8d4ff; }
:root[data-theme="dark"] .results th.sex-girls { background: #47283a; color: #ffc0dc; }

/* Academic-year tabs and cohort selection */
.report-heading { min-width: 0; }
.year-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.year-tab { padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--muted); font: 700 10px Inter, sans-serif; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.year-tab:hover { border-color: var(--accent); color: var(--accent-deep); }
.year-tab.active { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 3px 9px rgba(37, 99, 235, .18); }
.year-tab:focus-visible { outline: 3px solid rgba(59, 130, 246, .35); outline-offset: 2px; }
.control-disabled { opacity: .55; }
:root[data-theme="dark"] .year-tab.active { color: #fff; }
@media (max-width: 700px) { .year-tabs { margin: 8px 0 10px; } .year-tab { padding: 7px 10px; } }

.component-table-scroll { overflow-x: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.results .component-table { min-width: 560px; border-collapse: separate; border-spacing: 0; }
.results .component-table th, .results .component-table td { padding: 10px 12px; font-size: 12px; }
.results .component-table thead th:not(:first-child), .results .component-table tbody td { text-align: center; }
.results .component-table thead th { color: var(--ink); font: 700 11px Inter, sans-serif; }
.results .component-table thead th:not(:first-child) .sort-button { justify-content: center; text-align: center; }
.results .component-table tbody th { font-size: 12px; }
.results .component-table .national-row th, .results .component-table .national-row td { background: var(--accent-soft); font-weight: 800; }

.history-view { margin-top: 13px; padding: clamp(14px, 1.4vw, 22px); border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: 0 5px 16px rgba(30, 53, 88, .045); }
.ofsted-view { margin: 8px 0 16px; padding: clamp(14px, 1.4vw, 22px); border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: 0 5px 16px rgba(30, 53, 88, .045); }
.ofsted-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.ofsted-heading h3 { margin: 0 0 5px; color: var(--ink); font: 700 18px Manrope, Inter, sans-serif; letter-spacing: -.02em; }
.ofsted-heading .eyebrow { margin: 0 0 5px; }
.results table.ofsted-table { width: 1550px; min-width: 1550px; table-layout: fixed; }
.results table.ofsted-table col.ofsted-school-col { width: 190px; }
.results table.ofsted-table col.ofsted-date-col { width: 150px; }
.results table.ofsted-table col.ofsted-grade-col { width: 120px; }
.results table.ofsted-table col.ofsted-parent-col { width: 125px; }
.results table.ofsted-table col.ofsted-report-col { width: 120px; }
.results table.ofsted-table th:first-child, .results table.ofsted-table td:first-child { position: static; min-width: 0; }
.ofsted-table th:first-child, .ofsted-table td:first-child { text-align: left; }
.ofsted-table thead th { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; vertical-align: middle; }
.results table.ofsted-table thead th { text-align: center; }
.results table.ofsted-table thead tr:first-child th:first-child { text-align: left; }
.results table.ofsted-table thead th .sort-button { justify-content: center; text-align: center; }
.results table.ofsted-table thead th .sort-button > span:first-child { align-items: center; }
.results table.ofsted-table thead th .sort-button[data-ofsted-sort="school"] { justify-content: flex-start; text-align: left; }
.results table.ofsted-table thead th .sort-button[data-ofsted-sort="school"] > span:first-child { align-items: flex-start; }
.ofsted-table thead .ofsted-parent-view-label { background: var(--accent-soft); color: var(--accent-strong); text-align: center !important; white-space: normal; padding-left: 4px; padding-right: 4px; }
.results table.ofsted-table .ofsted-parent-value { width: 125px; }
.ofsted-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 15px; margin: 0 0 12px; color: var(--ink); font-size: 12px; }
.ofsted-key-title { margin-right: 3px; color: var(--muted); font-weight: 800; }
.ofsted-grade { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; line-height: 1.25; }
.ofsted-table .ofsted-grade { max-width: 100%; text-align: left; vertical-align: middle; }
.ofsted-grade-label { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.ofsted-grade-dot { display: inline-block !important; visibility: visible !important; width: 12px; height: 12px; flex: 0 0 12px; border: 1px solid rgba(20, 32, 48, .14); border-radius: 50%; background: #94a3b8 !important; }
.grade-exceptional .ofsted-grade-dot { background: #2878c7 !important; }
.grade-strong .ofsted-grade-dot { background: #176b43 !important; }
.grade-expected .ofsted-grade-dot, .grade-safeguarding-met .ofsted-grade-dot { background: #50a44d !important; }
.grade-attention .ofsted-grade-dot { background: #e09a1b !important; }
.grade-urgent .ofsted-grade-dot, .grade-safeguarding-not-met .ofsted-grade-dot { background: #c83b3b !important; }
.ofsted-parent-value { text-align: center; white-space: nowrap; }
.parent-view-period { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.2; white-space: normal; }
.ofsted-table td a { color: var(--accent-strong); font-weight: 700; white-space: nowrap; }
.ofsted-table .predecessor-note { display: block; margin-top: 4px; color: var(--warning-ink, #895a16); font-size: 10px; line-height: 1.3; }
.ofsted-table .ofsted-status-note { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.ofsted-note { margin: 10px 0 0; }
.ofsted-footnote { color: var(--muted); }
.history-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.history-heading h3 { margin: 0; color: var(--ink); font: 800 18px Manrope, Inter, sans-serif; letter-spacing: -.025em; }
.history-heading .small-note { margin: 5px 0 0; }
.history-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.history-controls > label { color: var(--muted); font-size: 12px; font-weight: 700; }
.history-controls .select-control { min-width: 210px; }
.history-view-toggle { margin-left: 3px; }
.history-columns-options { grid-template-columns: 1fr; }
.history-controls .columns-button { white-space: nowrap; }
.history-table-scroll { overflow: auto; border: 1.5px solid var(--line-strong); border-radius: 11px; }
.results .history-table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.results .history-table th, .results .history-table td { padding: 9px 11px; border-bottom: 1px solid var(--line); text-align: center; font-size: 12px; white-space: nowrap; }
.results .history-table thead th { background: #eef2ff; color: #3730a3; font-weight: 800; }
.results .history-table thead th:not(:first-child) .sort-button { justify-content: center; text-align: center; }
.results .history-table thead th:first-child .sort-button { justify-content: flex-start; text-align: left; }
.results .history-table thead tr:first-child th:not(:first-child) { border-left: 1px solid #d9ddff; }
.results .history-table thead tr:nth-child(2) th { background: #f7f7ff; font-size: 11px; }
.results .history-table tbody th { text-align: left; }
.results .history-table tbody tr:nth-child(even) { background: var(--surface-soft); }
.results .history-table tbody tr:last-child th, .results .history-table tbody tr:last-child td { border-bottom: 0; }
.results .history-table .history-sex-all { color: #5549c7; }
.results .history-table .history-sex-boys { color: #176bb2; }
.results .history-table .history-sex-girls { color: #b74178; }
.results .history-table .national-row th, .results .history-table .national-row td { background: #e8f7f3; color: #087e70; font-weight: 800; }
.history-note { margin: 11px 0 0; }
.history-chart-panel { padding-top: 2px; }
.history-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.history-chart-card { min-width: 0; padding: 13px 14px 11px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); break-inside: avoid; }
.history-chart-card h4 { margin: 0 0 3px; color: var(--ink); font: 800 14px Manrope, Inter, sans-serif; }
.history-chart-card svg { display: block; width: 100%; height: auto; overflow: visible; }
.history-gridline { stroke: var(--line); stroke-width: 1; }
.history-axis-label { fill: var(--muted); font: 11px Inter, sans-serif; }
.history-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 1px 0 0 8%; color: var(--muted); font-size: 11px; }
.history-chart-legend span { display: flex; align-items: center; gap: 6px; }
.history-chart-legend i { width: 13px; height: 3px; border-radius: 2px; background: var(--series-color); }
:root[data-theme="dark"] .results .history-table thead th { background: #302e5a; color: #d2ceff; }
:root[data-theme="dark"] .results .history-table thead tr:nth-child(2) th { background: #242443; }
:root[data-theme="dark"] .results .history-table .national-row th, :root[data-theme="dark"] .results .history-table .national-row td { background: #173d3a; color: #9ce7db; }
:root[data-theme="dark"] .history-chart-card { background: var(--surface-soft); }

@media (max-width: 900px) {
  .report-toolbar { align-items: flex-start; gap: 10px; flex-direction: column; }
  .report-toolbar-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 10px 16px; }
  .history-heading { align-items: flex-start; flex-direction: column; }
  .history-controls { width: 100%; }
  .history-chart-grid { grid-template-columns: 1fr; }
}

@page { size: landscape; margin: 12mm; }
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body { background: #fff !important; color: #172033 !important; font-size: 11px; }
  .hero h1 { color: #172033 !important; }
  .notice { border: 1.5px solid #d97706 !important; border-left: 5px solid #d97706 !important; border-radius: 8px; background: #fff7e8 !important; color: #713f12 !important; }
  .results { padding: 12px !important; border: 2px solid #374151 !important; border-radius: 11px; background: #fff !important; box-shadow: none !important; }
  .results-top { margin: -12px -12px 12px; padding: 11px 13px !important; border-bottom: 2px solid #4f46e5 !important; border-radius: 9px 9px 0 0; background: #eef2ff !important; }
  .results-top h2 { color: #312e81 !important; font-size: 20px !important; }
  .results th { background: #e8edff !important; color: #242963 !important; font-size: 9px !important; font-weight: 800 !important; }
  .results td { font-size: 9px !important; }
  .results th, .results td { padding: 6px 7px !important; border-bottom: 1px solid #9ca3af !important; }
  .results .national-row th, .results .national-row td { border-top: 2px solid #0f766e !important; border-bottom: 2px solid #0f766e !important; background: #dff6f0 !important; color: #075e54 !important; font-weight: 800 !important; }
  .table-footnote, .history-note { color: #374151 !important; font-size: 9px !important; line-height: 1.5 !important; }
  #historyView[hidden] { display: block !important; }
  .history-view { margin-top: 14px !important; padding: 12px !important; border: 2px solid #4f46e5 !important; border-radius: 11px; background: #fff !important; box-shadow: none !important; }
  .history-heading { margin: -12px -12px 10px; padding: 10px 12px; border-bottom: 2px solid #4f46e5; background: #eef2ff !important; }
  .history-heading h3 { color: #312e81 !important; font-size: 16px !important; }
  .history-table-scroll { overflow: visible !important; border: 1.5px solid #6b7280 !important; }
  .results .history-table { min-width: 0 !important; width: 100% !important; }
  .results .history-table th, .results .history-table td { padding: 5px 6px !important; font-size: 9px !important; border-bottom: 1px solid #9ca3af !important; }
  .results .history-table thead th { background: #e8edff !important; color: #242963 !important; }
  .results .history-table thead tr:nth-child(2) th { background: #f4f3ff !important; }
  .results .history-table .national-row th, .results .history-table .national-row td { border-top: 2px solid #0f766e !important; border-bottom: 2px solid #0f766e !important; background: #dff6f0 !important; color: #075e54 !important; }
  #historyChartPanel { display: none !important; }
  #historyTablePanel[hidden] { display: block !important; }
  .history-chart-card { border: 1.5px solid #374151 !important; background: #fff !important; }
  .source-footer { color: #374151 !important; }
}