:root { --home: #fdf3d7; --line: #ddd; --ink: #1a1a1a; --accent: #0a58ca; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; color: var(--ink); margin: 0; line-height: 1.4; }
header, main, footer { max-width: 1100px; margin: 0 auto; padding: 1rem; }
header { border-bottom: 2px solid var(--line); }
h1 { margin: 0 0 .25rem; font-size: 1.4rem; }
.sub { margin: 0; color: #555; }
.controls { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin: 1rem 0; }
select { padding: .3rem; font-size: 1rem; }
fieldset { border: 1px solid var(--line); border-radius: 6px; padding: .5rem .8rem; }
legend { font-weight: 600; padding: 0 .3rem; }
#district-picker label { display: inline-block; margin: .15rem .6rem .15rem 0; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { cursor: pointer; background: #fafafa; position: sticky; top: 0; user-select: none; }
th:hover { background: #eef3fb; }
th[aria-sort] { color: var(--accent); }
th[aria-sort="ascending"]::after { content: " \25B2"; font-size: .7em; }
th[aria-sort="descending"]::after { content: " \25BC"; font-size: .7em; }
tr.home td { background: var(--home); font-weight: 600; }
footer { color: #555; font-size: .85rem; border-top: 1px solid var(--line); margin-top: 1.5rem; }
@media (max-width: 640px) { th, td { padding: .35rem; font-size: .85rem; } h1 { font-size: 1.2rem; } }

/* Program matrix (Plan 2) */
.legend { color: #555; font-size: .85rem; margin: .5rem 0 1rem; }
.legend .single { border-bottom: 2px dashed #c8800f; }
#matrix td.val { cursor: pointer; }
#matrix td.val:hover { background: #eef3fb; }
#matrix .single { border-bottom: 2px dashed #c8800f; }
#matrix .yes { color: #137333; font-weight: 600; }
#matrix .no { color: #b3261e; }
#src-panel { margin-top: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: #fafafa; }
#src-panel a { display: block; margin: .25rem 0; }
#src-panel .close { float: right; cursor: pointer; color: #888; }

/* Shared nav + detail/chart (Plan 3) */
.topnav { background: #1a1a1a; }
.topnav a { display: inline-block; color: #eee; padding: .6rem 1rem; text-decoration: none; font-size: .95rem; }
.topnav a:hover { background: #333; }
.topnav a[aria-current="page"] { background: #0a58ca; color: #fff; font-weight: 600; }
.chart { display: block; max-width: 100%; height: auto; }
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.detail-section h2 { font-size: 1.1rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.facts span { display: inline-block; margin-right: 1.2rem; color: #555; }
.spend-tbl { width: 100%; border-collapse: collapse; }
.spend-tbl td { padding: .3rem .5rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.barbox { display: inline-block; width: 100%; background: #eee; border-radius: 3px; }
.barfill { display: inline-block; height: .8em; background: #0a58ca; border-radius: 3px; }
.proglist { columns: 2; }
@media (max-width: 640px) { .proglist { columns: 1; } }
h3.sub { margin: 1rem 0 .2rem; color: #333; font-size: .95rem; }