dl.info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;

  div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  dt::after {
    content: ":";
    content: ":"/ "";
    padding-inline-end: calc(var(--grid) / 2);
  }

  dd {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-end: var(--grid);
    margin-inline-start: 0;

    i {
      font-style: normal;
      padding-inline-end: calc(var(--grid) / 3);
    }
  }
}

#toc[popover] {
  font-size: 0.8rem;
  margin-top: 0;
  margin-right: 0;
  width: 10rem;
  max-height: 4rem;
  transition: max-height 0.4s ease-out;
  border: solid 1px #333;
  border-radius: var(--radius);

  &:hover {
    max-height: 100vh;
    transition: max-height 1s ease-out;
  }

  h2 {
    margin: 0;
    padding: 0;
    font-size: 1rem;
  }

  button {
    position: absolute;
    top: 4px;
    right: 4px;
    background: none;
    border: none;
    filter: grayscale(100%);
  }

  ul,
  ol {
    margin-block-start: 0;
    margin-inline-start: calc(var(--grid) / 2);
  }

  ol {
    list-style: none;
    counter-reset: counter;

    li {
      ol {
        list-style: none;
        counter-reset: counter;
      }

      &::before {
        content: counters(counter, ".") ". ";
        counter-increment: counter;
      }
    }
  }
}

nav.tags {
  display: inline;

  ul {
    display: inline-flex;
    margin: 0;
    padding: 0;

    li {
      &::before {
        content: none;
      }

      &:first-child::before {
        content: "[ ";
        content: "[ "/ "";
      }

      > a::after {
        content: ",";
        content: ","/ "";
        padding-inline-end: 0.5rem;
      }

      &:last-child > a::after {
        content: none;
      }

      &:last-child::after {
        content: " ]";
        content: " ]"/ "";
      }
    }
  }
}