@layer components {
  .table-scroll { overflow-x: auto; margin-block: var(--space-l) var(--space-3xl); }

  .table-scroll table {
    border-collapse: collapse;
    inline-size: 100%;
    font-size: var(--text-s);
  }

  .table-scroll th,
  .table-scroll td {
    text-align: left;
    padding: var(--space-xs) var(--space-inline-xs);
    border-block-end: 1px solid var(--card-border);
    vertical-align: top;
  }

  .table-scroll thead th {
    font-size: var(--text-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--quiet);
  }

  .table-scroll tbody th {
    font-weight: 700;
    white-space: nowrap;
  }

  .table-scroll td { font-family: var(--font-mono); }

  .table-scroll table.modules td:first-of-type { font-family: var(--font-sans); }
}