/* ==========================================================================
   Washington School Map — styles
   1. Tokens & base   2. App bar   3. Side panel   4. Map & map controls
   5. Components (popups, scorecard, compare…)   6. Print composer   7. @media print
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --navy:        #14324F;
  --navy-2:      #1F4A72;
  --blue-dark:   #14324F;   /* legacy name used by component styles */
  --blue-accent: #2468A8;
  --gold:        #F2B33D;
  --green:       #27AE60;
  --orange:      #E67E22;
  --purple:      #8E44AD;
  --red:         #C0392B;

  --bg:          #F3F5F8;
  --surface:     #FFFFFF;
  --white:       #FFFFFF;
  --text:        #1D2733;
  --muted:       #5B6878;
  --border:      #DCE2E9;
  --focus:       #F2B33D;

  --c-elem: #3498DB; --c-mid: #27AE60; --c-high: #E67E22; --c-other: #8E44AD;

  --appbar-h:  56px;
  --sidebar-w: 372px;
  --radius:    10px;
  --shadow-sm: 0 1px 2px rgba(16,32,52,.08);
  --shadow:    0 4px 16px rgba(16,32,52,.12);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; font-family: var(--font); color: var(--text); background: var(--bg); font-size: 15px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
/* UI icons only — never style Leaflet's own SVG renderer, which draws the polygons */
button svg, .chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.brand-mark { width: 32px; height: 32px; flex-shrink: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid transparent;
  font-size: .9rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); }
.btn-accent  { background: var(--gold); color: var(--ink); }
.btn-accent:hover { background: #f6c35f; }
.btn-ghost   { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-outline:hover:not(:disabled) { border-color: var(--ink); }
.btn-outline:disabled { opacity: .6; cursor: default; }
.btn-block { width: 100%; }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px;
  border: none; background: transparent; color: inherit;
}
.icon-btn:hover { background: rgba(127,127,127,.15); }
.link-btn { background: none; border: none; color: var(--blue-accent); font-size: .82rem; font-weight: 600; padding: 2px 4px; }
.link-btn:hover { text-decoration: underline; }

/* Form fields */
input[type="text"], input[type="search"], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font-size: .9rem; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(36,104,168,.15); }
textarea { resize: vertical; }
.hint { font-size: .8rem; color: var(--muted); line-height: 1.45; margin: 8px 0; }

/* Loading */
#loading {
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: rgba(243,245,248,.94); transition: opacity .4s;
}
#loading.hidden { opacity: 0; pointer-events: none; }
#loading p { color: var(--ink); font-weight: 600; }
.spinner { width: 42px; height: 42px; border: 4px solid #d5dde6; border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 2. App bar ---------- */
#appbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--appbar-h); z-index: 1000;
  display: flex; align-items: center; gap: 14px; padding: 0 12px 0 8px;
  background: var(--navy); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
a.brand { color: inherit; text-decoration: none; border-radius: 8px; }   /* links to home.html */
a.brand:hover h1 { text-decoration: underline; text-underline-offset: 3px; }
.brand-mark { width: 32px; height: 32px; stroke: none; }
.brand h1 { font-size: 1.02rem; font-weight: 700; letter-spacing: .1px; white-space: nowrap; }
.brand-sub { font-size: .72rem; opacity: .72; white-space: nowrap; }
#stats-banner { display: flex; gap: 6px; margin-left: 10px; }
#stats-banner span {
  font-size: .78rem; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); white-space: nowrap;
}
#stats-banner b { font-weight: 600; }
.appbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* ---------- 3. Side panel ---------- */
#sidebar {
  position: fixed; top: var(--appbar-h); bottom: 0; left: 0; width: var(--sidebar-w); z-index: 900;
  display: flex; flex-direction: column; background: var(--bg); border-right: 1px solid var(--border);
  transition: transform .3s ease;
}
#sidebar.collapsed { transform: translateX(-100%); }

.tabs { display: flex; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 6px; flex-shrink: 0; }
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative;
  padding: 9px 4px 8px; border: none; background: none; color: var(--muted);
  font-size: .76rem; font-weight: 600; border-bottom: 3px solid transparent;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--gold); }
.tab-badge {
  position: absolute; top: 4px; right: calc(50% - 22px); min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--red); color: #fff; font-size: .66rem; line-height: 17px; text-align: center;
}
.tab-panel { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-sm); }
.card h2 {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
  margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.card-head { display: flex; justify-content: space-between; align-items: baseline; }
.card-head h2 { margin-bottom: 4px; }

/* Search */
.segmented { display: flex; background: var(--bg); border-radius: 8px; padding: 3px; margin-bottom: 10px; }
.seg { flex: 1; border: none; background: none; padding: 6px 4px; border-radius: 6px; font-size: .84rem; font-weight: 600; color: var(--muted); }
.seg.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.search-row { display: flex; gap: 6px; }
.search-row input { flex: 1; min-width: 0; }
#locate-btn { margin-top: 2px; }

#search-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
#search-results:empty { display: none; }
.result-item {
  font-size: .85rem; line-height: 1.45; padding: 8px 10px; border-radius: 8px;
  background: var(--bg); border-left: 3px solid var(--blue-accent);
}
.result-item.not-found { border-left-color: var(--orange); color: var(--muted); }
.result-item strong { color: var(--ink); }
.result-item em { color: var(--muted); font-style: normal; font-size: .8rem; }
.school-result { cursor: pointer; transition: background .15s; }
.school-result:hover { background: var(--hover); }

.assigned-head { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-top: 4px; }
.assigned-item { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.assigned-item .lvl {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: .78rem;
}
.lvl.Elementary { background: var(--c-elem); } .lvl.Middle { background: var(--c-mid); }
.lvl.High { background: var(--c-high); } .lvl.Other { background: var(--c-other); }

#radius-control { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
#radius-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: .86rem; }
#radius-slider { width: 100%; margin-bottom: 8px; accent-color: var(--navy); }
#radius-results { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }

/* Layers */
.layer-list { display: flex; flex-direction: column; }
.layer-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--bg);
  font-size: .9rem; cursor: pointer;
}
.layer-row:last-child { border-bottom: none; }
.layer-row input { width: 17px; height: 17px; accent-color: var(--navy); }
.layer-row .layer-name { flex: 1; }
.layer-row .layer-note { font-size: .74rem; color: var(--muted); }
.basemap-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.basemap-opt {
  border: 2px solid var(--border); border-radius: 8px; padding: 0; overflow: hidden; background: var(--surface);
  font-size: .76rem; font-weight: 600; color: var(--muted);
}
.basemap-opt .thumb { height: 46px; }
.basemap-opt span { display: block; padding: 4px; }
.basemap-opt.active { border-color: var(--ink); color: var(--ink); }
.thumb-light { background: linear-gradient(135deg,#f2f2ef 40%,#dfe6ec 40% 55%,#f2f2ef 55%); }
.thumb-street { background: linear-gradient(135deg,#f1ede4 35%,#f8d68e 35% 42%,#e5e0d4 42% 70%,#aad3df 70%); }
.thumb-sat { background: linear-gradient(135deg,#2f4a2a 30%,#4f6b3a 30% 60%,#1f3b52 60%); }
.thumb-usgs { background: linear-gradient(135deg,#3d5530 28%,#6b7c4a 28% 52%,#e7e3d6 52% 56%,#5a6e3e 56% 78%,#29465c 78%); }
.thumb-terrain { background: radial-gradient(circle at 30% 35%,#c9b98f 0 14%,transparent 15%), radial-gradient(circle at 30% 35%,#d8cfae 0 26%,transparent 27%),
  linear-gradient(135deg,#e9ecd9 45%,#cfdcb8 45% 70%,#b7d3e3 70%); }

#choropleth-legend { font-size: .82rem; margin-top: 10px; }
.choropleth-title { font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.choropleth-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.choropleth-swatch { width: 22px; height: 13px; border-radius: 2px; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }

/* Filters */
.filter-count { font-size: .86rem; color: var(--muted); margin-bottom: 12px; }
.filter-count b { color: var(--ink); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.field-grid .span-2 { grid-column: span 2; }

/* Insights */
.stat-group { margin-bottom: 16px; }
.stat-group:last-child { margin-bottom: 0; }
.stat-group-title { font-size: .8rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.db-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: .82rem; }
.db-label { width: 96px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-bar-wrap { flex: 1; background: var(--bg); border-radius: 4px; height: 9px; overflow: hidden; }
.db-bar { height: 100%; border-radius: 4px; transition: width .4s; }
.db-val { width: 70px; text-align: right; flex-shrink: 0; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

#sidebar-footer {
  flex-shrink: 0; padding: 10px 14px; font-size: .74rem; color: var(--muted); line-height: 1.5;
  border-top: 1px solid var(--border); background: var(--surface);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}

/* ---------- 4. Map ---------- */
#map-wrap { position: fixed; top: var(--appbar-h); right: 0; bottom: 0; left: var(--sidebar-w); transition: left .3s ease; }
#sidebar.collapsed ~ #map-wrap { left: 0; }
#map { position: absolute; inset: 0; background: #e6ebf0; }

#active-filters {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 500;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 70%;
  pointer-events: none;
}
.chip {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--navy); color: #fff; border: none; border-radius: 999px;
  padding: 5px 8px 5px 12px; font-size: .78rem; font-weight: 600; box-shadow: var(--shadow);
}
.chip span.x { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: .8rem; }
.chip:hover span.x { background: rgba(255,255,255,.35); }
.chip.clear { background: var(--surface); color: var(--ink); }

/* Leaflet control polish */
.leaflet-bar, .leaflet-control-layers { border: none !important; box-shadow: var(--shadow) !important; border-radius: 8px !important; }
.leaflet-bar a { color: var(--ink); }
.leaflet-control-scale-line { border-color: #333; color: #222; background: #fff; font-size: 11px; }
.leaflet-container { font-family: var(--font); }

.map-legend {
  background: var(--surface); border-radius: 10px; box-shadow: var(--shadow);
  font-size: .8rem; min-width: 170px; max-width: 240px; overflow: hidden;
}
.map-legend-head {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 8px 12px; border: none; background: none; font-weight: 700; color: var(--ink); font-size: .8rem;
}
.map-legend-body { padding: 0 12px 10px; max-height: 45vh; overflow-y: auto; }
.map-legend.closed .map-legend-body { display: none; }
.map-legend.closed .chev { transform: rotate(180deg); }

/* Legend items — shared by map legend and print sheet */
.lg-group { margin-top: 6px; }
.lg-group:first-child { margin-top: 0; }
.lg-title { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.lg-item { display: flex; align-items: center; gap: 8px; margin: 3px 0; line-height: 1.25; }
.lg-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); flex-shrink: 0; }
.lg-sq  { border-radius: 3px; }
.lg-poly { width: 20px; height: 13px; border-radius: 2px; flex-shrink: 0; border: 2px solid; }
.lg-line { width: 20px; height: 0; border-top: 2.5px dashed; flex-shrink: 0; }
.lg-cluster { width: 16px; height: 16px; border-radius: 50%; background: rgba(110,204,57,.75); box-shadow: 0 0 0 3px rgba(181,226,140,.6); flex-shrink: 0; }
.lg-pin { width: 12px; height: 12px; border-radius: 50%; background: #e74c3c; border: 2px solid #c0392b; flex-shrink: 0; }

/* Legacy legend classes still used by popups */
.legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #aaa; }
.legend-dot.elementary { background: var(--c-elem); } .legend-dot.middle { background: var(--c-mid); }
.legend-dot.high { background: var(--c-high); } .legend-dot.other { background: var(--c-other); border-radius: 3px; }

/* Toast */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); z-index: 30000;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: .88rem; font-weight: 600;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Modals */
.modal-overlay { position: fixed; inset: 0; z-index: 20000; background: rgba(12,24,40,.5); align-items: center; justify-content: center; padding: 16px; }
.modal-box { position: relative; background: var(--surface); border-radius: 12px; padding: 24px 26px; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-box h2 { font-size: 1.15rem; color: var(--ink); margin-bottom: 14px; }
.modal-box h3 { font-size: .92rem; color: var(--ink); margin: 16px 0 6px; }
.modal-box p, .modal-box ul { font-size: .88rem; line-height: 1.6; }
.modal-box ul { padding-left: 18px; }
.modal-box a { color: var(--blue-accent); }
.modal-close { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--muted); }
.modal-close:hover { color: var(--text); }
.about-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.about-table th { background: var(--navy); color: #fff; padding: 7px 8px; text-align: left; font-weight: 600; }
.about-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.shortcuts-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.shortcuts-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.shortcuts-table td:first-child { width: 64px; }
kbd { display: inline-block; min-width: 26px; text-align: center; padding: 2px 7px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--bg); font-family: inherit; font-size: .82rem; }
.shortcuts-note { font-size: .8rem; color: var(--muted); margin-top: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #stats-banner { display: none; }
}
@media (max-width: 860px) {
  .btn-label { display: none; }
  .appbar-actions .btn { padding: 8px 10px; }
  .brand-sub { display: none; }
}
@media (max-width: 767px) {
  :root { --sidebar-w: 100vw; }
  #sidebar {
    top: auto; height: 52vh; width: 100%; border-right: none; border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0; box-shadow: 0 -6px 20px rgba(0,0,0,.15);
  }
  #sidebar.collapsed { transform: translateY(calc(100% - 52px)); }
  #map-wrap { left: 0; bottom: 52vh; }
  #sidebar.collapsed ~ #map-wrap { bottom: 52px; }
  .brand h1 { font-size: .92rem; }
  #shortcuts-btn { display: none; }
  #active-filters { max-width: 92%; }
  .field-grid { grid-template-columns: 1fr; }
  .field-grid .span-2 { grid-column: auto; }
}
@media (max-width: 420px) {
  .brand > div { display: none; }
}

/* ==========================================================================
   5. Components (popups, scorecard, comparison, bookmarks) — kept from v1
   ========================================================================== */
/* ---------- Popup tags ---------- */
.popup-tags { margin-bottom: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.tag {
  font-size: 0.72rem; padding: 2px 7px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
}
.tag-charter { background: #fef9e7; border-color: #f39c12; color: #7d6608; }
.tag-virtual { background: #eaf4fb; border-color: #2980b9; color: #1a5276; }

/* ---------- Demographics bar ---------- */
.demo-bar {
  display: flex; height: 10px; border-radius: 4px; overflow: hidden;
  margin: 8px 0 4px; border: 1px solid var(--border);
}
.demo-seg { height: 100%; }
.demo-labels { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.72rem; margin-bottom: 6px; }
.demo-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; }

/* ---------- Popup footer ---------- */
.popup-footer { margin-top: 8px; font-size: 0.78rem; }
.popup-footer a { color: var(--blue-accent); text-decoration: none; }
.popup-footer a:hover { text-decoration: underline; }

/* ---------- Radius control ---------- */
#radius-control {
  background: #fff8f0; border: 1px solid #f39c12; border-radius: 8px;
  padding: 10px 12px; margin-top: 8px;
}
#radius-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 0.85rem; }
#radius-clear {
  background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--muted); padding: 0 4px;
}
#radius-slider { width: 100%; margin-bottom: 8px; cursor: pointer; }
#radius-results { font-size: 0.83rem; max-height: 180px; overflow-y: auto; }

/* ---------- Stats dashboard ---------- */
.collapsible-header { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; }
.collapse-icon { font-size: 0.8rem; color: var(--muted); }
#stats-body { padding-top: 6px; }
.stat-group { margin-bottom: 12px; }
.stat-group-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); margin-bottom: 6px; }
.db-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 0.8rem; }
.db-label { width: 90px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.db-bar-wrap { flex: 1; background: var(--track); border-radius: 3px; height: 8px; overflow: hidden; }
.db-bar { height: 100%; border-radius: 3px; transition: width 0.4s; }
.db-val { width: 60px; text-align: right; flex-shrink: 0; color: var(--muted); font-size: 0.78rem; }

/* ---------- Comparison panel ---------- */
#compare-section h2 { display: flex; align-items: center; justify-content: space-between; }
#compare-clear {
  background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--muted);
  padding: 0; line-height: 1;
}
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.compare-table th {
  background: var(--blue-dark); color: white; padding: 5px 6px;
  font-size: 0.78rem; font-weight: 600; position: relative;
}
.compare-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.compare-table tr:hover td { background: var(--surface-2); }
.compare-field { font-weight: 600; color: var(--ink); white-space: nowrap; }
.compare-remove {
  background: none; border: none; color: #ddd; cursor: pointer; font-size: 0.8rem;
  position: absolute; top: 4px; right: 4px; padding: 0;
}
.compare-remove:hover { color: white; }
.compare-add-btn {
  background: var(--blue-accent); color: white; border: none; border-radius: 4px;
  padding: 4px 10px; font-size: 0.78rem; cursor: pointer; margin-left: 8px;
}
.compare-add-btn:hover { background: var(--blue-dark); }

/* ---------- Popup: title row + need badge + action buttons ---------- */
.popup-title-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  margin-bottom: 6px; padding-bottom: 6px; border-bottom: 2px solid var(--blue-accent);
}
.popup-title-row h3 { margin-bottom: 0; padding-bottom: 0; border-bottom: none; flex: 1; }
.popup-need-badge {
  flex-shrink: 0; border: 2px solid; border-radius: 6px;
  padding: 2px 6px; font-size: 0.78rem; font-weight: 700; text-align: center; line-height: 1.2;
}
.need-lbl { font-size: 0.6rem; font-weight: 400; display: block; opacity: 0.85; }
.popup-action-btns { display: flex; gap: 5px; align-items: center; }
.popup-bk-btn {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 7px; font-size: 0.85rem; cursor: pointer; color: var(--muted); transition: all 0.15s;
}
.popup-bk-btn:hover, .popup-bk-btn.bk-active { color: #f39c12; border-color: #f39c12; }
.scorecard-btn {
  background: var(--blue-dark); color: white; border: none; border-radius: 4px;
  padding: 4px 9px; font-size: 0.78rem; cursor: pointer;
}
.scorecard-btn:hover { background: #0d1f33; }

/* ---------- Saved Schools section ---------- */
#bookmarks-section h2 { font-size: 0.88rem; }
.bk-badge {
  background: var(--blue-accent); color: white; border-radius: 10px;
  padding: 1px 7px; font-size: 0.72rem; font-weight: 700; margin-left: 6px; vertical-align: middle;
}
.bk-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 8px; border-radius: 6px; margin-bottom: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.bk-item:hover { background: var(--hover); }
.bk-info { flex: 1; min-width: 0; }
.bk-name { font-size: 0.82rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-sub  { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-btns { display: flex; gap: 4px; margin-left: 8px; }
.bk-fly, .bk-del {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 6px; font-size: 0.78rem; cursor: pointer; color: var(--muted);
}
.bk-fly:hover { background: var(--blue-accent); color: white; border-color: var(--blue-accent); }
.bk-del:hover { background: #e74c3c; color: white; border-color: #e74c3c; }
.bk-empty { font-size: 0.8rem; color: var(--muted); padding: 4px 0; }

/* ---------- Stats: need index row ---------- */
.need-row { align-items: center; }
.need-pill {
  color: white; border-radius: 10px; padding: 1px 7px;
  font-size: 0.72rem; font-weight: 700; margin: 0 6px; flex-shrink: 0;
}
.stat-group-note { font-size: 0.68rem; color: var(--muted); font-weight: 400; }

/* ---------- High-need dot in legend ---------- */
.legend-dot.highneed { background: #c0392b; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 1px #aaa; }


/* ---------- Popups ---------- */
.popup-school h3,
.popup-district h3 {
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--blue-accent);
}
.popup-school table,
.popup-district table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.popup-school td,
.popup-district td {
  padding: 3px 6px 3px 0;
  vertical-align: top;
}
.popup-school td:first-child,
.popup-district td:first-child {
  white-space: nowrap;
  color: var(--muted);
  padding-right: 10px;
}
.leaflet-popup-content { min-width: 220px; }

/* ---------- Layer loading spinner ---------- */
.layer-loading::after {
  content: ' ⟳';
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 16px;
}
.modal-box {
  background: var(--surface); border-radius: 10px; padding: 24px 28px;
  max-width: 520px; width: 100%; max-height: 80vh; overflow-y: auto;
  position: relative; box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.modal-box h2 { font-size: 1.1rem; color: var(--ink); margin-bottom: 14px; }
.modal-box h3 { font-size: 0.9rem; color: var(--ink); margin: 14px 0 6px; }
.modal-box p, .modal-box ul { font-size: 0.85rem; line-height: 1.6; color: var(--text); }
.modal-box ul { padding-left: 18px; }
.modal-box a { color: var(--blue-accent); }
.modal-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 1.4rem; cursor: pointer; color: var(--muted); line-height: 1;
}
.modal-close:hover { color: var(--text); }

.about-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 4px; }
.about-table th { background: var(--blue-dark); color: white; padding: 6px 8px; text-align: left; }
.about-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
.about-table tr:last-child td { border-bottom: none; }

.shortcuts-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.shortcuts-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.shortcuts-table td:first-child { width: 60px; }
kbd {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 7px; font-family: monospace; font-size: 0.85rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.shortcuts-note { font-size: 0.78rem; color: var(--muted); margin-top: 10px; }

/* ---------- School Scorecard Modal ---------- */
.scorecard-box {
  max-width: 680px !important; padding: 0 !important; overflow: hidden !important;
  display: flex; flex-direction: column; max-height: 90vh;
}
.scorecard-box > .modal-close { z-index: 2; top: 10px; right: 12px; }
#scorecard-content { overflow-y: auto; padding: 24px 28px; flex: 1; }

.sc-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--border);
}
.sc-name { font-size: 1.15rem; color: var(--ink); margin-bottom: 4px; }
.sc-subtitle { font-size: 0.82rem; color: var(--muted); margin-bottom: 6px; }
.sc-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.sc-need-badge {
  flex-shrink: 0; border: 3px solid; border-radius: 10px;
  padding: 8px 14px; text-align: center; min-width: 72px;
}
.sc-need-num  { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.sc-need-lbl  { font-size: 0.65rem; font-weight: 600; opacity: 0.8; text-transform: uppercase; }
.sc-need-rank { font-size: 0.68rem; color: var(--muted); margin-top: 2px; }

.sc-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px;
}
.sc-metric {
  background: var(--surface-2); border-radius: 8px; padding: 10px 12px; text-align: center;
}
.sc-metric-val { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.sc-metric-key { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.sc-metric-cmp { font-size: 0.68rem; color: var(--muted); margin-top: 3px; }

.sc-section { margin-bottom: 18px; }
.sc-section h4 {
  font-size: 0.82rem; color: var(--ink); font-weight: 700;
  margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.sc-cmp-table {
  width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.sc-cmp-table th {
  background: var(--surface-2); padding: 5px 8px; text-align: left; font-weight: 600;
  font-size: 0.75rem; color: var(--muted);
}
.sc-cmp-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
.sc-diff { font-size: 0.72rem; margin-left: 4px; }
.sc-up   { color: #e74c3c; }
.sc-dn   { color: #27ae60; }
.sc-na   { font-size: 0.8rem; color: var(--muted); }
.sc-details table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.sc-details td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.sc-details td:first-child { color: var(--muted); white-space: nowrap; padding-right: 12px; width: 110px; }
.sc-demo { margin-top: 6px; }

.sc-footer {
  display: flex; gap: 8px; padding: 14px 28px; border-top: 1px solid var(--border);
  background: var(--surface-2); flex-wrap: wrap;
}
.sc-btn {
  padding: 7px 14px; border-radius: 6px; font-size: 0.82rem; cursor: pointer;
  border: none; font-weight: 600; transition: opacity 0.15s;
}
.sc-btn:hover { opacity: 0.85; }
.sc-btn-outline { background: none; border: 1px solid var(--blue-accent); color: var(--blue-accent); text-decoration: none; display: flex; align-items: center; }
.sc-btn-save    { background: var(--surface-2); color: var(--muted); }
.sc-btn-saved   { background: #fff8e1; color: #f39c12; border: 1px solid #f39c12; }
.sc-btn-compare { background: var(--blue-accent); color: white; }
.sc-btn-share   { background: var(--green); color: white; }

@media (max-width: 600px) {
  .sc-metrics { grid-template-columns: repeat(2, 1fr); }
  .sc-header { flex-direction: column; }
}

/* Component overrides for the new shell */
.bk-badge { background: var(--navy); color: #fff; border-radius: 9px; padding: 0 7px; font-size: .7rem; }
.bk-item { border-radius: 8px; }
#compare-section h2 { display: flex; }

/* ==========================================================================
   6. Print composer (screen)
   ========================================================================== */
#composer {
  position: fixed; inset: 0; z-index: 15000; display: grid; grid-template-columns: 320px 1fr;
  background: #4B5563;
}
.composer-panel {
  background: var(--surface); display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--border);
}
.composer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 0 18px; }
.composer-head h2 { font-size: 1.1rem; color: var(--ink); }
.composer-panel > .hint { padding: 0 18px; }
.composer-scroll { flex: 1; overflow-y: auto; padding: 4px 18px 12px; }
.composer-panel fieldset { border: none; padding: 10px 0; border-top: 1px solid var(--border); }
.composer-panel legend { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 0 0 6px; }
.composer-panel fieldset > label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 9px; }
.composer-panel label.check { display: flex; align-items: center; gap: 8px; font-size: .88rem; padding: 4px 0; cursor: pointer; }
.composer-panel label.check input { width: 16px; height: 16px; accent-color: var(--navy); }
.composer-actions { padding: 12px 18px 14px; border-top: 1px solid var(--border); }
.composer-actions .hint { margin-bottom: 0; }

.composer-stage { overflow: auto; padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.sheet-wrap { flex-shrink: 0; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.35); background: #fff; }
.sheet { transform-origin: 0 0; }

/* ---------- The printed page ---------- */
.sheet {
  --page-w: 11in; --page-h: 8.5in;
  width: var(--page-w); height: var(--page-h); padding: .4in;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: #1D2733; font-size: 9pt; line-height: 1.35;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet-header {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16pt;
  border-bottom: 2.5pt solid #14324F; padding-bottom: 6pt; margin-bottom: 9pt;
}
.sheet-title { font-size: 19pt; font-weight: 700; color: #14324F; line-height: 1.15; }
.sheet-subtitle { font-size: 10.5pt; color: #4A5868; margin-top: 2pt; }
.sheet-subtitle:empty { display: none; }
.sheet-meta { text-align: right; font-size: 8.5pt; color: #4A5868; white-space: nowrap; }
.sheet-org { font-weight: 700; color: #14324F; font-size: 9pt; }
.sheet-org::before { content: ""; display: inline-block; width: 7pt; height: 7pt; background: #F2B33D; border-radius: 1.5pt; margin-right: 5pt; vertical-align: 0; }

.sheet-body { flex: 1; min-height: 0; display: flex; gap: .16in; }
.sheet-map-frame { flex: 1; min-width: 0; min-height: 0; position: relative; border: 1pt solid #14324F; overflow: hidden; }
#sheet-map-slot { position: absolute; inset: 0; }
#sheet-map-slot #map { position: absolute; inset: 0; }
.north-arrow {
  position: absolute; top: 8pt; right: 8pt; z-index: 700; width: .42in; height: auto;
  background: rgba(255,255,255,.88); border-radius: 4pt; padding: 3pt 4pt; stroke: none;
}

.sheet-side { width: 2.4in; flex-shrink: 0; display: flex; flex-direction: column; gap: 7pt; min-height: 0; overflow: hidden; }
.sheet-side:empty, .sheet-side.empty { display: none; }
.sheet-side section { border: .75pt solid #CFD7E0; border-radius: 3pt; padding: 6pt 8pt; flex-shrink: 0; }
.sheet-side h3 {
  font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .5pt; color: #14324F;
  margin-bottom: 4pt; padding-bottom: 3pt; border-bottom: .5pt solid #E3E8EE;
}
#sheet-legend { font-size: 7.6pt; }
#sheet-legend .lg-item { margin: 1.2pt 0; gap: 6pt; }
#sheet-legend .lg-group { margin-top: 3.5pt; }
#sheet-legend .lg-dot { width: 9pt; height: 9pt; border-width: 1.5px; }
#sheet-legend .lg-poly { width: 15pt; height: 9pt; }
/* Legend, summary and locator keep their size; the notes box absorbs any shortage. */
#sheet-legend-box { flex-shrink: 0; }
#sheet-legend .lg-title { font-size: 6.8pt; }
#sheet-locator { height: 1.25in; background: #F6F8FA; }
#sheet-locator .leaflet-container, #sheet-locator.leaflet-container { background: #F6F8FA; }
.sheet-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 5pt; }
#sheet-notes-box {
  flex-shrink: 0; max-height: .9in; overflow: hidden; font-size: 8.3pt; line-height: 1.4;
  padding: 4pt 8pt; border-left: 2.5pt solid #F2B33D; background: #FBF7EC;
}
#sheet-notes-box b { color: #14324F; }
#sheet-notes { white-space: pre-wrap; }

.sum-grid { display: grid; grid-template-columns: 1fr auto; gap: 1.5pt 8pt; font-size: 8.3pt; }
.sum-grid dt { color: #4A5868; }
.sum-grid dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sum-filters { margin-top: 4pt; font-size: 7.6pt; color: #4A5868; }
.sum-levels { margin-top: 3pt; font-size: 7.8pt; }
.sum-levels span { white-space: nowrap; }

.sheet.portrait .sheet-body { flex-direction: column; }
.sheet.portrait .sheet-side { width: auto; flex-direction: row; align-items: stretch; height: auto; max-height: 3.1in; }
.sheet.portrait .sheet-side section { flex: 1 1 0; min-width: 0; overflow: hidden; }
.sheet.portrait #sheet-legend-box { flex: 2 1 0; }
.sheet.portrait #sheet-legend { column-count: 2; column-gap: 10pt; }
.sheet.portrait #sheet-locator { height: 1.45in; }
#sheet-legend .lg-group { break-inside: avoid; }

.sheet-footer {
  display: flex; justify-content: space-between; gap: 14pt; margin-top: 7pt; padding-top: 5pt;
  border-top: .75pt solid #CFD7E0; font-size: 6.8pt; color: #4A5868; line-height: 1.4;
}
.sheet-footer b { color: #1D2733; }
.sheet-footer-right { text-align: right; max-width: 3.2in; flex-shrink: 0; }
#sheet-author { font-weight: 600; color: #1D2733; font-size: 7.5pt; }
#sheet-link { word-break: break-all; }

/* Leaflet inside the page: hide interactive chrome, keep scale + attribution */
#sheet .leaflet-control-zoom, #sheet .map-legend { display: none; }
#sheet .leaflet-control-attribution { font-size: 6.5pt; }
#sheet .leaflet-control-scale { margin-left: 8pt; margin-bottom: 8pt; }
.sheet.no-north .north-arrow, .sheet.no-north .leaflet-control-scale { display: none; }
#composer.composing-zoom #sheet .leaflet-control-zoom { display: block; }

/* School list page */
.sheet.sheet-table { height: auto; min-height: var(--page-h); overflow: visible; display: block; }
.school-table { width: 100%; border-collapse: collapse; font-size: 7.6pt; }
.school-table th {
  background: #14324F; color: #fff; text-align: left; font-weight: 600; padding: 3.5pt 5pt;
}
.school-table td { padding: 2.6pt 5pt; border-bottom: .5pt solid #E3E8EE; vertical-align: top; }
.school-table tr:nth-child(even) td { background: #F6F8FA; }
.school-table td.num, .school-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.school-table tr { break-inside: avoid; }
.school-table-note { font-size: 7.5pt; color: #4A5868; margin: 6pt 0; }
.school-table .lvl-dot { display: inline-block; width: 6pt; height: 6pt; border-radius: 50%; margin-right: 3pt; }

@media (max-width: 860px) {
  #composer { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .composer-panel { max-height: 45vh; }
}

/* ==========================================================================
   7. @media print — only the composed sheet(s) print
   ========================================================================== */
@media print {
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  /* Paper is white in dark mode too (a dark color-scheme paints page margins dark in Chromium). */
  :root, :root[data-theme="dark"] { color-scheme: light !important; }
  body > *:not(#composer) { display: none !important; }
  #composer { position: static !important; display: block !important; background: none !important; }
  .composer-panel { display: none !important; }
  .composer-stage { display: block !important; padding: 0 !important; overflow: visible !important; }
  .sheet-wrap { width: auto !important; height: auto !important; box-shadow: none !important; margin: 0 !important; }
  .sheet { transform: none !important; }
  .sheet:not(.sheet-table) { height: calc(var(--page-h) - .02in); }
  #sheet2-wrap { break-before: page; }
  .school-table thead { display: table-header-group; }
  .leaflet-control-zoom, .map-legend { display: none !important; }
  .leaflet-tile, .leaflet-marker-icon, .marker-cluster, .marker-cluster div,
  .lg-dot, .lg-poly, .lg-cluster, .lg-pin, .choropleth-swatch, .school-table th, .lvl-dot {
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
  #composer.composing-zoom #sheet .leaflet-control-zoom { display: none !important; }
}

/* ==========================================================================
   8. v3 additions — accessibility, academics, list view, search results
   ========================================================================== */
.skip-link {
  position: fixed; left: 8px; top: -60px; z-index: 40000; background: var(--gold); color: var(--ink);
  padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* Five tabs fit the panel */
.tab { font-size: .72rem; padding: 9px 2px 8px; }

/* Academics bars (popup + profile) */
.acad { margin: 10px 0 6px; display: flex; flex-direction: column; gap: 7px; }
.acad-title { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted);
  display: flex; justify-content: space-between; align-items: baseline; }
.acad-year, .acad-yr { font-size: .7rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.acad-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.acad-head { display: contents; }
.acad-label { font-size: .8rem; }
.acad-val { font-size: .86rem; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.acad-bar { grid-column: 1 / -1; position: relative; height: 8px; background: var(--track); border-radius: 4px; }
.acad-fill { position: absolute; inset: 0 auto 0 0; background: var(--blue-accent); border-radius: 4px; }
.acad-state { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--navy); border-radius: 1px; }
.acad-cmp { grid-column: 1 / -1; font-size: .72rem; font-weight: 600; }
.acad-cmp.up { color: #1E7A46; } .acad-cmp.down { color: #B03A2E; } .acad-cmp.same { color: var(--muted); }
.acad.compact .acad-cmp { display: none; }
.acad.compact .acad-label::after { content: ""; }
.acad-table { margin-top: 10px; }
.acad-help { margin-top: 8px; font-size: .8rem; color: var(--muted); }
.acad-help summary { cursor: pointer; font-weight: 600; color: var(--blue-accent); }
.acad-help p { margin-top: 6px; line-height: 1.5; }

.popup-distance { font-size: .78rem; font-weight: 700; color: var(--ink); margin: 2px 0 6px; }
.popup-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: .8rem; }
.popup-links a { color: var(--blue-accent); font-weight: 600; text-decoration: none; }
.popup-links a:hover { text-decoration: underline; }
.popup-district a, .popup-school td a { color: var(--blue-accent); }

/* Find results */
.assigned-item { align-items: center; }
.assigned-text { flex: 1; min-width: 0; }
.assigned-dir {
  flex-shrink: 0; font-size: .74rem; font-weight: 700; color: var(--blue-accent); text-decoration: none;
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; background: var(--surface);
}
.assigned-dir:hover { border-color: var(--blue-accent); }
.confirm-link {
  display: block; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: #FFF7E6;
  border: 1px solid #F2D49B; color: #7A4F00; font-size: .82rem; font-weight: 600; text-decoration: none;
}
.confirm-link:hover { text-decoration: underline; }
.result-item a { color: var(--blue-accent); font-weight: 600; }
.school-result:focus-visible { outline: 3px solid var(--focus); }

/* List view */
.list-card { display: flex; flex-direction: column; min-height: 0; }
#panel-list > .card { flex-shrink: 0; }   /* two cards (schools, special education): neither is squeezed */
.list-count { font-size: .8rem; font-weight: 700; color: var(--ink); }
.list-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.list-controls label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.list-controls label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--text); font-size: .84rem; }
.list-controls input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--navy); }
.school-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sl-item {
  width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; transition: border-color .15s, background .15s;
}
.sl-item:hover { border-color: var(--blue-accent); background: var(--hover); }
.sl-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.15); }
.sl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-name { font-weight: 700; color: var(--ink); font-size: .88rem; }
.sl-sub { font-size: .76rem; color: var(--muted); }
.sl-stats { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .76rem; color: var(--text); margin-top: 2px; }
.sl-stats b { font-variant-numeric: tabular-nums; }

/* Language button keeps its label on small screens (it is the point of it) */
@media (max-width: 860px) { #lang-btn .btn-label { display: inline; } }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   9. v4 — compare, welcome, phone layout, growth, errors
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Compare tray */
.compare-tray {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 650;
  display: flex; align-items: center; gap: 10px; max-width: min(860px, calc(100% - 300px));
  background: var(--surface); border-radius: 12px; box-shadow: 0 8px 28px rgba(16,32,52,.22); padding: 8px 8px 8px 12px;
}
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.ct-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 4px 3px 10px; font-size: .8rem; font-weight: 600; color: var(--ink); max-width: 210px; }
.ct-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-x { border: none; background: none; width: 20px; height: 20px; border-radius: 50%; color: var(--muted); font-size: 1rem; line-height: 1; }
.ct-x:hover { background: var(--hover); color: var(--text); }
.ct-slot { font-size: .76rem; color: var(--muted); padding: 0 4px; }
.ct-open { flex-shrink: 0; }
.ct-open:disabled { opacity: .55; cursor: default; }

/* Compare dialog */
.compare-box { max-width: 1100px; width: 100%; padding: 22px 24px; }
.cd-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-right: 28px; }
.cd-head h2 { margin: 0; }
.cd-scroll { overflow-x: auto; margin-top: 8px; }
.cd-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 560px; }
.cd-table th, .cd-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.cd-table thead th, .cd-table tr:first-child th { vertical-align: bottom; }
.cd-table th[scope=row] { font-weight: 600; color: var(--muted); width: 200px; }
.cd-school { font-weight: 700; color: var(--ink); font-size: .95rem; }
.cd-actions { display: flex; gap: 8px; margin-top: 2px; }
.cd-actions .link-btn { padding: 0; font-size: .76rem; }
.cd-group th { background: var(--bg); color: var(--ink); font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; }
.cd-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.cd-bar { display: block; height: 6px; background: var(--track); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.cd-bar span { display: block; height: 100%; background: var(--blue-accent); border-radius: 3px; }
.cd-best { background: #EAF6EF; }
.cd-best .cd-val::after { content: " ★"; color: #1E7A46; font-size: .8em; }
.cd-best .cd-bar span { background: #1E7A46; }
.cd-state { color: var(--muted); font-size: .8rem; width: 70px; }
.cd-na { color: var(--muted); }

/* Welcome card */
.welcome {
  position: absolute; z-index: 700; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 32px)); background: var(--surface); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(16,32,52,.28); padding: 26px 26px 18px;
}
.welcome h2 { font-size: 1.35rem; color: var(--ink); line-height: 1.25; padding-right: 30px; }
.welcome-sub { color: var(--muted); font-size: .92rem; margin: 6px 0 16px; }
.welcome-close { position: absolute; top: 12px; right: 12px; color: var(--muted); }
.welcome-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.welcome-act {
  display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, background .15s, transform .15s;
}
.welcome-act:hover { border-color: var(--ink); background: var(--hover); transform: translateY(-1px); }
.welcome-act b { display: block; color: var(--ink); font-size: .92rem; }
.welcome-act small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.wa-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: #FFF3D6; color: var(--ink); }
.wa-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.welcome-lang { margin-top: 12px; }

/* Growth gauge */
.growth { margin: 10px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.growth-item { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px; align-items: center; font-size: .8rem; }
.growth-gauge { position: relative; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #F6D3CF 0 40%, #E8EDF2 40% 60%, #CFEBDA 60% 100%); }
.growth-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--navy); opacity: .5; }
.growth-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--navy); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.growth-val { white-space: nowrap; font-variant-numeric: tabular-nums; }
.growth-word { color: var(--muted); font-size: .74rem; }

.tag-program { background: #EEF4FF; border-color: #9DB7E8; color: #1F3F7A; }

/* Data load error */
.load-error {
  position: fixed; top: calc(var(--appbar-h) + 10px); left: 50%; transform: translateX(-50%); z-index: 25000;
  background: #FDECEA; color: #7A1F15; border: 1px solid #F1B5AD; border-radius: 10px; padding: 10px 14px;
  font-size: .88rem; box-shadow: var(--shadow); max-width: calc(100% - 32px);
}

/* Phone layout: draggable sheet + school card */
.sheet-handle { display: none; }
.mobile-card { display: none; }
@media (max-width: 767px) {
  .sheet-handle { display: grid; place-items: center; height: 22px; border: none; background: var(--surface);
    border-radius: 14px 14px 0 0; flex-shrink: 0; cursor: grab; touch-action: none; }
  .sheet-handle span { width: 42px; height: 5px; border-radius: 3px; background: #C4CDD8; }
  #sidebar { transition: transform .3s ease, height .3s ease; }
  #sidebar[data-sheet="full"] { height: calc(100vh - var(--appbar-h) - 8px); }
  #sidebar.collapsed { transform: translateY(calc(100% - 74px)); }
  #sidebar.collapsed ~ #map-wrap { bottom: 74px; }
  .mobile-card:not([hidden]) {
    display: block; position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 800; max-height: 72%;
    overflow-y: auto; background: var(--surface); border-radius: 14px; box-shadow: 0 -4px 24px rgba(16,32,52,.25); padding: 14px 14px 10px;
  }
  .mobile-card-close { position: sticky; float: right; top: 0; background: var(--surface); }
  /* While a school card is open, the bottom map controls would cover it */
  .card-open .leaflet-bottom, .card-open .compare-tray { display: none; }
  .mobile-card .popup-title-row h3 { font-size: 1.05rem; padding-right: 8px; }
  .welcome { top: 12px; transform: translateX(-50%); max-height: calc(100% - 24px); overflow-y: auto; padding: 18px 16px 12px; }
  .welcome h2 { font-size: 1.12rem; }
  .welcome-actions { grid-template-columns: 1fr; }
  .compare-tray { max-width: calc(100% - 16px); bottom: 8px; padding: 6px 6px 6px 8px; }
  .ct-slot { display: none; }
  .compare-box { padding: 16px 12px; }
  .cd-table th[scope=row] { width: 120px; }
}

/* ==========================================================================
   10. v5 — modern refresh, dark mode, color-blind-safe symbols
   Tokens first; every component below reads them, so dark mode is just a
   different set of token values ([data-theme] is set in <head> before paint).
   ========================================================================== */
:root {
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --appbar-h: 60px;
  --sidebar-w: 392px;
  --radius: 14px;

  --bg:        #EEF2F6;
  --surface:   #FFFFFF;
  --surface-2: #F5F7FA;
  --hover:     #EEF4FB;
  --track:     #E4E9EF;
  --text:      #1B2633;
  --muted:     #5A6878;
  --border:    #DFE5EC;
  --ink:       #12304D;      /* headings & key numbers */
  --map-bg:    #E8ECF0;
  --glass:     rgba(255,255,255,.86);

  --good: #17784A;  --good-bg: #E6F4EC;
  --bad:  #B03A2E;
  --warn-bg: #FFF6E5; --warn-border: #F0CF8E; --warn-text: #7A4F00;
  --info-bg: #EEF4FF; --info-border: #A9C1EC; --info-text: #1F3F7A;

  /* Okabe–Ito: distinct for all common kinds of color-blindness */
  --c-elem: #0072B2; --c-mid: #009E73; --c-high: #E69F00; --c-other: #CC79A7; --c-need: #D55E00;

  --shadow-sm: 0 1px 2px rgba(16,32,52,.05), 0 1px 3px rgba(16,32,52,.06);
  --shadow:    0 8px 24px rgba(16,32,52,.12);
  --shadow-lg: 0 24px 64px rgba(16,32,52,.26);
  --appbar-bg: linear-gradient(110deg, #0E2A45 0%, #14324F 45%, #1F527F 100%);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --navy: #1C3D60; --navy-2: #24507D; --blue-dark: #1C3D60;
  --blue-accent: #6CB0F0;

  --bg:        #0B1520;
  --surface:   #121F2D;
  --surface-2: #172736;
  --hover:     #1B2F43;
  --track:     #24384C;
  --text:      #E3EAF2;
  --muted:     #9AAABB;
  --border:    #24374A;
  --ink:       #EAF2FA;
  --map-bg:    #0E1822;
  --glass:     rgba(18,31,45,.86);

  --good: #5FD08F;  --good-bg: rgba(46,160,96,.17);
  --bad:  #FF8A7A;
  --warn-bg: rgba(242,179,61,.10); --warn-border: rgba(242,179,61,.38); --warn-text: #F5C76B;
  --info-bg: rgba(108,176,240,.12); --info-border: rgba(108,176,240,.38); --info-text: #A9D0F5;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.6);
  --appbar-bg: linear-gradient(110deg, #08121D 0%, #0D1D2E 50%, #143150 100%);
  color-scheme: dark;
}
html, body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }

/* ---- App bar ---- */
#appbar { background: var(--appbar-bg); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 20px rgba(8,20,34,.18); padding: 0 16px 0 10px; gap: 16px; }
.brand h1 { font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; }
.brand-sub { font-size: .74rem; opacity: .7; }
.brand-mark { width: 34px; height: 34px; filter: drop-shadow(0 2px 6px rgba(242,179,61,.35)); }
#stats-banner span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); padding: 5px 12px; }
.appbar-actions { gap: 8px; }
.btn-ghost { border-color: rgba(255,255,255,.22); }
#theme-btn .i-sun { display: none; }
[data-theme="dark"] #theme-btn .i-sun { display: block; }
[data-theme="dark"] #theme-btn .i-moon { display: none; }
#appbar .icon-btn:hover { background: rgba(255,255,255,.12); }

/* ---- Buttons & fields ---- */
.btn { border-radius: 10px; padding: 9px 16px; }
.btn-primary { background: linear-gradient(180deg, var(--navy-2), var(--navy)); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-accent, .skip-link { color: #14324F; }
.btn-accent { box-shadow: 0 2px 8px rgba(242,179,61,.3); }
.btn-outline { color: var(--ink); }
.btn-outline:hover:not(:disabled) { border-color: var(--blue-accent); background: var(--hover); }
input[type="text"], input[type="search"], select, textarea {
  padding: 10px 12px; border-radius: 10px; background: var(--surface); color: var(--text); border-color: var(--border);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue-accent); box-shadow: 0 0 0 4px rgba(36,104,168,.18); }
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { box-shadow: 0 0 0 4px rgba(108,176,240,.2); }
[data-theme="dark"] input[type=checkbox], [data-theme="dark"] input[type=range] { accent-color: var(--blue-accent); }
.link-btn { color: var(--blue-accent); }

/* ---- Side panel ---- */
#sidebar { background: var(--bg); border-right-color: var(--border); }
.tabs {
  margin: 14px 14px 2px; padding: 4px; gap: 2px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.tab { border-bottom: none; border-radius: 10px; padding: 8px 2px 7px; font-size: .74rem; transition: background .15s, color .15s; }
.tab:hover { color: var(--ink); background: var(--hover); }
.tab.active { background: var(--navy); color: #fff; border-bottom: none; box-shadow: 0 2px 8px rgba(20,50,79,.25); }
[data-theme="dark"] .tab.active { background: #24507D; }
.tab-badge { top: 2px; right: calc(50% - 24px); box-shadow: 0 0 0 2px var(--surface); }
.tab-panel { padding: 14px 14px 24px; gap: 14px; }

.card { border-radius: var(--radius); padding: 18px 18px 16px; border-color: var(--border); box-shadow: var(--shadow-sm); }
.card h2 {
  font-size: 1.02rem; font-weight: 700; text-transform: none; letter-spacing: -.01em; color: var(--ink); margin-bottom: 4px;
}
.card-head { align-items: center; }
.card-head h2 { margin-bottom: 4px; }
.card-desc { font-size: .84rem; line-height: 1.5; color: var(--muted); margin: 0 0 14px; }
.hint { font-size: .8rem; }

.segmented { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.seg { border-radius: 9px; padding: 7px 4px; }
.seg.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.search-row { gap: 8px; }
#locate-btn { margin-top: 4px; }
.result-item { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.result-item strong { color: var(--ink); }
.assigned-dir { background: var(--surface); }
.lvl.Middle, .lvl.High, .lvl.Other { color: #10202F; }
.confirm-link { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
#radius-control { background: var(--warn-bg); border-color: var(--warn-border); border-radius: 12px; padding: 12px 14px; }

/* Filters, grouped */
.field-group-title {
  display: flex; align-items: center; gap: 10px; margin: 20px 0 10px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
}
.field-group-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.filter-count { padding: 10px 12px; border-radius: 10px; background: var(--hover); color: var(--text); margin-bottom: 4px; }
.filter-count b { color: var(--ink); }
.field-grid { gap: 14px 12px; }
.field-grid label { color: var(--text); font-size: .8rem; gap: 5px; }
.field-help { font-size: .74rem; font-weight: 400; color: var(--muted); line-height: 1.4; }

/* Layers */
.layer-row { align-items: flex-start; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--border); }
.layer-row input { margin-top: 2px; }
.layer-row .lg-poly, .layer-row .lg-cluster { margin-top: 3px; }
.layer-row .lg-line { margin-top: 9px; }
.layer-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.layer-text .layer-name { font-weight: 600; color: var(--text); }
.layer-desc { font-size: .76rem; color: var(--muted); line-height: 1.4; }
.layer-note { white-space: nowrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; margin-top: 1px; }
.layer-note:empty { display: none; }
.basemap-list { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.basemap-opt { border-radius: 12px; border-color: var(--border); background: var(--surface); transition: border-color .15s, transform .15s; }
.basemap-opt:hover { transform: translateY(-1px); }
.basemap-opt.active { border-color: var(--blue-accent); color: var(--ink); }
.basemap-opt .thumb { height: 50px; }
.thumb-dark { background: linear-gradient(135deg,#25292e 40%,#3a4048 40% 55%,#25292e 55% 75%,#1b2a38 75%); }
.choropleth-title { color: var(--ink); }

/* Insights */
.stat-group { margin-bottom: 20px; }
.stat-group-title { color: var(--ink); font-size: .74rem; letter-spacing: .06em; }
.stat-desc { font-size: .76rem; color: var(--muted); line-height: 1.45; margin: -2px 0 8px; }
.db-bar-wrap { background: var(--track); height: 10px; border-radius: 5px; }
.db-val { color: var(--muted); }

#sidebar-footer { background: var(--surface); border-top-color: var(--border); padding: 12px 16px; }

/* List */
.sl-item { border-radius: 12px; padding: 12px; gap: 12px; background: var(--surface); }
.sl-item:hover { background: var(--hover); border-color: var(--blue-accent); }
.sl-dot { width: 18px; height: auto; margin-top: 1px; box-shadow: none; background: none; border-radius: 0; display: inline-flex; justify-content: center; }
.sl-name { color: var(--ink); }

/* ---- Map ---- */
#map { background: var(--map-bg); }
.leaflet-container { background: var(--map-bg); }
.school-icon { background: none; border: none; }
.school-shape { display: block; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
.school-icon:hover .school-shape { transform: scale(1.18); transform-origin: center; transition: transform .12s; }

/* Clusters in brand colors (the default green/yellow/orange clashed with the level colors) */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: rgba(36,104,168,.22); }
.marker-cluster-small div  { background-color: rgba(36,104,168,.92); }
.marker-cluster-medium div { background-color: rgba(20,50,79,.94); }
.marker-cluster-large { background-color: rgba(20,50,79,.25); }
.marker-cluster-large div  { background-color: #0C2135; }
.marker-cluster div { color: #fff; font-weight: 700; font-family: var(--font); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
[data-theme="dark"] .marker-cluster-small, [data-theme="dark"] .marker-cluster-medium, [data-theme="dark"] .marker-cluster-large { background-color: rgba(108,176,240,.22); }
[data-theme="dark"] .marker-cluster-small div { background-color: #3577B8; }
[data-theme="dark"] .marker-cluster-medium div { background-color: #2B5F94; }
[data-theme="dark"] .marker-cluster-large div { background-color: #1F4A75; }
.lg-cluster { background: rgba(36,104,168,.92); box-shadow: 0 0 0 3px rgba(36,104,168,.25); }

.leaflet-bar, .leaflet-control-layers { border-radius: 12px !important; overflow: hidden; border: 1px solid var(--border) !important; }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--surface); color: var(--ink); border-bottom-color: var(--border); width: 34px; height: 34px; line-height: 34px; }
.leaflet-bar a:hover { background: var(--hover); }
.leaflet-control-attribution { background: var(--glass) !important; color: var(--muted); border-radius: 8px 0 0 0; }
.leaflet-control-attribution a { color: var(--blue-accent); }
.leaflet-control-scale-line { background: var(--glass); color: var(--text); border-color: var(--muted); }

.map-legend { background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 14px; min-width: 190px; }
.map-legend-head { color: var(--ink); padding: 10px 14px; }
.map-legend-body { padding: 0 14px 12px; }
.lg-title { color: var(--muted); }
.lg-item { color: var(--text); }
.lg-shape { display: inline-flex; width: 20px; justify-content: center; flex-shrink: 0; }
.lg-dash { border-style: dashed !important; }
.lg-dot-line { border-style: dotted !important; }
.lg-empty { color: var(--muted); }

.chip { background: var(--navy); box-shadow: var(--shadow); }
.chip.clear { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }

/* Popups */
.leaflet-popup-content-wrapper { border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.leaflet-popup-tip { background: var(--surface); }
.leaflet-popup-content { margin: 16px 18px 14px; line-height: 1.45; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); top: 6px; right: 6px; width: 28px; height: 28px; font-size: 20px; line-height: 26px; border-radius: 8px; }
.leaflet-container a.leaflet-popup-close-button:hover { background: var(--hover); color: var(--text); }
.popup-school h3, .popup-district h3 { color: var(--ink); font-size: 1rem; letter-spacing: -.01em; }
.popup-title-row { border-bottom-color: var(--border); border-bottom-width: 1px; padding-bottom: 8px; margin-bottom: 8px; }
.popup-distance { color: var(--ink); }
.tag { background: var(--surface-2); border-color: var(--border); color: var(--text); padding: 2px 8px; }
.tag-charter { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.tag-virtual, .tag-program { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.popup-bk-btn { border-color: var(--border); background: var(--surface); border-radius: 8px; }
.scorecard-btn { border-radius: 8px; background: var(--navy); }
.compare-add-btn { border-radius: 8px; }
.acad-val { color: var(--ink); }
.acad-bar { background: var(--track); }
.acad-state, .growth-mid { background: var(--ink); }
.acad-cmp.up { color: var(--good); } .acad-cmp.down { color: var(--bad); }
.growth-dot { background: var(--ink); border-color: var(--surface); }
[data-theme="dark"] .growth-gauge { background: linear-gradient(90deg, rgba(255,138,122,.35) 0 40%, var(--track) 40% 60%, rgba(95,208,143,.35) 60% 100%); }

/* ---- Overlays: tray, modals, welcome, toast ---- */
.compare-tray { background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 10px 10px 10px 14px; }
.ct-chip { background: var(--surface); color: var(--ink); }
.ct-x:hover { background: var(--hover); }

.modal-overlay { background: rgba(8,16,28,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-box { background: var(--surface); color: var(--text); border-radius: 20px; padding: 28px 30px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.modal-box h2 { color: var(--ink); font-size: 1.3rem; letter-spacing: -.01em; }
.modal-box h3 { color: var(--ink); margin-top: 20px; }
.modal-box p, .modal-box ul { color: var(--text); }
.modal-close { color: var(--muted); border-radius: 8px; width: 32px; height: 32px; }
.modal-close:hover { background: var(--hover); }
.about-table th { color: #fff; background: var(--navy); }
.sc-cmp-table th { background: var(--surface-2); color: var(--muted); }
.about-symbols { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 4px 0 10px; }
.about-sym { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; }
.sc-name { color: var(--ink); }
.sc-metric-val { color: var(--ink); }
.sc-btn-saved { background: var(--warn-bg); }
.scorecard-box { border-radius: 20px; }
kbd { background: var(--surface-2); color: var(--text); border-color: var(--border); }

.cd-group th { background: var(--surface-2); color: var(--ink); }
.cd-school { color: var(--ink); }
.cd-bar { background: var(--track); }
.cd-best { background: var(--good-bg); }
.cd-best .cd-val::after { color: var(--good); }
.cd-best .cd-bar span { background: var(--good); }

.welcome {
  border-radius: 22px; padding: 30px 30px 20px; border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(242,179,61,.18), transparent 55%),
    radial-gradient(90% 70% at 0% 0%, rgba(36,104,168,.14), transparent 60%),
    var(--surface);
}
.welcome-badge {
  display: inline-block; font-size: .72rem; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  background: var(--hover); color: var(--ink); border: 1px solid var(--border); margin-bottom: 12px;
}
.welcome h2 { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.welcome-sub { font-size: .95rem; margin: 8px 0 20px; }
.welcome-actions { gap: 12px; }
.welcome-act { border-radius: 16px; padding: 14px; background: var(--surface); border-color: var(--border); }
.welcome-act:hover { border-color: var(--blue-accent); background: var(--hover); box-shadow: var(--shadow); transform: translateY(-2px); }
.welcome-act b { color: var(--ink); }
.wa-icon { width: 44px; height: 44px; border-radius: 12px; background: #FFF3D6; color: #14324F; }
[data-theme="dark"] .wa-icon { background: rgba(242,179,61,.15); color: var(--gold); }

#toast { border-radius: 12px; padding: 12px 18px; box-shadow: var(--shadow-lg); }
#loading { background: var(--bg); }
#loading p { color: var(--ink); }
.spinner { border-color: var(--track); border-top-color: var(--blue-accent); }
[data-theme="dark"] .load-error { background: #3A1A17; color: #FFB4A8; border-color: rgba(255,138,122,.4); }

.sheet-handle { background: var(--surface); }
.sheet-handle span { background: var(--border); }
.mobile-card:not([hidden]) { background: var(--surface); }
.mobile-card-close { background: var(--surface); }

/* Composer panel follows the theme; the printed page is always paper-white */
.sheet {
  --text: #1D2733; --muted: #5B6878; --ink: #14324F; --surface: #fff; --surface-2: #F6F8FA;
  --border: #DCE2E9; --bg: #F3F5F8; --track: #E8EDF2;
}
.school-table .lvl-dot { width: auto; height: auto; background: none; border-radius: 0; vertical-align: -1px; }
.school-table .lvl-dot .school-shape { display: inline-block; filter: none; }

@media (max-width: 767px) {
  :root { --sidebar-w: 100vw; }
  .tabs { margin: 4px 10px 0; }
  .tab-panel { padding: 12px 12px 20px; }
  .card { padding: 16px 14px 14px; }
  .welcome { border-radius: 18px; padding: 20px 16px 14px; }
  .welcome h2 { font-size: 1.25rem; }
  .basemap-list { grid-template-columns: repeat(2, 1fr); }
}
.lg-district { background: rgba(40,116,166,.18); border-color: #1A3C5E; }
.lg-esd { border-color: #6C3483; }
[data-theme="dark"] .lg-district { background: rgba(108,176,240,.10); border-color: #7FA9D6; }
[data-theme="dark"] .lg-esd { border-color: #C39BD3; }

/* Popup title clears the close button; light-on-blue buttons stay readable in dark mode */
.leaflet-popup-content .popup-title-row { padding-right: 24px; }
[data-theme="dark"] .compare-add-btn { color: #0B1520; }
/* The printed page always uses the light legend swatches */
[data-theme="dark"] .sheet .lg-district { background: rgba(40,116,166,.18); border-color: #1A3C5E; }
[data-theme="dark"] .sheet .lg-esd { border-color: #6C3483; }

/* Small phones: fewer app-bar buttons so nothing collides */
@media (max-width: 480px) {
  #appbar { gap: 8px; padding: 0 8px 0 4px; }
  .appbar-actions { gap: 4px; }
  .appbar-actions .btn { padding: 8px 9px; }
  #export-btn { display: none; }
  .brand-mark { width: 30px; height: 30px; }
}
/* Welcome sits above Leaflet's control corners (z-index 1000) */
.welcome { z-index: 1100; }
/* Long (e.g. Spanish) titles: the brand keeps its width; the stat pills give way first */
.brand { flex-shrink: 0; }
#stats-banner { min-width: 0; overflow: hidden; }
@media (max-width: 1280px) { #stats-banner { display: none; } }

/* ==========================================================================
   11. v6 — Help tab, report link, support & pro
   ========================================================================== */
.tab { font-size: .7rem; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px; }
#sidebar-footer { position: relative; }
.foot-more > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.foot-more > summary::-webkit-details-marker { display: none; }
.foot-more > summary::after { content: ' ▴'; font-size: .7em; }
.foot-more:not([open]) > summary::after { content: ' ▾'; }
.foot-menu {
  position: absolute; right: 10px; bottom: calc(100% + 6px); z-index: 20;
  display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px;
}
.foot-menu a { display: block; text-align: left; padding: 8px 10px; border-radius: 6px; font-size: .85rem; }
.foot-menu a:hover, .foot-menu a:focus-visible { background: var(--bg); }
@media (max-width: 767px) {
  #sidebar-footer { padding: 8px 12px; }
  #sidebar-footer > div:first-child { display: none; }   /* data years are in the Help tab */
  .footer-links { width: 100%; justify-content: space-between; }
  .foot-menu a { padding: 11px 12px; }
}
.footer-links a { text-decoration: none; white-space: nowrap; }
.report-link {
  display: block; margin-top: 6px; padding: 10px 12px; border-radius: 10px; text-decoration: none;
  background: var(--info-bg); border: 1px solid var(--info-border); color: var(--info-text); font-weight: 700; font-size: .84rem;
}
.report-link:hover { text-decoration: underline; }
#pros-btn { text-decoration: none; }
#pros-btn svg { color: #FF9AA8; }

.res-report { background: radial-gradient(120% 90% at 100% 0%, rgba(242,179,61,.16), transparent 60%), var(--surface); }
.res-report .btn { text-decoration: none; }
.res-county { font-size: .72rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.res-listing { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--surface-2); }
.res-listing-top { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.res-sponsored { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 6px; padding: 1px 6px; }
.res-cat { font-size: .74rem; color: var(--muted); }
.res-name { font-weight: 700; color: var(--ink); text-decoration: none; }
.res-name:hover { text-decoration: underline; }
.res-listing p { font-size: .82rem; margin: 4px 0; color: var(--text); }
.res-meta { display: flex; gap: 12px; font-size: .78rem; color: var(--muted); }
.res-meta a { color: var(--blue-accent); }
.res-empty { font-size: .84rem; color: var(--muted); padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; margin-bottom: 10px; }
.res-promo { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; text-decoration: none;
  background: var(--hover); border: 1px solid var(--border); color: var(--text); font-size: .82rem; transition: border-color .15s; }
.res-promo b { color: var(--ink); font-size: .88rem; }
.res-promo:hover { border-color: var(--blue-accent); }
.res-group { border-top: 1px solid var(--border); padding: 10px 0 4px; }
.res-group:first-of-type { border-top: none; }
.res-group summary { cursor: pointer; font-weight: 700; color: var(--ink); font-size: .9rem; list-style-position: outside; }
.res-group ul { list-style: none; padding: 6px 0 4px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.res-group li { display: flex; flex-direction: column; gap: 1px; }
.res-group li a { font-weight: 600; font-size: .86rem; color: var(--blue-accent); text-decoration: none; }
.res-group li a:hover { text-decoration: underline; }
.res-group li span { font-size: .77rem; color: var(--muted); line-height: 1.4; }
.res-pro-links { display: flex; gap: 8px; flex-wrap: wrap; }
.res-pro-links .btn { text-decoration: none; flex: 1; }
@media (max-width: 1100px) { #pros-btn .btn-label { display: none; } }
@media (max-width: 480px) { #pros-btn { display: none; } }

/* ==========================================================================
   12. Family tools — Match me, My list, enrolling checklist
   ========================================================================== */
/* Match me */
.mm-card .card-head { align-items: center; gap: 10px; }
.mm-toggle { padding: 6px 14px; }
.mm-grid { margin-bottom: 12px; }
.mm-origin { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .84rem; margin-bottom: 12px; }
.mm-origin .search-row, .mm-origin .hint { width: 100%; }
.mm-origin .hint { margin: 4px 0 0; }
.mm-addr-label { font-size: .78rem; font-weight: 600; color: var(--muted); width: 100%; }
.mm-from { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.mm-from b { color: var(--ink); font-weight: 600; }
.mm-prios { border: none; padding: 0; margin: 0 0 4px; display: flex; flex-direction: column; gap: 10px; }
.mm-prios legend { font-size: .86rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; padding: 0; }
.mm-prow { display: flex; flex-direction: column; gap: 4px; }
.mm-plabel { font-size: .82rem; font-weight: 600; color: var(--text); }
.mm-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.mm-opt { position: relative; display: block; cursor: pointer; }
.mm-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mm-opt span { display: block; text-align: center; padding: 6px 2px; border-radius: 7px; font-size: .76rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.mm-opt input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); outline: 1px solid var(--blue-accent); }
.mm-opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.mm-opt:hover span { color: var(--ink); }
#mm-results:not(:empty) { margin-top: 14px; }
.mm-summary { font-size: .84rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.mm-empty { font-size: .84rem; color: var(--muted); padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; }
.mm-note { font-size: .8rem; line-height: 1.45; color: var(--info-text); background: var(--info-bg); border: 1px solid var(--info-border);
  border-radius: 10px; padding: 9px 11px; margin-bottom: 10px; }
.mm-note b { color: inherit; }
.mm-note .link-btn { padding: 0; color: var(--info-text); text-decoration: underline; }
.mm-badge { display: inline-block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--good); background: var(--good-bg); border: 1px solid currentColor; border-radius: 6px; padding: 0 6px; margin-right: 4px; vertical-align: 1px; }
.mm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mm-item { border: 1px solid var(--border); border-radius: 12px; padding: 10px 11px; background: var(--surface-2); }
.mm-item.mm-assigned { border-color: var(--good); }
.mm-top { display: flex; gap: 9px; align-items: flex-start; }
.mm-rank { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .76rem; font-weight: 700; display: grid; place-items: center; }
.mm-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.mm-name { font-weight: 700; color: var(--ink); font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.mm-sub { font-size: .76rem; color: var(--muted); }
.mm-score { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 4px 6px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.mm-score b { font-size: 1.05rem; color: var(--ink); }
.mm-score small { font-size: .62rem; color: var(--muted); margin-top: 2px; }
.mm-why { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 4px; }
.mm-why li { font-size: .74rem; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.mm-why li.good { color: var(--good); border-color: currentColor; }
.mm-why li.bad { color: var(--bad); border-color: currentColor; }
.mm-why li.na { color: var(--muted); border-style: dashed; }
.mm-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mm-actions .btn { padding: 6px 4px; font-size: .76rem; white-space: normal; }
.mm-actions .mm-save[aria-pressed="true"] { color: var(--warn-text); border-color: var(--warn-border); background: var(--warn-bg); }
#mm-share { margin-top: 4px; }
.res-flash { outline: 3px solid var(--focus); border-radius: 4px; }

/* My list */
.ml-list { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }
.ml-item { border: 1px solid var(--border); border-radius: 12px; padding: 8px 8px 10px 11px; background: var(--surface-2); }
.ml-top { display: flex; align-items: center; gap: 6px; }
.ml-name { flex: 1; min-width: 0; text-align: left; background: none; border: none; padding: 0; font-weight: 700; color: var(--ink); font-size: .9rem; overflow-wrap: anywhere; }
.ml-name:hover { text-decoration: underline; color: var(--blue-accent); }
.ml-del { width: 30px; height: 30px; color: var(--muted); }
.ml-sub { font-size: .76rem; color: var(--muted); margin: 1px 0 6px; }
.ml-item .ml-note { font-size: .82rem; padding: 6px 9px; }
.ml-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ml-actions .btn { padding: 7px 4px; font-size: .78rem; white-space: normal; }
@media (max-width: 420px) { .ml-actions { grid-template-columns: repeat(2, 1fr); } }
#mylist-print { display: none; }

/* Enrolling checklist (Help tab) */
.en-progress { font-size: .78rem; font-weight: 700; color: var(--good); margin: -6px 0 8px; }
.en-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.en-item { display: flex; gap: 9px; align-items: flex-start; font-size: .85rem; line-height: 1.4; cursor: pointer; }
.en-item input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--navy); }
.en-item input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted); }
.en-links { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-left: 27px; margin-top: 2px; }
.en-links a { font-size: .8rem; font-weight: 600; color: var(--blue-accent); text-decoration: none; }
.en-links a:hover { text-decoration: underline; }
.en-links .link-btn { padding: 0; }
.en-note { font-size: .8rem; line-height: 1.45; color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 10px; padding: 9px 11px; margin-bottom: 12px; }
.en-note a { color: inherit; font-weight: 700; }
.en-h3 { font-size: .86rem; color: var(--ink); margin-bottom: 6px; }
.en-dates { padding-left: 18px; margin: 0 0 8px; font-size: .82rem; line-height: 1.45; display: flex; flex-direction: column; gap: 4px; }
.en-dates b { color: var(--ink); }
.en-dates a { color: var(--blue-accent); }
.en-reset { padding: 0; }
[data-theme="dark"] .mm-rank { background: var(--blue-accent); color: #0B1520; }
[data-theme="dark"] .en-item input { accent-color: var(--blue-accent); }

@media print {
  body.printing-mylist > *:not(#mylist-print) { display: none !important; }
  body.printing-mylist > #mylist-print { display: block !important; color: #000; background: #fff; font-family: var(--font); padding: 0; page: mylist; }
  /* Its own page margins: the map composer sets "@page { margin: 0 }" for the full-bleed map sheet. */
  @page mylist { margin: .55in; }
  #mylist-print thead { display: table-header-group; }
  #mylist-print h1 { font-size: 18pt; margin-bottom: 2pt; color: #14324F; }
  #mylist-print > p { font-size: 9pt; color: #444; margin-bottom: 10pt; }
  #mylist-print table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  #mylist-print th, #mylist-print td { border-bottom: 1px solid #bbb; padding: 5pt 4pt; text-align: left; vertical-align: top; }
  #mylist-print th { background: #EEF2F6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #mylist-print .mlp-note { width: 30%; }
  #mylist-print .mlp-foot { font-size: 8pt; margin-top: 10pt; }
  #mylist-print tr { break-inside: avoid; }
}

/* ==========================================================================
   13. Quality pass — focus contrast, phone tap targets, loading notice
   ========================================================================== */
/* Gold focus rings are ~1.9:1 on white; use blue on light surfaces (WCAG 1.4.11)
   and keep gold on the navy app bar and in dark mode. */
:root:not([data-theme="dark"]) { --focus: #1F5F9E; }
#appbar :focus-visible, .skip-link:focus-visible { outline-color: #F2B33D; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
[data-theme="dark"] input:focus-visible, [data-theme="dark"] select:focus-visible, [data-theme="dark"] textarea:focus-visible { box-shadow: 0 0 0 3px var(--focus); }

/* Small notice while the schools file is still downloading (slow connections) */
.data-pending {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 900;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: .82rem; font-weight: 600; box-shadow: var(--shadow); pointer-events: none;
}

/* Phones: 40px minimum tap targets; the compare tray sits above the map controls */
@media (max-width: 767px) {
  .icon-btn, #appbar .btn, .modal-close { min-width: 40px; min-height: 40px; }
  .btn, .seg, .link-btn, .ct-open, .map-legend-head,
  #address-input, #name-input, #district-input, #sidebar select { min-height: 40px; }
  .link-btn { display: inline-flex; align-items: center; }
  label.check, .layer-row { min-height: 40px; }
  .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
  .compare-tray { z-index: 1001; }
  .ct-x { width: 40px; height: 40px; flex-shrink: 0; margin: -10px -8px -10px -6px; }
  .leaflet-container a.leaflet-popup-close-button { width: 40px; height: 40px; font-size: 24px; line-height: 40px; }
  .mobile-card .popup-links a, .mobile-card a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 40px; }
  .mobile-card .popup-bk-btn, .mobile-card .compare-add-btn, .mobile-card .scorecard-btn { min-height: 40px; min-width: 40px; }
}

/* ==========================================================================
   14. Map layers — area popup, choice/program outlines, ESD + district labels
   ========================================================================== */
.popup-areas h3 { margin-bottom: 4px; }
.area-district { font-size: .8rem; color: var(--muted); margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.area-district .link-btn { padding: 0; font-size: .8rem; }
.area-h { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 8px 0 4px; }
.area-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.area-list li { display: flex; gap: 7px; align-items: flex-start; font-size: .84rem; line-height: 1.3; }
.area-list li > span:last-child { min-width: 0; }
.area-list .link-btn { padding: 0; font-weight: 700; text-align: left; font-size: .84rem; }
.area-list em { color: var(--muted); font-style: normal; font-size: .76rem; }
.area-note { display: block; font-size: .72rem; color: var(--info-text); }
/* Boundary provenance line (js/boundary-src.js): district-confirmed or 2015-16 federal survey. */
.bnd-src { display: block; font-size: .72rem; line-height: 1.35; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.bnd-src.bnd-district::before { content: "¹3a0"; color: #009E73; font-weight: 700; }
.bnd-src .bnd-enroll { white-space: nowrap; }
.area-kind { flex-shrink: 0; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 5px; padding: 1px 5px;
  border: 1.5px dashed #CC79A7; color: #9C4F7E; background: transparent; margin-top: 1px; }
.area-kind.program { border: 1.5px dotted #7A7A7A; color: var(--muted); }
[data-theme="dark"] .area-kind.choice { color: #E5A6CB; }
.area-more { color: var(--muted); font-size: .76rem; }
.area-none { font-size: .82rem; color: var(--text); margin: 4px 0; }
.area-foot { font-size: .72rem; color: var(--muted); margin: 8px 0 0; line-height: 1.4; }

/* Address search: choice schools / programs that also take students from here */
.also-open { margin: 6px 0 4px; font-size: .82rem; border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; background: var(--surface-2); }
.also-open summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.also-open ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.also-open li { line-height: 1.35; }
.also-open li.school-result { cursor: pointer; }
.also-open li.school-result:hover { color: var(--blue-accent); }
.also-open em { color: var(--muted); font-style: normal; font-size: .76rem; }

/* Legend swatches */
.lg-poly.lg-choice { background: transparent !important; border: 2px dashed #CC79A7 !important; }
.lg-poly.lg-program { background: transparent !important; border: 2px dotted #7A7A7A !important; }
.lg-esd-tag { display: inline-grid; place-items: center; min-width: 26px; height: 16px; padding: 0 3px; border-radius: 4px; font-size: .62rem; font-weight: 800;
  background: #6C3483; color: #fff; margin-right: 6px; }

/* ESD labels (clickable) and district labels (zoom 10+) */
.esd-label { background: none; border: none; }
.esd-label span { display: inline-flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%);
  background: #6C3483; color: #fff; border: 2px solid #fff; border-radius: 10px; padding: 3px 9px; line-height: 1.1;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer; white-space: nowrap; font-family: var(--font); }
.esd-label b { font-size: .8rem; letter-spacing: .02em; }
.esd-label small { font-size: .64rem; opacity: .9; font-weight: 600; }
.esd-label:hover span, .esd-label:focus-visible span { background: #4A235A; }
.esd-label:focus-visible { outline: none; }
.esd-label:focus-visible span { outline: 3px solid var(--focus); outline-offset: 2px; }
[data-theme="dark"] .esd-label span { background: #8E5BA6; border-color: #1B2430; }
[data-theme="dark"] .lg-esd-tag { background: #8E5BA6; }

.district-label { background: none; border: none; pointer-events: none; }
.district-label span { display: inline-block; transform: translate(-50%, -50%); white-space: nowrap; font: 700 11px/1.1 var(--font);
  color: #1A3C5E; letter-spacing: .02em; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }
[data-theme="dark"] .district-label span { color: #CFE3F7; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 2px #000; }
.area-list .lvl { flex-shrink: 0; display: inline-grid; place-items: center; min-width: 26px; height: 18px; padding: 0 4px; margin-top: 1px;
  border-radius: 5px; font-size: .62rem; font-weight: 800; letter-spacing: .03em; color: #fff; background: #0072B2; border: none; }
.area-list .lvl.Middle { background: #009E73; }
.area-list .lvl.High { background: #E69F00; color: #1A1A1A; }
.popup-areas .leaflet-popup-content { margin-right: 18px; }
@media (max-width: 767px) { .area-list li { align-items: center; } .area-list li > span:last-child { line-height: 1.2; } }

/* ==========================================================================
   15. Modern popups — header with icon + kicker, stat tiles, action pills;
       ESD region colors and legend chips
   ========================================================================== */
.leaflet-popup.pp .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: 18px;
  box-shadow: 0 18px 48px rgba(16, 32, 52, .22), 0 2px 6px rgba(16, 32, 52, .08); border: 1px solid var(--border); }
.leaflet-popup.pp .leaflet-popup-content { margin: 0; padding: 0 16px 14px; min-width: 0; box-sizing: border-box; }
.leaflet-popup.pp .leaflet-popup-scrolled { border: none; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; }
.leaflet-popup.pp .leaflet-popup-scrolled .pp-head { position: sticky; top: 0; z-index: 1; }
.leaflet-popup.pp .leaflet-popup-tip { box-shadow: none; border: 1px solid var(--border); }
.leaflet-popup.pp a.leaflet-popup-close-button { top: 10px; right: 10px; width: 30px; height: 30px; line-height: 28px; font-size: 20px;
  border-radius: 50%; background: var(--surface); color: var(--muted); box-shadow: 0 1px 3px rgba(0,0,0,.12); z-index: 2; }
.leaflet-popup.pp a.leaflet-popup-close-button:hover { color: var(--ink); background: var(--hover); }

.pp-head { --pp-accent: #2874A6; position: relative; display: flex; align-items: center; gap: 11px;
  margin: 0 -16px 12px; padding: 16px 48px 13px 16px; border-top: 4px solid var(--pp-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pp-accent) 13%, var(--surface)) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border); }
.pp-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--pp-accent) 35%, var(--border)); color: var(--pp-accent);
  box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pp-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-icon svg path[fill], .pp-icon svg [fill]:not([fill="none"]) { stroke-width: 1.4; }
.pp-titles { min-width: 0; flex: 1; }
.pp-kicker { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.pp-head h3, .popup-school .pp-head h3, .popup-district .pp-head h3 { margin: 0; padding: 0; border: none; font-size: 1.06rem; line-height: 1.25;
  color: var(--ink); letter-spacing: -.015em; overflow-wrap: anywhere; }
.pp-need { --need: #27ae60; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 46px; height: 46px; border-radius: 14px; border: 2px solid var(--need); background: var(--surface); color: var(--need); line-height: 1; cursor: help; }
.pp-need b { font-size: 1.05rem; }
.pp-need small { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

.pp-stats { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.pp-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px 9px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-stat[title] { cursor: help; }
.pp-stat b { font-size: .98rem; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-stat span { font-size: .68rem; color: var(--muted); font-weight: 600; line-height: 1.2; }

.pp-info { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; font-size: .82rem; }
.pp-row { display: grid; grid-template-columns: 70px 1fr; gap: 8px; line-height: 1.4; }
.pp-row > span:first-child { color: var(--muted); font-size: .76rem; font-weight: 600; padding-top: 1px; }
.pp-row a { color: var(--blue-accent); font-weight: 600; }

.pp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pp-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; font: 600 .78rem/1.2 var(--font);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink) !important; text-decoration: none !important; cursor: pointer;
  transition: background .15s, border-color .15s; }
.pp-btn:hover { background: var(--hover); border-color: var(--blue-accent); }
.pp-btn.primary { background: var(--navy); border-color: var(--navy); color: #fff !important; }
.pp-btn.primary:hover { background: var(--blue-accent); border-color: var(--blue-accent); }
[data-theme="dark"] .pp-btn.primary { background: var(--blue-accent); border-color: var(--blue-accent); color: #0B1520 !important; }

.pp-links { gap: 6px; margin-top: 10px; }
.pp-links a { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .76rem; }
.pp-links a:hover { text-decoration: none; border-color: var(--blue-accent); }
.popup-school .popup-footer { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.popup-school .popup-action-btns { width: 100%; }
.popup-school .popup-action-btns .compare-add-btn, .popup-school .popup-action-btns .scorecard-btn { flex: 1; border-radius: 999px; padding: 7px 10px; }
.popup-school .popup-bk-btn { border-radius: 50%; width: 34px; height: 34px; flex-shrink: 0; }
.popup-school .popup-tags { margin-bottom: 10px; }

/* Academics key: what the tick on each bar means */
.acad-key { display: flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--muted); margin-top: 4px; }
.acad-key-tick { width: 2px; height: 10px; background: var(--ink); border-radius: 1px; display: inline-block; }

.popup-areas .area-list li { padding: 6px 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.popup-areas .area-h:first-of-type { margin-top: 0; }

/* Phones: the school card (bottom sheet) uses the same header */
.mobile-card .pp-head { margin: -14px -14px 12px; border-radius: 14px 14px 0 0; padding-right: 52px; }
.mobile-card .pp-kicker, .leaflet-popup.pp .pp-kicker { white-space: normal; }
.mobile-card-close { z-index: 3; }

/* ESD regions: one color each */
.esd-label span { background: var(--esd, #6C3483); }
.esd-label.esd-light span { color: #10202F; }
.esd-label:hover span, .esd-label:focus-visible span { background: var(--esd, #6C3483); filter: brightness(.9); }
[data-theme="dark"] .esd-label span { background: var(--esd, #8E5BA6); border-color: #1B2430; }
.lg-esd-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: 2px 0 4px; }
.lg-esd-chip { --esd: #6C3483; display: grid; place-items: center; height: 18px; border-radius: 5px; font-size: .62rem; font-weight: 800;
  color: #fff; background: color-mix(in srgb, var(--esd) 85%, #000); border: 1.5px solid var(--esd); }
.lg-note { font-size: .72rem; color: var(--muted); }
.lg-esd-swatch { width: 22px; height: 14px; border-radius: 4px; flex-shrink: 0;
  background: linear-gradient(90deg, #E69F00 0 33%, #009E73 33% 66%, #7B3FA0 66%); opacity: .85; }

/* ==========================================================================
   17. Welcome & compare homes — home-screen welcome card (stats, quick-start
       tiles, "don't show again") and the Compare homes link in the Find tab
   ========================================================================== */
.welcome { width: min(680px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 28px 28px 16px; color: var(--text); }
.welcome h2 { font-size: 1.7rem; margin: 0; }
.welcome-sub { margin: 8px 0 16px; color: var(--muted); }
.welcome-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; }
.welcome-stats > div { display: flex; flex-direction: column-reverse; padding: 10px 14px; border-radius: 14px;
  background: var(--hover); border: 1px solid var(--border); min-width: 0; }
.welcome-stats dt { font-size: .74rem; color: var(--muted); font-weight: 600; }
.welcome-stats dd { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.welcome-actions { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.welcome-act { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; text-decoration: none; color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.welcome-act b { font-size: .93rem; line-height: 1.25; }
.welcome-act small { line-height: 1.35; }
.welcome-act .wa-icon { width: 40px; height: 40px; }
.welcome-act[data-act="homes"] .wa-icon { background: #DCEBFA; color: #14324F; }
[data-theme="dark"] .welcome-act[data-act="homes"] .wa-icon { background: rgba(108,176,240,.16); color: #A9D0F5; }
.welcome-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.welcome-foot .welcome-lang { margin-top: 0; }
.welcome-foot .welcome-home { font-size: .84rem; }
.welcome-dont { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); cursor: pointer; }
.welcome-dont input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue-accent, #2468A8); }
.hint-link { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--blue-accent, #2468A8); text-decoration: none; margin: -6px 0 6px; padding: 4px 0; }   /* 24px target (2.5.8), same spacing */
.hint-link:hover { text-decoration: underline; }
@media (max-width: 767px) {
  /* Above the bottom sheet, not squeezed into the small map strip */
  .welcome { position: fixed; top: 66px; width: calc(100% - 20px); max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px);
    padding: 18px 14px 12px; z-index: 1300; }
  .welcome h2 { font-size: 1.22rem; padding-right: 34px; }
  .welcome-badge { margin-bottom: 8px; }
  .welcome-sub { font-size: .85rem; margin: 4px 0 12px; }
  .welcome-stats { gap: 6px; margin-bottom: 12px; }
  .welcome-stats > div { padding: 7px 9px; border-radius: 11px; }
  .welcome-stats dt { font-size: .68rem; }
  .welcome-stats dd { font-size: 1.02rem; }
  .welcome-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
  .welcome-act { padding: 10px; gap: 6px; border-radius: 13px; }
  .welcome-act .wa-icon { width: 34px; height: 34px; border-radius: 10px; }
  .welcome-act .wa-icon svg { width: 18px; height: 18px; }
  .welcome-act b { font-size: .86rem; }
  .welcome-act small { font-size: .72rem; }
  .welcome-foot { margin-top: 10px; }
}

/* ==========================================================================
   16. Map extras — hover preview, nearby schools, share card, boundary
       inspector, distance rings, map buttons, "schools in view" chip
   ========================================================================== */
/* Map buttons under the zoom control (styled like the zoom buttons) */
.leaflet-bar.mx-bar button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; margin: 0;
  border: none; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; }
.leaflet-bar.mx-bar button:last-child { border-bottom: none; }
.leaflet-bar.mx-bar button:hover { background: var(--hover); }
.leaflet-bar.mx-bar button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.leaflet-bar.mx-bar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.leaflet-bar.mx-bar button.active, .leaflet-bar.mx-bar button[aria-pressed="true"] { background: var(--navy); color: #fff; }
[data-theme="dark"] .leaflet-bar.mx-bar button.active, [data-theme="dark"] .leaflet-bar.mx-bar button[aria-pressed="true"] { background: var(--blue-accent); color: #0B1520; }
@media (max-width: 767px) {
  .leaflet-touch .leaflet-bar.mx-bar button { width: 40px; height: 40px; }
  /* The school card is tall: these extra buttons would sit on its close button */
  .card-open .leaflet-bar.mx-bar, .mx-popup-open .leaflet-bar.mx-bar { display: none; }
}
/* Area popup: keep grade spans like "PK–8" on one line */
.area-list em { white-space: nowrap; }

/* 1. Hover preview on school markers */
.leaflet-tooltip.mx-tip { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px 10px; font: 400 .78rem/1.35 var(--font); white-space: normal; width: max-content; max-width: 250px; }
.leaflet-tooltip-top.mx-tip:before { border-top-color: var(--surface); }
.mx-tip-head { display: flex; gap: 7px; align-items: flex-start; margin-bottom: 4px; }
.mx-tip-head svg { flex-shrink: 0; margin-top: 2px; }
.mx-tip-head b { display: block; color: var(--ink); font-size: .84rem; line-height: 1.25; }
.mx-tip-head span { display: block; color: var(--muted); font-size: .7rem; font-weight: 600; }
.mx-tip-row { display: flex; gap: 5px; align-items: baseline; padding-left: 21px; }
.mx-tip-row span { color: var(--muted); min-width: 52px; }
.mx-tip-row b { color: var(--ink); }
.mx-tip-row small { color: var(--muted); font-size: .7rem; }
.mx-tip-na { padding-left: 21px; color: var(--muted); font-size: .72rem; }

/* 2. Nearby schools in the school popup */
.mx-nearby { margin-top: 12px; }
.mx-nearby ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mx-near-go { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; font: inherit;
  padding: 6px 9px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.mx-near-go:hover { border-color: var(--blue-accent); background: var(--hover); }
.mx-near-go:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.mx-near-shape { flex-shrink: 0; display: grid; }
.mx-near-name { flex: 1; min-width: 0; font-size: .82rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.mx-near-name small { display: block; font-weight: 500; font-size: .7rem; color: var(--muted); }
.mx-near-d { flex-shrink: 0; font-size: .74rem; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* 8. Popup polish: demographics title, phone pill, share button */
.pp-demo-title { margin-top: 12px; }
.popup-school .demo-bar { height: 12px; border-radius: 6px; }
a.pp-tel { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink) !important; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
a.pp-tel:hover { border-color: var(--blue-accent); background: var(--hover); }
a.pp-tel svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.popup-school .pp-row:has(.pp-tel) { align-items: center; }
.mx-share-btn { display: inline-grid; place-items: center; flex-shrink: 0; cursor: pointer; border-radius: 50%; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.mx-share-btn:hover { background: var(--hover); border-color: var(--blue-accent); }
.mx-share-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 767px) {
  .mx-share-btn { width: 40px; height: 40px; }
  .mx-near-go { min-height: 44px; }
  a.pp-tel { min-height: 36px; }
}

/* 3. Share dialog */
.mx-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; padding: 16px 18px 18px; border: 1px solid var(--border);
  border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); font-family: var(--font); box-sizing: border-box; }
.mx-dialog::backdrop { background: rgba(8, 18, 30, .55); }
.mx-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.mx-dlg-head h2 { margin: 0; font-size: 1.05rem; color: var(--ink); }
.mx-dlg-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mx-dlg-close { color: var(--muted); }
.mx-share-preview { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); aspect-ratio: 1200 / 630; }
.mx-share-img { display: block; width: 100%; height: auto; }
.mx-share-url { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; font-size: .76rem; font-weight: 600; color: var(--muted); }
.mx-share-url input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font: 500 .82rem var(--font); }
.mx-dlg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mx-dlg-actions .pp-btn { padding: 9px 14px; font-size: .84rem; }

/* 4. Boundary inspector */
.mx-insp { position: absolute; left: 0; top: 0; z-index: 700; width: 250px; pointer-events: none; will-change: transform;
  background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 9px 10px 8px; font-size: .8rem; }
.mx-insp[hidden] { display: none; }
.mx-insp-h { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.mx-insp-list { gap: 4px; }
.mx-insp-list li { font-size: .8rem; }
.mx-insp-list b { color: var(--ink); }
.mx-insp-msg { margin: 0; color: var(--text); }
.mx-insp-more { margin-top: 5px; font-size: .72rem; color: var(--muted); }
.mx-insp-foot { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--border); font-size: .68rem; color: var(--muted); }
.mx-inspecting, .mx-inspecting .leaflet-interactive { cursor: crosshair; }
/* While inspecting, area and district shapes do not take clicks (no popups in the way) */
.mx-inspecting .leaflet-districtsPane-pane path, .mx-inspecting .leaflet-attendancePane-pane path,
.mx-inspecting .leaflet-choicePane-pane path { pointer-events: none !important; }
.mx-crosshair::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; z-index: 690;
  pointer-events: none; border-radius: 50%; border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--surface);
  background: radial-gradient(circle, var(--ink) 0 2.5px, transparent 3px); }
@media (max-width: 767px) { .mx-insp { width: min(250px, calc(100% - 16px)); } }

/* 5. Distance rings */
.mx-ring-label { background: none; border: none; }
.mx-ring-label span { display: inline-block; transform: translate(-50%, -50%); padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  font: 700 11px/1.4 var(--font); color: #1F4E79; background: rgba(255,255,255,.92); border: 1px solid #1F4E79; }
[data-theme="dark"] .mx-ring-label span { color: #CFE3F7; background: rgba(18,31,45,.92); border-color: #9CC6F0; }
.mx-rings-toggle { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: .84rem; cursor: pointer; color: var(--text); }
.mx-rings-toggle input { width: 16px; height: 16px; accent-color: var(--navy); }
.mx-rings-toggle small { color: var(--muted); }

/* 7. "Schools in view" chip (below the active-filter chips) */
.mx-inview { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 500; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); box-shadow: var(--shadow-sm);
  font: 600 .78rem/1.2 var(--font); cursor: pointer; white-space: nowrap; }
.mx-inview:hover { border-color: var(--blue-accent); }
.mx-inview:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mx-inview svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mx-inview[hidden] { display: none; }

/* 6. Fullscreen (also the fallback where the Fullscreen API is missing) */
.mx-fs #appbar, .mx-fs #sidebar, .mx-fs .skip-link { display: none !important; }
.mx-fs #map-wrap { top: 0 !important; left: 0 !important; bottom: 0 !important; }

/* ==========================================================================
   16. School popup tabs and parent helpers: support for students, questions
       to ask, trip from the searched address; district "at a glance"
   ========================================================================== */
.pp-tabs { display: flex; gap: 2px; margin: -4px 0 12px; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.pp-tab { flex: 1 1 0; min-width: 0; padding: 6px 4px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer;
  font: 700 .72rem/1.2 var(--font); text-align: center; white-space: normal; overflow-wrap: anywhere; }
.pp-tab:hover { color: var(--ink); background: var(--hover); }
.pp-tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 -2px 0 var(--blue-accent); }
.pp-tab:focus-visible, .pp-panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pp-panel[hidden] { display: none; }
.pp-panel > :first-child { margin-top: 0; }
.pp-panel .mx-nearby { margin-top: 0; }

.pp-trip, .pp-support, .pp-glance { margin: 0 0 12px; }
.pp-support { margin-top: 14px; }
.pp-trip .pp-stats { margin: 4px 0 6px; }
.pp-trip-note, .pp-q-note, .pp-glance-note { font-size: .72rem; color: var(--muted); margin: 0 0 8px; line-height: 1.4; }
.pp-glance-note { margin: 0; }
.pp-trip-dir { font-size: .76rem; }

.pp-questions { margin: 0 0 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 8px 10px; }
.pp-questions summary { cursor: pointer; list-style: none; font-size: .8rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.pp-questions summary::-webkit-details-marker { display: none; }
.pp-questions summary::before { content: '\25B8'; color: var(--muted); font-size: .8rem; transition: transform .15s; }
.pp-questions[open] summary::before { transform: rotate(90deg); }
.pp-questions summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.pp-q-count { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  font-size: .68rem; color: var(--muted); text-align: center; }
.pp-questions[open] .pp-q-note { margin-top: 6px; }
.pp-questions ol { margin: 0 0 10px; padding-left: 20px; font-size: .8rem; line-height: 1.4; color: var(--text); display: flex; flex-direction: column; gap: 5px; }

.pp-sup-item { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); margin-top: 6px; }
.pp-sup-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pp-sup-label { font-size: .8rem; font-weight: 700; color: var(--ink); }
.pp-sup-head b { font-size: .92rem; color: var(--ink); white-space: nowrap; }
.pp-sup-cmp { font-size: .72rem; color: var(--muted); margin-top: 2px; cursor: help; }
.pp-sup-word { font-weight: 600; }
.pp-sup-prog { margin-top: 6px; font-size: .72rem; color: var(--muted); }
.pp-sup-item > .pp-sup-prog:first-child { margin-top: 0; }
.pp-sup-prog .popup-tags { margin: 3px 0 0; }
.pp-sup-tip { margin: 6px 0 0; font-size: .74rem; line-height: 1.4; color: var(--text); }
.pp-sup-tip a { color: var(--blue-accent); font-weight: 600; }

.pp-glance-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.pp-glance-item { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: .76rem; color: var(--muted); font-weight: 600; }
.pp-glance-item b { color: var(--ink); font-size: .84rem; }
.pp-glance-item svg { flex-shrink: 0; }

@media (max-width: 767px) {
  .pp-tab { min-height: 40px; font-size: .74rem; }
  .pp-questions summary { min-height: 36px; }
  .pp-q-copy, .pp-trip-dir { min-height: 40px; }
}

/* ---------- Enrollment trend (popups; js/enrollment-trends.js) ---------- */
.et-box { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.et-box.et-loading { min-height: 58px; opacity: .5; }
.et-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.et-text { min-width: 0; }
.et-num { font-size: .82rem; color: var(--text); }
.et-num .et-chg { font-size: .95rem; color: var(--ink); }
.et-chg.down::before { content: "▼ "; font-size: .7em; color: #B35806; }
.et-chg.up::before { content: "▲ "; font-size: .7em; color: #2C6CB0; }
.et-note { font-size: .72rem; color: var(--muted); }
.et-sparkwrap { color: var(--blue-accent); flex-shrink: 0; }
:root[data-theme="dark"] .et-sparkwrap { color: #8CC4F5; }
.et-spark { display: block; }
.et-spark .et-base { fill: var(--surface); stroke: currentColor; stroke-width: 1.5; }
.et-more { display: inline-block; margin-top: 0; padding: 4px 0; font-size: .74rem; }   /* 24px target (2.5.8) */
.choropleth-note { font-size: .74rem; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* ---------- Charter schools (public, open to all by application; js/charters.js) ---------- */
.pp-charter { margin: 0 0 10px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border); border-left: 4px solid #1B1B1F;
  background: var(--surface-2); font-size: .8rem; line-height: 1.45; color: var(--text); }
:root[data-theme="dark"] .pp-charter { border-left-color: #C9D3DE; }
.pp-charter .acad-title { display: flex; align-items: center; margin-bottom: 4px; }
.pp-charter-facts { margin: 0 0 6px; padding-left: 18px; }
.pp-charter-facts li { margin: 1px 0; }
.pp-charter .pp-row { margin: 4px 0; }
.pp-charter .pp-actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.pp-charter-closed { margin: 4px 0; color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 8px; padding: 4px 8px; }
.pp-charter-note { margin: 4px 0; font-size: .76rem; }
.pp-charter-guide { margin: 6px 0 0; font-size: .76rem; }
.charter-nearby { margin-top: 10px; }
.charter-item { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.charter-shape { display: inline-flex; width: 26px; justify-content: center; flex-shrink: 0; }

/* ---------- Private schools (separate NCES layer; js/private.js) ---------- */
.private-nearby summary { display: flex; align-items: center; gap: 6px; }
.private-nearby.loading summary { color: var(--muted); }
.private-nearby li.private-result { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.private-nearby li.private-result:hover, .private-nearby li.private-result:focus-visible { color: var(--blue-accent); }
.private-shape { display: inline-flex; flex-shrink: 0; }
.private-nearby .private-shape { margin-top: 2px; }
.pp-private-note { margin: 8px 0 4px; padding: 7px 9px; border-radius: 8px; font-size: .8rem; line-height: 1.45; background: var(--surface-2);
  border: 1px dashed #6B5B8C; color: var(--text); }
:root[data-theme="dark"] .pp-private-note { border-color: #A894CF; }
.pp-private-src { margin: 0 0 6px; font-size: .74rem; color: var(--muted); }
.popup-private .pp-info { margin-top: 6px; }
.pp-sbe { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0; padding: 5px 9px; border-radius: 8px; font-size: .78rem; line-height: 1.4;
  overflow-wrap: anywhere; }
.pp-sbe a { color: var(--blue-accent); font-weight: 600; white-space: nowrap; }
.pp-sbe-ok { background: var(--good-bg); border: 1px solid var(--good); color: var(--text); }
.pp-sbe-ok .pp-sbe-mark { color: var(--good); }
.pp-sbe-mark { font-weight: 700; }
.pp-sbe-unknown { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.popup-private .pp-actions { margin: 6px 0 2px; display: flex; flex-wrap: wrap; gap: 6px; }
.popup-private .pp-actions .pp-btn { max-width: 100%; white-space: normal; text-decoration: none; }
.popup-private .pp-assoc span:last-child { overflow-wrap: anywhere; }
.pp-childfind a { color: var(--blue-accent); font-weight: 600; }
.private-nearby .pn-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.private-nearby .pn-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .7rem; font-weight: 600; line-height: 1.5;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; }
.private-nearby .pn-sbe { border-color: var(--good); color: var(--good); background: var(--good-bg); }
.private-nearby a.pn-web { color: var(--blue-accent); }
.marker-cluster-private.marker-cluster-small, .marker-cluster-private.marker-cluster-medium, .marker-cluster-private.marker-cluster-large { background-color: rgba(107,91,140,.25); }
.marker-cluster-private.marker-cluster-small div, .marker-cluster-private.marker-cluster-medium div, .marker-cluster-private.marker-cluster-large div {
  background-color: #fff; color: #4A3D66; border: 2.5px solid #6B5B8C; box-sizing: border-box; }
.marker-cluster-private span { line-height: 25px; }
[data-theme="dark"] .marker-cluster-private.marker-cluster-small div, [data-theme="dark"] .marker-cluster-private.marker-cluster-medium div,
[data-theme="dark"] .marker-cluster-private.marker-cluster-large div { background-color: #2A2438; color: #E4DCF5; border-color: #A894CF; }
.lg-cluster.lg-cluster-private { background: #fff; border: 2.5px solid #6B5B8C; box-shadow: 0 0 0 3px rgba(107,91,140,.25); box-sizing: border-box; }

/* ==========================================================================
   17. Map tools — level-mix cluster donuts, "Summarize an area", measure
       distance (maptools.js), name / district autocomplete (search.js)
   ========================================================================== */
/* Cluster donut: level mix around the count (MarkerCluster.Default's halo is off) */
.marker-cluster.mc-cluster { background: none; border-radius: 50%; }
.marker-cluster.mc-cluster .mc-donut { position: relative; width: 100%; height: 100%; margin: 0; border-radius: 50%;
  background: none; box-shadow: 0 2px 6px rgba(0,0,0,.28); }
.mc-donut .mc-ring { position: absolute; inset: 0; z-index: 0; display: block; }  /* beats leaflet.css .leaflet-map-pane svg { z-index: 200 } */
.mc-halo { fill: #fff; }
.mc-hole { fill: #14324F; }
.mc-donut b { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #fff; font: 800 12px/1 var(--font); letter-spacing: -.02em; }
.mc-46 .mc-donut b, .mc-52 .mc-donut b { font-size: 13px; }
[data-theme="dark"] .mc-halo { fill: #0B1520; }
[data-theme="dark"] .mc-hole { fill: #EAF2FA; }
[data-theme="dark"] .mc-donut b { color: #0B1520; }
.lg-cluster:not(.lg-cluster-private) { background: radial-gradient(circle, #14324F 0 38%, transparent 40%),
  conic-gradient(#0072B2 0 45%, #fff 45% 46%, #009E73 46% 62%, #fff 62% 63%, #E69F00 63% 88%, #fff 88% 89%, #CC79A7 89%);
  box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0,0,0,.3); }
[data-theme="dark"] .lg-cluster:not(.lg-cluster-private) { background: radial-gradient(circle, #EAF2FA 0 38%, transparent 40%),
  conic-gradient(#0072B2 0 45%, #0B1520 45% 46%, #009E73 46% 62%, #0B1520 62% 63%, #E69F00 63% 88%, #0B1520 88% 89%, #CC79A7 89%);
  box-shadow: 0 0 0 1.5px #0B1520; }

/* While a tool is on, map clicks add points: markers and shapes don't take them */
.mt-active, .mt-active.leaflet-grab { cursor: crosshair !important; }
.mt-active .leaflet-interactive, .mt-active .leaflet-marker-icon { pointer-events: none !important; }
/* Keyboard drawing: a crosshair marks "map center" while the tool panel has focus */
#map-wrap.mt-crosshair:has(.mt-panel:focus-within)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px;
  margin: -15px 0 0 -15px; z-index: 690; pointer-events: none; border-radius: 50%; border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--surface);
  background: radial-gradient(circle, var(--ink) 0 2px, transparent 2.5px); }

/* Tool panels */
.mt-panel { position: absolute; z-index: 1001; top: 10px; left: 56px; width: 340px; max-height: calc(100% - 20px); overflow-y: auto;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
  padding: 12px 14px 14px; font-size: .84rem; overscroll-behavior: contain; }
.mt-panel:focus { outline: none; }
.mt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mt-head h2 { font-size: 1rem; color: var(--ink); margin: 0; }
.mt-close { color: var(--muted); width: 32px; height: 32px; }
.mt-close svg { width: 18px; height: 18px; }
.mt-desc, .mt-instr { color: var(--muted); font-size: .78rem; line-height: 1.45; margin: 4px 0 8px; }
.mt-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mt-mode { padding: 8px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
  font-size: .78rem; font-weight: 700; line-height: 1.2; min-height: 40px; }
.mt-mode:hover { border-color: var(--blue-accent); background: var(--hover); }
.mt-mode[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
[data-theme="dark"] .mt-mode[aria-pressed="true"] { background: var(--blue-accent); border-color: var(--blue-accent); color: #0B1520; }
.mt-draw { margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border); }
.mt-draw .mt-instr { margin-top: 0; color: var(--text); }
.mt-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.mt-actions .btn { padding: 7px 11px; font-size: .8rem; }
.mt-circle-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.mt-circle-row label { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; font-weight: 700; color: var(--muted); }
.mt-circle-row select { width: auto; padding: 6px 8px; }
.mt-circle-row .btn { padding: 7px 11px; font-size: .8rem; }
.mt-cancel { margin-top: 6px; }
.mt-result { margin-top: 10px; }
.mt-result:empty { display: none; }
.mt-empty { color: var(--muted); margin: 6px 0 0; }
.mt-count { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; outline: none; }
.mt-big { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; }
.mt-big b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.mt-big span { font-size: .72rem; font-weight: 600; color: var(--muted); }
.mt-levels { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 4px; padding: 0; }
.mt-levels li { display: flex; align-items: center; gap: 4px; font-size: .78rem; }
.mt-levels b { color: var(--ink); }
.mt-levels span { color: var(--muted); }
.mt-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .78rem; }
.mt-table th, .mt-table td { padding: 4px 3px; text-align: left; vertical-align: middle; }
.mt-table thead th { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.mt-table tbody tr + tr { border-top: 1px solid var(--border); }
.mt-table tbody th { font-weight: 600; color: var(--text); }
.mt-v { font-weight: 800; color: var(--ink); white-space: nowrap; }
.mt-s, .mt-n { color: var(--muted); white-space: nowrap; }
.mt-barcell { width: 32%; }
.mt-track { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--track); }
.mt-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--blue-accent); }
.mt-tick { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 1px; background: var(--ink); }
.mt-note { font-size: .7rem; line-height: 1.45; color: var(--muted); margin: 6px 0 0; }
.mt-filtered { color: var(--warn-text); }
.mt-sub { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; }
.mt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; }
.mt-go { width: 100%; display: flex; align-items: center; gap: 7px; text-align: left; padding: 5px 8px; border-radius: 9px;
  border: 1px solid transparent; background: none; color: var(--text); min-height: 36px; }
.mt-go:hover, .mt-go:focus-visible { background: var(--hover); border-color: var(--border); }
.mt-go svg { flex-shrink: 0; }
.mt-go-name { flex: 1; min-width: 0; font-size: .8rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.mt-go-name small { display: block; font-weight: 500; font-size: .7rem; color: var(--muted); }
.mt-go-n { flex-shrink: 0; font-size: .72rem; color: var(--muted); }
.mt-upsell { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg); border: 1px solid var(--warn-border); }
.mt-upsell:focus { outline: none; }
.mt-upsell h3 { font-size: .86rem; color: var(--ink); margin: 0 0 4px; }
.mt-upsell p { font-size: .76rem; line-height: 1.45; margin: 0; }
.mt-key { display: flex; gap: 6px; align-items: flex-end; margin-top: 8px; }
.mt-key label { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: .72rem; font-weight: 700; color: var(--muted); }
.mt-key input { padding: 7px 9px; font-size: .8rem; }
.mt-key .btn { padding: 7px 11px; font-size: .8rem; }
.mt-key-msg { margin-top: 4px !important; }
/* Measure */
.mt-measure { width: 300px; }
.mt-total { margin: 6px 0 2px; font-size: .9rem; color: var(--muted); }
.mt-total b { font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.mt-sep { margin: 0 4px; }
.mt-ms-label span { display: inline-block; transform: translate(10px, -50%); white-space: nowrap; padding: 3px 8px; border-radius: 999px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font: 700 .74rem var(--font); }
@media (max-width: 767px) {
  /* Phones: tool panels dock to the bottom of the map strip */
  .mt-panel { top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: calc(100% - 64px); padding: 10px 12px 12px; }
  .mt-measure { width: auto; }
  .mt-list { max-height: 160px; }
  #active-filters { max-width: calc(100% - 112px); }
  .mt-mode { font-size: .74rem; }
}

/* Autocomplete (school / district name) */
.ac-list { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow); max-height: 320px; overflow-y: auto; }
.ac-list li { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px; cursor: pointer; min-height: 40px; }
.ac-list li:hover { background: var(--hover); }
.ac-list li.active { background: var(--hover); box-shadow: inset 3px 0 0 var(--blue-accent); }
.ac-icon { flex-shrink: 0; width: 22px; display: grid; place-items: center; }
.ac-text { flex: 1; min-width: 0; }
.ac-name { display: block; font-size: .86rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.ac-name mark { background: rgba(242,179,61,.38); color: inherit; border-radius: 3px; padding: 0 1px; font-weight: 800; }
[data-theme="dark"] .ac-name mark { background: rgba(242,179,61,.3); }
.ac-text small { display: block; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   18. Popup polish (popups.js): header chips, test results over time, nearby
       comparison, district "schools vs the state", ESD district list, report link
   ========================================================================== */
.pp-head:has(.pp-chips) { flex-wrap: wrap; row-gap: 0; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; flex: 1 0 100%; min-width: 0; }
.pp-chips { margin-top: 8px; }
.pp-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 2px 8px 2px 6px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 .72rem/1.35 var(--font); text-decoration: none; }
.pp-chip span { min-width: 0; overflow-wrap: anywhere; }
.pp-chip svg { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
a.pp-chip { color: #1C3D60; }
a.pp-chip:hover { border-color: var(--blue-accent); background: var(--hover); }
a.pp-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
:root[data-theme="dark"] a.pp-chip { color: #A9D0F5; }

/* Long words (Spanish, long school names) never push the popup wider */
.popup-school, .popup-district, .popup-areas { overflow-wrap: break-word; }
.popup-school .pp-panel, .popup-district .pp-stat span, .pp-row > span:last-child { overflow-wrap: anywhere; }
.pp-row > span:first-child { overflow-wrap: normal; hyphens: auto; }
.popup-private .pp-row { grid-template-columns: 88px 1fr; }
.pp-tab { hyphens: auto; }
.pp-panel { touch-action: pan-y; }
.et-text { flex: 1; }

.pp-links a.pp-report { color: var(--muted); }
.pp-links a.pp-report:hover { color: var(--ink); }

/* Test results over time */
.st-box { margin: 12px 0 4px; padding: 9px 10px 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.st-box.st-pending .st-skeleton { height: 150px; border-radius: 8px; background: var(--track); opacity: .5; }
.st-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; margin: 4px 0 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); max-width: 100%; }
.st-subj { border: 0; background: transparent; color: var(--muted); font: 700 .72rem/1.2 var(--font); padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.st-subj:hover { color: var(--ink); background: var(--hover); }
.st-subj[aria-pressed="true"] { background: var(--navy); color: #fff; }
:root[data-theme="dark"] .st-subj[aria-pressed="true"] { background: #6CB0F0; color: #0B1520; }
.st-subj:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.st-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .7rem; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.st-legend span + .st-key { margin-left: 8px; }
.st-key { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid #1F6FB8; }
.st-legend .st-key-state { border-top: 2px dashed #6B7785; }
.st-chart { display: block; width: 100%; height: auto; overflow: visible; }
.st-chart .st-grid { stroke: var(--border); stroke-width: 1; }
.st-chart .st-tick { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.st-chart .st-axis { fill: var(--muted); font: 600 9.5px var(--font); }
.st-chart .st-gap { fill: var(--track); opacity: .7; }
.st-chart .st-gap-label { fill: var(--muted); font: 700 8.5px var(--font); }
.st-chart .st-line { fill: none; stroke: #1F6FB8; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.st-chart .st-dot { fill: #1F6FB8; stroke: var(--surface-2); stroke-width: 1.5; }
.st-chart .st-line-state { fill: none; stroke: #6B7785; stroke-width: 1.6; stroke-dasharray: 4 3; }
.st-chart .st-dot-state { fill: #6B7785; }
.st-chart .st-end { font: 800 10.5px var(--font); fill: var(--ink); }
.st-chart .st-end-state { font-weight: 600; fill: var(--muted); }
:root[data-theme="dark"] .st-key { border-top-color: #8CC4F5; }
:root[data-theme="dark"] .st-legend .st-key-state { border-top-color: #9AAABB; }
:root[data-theme="dark"] .st-chart .st-line-state { stroke: #9AAABB; }
:root[data-theme="dark"] .st-chart .st-dot-state { fill: #9AAABB; }
:root[data-theme="dark"] .st-chart .st-line { stroke: #8CC4F5; }
:root[data-theme="dark"] .st-chart .st-dot { fill: #8CC4F5; }
.st-note { margin: 4px 0; font-size: .7rem; line-height: 1.4; color: var(--muted); }
.st-table summary { cursor: pointer; font-size: .74rem; font-weight: 700; color: #1C3D60; }
:root[data-theme="dark"] .st-table summary { color: #A9D0F5; }
.st-table summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.st-table table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: .74rem; }
.st-table th, .st-table td { padding: 3px 4px; border-bottom: 1px solid var(--border); text-align: left; font-variant-numeric: tabular-nums; }
.st-table thead th { color: var(--muted); font-weight: 700; }
.st-table td[colspan], .st-na { color: var(--muted); font-size: .7rem; }

/* Nearby tab */
.pp-nearby ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-near-key { margin: 0 0 6px; font-size: .7rem; line-height: 1.4; color: var(--muted); }
.pp-near-key > span + span { white-space: nowrap; }
.pp-near-go, .pp-near-row { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; color: inherit;
  padding: 7px 9px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.pp-near-go { cursor: pointer; }
.pp-near-go:hover { border-color: var(--blue-accent); background: var(--hover); }
.pp-near-go:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pp-near-self .pp-near-row { background: var(--surface); border-style: dashed; }
.pp-near-shape { flex-shrink: 0; display: grid; }
.pp-near-name { flex: 1; min-width: 0; font-size: .8rem; font-weight: 700; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }
.pp-near-name small { display: block; font-weight: 500; font-size: .69rem; color: var(--muted); }
.pp-near-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pp-near-d { font-size: .74rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.pp-near-home { font-size: .66rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pp-minis { display: flex; flex-direction: column; gap: 1px; }
.pp-mini { display: grid; grid-template-columns: 10px 40px 28px; align-items: center; gap: 4px; font-size: .66rem; color: var(--muted); }
.pp-mini-k { font-weight: 800; }
.pp-mini b { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.pp-mini-bar { position: relative; height: 5px; border-radius: 3px; background: var(--track); }
.pp-mini-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #1F6FB8; }
.pp-mini-bar s { position: absolute; top: -2px; width: 2px; height: 9px; margin-left: -1px; background: var(--ink); border-radius: 1px; text-decoration: none; }
:root[data-theme="dark"] .pp-mini-bar i { background: #8CC4F5; }
@media (max-width: 767px) { .pp-near-go { min-height: 48px; } }

/* District popup: schools vs the state average */
.pp-dsc { margin: 0 0 12px; }
.pp-dsc-row { margin-top: 6px; }
.pp-dsc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 8px; flex-wrap: wrap; }
.pp-dsc-label { font-size: .8rem; font-weight: 700; color: var(--ink); }
.pp-dsc-dist { font-size: .72rem; color: var(--muted); }
.pp-dsc-dist b { color: var(--ink); }
.pp-dsc-bar { display: flex; gap: 2px; height: 8px; margin: 3px 0 2px; border-radius: 4px; overflow: hidden; }
.pp-dsc-bar i { display: block; min-width: 4px; }
.pp-dsc-bar .up { background: #2C6CB0; }
.pp-dsc-bar .same { background: #B9C2CC; }
.pp-dsc-bar .down { background: #C3610A; }
:root[data-theme="dark"] .pp-dsc-bar .up { background: #6CB0F0; }
:root[data-theme="dark"] .pp-dsc-bar .same { background: #5B6B7C; }
:root[data-theme="dark"] .pp-dsc-bar .down { background: #E8954A; }
.pp-dsc-words { font-size: .72rem; color: var(--text); line-height: 1.4; }
.pp-dsc-words b { color: var(--ink); }
.pp-dsc-n { color: var(--muted); }

/* ESD popup: districts with links */
.pp-esd-districts { margin: 10px 0 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 8px 10px; }
.pp-esd-districts summary { cursor: pointer; list-style: none; font-size: .8rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.pp-esd-districts summary::-webkit-details-marker { display: none; }
.pp-esd-districts summary::before { content: '\25B8'; color: var(--muted); font-size: .8rem; transition: transform .15s; }
.pp-esd-districts[open] summary::before { transform: rotate(90deg); }
.pp-esd-districts summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.pp-esd-districts ul { list-style: none; margin: 6px 0; padding: 0; columns: 2 130px; column-gap: 12px; max-height: 220px; overflow-y: auto; font-size: .76rem; }
.pp-esd-districts li { break-inside: avoid; padding: 2px 0; line-height: 1.3; }
.pp-esd-districts a { color: #1C3D60; font-weight: 600; text-decoration: none; }
.pp-esd-districts a:hover { text-decoration: underline; }
:root[data-theme="dark"] .pp-esd-districts a { color: #A9D0F5; }
.pp-esd-districts small { color: var(--muted); font-size: .66rem; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   19. Parents: Enroll tab (grade checker, steps, rights), birthday helper
       under the Grade filter, My list planner (status, key date, calendar)
   ========================================================================== */
.pp-enroll .acad-title { margin-top: 2px; }
.en-gr { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 9px 10px; margin: 4px 0 12px; }
.en-gr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.en-gr-row label { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; font-weight: 700; color: var(--muted); }
.en-gr-row input, .en-gr-row select { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: .82rem; font-weight: 400; color: var(--text); }
.en-gr-res { margin-top: 8px; font-size: .82rem; line-height: 1.45; }
.en-gr-res p { margin: 0 0 4px; }
.en-gr-out b { color: var(--ink); }
.en-gr-age, .en-gr-hint, .en-gr-note, .en-gr-priv { color: var(--muted); font-size: .74rem; }
.en-gr-priv { margin: 6px 0 0; font-size: .68rem; }
.en-gr-fit { font-weight: 700; font-size: .78rem; padding-left: 20px; position: relative; }
.en-gr-fit::before { position: absolute; left: 2px; top: 0; }
.en-gr-yes { color: #1E7A46; } .en-gr-yes::before { content: "✓"; }
.en-gr-no  { color: #A93226; } .en-gr-no::before  { content: "✕"; }
:root[data-theme="dark"] .en-gr-yes { color: var(--good); }
:root[data-theme="dark"] .en-gr-no  { color: var(--bad); }
.en-gr-map { padding: 2px 0; font-size: .78rem; }
.en-gr-compact .en-gr-map { display: none; }
.en-steps { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 8px; }
.en-step { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: .8rem; line-height: 1.45; }
.en-step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.en-step b { color: var(--ink); display: block; }
.en-step p { margin: 1px 0 0; color: var(--text); }
.en-contact { font-size: .76rem; }
.en-contact a, .en-rights a { color: var(--blue-accent); font-weight: 600; }
.en-docs { margin: 2px 0 0 16px; padding: 0; }
.en-docs li { margin: 1px 0; }
.en-rights { border: 1px solid var(--info-border, #B9D6F2); background: var(--info-bg, #EEF6FD); border-radius: 12px; padding: 8px 10px; font-size: .78rem; line-height: 1.45; margin: 0 0 8px; }
.en-rights b { color: var(--ink); }
.en-rights ul { margin: 3px 0 5px 16px; padding: 0; }

.grade-dob { margin: -2px 0 10px; font-size: .8rem; }
.grade-dob summary { cursor: pointer; color: var(--blue-accent); font-weight: 600; font-size: .78rem; }
.grade-dob .en-gr { margin: 6px 0 0; }

.ml-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.ml-plan select, .ml-plan input { width: auto; min-width: 0; flex: 1 1 120px; font-size: .78rem; padding: 5px 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.ml-plan .ml-ics { font-size: .76rem; padding: 2px 0; }
.ml-status.ml-st-visit   { border-color: #E0A526; }
.ml-status.ml-st-visited { border-color: #5A8DC6; }
.ml-status.ml-st-applied { border-color: #8E44AD; }
.ml-status.ml-st-chosen  { border-color: #27AE60; font-weight: 700; }
.ml-upcoming { border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: 10px; padding: 7px 10px; margin: 0 0 10px; background: var(--surface-2); font-size: .8rem; }
.ml-upcoming ul { list-style: none; margin: 4px 0 0; padding: 0; }
.ml-upcoming li { margin: 2px 0; line-height: 1.35; }
.ml-up-date { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ml-upcoming small { color: var(--muted); }
/* Five popup tabs: one-word labels keep their width (no broken words); "Students & support" takes
   the remaining space and wraps between words. */
.pp-tab { flex: 1 0 auto; min-width: min-content; overflow-wrap: normal; hyphens: manual; padding: 6px 5px; }
.pp-tab[data-tab="students"] { flex: 1 1 auto; }
@media (max-width: 400px) { .pp-tab { padding: 6px 3px; font-size: .7rem; letter-spacing: -.1px; } }

/* ==========================================================================
   20. School path (address results) and district tools (similar districts,
       growing and shrinking schools)
   ========================================================================== */
.en-path { margin: 8px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 8px 10px; }
.en-path summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--ink); }
.en-path .en-gr-row { margin-top: 8px; }
.en-path-res { margin-top: 8px; font-size: .8rem; line-height: 1.4; }
.en-path-list { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 3px solid var(--blue-accent); display: grid; gap: 6px; }
.en-path-list li { position: relative; }
.en-path-list li::before { content: ""; position: absolute; left: -18px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--blue-accent); }
.en-path-yrs { display: block; font-size: .72rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.en-path-list b { color: var(--ink); }
.en-path-list small { color: var(--muted); }
.en-path-gap { color: var(--muted); font-style: italic; }
.en-path-grad { margin: 8px 0 0; font-weight: 700; color: var(--ink); }
.en-path-grad::before { content: "🎓 "; }

.dt-sec { margin: 0 0 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 8px 10px; }
.dt-sec summary { cursor: pointer; list-style: none; font-size: .8rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.dt-sec summary::-webkit-details-marker { display: none; }
.dt-sec summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.dt-sec[open] summary::after { content: "▴"; }
.dt-sec .pp-glance-note { margin: 6px 0 4px; }
.dt-scroll { overflow-x: auto; }
.dt-table { width: 100%; border-collapse: collapse; font-size: .74rem; font-variant-numeric: tabular-nums; }
.dt-table th, .dt-table td { padding: 4px 4px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dt-table th:first-child { text-align: left; white-space: normal; min-width: 88px; }
.dt-table thead th { font-size: .66rem; color: var(--muted); font-weight: 700; }
.dt-table tbody th { font-weight: 600; }
.dt-table a { color: var(--blue-accent); text-decoration: none; }
.dt-table a:hover { text-decoration: underline; }
.dt-me th, .dt-me td { font-weight: 800; color: var(--ink); background: var(--surface); }
.dt-hi { color: #1E6FB8; font-weight: 700; }
.dt-lo { color: #B5531B; font-weight: 700; }
:root[data-theme="dark"] .dt-hi { color: #7DB8F0; }
:root[data-theme="dark"] .dt-lo { color: #F2A36B; }
.dt-key { font-size: .68rem; }
.dt-sub { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 8px 0 3px; }
.dt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .78rem; }
.dt-list li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dt-list small { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.dt-chg { min-width: 42px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dt-chg.up { color: #1E6FB8; } .dt-chg.down { color: #B5531B; }
:root[data-theme="dark"] .dt-chg.up { color: #7DB8F0; }
:root[data-theme="dark"] .dt-chg.down { color: #F2A36B; }
.dt-school { padding: 0; font-size: .78rem; text-align: left; }

/* Composer: map tool buttons never belong on the printed / exported page (scale and attribution stay). */
#sheet .leaflet-control:not(.leaflet-control-scale):not(.leaflet-control-attribution) { display: none !important; }

/* ==========================================================================
   11. Accessibility (WCAG 2.1 AA audit, 2026-11; see accessibility.html)
   ========================================================================== */
/* Small phones: the page title stays in the accessibility tree (1.3.1, 2.4.6) when the brand text is hidden. */
@media (max-width: 420px) {
  .brand > div { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* 320px wide (reflow, 1.4.10): the language button shows only its globe icon (its accessible name stays "Cambiar a español"). */
@media (max-width: 360px) { #lang-btn .btn-label { display: none; } }
/* Address results: the school name is the button (rows with their own links cannot be buttons, 4.1.2). */
.result-open { all: unset; cursor: pointer; font-weight: inherit; border-radius: 4px; }
.result-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* "Skip the map" sits over the top of the map while focused. */
.skip-link.map-skip { position: absolute; left: 8px; top: -80px; z-index: 1200; }
.skip-link.map-skip:focus { top: 8px; }
/* Need badges: the border keeps the need color; the number is a darker (light theme) or lighter (dark theme)
   shade of it so the text reaches 4.5:1 (1.4.3). */
.pp-need, .sc-need-badge { color: color-mix(in srgb, var(--need, #27ae60) 55%, #000); }
.sc-need-badge { border-color: var(--need, #27ae60); }
[data-theme="dark"] .pp-need, [data-theme="dark"] .sc-need-badge { color: color-mix(in srgb, var(--need, #27ae60) 65%, #fff); }
/* Single-key shortcuts switch (2.1.4) */
.shortcuts-toggle { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: .86rem; cursor: pointer; }
.shortcuts-toggle input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--navy); }
[data-theme="dark"] .shortcuts-toggle input { accent-color: var(--gold); }

/* On-map background switcher (js/app.js BasemapSwitchControl): bottom left, above the scale bar */
.bm-switch { position: relative; clear: both; }
.bm-switch-btn { display: block; width: 56px; height: 56px; padding: 0; border: 2px solid var(--surface); border-radius: 12px; overflow: hidden;
  position: relative; cursor: pointer; background: var(--surface); box-shadow: var(--shadow); color: #fff; font: inherit; }
.bm-switch-btn .thumb { position: absolute; inset: 0; }
.bm-switch-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 2px 3px; font-size: .66rem; font-weight: 600; line-height: 1.1;
  background: rgba(11,21,32,.72); color: #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-switch-btn:hover { border-color: var(--blue-accent); }
.bm-switch-btn:focus-visible, .bm-switch-opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bm-switch.open .bm-switch-btn { border-color: var(--blue-accent); }
.bm-switch-pop { position: absolute; left: calc(100% + 8px); bottom: 0; z-index: 1000; width: 252px; max-width: calc(100vw - 96px);
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; }
.bm-switch-pop[hidden] { display: none; }
.bm-switch-title { font-size: .78rem; font-weight: 700; color: var(--muted); padding: 0 2px 6px; }
.bm-switch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bm-switch-opt { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 44px; min-width: 44px; padding: 3px; margin: 0;
  border: 2px solid transparent; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: .72rem; line-height: 1.15; cursor: pointer; text-align: center; }
.bm-switch-opt .thumb { display: block; height: 40px; border-radius: 7px; border: 1px solid var(--border); }
.bm-switch-opt:hover { background: var(--hover); }
.bm-switch-opt[aria-pressed="true"] { border-color: var(--blue-accent); font-weight: 700; }
.bm-switch-open .leaflet-bottom.leaflet-left { z-index: 1001; }
#sheet .bm-switch { display: none; }
@media print { .bm-switch { display: none !important; } }
@media (max-width: 767px) {
  .bm-switch-btn { width: 50px; height: 50px; }
}

/* ==========================================================================
   Phone bottom sheet bar: "Find · 26 schools in view" + ⌃ / ⌄ (js/app.js setSheet)
   ========================================================================== */
.sheet-bar { display: none; }
.attr-toggle { display: none; }
@media (max-width: 767px) {
  /* Half height leaves the map at least ~360px on short phones, so the right-hand map buttons
     and the legend no longer stack on top of each other (360x740). */
  :root { --peek-h: 114px; --half-h: clamp(240px, calc(100vh - 420px), 52vh); }
  #sidebar { height: var(--half-h); }
  #map-wrap { bottom: var(--half-h); }
  .sheet-bar { display: flex; align-items: center; gap: 6px; position: relative; flex-shrink: 0; min-height: 52px;
    padding: 8px 10px 0 16px; background: var(--surface); border-radius: 14px 14px 0 0; touch-action: none; }
  /* The drag handle fills the bar behind the label: drag or tap anywhere on it (as before). */
  .sheet-bar .sheet-handle { position: absolute; inset: 0; display: block; height: auto; padding: 0; margin: 0; z-index: 0;
    background: transparent; border: none; border-radius: inherit; }
  .sheet-bar .sheet-handle span { position: absolute; top: 4px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: var(--border); }
  .sheet-bar-label { position: relative; z-index: 1; pointer-events: none; flex: 1 1 auto; min-width: 0; margin: 0;
    font-size: .86rem; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-bar-label b { color: var(--ink); font-weight: 700; }
  .sheet-arrow { position: relative; z-index: 1; flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--ink); cursor: pointer; }
  .sheet-arrow[hidden] { display: none; }
  .sheet-arrow:hover { background: var(--hover); }
  .sheet-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
  #sheet-toggle[data-dir="up"] svg { transform: rotate(180deg); }
  .sheet-arrow:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .sheet-bar .sheet-handle:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
  #sidebar.collapsed { transform: translateY(calc(100% - var(--peek-h))); }
  #sidebar.collapsed ~ #map-wrap { bottom: var(--peek-h); }
  #sidebar .tabs { margin-top: 0; }

  /* Tile credits: an ⓘ button; the text opens beside it on demand */
  .leaflet-control-attribution { display: flex; align-items: flex-end; gap: 4px; padding: 0 !important; background: transparent !important; border-radius: 0; }
  .attr-toggle { display: grid; place-items: center; order: 2; width: 32px; height: 32px; margin: 0 4px 4px 0; padding: 0; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: 50%; background: var(--glass); color: var(--muted); cursor: pointer;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .attr-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .attr-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .attr-text { display: none; }
  .attr-open .attr-text { display: block; order: 1; max-width: calc(100vw - 60px); margin-bottom: 4px; padding: 6px 8px; border-radius: 8px;
    background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: .72rem; line-height: 1.4; white-space: normal; }
  .attr-open .attr-toggle { color: var(--ink); border-color: var(--blue-accent); }
}
/* The printed / exported page always shows the full credit line */
#sheet .attr-toggle { display: none !important; }
#sheet .attr-text { display: inline !important; }
@media print { .attr-toggle { display: none !important; } .attr-text { display: inline !important; } }
@media (prefers-reduced-motion: reduce) { #sidebar, .sheet-arrow svg { transition: none !important; } }