/* Built in avatar picker (src/js/00-a-avatars.js). */
.avp{position:fixed;inset:0;z-index:120;background:rgba(20,18,16,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.avp-sheet{width:100%;max-width:560px;max-height:min(84vh,760px);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--hair);border-radius:18px;box-shadow:var(--lift-lg,0 20px 50px rgba(0,0,0,.25));padding:18px 18px 16px;overflow:hidden}
.avp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.avp-head h2{margin:0;font-family:var(--serif);font-size:24px;line-height:1.1;font-weight:400}
.avp-x{width:36px;height:36px;flex:none;border:0;border-radius:50%;background:var(--paper);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.avp-x svg{width:18px;height:18px}
.avp-hint{margin:6px 0 0;font-size:14px;color:var(--muted)}
.avp-tools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.avp-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px;padding:4px 2px 6px;-webkit-overflow-scrolling:touch}
.avp-tile{position:relative;display:block;width:100%;height:0;padding:0 0 100%;margin:0;border:0;border-radius:50%;background:var(--stone);cursor:pointer;overflow:hidden;box-shadow:0 0 0 2px transparent;transition:transform .12s,box-shadow .12s}
.avp-tile img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
.avp-tile:hover,.avp-tile:focus-visible{transform:scale(1.06);box-shadow:0 0 0 3px var(--accent);outline:none}
.avp-tile.is-on{box-shadow:0 0 0 3px var(--accent)}
.avp-tile.is-on::after{content:"";position:absolute;right:2px;bottom:2px;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--card)}
body.avp-open{overflow:hidden}
@media (max-width:640px){
  .avp{padding:0;align-items:flex-end}
  .avp-sheet{max-width:none;max-height:88vh;border-radius:18px 18px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
  .avp-sheet::before{content:"";display:block;width:40px;height:4px;margin:-4px auto 10px;border-radius:2px;background:var(--hair)}
  .avp-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
}