/* Reference 18: biometric onboarding. The uploaded mobile-auth artwork wins when configured. */
body.app-onboarding:has(.fd-biometric-onboarding){padding-bottom:0;background:#20201f}
body.app-onboarding:has(.fd-biometric-onboarding)>main{width:min(100%,375px);min-height:100vh;min-height:100dvh;background:#20201f;box-shadow:0 0 45px #0008}
body.app-onboarding:has(.fd-biometric-onboarding) .fd-system-status{display:flex;background:transparent;color:#fff}

.fd-biometric-onboarding{position:relative;isolation:isolate;width:100%;height:100vh;height:100dvh;min-height:667px;overflow:hidden;border-radius:11px;background:#201f1e;color:#fff;font-family:"Cairo",Tahoma,sans-serif;text-align:center}
.fd-biometric-onboarding:before{content:"";position:absolute;z-index:-2;inset:0;background-image:var(--fd-biometric-background);background-position:center;background-size:cover;filter:sepia(.34) saturate(.62) contrast(1.14)}
.fd-biometric-onboarding:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(19,19,18,.76) 0%,rgba(18,18,17,.63) 35%,rgba(18,18,18,.83) 62%,rgba(18,18,18,.94) 100%)}

.fd-biometric-visual{position:absolute;top:23.15%;right:calc(50% - 6px);display:grid;width:276px;height:108px;transform:translateX(50%);grid-template-columns:104px 54px 104px;gap:7px;direction:ltr;align-items:center;color:#3fe0bb}
.fd-biometric-mark{position:relative;display:block;width:104px;height:108px}
.fd-biometric-mark>svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.fd-biometric-sync{width:54px;height:54px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fd-biometric-lock{position:absolute;top:12px;right:2px;display:block;width:38px;height:38px;border:3px solid #fff;border-radius:8px;background:#fff;box-shadow:0 1px 3px #0006}
.fd-biometric-lock:before{content:"";position:absolute;top:8px;left:10px;width:12px;height:11px;border:3px solid #078b74;border-bottom:0;border-radius:8px 8px 0 0}
.fd-biometric-lock b{position:absolute;top:17px;left:8px;width:16px;height:13px;border-radius:3px;background:#078b74}
.fd-biometric-lock b:after{content:"";position:absolute;top:3px;left:7px;width:2px;height:6px;border-radius:2px;background:#fff}
.fd-biometric-face-lock{top:9px;right:33px}

.fd-biometric-copy{position:absolute;top:43.35%;right:16px;left:16px}
.fd-biometric-copy h1{margin:0;color:#fff;font-size:19px;font-weight:400;line-height:1.55}
.fd-biometric-copy>p:not(.sr-only){max-width:340px;margin:3px auto 0;color:#f1f1f1;font-size:15px;font-weight:300;line-height:1.9;text-shadow:0 1px 2px #000}

.fd-biometric-actions{position:absolute;top:56.28%;right:12px;left:19px;display:grid;gap:19px}
.fd-biometric-actions a{display:grid;height:46px;place-items:center;border-radius:6px;color:#fff;font-size:22px;font-weight:400;line-height:1;text-decoration:none;-webkit-tap-highlight-color:transparent}
.fd-biometric-actions a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.fd-biometric-later{background:linear-gradient(90deg,#02c98f 0%,#00af79 55%,#008a61 100%)}
.fd-biometric-actions .fd-biometric-enable{background:#fff;color:#111}

.fd-biometric-dots{position:absolute;top:73.55%;right:0;left:0;display:flex;direction:ltr;justify-content:center;gap:8px}
.fd-biometric-dots i{display:block;width:12px;height:12px;border:1px solid #8e9291;border-radius:50%;background:transparent}
.fd-biometric-dots i.active{border-color:#19d497;background:#19d497}

@media(max-height:700px){
    .fd-biometric-visual{top:19.5%}
    .fd-biometric-copy{top:41%}
    .fd-biometric-actions{top:55%}
    .fd-biometric-dots{top:77%}
}

@media(min-width:376px){
    .fd-biometric-onboarding{min-height:812px}
}