@layer components {
  .thread__message {
    & header {
      display: flex;
      gap: var(--block-space-half);
      align-items: baseline;
      margin-block-end: var(--block-space-quarter);
    }
  }

  /* Tighter than pre.body on purpose: a custom property set on the element beats an inherited one. */
  .thread__message--out pre.body {
    --pre-bg: var(--color-ours-wash);
    --pre-rule: var(--color-ours-rule);
  }
}