/* Percentile bar — one row of label / value / percent-rank track. The fill
 * sweeps red (low) through amber to green (high) from --percentile.
 * Wrappers: .percentile-bar-groups (multi-column category panel) and
 * .percentile-bar-list (single centered list).
 * ---------------------------------------------------------------------- */

@layer components {
  .percentile-bar {
    align-items: center;
    border-block-end: 1px solid var(--color-border-subtle);
    display: grid;
    font-size: 0.8125rem;
    gap: var(--space-s);
    grid-template-columns: 1fr auto 6rem;
    padding-block: 0.4375rem;
  }

  .percentile-bar:last-child {
    border-block-end: 0;
  }

  .percentile-bar__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .percentile-bar__value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: end;
  }

  .percentile-bar__track {
    background-color: var(--color-ink-lightest);
    block-size: 0.25rem;
    border-radius: 999px;
    overflow: hidden;
  }

  .percentile-bar__fill {
    background-color: oklch(0.62 0.16 calc(25deg + var(--percentile) * 1.2deg));
    block-size: 100%;
    border-radius: inherit;
    display: block;
    inline-size: calc(var(--percentile) * 1%);
  }

  .percentile-bar__fill--neutral {
    background-color: var(--color-accent);
  }

  .percentile-bar-groups {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }

  .percentile-bar-list {
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 42rem;
  }

  @media (max-width: 30rem) {
    .percentile-bar {
      grid-template-columns: 1fr auto;
    }

    .percentile-bar__track {
      display: none;
    }
  }
}