:root { color-scheme: light; --ink:#182d37; --muted:#536674; --brand:#086654; --line:#d8e2e4; --paper:#fff; --ground:#f3f6f6; }
* { box-sizing:border-box; }
html { overflow-y:auto; }
body { min-height:100vh; margin:0; background:var(--ground); color:var(--ink); font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--brand); }
button,select,input { font:inherit; }
button { background:var(--brand); border:1px solid var(--brand); border-radius:7px; padding:.65rem 1rem; color:white; cursor:pointer; }
button:disabled,select:disabled { opacity:.6; cursor:default; }
:focus-visible { outline:3px solid #d47719; outline-offset:3px; }
.skip { position:absolute; top:-100px; left:1rem; background:white; padding:1rem; z-index:5; }
.skip:focus { top:0; }
.masthead { max-width:1320px; margin:auto; padding:2.5rem 2rem 1rem; display:flex; justify-content:space-between; align-items:start; gap:1rem; }
h1 { font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.2; margin:.3rem 0 .6rem; letter-spacing:-.04em; }
h2 { font-size:1.45rem; margin:.25rem 0 .7rem; line-height:1.3; }
h3 { font-size:1.15rem; margin:0 0 .5rem; }
p { margin:.5rem 0 1rem; }
.eyebrow { text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:750; color:var(--brand); }
#compare-context { display:block; overflow-wrap:anywhere; }
.quality-summary { color:var(--muted); font-size:.9rem; margin-bottom:.65rem; }
.quality-details { border-top:1px solid var(--line); }
.quality-details > summary { cursor:pointer; color:var(--brand); font-size:.9rem; font-weight:650; padding:.75rem 0; min-height:44px; }
.quality-content { padding-top:.35rem; font-size:.9rem; }
.quality-content > h3 { margin-top:1.5rem; }
.quality-source > summary { cursor:pointer; min-height:44px; }
.quality-source code { display:block; max-width:16rem; overflow-wrap:anywhere; font-size:.75rem; }
.badge { display:inline-block; border:1px solid #b6d5cb; background:#e7f3ed; padding:.35rem .7rem; border-radius:30px; font-size:.85rem; white-space:nowrap; }
main { max-width:1320px; margin:auto; padding:1rem 2rem 2rem; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:1.4rem; margin-bottom:1.25rem; box-shadow:0 3px 14px #14334305; min-width:0; }
.metrics.metrics-primary { grid-template-columns:repeat(3,minmax(0,1fr)); }
.school-highlight { border-top:3px solid var(--brand); background:linear-gradient(120deg,#f1f8f5,var(--paper) 70%); }
.school-highlight-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.2rem 0; }
.school-highlight-metric { margin:0; padding:1rem; background:white; border:1px solid var(--line); border-radius:10px; }
.school-highlight-metric dl { margin:0; }
.school-highlight-metric dt { font-weight:650; font-size:.9rem; }
.school-highlight-metric dd { margin:.25rem 0 .5rem; font-size:2rem; font-weight:750; color:var(--brand); font-variant-numeric:tabular-nums; }
.school-highlight-metric .muted { font-size:.8rem; margin-bottom:0; }
.school-highlight-schools { list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
.school-highlight-school { border-top:1px solid var(--line); padding-top:1rem; }
.school-highlight-school-heading { display:flex; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap; align-items:baseline; }
.school-highlight-school h4 { margin:0; font-size:1rem; }
.school-highlight-school p { font-size:.85rem; margin:.3rem 0; }
.school-highlight-school svg { display:block; width:100%; height:8px; margin:.7rem 0; border-radius:4px; background:#dcebe5; }
.school-highlight-school rect { fill:var(--brand); }
.school-highlight summary { cursor:pointer; min-height:44px; padding:.5rem 0; font-size:.85rem; color:var(--brand); font-weight:650; }
#school-highlight-source { font-size:.8rem; overflow-wrap:anywhere; }
@media (max-width:700px) { .school-highlight-metrics { grid-template-columns:1fr; } }
@media (max-width:540px) { .metrics.metrics-primary { grid-template-columns:1fr; } }
.filters { display:grid; grid-template-columns:1fr .7fr 1.2fr .8fr 1.6fr; gap:1rem; border-top:4px solid var(--brand); }
label { display:block; font-size:.85rem; font-weight:650; margin-bottom:.4rem; }
select,input { width:100%; min-height:44px; border:1px solid #a7b9c0; border-radius:6px; background:white; color:var(--ink); padding:.55rem .6rem; }
.candidate-picker { position:relative; min-width:0; }
.candidate-picker ul { position:absolute; z-index:4; top:75px; inset-inline:0; max-height:280px; overflow:auto; margin:0; padding:.3rem; list-style:none; border:1px solid #a7b9c0; border-radius:7px; background:white; box-shadow:0 5px 18px #182d3720; }
.candidate-picker li { padding:.7rem; cursor:pointer; overflow-wrap:anywhere; }
.candidate-picker li:hover,.candidate-picker li.active { background:#dceee7; outline:2px solid var(--brand); outline-offset:-2px; }
.candidate-picker li[aria-disabled="true"] { color:var(--muted); cursor:default; }
.candidate-picker small { display:block; margin-top:.4rem; font-size:.75rem; }
#status { color:var(--muted); font-size:.9rem; min-height:1.5rem; }
#error { padding:1rem; border:1px solid #dfb4a8; border-radius:7px; background:#fff0eb; color:#873218; }
.section-title { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1rem; }
.muted,.note { color:var(--muted); font-size:.9rem; }
.note { border-left:3px solid #a1bfb9; padding:.6rem .8rem; background:#eaf0f0; overflow-wrap:anywhere; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; margin:1rem 0; }
.metric { border:1px solid var(--line); border-radius:9px; padding:1rem; background:white; }
.metric:first-child { background:var(--brand); color:white; }
.metric dt { font-size:.8rem; margin:0; }
.metric dd { margin:.3rem 0 0; font-size:1.8rem; font-weight:700; font-variant-numeric:tabular-nums; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.table-wrapper { overflow-x:auto; max-width:100%; container-type:inline-size; border:1px solid var(--line); border-radius:6px; }
table { border-collapse:separate; border-spacing:0; width:100%; font-size:.88rem; }
caption { text-align:left; padding:.65rem; font-weight:650; background:#f3f7f7; }
th,td { padding:.65rem .75rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
thead th { position:sticky; top:0; background:#eaf0f1; z-index:2; white-space:nowrap; }
tbody th { position:sticky; left:0; background:white; z-index:1; font-weight:550; }
tbody tr:last-child :is(th,td) { border-bottom:0; }
tbody tr:hover :is(th,td) { background:#f1f7f4; }
.dashboard-table .number { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.table-cell-text { display:block; min-width:8rem; max-width:22rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-cell-text .link { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-height:28px; }
#locations .table-cell-text { min-width:12rem; max-width:24rem; }
#zones .table-cell-text { min-width:5rem; }
.table-search { margin:.8rem 0; }
.table-search-field { position:relative; }
.table-search-field input { padding-inline-start:3rem; min-width:0; }
.table-search-icon { position:absolute; inset-inline-start:.75rem; top:50%; transform:translateY(-50%); font-size:1.1rem; color:var(--muted); pointer-events:none; }
.table-results-status { font-size:.8rem; color:var(--muted); margin:.6rem 0; }
.table-expand { background:white; color:var(--brand); min-height:44px; }
.table-empty { text-align:center; color:var(--muted); padding:1rem; }
@media (max-width:540px) {
  .table-cell-text { max-width:16rem; }
  #locations .table-cell-text { min-width:10rem; max-width:18rem; }
  .table-expand { width:100%; }
  :is(#zones,#locations,#sections,#best,#worst,#comparison,#detail) tbody th { position:static; }
}
.link { background:transparent; color:var(--brand); border:0; padding:0; text-decoration:underline; text-underline-offset:3px; text-align:left; }
.empty { padding:1rem; border:1px dashed #a7b9c0; border-radius:6px; color:var(--muted); }
.compare-controls { display:grid; grid-template-columns:minmax(0,2fr) minmax(10rem,1fr) auto; grid-template-rows:auto 44px auto; column-gap:1rem; align-items:start; }
.compare-controls > div { display:grid; grid-template-rows:subgrid; grid-row:1 / span 3; min-width:0; }
.compare-controls :is(input,select) { height:44px; }
.compare-controls > button { grid-column:3; grid-row:2; height:44px; padding:.55rem 1rem; align-self:center; }
#breadcrumbs { margin-bottom:.6rem; font-size:.85rem; color:var(--muted); }
#breadcrumbs ol { display:flex; flex-wrap:wrap; gap:.25rem .5rem; margin:0; padding:0; list-style:none; }
#breadcrumbs li { display:flex; align-items:center; gap:.5rem; min-width:0; overflow-wrap:anywhere; }
#breadcrumbs button { font-size:inherit; min-height:32px; }
.breadcrumb-separator { color:var(--muted); }
#batch-detail { margin-top:1rem; }
footer { max-width:1320px; margin:auto; padding:1rem 2rem 2rem; color:var(--muted); font-size:.8rem; }
[hidden] { display:none !important; }
@media (max-width:900px) { .filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .grid { grid-template-columns:1fr; gap:0; } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:540px) { main { padding:.6rem 1rem; } .masthead { padding:1.5rem 1rem .5rem; flex-direction:column; } .filters { grid-template-columns:1fr; } .panel { padding:1rem; } .compare-controls { grid-template-columns:1fr; } .section-title { flex-direction:column; align-items:start; } .metric dd { font-size:1.5rem; } footer { padding:1rem; } }

.metric-help { display:inline-block; margin-left:.25rem; }
.info-button { background:transparent; color:inherit; border:0; padding:0; min-width:28px; min-height:28px; border-radius:50%; }
.metric-tooltip { position:fixed; z-index:10; width:min(360px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; background:#182d37; color:white; border:1px solid #536674; border-radius:7px; padding:.8rem; font-size:.85rem; line-height:1.5; font-weight:400; box-shadow:0 4px 16px #182d3740; }
@media (pointer:coarse) { .info-button { min-width:44px; min-height:44px; } }

.explanation-line { display:block; }
.election-controls { display:grid; grid-template-columns:repeat(2,minmax(0,2fr)) minmax(10rem,1fr) auto; grid-template-rows:auto 44px auto; column-gap:1rem; align-items:start; }
.election-controls > div { display:grid; grid-template-rows:subgrid; grid-row:1 / span 3; min-width:0; }
.election-controls :is(input,select) { height:44px; }
.election-controls > button { grid-column:4; grid-row:2; height:44px; align-self:center; }
.election-chart svg { display:block; width:100%; height:14px; margin:.3rem 0; background:#eaf0f1; }
.election-bars { padding:0; list-style:none; }
.election-bars li { margin-bottom:.8rem; overflow-wrap:anywhere; }
#election-units { margin:1rem 0; }
#election-pages { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:1rem; }
@media (max-width:900px) { .election-controls { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:1rem; } .election-controls > div:nth-child(3) { grid-row:4 / span 3; } .election-controls > button { grid-column:2; grid-row:5; } }
@media (max-width:540px) { .election-controls { grid-template-columns:1fr; grid-template-rows:none; } .election-controls > div,.election-controls > div:nth-child(3) { display:block; grid-row:auto; } .election-controls > button { grid-column:auto; grid-row:auto; } }
@media (max-width:540px) {
  .compare-controls { grid-template-rows:none; row-gap:1rem; }
  .compare-controls > div { display:block; grid-row:auto; }
  .compare-controls > button { grid-column:auto; grid-row:auto; }
}