/* Avatars (avatars.js, core.js av/avFace): glossy liquid-glass spheres with a specular highlight, depth and a soft glow
   in their own colour; photos sit in the same glass ring. Brand colours only: orange, black, white. */
.av{position:relative;isolation:isolate;overflow:hidden;--av-glow:rgba(0,0,0,.22);
  text-shadow:0 1px 1px rgba(0,0,0,.28);
  box-shadow:inset 0 1px 1.5px rgba(255,255,255,.7),inset 0 -3px 6px rgba(0,0,0,.3),inset 0 0 0 .5px rgba(255,255,255,.25),
    0 1px 2px rgba(0,0,0,.25),0 3px 12px -1px var(--av-glow)}
/* Specular highlight (top left) and a soft caustic glow at the bottom */
.av::before{content:"";position:absolute;left:13%;top:5%;width:64%;height:44%;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 45% 35%,rgba(255,255,255,.92) 0,rgba(255,255,255,.4) 38%,rgba(255,255,255,0) 72%);transform:rotate(-18deg)}
.av::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 50% 108%,rgba(255,255,255,.42),rgba(255,255,255,0) 46%)}
.av-lg{box-shadow:inset 0 2px 3px rgba(255,255,255,.7),inset 0 -6px 12px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.22),
    0 2px 4px rgba(0,0,0,.22),0 8px 26px -4px var(--av-glow)}

.av-or{background:radial-gradient(circle at 34% 28%,#FFC6A3 0,#FF7C40 24%,#E94F1B 54%,#962B05 100%);color:#fff;--av-glow:rgba(233,79,27,.55)}
.av-ember{background:radial-gradient(circle at 34% 28%,#FFB9A0 0,#F55A32 24%,#CC2A16 56%,#6A1004 100%);color:#fff;--av-glow:rgba(214,46,24,.55)}
.av-amber{background:radial-gradient(circle at 34% 28%,#FFF0C2 0,#FFC251 26%,#F28F12 58%,#8F4A03 100%);color:#2B1503;text-shadow:0 1px 0 rgba(255,255,255,.35);--av-glow:rgba(242,143,18,.5)}
.av-ink{background:radial-gradient(circle at 34% 28%,#77777D 0,#2C2C30 42%,#0A0A0B 100%);color:#fff;--av-glow:rgba(0,0,0,.45)}
.av-graphite{background:radial-gradient(circle at 34% 28%,#D2D2D8 0,#8C8C94 34%,#55555C 70%,#2E2E33 100%);color:#fff;--av-glow:rgba(70,70,78,.4)}
.av-pearl,.av-grey{background:radial-gradient(circle at 34% 28%,#FFFFFF 0,#F7F5F2 34%,#DCD8D3 74%,#B9B4AE 100%);color:#111;text-shadow:0 1px 0 rgba(255,255,255,.6);
  --av-glow:rgba(255,255,255,.4)}
.av-pearl,.av-grey{box-shadow:inset 0 1px 1.5px #fff,inset 0 -3px 6px rgba(0,0,0,.16),inset 0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.18),0 3px 12px -1px var(--av-glow)}
.av-lg.av-pearl,.av-lg.av-grey{box-shadow:inset 0 2px 3px #fff,inset 0 -6px 12px rgba(0,0,0,.16),inset 0 0 0 1px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.16),0 8px 26px -4px var(--av-glow)}

/* Photos: the picture in a circle, under the same glass highlight and ring */
.av.av-photo{background:#1b1b1d}
.av-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;z-index:1;display:block}
.av-photo::before{opacity:.55}
.av-photo::after{background:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 1px 2px rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.28)}
.av-lg.av-photo::after{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),inset 0 2px 3px rgba(255,255,255,.5),inset 0 -8px 14px rgba(0,0,0,.3)}

/* The open-role placeholder stays flat */
.av-open::before,.av-open::after{display:none}
.av-open{box-shadow:inset 0 0 0 2px var(--hair-2)}

/* Photo buttons */
.avp-cam{position:absolute;top:10px;left:10px;z-index:3;opacity:.7;transition:opacity .2s}
.pt-node:hover .avp-cam,.avp-cam:focus-visible,.avp-cam[aria-expanded="true"]{opacity:1}
.avp-cam[aria-busy="true"]{opacity:.45;cursor:progress}
.avp-menu{position:absolute;top:48px;left:10px;z-index:5;display:flex;flex-direction:column;min-width:170px;padding:6px;border-radius:16px;text-align:left}
.avp-menu button{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink)}
.avp-menu button:hover,.avp-menu button:focus-visible{background:var(--track)}
.avp-sheet,.avp-edit-btns{display:flex;flex-wrap:wrap;gap:8px}
.avp-sheet{margin:0 0 14px}
.avp-edit{display:flex;align-items:center;gap:14px;margin:18px 0 4px}
.avp-edit-face .av-lg{margin:0}
@media (max-width:640px){
  .avp-cam{left:auto;right:10px}
  .pt-node:has(.pt-edit) .avp-cam{right:52px}
  .avp-menu{left:auto;right:10px}
}

/* Drop a photo: orange dashed ring on the avatar and a short line under it (person editor) */
.av.avp-ring{outline:2px dashed var(--orange);outline-offset:4px}
.pt-node.avp-over{outline:2px dashed var(--orange);outline-offset:3px}
.avp-edit{margin-bottom:22px}
.avp-edit-face{position:relative;display:block;flex:none}
.avp-hint{position:absolute;left:0;top:calc(100% + 8px);white-space:nowrap;font-size:12px;font-weight:600;line-height:16px;color:var(--orange-ink);pointer-events:none}
.avp-hint[hidden]{display:none}