.reading-list {
  list-style: none;
  padding: 0;
}

.reading-list > * + * {
  margin-block-start: 10px;
}

.reading-list li {
  display: flex;
  align-items: baseline;
}

.reading-list .why {
  font-size: 0.8em;
}

.reading-list .description > * {
  margin: 0;
}

.reading-list .description > * + * {
  margin-block-start: 0.4rem;
}

.reading-list .status {
  display: inline-block;
  min-width: 10ch;
  font-size: 0.8em;
  margin-right: 10px;
}

.reading-list .status span {
  border-radius: 999px;
  padding: 2px 10px;
  border: 2px solid transparent;
}

.reading-list .reading .status span {
  background: rgb(46, 46, 46);
  color: rgb(243, 243, 243);
}

.reading-list .read .status span {
  background: rgb(226, 226, 226);
  color: #888;
}

.reading-list .next .status span {
  color: rgb(135, 135, 135);
  border-color: initial;
}

.reading-list .dropped .status span {
  text-decoration: line-through;
  border-color: rgb(226, 226, 226);
  color: #888;
}