/* minicharts.css — small charts and "What does this mean?" explainers (js/minicharts.js).
   Colors are the site's own tokens (style.css section 10 on the map, pages.css on standalone pages),
   so light and dark both follow html[data-theme]. One accent for the measured thing; context marks
   (district, state) are ink or gray and differ by shape too (ring, tick), never by color alone. */
:root {
  --mc-accent: var(--blue-accent, var(--accent, #2468A8));
  --mc-ink: var(--ink, #12304D);
  --mc-ctx: var(--muted, #5A6878);
  --mc-track: var(--track, #E4E9EF);
  --mc-surface: var(--surface, #fff);
}

/* marks */
.mc-track { fill: var(--mc-track); }
.mc-dot { fill: var(--mc-accent); stroke: var(--mc-surface); stroke-width: 2; }
.mc-ring { fill: var(--mc-surface); stroke: var(--mc-ctx); stroke-width: 2; }
.mc-tick { stroke: var(--mc-ink); stroke-width: 2; stroke-linecap: round; }
.mc-spark-line { fill: none; stroke: var(--mc-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mc-strip, .mc-dp-svg { display: block; overflow: visible; }
.mc-spark { display: inline-block; vertical-align: middle; overflow: visible; }
.mc-glyph { width: 14px; height: 14px; flex: none; overflow: visible; }
.mc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mc-na { color: var(--mc-ctx); font-weight: 400; font-style: italic; }

/* school strips (popup Scores tab and profile) */
.mc-strips { display: flex; flex-direction: column; gap: 10px; }
.mc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; }
.mc-row-label { font-size: .8rem; color: var(--text); min-width: 0; }
.mc-row-val { font-size: .9rem; font-weight: 700; color: var(--mc-ink); font-variant-numeric: tabular-nums; }
.mc-row .mc-strip { grid-column: 1 / -1; margin: 1px 0; padding: 0 6px; box-sizing: border-box; }
p.mc-row-say { grid-column: 1 / -1; margin: 0; font-size: .74rem; line-height: 1.4; color: var(--mc-ctx); }
.mc-row-say > span + span::before { content: " · "; }
.mc-row-na .mc-row-say { font-style: italic; }
p.mc-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: .72rem; color: var(--mc-ctx); }
.mc-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.mc-legend > .mc-legend-scale { margin-left: auto; }
p.mc-flag { margin: 0; padding: 6px 9px; border-radius: 8px; font-size: .74rem; line-height: 1.4;
  background: var(--warn-bg, #FFF6E5); border: 1px solid var(--warn-border, #F0CF8E); color: var(--warn-text, #7A4F00); }

/* dot plot (Compare schools, Compare districts) */
.mc-dps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 12px; }
.mc-dp { margin: 0; padding: 10px 12px; border: 1px solid var(--border, #DFE5EC); border-radius: 12px; background: var(--mc-surface); min-width: 0; }
.mc-dp-title { font-size: .84rem; font-weight: 700; color: var(--mc-ink); margin-bottom: 6px; }
.mc-dp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.mc-dp-row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 3.4em; gap: 8px; align-items: center; font-size: .8rem; }
.mc-dp-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mc-dp-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.mc-dp-svg { padding: 0 6px; box-sizing: border-box; }
.mc-dp-val { text-align: right; font-weight: 700; color: var(--mc-ink); font-variant-numeric: tabular-nums; }
.mc-dp-axis { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 3.4em; gap: 8px; font-size: .68rem; color: var(--mc-ctx); margin-top: 2px; }
.mc-dp-ticks { display: flex; justify-content: space-between; padding: 0 2px; }
p.mc-dp-ref { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; font-size: .74rem; color: var(--mc-ctx); }
p.mc-dp-say { margin: 4px 0 0; font-size: .8rem; color: var(--text); }
.mc-letter { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 6px; font-size: .7rem; font-weight: 800;
  color: var(--mc-ink); border: 1.5px solid var(--mc-ctx); box-sizing: border-box; }
p.mc-note { margin: 8px 0 0; font-size: .78rem; line-height: 1.45; color: var(--mc-ctx); }

/* Compare schools dialog (js/compare.js) and Compare districts (js/compare-districts.js) */
.cd-glance { margin: 10px 0 14px; }
.cd-glance h3, .cdx-glance-h { margin: 0 0 4px; font-size: .95rem; color: var(--mc-ink); }
.cd-school .mc-letter { vertical-align: -4px; margin-right: 2px; }
.cdx-glance { margin: 14px 0 18px; }
.cdx-glance .mc-dp-name .cdx-letter { width: 20px; height: 20px; font-size: .7rem; border-radius: 6px; }

/* table twin */
.mc-table { margin-top: 8px; font-size: .78rem; }
.mc-table summary { cursor: pointer; font-weight: 600; color: var(--mc-accent); width: fit-content; min-height: 24px; display: flex; align-items: center; gap: 4px; list-style: none; }
.mc-table summary::-webkit-details-marker { display: none; }
.mc-table summary::before { content: "\25B8"; font-size: .85em; }
.mc-table[open] summary::before { content: "\25BE"; }
.mc-table summary:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; border-radius: 4px; }
.mc-table table { width: 100%; margin-top: 6px; border-collapse: collapse; }
.mc-table th, .mc-table td { padding: 4px 6px; border-bottom: 1px solid var(--border, #DFE5EC); text-align: left; font-weight: 400; }
.mc-table thead th { font-weight: 700; color: var(--mc-ink); }
.mc-table tbody th { color: var(--text); overflow-wrap: anywhere; }
.mc-table .mc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* "What does this mean?" */
.mc-xp { margin-top: 8px; }
.mc-xp-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 6px; border: 1px solid var(--border, #DFE5EC);
  border-radius: 999px; background: transparent; color: var(--mc-accent); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.mc-xp-btn:hover { background: var(--hover, rgba(36,104,168,.08)); }
.mc-xp-btn:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; }
.mc-xp-i { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box;
  font: italic 700 10px/1 Georgia, 'Times New Roman', serif; }
.mc-xp-btn[aria-expanded="true"] { background: var(--hover, rgba(36,104,168,.08)); }
.mc-xp-body { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2, #F5F7FA); border: 1px solid var(--border, #DFE5EC);
  font-size: .78rem; line-height: 1.45; color: var(--text); }
.mc-xp-body[hidden] { display: none; }
.mc-xp-body dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mc-xp-body dt { font-weight: 700; color: var(--mc-ink); }
.mc-xp-body dd { margin: 0; }
p.mc-xp-more { margin: 6px 0 0; font-weight: 600; }
.mc-xp-more a { color: var(--mc-accent); }

/* Insights panel chart notes */
p.mc-cap { margin: -2px 0 8px; font-size: .74rem; line-height: 1.4; color: var(--mc-ctx); }

@media (max-width: 420px) {
  .mc-dp-row, .mc-dp-axis { grid-template-columns: minmax(0, 34%) minmax(0, 1fr) 3em; gap: 6px; }
}
@media (forced-colors: active) {
  .mc-dot { fill: CanvasText; stroke: Canvas; }
  .mc-ring { fill: Canvas; stroke: CanvasText; }
  .mc-tick, .mc-spark-line { stroke: CanvasText; }
  .mc-track { fill: GrayText; }
}
@media print {
  .mc-xp-btn, .mc-table { display: none !important; }
  .mc-dot, .mc-ring, .mc-tick, .mc-track { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mc-dp { break-inside: avoid; }
}