/* sped-data.css: official special education numbers (js/sped-data.js) in the district popup (.sd-dist)
   and on the special education hub (.sd-full, SpedData.mount). Own tokens with the site's theme tokens
   as defaults, so it also works on pages without style.css. Neutral colors only: no good / bad colors.
   Dark mode: html[data-theme="dark"]. */
.sd-box {
  --sd-bg: var(--surface-2, #F5F7FA); --sd-text: var(--text, #1B2633); --sd-muted: var(--muted, #5A6878);
  --sd-ink: var(--ink, #12304D); --sd-border: var(--border, #DFE5EC); --sd-link: var(--blue-accent, #2468A8);
  --sd-focus: var(--focus, #F2B33D); --sd-head: var(--track, #E4E9EF);
  margin: 10px 0 4px; padding: 9px 10px; border: 1px solid var(--sd-border); border-radius: 10px;
  background: var(--sd-bg); color: var(--sd-text); min-width: 0; font-size: .76rem; line-height: 1.45;
}
html[data-theme="dark"] .sd-box {
  --sd-bg: var(--surface-2, #1A2633); --sd-text: var(--text, #E3EAF2); --sd-muted: var(--muted, #A9B6C4);
  --sd-ink: var(--ink, #F1F5FA); --sd-border: var(--border, #33475C); --sd-link: var(--blue-accent, #6CB0F0);
  --sd-head: var(--track, #2A3A4C);
}
.sd-box p { margin: 3px 0; overflow-wrap: anywhere; }
.sd-box h3.sd-title { margin: 0 0 4px; }
.sd-box .sd-h { margin: 0 0 2px; font-size: .74rem; font-weight: 700; color: var(--sd-ink); }
.sd-msg { color: var(--sd-muted); }

.sd-stats { display: grid; gap: 8px; }
.sd-full .sd-stats { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sd-stat, .sd-det, .sd-cmp { min-width: 0; }
.sd-cmp, .sd-det { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--sd-border); }
.sd-val b { font-size: 1rem; font-weight: 800; color: var(--sd-ink); font-variant-numeric: tabular-nums; }
.sd-det .sd-val b { font-size: .86rem; }
.sd-na, .sd-na span { color: var(--sd-muted); font-style: italic; font-weight: 600; }
.sd-vs, .sd-yr, .sd-meta, .sd-note, .sd-legal { color: var(--sd-muted); }
.sd-meta, .sd-legal, .sd-yr { font-size: .69rem; }
.sd-yr { display: block; font-weight: 400; }
.sd-yr span { white-space: nowrap; }
.sd-val .sd-yr { display: inline; margin-left: 4px; }
.sd-note { font-size: .72rem; }
.sd-legal { margin-top: 8px !important; }

/* Tables */
.sd-scroll { overflow-x: auto; max-width: 100%; }
.sd-scroll:focus-visible { outline: 3px solid var(--sd-focus); outline-offset: 2px; border-radius: 4px; }
.sd-table { width: 100%; border-collapse: collapse; margin: 3px 0; font-size: .72rem; }
.sd-table caption { text-align: left; font-weight: 700; color: var(--sd-ink); padding: 0 0 3px; }
.sd-table th, .sd-table td { padding: 4px 5px; border-bottom: 1px solid var(--sd-border); text-align: right; vertical-align: top; }
.sd-table thead th { background: var(--sd-head); color: var(--sd-ink); font-weight: 700; font-size: .68rem; }
.sd-table th[scope="row"], .sd-table thead th:first-child { text-align: left; font-weight: 600; color: var(--sd-text); }
.sd-table td b { color: var(--sd-ink); font-variant-numeric: tabular-nums; }
.sd-table td .sd-na { display: block; font-size: .66rem; }
.sd-table .sd-st { color: var(--sd-muted); font-variant-numeric: tabular-nums; }
.sd-table td .sd-st { display: block; font-size: .64rem; white-space: nowrap; }
.sd-lre { margin-top: 10px; }

/* Links: real links with a visible focus ring; 44px tap height on touch screens */
.sd-box a { color: var(--sd-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sd-box a:focus-visible, .sd-about summary:focus-visible { outline: 3px solid var(--sd-focus); outline-offset: 2px; border-radius: 4px; }
.sd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sd-about { margin-top: 8px; border-top: 1px solid var(--sd-border); padding-top: 4px; }
.sd-about summary { cursor: pointer; font-weight: 700; color: var(--sd-link); min-height: 32px; display: flex; align-items: center; }
.sd-about summary::before { content: "▸"; margin-right: 6px; }
.sd-about[open] summary::before { content: "▾"; }
.sd-about summary::-webkit-details-marker { display: none; }
.sd-about ul { margin: 4px 0; padding-left: 18px; }
.sd-about li { margin: 3px 0; overflow-wrap: anywhere; }
.sd-about .sd-h { margin-top: 6px; }
@media (pointer: coarse) {
  .sd-about summary { min-height: 44px; }
  .sd-box a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Hub: a little more room */
.sd-full { padding: 14px 16px; font-size: .9rem; }
.sd-full .sd-h { font-size: .9rem; }
.sd-full .sd-val b { font-size: 1.3rem; }
.sd-full .sd-table { font-size: .84rem; }
.sd-full .sd-table thead th { font-size: .8rem; }
.sd-full .sd-meta, .sd-full .sd-legal, .sd-full .sd-yr, .sd-full .sd-note, .sd-full .sd-table td .sd-na { font-size: .8rem; }

/* District popup */
.sd-dist:empty { display: none; }
