/*
 * The four readings, as bare glyphs at a fixed position.
 *
 * This replaced a grid of eight labelled badges. The badges were the clutter:
 * a card carried twenty-five elements where the trade's own listings carry
 * four, and the measurement that settled it was blunt — on a search asking for
 * four criteria, exactly one of the eight slots held a decided answer across
 * the listings shown. Seven boxes drawn around nothing.
 *
 * Three states, and none of them is a strike. A struck glyph read as an error;
 * these are answers, not faults.
 *
 *   on      — the photographs showed it. The criterion's own hue.
 *   no      — they showed the opposite. Grey, drawn at full strength.
 *   unknown — nobody has looked yet. The same grey, faint.
 *
 * `no` and `unknown` must stay apart. A listing photographed on a main road and
 * a listing nobody has opened are in different situations, and the whole
 * product rests on not confusing them — so one is solid and the other is not.
 */

.marks {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
}

.marks__sparkle {
  width: 0.6rem;
  height: 0.6rem;
  flex: none;
  display: block;
}

.marks__item {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  display: block;
}

.marks__item svg {
  width: 100%;
  height: 100%;
  display: block;
}

.marks__item--on {
  color: var(--crit);
}

.marks__item--no {
  color: var(--line-strong);
}

/* Not read yet. The same grey, lightened — a shade of the same thing, because
 * "no answer" is a weaker claim than "no", not a different kind of one. */
.marks__item--unknown {
  color: var(--line-strong);
  opacity: 0.45;
}

/* A criterion the search does not ask about still holds its column, so the
 * rows keep lining up from one card to the next. */
.marks__item--off {
  color: var(--line);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}