/* Revision record: the manual's own change history. */
.cl-head { display: flex; gap: 1.5rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.2rem; }
.cl-head-meta {
  display: flex; flex-direction: column; gap: .2rem; text-align: right;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
}

.cl-rev { margin-bottom: 1.1rem; }
.cl-summary { margin: 0 0 .7rem; color: var(--ink-2); }

.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-item { display: flex; gap: .7rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid var(--rule-2); }
.cl-item:last-child { border-bottom: 0; }
.cl-text { flex: 1 1 auto; }

/* The tag says what kind of change it was, so a correction is not mistaken
   for a new feature. */
.cl-kind {
  flex: 0 0 5.5rem; font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; text-align: center;
  padding: .1rem .35rem; border: 1px solid;
}
.cl-kind-added { color: var(--good); border-color: var(--good); }
.cl-kind-changed { color: var(--ink-2); border-color: var(--rule); }
.cl-kind-fixed { color: var(--red); border-color: var(--red); }
.cl-kind-verified { color: var(--ink); border-color: var(--ink); }

.cl-empty { color: var(--ink-3); }

@media (max-width: 600px) {
  .cl-head-meta { text-align: left; }
  .cl-item { flex-direction: column; gap: .2rem; }
  .cl-kind { flex: 0 0 auto; align-self: flex-start; }
}