/* Profile photos: the photo sits inside the person's circle, so their color shows as a thin even ring all the way around */
.pp{display:block;width:calc(100% - 2*var(--ppr,3px));height:calc(100% - 2*var(--ppr,3px));border-radius:50%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.av.sm,.gav i,.gi-mem i,.nc-fr .av,.vw-who .av{--ppr:2px}
.prof .av,.empty .av,.av.big,.av.pbig,.rc-av .av{--ppr:4px}
.ring .av{--ppr:5px}

/* Settings > Profile */
.pp-av{position:relative;border-radius:50%;cursor:pointer}
.pp-av .cam{position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;background:var(--hush);color:var(--ink);display:grid;place-items:center;box-shadow:0 0 0 3px var(--raise)}
.pp-av .cam svg{width:16px;height:16px}
.pp-av:focus-visible{outline:2px solid var(--me);outline-offset:4px}
.pp-acts{display:flex;gap:18px;margin-top:-2px}
.pp-link{color:var(--muted);font-size:13px;text-decoration:underline;user-select:none}
.pp-link:hover{color:var(--text)}

/* The crop */
.crop{position:absolute;inset:0;z-index:29;display:flex;flex-direction:column;background:#0b0b0c;touch-action:none;user-select:none;-webkit-user-select:none;animation:ppIn .2s ease-out both}
@keyframes ppIn{from{opacity:0}}
.crop-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:50px 16px 12px;color:var(--text)}
.crop-top b{font-family:var(--display);font-size:17px}
.crop-top button{font-weight:600;font-size:15px;padding:9px 14px;border-radius:999px;color:var(--text)}
.crop-top .crop-ok{background:var(--me);color:var(--ink)}
.app.grad .crop-top .crop-ok{background:linear-gradient(135deg,var(--me),var(--me2))}
.crop-stage{position:relative;flex:1;min-height:0;overflow:hidden;cursor:grab}
.crop-stage:active{cursor:grabbing}
.crop-stage img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none;-webkit-user-drag:none}
.crop-hole{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 9999px rgba(0,0,0,.62)}
.crop-foot{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 24px 34px;color:var(--muted);font-size:13px}
.crop-z{width:min(320px,100%);accent-color:var(--me)}