@layer modules {
  /* The one data table, after Carbon: a header on the accent layer, 16px cell padding, and rows that always answer the pointer. */
  .table-scroll { position: relative; overflow-x: auto; }
  .data-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 1.4rem; }
  /* Carbon row sizes: small 32, large 48, extra large 64 for a cell that holds more than one line. */
  .data-table th, .data-table td { height: 4.8rem; padding: 0 1.6rem; text-align: left; vertical-align: middle; }
  .data-table.is-compact th, .data-table.is-compact td { height: 3.2rem; }
  .data-table.is-tall th, .data-table.is-tall td { height: 6.4rem; padding-top: 1.6rem; padding-bottom: 1.6rem; vertical-align: top; }
  .data-table thead th { background: var(--table-head); color: var(--ink); font-weight: 600; white-space: nowrap; }
  .data-table tbody th, .data-table td { border-top: 1px solid var(--line); color: var(--ink-2); font-weight: 400; }
  .data-table tbody th { color: var(--ink); }
  .data-table tbody tr:hover { background: var(--surface-hover); }
  .data-table tbody tr:hover th, .data-table tbody tr:hover td { color: var(--ink); }
  .data-table .is-number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .data-table .is-subtle { display: block; font-size: 1.2rem; color: var(--ink-3); }
  .data-table code { padding: 0; border: 0; background: none; font-size: 1.3rem; overflow-wrap: anywhere; }
  .data-table .status { display: inline-flex; align-items: center; gap: .4rem; color: var(--error); white-space: nowrap; }
  .data-table .status .icon { width: 1.4rem; height: 1.4rem; }
}