Improve school modal charts for mobile visualization

- Make charts taller on mobile with better aspect ratios (0.9 for <480px, 1.1 for <768px)
- Shorten chart title and dataset labels on mobile
- Add responsive font sizes for legend, title, and axis ticks
- Add mobile-specific styling for chart container, stats grid, and modal
- Add extra-small screen breakpoint (480px) for very narrow devices

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/styles.css

@@ -1420,12 +1420,76 @@ body {
         width: 100%;
     }
 
+    .modal-body {
+        padding: 1rem;
+    }
+
+    .modal-chart-container {
+        margin-bottom: 1.5rem;
+        padding: 0.5rem;
+        background: var(--bg-secondary);
+        border-radius: var(--radius-md);
+    }
+
+    .modal-chart-container canvas {
+        max-height: 280px;
+    }
+
+    .modal-stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.5rem;
+    }
+
+    .modal-stat {
+        padding: 0.75rem 0.5rem;
+    }
+
+    .modal-stat-value {
+        font-size: 1.25rem;
+    }
+
+    .modal-stat-label {
+        font-size: 0.65rem;
+    }
+
     .rankings-controls {
         flex-direction: column;
         align-items: stretch;
     }
 }
 
+/* Extra small screens */
+@media (max-width: 480px) {
+    .modal-content {
+        margin: 0.5rem;
+        max-height: calc(100vh - 1rem);
+    }
+
+    .modal-header {
+        padding: 1rem;
+    }
+
+    .modal-header h2 {
+        font-size: 1.25rem;
+    }
+
+    .modal-chart-container canvas {
+        max-height: 260px;
+    }
+
+    .modal-stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .modal-stat-value {
+        font-size: 1.1rem;
+    }
+
+    .modal-map {
+        height: 160px;
+    }
+}
+
 /* =============================================================================
    TOOLTIP SYSTEM
    ============================================================================= */