/* The plate. One tick per article in today's set, filling as they are read.
   It sits under the date, directly above the rows it is counting, so the mark
   and the thing it measures are read together. */
.plate {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.plate-tick {
  width: 34px;
  height: 5px;
  border-radius: 1px;
  background-color: var(--sunk);
  transition: background-color var(--ease-slow);
}

.plate-tick--read {
  background-color: var(--leaf);
}

/* Ticks share the row's width rather than wrapping to a second line, which
   would read as two days. */
@media (max-width: 560px) {
  .plate {
    flex-wrap: nowrap;
  }

  .plate-tick {
    flex: 1 1 0;
    min-width: 0;
  }
}