/* ---------- Compare districts ---------- */
.cmp-take { font-size: 1.0625rem; line-height: 1.5; max-width: 70ch; margin: 8px 0 0; color: var(--ink); }
.cmp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 4px; }
.cmp-hint { font-size: .8125rem; color: var(--muted); }
.cmp-chart { min-height: 300px; position: relative; }
.cmp-chart svg { display: block; touch-action: pan-y; }
.cmp-note { margin-top: 4px; }
.cmp-lv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.cmp-lvcol h4 { font: 600 .8125rem var(--font); margin: 0 0 6px; color: var(--ink); }
.cmp-lvcol.is-dim { opacity: .5; }
.cmp-row { display: grid; grid-template-columns: minmax(70px, 10.5rem) 1fr 2.75rem; align-items: center; gap: 6px; min-height: 26px; font-size: .8125rem; border-radius: 4px; }
.cmp-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.cmp-row.is-focus { font-weight: 700; }
.cmp-nm { white-space: normal; line-height: 1.15; padding: 2px 0; }
.cmp-track { position: relative; height: 12px; }
.cmp-fill { position: absolute; top: 0; height: 12px; border-radius: 2px; }
.cmp-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: #8a8a8a; }
.cmp-val { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-tbl { margin-top: 4px; }
.cmp-table th.sortable { padding: 0; }
.cmp-table .sortbtn { all: unset; cursor: pointer; display: inline-flex; gap: 4px; padding: 5px 10px; font-weight: 600; width: 100%; box-sizing: border-box; justify-content: flex-end; }
.cmp-table th:first-child .sortbtn { justify-content: flex-start; }
.cmp-table .sortbtn:hover { background: #e6e6e6; }
.cmp-table .sortbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.cmp-table tr.cmp-me td { font-weight: 700; background: #f3f3f3; }
/* table: own scroll container, sticky first column, never widens the page */
.cmp-tbl { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.cmp-table { min-width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp-table th, .cmp-table td { white-space: nowrap; }
.cmp-table th:first-child, .cmp-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface, #fff); box-shadow: 1px 0 0 #e6e6e6; }
.cmp-table tr.cmp-me td:first-child { background: #f3f3f3; }
.cmp-yr { margin: 2px 0 6px; }
.cmp-scrollhint { display: none; }
@media (max-width: 760px) { .cmp-scrollhint { display: block; margin: 2px 0 0; } .cmp-table .sortbtn { padding: 5px 8px; font-size: .8125rem; } .cmp-table td { padding-left: 8px; padding-right: 8px; } .cmp-lv { grid-template-columns: 1fr; } .cmp-row { grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr) 2.75rem; } }

/* ---------- Campus profile: students + metrics ---------- */
.pf-sec { margin-top: 20px; }
.pf-sec > h3 { margin-bottom: 4px; }
.pf-prog { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 24px; margin-top: 8px; }
.pf-pcard { border-top: 2px solid var(--ink); padding-top: 8px; }
.pf-pcard dt { font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.pf-pcard .v { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.pf-pcard .v small { font-size: .875rem; font-weight: 500; color: var(--muted); }
.pf-pcard .s { display: block; font-size: .8125rem; color: var(--muted); margin-top: 2px; }
.pf-pcard svg { display: block; margin-top: 6px; }
.pf-pcard .masked { font-size: 1rem; font-weight: 600; color: var(--muted); }
.pf-mt { margin-top: 8px; }
.pf-mt th, .pf-mt td { text-align: right; }
.pf-mt th:first-child, .pf-mt td:first-child { text-align: left; }
.pf-mt td.pf-c { font-weight: 700; }

.pf-pcard dd { margin: 0; }

.pf-alt { font-size: .75rem; font-weight: 400; color: var(--muted); }
.pf-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0; }
.pf-quick-l { font-size: .8125rem; font-weight: 600; min-width: 6.5rem; color: var(--ink-2); }
.pf-quick .btn { text-decoration: none; border: 1px solid var(--line, #d4d4d4); border-radius: 999px; padding: 4px 12px; background: var(--surface, #fff); color: var(--ink); font-size: .8125rem; }
.pf-quick .btn:hover { background: #e6e6e6; }
@media (max-width: 520px) { .cmp-table th .sortbtn { white-space: normal; text-align: right; padding: 5px 6px; width: auto; } .cmp-table th { white-space: normal; vertical-align: bottom; line-height: 1.2; } }