/* Staff avatar treatment: imperial gradient, gold ring and glow pulse, shared by chip, profile and HQ. */
/* `:where()` holds base at (0,1,0) so profile.css's (0,2,0) override wins regardless of order. */
:where(.app-user-avatar, .profile-avatar-large, .hq-avatar).is-admin {
  --admin-avatar-ring:             1px;
  --admin-avatar-glow-r:          10px;
  --admin-avatar-glow-r-peak:     15px;
  --admin-avatar-glow-spread:      2px;
  --admin-avatar-glow-spread-peak: 3px;
  /* Glow carries the staff colour (a photo avatar covers the gradient). */
  --admin-avatar-glow-color:       color-mix(in srgb, var(--accent-imperial-hi) 85%, transparent);
  --admin-avatar-glow-color-peak:  var(--accent-imperial-hi);

  background:
    linear-gradient(135deg,
      var(--accent-imperial-hi)     0%,
      var(--accent-imperial)       55%,
      var(--accent-imperial-shadow) 100%);
  color: var(--accent-gold);
  box-shadow:
    0 0 0 var(--admin-avatar-ring) var(--accent-gold),
    0 0 var(--admin-avatar-glow-r) var(--admin-avatar-glow-spread) var(--admin-avatar-glow-color),
    inset 0 1px 0 0 rgba(255, 235, 180, 0.35);
  animation: admin-avatar-pulse 3s ease-in-out infinite alternate;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.profile-avatar-large.is-admin,
.hq-avatar.is-admin {
  --admin-avatar-ring:             2px;
  --admin-avatar-glow-r:          18px;
  --admin-avatar-glow-r-peak:     28px;
  --admin-avatar-glow-spread:      4px;
  --admin-avatar-glow-spread-peak: 7px;
}
/* var() evaluates per-element; one keyframe drives both sizes. */
@keyframes admin-avatar-pulse {
  from { box-shadow:
    0 0 0 var(--admin-avatar-ring) var(--accent-gold),
    0 0 var(--admin-avatar-glow-r) var(--admin-avatar-glow-spread) var(--admin-avatar-glow-color),
    inset 0 1px 0 0 rgba(255, 235, 180, 0.35); }
  to   { box-shadow:
    0 0 0 var(--admin-avatar-ring) var(--accent-gold),
    0 0 var(--admin-avatar-glow-r-peak) var(--admin-avatar-glow-spread-peak) var(--admin-avatar-glow-color-peak),
    inset 0 1px 0 0 rgba(255, 235, 180, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  :where(.app-user-avatar, .profile-avatar-large, .hq-avatar).is-admin { animation: none; }
}
.app-user-chip.is-admin:hover .app-user-avatar.is-admin {
  box-shadow:
    0 0 0 var(--admin-avatar-ring) var(--accent-gold),
    0 0 12px 2px color-mix(in srgb, var(--accent-imperial-hi) 90%, transparent),
    inset 0 1px 0 0 rgba(255, 235, 180, 0.45);
}
/* At (0,3,0) to out-rank layout.css's .avatar-chip (0,2,0); bg + colour only,
   so profile.css still overrides ring and glow. */
.app-user-avatar.is-admin.avatar-chip,
.profile-avatar-large.is-admin.avatar-chip,
.hq-avatar.is-admin.avatar-chip {
  background:
    linear-gradient(135deg,
      var(--accent-imperial-hi)     0%,
      var(--accent-imperial)       55%,
      var(--accent-imperial-shadow) 100%);
  color: var(--accent-gold);
}
/* Under prefers-reduced-motion the keyframe box-shadow is gone; restore it here from the same tokens. */
.app-user-avatar.is-admin.avatar-chip,
.profile-avatar-large.is-admin.avatar-chip,
.hq-avatar.is-admin.avatar-chip {
  box-shadow:
    0 0 0 var(--admin-avatar-ring) var(--accent-gold),
    0 0 var(--admin-avatar-glow-r) var(--admin-avatar-glow-spread) var(--admin-avatar-glow-color);
}