/* Awaken profile: the panel from clicking your own name (awaken-profile.js).
   On a dimmed page, the person's ID card exactly as the sign-in's badge
   draws it (design/sign-in/awaken-badge.css: 300px wide in an ID card's
   proportions, the lanyard slot, the app as issuer, the photo in the
   gradient ring, the name in Quarto, the chips, the dashed footer and the
   gradient band along the bottom edge, one pass of light; the slot a real
   hole through the card), and beside it,
   or under it on a phone, a panel with what they can change.
   awaken-general design/profile/ (README.md there); copied verbatim into
   each app; change it there first. Load it after the app's own tokens.

   Colours and type come from the Awaken family's tokens (--bg, --surface,
   --surface-2, --ink, --ink-2, --ink-3, --line, --line-soft, --line-strong,
   --err, --ok, --orange-text, --font, --font-display), so light and dark
   follow the app; the values after each comma are the Media App's light
   ones, for a page that defines none. The gradient (ring, band, initials)
   is the badge's, and the only colour that isn't a token. In dark mode an
   app may set --aw-profile-sheen lower, as it does --aw-badge-sheen. */

/* The dialog is only the dimmed page: transparent, the full screen, and
   the one thing that scrolls when the two don't fit. */
.aw-profile{
  --aw-grad:linear-gradient(45deg,#E80E8A 0%,#EE4137 50%,#F59220 100%);
  --aw-focus:0 0 0 2px var(--surface,#FFFFFF),0 0 0 4px var(--orange-text,#C4342A);
  --aw-glide:cubic-bezier(.65,0,.25,1);--aw-rise:cubic-bezier(.2,.8,.3,1);
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px 16px;
  border:0;background:none;color:var(--ink,#1F1B17);overflow:auto;overscroll-behavior:contain;
  font-family:var(--font,'Circular',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;box-sizing:border-box}
.aw-profile:focus{outline:none}
.aw-profile *,.aw-profile *::before,.aw-profile *::after{box-sizing:border-box}
.aw-profile::backdrop{background:rgba(22,19,15,.6)}
.aw-profile-stage{min-height:100%;display:flex;align-items:center;justify-content:center;gap:24px}

/* The ID card. Its surface is a layer under the content (::before) with
   the lanyard slot cut out of it, as on the badge, so the dimmed page
   shows through the hole. (The sheen moves, so a mask on it would move
   too; its one pass crosses the hole.) */
.aw-profile-card{position:relative;isolation:isolate;flex:none;width:300px;min-height:478px;display:flex;flex-direction:column;padding:20px 24px 0;
  overflow:hidden;text-align:center;border:1px solid var(--line,#E4DFD7);border-radius:20px;
  box-shadow:0 8px 24px -14px rgba(0,0,0,.28),0 22px 50px -20px rgba(0,0,0,.4)}
.aw-profile-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--surface,#FFFFFF)}
/* The hole: 58 x 11 and 20px down, the same box as .aw-profile-slot. */
.aw-profile-card::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='11'%3E%3Crect width='58' height='11' rx='5.5'/%3E%3C/svg%3E") 50% 20px/58px 11px no-repeat,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='11'%3E%3Crect width='58' height='11' rx='5.5'/%3E%3C/svg%3E") 50% 20px/58px 11px no-repeat exclude,linear-gradient(#000 0 0)}
/* The slot's edge: a hairline round the hole, darker along the top. */
.aw-profile-slot{width:58px;height:11px;margin:0 auto 20px;flex:none;border-radius:999px;
  box-shadow:0 0 0 1px var(--line,#E4DFD7),0 -1px 1px 1px rgba(0,0,0,.12)}
.aw-profile-issuer{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:22px;font-size:.75rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2,#574E45)}
.aw-profile-issuer[hidden],.aw-profile-issuer img[hidden]{display:none}
.aw-profile-issuer img{width:20px;height:20px;object-fit:contain}
.aw-profile-photo{position:relative;width:152px;height:152px;margin:auto auto 20px;flex:none}
.aw-profile-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.aw-profile-ring circle{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:396;stroke-dashoffset:396;
  transition:stroke-dashoffset .72s var(--aw-glide) .15s}
.aw-profile-pic{position:absolute;inset:11px;border-radius:50%;overflow:hidden;background:var(--surface-2,#FBF9F5);
  opacity:0;transform:scale(.72);filter:blur(10px);
  transition:opacity .42s ease .4s,transform .56s cubic-bezier(.2,1.25,.35,1) .4s,filter .48s ease .4s}
.aw-profile-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aw-profile-initials{width:100%;height:100%;display:grid;place-items:center;background:var(--aw-grad);color:#fff;
  font-weight:800;font-size:2.75rem;letter-spacing:.02em}
.aw-profile-who{font-family:var(--font-display,'Quarto',Georgia,serif);font-weight:700;font-size:1.75rem;line-height:1.1;
  letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere;color:var(--ink,#1F1B17);
  opacity:0;transform:translateY(10px);transition:opacity .38s ease .66s,transform .46s var(--aw-rise) .66s}
.aw-profile-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:10px 0 auto;
  opacity:0;transform:translateY(8px);transition:opacity .36s ease .8s,transform .42s var(--aw-rise) .8s}
.aw-profile-chips span{font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:999px;border:1.5px solid var(--line,#E4DFD7);color:var(--ink-2,#574E45)}
.aw-profile-chips .aw-profile-ok-chip{border-color:transparent;color:var(--ok,#0E7050);background:color-mix(in srgb,var(--ok,#0E7050) 14%,transparent)}
.aw-profile-foot{display:flex;flex-direction:column;align-items:center;gap:3px;margin:24px -24px 0;padding:14px 18px;border-top:1px dashed var(--line,#E4DFD7);
  font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3,#786D60)}
.aw-profile-band{flex:none;height:10px;margin:0 -24px;background:linear-gradient(90deg,#E80E8A 0%,#EE4137 50%,#F59220 100%)}
.aw-profile-sheen{position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 35%,var(--aw-profile-sheen,rgba(255,255,255,.4)) 50%,transparent 65%)}
.aw-profile-on .aw-profile-ring circle{stroke-dashoffset:0}
.aw-profile-on .aw-profile-pic{opacity:1;transform:none;filter:none}
.aw-profile-on .aw-profile-who,.aw-profile-on .aw-profile-chips{opacity:1;transform:none}
.aw-profile-on .aw-profile-sheen{transform:translateX(120%);transition:transform .9s ease-in-out 1s}

/* The panel. */
.aw-profile-panel{flex:none;width:380px;max-width:100%;padding:20px 24px 24px;background:var(--surface,#FFFFFF);
  border:1px solid var(--line,#E4DFD7);border-radius:20px;box-shadow:0 8px 24px -14px rgba(0,0,0,.28),0 22px 50px -20px rgba(0,0,0,.4)}
.aw-profile-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -8px 14px 0}
.aw-profile-head h2{margin:0;font-family:var(--font-display,'Quarto',Georgia,serif);font-size:26px;font-weight:700;line-height:1.15;color:var(--ink,#1F1B17)}
.aw-profile-x{display:grid;place-items:center;flex:none;width:40px;height:40px;border:0;border-radius:999px;background:none;
  color:var(--ink-2,#574E45);cursor:pointer}
.aw-profile-x:hover{background:var(--line-soft,#F0EBE3);color:var(--ink,#1F1B17)}
.aw-profile-sec+.aw-profile-sec{margin-top:16px}
.aw-profile-k{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3,#786D60);margin-bottom:6px}
.aw-profile-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:var(--surface-2,#FBF9F5);
  border:1px solid var(--line-soft,#F0EBE3)}
.aw-profile-rt{min-width:0}
.aw-profile-rt .aw-profile-k{margin-bottom:2px}
.aw-profile-rt b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-profile-edit{display:flex;gap:8px;align-items:center}
.aw-profile-edit input{flex:1;min-width:0;min-height:44px;padding:10px 12px;font:inherit;font-size:15px;color:var(--ink,#1F1B17);
  background:var(--surface,#FFFFFF);border:1.5px solid var(--line-strong,#9E9384);border-radius:8px}
.aw-profile-note{margin:8px 0 0;font-size:13px;color:var(--ink-3,#786D60)}

.aw-profile-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;font:inherit;font-weight:700;
  color:var(--ink,#1F1B17);background:var(--surface,#FFFFFF);border:1.5px solid var(--line-strong,#9E9384);border-radius:999px;cursor:pointer;white-space:nowrap}
.aw-profile-ghost:hover{border-color:var(--ink-3,#786D60)}
.aw-profile-sec>.aw-profile-ghost{margin-top:12px;width:100%}
.aw-profile-quiet{display:inline-flex;align-items:center;flex:none;min-height:36px;padding:6px 10px;font:inherit;font-size:13px;font-weight:700;
  color:var(--ink-2,#574E45);background:none;border:0;border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap}
.aw-profile-quiet:hover{background:var(--line-soft,#F0EBE3);color:var(--ink,#1F1B17)}
.aw-profile-ghost:disabled,.aw-profile-quiet:disabled{opacity:.6;cursor:default}
.aw-profile button:focus-visible,.aw-profile input:focus-visible,.aw-profile a:focus-visible{outline:none;box-shadow:var(--aw-focus)}

.aw-profile-logins{list-style:none;margin:0;padding:0;border:1px solid var(--line-soft,#F0EBE3);border-radius:12px;background:var(--surface-2,#FBF9F5)}
.aw-profile-logins li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;min-height:56px}
.aw-profile-logins li+li{border-top:1px solid var(--line-soft,#F0EBE3)}
.aw-profile-login{min-width:0}
.aw-profile-login b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-profile-login small{display:block;font-size:12px;color:var(--ink-3,#786D60)}
.aw-profile-now{flex:none;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--ok,#0E7050);
  background:color-mix(in srgb,var(--ok,#0E7050) 14%,transparent)}

.aw-profile-wait{margin:8px 0;color:var(--ink-3,#786D60)}
.aw-profile-ok,.aw-profile-err{margin:14px 0 0;font-size:13px;font-weight:700}
.aw-profile-ok{color:var(--ok,#0E7050)}
.aw-profile-err{color:var(--err,#C5221A)}

/* Coming in: the card rises, the panel follows from beside it. */
.aw-profile[open] .aw-profile-card{animation:aw-profile-card .5s cubic-bezier(.25,1.15,.35,1) backwards}
.aw-profile[open] .aw-profile-panel{animation:aw-profile-panel .45s var(--aw-rise) .12s backwards}
@keyframes aw-profile-card{from{opacity:0;transform:translateY(16px) scale(.97)}}
@keyframes aw-profile-panel{from{opacity:0;transform:translateX(-12px)}}

/* Too narrow for both side by side: the card on top, the panel under it. */
@media (max-width:760px){
  .aw-profile{padding:16px}
  .aw-profile-stage{flex-direction:column;justify-content:flex-start;gap:16px}
  .aw-profile-card{width:min(300px,100%)}
  .aw-profile-panel{width:min(400px,100%);padding:18px 16px 20px}
  .aw-profile-edit{flex-wrap:wrap}
  .aw-profile-edit input{flex-basis:100%;font-size:16px}
  @keyframes aw-profile-panel{from{opacity:0;transform:translateY(12px)}}
}
@media (max-width:400px){
  .aw-profile-who{font-size:1.625rem}
}
@media (prefers-reduced-motion:reduce){
  .aw-profile[open] .aw-profile-card,.aw-profile[open] .aw-profile-panel{animation:none}
  .aw-profile *{transition-duration:150ms !important;transition-delay:0s !important}
  .aw-profile-sheen{display:none}
  .aw-profile-pic{transform:none;filter:none}
  .aw-profile-who,.aw-profile-chips{transform:none}
}