/* Page loader: shown only when opening another page is slow. The page behind is blurred; the name of Allah sits in a silver ring that fills while it waits. */
:root { --ld: 180px; --s1: #aeb7c2; --s2: #f3f6f9; --glint: #fff; --w1: #b9c2cd; --w2: #fff; --wsh: rgba(0, 0, 0, 0.5); }
[data-theme="light"] { --s1: #7d8793; --s2: #d9dee4; --w1: #5b6672; --w2: #f4f7fa; --wsh: rgba(255, 255, 255, 0.75); }

#pageload { position: fixed; inset: 0; z-index: 1000; display: none; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in srgb, var(--night) 58%, transparent); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
#pageload.on { display: flex; animation: ldIn .25s ease both; }
#pageload .ld-ring { position: relative; width: var(--ld); height: var(--ld); display: grid; place-items: center; }
#pageload svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#pageload .ld-track { fill: none; stroke: color-mix(in srgb, var(--moon) 14%, transparent); stroke-width: 3; }
#pageload .ld-arc { fill: none; stroke: url(#ld-silver); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; }
#pageload .ld-glint { fill: none; stroke: var(--glint); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 26 313.3; }
#pageload .ld-word { font-family: var(--f-urdu); font-size: calc(var(--ld) * 0.42); line-height: 1.6; padding: 6px 4px 0; color: var(--w1); background-image: linear-gradient(105deg, var(--w1) 0 38%, var(--w2) 50%, var(--w1) 62% 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 var(--wsh)); }
#pageload .ld-cap { margin: 22px 0 0; color: var(--moon-dim); font-size: 0.95rem; }
#pageload .ld-cap .lu { font-size: 1.35rem; }

#pageload.on .ld-arc { animation: ldRing 10s cubic-bezier(.2, .7, .3, 1) both; }
#pageload.on .ld-glint { animation: ldGlint 2.4s linear infinite; }
#pageload.on .ld-word { animation: ldSheen 2.4s linear infinite; }
@keyframes ldIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ldRing { from { stroke-dashoffset: 339.3; } to { stroke-dashoffset: 52; } }
@keyframes ldGlint { to { stroke-dashoffset: -339.3; } }
@keyframes ldSheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }

@media (max-width: 600px) { :root { --ld: 150px; } }
@media (prefers-reduced-motion: reduce) {
  #pageload.on, #pageload.on .ld-glint, #pageload.on .ld-word { animation: none; }
  #pageload .ld-glint { display: none; }
  #pageload.on .ld-arc { animation: none; stroke-dashoffset: 120; }
}
@media print { #pageload { display: none !important; } }

/* "a newer version is ready" bar: sits above the phone tab bar */
.updatebar { position: fixed; z-index: 900; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; max-width: calc(100vw - 2rem); padding: 0.6rem 0.7rem 0.6rem 1.1rem; border-radius: 12px; background: var(--band, var(--night-3)); color: var(--band-ink, var(--moon)); font-size: 0.95rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); animation: ldIn .25s ease both; }
.updatebar button { flex: none; min-height: 2.5rem; padding: 0 1.1rem; border: 0; border-radius: 9px; background: var(--lamp-btn, #f0b45a); color: #2a1a0c; font: inherit; font-weight: 600; cursor: pointer; }
@media (max-width: 600px) { .updatebar { bottom: 4.8rem; } }
@media print { .updatebar { display: none; } }