@layer components {
  .table {
    border-collapse: collapse;
    inline-size: 100%;
    font-size: var(--text-small);

    th, td {
      padding: var(--block-space-half) var(--inline-space-half);
      text-align: start;
      vertical-align: top;
      border-block-end: 1px solid var(--color-ink-lightest);
    }

    th {
      font-weight: 600;
      color: var(--color-ink);
    }

    td {
      color: var(--color-ink-darker);
      overflow-wrap: break-word;
      word-break: break-word;
    }
  }

  .table--striped {
    tbody tr:nth-child(odd) {
      background-color: oklch(var(--lch-ink-lightest) / 50%);
    }
  }

  .table--hover {
    tbody tr:hover {
      background-color: var(--color-ink-lightest);
    }
  }

  .table__header {
    background-color: var(--color-ink-darkest);
    color: var(--color-ink-inverted);

    th {
      border: none;
      color: var(--color-ink-inverted);
    }
  }

  /* Sticky columns — opt-in per cell */
  .col-frozen,
  .col-actions {
    position: sticky;
    z-index: 1;
    background: var(--color-canvas);
  }

  .col-frozen {
    left: 0;
  }

  .col-actions {
    right: 0;
  }

  .table--hover tbody tr:hover .col-frozen,
  .table--hover tbody tr:hover .col-actions {
    background: var(--color-ink-lightest);
  }

  /* Scroll wrapper for wide tables */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Dimmed row */
  .table tbody tr.row-dimmed {
    opacity: 0.5;
  }
}