/* ============================================================
   Responsive safety net for mirrored chart pages
   (the source pages ship their own viewport meta + mobile media
   queries; this adds the scroll container behaviour and a few
   small-screen guards. Colours live in chart-brand.css.)
   ============================================================ */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Wide chart tables scroll inside their own box instead of pushing
   the whole page sideways on phones. */
.mirror-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.mirror-scroll > table {
    margin-left: auto;
    margin-right: auto;
}

/* The source hides side text at small widths — keep it readable */
@media only screen and (max-width: 560px) {
    .chart-list { width: 95% !important; }
    .chart-panel, .chart-panel.panel-layout { width: 100% !important; }

    /* long unbroken strings never push the page wide */
    .chart-table td,
    .chart-table th { overflow-wrap: anywhere; }

    /* fixed footer button never overlaps the chart list */
    .mp-btn { bottom: 5px; }
}