/* profile-pop.css: the phone avatar beside the name + the quick-summary popup it opens.
   Behaviour: js/profile-pop.js. Docs: Doc/Elements/Profile Popup.md */

/* ---------- Avatar beside the name (phones only) ---------- */
.name-row{display:contents}                 /* desktop/tablet: behaves as if the wrapper isn't there */
.avatar{display:none}
@media(max-width:680px){
  /* the avatar is pinned in the card's top-right corner; the name row keeps clear of it */
  .left{position:relative}
  .name-row{display:block;padding-right:72px}
  .profile-top .photo{display:none}         /* the avatar replaces the big photo on phones */
  .avatar{display:grid;place-items:center;position:absolute;top:12px;right:12px;z-index:1;width:72px;height:72px;padding:0;border-radius:50%;overflow:hidden;
    background:linear-gradient(145deg,#dedbd2,#bdb9ae);border:2px solid var(--card);
    box-shadow:0 6px 16px rgba(20,20,19,.16);   /* no coloured ring on phones, just a soft lift */
    font:600 .8rem var(--font);color:var(--muted);
    animation:avatarHint 2.6s ease-out 1.4s 3}  /* a few soft pulses to say "tap me" */
  .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .avatar:active{transform:scale(.94)}
}
/* Short phones hide the "Hello, I'm" row, so the name sits at the very top beside the photo:
   make that row at least as tall as the photo so the title line never runs under it. */
@media(max-width:680px) and (max-height:760px){
  .name-row{min-height:68px}
}

/* ---------- Popup ---------- */
.me-pop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
/* Backdrop: the page behind smoothly blurs in when the popup opens (.on) and un-blurs when it closes.
   Blur, tint and saturation all ramp from zero, so the page itself softens rather than a layer popping on. */
.me-back{position:absolute;inset:0;background:rgba(230,227,219,0);
  -webkit-backdrop-filter:blur(0px) saturate(100%);backdrop-filter:blur(0px) saturate(100%);
  transition:background .5s ease,-webkit-backdrop-filter .5s ease,backdrop-filter .5s ease}
.me-pop.on .me-back{background:rgba(230,227,219,.6);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  transition:background .45s cubic-bezier(.2,.7,.2,1),-webkit-backdrop-filter .45s cubic-bezier(.2,.7,.2,1),backdrop-filter .45s cubic-bezier(.2,.7,.2,1)}
/* Phones/tablets: animating a full-screen blur stutters on most of them, so they get a plain tint that
   fades in instead (cheap). Computers keep the blur. */
@media(any-hover:none){
  .me-back,.me-pop.on .me-back{-webkit-backdrop-filter:none;backdrop-filter:none}
  .me-pop.on .me-back{background:rgba(230,227,219,.88)}
}
/* The card is designed at phone size, then SCALED for bigger screens with --s: every size inside
   (width, photo, text, padding, buttons) is multiplied by it. Steps are chosen so the whole card
   always fits the screen height without scrolling (checked at phone, tablet and desktop sizes). */
.me-card{--s:1;position:relative;width:min(100%,calc(380px*var(--s)));max-height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(22px*var(--s));display:grid;gap:calc(10px*var(--s));border-radius:calc(24px*var(--s));box-shadow:var(--shadow)}
@media(min-width:681px) and (min-height:600px){.me-card{--s:1.15}}    /* tablets sideways */
@media(min-width:681px) and (min-height:720px){.me-card{--s:1.3}}     /* tablets upright, laptops */
@media(min-width:1100px) and (min-height:860px){.me-card{--s:1.5}}    /* desktops */
@media(min-width:760px) and (min-height:1000px){.me-card{--s:1.6}}    /* tall tablets upright (iPad, Galaxy Tab) */
@media(min-width:1400px) and (min-height:980px){.me-card{--s:1.6}}    /* large desktops */
.me-pop.play .me-card>*{animation:rise .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*55ms + .18s)}

.me-x{position:absolute;top:calc(12px*var(--s));right:calc(12px*var(--s));width:calc(40px*var(--s));height:calc(40px*var(--s));display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--line);border-radius:calc(12px*var(--s))}
.me-x:hover{border-color:#9b978e}
.me-card .ic{width:calc(18px*var(--s));height:calc(18px*var(--s))}
.me-photo{position:relative;width:calc(96px*var(--s));height:calc(96px*var(--s));border-radius:50%;overflow:hidden;margin-bottom:calc(4px*var(--s));
  background:linear-gradient(145deg,#dedbd2,#bdb9ae);border:3px solid var(--card);box-shadow:0 0 0 1.5px var(--copper),0 10px 26px rgba(20,20,19,.16)}
.me-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.me-card .eyebrow{font-size:calc(10px*var(--s))}
.me-name{font-size:calc(2rem*var(--s));font-weight:650;letter-spacing:-.06em;line-height:1}
.me-title{font-weight:650;font-size:calc(.9rem*var(--s));letter-spacing:-.02em;color:var(--copper)}
.me-title span{color:var(--muted);font-weight:400}
.me-sum{color:#55534d;font-size:calc(.88rem*var(--s));line-height:1.5}
.me-facts{display:grid;grid-template-columns:1fr 1fr;gap:calc(6px*var(--s));width:100%;margin:calc(4px*var(--s)) 0}
.me-facts div{padding:calc(10px*var(--s)) calc(12px*var(--s));background:var(--paper-2);border:1px solid var(--line);border-radius:calc(14px*var(--s))}
.me-facts dt{font:calc(9.5px*var(--s)) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.me-facts dd{margin:calc(3px*var(--s)) 0 0;font-weight:600;font-size:calc(.82rem*var(--s));letter-spacing:-.01em}
.me-card .btns{width:100%;gap:calc(8px*var(--s))}
.me-card .btn{flex:1;min-height:calc(48px*var(--s));padding:0 calc(20px*var(--s));font-size:calc(.9rem*var(--s));border-radius:calc(14px*var(--s))}
/* phones: no coloured ring on the photo (matches the corner avatar) */
@media(max-width:680px){.me-photo{box-shadow:0 10px 26px rgba(20,20,19,.16)}}


/* ---------- Tablets: the big photo is tappable (js/profile-pop.js) ---------- */
@media(any-hover:none){
  html:not(.mouse) .photo[role=button]{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:scale .2s ease}
  html:not(.mouse) .photo[role=button]:active{scale:.95}
}