/* Login is a quiet, self-contained screen. App navigation returns after sign-in. */
html.loginlock #mifkadaLanguageDock,html.loginlock #mifkadaLanguageBar,html.loginlock #appDock,html.loginlock .bar-more-panel,
body:has(#login:not([hidden])) #mifkadaLanguageDock,body:has(#login:not([hidden])) #mifkadaLanguageBar,body:has(#login:not([hidden])) #appDock,body:has(#login:not([hidden])) .bar-more-panel{display:none!important}
html.loginlock body.language-shell,body.language-shell:has(#login:not([hidden])){padding-bottom:0!important;--app-dock-height:0px}
body.language-shell #login{padding: max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
/* Physical placement stays the same in both languages: the guardian on the left, the form on the right. */
#login .login-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);align-items:center;gap:clamp(32px,6vw,100px);width:min(1040px,100%);margin:auto;direction:ltr;isolation:isolate}
#login .login-scene>.logincard{grid-column:2;grid-row:1;width:100%;max-width:100%;margin:0;box-sizing:border-box;z-index:1;box-shadow:0 20px 70px #0005;border-color:#c9a46838;padding:32px}
html[lang=he] #login .logincard,html[lang=he] .login-guide{direction:rtl}
html[lang=en] #login .logincard,html[lang=en] .login-guide{direction:ltr}
/* padding-top: room for the speech bubble above his head, reserved from the first frame so nothing moves when he speaks. */
#login .login-guide{grid-column:1;grid-row:1;min-width:0;text-align:center;position:relative;align-self:center;padding-top:84px}
.login-guardian{display:block;position:relative;width:min(100%,520px);margin:auto;pointer-events:none;user-select:none;-webkit-user-select:none;contain:layout}
.login-guardian picture{display:contents}
.login-guardian-desktop{display:block}.login-guardian-mobile{display:none}
.login-guardian img{display:block;width:100%;height:auto;max-height:545px;object-fit:contain;transform-origin:50% 94%;transition:opacity .5s ease}
/* On a short window he shrinks with it (124px = #login's padding + the room kept for his bubble),
   so the login screen still fits without a scrollbar, as it did before he spoke. */
@media(min-width:901px){.login-guardian img{max-height:min(545px,max(300px,calc(100vh - 124px)));max-height:min(545px,max(300px,calc(100dvh - 124px)))}}/* בעלים 15.10: הדמות קצת גדולה יותר (470→520, 490→545) ובאיכות מלאה (1215px, WebP 90) */
/* A picture still on its way (slow connection) fades in when it arrives instead of popping in. */
.login-guardian.is-arriving img{opacity:0}
/* While the logo splash fades out over the login screen, its big wordmark goes first,
   so it never shows through between him and the card. */
@media(prefers-reduced-motion:no-preference){
 body:has(#login:not([hidden])) #splash.out .biglogo{animation:login-splash-word-out .16s ease forwards}
 @keyframes login-splash-word-out{to{opacity:0}}
}

/* ── What the guardian says: text only, never sound (the owner banned audio on this screen). ── */
.login-speech{position:absolute;z-index:2;box-sizing:border-box;width:max-content;margin:0;padding:11px 18px 12px;background:var(--mf-surface-2,#1c1c20);border:1px solid #c9a4685c;border-radius:18px;color:var(--ink,#f3f0ea);font-size:1rem;font-weight:500;line-height:1.5;text-align:start;white-space:normal;overflow-wrap:break-word;text-wrap:pretty;box-shadow:0 16px 42px #0009,inset 0 1px 0 #ffffff0f;opacity:0;visibility:hidden;transform:translateY(8px) scale(.9);transform-origin:var(--tail-at,40%) 100%;transition:opacity .18s ease,transform .26s ease,visibility 0s linear .26s}
.login-speech.is-shown{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .38s cubic-bezier(.18,.9,.3,1.25),visibility 0s}
.login-speech::after{content:"";position:absolute;width:14px;height:14px;box-sizing:border-box;background:var(--mf-surface-2,#1c1c20);border:solid #c9a4685c;border-width:0 1px 1px 0}
.login-speech .w{opacity:0;transition:opacity .14s ease}
.login-speech .w.on{opacity:1}
.login-speech .hi{color:var(--accent,#c9a468);font-weight:700}
.login-speech-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Desktop: a bubble right above his head, its tail pointing down at him. */
.login-speech-intro{--tail-at:42%;left:0;right:0;bottom:calc(100% - 22px);margin-inline:auto;max-width:min(350px,100%)}
.login-speech-intro::after{left:calc(var(--tail-at) - 7px);bottom:-7.5px;transform:rotate(45deg)}
.login-speech-hello{display:none}
@media(max-width:1180px){.login-speech-intro{font-size:.94rem;padding:10px 15px 11px}}

@media(max-width:900px){
 .login-guardian-desktop{display:none}.login-guardian-mobile{display:block}
 #login .login-scene{display:block;width:min(400px,100%);padding-top:calc(min(400px, 100vw - 40px) * .48)}
 #login .login-scene>.logincard{width:100%;margin:0;padding:24px 22px 18px;border-radius:24px;overflow:visible}
 #login .login-guide{position:absolute;inset:0 0 auto;z-index:2;pointer-events:none;padding-top:0}
 .login-guardian{width:100%;max-width:none;height:auto;aspect-ratio:3/2}
 .login-guardian img{width:100%;height:100%;max-height:none;object-fit:contain;transform-origin:50% 78%}
 /* His hands rest on both top corners of the card, so the language switch moves up into the free
    top corner of his picture (same side as before) instead of sitting under his paw — once the
    picture is there; until then it stays in its usual corner of the card. */
 #login.is-normal-login.is-hug-ready .login-scene>.logincard>.loginlang{top:calc(min(400px, 100vw - 40px) * -.48);inset-inline-end:0}
 /* Mobile says only hello — once, in the free top corner opposite the language switch, pointing at his face. */
 .login-speech-hello{display:block;top:20%;padding:6px 13px 7px;border-radius:14px;font-size:1rem;font-weight:700;line-height:1.3;white-space:nowrap;color:var(--accent,#c9a468)}
 .login-speech-hello[dir=rtl]{left:1%;transform-origin:100% 60%}
 .login-speech-hello[dir=ltr]{right:1%;transform-origin:0 60%}
 .login-speech-hello::after{top:calc(50% - 7px)}
 .login-speech-hello[dir=rtl]::after{right:-7.5px;transform:rotate(-45deg)}
 .login-speech-hello[dir=ltr]::after{left:-7.5px;transform:rotate(135deg)}
 .login-speech-intro{display:none}
 #login .loginbrand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:18px}
 #login .loginbrand .loginmark{margin:0}#login .loginbrand .loginmark svg{width:32px;height:37px}
 #login .logincard .loginbrand .biglogo{font-size:1.9rem;width:auto;margin:0}
 #login:not(.is-normal-login) .login-scene{padding-top:0}
 #login:not(.is-normal-login) .login-guide{display:none}
}
/* בטלפון הדמות המחבקת לא זזה כשהיא אומרת שלום — רק ממצמצת (בתוך התמונה) והבועה מופיעה */
@media(max-width:900px) and (max-height:720px){
 #login .login-scene>.logincard{padding:17px 20px 12px}
 #login .loginbrand{margin-bottom:8px}
 #login .logincard label{margin-top:7px}
 #login .loginhelp{margin-top:7px}
 .login-speech-hello{font-size:.92rem;padding:5px 11px 6px}
}
@media(prefers-reduced-motion:reduce){
 #login .login-guardian,#login .login-guardian img{animation:none!important;transform:none!important;transition:none!important}
 .login-speech,.login-speech.is-shown,.login-speech .w{transition:none!important;transform:none!important}
 .login-speech .w{opacity:1}
}
@media print{.login-guide{display:none!important}}

/* Keep sign-in fields dark even during Safari/Chrome autofill previews.
   The inset fill also covers native preview paint before :autofill matches. */
#login #liPhone,#login #liPass{
 -webkit-appearance:none;appearance:none;color-scheme:dark;
 background-color:var(--mf-input,#242427)!important;
 color:var(--ink,#f2f4f8);-webkit-text-fill-color:var(--ink,#f2f4f8)!important;
 caret-color:var(--ink,#f2f4f8);transition:none;
 -webkit-box-shadow:0 0 0 1000px var(--mf-input,#242427) inset!important;
 box-shadow:0 0 0 1000px var(--mf-input,#242427) inset!important;
}

/* Recovery, first entry and reset: the language action owns a row so long
   translated headings cannot pass underneath it, including with a keyboard open. */
#login .logincard:is(.feask,.emgask,:has(>#setPassWrap:not([hidden])))>.loginlang{
 position:static;display:flex;width:max-content;max-width:100%;margin:0 0 16px auto;
}
#login .logincard.feask .fe-title,#login .logincard.emgask .emg-title{
 padding-inline-start:0;min-height:0;text-align:start;
}