@layer components {
  .probe__cell {
    display: flex;
    gap: 0.5em;
  }

  .probe__icon {
    flex-shrink: 0;
  }

  .probe__name {
    font-weight: 500;
  }

  .probe__target {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    margin-top: 0.125em;
  }

  .probe__badge {
    background: var(--color-ink-lighter);
    border-radius: 0.125rem;
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    padding: 0.25em 0.5em;
    text-transform: uppercase;
  }

  .status--ok {
    color: var(--color-positive);
    font-weight: 500;
  }

  .status--fail {
    color: var(--color-negative);
    font-weight: 600;
  }

  .probe-results__chart {
    background: oklch(var(--lch-ink-lightest) / 85%);
    border-radius: 0.25rem;
    box-shadow: var(--shadow);
    margin-bottom: calc(var(--block-space) * 1.5);
    padding: var(--block-space);

    circle {
      stroke: none;
    }

    text {
      font-family: var(--font-mono);
      font-size: var(--text-x-small);
    }
  }

  @media (max-width: 140ch) {
    .probe__target {
      display: none;
    }

    .probe__cell {
      gap: 0.25em;
    }
  }

  @media (max-width: 55ch) {
    .probe__name {
      word-break: break-word;
    }
  }
}