/* Noor-e-Hidayah APP layer — phones only (html.na). Website/desktop is untouched. Load LAST. */
:root{--na-bg:#f6f1e4;--na-ink:#14352d;--na-mut:#4a5f57;--na-g1:#2f8f73;--na-g2:#0d352f;--na-gold:#c9a95c;--na-glass:rgba(255,255,255,.7);--na-edge:rgba(255,255,255,.7);--na-sh:rgba(13,53,47,.28);--na-ease:cubic-bezier(.32,.72,0,1)}
html[data-theme="dark"]{--na-bg:#0e1512;--na-ink:#e8f1ee;--na-mut:#9db0a9;--na-glass:rgba(30,42,38,.55);--na-edge:rgba(255,255,255,.14);--na-sh:rgba(0,0,0,.6)}
.na-dock,.na-s,#naMenu,#naScrim{display:none}
@media(max-width:760px){
html.na{overscroll-behavior-y:none;-webkit-text-size-adjust:100%}
html.na *{-webkit-tap-highlight-color:transparent}
html.na a,html.na button{touch-action:manipulation}
html.na body{background:var(--na-bg)!important;padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))!important}
/* soft glass backdrop (static = cheap) */
html.na body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 40% at 90% 0%,rgba(201,169,92,.28),transparent 70%),radial-gradient(70% 45% at 0% 35%,rgba(47,143,115,.24),transparent 70%),radial-gradient(60% 40% at 80% 100%,rgba(47,143,115,.2),transparent 70%)}
/* old phone chrome + heavy decoration off */
html.na .pn-bottom,html.na nav.noor-mobile-nav,html.na .noor-mobile-nav,html.na .cursor-glow,html.na .scroll-down,html.na .stars{display:none!important}
html.na .hero-bg,html.na .moon-3d{animation:none!important}
html.na main>section:not(:first-child){content-visibility:auto;contain-intrinsic-size:auto 640px}
/* pause decoration while scrolling / tab hidden */
html.na.na-scroll :is(.hero-bg,.stars,.moon-3d,[class*=orbit],[class*=glow],[class*=float],[class*=pulse],[class*=shimmer]),html.na.na-hidden *{animation-play-state:paused!important}
/* glass top bar (keeps brand green) */
html.na :is(.pn-bar,.noor-navbar){background:linear-gradient(135deg,rgba(13,53,47,.8),rgba(22,86,70,.62))!important;-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(255,255,255,.2)!important;border-radius:24px!important;box-shadow:0 14px 34px -14px var(--na-sh),inset 0 1px 0 rgba(255,255,255,.28)!important}
/* glass cards (no blur on lists = smooth) */
html.na :is(.topic-card,.prophet-card,.lesson-card,.intro-card,.companion-card,.trust-card,.special-card,.journey-card,.foundation-card,.walk-card,.tradition-card,.card,.ah-q){background:linear-gradient(145deg,var(--na-glass),rgba(255,255,255,.1))!important;border:1px solid var(--na-edge)!important;border-radius:22px!important;box-shadow:0 12px 30px -14px var(--na-sh),inset 0 1px 0 var(--na-edge)!important;transition:transform .2s var(--na-ease)}
html.na .pn-brand-tx strong{font-size:15px!important}
html.na :is(.topic-card,.prophet-card,.lesson-card,.card,.ah-q):active{transform:scale(.97)}
/* ---------- bottom dock ---------- */
html.na .na-dock{display:flex;position:fixed;z-index:9000;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));height:68px;padding:6px;border-radius:26px;background:var(--na-glass);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);border:1px solid var(--na-edge);box-shadow:0 18px 40px -12px var(--na-sh),inset 0 1px 0 var(--na-edge);transition:transform .45s var(--na-ease),opacity .3s}
html.na .na-dock a,html.na .na-dock button{border:0!important;padding:0!important;margin:0!important;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--na-mut)!important;opacity:1!important;font:600 10.5px/1 Inter,system-ui,sans-serif;border-radius:20px;cursor:pointer;position:relative;text-decoration:none;transition:color .25s,transform .2s var(--na-ease)}
html.na .na-dock svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.na .na-dock :is(a,button):active{transform:scale(.9)}
html.na .na-dock .on{color:#fff!important;background:linear-gradient(145deg,var(--na-g1),var(--na-g2));box-shadow:0 8px 18px -6px rgba(47,143,115,.7),inset 0 1px 0 rgba(255,255,255,.35)}
html.na .na-dock .on::after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--na-gold)}
html.na.na-lock .na-dock{transform:translateY(140%);opacity:0;pointer-events:none}
/* ---------- search: round button stretches into a bar ---------- */
html.na .na-s{display:flex;align-items:center;position:absolute;z-index:5;top:50%;right:62px;width:40px;height:40px;margin-top:-20px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#f6ecd0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:width .5s var(--na-ease),right .5s var(--na-ease),background .3s}
html.na .na-s.open{right:8px;width:calc(100% - 16px);background:rgba(10,40,34,.92);border-color:rgba(201,169,92,.6)}
html.na .na-s button{border:0!important;outline:0;background:none!important;min-height:0!important;padding:0!important;box-shadow:none!important;flex:0 0 38px;height:38px;display:grid;place-items:center;border:0;background:none;color:inherit;cursor:pointer}
html.na .na-s svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
html.na .na-s input[type=search]{border:0!important;box-shadow:none!important;background:none!important;border-radius:0!important;padding:0 4px!important;-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:38px;border:0;outline:0;background:none;color:#fffdf6;font:500 15px Inter,system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .25s}
html.na .na-s input::-webkit-search-cancel-button{display:none}html.na .na-s input::placeholder{color:rgba(246,236,208,.6)}
html.na .na-s .na-s-x{opacity:0;pointer-events:none;transition:opacity .25s}
html.na .na-s.open :is(input[type=search],.na-s-x){opacity:1;pointer-events:auto;transition-delay:.18s}
/* ---------- progress ring for checklists ---------- */
html.na .na-ring{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:12px 16px;border-radius:20px;background:var(--na-glass);border:1px solid var(--na-edge);box-shadow:0 10px 26px -14px var(--na-sh),inset 0 1px 0 var(--na-edge);color:var(--na-ink);transition:box-shadow .5s,border-color .5s}
html.na .na-ring svg{width:56px;height:56px;flex:none;transform:rotate(-90deg);overflow:visible}
html.na .na-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
html.na .na-ring .t{stroke:rgba(98,117,109,.22)}
html.na .na-ring .p{stroke:var(--na-g1);stroke-dasharray:144.5;stroke-dashoffset:144.5;transition:stroke-dashoffset .6s var(--na-ease),stroke .4s}
html.na .na-ring b{font:700 20px/1 Inter,system-ui,sans-serif}
html.na .na-ring small{display:block;margin-top:3px;color:var(--na-mut);font:500 12.5px Inter,system-ui,sans-serif}
html.na .na-ring.done{border-color:rgba(201,169,92,.8);box-shadow:0 0 0 1px rgba(201,169,92,.5),0 0 28px 2px rgba(224,193,110,.55),inset 0 1px 0 var(--na-edge);animation:naGlow 1.6s ease-in-out 3}
html.na .na-ring.done .p{stroke:var(--na-gold);filter:drop-shadow(0 0 6px rgba(224,193,110,.9))}
@keyframes naGlow{50%{box-shadow:0 0 0 1px rgba(201,169,92,.8),0 0 44px 6px rgba(224,193,110,.8),inset 0 1px 0 var(--na-edge)}}
html.na input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:26px;height:26px;margin:0 10px 0 0;border-radius:50%;border:2px solid rgba(47,143,115,.55);background:var(--na-glass);position:relative;cursor:pointer;vertical-align:middle;transition:background .3s,border-color .3s,transform .25s var(--na-ease),box-shadow .3s}
html.na input[type=checkbox]::after{content:"";position:absolute;left:8px;top:3.5px;width:6px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--na-ease) .05s}
html.na input[type=checkbox]:checked{background:linear-gradient(145deg,var(--na-g1),var(--na-g2));border-color:var(--na-g1);box-shadow:0 0 0 4px rgba(47,143,115,.18);transform:scale(1.06)}
html.na input[type=checkbox]:checked::after{transform:rotate(45deg) scale(1)}
/* ---------- push-back menu ---------- */
html.na #naPage{display:contents}
html.na.na-lock,html.na.na-lock body{overflow:hidden}
html.na.na-lock #naPage{display:block;position:fixed;inset:0;z-index:5;overflow:hidden;background:var(--na-bg);transform-origin:left center;transition:transform .5s var(--na-ease),border-radius .5s var(--na-ease),box-shadow .5s;will-change:transform}
html.na.na-open #naPage{transform:translateX(72%) scale(.83);border-radius:34px;box-shadow:-30px 20px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.14)}
html.na #naScrim{display:none;position:absolute;inset:0;z-index:99999;background:transparent}
html.na.na-open #naScrim{display:block}
html.na #naMenu{display:flex;flex-direction:column;position:fixed;inset:0;z-index:1;visibility:hidden;padding:calc(env(safe-area-inset-top,0px) + 22px) 0 calc(env(safe-area-inset-bottom,0px) + 18px) 22px;width:76%;color:#f6ecd0;background:radial-gradient(80% 50% at 0% 0%,rgba(201,169,92,.22),transparent 70%),linear-gradient(170deg,#0f4a3d,#082a24 70%);overflow-y:auto}
html.na.na-lock #naMenu{visibility:visible}
html.na #naMenu .mh{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:700 18px/1.1 "Cormorant Garamond",Georgia,serif;color:#fffdf6}
html.na #naMenu .mh img{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.1);padding:4px}
html.na #naMenu .mh small{display:block;margin-top:3px;font:500 12px Inter,sans-serif;color:var(--na-gold)}
html.na #naMenu a{display:flex;align-items:center;gap:14px;padding:11px 14px 11px 12px;margin:0 14px 2px 0;border-radius:16px;color:#f6ecd0;text-decoration:none;font:600 15.5px Inter,system-ui,sans-serif;opacity:0;transform:translateX(-18px);transition:opacity .4s,transform .5s var(--na-ease),background .2s}
html.na.na-open #naMenu a{opacity:1;transform:none}
html.na #naMenu a:active,html.na #naMenu a.on{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
html.na #naMenu a.on{color:#fff}
html.na #naMenu svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--na-gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html.na #naMenu hr{border:0;height:1px;margin:10px 14px 10px 0;background:rgba(255,255,255,.12)}
}
@media(prefers-reduced-motion:reduce){html.na *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:760px){
html.na.na-open #naMenu>:nth-child(2){transition-delay:0.145s}
html.na.na-open #naMenu>:nth-child(3){transition-delay:0.170s}
html.na.na-open #naMenu>:nth-child(4){transition-delay:0.195s}
html.na.na-open #naMenu>:nth-child(5){transition-delay:0.220s}
html.na.na-open #naMenu>:nth-child(6){transition-delay:0.245s}
html.na.na-open #naMenu>:nth-child(7){transition-delay:0.270s}
html.na.na-open #naMenu>:nth-child(8){transition-delay:0.295s}
html.na.na-open #naMenu>:nth-child(9){transition-delay:0.320s}
html.na.na-open #naMenu>:nth-child(10){transition-delay:0.345s}
html.na.na-open #naMenu>:nth-child(11){transition-delay:0.370s}
html.na.na-open #naMenu>:nth-child(12){transition-delay:0.395s}
html.na.na-open #naMenu>:nth-child(13){transition-delay:0.420s}
html.na.na-open #naMenu>:nth-child(14){transition-delay:0.445s}
html.na.na-open #naMenu>:nth-child(15){transition-delay:0.470s}
html.na.na-open #naMenu>:nth-child(16){transition-delay:0.495s}
html.na.na-open #naMenu>:nth-child(17){transition-delay:0.520s}
html.na.na-open #naMenu>:nth-child(18){transition-delay:0.545s}
html.na.na-open #naMenu>:nth-child(19){transition-delay:0.570s}
html.na.na-open #naMenu>:nth-child(20){transition-delay:0.595s}
html.na.na-open #naMenu>:nth-child(21){transition-delay:0.620s}
html.na.na-open #naMenu>:nth-child(22){transition-delay:0.645s}
html.na.na-open #naMenu>:nth-child(23){transition-delay:0.670s}
html.na.na-open #naMenu>:nth-child(24){transition-delay:0.695s}
}