/* avatar: verified rosette, the change-picture panel, the profile picture size. Tokens only; flat print (hard offset shadows, no gradients, no blur). */

/* verified: the "amazing" price sticker's 8-wave rosette (its clip-path is shared in styles.css), cobalt with a paper check */
.vf{position:relative;display:inline-block;width:15px;height:15px;flex:none;vertical-align:-3px}
.vf em{position:absolute;inset:0;background:var(--cobalt)}
.vf svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--paper);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.pf-nm .vf{width:.4em;height:.4em;min-width:15px;min-height:15px;vertical-align:.04em}

/* profile name: two things cut off the end of a name. (1) The negative tracking pulls the last glyph past the end of the name's inline box, and effects that paint with background-clip:text
   (shine) only paint inside that box: the right padding (+ equal negative margin) gives the box room. (2) The ink filter sat on the whole h1, so it also melted the verified rosette: it now sits on
   the name span only (glacier keeps its own filter), with the same SVG filters. */
h1.pf-nm.bleed.reveal{filter:none}
.pf-nm:not(.pf-ice) .un{filter:url(#inkreveal);padding:0 .14em .1em 0;margin-right:-.14em}
@media(max-width:700px){.pf-nm:not(.pf-ice) .un{filter:url(#inkreveal-sm)}}
@media(prefers-reduced-motion:reduce){.pf-nm:not(.pf-ice) .un{filter:url(#inkbleed)}}

/* profile picture: 20% larger than before (132 -> 158, phone 84 -> 101) */
.pf-av .lring{width:158px;height:158px}
.pf-av{display:flex;flex-direction:column;align-items:center;gap:10px}
.pf-chg{font:600 13px Outfit,sans-serif;color:var(--text-muted);background:none;border:0;padding:4px 6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:32px}
.pf-chg:hover{color:var(--text)}.pf-chg:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media(max-width:760px){.pf-av .lring{width:101px;height:101px}.pf-av{gap:4px}.pf-chg{font-size:12px}}
@media(pointer:coarse){.pf-chg{min-height:44px}}
.pf-tabs{scroll-margin-top:8px}   /* on top of html{scroll-padding-top} (the sticky header's height, styles.css): the #track anchor never lands under the header */

/* trinkets on the profile shelf: 15% larger (58 -> 67px); they are hidden on phones, so nothing changes at 375px */
.pf-tk{width:67px}

/* the change-picture panel: a small paper card over a flat ink veil */
.avp-bk{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--ink) 72%,transparent);display:flex;align-items:flex-start;justify-content:center;padding:84px 16px 16px;overflow-y:auto}
.avp{position:relative;width:min(340px,100%);background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-md);box-shadow:var(--offset);padding:14px 16px 16px}
.avp-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.avp-ti{font:900 18px Unbounded,sans-serif;letter-spacing:-.04em;margin:0}
.avp-x{font:600 24px/1 Outfit,sans-serif;background:none;border:0;color:var(--ink);cursor:pointer;width:32px;height:32px;border-radius:var(--r-sm)}
.avp-x:hover{background:var(--paper-2)}.avp-x:focus-visible,.avp-t:focus-visible,.avp-s:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.avp-tabs{display:flex;gap:0;border:2px solid var(--ink);border-radius:var(--r-sm);overflow:hidden;margin-bottom:12px}
.avp-t{flex:1;font:700 14px Outfit,sans-serif;background:none;border:0;color:var(--ink);padding:8px 0;cursor:pointer;min-height:36px}
.avp-t+.avp-t{border-left:2px solid var(--ink)}.avp-t:hover{background:var(--paper-2)}
.avp-t[aria-selected=true]{background:var(--ink);color:var(--paper)}
.avp-cvw{position:relative;width:200px;height:200px;margin:0 auto 12px;border:2px solid var(--ink);border-radius:var(--r-sm);overflow:hidden;background:var(--paper-2)}
.avp-cv{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.avp-guide{position:absolute;inset:0;border-radius:50%;border:2px dashed var(--paper);pointer-events:none}
.avp-pn{display:flex;flex-direction:column;gap:10px}.avp [hidden]{display:none}
.avp-file{align-self:flex-start;cursor:pointer;color:var(--ink);font-weight:700}
.avp-file:focus-within{outline:2px solid var(--signal);outline-offset:2px}
.avp-r{display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 13px Outfit,sans-serif}
.avp-r input[type=range]{flex:1;max-width:190px;accent-color:var(--ink)}
.avp-k{font:700 12px Outfit,sans-serif;color:var(--ink-2);margin-top:2px}
.avp-sw{display:flex;flex-wrap:wrap;gap:6px;max-height:112px;overflow-y:auto}
.avp-s{width:44px;height:44px;padding:2px;background:var(--paper-2);border:2px solid var(--rule);border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}
.avp-s:hover{border-color:var(--ink)}.avp-s[aria-pressed=true]{border-color:var(--ink);box-shadow:var(--offset-sm)}.avp-s.act{background:var(--butter)}
.avp-s i{display:block;width:100%;height:100%;border-radius:3px}
.avp-s svg{width:100%;height:100%}
.avp-none{font:500 13px Outfit,sans-serif;color:var(--ink-2)}
.avp-nudge{display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--rule);padding-top:8px}
.avp-ft{display:flex;gap:10px;align-items:center;margin-top:14px}
.avp .btn.ghost{color:var(--ink);border-color:var(--ink)}
.avp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(pointer:coarse){.avp-t{min-height:44px}.avp-x{width:44px;height:44px}}

/* titles picker in the stamps tab (own profile) */
.pf-tpick{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pf-tpick .pf-tp{font:700 13px Outfit,sans-serif;color:var(--text);background:none;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:6px 11px;cursor:pointer;min-height:34px}
.pf-tpick .pf-tp:hover{border-color:var(--text)}.pf-tpick .pf-tp.on{border-color:var(--butter);color:var(--butter)}
.pf-tpick .pf-tp.lock{opacity:.55;border-style:dashed;cursor:default}.pf-tpick .pf-tp small{display:block;font-size:10px;font-weight:500;color:var(--text-muted)}
.pf-tpick .pf-tp:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media(pointer:coarse){.pf-tpick .pf-tp{min-height:44px}}

/* admin: remove a picture */
.frow .avp-rm{font:600 12px Outfit,sans-serif}