/*
 * Default account avatar: initials on a lit, striped tile with a small star, in the member's colour.
 * Everything scales with the tile (container query units), from the 34px header icon to 100px.
 */
.identity-avatar--tile {
  --avatar-a: #2a7bff;
  --avatar-b: #071a3a;
  --avatar-glow: #7cc2ff;
  --avatar-ink: #ffffff;
  --avatar-tile:
    radial-gradient(130% 90% at 15% -10%, color-mix(in srgb, var(--avatar-glow) 55%, transparent) 0%, transparent 58%),
    radial-gradient(80% 70% at 110% 120%, color-mix(in srgb, var(--avatar-a) 60%, transparent) 0%, transparent 70%),
    repeating-linear-gradient(125deg, #ffffff0b 0 1.5px, transparent 1.5px 7px),
    linear-gradient(155deg, var(--avatar-a) 0%, var(--avatar-b) 78%);
  container-type: size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28%;
  background: var(--avatar-tile);
  box-shadow: inset 0 0 0 1px #ffffff30, inset 0 -0.6em 1.2em #00000040;
  color: var(--avatar-ink);
}
/* A soft beam of light across the tile, like stadium floodlights. */
.identity-avatar--tile::before {
  content: "";
  position: absolute;
  inset: -40% -60% auto auto;
  width: 120%;
  height: 160%;
  background: linear-gradient(105deg, transparent 38%, #ffffff1f 48%, transparent 58%);
  transform: rotate(8deg);
  pointer-events: none;
  z-index: -1;
}
.identity-avatar--tile > [data-avatar-initials] {
  position: relative;
  font-size: 40cqi;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-shadow: 0 0.06em 0.18em #00000066;
  transform: translateY(-2%);
}
.identity-avatar__star {
  position: absolute;
  right: 9cqi;
  bottom: 9cqi;
  width: 20cqi;
  aspect-ratio: 1;
  background: var(--avatar-glow);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0.9;
  filter: drop-shadow(0 0 0.25em var(--avatar-glow));
}

.identity-avatar--tile[data-avatar-style="brand-career"] { --avatar-a: #1f6dff; --avatar-b: #06142c; --avatar-glow: #8fd0ff; }
.identity-avatar--tile[data-avatar-style="brand-fut"] { --avatar-a: #4d6d06; --avatar-b: #0d1a06; --avatar-glow: #d2ff00; }
.identity-avatar--tile[data-avatar-style="blue"] { --avatar-a: #2f86f5; --avatar-b: #0b2852; --avatar-glow: #9ccfff; }
.identity-avatar--tile[data-avatar-style="lime"] { --avatar-a: #7a9a12; --avatar-b: #1d320b; --avatar-glow: #e3ff5c; }
.identity-avatar--tile[data-avatar-style="violet"] { --avatar-a: #8358d6; --avatar-b: #251846; --avatar-glow: #d6c2ff; }
.identity-avatar--tile[data-avatar-style="coral"] { --avatar-a: #d0604f; --avatar-b: #4a1b22; --avatar-glow: #ffc4b8; }
.identity-avatar--tile[data-avatar-style="teal"] { --avatar-a: #179c96; --avatar-b: #0b3539; --avatar-glow: #9ff5e2; }
.identity-avatar--tile[data-avatar-style="amber"] { --avatar-a: #c98a1f; --avatar-b: #4a2f0c; --avatar-glow: #ffe2a3; }

/* Very small tiles (header, comments): no star, slightly heavier initials. */
@container (max-width: 40px) {
  .identity-avatar__star { display: none; }
}

/* Colour picker in the account settings shows the real tile with the member's initials. */
.identity-avatars label > .identity-avatar--tile {
  width: 52px;
  height: 52px;
  border: 0;
  background: var(--avatar-tile);
  color: var(--avatar-ink);
}
.identity-avatars label > .identity-avatar--tile > span { visibility: visible; }
.identity-avatars label > .identity-avatar--tile > .avatar-choice-tick {
  position: absolute;
  top: 3px;
  left: 3px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  color: #0b1a2c;
  font-size: 10px;
  font-weight: 900;
  visibility: hidden;
  z-index: 2;
}
.identity-avatars input:checked + .identity-avatar--tile { box-shadow: 0 0 0 3px #111820, 0 0 0 5px var(--avatar-glow); }
.identity-avatars input:checked + .identity-avatar--tile > .avatar-choice-tick { visibility: visible; }