/*
 * Where a reading sits between the lowest and the highest (shared/_range_track;
 * tasks/growth, index R17): a 0–100 track with a marker at the reading's
 * share, set by the markup as `--position` — M10's metric pages for a
 * company's own ten years, M13's scores. The two ends are labelled under it.
 */
@layer components {
  .range-track {
    position: relative;
    block-size: var(--space-2xs);
    margin-block: var(--space-sm) var(--space-2xs);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-sunken);
  }

  .range-track__marker {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--position, 50%);
    inline-size: var(--space-sm);
    block-size: var(--space-sm);
    border: var(--rule-width) solid var(--color-surface);
    border-radius: var(--radius-pill);
    background-color: var(--color-accent);
    translate: -50% -50%;
  }

  .range-track__ends {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }
}