body { margin: 0; background: #f7f7f5; font-family: 'Inter', sans-serif; color: #2c2c2c; }

.tell-header {
    background: #513773; padding: 18px 40px;
    display: flex; align-items: center; gap: 16px;
}
.tell-header img { height: 44px; object-fit: contain; }
.tell-header .site-label {
    color: rgba(255,255,255,0.75); font-size: 12px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
}
.tell-intro { max-width: 860px; margin: 0 auto; padding: 52px 40px 36px; }
.tell-intro h1 { font-size: 2rem; font-weight: 700; color: #513773; line-height: 1.25; margin-bottom: 18px; }
.tell-intro p { font-size: 1rem; line-height: 1.75; color: #444; margin: 0; }
.tell-footer {
    text-align: center; padding: 24px 40px; font-size: 12px;
    color: #999; border-top: 1px solid #e5e5e5; margin-top: 40px;
}
.tell-footer a { color: #54639E; text-decoration: none; }
.tell-footer a:hover { text-decoration: underline; }

/* Filters: keep the three dropdowns on one row */
.tell-filters { display: flex; flex-wrap: nowrap; align-items: flex-end; }

/* Never let a graph push the page wider than the screen */
.tell-app, .tell-map-row, .tell-pies { max-width: 100%; }
.tell-map-row .js-plotly-plot,
.tell-pies .js-plotly-plot { max-width: 100% !important; }

/* ── Responsive: dashboard on phones ──────────────────────────────────── */
@media (max-width: 768px) {
    /* Tighter outer padding to reclaim screen width */
    .tell-app { padding: 12px !important; }

    /* Filters: stack the dropdowns full width */
    .tell-filters { flex-direction: column !important; }
    .tell-filter-col { width: 100% !important; }

    /* Stack the flex rows vertically (override inline display:flex) */
    .tell-kpis,
    .tell-map-row,
    .tell-pies,
    .tell-buttons { flex-direction: column !important; }

    /* Map/region graphs and their wrappers fill the width, shorter height */
    .tell-map-row > div { width: 100% !important; flex: none !important; }
    .tell-map-row .dash-graph,
    .tell-map-row .js-plotly-plot { height: 360px !important; width: 100% !important; }

    /* Distribution charts: full width, one per row */
    .tell-pies > .dash-graph,
    .tell-pies .js-plotly-plot { width: 100% !important; flex: none !important; height: 300px !important; }

    /* Buttons go full width and easier to tap */
    .tell-buttons > a,
    .tell-buttons > button { width: 100% !important; text-align: center; }
}