.callout {
  /* The transparent border on the right is not decorative: without it the content of the callout
     is shifted by 2px relative to a block without a remark, and the gutter between the columns
     comes off the hairline of the reader. */
  border-inline: 2px solid transparent;
  padding: var(--space-3);
  transition:
    border-left-color 140ms ease,
    color 140ms ease;
}

/* Two steps, not one: the engine has a ratified ladder of verdict importance
   (status.go:150-175), and blending it into a single look means losing the only signal of
   priority. */
.callout[data-tone='note'] {
  border-left-color: var(--color-note);
}

.callout[data-tone='quiet'] {
  border-left-color: var(--color-separator);
}

/* The caption stands ABOVE the content: below it, it reads as the heading of the next block.
   The mark at the very start of the line is in the same tone as the strip: that way they read as
   one thing rather than as a random line next to grey text. */
.caption {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.mark {
  flex: none;
  color: var(--color-separator);
}

.callout[data-tone='note'] .mark {
  color: var(--color-note);
}

/* Hovering highlights the PAIR "strip ↔ caption": the link between them is seen through action,
   not through an explanation (remark 10). */
.callout:hover .caption {
  color: var(--color-text);
}

.callout[data-tone='note']:hover {
  border-left-color: var(--color-accent);
}

.callout[data-tone='note']:hover .mark {
  color: var(--color-accent);
}

.callout[data-tone='quiet']:hover {
  border-left-color: var(--color-text-secondary);
}

.callout[data-tone='quiet']:hover .mark {
  color: var(--color-text-secondary);
}