@layer components {
  /* ——— Events ———
     A line of the trail. Lived in records.css until it had three readers — the
     record sheet, the project timeline and Me's activity — and a file whose
     header says "the CRM record sheet" is the wrong index entry for a component
     the whole app draws.

     The timeline mixes events and comments, so one hairline grammar runs across
     both: the trail reads as a single column of rows rather than two
     interleaved lists. (.comment + .comment carries its own, in comments.css.) */
  .event {
    padding-block: var(--block-space-half);
  }

  /* A boost rides the line's end (BC), positioned so the sentence's own inline
     flow never learns about it. It lived in comments.css, scoped to the thread,
     and the two day-grouped feeds drew an orphaned + on a line of its own
     underneath instead (user, 2026-08-13) — so it belongs to .event, in the
     file that owns .event.

     :has(), so only a line that can be applauded pays the reserved end. The
     partial draws its + whether or not anyone has nodded yet, which is exactly
     the set of lines that need the room.

     Only the bare rocket, or the form it turns into, rides the end: once a
     pill exists the strip drops under the sentence, a chat line's rule
     (messages.css) — floated, a row of pills covered the words it applauded. */
  .event:has(.boosts) {
    position: relative;
    padding-inline-end: 3rem;

    .boosts:not(:has(.boosts__list .boost)) {
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: 50%;
      translate: 0 -50%;
    }

    .boosts:has(.boosts__list .boost) {
      margin-block-start: var(--block-space-half);
    }
  }

  /* Read through a custom property so a surface can turn it off without
     restating it: inside a trail the rail separates the rows, and the two
     together read as a table (activity.css sets --event-rule: none). */
  .event + .event,
  .event + .comment,
  .comment + .event {
    border-block-start: var(--event-rule, var(--border));
  }
}