@layer components {

  /* Every table on the plain pages and in the documentation sits in one (.table-scroll): too wide for its card or
     sheet, it scrolls sideways instead of running out, its first column (what the row is) staying put. That cell
     takes the surface behind the table; a component's own head background (the documentation's) outranks it. */
  .table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: none; /* no rubber band at its ends, nor passing the swipe on to the page */

    /* In a card the table runs edge to edge, over the card's padding (.card-table). */
    &:has(> .card-table) {
      margin-inline: -14px;
    }
  }

  /* Kept low (:where) so a table's own head background wins. */
  :where(.table-scroll > table) :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    white-space: nowrap; /* what the row is, on one line: the rest scrolls past it */
    background: var(--color-surface);
  }

  @media print {
    .table-scroll {
      overflow: visible;
    }
  }
}