/**
 * Member online-presence ring. Any avatar carrying `data-ppt-online` (set
 * server-side by Ppt\Account\Presence for the first paint, then toggled live by
 * presence.js) gets a green ring drawn with box-shadow: a thin surface-coloured gap,
 * then the green band — so it reads as a ring *around* the avatar, not a border on it.
 *
 * box-shadow is used (not border/outline) because it adds no layout size and is not
 * clipped by an avatar container's own overflow:hidden. Colour is themeable via
 * --ppt-online; the gap follows the surface token so it works on any background.
 * The ring applies to every kind of avatar the theme draws — get_avatar <img>s,
 * uploaded-photo <img>s, and initials circles alike — since they all receive the
 * same data attribute.
 */

[data-ppt-online] {
  box-shadow:
    0 0 0 2px var(--ppt-surface, #fff),
    0 0 0 4px var(--ppt-online, #16a34a);
}

/* The ring fades in when the heartbeat brings a member online mid-view. */
@media (prefers-reduced-motion: no-preference) {
  [data-ppt-user] {
    transition: box-shadow .2s ease;
  }
}