/* ---------- avatars ---------- */

/* A comment author's avatar (comments.stpl) — small, inline with the author name. */
.comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

/* A profile card's author avatar (home.stpl), next to the profile name in the card header. */
.card-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

/* Settings page: the user's current avatar, shown above the upload/crop form. */
.avatar-current {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
}

.avatar-settings-row {
  gap: 12px;
}

/* The fixed circular crop viewport (avatar_cropper.js pans/zooms the photo inside it). The
   circle itself is drawn with a mask rather than a clip on the image, so the whole square stays
   a valid pointer-drag target right into the corners, not just inside the visible circle. */
.avatar-crop-viewport {
  position: relative;
  width: 260px;
  height: 260px;
  max-width: 100%;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--line);
  border: 2px dashed var(--gold);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.avatar-crop-viewport:active {
  cursor: grabbing;
}
.avatar-crop-viewport img {
  position: absolute;
  max-width: none;
  pointer-events: none;
}