.pi-result-context { margin-block: 1.25rem; }
.pi-result-context__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin-block: .75rem; }
.pi-result-context dt { color: var(--pi-ink-650); font-size: .875rem; }
.pi-result-context dd { margin: .25rem 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pi-result-connection { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-block: .75rem; }
.pi-result-connection[hidden], .pi-result-connection button[hidden], [data-connection-retry][hidden] { display: none; }
.pi-result-scroll-cue, [data-chart-window-label] { color: var(--pi-ink-650); font-size: .875rem; margin-block: .5rem; }
[data-result-table-scroll] { max-width: 100%; overflow-x: auto; }

@media (min-width: 768px) {
  [data-result-table-scroll] tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--pi-paper); box-shadow: 1px 0 var(--pi-rule); }
}
@media (max-width: 575px) {
  #stats_result_table:has(td[data-title]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #stats_result_table:has(td[data-title]), #stats_result_table:has(td[data-title]) tbody { display: block; }
  #stats_result_table:has(td[data-title]) tr:not([hidden]) { display: block; margin-block: .75rem; border: 1px solid var(--pi-rule); }
  #stats_result_table:has(td[data-title]) th[scope="row"] { display: block; background: var(--pi-canvas); }
  #stats_result_table td[data-title] { display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  #stats_result_table td[data-title]::before { content: attr(data-title); text-align: left; overflow-wrap: anywhere; }
}
@media (forced-colors: active) {
  .pi-result-context, [data-result-table-scroll] { border: 1px solid CanvasText; }
}