.school-network { --network-gold: var(--color-daurat, #d9b44a); --network-gold-ink: #725316; --network-gold-soft: var(--color-daurat-soft, #fff7df); padding: 80px 20px; background: var(--color-surface-2, #f8faff); color: var(--color-text, #182235); }
.school-network, .school-network * { box-sizing: border-box; }
.school-network-header { text-align: center; max-width: 650px; margin: 0 auto 40px; }
.school-network-label { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 999px; background: var(--network-gold-soft); color: var(--network-gold-ink); font-size: 14px; font-weight: 700; }
.school-network-header h2 { margin: 24px 0 12px; font-size: 28px; line-height: 1.3; font-weight: 700; color: inherit; }
.school-network-header p { color: var(--color-subtext, #667085); font-size: 14px; }
.school-network-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
#school-network-map { height: 400px; width: 100%; border-radius: 16px; overflow: hidden; z-index: 0; }
.school-network-panel { background: var(--color-surface, white); border: 1px solid rgba(217,180,74,.3); border-radius: 16px; padding: 20px; max-height: 440px; overflow-y: auto; }
.school-network-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.school-network-panel h3 { margin: 0; font-size: 16px; color: inherit; }
#school-network-count { min-width: 40px; height: 32px; }
.school-network-panel summary { cursor: pointer; padding: 6px 0; font-size: 16px; font-weight: 600; }
.school-network-panel details details { margin-left: 10px; }
.school-network-panel details details summary { font-size: 14px; font-weight: 400; color: var(--color-text, #182235); }
.school-network-panel button { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text, #182235); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.school-network-panel button:hover { background: var(--network-gold-soft); }
.school-network-panel button:focus-visible, .school-network-panel summary:focus-visible { outline: 2px solid var(--network-gold-ink); outline-offset: 2px; }
#school-network-reset { margin-top: 16px; color: var(--network-gold-ink); font-weight: 600; }
.school-network-marker { display: flex; align-items: center; justify-content: center; background: transparent; border: 0; }
.school-network-marker div { pointer-events: none; flex-shrink: 0; width: 14px; height: 14px; background: var(--network-gold); border-radius: 50%; box-shadow: 0 0 0 6px rgba(217,180,74,.24); }
.school-network-cluster { display: flex; align-items: center; justify-content: center; background: transparent; border-radius: 50%; }
.school-network-cluster span { pointer-events: none; box-shadow: 0 0 0 4px rgba(217,180,74,.38), 0 2px 8px rgba(24,34,53,.25); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--network-gold); color: #0b1d46; border: 2px solid #fff7df; border-radius: 50%; font-size: 17px; font-weight: 800; line-height: 1; }
[data-theme="dark"] .school-network { --network-gold-ink: var(--color-daurat, #f5d36a); }
[data-theme="dark"] .school-network-panel { background: #1f2937; border-color: var(--color-text, #182235); }
[data-theme="dark"] .school-network-header p, [data-theme="dark"] .school-network-panel details details summary, [data-theme="dark"] .school-network-panel button { color: #cbd5e1; }
[data-theme="dark"] .school-network-panel button:hover { background: var(--network-gold-soft); }
@media (max-width: 767px) {
  .school-network { padding: 48px 16px; }
  .school-network-header h2 { font-size: 25px; }
  .school-network-layout { grid-template-columns: 1fr; }
  #school-network-map { height: 340px; }
  .school-network-panel { max-height: 340px; }
}

.school-network-popup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.school-network-popup-actions a, .school-network-popup-actions button { padding: 8px 12px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.school-network-popup-actions a { color: var(--network-gold-ink); background: var(--network-gold-soft); }
.school-network-popup-actions button { border: 0; color: #182235; background: var(--network-gold); }
.school-network-popup-actions :focus-visible { outline: 2px solid var(--network-gold-ink); outline-offset: 2px; }

/* Tone only the map tiles; keep markers, labels and controls crisp. */
#school-network-map { border: 1px solid rgba(217,180,74,.3); background: #f3eddf; }
#school-network-map .leaflet-tile-pane { filter: saturate(.95) sepia(.06); }
#school-network-map .leaflet-bar { border: 1px solid rgba(217,180,74,.45); box-shadow: var(--shadow-xs); }
#school-network-map .leaflet-bar a { background: var(--color-surface, white); color: var(--network-gold-ink); border-bottom-color: rgba(217,180,74,.3); }
#school-network-map .leaflet-bar a:hover { background: var(--network-gold-soft); }
#school-network-map .leaflet-control-attribution { background: var(--color-surface, white); color: var(--color-subtext, #667085); }
#school-network-map .leaflet-control-attribution a { color: var(--network-gold-ink); }
#school-network-map .leaflet-popup-content-wrapper, #school-network-map .leaflet-popup-tip { background: var(--color-surface, white); color: var(--color-text, #182235); }
[data-theme="dark"] #school-network-map .leaflet-tile-pane { filter: brightness(.85) saturate(.85) sepia(.06); }

/* Generous touch targets without enlarging the visible gold dots. */
#school-network-map .school-network-marker, #school-network-map .school-network-cluster { touch-action: manipulation; }
@media (pointer: coarse), (max-width: 767px) {
  .school-network-popup-actions a, .school-network-popup-actions button { display: inline-flex; align-items: center; min-height: 44px; }
  #school-network-map .leaflet-popup-close-button { width: 44px; height: 44px; line-height: 44px; }
  #school-network-map .leaflet-popup-content { margin-right: 36px; }
}
