@layer components {
  .results {
    --results-spacer: var(--block-space);

    display: grid;
    gap: calc(var(--results-spacer) * 2);
    margin: 0 auto;
    max-inline-size: min(100ch, 100%);
    padding-block-end: calc(var(--footer-height) + var(--block-space) + env(safe-area-inset-bottom));
  }

  .results__panel {
    --panel-size: 100%;
    --panel-padding: calc(var(--results-spacer) / 1);

    display: flex;
    flex-direction: column;
    gap: calc(var(--results-spacer) / 2);
    min-block-size: 100%;
    min-inline-size: 0;

    @media (min-width: 960px) {
      --panel-padding: calc(var(--results-spacer) * 1.5) calc(var(--results-spacer) * 2);
    }
  }

  .results__table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .results__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-small);
  }

  .results__th {
    text-align: left;
    padding: 0.75em 0.5em;
    border-bottom: 2px solid var(--color-ink-light);
    font-weight: 600;
    white-space: nowrap;
  }

  .results__th--numeric {
    text-align: right;
  }

  .results__td {
    padding: 0.75em 0.5em;
    border-bottom: 1px solid var(--color-ink-lightest);
    vertical-align: top;
  }

  .results__td--numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .results__row--pending {
    opacity: 0.6;
  }

  .results__checkpoint-name {
    font-weight: 500;
  }

  .txt-positive {
    color: var(--color-positive);
  }

  .txt-negative {
    color: var(--color-negative);
  }

  .badge--positive {
    background-color: var(--color-positive-lightest);
    color: var(--color-positive);
  }

  .badge--warning {
    background-color: var(--color-warning-lightest);
    color: var(--color-warning);
  }

  .badge--negative {
    background-color: var(--color-negative-lightest);
    color: var(--color-negative);
  }
}