/* The HANS app (app.joinhans.io): the onboarding at /join and the profile at /profile. Page pieces only, ported from the
   approved mockup (HANS/hana/onboarding-mockup/assets/onboarding.css, screens A, B, C, F and the profile; Hana, the door
   and screens D and E are not in Phase 1). The kit (/assets/brand/v2/hans.css) holds the tokens and the hv- components;
   this file adds only what the kit lacks. Blue only. The phone layout (max 760px) is its own design, not a squeeze. */

/* fallbacks sized like the brand fonts, so the first paint does not jump (as Earn's own page does: assets/earn-v2/earn.css) */
@font-face{font-family:'Unbounded Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica'),local('Liberation Sans');size-adjust:141%;ascent-override:70.5%;descent-override:17.4%;line-gap-override:0%}
@font-face{font-family:'Space Grotesk Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica'),local('Liberation Sans');size-adjust:111.3%;ascent-override:88.4%;descent-override:26.2%;line-gap-override:0%}
:root{--hv-display:'Unbounded','Unbounded Fallback',sans-serif;--hv-body:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;--head:84px}

*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.app-page{margin:0;min-height:100vh;min-height:100dvh;overflow-x:clip}
:where(.app-page) button{font:inherit;color:inherit}
:where(.app-page) :is(h1,h2,h3,p,ul,ol){margin:0;padding:0}
:where(.app-page) :is(ul,ol){list-style:none}
.app-page img{display:block;max-width:100%}
.app-page svg{flex:none}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
:where(.app-page) :focus-visible{outline:2px solid var(--hv-sky);outline-offset:3px}
h1[tabindex="-1"]:focus{outline:none}
::selection{background:rgba(98,160,255,.45);color:#fff}

/* shared line-icon look (the page's <symbol>s) */
.iconbtn svg,.lk,.pp-x svg,.tick svg,.bi svg,.rows .ico svg,.ok svg,.addrow svg,.data-acts svg,.sk svg,.rg-dot svg,.rg-done svg,.ac-ico svg,.aw-opt svg{
  stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ================================================================ header (onboarding) */
.ob-head .ob-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
.ob-head .side{display:flex;align-items:center;gap:14px;min-width:0}
.ob-head .side.r{justify-content:flex-end}
.ob-head .hv-brand{pointer-events:none}

/* the progress bar: one continuous fill over the steps (--steps, from join.js's STEPS), filling one step at a time */
.prog{--steps:4;display:flex;align-items:center;gap:14px;min-width:0}
.prog-track{position:relative;display:block;width:clamp(200px,21vw,300px);height:8px;border-radius:8px;background:rgba(160,200,255,.12);box-shadow:inset 0 0 0 1px rgba(160,200,255,.1)}
.prog-track::after{content:"";position:absolute;inset:-1px 0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--steps) - 3px),var(--hv-bg) calc(100% / var(--steps) - 3px) calc(100% / var(--steps)))}
.prog-fill{position:absolute;z-index:1;left:0;top:0;bottom:0;width:0;border-radius:8px;
  background:linear-gradient(90deg,#3D7BFF,#94C3FF 62%,#EAF3FF);box-shadow:0 0 16px rgba(98,160,255,.85);transition:width .95s var(--hv-ease)}
.prog-fill::after{content:"";position:absolute;right:-6px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(234,243,255,.6) 35%,rgba(234,243,255,0) 70%)}
.prog-lbl{font:600 12.5px/1 var(--hv-body);color:var(--hv-dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.prog-lbl b{font:700 13px/1 var(--hv-display);color:var(--hv-ice2)}
.prog-lbl.bump b{display:inline-block;animation:pop .5s var(--hv-spring)}

:where(.iconbtn){background:none}
.iconbtn{--r:999px;position:relative;display:grid;place-items:center;flex:none;width:46px;height:46px;padding:0;border:0;border-radius:999px;cursor:pointer;color:var(--hv-paper);transition:transform .45s var(--hv-spring),box-shadow .3s ease}
.iconbtn svg{width:20px;height:20px}
.iconbtn:hover{transform:translateX(-2px)}
.iconbtn.sm{width:44px;height:44px}
.iconbtn.sm:hover{transform:rotate(90deg)}
.back-top{display:none}
.wallet-cap{min-height:46px;padding:0 5px 0 16px;gap:10px}
.wallet-cap .addr{color:var(--hv-ice);font-size:13px}
.wallet-cap .av img{object-position:50% 30%}
.wallet-cap.arrive{animation:cap-in .7s var(--hv-spring) both}
@keyframes cap-in{from{opacity:0;transform:translateX(24px) scale(.9)}}

/* ================================================================ screens */
.scr{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:calc(var(--head) + 8px) 0 48px}
.scr.out{animation:scr-out .2s ease both}
@keyframes scr-out{to{opacity:0}}
.lay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(36px,5.5vw,96px);align-items:center;
  grid-template-areas:". vis" "back vis" "hd vis" "lede vis" "body vis" "act vis" ". vis";grid-template-rows:1fr auto auto auto auto auto 1fr}
.lay>.backbtn{grid-area:back;justify-self:start;margin-bottom:30px}
.lay>.hd{grid-area:hd}
.lay>.lede{grid-area:lede}
.lay>.body{grid-area:body}
.lay>.vis{grid-area:vis;min-width:0}
.lay>.act{grid-area:act}

/* headlines: big, few words; lines rise out of a mask when a screen opens. The mask is a clip-path (the mockup's
   overflow plus a negative margin, without the overlapping line boxes), lifted once the lines are up. */
.hd{font-size:clamp(48px,5.8vw,88px);line-height:1;letter-spacing:-.055em}
.hd .ln{display:block;white-space:nowrap}
.hd .ln>span{display:inline-block}
.scr.in .hd .ln,.app.in .hd .ln{clip-path:inset(0 -.6em -.1em -.6em);animation:ln-open 0s 1.3s forwards}
.scr.in .hd .ln>span,.app.in .hd .ln>span{animation:ln-up 1s var(--hv-ease) var(--d,0s) backwards}
@keyframes ln-up{from{transform:translateY(108%)}}
@keyframes ln-open{to{clip-path:none}}
.lede{margin-top:22px;font-size:20px;line-height:1.45;color:var(--hv-muted);max-width:30em}
.body{margin-top:34px}
.act{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.act.col{flex-direction:column;align-items:flex-start}
.hint{font-size:15px;color:var(--hv-dim);min-height:1.45em;transition:color .3s}
.hint.ok{color:var(--hv-ice)}
.hints{display:grid;gap:4px}
.hint.quiet{font-size:14px;color:var(--hv-faint);min-height:0}

/* everything else rises in, offset toward the direction of travel */
.scr.in .rise,.app.in .rise{animation:rise .85s var(--hv-ease) var(--d,0s) backwards}
@keyframes rise{from{opacity:0;transform:translate(var(--dx,0px),22px)}}

/* ================================================================ buttons */
.hv-btn.xl{min-height:58px;padding:0 30px;font-size:16px;gap:10px}
.hv-btn .bi{display:inline-grid;place-items:center;width:20px;height:20px}
.hv-btn .bi:empty{display:none}
.hv-btn .bi svg{width:20px;height:20px}
.hv-btn-primary .bi svg{stroke:#06122E}
.hv-btn-primary .bi svg [fill="currentColor"]{fill:#06122E}
.hv-btn-glass .bi .spin{border-color:rgba(160,200,255,.25);border-top-color:var(--hv-ice)}
.hv-btn-glass{--r:999px}
.duo .hv-btn{min-width:172px}
.hv-btn .spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(6,18,46,.22);border-top-color:#06122E;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hv-btn.is-busy{cursor:progress}
.hv-btn.is-done{box-shadow:inset 0 1px 0 #fff,inset 0 -2px 8px rgba(40,90,200,.35),0 0 0 6px rgba(98,160,255,.16),0 16px 44px -10px rgba(98,160,255,1)}
.hv-btn.pop{animation:pop .5s var(--hv-spring)}
@keyframes pop{40%{transform:scale(1.05)}}
.linkbtn{min-height:44px;padding:0;border:0;background:none;cursor:pointer;font:600 15px/1 var(--hv-body);color:var(--hv-sky);text-decoration:underline;text-decoration-color:rgba(148,195,255,.4);text-underline-offset:5px;transition:color .2s}
.linkbtn:hover{color:#fff}
.mini{--r:999px;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:40px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;font:600 13.5px/1 var(--hv-body);color:var(--hv-paper);white-space:nowrap;text-decoration:none;transition:transform .45s var(--hv-spring)}
.mini:hover:not(:disabled){transform:translateY(-2px)}
.mini:disabled{opacity:.6;cursor:default}
.mini.pri{color:#06122E;background:linear-gradient(180deg,#F6FAFF,#BFD8FF);box-shadow:inset 0 1px 0 #fff,0 8px 22px -10px rgba(98,160,255,.9)}
@media (pointer:coarse){.mini{min-height:44px}}

/* ================================================================ A: Join HANS */
.lay-a{grid-template-areas:". vis" "hd vis" "act vis" ". vis";grid-template-rows:1fr auto auto 1fr}
.lay-a .hd{font-size:clamp(66px,8.6vw,132px);line-height:.98}
.lay-a .act{margin-top:46px}
.lay-a .hv-btn.xl{min-height:64px;padding:0 36px;font-size:17px}
/* the halo is wider than the stage; its glow ends at 72% of its radius, inside the stage, so the stage clips it sideways
   (never a sideways scroll on a phone) and leaves Pearl's hop free above */
.stage{position:relative;height:min(720px,calc(100dvh - var(--head) - 50px));overflow-x:clip}
.stage .halo{position:absolute;left:50%;top:50%;width:min(112%,760px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(70,130,255,.34),rgba(40,90,220,.12) 55%,transparent 72%)}
/* the poster sits in the stage like Earn's: absolute, so its height is a share of the stage, never of its own image */
.pearl{position:absolute;left:50%;bottom:0;height:97%;width:auto;max-width:100%;aspect-ratio:640/779;transform:translateX(-50%);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:40px}
.pearl img{width:100%;height:100%;object-fit:contain;transform-origin:50% 94%;animation:breathe 5.2s ease-in-out infinite;filter:drop-shadow(0 30px 60px rgba(30,70,180,.35))}
@keyframes breathe{50%{transform:translateY(-7px) scale(1.008)}}
.pearl.hop img{animation:hop .95s var(--hv-ease) both}
@keyframes hop{0%{transform:none}14%{transform:scale(1.07,.9)}40%{transform:translateY(-38px) scale(.95,1.06)}66%{transform:translateY(0) scale(1.05,.94)}82%{transform:scale(.99,1.01)}100%{transform:none}}
.pearl:focus-visible{outline-offset:-10px}

/* ================================================================ the passport card (assets/app/passport-card.js) */
.pp{--r:28px;position:relative;width:min(392px,100%);margin-inline:auto;border-radius:28px;overflow:hidden;isolation:isolate;color:var(--hv-paper);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(170,210,255,.08),transparent 64%),radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.1),rgba(255,255,255,0) 62%),var(--hv-glass-hi),rgba(10,24,58,.86);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(235,244,255,.28),inset 0 0 0 1px rgba(160,200,255,.26),0 40px 80px -30px rgba(0,0,0,.9),0 0 70px -22px rgba(98,160,255,.6);
  transition:transform .5s var(--hv-spring)}
.pp::before{content:"";position:absolute;inset:6px;z-index:-1;border:1px solid rgba(160,200,255,.12);border-radius:22px;pointer-events:none}
.pp::after{content:"";position:absolute;inset:-50%;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(220,236,255,.05) 45%,rgba(220,236,255,.15) 49%,transparent 56%);transform:translateX(-45%)}
.scr.in .pp::after,.app.in .pp::after{animation:sheen 3.6s ease-out .4s forwards}
@keyframes sheen{to{transform:translateX(65%)}}
.pp>:where(:not(.hv-shine,.pp-stamp)){position:relative;z-index:2}
.pp-top{display:flex;align-items:center;gap:10px;padding:18px 18px 14px 20px;font:600 12.5px/1.2 var(--hv-display);letter-spacing:.02em}
.pp-top>img{width:32px;height:32px;border-radius:9px;filter:drop-shadow(0 0 10px rgba(133,188,251,.35))}
.pp-top small{display:block;margin-top:4px;font:600 9px/1.3 var(--hv-body);letter-spacing:.2em;color:var(--hv-dim)}
.pp-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--hv-live);box-shadow:0 0 0 4px rgba(140,190,255,.12),0 0 12px var(--hv-live)}
.pp-portrait{position:relative;margin:0 16px;aspect-ratio:1.5;overflow:hidden;border-radius:18px;background:var(--hv-navy);box-shadow:0 0 0 1px rgba(160,200,255,.24)}
.pp-portrait>img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;transition:opacity .35s ease,transform .6s var(--hv-spring)}
.pp-portrait>img.swap{opacity:0;transform:scale(1.06)}
.pp-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 56%,rgba(4,10,28,.86));pointer-events:none}
.pp-seal{position:absolute;bottom:12px;right:12px;z-index:2;width:34px;height:34px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#0b1020;box-shadow:0 0 0 1px rgba(160,200,255,.4),0 0 14px rgba(98,160,255,.45)}
.pp-seal img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.pp-plabel{position:absolute;bottom:14px;left:13px;z-index:2;font:600 9px/1 var(--hv-body);letter-spacing:.18em;color:var(--hv-ice)}
.pp-id{padding:18px 22px 14px}
/* the username is the identity: it is the passport's main line (no name, founder 12 Nov) */
.pp-name{font:600 26px/1.15 var(--hv-display);letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.15em}
.pp-name.tick{animation:nm .35s var(--hv-spring)}
@keyframes nm{40%{transform:translateY(-2px);text-shadow:0 0 18px rgba(148,195,255,.8)}}
.pp-x{display:flex;align-items:center;gap:8px;margin-top:10px;padding:6px 12px 6px 9px;width:max-content;max-width:100%;border-radius:999px;font:600 12.5px/1.2 var(--hv-body);color:var(--hv-dim);border:1px dashed rgba(160,200,255,.3)}
.pp-x svg{width:14px;height:14px}
.pp-x span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-x.on{color:var(--hv-ice);border-style:solid;border-color:rgba(160,200,255,.45);background:rgba(98,160,255,.1)}
.pp-x.on.arrive{animation:xin .7s var(--hv-spring)}
@keyframes xin{from{transform:scale(.8);opacity:.3}}
/* status and level: labels on top, values below; the level wears a ring that shows how close the next one is */
.pp-stats{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:8px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid rgba(160,200,255,.12)}
.pp-stats .k{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:600 10px/1 var(--hv-body);letter-spacing:.16em;text-transform:uppercase;color:var(--hv-dim)}
.pp-stats .k-lv{justify-self:center}
.pp-status{justify-self:start;display:inline-flex;align-items:center;min-height:34px;padding:0 15px;border-radius:999px;font:600 14px/1 var(--hv-display);letter-spacing:-.01em;color:var(--hv-ice2);
  background:rgba(98,160,255,.1);box-shadow:inset 0 0 0 1px rgba(160,200,255,.3);transition:background-color .4s,box-shadow .4s}
.pp.is-res .pp-status,.pp.stamped .pp-status{background:rgba(98,160,255,.2);box-shadow:inset 0 0 0 1px rgba(207,227,255,.6),0 0 18px -4px rgba(98,160,255,.8)}
.lvring{--p:0;position:relative;width:52px;height:52px;display:grid;place-items:center;justify-self:center}
.lvring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.lvring .tr{fill:rgba(6,14,36,.55);stroke:rgba(160,200,255,.18);stroke-width:3}
.lvring .fl{fill:none;stroke:#94C3FF;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p) * 100);stroke-opacity:calc(var(--p) * 30);
  filter:drop-shadow(0 0 4px rgba(98,160,255,.95));transition:stroke-dashoffset 1.3s var(--hv-ease)}
.lvnum{position:relative;display:grid;height:1.3em;overflow:hidden;font:700 19px/1.3 var(--hv-display);color:#fff;font-variant-numeric:tabular-nums}
.lvnum>span{grid-area:1/1;text-align:center}
.lvnum.rolling .old{animation:roll-out .6s var(--hv-ease) forwards}
.lvnum.rolling .new{animation:roll-in .85s var(--hv-spring) .14s both}
@keyframes roll-out{to{transform:translateY(-115%);opacity:0}}
@keyframes roll-in{from{transform:translateY(115%);opacity:0}}
.pp-bottom{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:0 22px;padding:12px 0 16px;border-top:1px solid rgba(160,200,255,.16);font:600 8.5px/1 var(--hv-body);letter-spacing:.18em;color:var(--hv-dim)}
.pp-code{font:14px/1 monospace;letter-spacing:-2px;color:var(--hv-sky);opacity:.6}
/* "test network" (spec §2.11): the small tag the mockup's ladder carries, beside the passport's Status while levels read
   a test network */
.tn{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;font:600 9.5px/1 var(--hv-body);letter-spacing:.1em;text-transform:uppercase;color:var(--hv-dim);box-shadow:inset 0 0 0 1px rgba(160,200,255,.22);white-space:nowrap}
.pp-stats .tn{padding:3px 6px;font-size:8.5px;letter-spacing:.12em}
/* the level-up moment: a soft glow, a light sweep, the ring flares (blue and glass, no confetti) */
.pp.lvup{animation:lvglow 1.6s var(--hv-ease)}
@keyframes lvglow{30%{box-shadow:inset 0 1px 0 rgba(235,244,255,.4),inset 0 0 0 1px rgba(207,227,255,.7),0 40px 80px -30px rgba(0,0,0,.9),0 0 130px -6px rgba(98,160,255,1)}}
.pp.lvup::after{animation:sheen2 1.3s ease-out}
@keyframes sheen2{from{transform:translateX(-45%)}to{transform:translateX(65%)}}
.pp.lvup .lvring{animation:flare 1.3s var(--hv-spring)}
@keyframes flare{30%{transform:scale(1.22);filter:drop-shadow(0 0 16px rgba(148,195,255,1))}}
/* the stamp: Visitor · Level 0 on F, Resident on the profile. It slams down, the card gives, a ripple spreads; it sits in
   the portrait's top corner, clear of the Hansian's face */
/* one label of two inline lines ("Visitor", a break, "Level 0"), so the rotated lines never read as overlapping boxes */
.pp-stamp{position:absolute;z-index:5;right:26px;top:74px;display:block;padding:9px 14px 8px;border-radius:12px;pointer-events:none;opacity:0;transform:rotate(-8deg);
  text-align:center;white-space:nowrap;font:800 12.5px/1 var(--hv-display);letter-spacing:.12em;text-transform:uppercase;color:#EAF3FF;text-shadow:0 0 14px rgba(148,195,255,.95);
  background:radial-gradient(120% 120% at 50% 0,rgba(207,227,255,.24),rgba(98,160,255,.08) 70%),rgba(6,16,44,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 0 0 2px rgba(207,227,255,.9),inset 0 0 0 4px rgba(6,16,44,.55),inset 0 0 0 5px rgba(207,227,255,.5),0 0 38px rgba(98,160,255,.9)}
.pp-stamp .lv{font-size:9px;letter-spacing:.24em;color:var(--hv-sky)}
.pp-stamp::after{content:"";position:absolute;inset:-2px;border-radius:14px;box-shadow:0 0 0 2px rgba(207,227,255,.7);opacity:0;pointer-events:none}
.pp.is-res .pp-stamp{opacity:1}
.pp.stamped .pp-stamp{animation:stamp .72s cubic-bezier(.2,.9,.25,1.15) forwards}
.pp.stamped .pp-stamp::after{animation:ripple 1s ease-out .36s}
.pp.stamped{animation:thud .72s ease-out}
@keyframes stamp{0%{opacity:0;transform:scale(2.6) rotate(-26deg)}52%{opacity:1;transform:scale(.9) rotate(-6deg)}74%{transform:scale(1.05) rotate(-8.6deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes thud{0%,46%{transform:none}56%{transform:translateY(4px) scale(.985)}78%{transform:translateY(-1px)}100%{transform:none}}
@keyframes ripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}

/* ================================================================ B: Your passport */
.picker{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:20px}
.picker button{position:relative;display:flex;align-items:center;gap:10px;min-height:58px;padding:6px 18px 6px 6px;border:0;border-radius:999px;cursor:pointer;font:600 14px/1 var(--hv-display);color:var(--hv-muted);
  background:rgba(12,24,58,.55);box-shadow:inset 0 0 0 1px rgba(160,200,255,.18);transition:transform .45s var(--hv-spring),box-shadow .3s ease,color .2s,background-color .2s}
.picker button:hover{transform:translateY(-2px);color:#fff}
.picker img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 1px rgba(160,200,255,.3)}
.picker [aria-checked="true"]{color:#fff;background:radial-gradient(120% 140% at 0 0,rgba(61,123,255,.3),transparent 60%),rgba(12,24,58,.7);box-shadow:inset 0 0 0 1.5px rgba(207,227,255,.75),0 0 26px -6px rgba(98,160,255,.9)}
.picker .tick{position:absolute;left:36px;top:2px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#F6FAFF,#9CC4FF);color:#06122E;opacity:0;transform:scale(.4);transition:opacity .2s,transform .45s var(--hv-spring)}
.picker .tick svg{width:12px;height:12px;stroke-width:3}
.picker [aria-checked="true"] .tick{opacity:1;transform:none}
.nohansian{display:flex;justify-content:center;margin:18px auto 0;max-width:340px;text-align:center;font-size:15px;line-height:1.45;color:var(--hv-muted)}
.nohansian.checking{color:var(--hv-dim)}

.lay-b .body{margin-top:46px}
.form label{display:block;margin:0 0 10px;font:500 15px/1.3 var(--hv-body);color:var(--hv-muted)}
.form .userfield{max-width:460px}
.hv-input.big{min-height:58px;padding:0 18px;border-radius:16px;font-size:18px}
.hv-input::placeholder{color:rgba(160,200,255,.4)}
.userfield{position:relative}
.userfield .at{position:absolute;left:18px;top:50%;transform:translateY(-52%);z-index:1;font:500 18px var(--hv-body);color:var(--hv-dim);pointer-events:none}
.userfield .hv-input{padding-left:40px;padding-right:150px}
.ustat{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:7px;font:600 13.5px/1 var(--hv-body);color:var(--hv-dim);white-space:nowrap}
.ustat .spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(160,200,255,.22);border-top-color:var(--hv-ice);animation:spin .8s linear infinite}
.ustat .okc{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#F6FAFF,#9CC4FF);animation:pop .45s var(--hv-spring)}
.ustat .okc svg{width:12px;height:12px;stroke:#06122E;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ustat.ok{color:var(--hv-ice)}
.ustat.bad{color:#BFD8FF}
.ustat .try{min-height:36px;padding:0 12px;border:0;border-radius:999px;cursor:pointer;font:600 12.5px/1 var(--hv-body);color:#06122E;background:linear-gradient(180deg,#F6FAFF,#BFD8FF)}
.userfield.bad .hv-input{border-color:rgba(191,216,255,.55)}
/* a member who already has a username: it is fixed here (a rename happens in the HANS window, from the profile) */
.ufixed{max-width:460px;font:600 24px/1.2 var(--hv-display);letter-spacing:-.03em;overflow-wrap:anywhere}
.ufixed small{display:block;margin-top:8px;font:500 14px/1.4 var(--hv-body);letter-spacing:0;color:var(--hv-dim)}

/* ================================================================ C: Add your X */
.unlocks{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px}
.ulk{display:inline-flex;align-items:center;gap:8px;padding:8px 13px 8px 9px;border-radius:999px;font:600 14px/1 var(--hv-display);color:var(--hv-dim);white-space:nowrap;
  background:rgba(140,190,255,.04);border:1px dashed rgba(140,190,255,.3);transition:color .3s,border-color .3s,background-color .3s,box-shadow .4s}
.ulk .u1,.ulk .u2{display:inline-flex;align-items:center;gap:8px}
.ulk .u2{gap:6px}
.ulk img{width:20px;height:20px;filter:saturate(.3) brightness(.75);transition:filter .3s}
.ulk small{font:500 12.5px/1 var(--hv-body)}
.ulk .lk{width:14px;height:14px;margin-left:2px}
.ulk.open{color:var(--hv-amount);border-style:solid;border-color:rgba(140,190,255,.42);background:rgba(140,190,255,.08);box-shadow:0 0 22px -8px rgba(140,190,255,.8),inset 0 1px 0 rgba(230,242,255,.18)}
.ulk.open.arrive{animation:pop .55s var(--hv-spring)}
.ulk.open img{filter:none}
.ulk.open small{color:var(--hv-ice)}

/* ================================================================ F: You're in */
.lay-f{grid-template-areas:". vis" "back vis" "hd vis" "body vis" "act vis" ". vis";grid-template-rows:1fr auto auto auto auto 1fr}
.lay-f .body{margin-top:30px}
.lay-f .act{margin-top:30px}
.steps{position:relative;display:grid;gap:10px;max-width:540px}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:9px 16px 9px 9px;border-radius:20px;background:rgba(10,22,52,.42);box-shadow:inset 0 1px 0 rgba(235,244,255,.1),inset 0 0 0 1px rgba(160,200,255,.14)}
.scr.in .steps li{animation:rise .7s var(--hv-ease) both}
.scr.in .steps li:nth-child(1){animation-delay:.9s}.scr.in .steps li:nth-child(2){animation-delay:1.02s}.scr.in .steps li:nth-child(3){animation-delay:1.14s}
.sk{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 16px/1 var(--hv-display);color:var(--hv-ice);background:linear-gradient(160deg,rgba(40,80,180,.55),rgba(8,16,40,.85));box-shadow:inset 0 0 0 1px rgba(160,200,255,.3)}
.sk svg{width:20px;height:20px}
.steps p b{display:block;font:600 15px/1.2 var(--hv-display);letter-spacing:-.02em}
.steps p>span{display:block;margin-top:4px;font-size:14.5px;line-height:1.35;color:var(--hv-muted)}
.first-step{display:flex;align-items:center;gap:12px;margin-top:20px;max-width:540px;font-size:16.5px;line-height:1.4;color:var(--hv-ice)}
.first-step img{width:30px;height:30px;flex:none;filter:drop-shadow(0 0 10px rgba(140,190,255,.6))}
.scr.in .first-step{animation:rise .7s var(--hv-ease) 1.3s both}

/* ================================================================ the wallet chooser (assets/app/shell.js) */
.aw{--r:28px;position:fixed;inset:0;margin:auto;width:min(92vw,420px);max-height:min(88dvh,640px);padding:24px;border:0;border-radius:28px;color:var(--hv-paper);overflow:auto;
  background:radial-gradient(circle at 50% 0,rgba(98,160,255,.16),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01)),#081330;
  box-shadow:inset 0 1px 0 rgba(235,244,255,.24),inset 0 0 0 1px rgba(160,200,255,.22),0 40px 120px rgba(0,0,0,.7)}
.aw[open]{animation:aw-in .4s var(--hv-spring) both}
@keyframes aw-in{from{opacity:0;transform:translateY(16px) scale(.96)}}
.aw::backdrop{background:rgba(2,5,13,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.aw-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.aw-head h2{font:600 22px/1.2 var(--hv-display);letter-spacing:-.03em}
.aw-sub{margin-top:8px;font-size:15px;line-height:1.45;color:var(--hv-muted)}
.aw-list{display:grid;gap:10px;margin-top:18px}
.aw-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 16px 8px 10px;border:0;border-radius:18px;cursor:pointer;text-align:left;font:600 15px/1.25 var(--hv-body);color:var(--hv-paper);
  background:rgba(12,24,58,.7);box-shadow:inset 0 0 0 1px rgba(160,200,255,.2);transition:transform .45s var(--hv-spring),box-shadow .3s}
.aw-opt:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(190,220,255,.45),0 0 26px -8px rgba(98,160,255,.8)}
.aw-opt img{width:36px;height:36px;flex:none;border-radius:10px;object-fit:contain}
.aw-opt span{min-width:0;overflow-wrap:anywhere}
.aw-list a.aw-opt{text-decoration:none}
.aw-status{min-height:1.4em;margin-top:14px;font-size:14px;line-height:1.4;color:var(--hv-ice)}

/* ================================================================ profile (app.joinhans.io/profile; package A3 builds its content) */
.app .hv-head .hv-bar{gap:16px}
.app .hv-brand{min-height:44px;padding:0;border:0;background:none;cursor:pointer;color:inherit}
.app .hv-acct{position:relative;gap:10px}
.me-cap{cursor:default;padding:0 16px;gap:12px}
.me-cap.glow{animation:capglow 1.8s var(--hv-ease)}
@keyframes capglow{25%{box-shadow:inset 0 1px 0 rgba(235,244,255,.3),0 0 0 1px rgba(207,227,255,.6),0 0 34px rgba(98,160,255,.8)}}
.me-pfp{padding:0;flex:none}
.me-pfp img{position:relative;z-index:3;width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.prof{padding-top:calc(var(--head) + 40px)}
.p-hd{font-size:clamp(46px,5.4vw,82px)}
.p-hd .fit{white-space:nowrap}

/* the bento: passport + ladder, cards beside the bounty line, then accounts, apps, tokens, data */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:44px}
.tile{--r:28px;position:relative;padding:26px;border-radius:28px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.012)),rgba(10,22,52,.46);
  box-shadow:inset 0 1px 0 rgba(235,244,255,.22),inset 0 0 0 1px rgba(160,200,255,.14),0 26px 50px -30px rgba(0,0,0,.85);
  transition:box-shadow .35s ease}
.tile:hover{box-shadow:inset 0 1px 0 rgba(235,244,255,.28),inset 0 0 0 1px rgba(180,215,255,.3),0 30px 70px -34px rgba(60,120,255,.75)}
.tile>:where(:not(.hv-shine)){position:relative;z-index:2}
.t-pass{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(28px,4.2vw,64px);align-items:center;padding:30px;
  background:radial-gradient(620px 420px at 82% 0%,rgba(98,160,255,.18),transparent 60%),radial-gradient(520px 420px at 0% 100%,rgba(30,70,180,.24),transparent 60%),rgba(10,22,52,.5)}
.pass-pp .pp{width:100%}
.t-cards{grid-column:1/span 7}
.col-r{grid-column:8/span 5;display:flex;flex-direction:column;gap:18px;min-width:0}
.col-r .t-hana{flex:1}
.t-acct,.t-apps,.t-tok{grid-column:span 4}
.t-data{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 26px}
.t-h{display:flex;align-items:center;gap:10px;font:600 22px/1.2 var(--hv-display);letter-spacing:-.02em}
.t-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.t-face{width:44px;height:44px;border-radius:14px;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 1px rgba(200,225,255,.35),0 0 20px -6px rgba(98,160,255,.8)}

/* the ladder: Level 1, Level 2, Resident. The step they are on is lit, finished steps are ticked */
.ladder{display:flex;flex-direction:column;gap:16px;min-width:0}
.rungs{position:relative;display:grid;gap:10px}
.rungs::before{content:"";position:absolute;left:37px;top:36px;bottom:36px;width:2px;border-radius:2px;background:linear-gradient(rgba(160,200,255,.32),rgba(160,200,255,.08))}
.rung{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:18px;min-height:76px;padding:12px 14px;border-radius:22px;transition:background-color .5s,box-shadow .5s}
.rg-dot{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:700 17px/1 var(--hv-display);color:var(--hv-dim);
  background:#081330;box-shadow:inset 0 0 0 1.5px rgba(160,200,255,.3);transition:background .4s,color .4s,box-shadow .4s}
.rg-dot>b{display:grid;place-items:center}
.rg-dot>b svg{width:20px;height:20px}
.rg-dot>svg{display:none;width:20px;height:20px;stroke-width:2.6}
.rung.now{background:radial-gradient(120% 160% at 0 50%,rgba(61,123,255,.24),transparent 62%),rgba(98,160,255,.05);box-shadow:inset 0 0 0 1px rgba(170,210,255,.3),0 0 40px -18px rgba(98,160,255,.9)}
.rung.now .rg-dot{color:#06122E;background:linear-gradient(180deg,#F6FAFF,#9CC4FF);box-shadow:0 0 0 5px rgba(98,160,255,.16),0 0 26px rgba(98,160,255,.85)}
.rung.now .rg-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 2px rgba(207,227,255,.55);animation:rg-pulse 2.6s var(--hv-ease) infinite;pointer-events:none}
@keyframes rg-pulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
.rung.done .rg-dot{color:#fff;background:linear-gradient(160deg,#3D7BFF,#1F4FB8);box-shadow:inset 0 0 0 1px rgba(207,227,255,.5),0 0 18px -2px rgba(98,160,255,.85)}
.rung.done .rg-dot>b{display:none}
.rung.done .rg-dot>svg{display:block}
.rung.tick .rg-dot{animation:tickpop .7s var(--hv-spring)}
@keyframes tickpop{0%{transform:scale(.6)}50%{transform:scale(1.2);box-shadow:0 0 0 8px rgba(98,160,255,.18),0 0 34px rgba(98,160,255,1)}100%{transform:none}}
.rg-txt{min-width:0}
.rg-txt b{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;font:600 17px/1.2 var(--hv-display);letter-spacing:-.02em}
.rg-txt>span{display:block;margin-top:5px;font-size:14.5px;line-height:1.35;color:var(--hv-muted)}
.rung:not(.now):not(.done) .rg-txt{opacity:.82}
.rung.done .rg-txt>span{color:var(--hv-dim)}
.rg-act{display:flex;justify-content:flex-end}
.rg-btn{min-height:46px;padding:0 20px;font-size:14px}
.rg-done{display:inline-flex;align-items:center;gap:6px;padding:0 6px;font:600 13.5px/1 var(--hv-body);color:var(--hv-sky)}
.rg-done svg{width:16px;height:16px;stroke-width:2.4}
.journey{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:14px;padding:0 4px;border:0;background:none;cursor:pointer;font:500 14px/1 var(--hv-body);color:var(--hv-dim);text-decoration:none;transition:color .2s}
.journey b{color:var(--hv-ice);font-weight:600}
.journey span{transition:transform .45s var(--hv-spring)}
.journey:hover{color:#fff}
.journey:hover span{transform:translateX(3px)}

/* Activity Cards: a square Hub card beside the empty message */
.cards{margin-top:18px}
.cards[data-mode="start"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.cards[data-mode="list"]{display:grid;gap:12px}
.acard{position:relative;border-radius:24px;padding:20px;
  background:radial-gradient(120% 90% at 0 0,rgba(61,123,255,.26),transparent 60%),rgba(8,20,50,.72);
  box-shadow:inset 0 1px 0 rgba(235,244,255,.18),inset 0 0 0 1px rgba(160,200,255,.24),0 24px 50px -30px rgba(0,0,0,.9);transition:transform .5s var(--hv-spring),box-shadow .35s}
.acard:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(235,244,255,.24),inset 0 0 0 1px rgba(190,220,255,.4),0 28px 60px -30px rgba(60,120,255,.8)}
.ac-ico{width:52px;height:52px;flex:none;border-radius:16px;overflow:hidden;display:grid;place-items:center;color:#DCEBFF;border:1px solid rgba(160,200,255,.26);background:linear-gradient(160deg,rgba(40,80,180,.6),rgba(8,16,40,.85));box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 24px -8px rgba(98,160,255,.8)}
.ac-ico svg{width:26px;height:26px}
.ac-ico img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ac-txt b{display:block;font:600 19px/1.2 var(--hv-display);letter-spacing:-.025em}
.ac-txt p{margin-top:6px;font-size:15px;line-height:1.4;color:var(--hv-muted)}
.ac-live{display:flex;align-items:center;gap:9px;font:500 13.5px/1 var(--hv-body);color:var(--hv-ice)}
.ac-live b{font:600 13.5px/1 var(--hv-display);color:#fff}
.ac-live .dot{width:8px;height:8px;border-radius:50%;background:var(--hv-live);box-shadow:0 0 10px var(--hv-live);animation:hv-blink 2s infinite}
.ac-rew{flex:none}
.ac-rew.ready{box-shadow:0 0 22px -4px rgba(140,190,255,.95),inset 0 1px 0 rgba(230,242,255,.25);border-color:rgba(190,220,255,.6)}
.ac-rew.earned{color:var(--hv-sky);background:rgba(140,190,255,.04);box-shadow:none}
.cards[data-mode="start"] .hubcard{aspect-ratio:1;display:flex;flex-direction:column;gap:14px}
.cards[data-mode="start"] .hubcard .ac-rew{position:absolute;top:20px;right:18px}
.cards[data-mode="start"] .hubcard .ac-go{margin-top:auto;align-self:stretch}
.ac-go.hv-btn{min-height:50px;padding:0 22px}
.cards-empty{display:grid;justify-items:center;align-content:center;text-align:center;gap:10px;padding:20px 12px;border-radius:24px;border:1.5px dashed rgba(160,200,255,.18)}
.ghosts{position:relative;width:200px;height:96px;margin:4px 0 6px}
.ghosts span{position:absolute;left:50%;top:6px;width:120px;height:80px;margin-left:-60px;border-radius:16px;border:1.5px dashed rgba(160,200,255,.32);background:rgba(98,160,255,.05);transition:transform .7s var(--hv-spring)}
.ghosts span:nth-child(1){transform:rotate(-9deg) translateX(-36px)}
.ghosts span:nth-child(2){transform:rotate(8deg) translateX(36px)}
.ghosts span:nth-child(3){display:grid;place-items:center;border-style:solid;border-color:rgba(160,200,255,.4);background:rgba(16,34,80,.85);color:var(--hv-ice)}
.ghosts span:nth-child(3) svg{width:26px;height:26px}
.t-cards:hover .ghosts span:nth-child(1){transform:rotate(-14deg) translateX(-56px) translateY(-4px)}
.t-cards:hover .ghosts span:nth-child(2){transform:rotate(13deg) translateX(56px) translateY(-4px)}
.t-cards:hover .ghosts span:nth-child(3){transform:translateY(-6px)}
.pe-big{max-width:15em;font:600 19px/1.25 var(--hv-display);letter-spacing:-.03em;margin-bottom:8px}

/* bounties to claim: one glowing line, only when something is ready (package A5) */
.bline-wrap{display:grid;grid-template-rows:1fr}
.bline-wrap.arrive{animation:bl-in .8s var(--hv-spring) both}
.bline-wrap.leaving{animation:bl-out .38s ease forwards}
@keyframes bl-in{from{grid-template-rows:0fr;opacity:0;transform:translateY(-10px)}}
@keyframes bl-out{to{grid-template-rows:0fr;opacity:0;transform:scale(.97)}}
.bline{display:flex;align-items:center;gap:14px;min-height:0;overflow:hidden;padding:14px 14px 14px 16px;border-radius:24px;
  background:radial-gradient(120% 180% at 0 50%,rgba(98,160,255,.32),transparent 62%),rgba(10,24,58,.72);
  box-shadow:inset 0 1px 0 rgba(235,244,255,.26),inset 0 0 0 1px rgba(170,210,255,.4),0 0 44px -14px rgba(98,160,255,.95)}
.bline .coin{width:42px;height:42px;flex:none;filter:drop-shadow(0 0 12px rgba(140,190,255,.7));animation:coin-flip 4.5s ease-in-out infinite}
@keyframes coin-flip{0%,70%{transform:perspective(200px) rotateY(0)}85%,100%{transform:perspective(200px) rotateY(360deg)}}
.bline p{flex:1;min-width:0}
.bline b{display:block;font:600 15.5px/1.25 var(--hv-display);letter-spacing:-.02em}
.bline small{display:block;margin-top:4px;font-size:13px;color:var(--hv-muted)}
.bline .hv-btn{flex:none;min-height:46px;padding:0 20px}
/* when this browser could not claim from here (no readable answer): one calm way to claim on Earn, a full 44 px target */
.bline-alt{display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;min-height:44px;font:500 13.5px/1.2 var(--hv-body);color:var(--hv-ice);
  text-decoration:underline;text-decoration-color:rgba(160,200,255,.45);text-underline-offset:3px;transition:text-decoration-color .2s}
.bline-alt:hover{text-decoration-color:currentColor}

/* rows: accounts, apps, tokens. minmax(0,1fr): without it the one grid column grows to the widest unwrapped row and
   pushes the row's button out of the card */
.rows{display:grid;grid-template-columns:minmax(0,1fr);margin-top:14px}
.rows>li{display:flex;align-items:center;gap:14px;min-height:62px;padding:10px 0;border-top:1px solid rgba(160,200,255,.1)}
.rows>li:first-child{border-top:0}
.rows p{flex:1;min-width:0}
.rows b{display:block;font:600 15.5px/1.25 var(--hv-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rows small{display:block;margin-top:3px;font-size:13px;color:var(--hv-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rows small.on{color:var(--hv-ice)}
.rows.toks small,.rows.apps small{white-space:normal;overflow:visible;text-wrap:balance}   /* the note wraps in a narrow column instead of being cut */
.rows .ico{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;border:1px solid rgba(160,200,255,.22);background:linear-gradient(160deg,rgba(40,80,180,.5),rgba(8,16,40,.8));color:#DCEBFF}
.rows .ico svg{width:19px;height:19px}
.rows .ico.g{font:700 17px/1 var(--hv-body)}
.rows .ok{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;color:#06122E;background:linear-gradient(180deg,#F6FAFF,#9CC4FF);box-shadow:0 0 14px -2px rgba(98,160,255,.8)}
.rows .ok svg{width:13px;height:13px;stroke-width:3}
.rows .logo{width:42px;height:42px;flex:none;border-radius:13px;object-fit:cover;box-shadow:0 0 0 1px rgba(200,225,255,.2),0 8px 18px -8px #000}
.rows .coin{width:38px;height:38px;flex:none;filter:drop-shadow(0 0 10px rgba(140,190,255,.45))}
.rows .amt{font-size:17px;font-weight:600;color:var(--hv-amount);margin-right:4px}
.addrow{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin-top:6px;padding:0 4px;border:0;border-top:1px dashed rgba(160,200,255,.18);background:none;cursor:pointer;font:600 14px/1 var(--hv-body);color:var(--hv-sky)}
.addrow svg{width:18px;height:18px}
.addrow:hover{color:#fff}
.data-acts{display:flex;flex-wrap:wrap;gap:10px}
.data-acts .hv-btn{gap:9px;min-height:48px;padding:0 20px;font-size:14px}
.data-acts svg{width:18px;height:18px}
.app .hv-foot{margin-top:120px}

.hv-toast{color:var(--hv-ice2);text-align:center}

/* ---------------------------------------------------------------- the profile page's own pieces (assets/app/profile-page.js) */
/* The page reads who is here before it shows anything (a member who has not finished onboarding goes to /join). */
body[data-state="loading"] .prof{visibility:hidden}
body:is([data-state="out"],[data-state="error"]) .member-only{display:none !important}
/* the wallet and its UBAI: a button that opens the HANS sheet */
button.me-cap{appearance:none;-webkit-appearance:none;border:0;margin:0;font:inherit;color:inherit;cursor:pointer;transition:transform .45s var(--hv-spring)}
button.me-cap:hover{transform:translateY(-1px)}
.join-top{min-height:48px}
/* 44 px targets both ways on a touch screen: the brand (only its mark shows on a phone) and the footer's short links */
.app .hv-brand{min-width:44px;justify-content:center}
@media (pointer:coarse){.app .hv-fbar a{min-width:44px;justify-content:center}}
/* signed out: the placeholder passport, one line and one way in */
.out-join{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.out-line{font:600 clamp(22px,2.4vw,30px)/1.2 var(--hv-display);letter-spacing:-.03em}
.out-join .hv-btn{margin-top:14px}
/* the empty message: Hana brings activity cards in Phase 2 */
.pe-line{font-size:15px;line-height:1.4;color:var(--hv-muted)}
/* the AI chip beside Hana's name */
.ai{display:inline-flex;align-items:center;padding:4px 8px 3px;border-radius:999px;font:700 10.5px/1 var(--hv-body);letter-spacing:.12em;color:#06122E;background:linear-gradient(180deg,#F6FAFF,#BFD8FF);box-shadow:0 0 14px -4px rgba(98,160,255,.9)}
/* Hana's tile in Phase 1: her orb (the mockup's, decorative: no button, no badge) and one line */
.t-hana{display:flex;flex-direction:column}
.hana-soon{flex:1;display:grid;justify-items:center;align-content:center;gap:18px;min-height:190px;padding:10px 0 4px;text-align:center}
.hana-soon p{font:600 18px/1.3 var(--hv-display);letter-spacing:-.02em;color:var(--hv-ice)}
.hana-orb{position:relative;display:block;width:96px;height:96px;border-radius:50%;overflow:hidden;isolation:isolate;transform:translateZ(0);
  background:radial-gradient(circle at 50% 58%,#0C1A3D 0%,#050B1E 62%,#02050D 100%);
  box-shadow:0 0 0 1px rgba(207,227,255,.5),0 0 34px rgba(98,160,255,.7),0 18px 36px -14px rgba(0,0,0,.9)}
/* three ribbons of light turning slowly, with blobs drifting through them: blue only */
.hana-orb::before{content:"";position:absolute;inset:-12%;border-radius:50%;filter:blur(5px);animation:orb-turn 11s linear infinite;
  background:conic-gradient(from 0deg,transparent 0 8%,rgba(61,123,255,.95) 17%,transparent 29%,transparent 41%,rgba(148,195,255,.9) 52%,transparent 63%,transparent 74%,rgba(98,160,255,.85) 84%,transparent 94%)}
.hana-orb i{position:absolute;border-radius:50%;mix-blend-mode:screen;filter:blur(7px)}
.hana-orb .ob1{width:62%;height:44%;left:2%;top:12%;background:radial-gradient(closest-side,rgba(61,123,255,.95),rgba(61,123,255,0));transform-origin:70% 80%;animation:orb-turn 7s linear infinite}
.hana-orb .ob2{width:56%;height:56%;right:-4%;bottom:-2%;background:radial-gradient(closest-side,rgba(148,195,255,.85),rgba(148,195,255,0));transform-origin:22% 22%;animation:orb-turn 9.5s linear infinite reverse}
.hana-orb .ob3{width:34%;height:30%;left:33%;top:36%;background:radial-gradient(closest-side,#EAF3FF,rgba(234,243,255,0));opacity:.75;animation:orb-drift 6s ease-in-out infinite}
.hana-orb::after{content:"";position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;
  background:radial-gradient(36% 24% at 34% 18%,rgba(255,255,255,.7),rgba(255,255,255,0) 72%),radial-gradient(circle,transparent 62%,rgba(207,227,255,.26) 72%,transparent 75%),radial-gradient(circle at 50% 50%,transparent 55%,rgba(2,5,13,.35) 100%)}
@keyframes orb-turn{to{transform:rotate(360deg)}}
@keyframes orb-drift{50%{transform:translate(-16%,12%) scale(1.3)}}

/* ================================================================ smaller desktops and tablets */
@media (max-width:1180px) and (min-width:981px){
  .me-cap .addr{display:none}
}
@media (max-width:1100px) and (min-width:761px){
  .t-cards,.col-r{grid-column:1/-1}
  .t-acct,.t-apps{grid-column:span 6}
  .t-tok{grid-column:1/-1}
}
@media (max-width:980px){
  .app .hv-acct{margin-left:auto}   /* the switcher has moved to the dock, so the account group keeps to the right */
  .app .hv-foot.has-dock{padding-bottom:130px}
  .app .hv-toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .t-pass{grid-template-columns:minmax(0,1fr);justify-items:center}
  .t-pass .pass-pp{width:min(420px,100%)}
  .t-pass .ladder{width:100%}
}

/* ================================================================ phone: its own layout */
@media (max-width:760px){
  :root{--head:64px}
  .ob-head{padding:10px 0}
  .ob-head .ob-bar{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
  .ob-head .hv-brand b{display:none}
  .ob-head .hv-brand img{width:36px;height:36px}
  body:not([data-step="a"]) .ob-head .hv-brand{display:none}
  body:not([data-step="a"]) .back-top{display:grid}
  .prog{justify-content:center;gap:10px}
  .prog-track{width:auto;flex:1;max-width:190px;height:7px}
  .wallet-cap{display:none !important}

  .scr{align-items:stretch;padding:calc(var(--head) + 6px) 0 calc(16px + env(safe-area-inset-bottom,0px))}
  .lay{grid-template-columns:minmax(0,1fr);grid-template-areas:"hd" "lede" "vis" "body" "act";grid-template-rows:auto auto auto auto 1fr;
    min-height:calc(100dvh - var(--head) - 22px - env(safe-area-inset-bottom,0px))}
  .lay>.backbtn{display:none}
  .lay>.act{align-self:end}
  .hd{font-size:clamp(40px,11.6vw,50px)}
  .hd .ln{white-space:normal}
  .lede{margin-top:12px;font-size:17px}
  .body{margin-top:22px}
  .act{margin-top:24px;flex-wrap:nowrap}
  .act .hv-btn{flex:1 1 0;min-width:0;padding:0 14px}
  .act.col{align-items:stretch}
  .act.col .hv-btn{flex:none;width:100%}
  .duo{flex-direction:row-reverse}
  .duo .hv-btn{min-width:0}
  .hv-btn.xl{min-height:56px;font-size:15.5px}

  /* A: Pearl first, then the words and the one button in the thumb zone */
  .lay-a{grid-template-areas:"vis" "hd" "act";grid-template-rows:minmax(250px,1fr) auto auto}
  .lay-a .hd{font-size:clamp(54px,16.5vw,72px);margin-top:10px;text-align:center}
  .lay-a .act{margin-top:22px}
  .stage{height:auto;min-height:250px;align-self:stretch}
  .stage .halo{width:120%}
  .hints{justify-items:center;align-self:stretch;text-align:center}
  .hint{text-align:center}

  /* the compact passport (B, C, F): portrait left, the username and the scoreboard right */
  .pp.compact{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-areas:"top top" "por id";width:100%}
  .pp.compact .pp-top{grid-area:top;padding:13px 14px 10px 16px}
  .pp.compact .pp-top>img{width:28px;height:28px}
  .pp.compact .pp-portrait{grid-area:por;margin:0 0 14px 14px;aspect-ratio:1;border-radius:16px;align-self:start}
  .pp.compact .pp-portrait>img{object-position:50% 28%}
  .pp.compact .pp-plabel{display:none}
  .pp.compact .pp-seal{width:26px;height:26px;right:8px;bottom:8px}
  .pp.compact .pp-id{grid-area:id;padding:0 14px 14px 14px;min-width:0}
  .pp.compact .pp-name{font-size:19px}
  .pp.compact .pp-stats{margin-top:10px;padding-top:10px;column-gap:10px;row-gap:6px}
  .pp.compact .pp-status{min-height:30px;padding:0 12px;font-size:12.5px}
  .pp.compact .lvring{width:44px;height:44px}
  .pp.compact .lvnum{font-size:16px}
  .pp.compact .pp-bottom{display:none}
  .pp.compact .pp-x{margin-top:7px;padding:4px 10px 4px 8px;font-size:12px}
  /* compact: the stamp lands on the lower part of the portrait */
  .pp.compact .pp-stamp{left:12px;right:auto;top:106px;padding:7px 9px 6px;font-size:10px;border-radius:10px}
  .pp.compact .pp-stamp .lv{font-size:7.5px}
  .steps p>span{font-size:13.5px;margin-top:3px}
  .lay-b .vis,.lay-c .vis{margin-top:16px}
  .picker{margin-top:12px;gap:10px;flex-wrap:nowrap}
  .picker button{flex:1;min-width:0;min-height:54px;padding:4px 14px 4px 4px;font-size:13px}
  .picker img{width:44px;height:44px;flex:none}
  .picker .tick{left:34px}
  .nohansian{margin-top:12px;font-size:14px}
  .lay-b .body{margin-top:20px}
  .form label{margin-bottom:8px;font-size:14.5px}
  .hv-input.big{min-height:54px;font-size:17px}
  .userfield .hv-input{padding-right:132px}
  .ustat .try{min-height:44px}
  .ufixed{font-size:20px}

  /* C */
  .unlocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px;gap:8px}
  .ulk{flex-direction:column;justify-content:center;gap:6px;padding:10px 6px;border-radius:16px;font-size:15px}
  .ulk .u1{gap:6px}
  .ulk img{width:18px;height:18px}
  .ulk small{font-size:12px}
  .ulk .lk{width:12px;height:12px;margin:0}

  /* toasts drop from the top while the buttons own the bottom */
  .ob .hv-toast{top:calc(70px + env(safe-area-inset-top,0px));bottom:auto;transform:translate(-50%,-260%)}
  .ob .hv-toast.show{transform:translate(-50%,0)}

  /* F: headline, stamped passport, the three steps, the one button */
  .lay-f{grid-template-areas:"hd" "vis" "body" "act";grid-template-rows:auto auto auto 1fr}
  .lay-f .vis{margin-top:16px}
  .lay-f .body{margin-top:18px}
  .lay-f .act{margin-top:18px}
  .steps{gap:8px}
  .steps li{grid-template-columns:38px minmax(0,1fr);gap:12px;padding:8px 12px 8px 8px;border-radius:18px}
  .sk{width:38px;height:38px;font-size:14px}
  .sk svg{width:18px;height:18px}
  .steps p b{font-size:14px}
  .first-step{margin-top:14px;font-size:15px}
  .first-step img{width:26px;height:26px}

  .aw{padding:20px}

  /* profile: brand mark, then the wallet button and the picture; the pages sit in the dock */
  .app .hv-head{padding:10px 0}
  .app .hv-head .hv-bar{gap:8px}
  .app .hv-brand b{display:none}
  .app .hv-acct{gap:8px;margin-left:auto}
  .me-cap{min-height:44px;padding:0 13px;gap:8px}
  .me-cap .addr{display:none}
  .me-pfp{width:44px;height:44px}
  .me-pfp img{width:34px;height:34px}
  .prof{padding-top:calc(var(--head) + 22px)}
  .p-hd{font-size:clamp(40px,11.6vw,50px)}
  .bento{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:26px}
  .t-pass,.t-cards,.col-r,.t-acct,.t-apps,.t-tok,.t-data{grid-column:1/-1;grid-row:auto}
  .col-r{gap:14px}
  .tile{padding:20px 18px;border-radius:24px;--r:24px}
  .t-pass{padding:14px 12px 16px;gap:18px}
  .t-pass .pass-pp{width:100%}
  .ladder{gap:12px}
  .ladder .t-h{padding-left:6px}
  .rungs::before{left:31px;top:34px;bottom:34px}
  .rung{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"dot txt" "dot act";align-items:start;column-gap:14px;row-gap:10px;padding:12px}
  .rg-dot{grid-area:dot;width:40px;height:40px;font-size:15px}
  .rg-txt{grid-area:txt;padding-top:2px}
  .rg-txt b{font-size:16px}
  .rg-txt>span{font-size:14px}
  .rg-act{grid-area:act;justify-content:flex-start}
  .rung.done .rg-act{display:none}
  .rg-btn{min-height:46px}
  .hana-soon{min-height:150px}
  .journey{margin-left:6px}
  .t-h{font-size:20px}
  .cards[data-mode="start"]{grid-template-columns:minmax(0,1fr);gap:12px}
  .cards[data-mode="start"] .hubcard{aspect-ratio:auto}
  .cards[data-mode="start"] .hubcard .ac-rew{top:18px;right:16px}
  .acard{padding:18px;border-radius:22px}
  .cards-empty{padding:18px 12px}
  .ghosts{transform:scale(.9)}
  .bline{flex-wrap:wrap;padding:14px}
  .bline p{min-width:calc(100% - 60px)}
  .bline .hv-btn{width:100%}
  .t-data{flex-direction:column;align-items:stretch}
  .data-acts{display:grid;grid-template-columns:1fr}
  .data-acts .hv-btn{justify-content:flex-start;min-height:50px}
  .mini{min-height:44px}
}
@media (max-width:370px){
  .ulk small{display:none}
  .me-cap .bal img{display:none}
  /* the suggested username (@hansian1432) fits the passport whole instead of ending in "…" */
  .pp-name{font-size:24px}
  .pp.compact .pp-name{font-size:17px}
}
/* Tokens: in a narrow list (a phone below 370 px, as in the mockup, and the third-of-a-row tile from about 1100 to
   1200 px) the balance moves under the token's name, so a six-figure amount never squeezes the name or its note */
.rows.toks{container:toks / inline-size}
@container toks (max-width:300px){
  .rows.toks>li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"coin p btn" "coin amt btn";column-gap:12px;row-gap:4px}
  .rows.toks .coin{grid-area:coin}
  .rows.toks p{grid-area:p}
  .rows.toks .amt{grid-area:amt;margin:0}
  .rows.toks .mini{grid-area:btn}
}

/* ================================================================ reduced motion: a still page, clicks still work */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scr.out,.scr.in .rise,.app.in .rise,.scr.in .hd .ln>span,.app.in .hd .ln>span,.pearl img,.pearl.hop img,
  .wallet-cap.arrive,.ulk.open.arrive,.pp-x.on.arrive,.hv-btn.pop,.pp-name.tick,.scr.in .steps li,.scr.in .first-step,.prog-lbl.bump b,
  .pp.lvup,.pp.lvup::after,.pp.lvup .lvring,.pp.stamped,.pp.stamped .pp-stamp::after,.aw[open],
  .rung.now .rg-dot::after,.rung.tick .rg-dot,.ac-live .dot,.bline-wrap.arrive,.bline-wrap.leaving,.bline .coin,.me-cap.glow,
  .hana-orb::before,.hana-orb i{animation:none !important}
  .scr.in .hd .ln,.app.in .hd .ln{animation:none;clip-path:none}
  .scr.in .pp::after,.app.in .pp::after{animation:none;opacity:0}
  .pp.stamped .pp-stamp{animation:none;opacity:1;transform:rotate(-8deg)}
  .lvnum.rolling .old,.lvnum.rolling .new{animation:none}
  .spin,.ustat .spin{animation:none;border-top-color:rgba(160,200,255,.22);border-style:dotted}
  .ghosts span,.picker button,.pp,.pp *,.prog-fill,.acard,.rung,.rg-dot,.aw-opt{transition:none}
  .rung.now .rg-dot::after{display:none}
}