/* Shared chart and data-table readability for every Wrong Apex article. */
.article-body .chart-figure { margin: 1.8rem 0 2.25rem; }
.article-body .chart-figure > h2 { font-size: 1.55rem; line-height: 1.2; }
.article-body .chart-panel-head h3 { font-size: 1.14rem; line-height: 1.35; }
.article-body .chart-panel-head p { font-size: .84rem; line-height: 1.5; }
.article-body .chart-legend { font-size: .9rem; line-height: 1.45; }
.article-body .circuit-row-head strong,
.article-body .rate-row > strong { font-size: .98rem; line-height: 1.4; }
.article-body .circuit-row-head > span { font-size: .88rem; line-height: 1.45; }
.article-body .rate-lines > div { font-size: .88rem; line-height: 1.4; }
.article-body .rate-lines b { font-size: .9rem; }
.article-body .simple-bar-label { font-size: .98rem; line-height: 1.4; }
.article-body .simple-bar-label > span { font-size: .9rem; line-height: 1.4; }
.article-body .delta-axis,
.article-body .delta-label { font-size: .9rem; line-height: 1.4; }
.article-body .delta-label strong { font-size: .98rem; }
.article-body .chart-note { font-size: .9rem; line-height: 1.55; }
.article-body .chart-figure figcaption { font-size: .92rem; line-height: 1.55; }
.article-body .stat-label { font-size: .76rem; line-height: 1.4; }
.article-body .stat-context { font-size: .88rem; line-height: 1.45; }
.article-body table { max-width: 100%; font-size: .94rem; }
.article-body th,
.article-body td { font-size: inherit; line-height: 1.45; }

@media (max-width: 680px) {
  .article-body .chart-figure { margin: 1.5rem 0 1.8rem; padding: 13px; }
  .article-body .chart-figure > h2 { font-size: 1.35rem; }
  .article-body .chart-panel { padding: 13px 11px; }
  .article-body .chart-panel-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .article-body .chart-panel-head p { text-align: left; overflow-wrap: anywhere; }
  .article-body .circuit-row-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .article-body .circuit-row-head > span { text-align: left; }
  .article-body .rate-chart .rate-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .article-body .rate-lines > div { grid-template-columns: 50px minmax(0, 1fr) 58px; gap: 8px; }
  .article-body .simple-bar-label { align-items: flex-start; flex-wrap: wrap; gap: 2px 10px; }
  .article-body .simple-bar-label > span { text-align: left; }
  .article-body table { display: block; width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
}

/* Keep labels in accepted raster/vector chart graphics readable on narrow screens.
   The figure scrolls internally; the page and accessible values table remain usable. */
.article-body .chart-figure { min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; }
.article-body .chart-figure > img[src$=".svg"] { width: 100%; min-width: 900px; max-width: none; }