/* Wall-time bar charts on the performance page (generated by _tools/gen_perf_pages.py).
   The same markup and look as the RAPTOR landing page's charts. */
.chart-title { margin: 18px 0 0; font-weight: 600; color: var(--ink); }
.chart { margin: 8px 0 6px; max-width: 100%; overflow-x: auto; }  /* a long label scrolls inside the chart, never the page */
.chart .row { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 14px; padding: 5px 7.5rem 5px 0; }  /* right padding: room for the value label after the longest bar */
.chart .who { color: var(--ink); font-size: 15px; display: flex; align-items: center; gap: 8px; }
.chart .chip { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.chart .track { position: relative; height: 20px; }
.chart .fill { position: absolute; left: 0; top: 3px; height: 13px; border-radius: 0 7px 7px 0; background: var(--mark-neutral); }
.chart .row.us .fill { background: var(--mark-raptor); }
.chart .val { position: absolute; max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; top: 0; font-size: 14px; color: var(--ink); white-space: nowrap; padding-left: 9px; font-variant-numeric: tabular-nums; }
.axis-note { font-size: 14px; color: var(--ink-secondary); margin: 4px 0 0 214px; }
@media (max-width: 720px) {
  .chart .row { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 5px 5.5rem 7px 0; }
  .axis-note { margin-left: 0; }
}
/* wide tables (per-N wall times, the interop matrix) scroll inside their own box on a narrow screen */
.bd-article table.table, .bd-article table.docutils { display: block; max-width: 100%; overflow-x: auto; }