/* Chameleon Generation — octagon avatar component (v3).
   Battlestar-Galactica paper-corner look: a regular octagon mask plus an
   octagonal drop-shadow beneath. The shadow is produced with filter:drop-shadow
   on the wrapper, which follows the clipped alpha shape — so the shadow is
   octagonal too, not a soft rectangle. Reused by the account portal (Phase 1)
   and the comment threads (Phase 2). Size via --cg-avatar-size. */

.cg-avatar {
  display: inline-block;
  line-height: 0;
  /* dark octagonal shadow under the avatar */
  filter: drop-shadow(0 7px 6px rgba(0, 0, 0, 0.78));
}

/* 29.3% corner cut = a true regular octagon inscribed in the square */
.cg-avatar > img,
.cg-avatar > .cg-avatar-fallback {
  width: var(--cg-avatar-size, 96px);
  height: var(--cg-avatar-size, 96px);
  object-fit: cover;
  display: block;
  background: #1a1a1a;
  clip-path: polygon(
    29.3% 0%, 70.7% 0%,
    100% 29.3%, 100% 70.7%,
    70.7% 100%, 29.3% 100%,
    0% 70.7%, 0% 29.3%
  );
}

/* Initial-letter fallback when a user has no avatar yet */
.cg-avatar > .cg-avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--accent, #d4c64a);
  color: #0a0a0a;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  font-size: calc(var(--cg-avatar-size, 96px) * 0.42);
  text-transform: uppercase;
  user-select: none;
}