/* Comparison pages reuse /guides/guides.css; these rules only cover the
   wide comparison table and the sources list. */
.table-scroll {
  overflow-x: auto;
  margin: 1rem 0 1.2rem;
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible {
  outline: 3px solid var(--wine);
  outline-offset: 4px;
}
.table-scroll .comparison {
  min-width: 38rem;
  margin: 0;
}
.comparison tbody th {
  color: var(--ink);
  font-weight: 550;
}
.comparison thead th:nth-child(2),
.comparison tbody td:first-of-type {
  background: var(--paper-deep);
}
.sources {
  border-top: 1px solid var(--rule);
  margin-top: 2.8rem;
  font-size: 0.95rem;
  color: var(--soft);
}
/* Keep the wide table inside its scroller: without this the implicit grid
   column grows to the table's min-width and the page scrolls sideways. */
.article-shell {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 58rem) {
  .article-shell {
    grid-template-columns: minmax(0, 43rem) minmax(10rem, 15rem);
  }
}
/* Keep the row labels visible while the app columns scroll sideways. */
.comparison tbody th,
.comparison thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper);
  box-shadow: 1px 0 0 var(--rule);
}