/* Meter: one square per gate, filled for each passed, in the mono face's rhythm; the words after it
   ("3 to go") in mono after a `·`. The squares are boxes with an ink hairline rather than the
   characters ■ and □, which fall outside the Latin ranges the self-hosted mono face is declared for
   (fonts.css) and so come from a fallback face. Round where it rests on
   something (a pill gives it a round of the shell's colour, pill.css); square itself, because each
   square is a gate, cut. */
.meter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono-number-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.meter-squares {
  display: inline-flex;
  gap: var(--meter-gap);
}

.meter-square {
  width: var(--meter-square);
  height: var(--meter-square);
  border: var(--hairline) solid currentColor;
}

.meter-square-passed {
  background: currentColor;
}

.meter-words::before {
  content: "\00B7";
  margin-right: var(--space-2);
}