/* Veltrix · welcome screen (no account on this device yet).
   Same plain page, logo, eyebrow / heading / description and button styles as Sign in and Sign up;
   the wallet artwork sits on top, the two choices follow, and "Already have an account?" rests at the bottom. */
#welcomePage{min-height:100dvh;padding:0;align-items:stretch;justify-content:center}
#welcomePage.hidden{display:none!important}
#welcomePage [hidden]{display:none!important}

.wl-wrap{width:100%;max-width:440px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:calc(26px + env(safe-area-inset-top)) 22px calc(26px + env(safe-area-inset-bottom))}
.wl-wrap>.brand{justify-content:flex-start}
.wl-wrap>.brand .brand-logo{width:128px}

.wl-hero{flex:0 0 auto;height:clamp(150px,25dvh,220px);margin-top:26px;display:flex;align-items:center;justify-content:center;transition:height .3s ease}
.wl-wallet{width:90%;height:85%;background:url("../app.assets/welcome-wallet.png") center/contain no-repeat;filter:drop-shadow(0 18px 22px rgba(36,80,255,.22));animation:wlFloat 5.5s ease-in-out infinite}
.wl-art-phrase{display:none;background-image:url("../app.assets/welcome-phrase.webp")}
#welcomePage.wl-compact .wl-art-options{display:none}
#welcomePage.wl-compact .wl-art-phrase{display:block}
html[data-theme="dark"] .wl-wallet{filter:invert(1) hue-rotate(180deg)}   /* same colour protection the app gives its images at night */
@keyframes wlFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#welcomePage.wl-compact .wl-hero{height:clamp(120px,18dvh,160px);margin-top:18px}

.wl-view{flex:1;display:flex;flex-direction:column;animation:wlIn .35s ease both}
@keyframes wlIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wl-title{margin-top:30px;margin-bottom:30px}
.wl-title .eyebrow{margin-bottom:12px;font-size:9px;letter-spacing:2.2px}
.wl-title h2{font-size:clamp(26px,7.6vw,29.5px);line-height:1.08;letter-spacing:-1.4px;margin-bottom:12px}
.wl-title p{font-size:12px;line-height:1.65;color:#777}

.wl-choices{display:flex;flex-direction:column;gap:18px}
.wl-choice{display:flex;align-items:center;gap:16px;width:100%;padding:18px;text-align:left;border:1px solid #e7e7e7;border-radius:20px;background:#fff;color:#111;box-shadow:0 10px 28px rgba(0,0,0,.05);transition:transform .2s,border-color .2s,box-shadow .2s}
.wl-choice:hover{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring)}
.wl-choice:active{transform:scale(.985)}
.wl-choice-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:0 0 44px;border-radius:13px;background:var(--brand-grad);color:#fff;box-shadow:0 6px 14px rgba(36,80,255,.28)}
.wl-choice-icon svg{width:21px;height:21px}
.wl-choice-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.wl-choice-copy strong{font-size:13.5px;font-weight:600}
.wl-choice-copy small{font-size:11px;line-height:1.5;color:#777}
.wl-chev{flex:0 0 16px;width:16px;height:16px;color:#bbb}

/* footer link rests at the bottom of the page */
#welcomePage .switch-auth{margin-top:auto;padding-top:34px;font-size:11px}

/* import form */
#welcomePage .signup-form{flex:1;display:flex;flex-direction:column;gap:0}
#welcomePage .primary-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;filter:none}
#welcomePage .input-group{margin-bottom:20px}
#welcomePage .input-group textarea{display:block;width:100%;min-height:112px;padding:14px 16px;border:1px solid #ddd;border-radius:15px;outline:none;resize:none;background:#fff;color:#111;font:500 13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;transition:border-color .2s,box-shadow .2s}
#welcomePage .input-group textarea::placeholder{color:#aaa}
#welcomePage .input-group textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring)}
#welcomePage .input-group.ok textarea{border-color:#1e7a3c}
#welcomePage .input-group.bad textarea{border-color:#b3261e}
#welcomePage .wl-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:10px;color:#999}
#welcomePage .wl-paste{border:0;background:transparent;color:var(--brand);font-size:11px;font-weight:600;padding:4px 2px}
#welcomePage .input-group small{margin-top:10px;min-height:0;font-size:10px;line-height:1.5}
#welcomePage .input-group small:empty{display:none}
#welcomePage .input-group small code{display:inline-block;margin-top:4px;word-break:break-all;font:600 10px ui-monospace,Menlo,Consolas,monospace;color:#111;background:#f3f3f3;padding:2px 6px;border-radius:6px}
#welcomePage .wl-notice{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px;padding:14px;border:1px solid #e9e9e9;border-radius:14px;background:#f8f8f8;color:#555;font-size:10.5px;line-height:1.6}
#welcomePage .wl-notice svg{flex:0 0 16px;width:16px;height:16px;margin-top:2px;color:var(--brand)}

/* chip on the sign-up page shown after importing */
.wl-chip{display:inline-block;margin:0 0 10px 8px;padding:5px 10px;border-radius:999px;font-size:9.5px;font-weight:600;letter-spacing:.2px;color:#2450ff;background:#eef2ff}
.wl-chip[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.wl-wallet,.wl-view{animation:none}.wl-hero{transition:none}}