@layer components {
  .experiment {
    container-type: inline-size;
  }

  .experiment__section {
    display: grid;
    gap: 0.75rem;
    max-inline-size: 52rem;
  }

  .experiment__hypothesis {
    margin: 0;
    white-space: pre-line;
    text-wrap: pretty;
  }

  .experiment__subtitle {
    margin-block-start: 0.75rem;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--text-sm--line-height);
  }

  .experiment__note {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    text-wrap: pretty;
  }

  /* The variant's fields, grouped under one legend. */
  .experiment-variant {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    & > legend {
      padding-inline: 0.25rem;
    }

    & > .field__hint {
      margin: 0;
    }
  }

  /* Arms stack on a narrow page and sit side by side once there is room. */
  .experiment-arms {
    display: grid;
    gap: 0.75rem;

    @container (inline-size >= 36rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .experiment-arm {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
  }

  .experiment-arm__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .experiment-arm__title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
  }

  .experiment-arm__share,
  .experiment-arm__note {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }

  /* What the variant swaps, so the difference reads at a glance. */
  .experiment-arm__changed {
    margin-inline: -0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--accent);

    dd {
      font-weight: var(--font-weight-medium);
    }
  }

  /* Wide tables scroll inside their own box on a narrow screen. */
  .experiment-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  .experiment-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-variant-numeric: tabular-nums;

    th,
    td {
      padding: 0.5rem 0.75rem;
      text-align: end;
      white-space: nowrap;
    }

    th:first-child {
      text-align: start;
      font-weight: var(--font-weight-medium);
    }

    thead th {
      color: var(--muted-foreground);
      font-weight: var(--font-weight-medium);
      background: var(--muted);
    }

    tbody tr + tr {
      border-block-start: 1px solid var(--border);
    }
  }

  .experiment-change--good {
    color: light-dark(oklch(0.527 0.154 150.069), oklch(0.792 0.209 151.711));
  }

  .experiment-change--bad {
    color: var(--destructive);
  }

  .experiment-change--neutral {
    color: var(--muted-foreground);
  }

  .experiment-configurations {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .experiment-configurations__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
}