@layer components {
  /* ——— Bylines ———
     Who made this and when, under every recording: a face, the author, and
     everything after it faint. One definition rather than five, because the
     size and the colour of this line had already drifted apart across the
     message header, the board row, the comment and the note — the same reason
     labels.css exists.

     The author carries full ink out of an otherwise subtle line (HANSHI 07).
     That is the one contrast the line is allowed; the time and the edit stamp
     stay where they are. */
  .byline {
    display: flex;
    /* Wrap between the segments, like words in a sentence. Without it a
       narrow sheet SHRINKS the items instead — flex's nowrap answer — and
       every phrase folds inside itself: "Added / by", the name stacked in
       two lines, stretched gaps between the columns (user, 2026-08-30,
       from the device, on a card's verbose header line). */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--inline-space-half);
    font-size: var(--text-small);
    color: var(--color-ink-subtle);

    strong {
      color: var(--color-ink);
    }
  }
}