@layer components {

  /* Base
  /* ------------------------------------------------------------------------ */

  .genre {
    align-items: baseline;
    display: flex;
    gap: var(--inline-space-half);
  }

  /* Capped so one long genre name can't widen the column for every row;
     the full breakdown is in the cell's title */
  .genre__name {
    max-inline-size: var(--genre-name-max-inline-size, 16ch);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .genre__weight {
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* How many other genres carry a meaningful share */
  .genre__more {
    color: var(--color-ink-muted);
    font-size: var(--text-x-small);
    white-space: nowrap;
  }
}