/* panels.css — map sidebar: List, Filters and Insights tabs (js/list.js, js/panels.js, js/layers.js).
   Loaded after css/style.css; every rule is scoped to one of those panels. Reads the style.css tokens,
   so dark mode follows. Accent #F2B33D with navy #14324F text keeps 7:1 contrast in both themes. */

/* ------------------------------------------------------------------ Filters */
#filter-section { --flt-accent: #F2B33D; --flt-on-accent: #14324F; }
#filter-section > h2 { margin-bottom: 4px; }

/* "Showing N of N schools · Clear all", stuck to the top of the panel while the filters scroll */
#filter-section .flt-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 -6px 4px; padding: 6px 6px 6px 12px; border-radius: 12px;
  background: var(--hover); border: 1px solid var(--border);
  box-shadow: 0 -8px 0 4px var(--surface);
}
#filter-section .flt-bar .filter-count { margin: 0; padding: 0; background: none; font-size: .86rem; font-weight: 600; color: var(--ink); min-width: 0; }
#filter-section .flt-clear {
  flex-shrink: 0; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
  transition: background .15s, border-color .15s;
}
#filter-section.has-filters .flt-clear { background: var(--flt-accent); border-color: var(--flt-accent); color: var(--flt-on-accent); }
#filter-section.has-filters .flt-clear:hover { filter: brightness(1.05); }
#filter-section .flt-clear:disabled { cursor: default; color: var(--muted); }
#filter-section .flt-clear:focus-visible { outline: 3px solid var(--blue-accent); outline-offset: 2px; }

/* Collapsible groups */
#filter-section .flt-group { border-bottom: 1px solid var(--border); }
#filter-section .flt-group > summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 2px;
  cursor: pointer; list-style: none; border-radius: 8px;
}
#filter-section .flt-group > summary::-webkit-details-marker { display: none; }
#filter-section .flt-group > summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
#filter-section .flt-group[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
#filter-section .flt-group > summary:hover { background: var(--hover); }
#filter-section .flt-group > summary:focus-visible { outline: 3px solid var(--blue-accent); outline-offset: 1px; }
#filter-section .flt-group .field-group-title {
  margin: 0; font-size: .92rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink);
}
#filter-section .flt-group .field-group-title::after { content: none; }
#filter-section .flt-group-n {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--flt-accent); color: var(--flt-on-accent); font-size: .74rem; font-weight: 800;
}
#filter-section .flt-group-n[hidden] { display: none; }
#filter-section .flt-group > .field-grid { padding: 4px 0 16px; }
/* The birthday helper takes a whole row, so the grid below it stays aligned. */
#filter-section #grade-dob-helper { grid-column: 1 / -1; margin-top: -8px; }
#filter-section #grade-dob-helper > summary { padding: 5px 0; min-height: 24px; box-sizing: border-box; }
#filter-section > .hint { margin: 12px 0 0; }

/* ------------------------------------------------------------------ Insights */
#stats-section .ins-kpis {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px;
}
#stats-section .ins-kpis > div {
  min-width: 0; padding: 10px 10px 9px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-top: 3px solid #F2B33D;
}
#stats-section .ins-kpis dt { font-size: .7rem; font-weight: 600; color: var(--muted); line-height: 1.3; }
#stats-section .ins-kpis dd {
  margin: 4px 0 0; font-size: 1.08rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#stats-section #stats-body { padding-top: 0; display: flex; flex-direction: column; gap: 10px; }
#stats-section .stat-group {
  margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border);
}
#stats-section .stat-group-title { margin-bottom: 8px; }
#stats-section .stat-group-note { display: block; margin-top: 2px; letter-spacing: .02em; }
#stats-section .db-row:last-child { margin-bottom: 0; }

/* Five largest districts: rank, full name, number, bar */
#stats-section .ins-rank { list-style: none; margin: 0; padding: 0; counter-reset: rank; display: flex; flex-direction: column; gap: 8px; }
#stats-section .ins-rank li {
  counter-increment: rank; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline;
  font-size: .82rem;
}
#stats-section .ins-rank li::before { content: counter(rank); grid-row: span 2; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
#stats-section .ins-rank-name { color: var(--text); overflow-wrap: anywhere; }
#stats-section .ins-rank-val { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
#stats-section .ins-rank .db-bar-wrap { grid-column: 2 / -1; display: block; height: 6px; }
#stats-section .ins-rank .db-bar { display: block; background: #2874A6; }
[data-theme="dark"] #stats-section .ins-rank .db-bar { background: var(--blue-accent); }

/* Highest-need schools: each row opens the school */
#stats-section .ins-need { list-style: none; margin: 0 -6px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#stats-section .ins-need-btn {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 6px; text-align: left;
  font: inherit; color: var(--text); background: none; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
}
#stats-section .ins-need-btn:hover { background: var(--hover); border-color: var(--border); }
#stats-section .ins-need-btn:focus-visible { outline: 3px solid var(--blue-accent); outline-offset: 0; }
#stats-section .ins-need-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#stats-section .ins-need-name { font-size: .83rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
#stats-section .ins-need-dist { font-size: .72rem; color: var(--muted); overflow-wrap: anywhere; }
#stats-section .need-pill { margin: 0; min-width: 30px; text-align: center; padding: 2px 7px; color: #fff; }
#stats-section .need-pill.need-hi { background: #B03A2E; }
#stats-section .need-pill.need-mid { background: #9A4A00; }
#stats-section .need-pill.need-lo { background: #17784A; }
#stats-section .ins-need-frl { width: 38px; flex-shrink: 0; text-align: right; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ List */
#panel-list .list-count { padding: 3px 10px; border-radius: 999px; background: var(--hover); white-space: nowrap; }
#panel-list .list-controls { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
#panel-list .list-controls > label:not(.check) { flex: 1 1 160px; }
#panel-list .list-controls label.check { flex: 1 1 100%; min-height: 32px; }
#panel-list .sl-item { padding: 10px 12px; gap: 10px; }
#panel-list .sl-sub { overflow-wrap: anywhere; }
#panel-list .sl-stats { gap: 2px 10px; margin-top: 3px; }
#panel-list .sl-stats > span { white-space: nowrap; }
/* the measure the list is sorted by */
#panel-list .sl-stats > span.sl-sorted { margin: 0 -2px; padding: 0 6px; border-radius: 999px; background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-border); color: var(--info-text); }
#panel-list .sl-stats > span.sl-sorted b { color: inherit; }
#panel-list .sl-item:focus-visible { outline: 3px solid var(--blue-accent); outline-offset: 1px; }
#panel-list #list-more { text-align: center; margin: 10px 0 0; }
#panel-list #list-more:empty { display: none; }
#panel-list #list-show-more { margin-top: 8px; min-height: 44px; }

/* Phones: the five short "School type" menus stay two to a row (style.css stacks every filter field). */
@media (max-width: 767px) and (min-width: 340px) {
  #filter-section .flt-group[data-group="type"] > .field-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #filter-section .flt-group[data-group="type"] select { min-width: 0; width: 100%; }
}