.school-mode-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin:0 0 14px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f5f8fc;
}
.school-mode-tabs button{
  min-height:38px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#66758b;
  font-size:14px;
  font-weight:700;
}
.school-mode-tabs button.active{
  background:#fff;
  color:var(--navy);
  box-shadow:0 2px 9px rgba(18,58,120,.1);
}
.school-mode-tabs button:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:2px;
}
#schools-view .filters{
  margin-right:-18px;
  margin-left:-18px;
  padding-right:18px;
  padding-left:18px;
}
.school-map-panel{
  position:relative;
  width:100%;
  height:clamp(360px,56vh,590px);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:#edf2f7;
  box-shadow:0 10px 26px rgba(18,58,120,.08);
}
.school-map-panel[hidden]{display:none}
.school-map-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.school-map-loading{
  position:absolute;
  inset:0;
  z-index:1100;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:7px;
  padding:24px;
  background:rgba(255,255,255,.94);
  color:var(--navy);
  text-align:center;
}
.school-map-loading[hidden]{display:none}
.school-map-loading small{
  color:var(--muted);
  font-size:11px;
  font-weight:400;
}
.school-map-toolbar{
  position:absolute;
  top:10px;
  left:10px;
  right:68px;
  z-index:1002;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:40px;
  padding:7px 8px 7px 12px;
  border:1px solid rgba(220,229,240,.92);
  border-radius:11px;
  background:rgba(255,255,255,.96);
  box-shadow:0 5px 18px rgba(18,58,120,.12);
  color:#53647a;
  font-size:11px;
  font-weight:600;
}
.school-map-toolbar[hidden]{display:none}
.school-map-toolbar button,
.school-map-selection button{
  flex:0 0 auto;
  min-height:30px;
  border:0;
  border-radius:8px;
  background:var(--navy);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:0 11px;
}
.school-map-selection{
  position:absolute;
  left:10px;
  right:10px;
  bottom:48px;
  z-index:1002;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 10px 11px 13px;
  border:1px solid rgba(220,229,240,.95);
  border-radius:12px;
  background:rgba(255,255,255,.97);
  box-shadow:0 9px 24px rgba(18,58,120,.16);
}
.school-map-selection[hidden]{display:none}
.school-map-selection div{min-width:0}
.school-map-selection strong,
.school-map-selection span{display:block}
.school-map-selection strong{
  overflow:hidden;
  color:#17253a;
  font-size:14px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.school-map-selection span{
  margin-top:3px;
  color:#6f7f92;
  font-size:10px;
  line-height:1.35;
}
.school-map-spinner{
  width:28px;
  height:28px;
  margin-bottom:4px;
  border:3px solid #dbe6f3;
  border-top-color:var(--navy);
  border-radius:50%;
  animation:school-map-spin .8s linear infinite;
}
.school-map-legend{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:1001;
  display:flex;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(220,229,240,.9);
  border-radius:9px;
  background:rgba(255,255,255,.94);
  box-shadow:0 5px 18px rgba(18,58,120,.12);
  color:#5f6f84;
  font-size:10px;
}
.school-map-legend[hidden]{display:none}
.school-map-legend span{display:flex;align-items:center;gap:5px}
.school-map-legend i{display:block;flex:0 0 auto}
.school-map-legend .legend-boundary{
  width:15px;
  height:10px;
  border:2px solid var(--navy);
  background:rgba(18,58,120,.14);
}
.school-map-legend .legend-school{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(215,55,50,.25);
}
.school-map-note{
  margin:10px 2px 0;
  color:#7c8999;
  font-size:11px;
  line-height:1.65;
}
@keyframes school-map-spin{to{transform:rotate(360deg)}}
@media(max-width:365px){
  .school-map-panel{height:52vh;min-height:330px}
  .school-map-legend{left:8px;right:auto;gap:8px}
  .school-map-toolbar{left:8px;right:8px}
  .school-map-selection{left:8px;right:8px}
}
@media(prefers-reduced-motion:reduce){.school-map-spinner{animation-duration:1.8s}}