/* SVG coordinates must not shrink text below its readable screen size. */
.readable-chart { width: 100%; max-width: 100%; overflow-x: auto; padding: 6px 0 14px; }
.readable-chart svg { max-width: none !important; height: auto !important; }
.readable-chart svg text { font-size: 16px !important; }
.chart-area:has(> .readable-chart) { height: auto; min-height: 240px; }
.travel-content .history-chart { overflow-x: auto; padding-bottom: 12px; }
.travel-content .history-chart svg { min-width: 760px; width: 100% !important; max-width: none; height: auto; }
.readable-chart:focus-visible, .history-chart:focus-visible { outline: 3px solid #b71959; outline-offset: 3px; }

@media (max-width: 900px) { .travel-content .chart-scroll-hint { display: block !important; } }

.readable-chart text[fill="#9ca3af"], .readable-chart .chart-axis-label:not([fill]) { fill: #52616d; }
.mock-dashboard { overflow-x: auto; }