/* Hide the tracks while retaining native touch, wheel and keyboard scrolling. */
html,body,*{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{display:none}
.landing-manzil{width:fit-content;margin:16px auto}
body.in .landing-manzil,body.onb .landing-manzil,body[data-page="public-profile"] .landing-manzil{display:none}
.landing-manzil details{padding:8px 12px;border:1px solid var(--public-border);border-radius:15px;background:var(--public-panel);color:var(--public-ink);box-shadow:0 12px 30px #08142635}
.landing-manzil summary{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:650;list-style:none}
.landing-manzil details>div{display:grid;gap:8px;max-width:245px}
.landing-manzil p{margin:5px 0;color:var(--public-muted)}
.landing-manzil a{color:var(--public-accent)}
.manzil-mascot{position:relative;display:inline-block;flex:none;width:51px;height:52px;vertical-align:middle}
.manzil-shell{position:absolute;inset:10px 6px 2px;border-radius:15px 15px 13px 13px;background:linear-gradient(145deg,#fff 12%,#bdcede 65%,#7c99b7);border:1px solid #e1e9f3;box-shadow:inset 0 -3px 4px #37547840,0 4px 7px #0e284943}
.manzil-shell b{position:absolute;bottom:1px;left:0;right:0;text-align:center;font:800 9px/11px system-ui;color:#224878}
.manzil-antenna{position:absolute;left:24px;top:4px;width:3px;height:10px;background:#6289b2;border-radius:4px}
.manzil-antenna::before{content:'';position:absolute;left:-2px;top:-3px;width:7px;height:7px;border-radius:50%;background:#efd08b}
.manzil-screen{position:absolute;inset:5px 4px 12px;border-radius:10px;background:#152d4c;box-shadow:inset 0 1px 4px #081321}
.manzil-eyes{position:absolute;top:6px;left:6px;width:4px;height:5px;border-radius:50%;background:#c7e6ff;box-shadow:12px 0 #c7e6ff}
.manzil-mouth{position:absolute;left:10px;top:11px;width:9px;height:5px;border-bottom:2px solid #c7e6ff;border-radius:50%}
.manzil-arm{position:absolute;top:25px;width:8px;height:16px;border-radius:8px;background:#739ac3}
.manzil-arm.left{left:2px;transform:rotate(22deg)}
.manzil-arm.right{right:2px;transform:rotate(-22deg)}
[data-manzil-mood="retry"] .manzil-mouth{border:0;border-top:2px solid #c7e6ff;top:14px}
[data-manzil-mood="correct"] .manzil-mouth{height:7px;border-radius:0 0 7px 7px;background:#c7e6ff}
#siteFooter .footer-inner{grid-template-columns:1.25fr repeat(3,minmax(0,1fr))}
#siteFooter nav{display:grid;gap:6px;justify-items:start}
#siteFooter #showManzil{font:inherit;padding:3px 7px}
#siteFooter #showManzil[hidden],body:is(.in,.onb) #siteFooter #showManzil{display:none}
@media(max-width:760px){
 #siteFooter .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:58px}
 .landing-manzil details:not([open]) summary span:last-child{font-size:12px}
}
@media(prefers-reduced-motion:no-preference){
 .manzil-mascot{animation:manzil-hover 3.4s ease-in-out infinite}
 [data-manzil-mood="correct"] .manzil-mascot{animation:manzil-celebrate .6s ease-out}
 .landing-manzil details:not([open]) .manzil-mascot{animation:manzil-roam 7s ease-in-out infinite}
 #welcome .primary,#publicNav .primary{transition:transform .18s,box-shadow .18s;box-shadow:0 3px 0 #12345a}
 #welcome .primary:hover,#publicNav .primary:hover{transform:translateY(-2px);box-shadow:0 5px 0 #12345a}
 #welcome .pub-match{animation:panel-depth 8s ease-in-out infinite}
 @keyframes manzil-hover{50%{transform:translateY(-4px)}}
 @keyframes manzil-roam{25%{transform:translate(3px,-5px) rotate(4deg)}75%{transform:translate(-3px,-2px) rotate(-4deg)}}
 @keyframes manzil-celebrate{40%{transform:translateY(-9px) rotate(8deg)}}
 @keyframes panel-depth{50%{box-shadow:0 19px 38px #08142648}}
}

body[data-hide-manzil] :is(#landingManzil,#signupGuide){display:none!important}
@media(max-width:380px){#siteFooter .footer-inner{grid-template-columns:1fr}}

/* Keep each guide within its own layout area so controls cannot overlap the app. */
#au #signupGuide{position:static;margin-top:12px;border:0;padding:0;background:none}
#au #signupGuide summary{padding:3px;border-radius:14px;width:max-content}
#au #signupGuide summary::after{display:none}
.guide-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.manzil-popover{position:relative;margin-top:6px;max-width:280px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
#au .manzil-popover p{margin:0}
.manzil-close{width:30px;height:30px;padding:0!important;display:grid!important;place-items:center;border-radius:50%;font:600 19px/1 system-ui!important;cursor:pointer}
.manzil-popover .manzil-close{position:absolute;top:6px;right:6px}
.landing-manzil details[open]{position:relative}
.landing-manzil details[open] .manzil-close{position:absolute;top:7px;right:7px}
#welcome .pub-reward-track{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));grid-auto-flow:row;overflow:visible;gap:12px}
#welcome .pub-hero{position:relative;isolation:isolate;perspective:1000px}
.meath-depth-scene{position:absolute;z-index:-1;inset:0 0 0 40%;overflow:hidden;pointer-events:none;perspective:650px;opacity:.82;mask-image:linear-gradient(90deg,transparent,#000 22%)}
.meath-depth-scene i{position:absolute;inset:14% 3% 9% 12%;border-radius:30px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 17%,transparent),transparent 70%);transform:rotateX(19deg) rotateY(-22deg) translateZ(-30px)}
.meath-depth-scene i:nth-child(2){transform:rotateX(19deg) rotateY(-22deg) translate3d(10px,12px,-72px);opacity:.65}
.meath-depth-scene i:nth-child(3){transform:rotateX(19deg) rotateY(-22deg) translate3d(23px,24px,-115px);opacity:.46}
#welcome .pub-hero .pub-match{border-top-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:0 3px 0 color-mix(in srgb,var(--line) 58%,transparent),0 24px 50px #07182d32,inset 0 1px 0 #ffffff13}
#au .auth-brand{background:radial-gradient(ellipse at 15% 4%,color-mix(in srgb,var(--accent) 19%,var(--raised)),var(--surface) 72%);box-shadow:inset -1px 0 0 var(--line)}
#au .auth-benefits .benefit-icon{box-shadow:0 2px 0 var(--line),inset 0 1px 0 #ffffff18}
@media(max-width:760px){
 #au .auth-brand{padding-bottom:16px}
 .meath-depth-scene{inset:30% 0 0 0;opacity:.55}
}
@media(prefers-reduced-motion:no-preference){
 #welcome .pub-hero .pub-match{animation:enter .42s ease-out both;transition:transform .23s ease,box-shadow .23s ease}
 .meath-depth-scene i{animation:depth-light 7s ease-in-out infinite alternate}
 .meath-depth-scene i:nth-child(2){animation-delay:-2s}
 .meath-depth-scene i:nth-child(3){animation-delay:-4s}
 @keyframes depth-light{to{filter:brightness(1.25)}}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 #welcome .pub-hero .pub-match:hover{transform:rotateY(-1.5deg) translateY(-3px);box-shadow:0 5px 0 var(--line),0 28px 54px #07182d39}
}

/* Keep newly rendered pages and dialogs anchored at their opening content. */
:root,body,#app,#center,#view,dialog{overflow-anchor:none}
#welcome :is(.pub-section,#clash-demo),#fcChapters,#mxStudyCard{scroll-margin-top:calc(var(--shell-header,72px) + 14px)}
.manzil-close{width:44px;height:44px;min-width:44px;min-height:44px;color:var(--public-ink)!important;background:var(--public-panel)!important;border:1px solid var(--public-border)!important;box-shadow:0 2px 7px #07182d29}
.manzil-close:hover,.manzil-close:focus-visible{outline:2px solid var(--public-accent);outline-offset:2px}
#au .manzil-popover{padding:13px 56px 13px 13px;min-height:58px}
.landing-manzil details[open] summary{padding-right:48px}
@media(max-width:760px){
 :root dialog#au{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}
 #au .auth-content{padding:14px}
 #au .auth-content :is(input,select){font-size:16px}
 #au .auth-content h2{overflow-wrap:anywhere}
 #au .auth-brand{padding:12px 14px}
 #au .auth-benefits ul{gap:5px 9px}
 .landing-manzil{max-width:calc(100vw - 24px)}
}
@media(max-width:767px){
 :root .in #siteFooter{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
 :root .in :is(#app,#center,#view){min-width:0}
}

body:not(.in):not(.onb)[data-page="public-profile"]:not([data-hide-manzil]) #landingManzil{display:block}
