/* Axis cells: one axis grade as ten discrete cells, never a bar. The warm
   status colour marks the weakest axis only, always with its text label. */

.axis-cells {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.axis-cells__name {
  flex-basis: 9em;
  text-transform: capitalize;
}

.axis-cells__track {
  display: inline-flex;
  gap: var(--space-3xs);
}

.axis-cells__cell {
  inline-size: var(--space-s);
  block-size: var(--space-s);
  border-radius: var(--radius-sm);
  background-color: var(--bg-cell-empty);
}

.axis-cells__cell[data-filled] {
  background-color: var(--accent);
}

.axis-cells__grade {
  color: var(--text-secondary);
}

.axis-cells__flag {
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-pill);
  background-color: var(--warn-soft);
  color: var(--warn-ink);
  font-size: var(--step--1);
}

.axis-cells[data-weakest] .axis-cells__cell[data-filled] {
  background-color: var(--warn);
}