Make dashboard usable on mobile

Move inline styles into assets/style.css with wrapping KPI and chart rows,
a horizontally scrolling tab bar, and phone breakpoints. Shared components
put chart titles in HTML headings, legends above plots, and disable
drag-to-zoom so swiping scrolls the page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01X9jG4CUFcH6n4vFvgtwndY

src/admin_analytics/dashboard/assets/style.css

@@ -0,0 +1,159 @@
+/* Served automatically by Dash from the assets/ folder. */
+
+body {
+    margin: 0;
+    background: #fff;
+}
+
+.app {
+    font-family: system-ui, -apple-system, sans-serif;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.app-title {
+    text-align: center;
+    color: #00539F;
+    padding: 20px;
+    margin: 0;
+    font-size: 2rem;
+}
+
+/* Tabs: one horizontally scrollable row at every width, instead of the
+   vertical stack dcc.Tabs switches to on small screens. */
+.tabs-bar {
+    display: flex !important;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    margin-bottom: 20px;
+}
+
+.tabs-bar .tab {
+    flex: 1 0 auto !important;
+    width: auto !important;
+    white-space: nowrap;
+    padding: 12px 16px !important;
+}
+
+.tab-content {
+    padding: 0 20px 20px 20px;
+}
+
+.no-data {
+    text-align: center;
+    padding: 40px;
+    color: #888;
+}
+
+/* KPI cards wrap onto multiple lines rather than squeezing. */
+.kpi-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.kpi-card {
+    flex: 1 1 200px;
+    padding: 20px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.kpi-card h4 {
+    margin: 0;
+    color: #666;
+    font-size: 14px;
+}
+
+.kpi-card h2 {
+    margin: 5px 0;
+    color: #00539F;
+}
+
+.kpi-card p {
+    margin: 0;
+    color: #999;
+    font-size: 12px;
+}
+
+/* Side-by-side charts stack once each would be narrower than ~450px. */
+.chart-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.chart-row > * {
+    flex: 1 1 450px;
+    min-width: 0;
+}
+
+.chart {
+    margin-bottom: 16px;
+}
+
+.chart-title {
+    margin: 16px 0 0 0;
+    font-size: 17px;
+    font-weight: 500;
+    color: #2a3f5f;
+}
+
+.filter-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+}
+
+.filter-bar .dash-dropdown {
+    width: 200px;
+}
+
+.note {
+    color: #555;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+@media (max-width: 600px) {
+    .app-title {
+        font-size: 1.25rem;
+        padding: 12px;
+    }
+
+    .tab-content {
+        padding: 0 12px 12px 12px;
+    }
+
+    .kpi-row {
+        gap: 8px;
+    }
+
+    .kpi-card {
+        flex-basis: 140px;
+        padding: 12px;
+    }
+
+    .kpi-card h2 {
+        font-size: 1.3rem;
+    }
+
+    /* Charts are view-only on phones; the toolbar overlaps titles. */
+    .modebar-container {
+        display: none;
+    }
+}
+
+/* Markdown tables (About page) scroll within themselves instead of
+   widening the page. */
+.tab-content table {
+    display: block;
+    overflow-x: auto;
+    max-width: 100%;
+}