@layer components {
  /* Desktop (1100 px and up): a row, its action centered on the right, no rule, no relative age. */
  .activity-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; list-style: none; }
  .activity-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .activity-row-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .activity-row-title { font-size: var(--text-body); font-weight: 500; color: var(--foreground); overflow-wrap: anywhere; }
  .activity-row.is-unread .activity-row-title { font-weight: 600; }
  .activity-row-description { font-size: 13px; color: var(--muted-foreground); }
  .activity-row-action { flex: none; }
  .activity-row-long, .activity-row-age { display: none; }

  .activity-badge.activity-badge--status, .activity-badge.activity-badge--neutral { background: var(--muted); color: var(--muted-foreground); }
  /* A refused account says so in words; the red is only a second cue. */
  .activity-badge.activity-badge--no { background: var(--jx-no-soft); color: var(--jx-no); }

  @media (max-width: 1099px) {
    .activity-row { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px; }
    .activity-row-title { font-weight: 600; }
    /* A leading logo stays beside the title; the action goes under the text. */
    .activity-row:has(> .activity-row-main:not(:first-child)) {
      display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 12px; row-gap: 10px;
    }
    .activity-row:has(> .activity-row-main:not(:first-child)) > .activity-row-action { grid-column: 2; justify-self: start; }
    .activity-row--marked { box-shadow: inset 3px 0 0 var(--jx-wait); }
    .activity-row-age { display: inline; }
    .activity-row-long { display: inline; }
    .activity-row-action:has(.activity-row-long) .activity-row-short { display: none; }
    .activity-badge.activity-badge--status { background: var(--jx-wait-soft); color: var(--jx-wait); }
    .activity-row-action { position: relative; align-self: flex-start; height: 36px; }
    /* The 44 px touch zone extends past the 36 px button. */
    .activity-row-action::after { content: ""; position: absolute; inset: -4px 0; min-width: var(--tap); }
    .activity-row-action--phone-primary {
      background: var(--primary); color: var(--primary-foreground); border-color: transparent; font-weight: 600;
    }
    .activity-row-action--phone-primary:is(:hover, :active) {
      background: color-mix(in oklch, var(--primary) 88%, black); color: var(--primary-foreground);
    }
  }
}