/* ريّا v62 — home re-composition, colour mix (red · baby blue · blue) as accents, azkar orbit. Transform/opacity only; motion off under reduced motion. */
:root{--k-red:#d9485f;--k-baby:#7cc6ee;--k-blue:#3d6fe0;--k-red-s:rgba(217,72,95,.14);--k-baby-s:rgba(124,198,238,.16);--k-blue-s:rgba(61,111,224,.14);--k-mix:linear-gradient(110deg,var(--k-red),var(--k-baby) 52%,var(--k-blue))}
[data-theme="dark"]{--k-red:#ef6f84;--k-baby:#8fd6f7;--k-blue:#6f97ff;--k-red-s:rgba(239,111,132,.13);--k-baby-s:rgba(143,214,247,.12);--k-blue-s:rgba(111,151,255,.14)}
.hx.h62 .rm-hw{display:none!important}
/* section heads: a short mixed-colour bar */
.hx.h62>section>.hx-head h2{position:relative;padding-inline-start:12px}
.hx.h62>section>.hx-head h2::before{content:"";position:absolute;inset-inline-start:0;top:.22em;bottom:.22em;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--k-red),var(--k-baby),var(--k-blue))}
.hx.h62>*{margin-bottom:18px}
/* tile accents cycle through the mix */
.hx.h62 .sx-grid .sx-t:nth-child(3n+1) .sx-m{color:var(--k-red)}
.hx.h62 .sx-grid .sx-t:nth-child(3n+2) .sx-m{color:var(--k-baby)}
.hx.h62 .sx-grid .sx-t:nth-child(3n) .sx-m{color:var(--k-blue)}
[data-theme="light"] .hx.h62 .sx-grid .sx-t:nth-child(3n+2) .sx-m{color:#2a8fc4}

/* 1) Ramadan countdown */
.h62-rm{position:relative;display:block;overflow:hidden;margin:2px 0 18px;padding:16px 16px 14px;border-radius:24px;text-decoration:none;color:var(--ink,inherit);background:var(--card);isolation:isolate;box-shadow:var(--elev1,var(--sh1))}
.h62-rm::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--k-mix);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:1;pointer-events:none}
.h62-rm-glow{position:absolute;inset:-40% -20% auto auto;width:70%;height:140%;background:radial-gradient(closest-side,var(--k-baby-s),transparent 70%);z-index:-1;pointer-events:none}
.h62-rm-glow::after{content:"";position:absolute;left:-90%;top:30%;width:80%;height:80%;background:radial-gradient(closest-side,var(--k-red-s),transparent 70%)}
.h62-rm-top{display:flex;align-items:center;gap:12px}
.h62-rm-top>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.h62-rm-top small{font-size:12px;color:var(--muted);letter-spacing:.2px}
.h62-rm-top b{font-size:17px;font-weight:800}
.h62-moon{width:40px;height:40px;flex:none;color:var(--k-blue);padding:6px;border-radius:14px;background:var(--k-blue-s)}
.h62-go{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--k-red-s);color:var(--k-red);flex:none}
.h62-go .ico{width:16px;height:16px}
.h62-cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 10px;direction:rtl}
.h62-cd span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;border-radius:16px;background:var(--card2,rgba(127,127,127,.08));border:1px solid var(--line,var(--hl))}
.h62-cd b{font-size:26px;line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums;background:var(--k-mix);-webkit-background-clip:text;background-clip:text;color:transparent}
.h62-cd span:nth-child(1) b{background:none;color:var(--k-red)}
.h62-cd span:nth-child(2) b{background:none;color:var(--k-baby)}
.h62-cd span:nth-child(3) b{background:none;color:var(--k-blue)}
.h62-cd span:nth-child(4) b{background:none;color:var(--k-red)}
[data-theme="light"] .h62-cd span:nth-child(2) b{color:#2a8fc4}
.h62-cd i{font-style:normal;font-size:11.5px;color:var(--muted)}
.h62-rm em{display:block;font-style:normal;font-size:12px;color:var(--muted)}

/* 2) hadith of the day */
.h62-hgrid{display:grid;gap:12px}
@media(min-width:760px){.h62-hgrid{grid-template-columns:1fr 1fr}}
.h62-hc{position:relative;padding:16px 16px 12px;border-radius:20px;background:var(--card);border:1px solid var(--line,var(--hl));overflow:hidden}
.h62-hc::before{content:"";position:absolute;inset-inline-start:0;top:16px;bottom:16px;width:3px;border-radius:3px;background:var(--k-red)}
.h62-hc.c1::before{background:var(--k-blue)}
.h62-ht{margin:0 0 10px;font-family:var(--ar,'Amiri',serif);font-size:19px;line-height:1.95}
.h62-hm{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;font-size:12.5px;color:var(--muted)}
.h62-ref{padding:3px 10px;border-radius:999px;background:var(--k-baby-s);color:var(--ink,inherit);font-weight:700;font-size:12px}
.h62-hc.c1 .h62-ref{background:var(--k-blue-s)}
.h62-ha{display:flex;gap:8px;margin-top:10px}
.h62-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:12px;border:1px solid var(--line,var(--hl));background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer}
.h62-btn .ico{width:16px;height:16px}

/* 3) azkar orbit (after the حَفاوة enterprise orbit, re-cut for ريّا) */
.h62-orb{--R:calc(min(100vw - 48px,330px)/2 - 44px);position:relative;width:min(100%,330px);aspect-ratio:1;margin:4px auto 6px}
.h62-ring{position:absolute;border-radius:50%;inset:0;margin:auto;pointer-events:none}
.h62-ring.r1{width:calc(var(--R)*2);height:calc(var(--R)*2);border:1px solid var(--line,var(--hl))}
.h62-ring.r2{width:calc(var(--R)*2 - 46px);height:calc(var(--R)*2 - 46px);border:1px dashed color-mix(in srgb,var(--k-baby) 45%,transparent)}
.h62-ring.r3{width:calc(var(--R)*2 + 22px);height:calc(var(--R)*2 + 22px);background:conic-gradient(from 0deg,transparent 0 72%,color-mix(in srgb,var(--k-blue) 55%,transparent) 86%,color-mix(in srgb,var(--k-red) 60%,transparent) 94%,transparent 100%);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));animation:h62sweep 14s linear infinite}
@keyframes h62sweep{to{transform:rotate(360deg)}}
.h62-spin{position:absolute;inset:0;transform:rotate(var(--turn,0deg));transition:transform 1.6s cubic-bezier(.65,0,.35,1)}
.h62-spin::after{content:"";position:absolute;inset:0;animation:none}
.h62-orb:not(.still) .h62-spin{animation:h62drift 120s linear infinite;animation-composition:add}
@keyframes h62drift{from{rotate:0deg}to{rotate:360deg}}
.h62-node{--c:var(--k-red);--cs:var(--k-red-s);position:absolute;left:50%;top:50%;width:0;height:0;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;transform:rotate(var(--a)) translateY(calc(var(--R)*-1)) rotate(calc(var(--a)*-1))}
.h62-node.c1{--c:var(--k-baby);--cs:var(--k-baby-s)}
.h62-node.c2{--c:var(--k-blue);--cs:var(--k-blue-s)}
.h62-node span{position:absolute;left:-42px;top:-17px;width:84px;height:34px;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:12.5px;font-weight:700;border-radius:999px;background:var(--card);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);transform:rotate(calc(var(--turn,0deg)*-1));transition:transform 1.6s cubic-bezier(.65,0,.35,1),background .5s,border-color .5s,box-shadow .5s}
.h62-orb:not(.still) .h62-node span{animation:h62drift 120s linear infinite reverse;animation-composition:add}
.h62-node span::before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--c);top:-4px;left:50%;margin-left:-3.5px}
.h62-node.on span{background:var(--cs);border-color:var(--c);box-shadow:0 0 0 4px var(--cs),0 8px 22px -10px var(--c)}
.h62-node:focus-visible span{outline:2px solid var(--c);outline-offset:2px}
.h62-core{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:inherit;background:radial-gradient(circle at 50% 35%,var(--card2,var(--card)),var(--card));border:1px solid var(--line,var(--hl));box-shadow:var(--elev1,var(--sh1))}
.h62-core small{font-size:11.5px;color:var(--muted)}
.h62-core b{font-size:17px;font-weight:800;text-align:center;max-width:120px;line-height:1.3}
.h62-core i{font-style:normal;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.h62-prog{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);transform:rotate(-90deg)}
.h62-prog circle{fill:none;stroke-width:2.5}
.h62-prog .bg{stroke:var(--line,var(--hl))}
.h62-prog .fg{stroke:url(#h62g);stroke:var(--k-blue);stroke-linecap:round;stroke-dasharray:352;stroke-dashoffset:352;transition:stroke-dashoffset 1s linear}
.h62-dz{margin:4px 0 12px;padding:16px;border-radius:20px;background:var(--card);border:1px solid var(--line,var(--hl));text-align:center}
.h62-dt{margin:0 0 10px;font-family:var(--ar,'Amiri',serif);font-size:20px;line-height:1.95;min-height:3.9em}
.h62-dm{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:12px;color:var(--muted)}
.h62-dm>span:first-child{padding:2px 10px;border-radius:999px;background:var(--k-red-s);color:var(--ink,inherit);font-weight:700}
.h62-daily{padding:14px 16px;border-radius:20px;background:linear-gradient(135deg,var(--k-baby-s),var(--k-blue-s));border:1px solid var(--line,var(--hl))}
.h62-dh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.h62-dh b{font-size:14.5px}.h62-dh span{font-size:11.5px;color:var(--muted)}
.h62-daily p{margin:0 0 10px;font-family:var(--ar,'Amiri',serif);font-size:17.5px;line-height:1.9}
.h62-wide{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:14px;background:var(--card);color:inherit;text-decoration:none;font-weight:700;font-size:14px;border:1px solid var(--line,var(--hl))}
.h62-wide .ico{width:16px;height:16px}
@media(max-width:360px){.h62-node span{width:74px;left:-37px;font-size:11.5px}.h62-core{width:132px;height:132px;margin:-66px 0 0 -66px}}
@media(prefers-reduced-motion:reduce){.h62-ring.r3,.h62-orb .h62-spin,.h62-orb .h62-node span{animation:none!important}.h62-spin,.h62-node span,.h62-prog .fg{transition:none!important}}
html.pm-reduce .h62-ring.r3,html.pm-reduce .h62-spin,html.pm-reduce .h62-node span{animation:none!important}

.h62-az{overflow-x:clip}
.h62-core{width:140px;height:140px;margin:-70px 0 0 -70px}
.h62-node span{width:80px;left:-40px}
.hx.h62 .sx-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.hx.h62 .sx-grid .sx-t:nth-child(3n+1) .sx-m,.hx.h62 .sx-grid .sx-t:nth-child(3n+1) .sx-m svg{color:var(--k-red)!important}
.hx.h62 .sx-grid .sx-t:nth-child(3n+2) .sx-m,.hx.h62 .sx-grid .sx-t:nth-child(3n+2) .sx-m svg{color:var(--k-baby)!important}
.hx.h62 .sx-grid .sx-t:nth-child(3n) .sx-m,.hx.h62 .sx-grid .sx-t:nth-child(3n) .sx-m svg{color:var(--k-blue)!important}
[data-theme="light"] .hx.h62 .sx-grid .sx-t:nth-child(3n+2) .sx-m,[data-theme="light"] .hx.h62 .sx-grid .sx-t:nth-child(3n+2) .sx-m svg{color:#2a8fc4!important}