@layer components {

  
  .timeline {
    margin-top: var(--space);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--line-w) solid var(--line);
  }

  .timeline__list { display: flex; flex-direction: column; gap: var(--space); }

  .timeline__list:has(*) + .timeline__empty { display: none; }

  .timeline__empty {
    color: var(--ink-faint);
    font-size: var(--text-sm);
    max-width: var(--measure);
  }

  .comment {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
  }

  
  .comment__head {
    display: flex;
    align-items: center;
    gap: var(--space);
    flex-wrap: wrap;
    line-height: var(--leading-tight);
  }

  .comment__head > .person { gap: calc(var(--space) * 1.25); }
  .comment__meta { margin-left: auto; }

  .comment__author { font-weight: var(--weight-medium); }

  .comment__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    white-space: nowrap;
  }

  
  .comment__head > .person,
  .comment__meta { align-items: center; }

  .comment__edited { font-style: italic; }

  
  .comment__body {
    font-size: var(--text-base);
    line-height: var(--leading-body);
    
    overflow-wrap: anywhere;
  }

  .comment__body p { margin: 0 0 var(--space); max-width: none; }
  .comment__body p:last-child { margin-bottom: 0; }

  .comment__foot {
    display: flex;
    align-items: center;
    gap: var(--space);
  }

  .reactions { flex: 1; min-width: 0; }

  .comment__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--transition);
  }

  .comment:hover .comment__actions,
  .comment:focus-within .comment__actions { opacity: 1; }

  @media (hover: none) {
    .comment__actions { opacity: 1; }
  }

  
  .comment__action {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    padding: 0;
    border: var(--line-w-control) solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--ink-faint);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), var(--responds);
  }

  .comment__action:hover {
    border-color: var(--line-strong);
    background: var(--surface-hover);
    color: var(--ink);
  }

  .comment__action--danger:hover { color: var(--danger); }

  
  .comment__action::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + var(--space) / 2);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(var(--measure) / 2);
    padding: calc(var(--space) / 2) var(--space);
    border: var(--line-w) solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    letter-spacing: normal;
    text-transform: none;
    line-height: var(--leading-tight);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
  }

  .comment__action:hover::after,
  .comment__action:focus-visible::after { opacity: 1; }

  @media (hover: none) {
    .comment__action::after { content: none; }
  }

  .comment__action--text {
    width: auto;
    height: auto;
    padding-inline: var(--space);
    border-color: transparent;
    color: var(--ink-faint);
  }
  .comment__action--text:hover { border-color: transparent; background: none; text-decoration: underline; }
  .comment__action--text::after { content: none; }

  
  .comment__actions form { display: contents; }

  .event {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(var(--space) * 1.25);
    padding: 0 var(--space-2);
    min-height: var(--control-h-sm);
    font-size: var(--text-sm);
    color: var(--ink-muted);
  }

  .event + .event::before {
    content: "";
    position: absolute;
    top: calc(var(--space) * -1);
    left: calc(var(--space-2) + 0.75rem - var(--line-w) / 2);
    width: var(--line-w);
    height: var(--space);
    background: var(--line-strong);
  }

  .event__line { margin: 0; }
  .event__actor { color: var(--ink); font-weight: var(--weight-medium); }

  .event__via {
    font-size: var(--text-xs);
    color: var(--ink-faint);
  }

  .event__when {
    font-size: var(--text-xs);
    color: var(--ink-faint);
    white-space: nowrap;
  }
}