@layer components {
  .data-table {
    inline-size: 100%;
    margin-block: var(--block-space);
    border: var(--border-standard);

    @media (min-width: 48rem) {
      margin-block: var(--block-space-1half);
    }

    html[data-theme="dark"] & {
      opacity: 0.9;
    }
  }

  .data-table__head {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--block-space-half);
    padding-block: var(--block-space-quarter);
    padding-inline: var(--block-space-half);
    background: var(--color-gray-lightest);
    border-block-end: var(--border-standard);
    font-size: var(--text-small);
    font-weight: 400;
    color: var(--color-gray-dark);

    @media (min-width: 48rem) {
      grid-template-columns: 150px 1fr 100px;
      gap: var(--block-space);
    }

    .data-table__link-col {
      text-align: end;
      display: none;

      @media (min-width: 48rem) {
        display: block;
      }
    }
  }

  .data-table__row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--block-space-half);
    padding: var(--block-space-half);
    border-block-end: var(--border-subtle);
    align-items: start;
    font-size: var(--text-small);
    color: var(--color-gray-dark);

    @media (min-width: 48rem) {
      grid-template-columns: 150px 1fr 100px;
      gap: var(--block-space);
      padding-block: var(--block-space-quarter);
      padding-inline: var(--block-space-half);
    }

    &:last-child {
      border-block-end: none;
    }

    .data-table__link-col {
      text-align: end;
      display: none;

      @media (min-width: 48rem) {
        display: block;
      }
    }

    ul {
      list-style: disc;
      list-style-position: inside;
      margin-block: var(--block-space-quarter) var(--block-space-3quarter);
    }
  }

  .data-table__row--link {
    text-decoration: none;
    color: inherit;
    transition: background 200ms;

    &:hover {
      background: var(--color-gray-lightest);
    }
  }

  /* Modifier: always 2-col, no link column (careers) */
  .data-table--two-col {
    .data-table__head,
    .data-table__row {
      grid-template-columns: 1fr 2fr;
    }
  }

  /* Modifier: equal 2-col (engineering stack) */
  .data-table--equal {
    .data-table__row {
      grid-template-columns: 1fr 1fr;
      gap: var(--block-space-1half);
    }
  }
}