@layer components {
  .table {
    border-collapse: collapse;
    inline-size: 100%;

    th {
      color: var(--color-ink-medium);
      font-size: var(--text-x-small);
      font-weight: 600;
      letter-spacing: 0.05em;
      padding: var(--block-space-half) var(--inline-space);
      text-align: start;
      text-transform: uppercase;
      white-space: nowrap;
    }

    td {
      border-block-start: 1px solid var(--color-ink-light);
      font-size: var(--text-small);
      padding: var(--block-space-half) var(--inline-space);
      vertical-align: middle;
    }
  }

  /* Wrap wide tables so they scroll inside their panel */
  .table__scroller {
    overflow-x: auto;
  }

  /* Render alternate narrow and wide presentations from the same collection.
     The switch follows the component's available width, not the viewport. */
  .responsive-collection {
    container: responsive-collection / inline-size;
  }

  .responsive-collection__wide {
    display: none;
  }

  .responsive-collection__narrow {
    display: grid;
    gap: var(--block-space);
    list-style: none;
    margin: var(--block-space) 0;
    padding: 0;
  }

  .table-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-ink-light);
    display: grid;
    gap: var(--block-space-half);
    padding: var(--block-space) var(--inline-space-double);
  }

  @container responsive-collection (min-width: 80ch) {
    .responsive-collection__wide {
      display: block;
    }

    .responsive-collection__narrow {
      display: none;
    }
  }

  /* Row actions inside tables stay compact */
  .table
    .btn:not(
      :where(
        .btn--circle,
        [aria-label]:has(.icon),
        :has(.for-screen-reader):has(.icon)
      )
    ) {
    --btn-padding: var(--inline-space);

    border: 0;
  }

  /* Solid fills, like v1's badges: ink for neutral types, red for incidents. */
  .chip {
    align-items: center;
    background-color: var(--chip-bg, var(--color-ink));
    border: 1px solid transparent;
    color: var(--chip-color, var(--color-ink-inverted));
    column-gap: var(--column-gap, var(--inline-space-half));
    display: flex;
    font-size: var(--text-xx-small);
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 0.25ch 1ch;
    row-gap: var(--row-gap, var(--block-space-half));
    text-transform: uppercase;
    width: fit-content;
    white-space: nowrap;
  }

  .chip--negative {
    --chip-bg: var(--color-negative);
  }

  .chip--info {
    --chip-bg: var(--color-info);
  }

  /* The chip's type without its fill, for labels set in rows of text. */
  .chip--transparent {
    --chip-bg: transparent;
    --chip-color: var(--color-ink-dark);

    padding-inline: 0;
  }

  .chip--subtle {
    --chip-bg: var(--color-ink-lighter);
    --chip-color: var(--color-ink-darker);

    html[data-theme="dark"] & {
      --chip-bg: var(--color-ink-light);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        --chip-bg: var(--color-ink-light);
      }
    }
  }
}