/* ريّا v63 — calmer home: side column (azkar orbit + compact Ramadan + daily reminder) at the top-right, compact Ramadan, accent picker tokens. CSS variables only. */
/* accent families: each choice re-tunes the three mix tokens, separately for light and dark */
:root{--k-babyt:#2a8fc4}
[data-theme="dark"]{--k-babyt:var(--k-baby)}
html[data-acc="red"]{--k-red:#b8324a;--k-baby:#d9707f;--k-blue:#8a1f33;--k-babyt:#b84a5c;--k-red-s:rgba(184,50,74,.12);--k-baby-s:rgba(217,112,127,.14);--k-blue-s:rgba(138,31,51,.12);--k-mix:linear-gradient(110deg,#8a1f33,#d9707f 52%,#b8324a)}
html[data-acc="red"][data-theme="dark"]{--k-red:#f07a8c;--k-baby:#f6a9b3;--k-blue:#e0566c;--k-babyt:#f6a9b3;--k-red-s:rgba(240,122,140,.13);--k-baby-s:rgba(246,169,179,.12);--k-blue-s:rgba(224,86,108,.14);--k-mix:linear-gradient(110deg,#e0566c,#f6a9b3 52%,#f07a8c)}
html[data-acc="baby"]{--k-red:#2a8fc4;--k-baby:#5bb6e3;--k-blue:#1d6f99;--k-babyt:#2a8fc4;--k-red-s:rgba(42,143,196,.12);--k-baby-s:rgba(91,182,227,.16);--k-blue-s:rgba(29,111,153,.12);--k-mix:linear-gradient(110deg,#1d6f99,#5bb6e3 52%,#2a8fc4)}
html[data-acc="baby"][data-theme="dark"]{--k-red:#8fd6f7;--k-baby:#bfe8fb;--k-blue:#62bdea;--k-babyt:#bfe8fb;--k-red-s:rgba(143,214,247,.13);--k-baby-s:rgba(191,232,251,.11);--k-blue-s:rgba(98,189,234,.14);--k-mix:linear-gradient(110deg,#62bdea,#bfe8fb 52%,#8fd6f7)}
html[data-acc="blue"]{--k-red:#3a64d8;--k-baby:#6f8fe8;--k-blue:#23419e;--k-babyt:#3a64d8;--k-red-s:rgba(58,100,216,.12);--k-baby-s:rgba(111,143,232,.14);--k-blue-s:rgba(35,65,158,.12);--k-mix:linear-gradient(110deg,#23419e,#6f8fe8 52%,#3a64d8)}
html[data-acc="blue"][data-theme="dark"]{--k-red:#7ea2ff;--k-baby:#aec3ff;--k-blue:#5b83f5;--k-babyt:#aec3ff;--k-red-s:rgba(126,162,255,.13);--k-baby-s:rgba(174,195,255,.12);--k-blue-s:rgba(91,131,245,.14);--k-mix:linear-gradient(110deg,#5b83f5,#aec3ff 52%,#7ea2ff)}
[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:var(--k-babyt)!important}
[data-theme="light"] .h62-cd span:nth-child(2) b{color:var(--k-babyt)}

/* picker */
.a63{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.a63-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.a63-o{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border-radius:16px;border:1.5px solid var(--line,var(--hl));background:var(--card2,transparent);color:var(--ink,inherit);font:inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.a63-o b{font-size:13px;font-weight:700}
.a63-o.on{border-color:var(--gold,currentColor);box-shadow:0 0 0 3px rgba(127,127,127,.16)}
.a63-sw{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 2px 8px -3px rgba(0,0,0,.4)}
.a63-sw.s-def{background:conic-gradient(from 200deg,#0b3b2e 0 50%,#c9a24a 50% 100%)}
.a63-sw.s-red{background:conic-gradient(from 200deg,#6e1f2c 0 50%,#e8959c 50% 100%)}
.a63-sw.s-baby{background:conic-gradient(from 200deg,#12506a 0 50%,#8fd2f0 50% 100%)}
.a63-sw.s-blue{background:conic-gradient(from 200deg,#1c3a7e 0 50%,#a2bbff 50% 100%)}
.a63-mode{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--card2,rgba(127,127,127,.08));border:1px solid var(--line,var(--hl))}
.a63-mode button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.a63-mode button .ico{width:17px;height:17px}
.a63-mode button.on{background:var(--card);color:var(--ink,inherit);box-shadow:var(--elev1,0 1px 4px rgba(0,0,0,.15))}
.a63-note{margin:0;font-size:12px;color:var(--muted)}

/* layout */
.hx.h63>*{margin-bottom:0}
.h63-side,.h63-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.h63-side>*,.h63-main>*{margin:0!important}
.hx.h63 .h62-az,.hx.h63 .h63-dl .h62-daily{border-radius:24px}
.hx.h63 .h62-az{position:relative;padding:14px 14px 12px;background:var(--card);border:1px solid var(--line,var(--hl));box-shadow:var(--elev1,var(--sh1));overflow:hidden}
.hx.h63 .h62-az>.hx-head{margin:0 0 4px}
.hx.h63 .h62-az>.hx-head p{font-size:12px}

/* compact Ramadan card */
.h63-rm{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"mo tx cd";align-items:center;column-gap:10px;margin:0;padding:10px 12px;border-radius:20px}
.h63-rm .h62-moon{grid-area:mo;width:34px;height:34px;padding:6px;border-radius:12px}
.h63-rt{grid-area:tx;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.h63-rt small{font-size:11px;color:var(--muted)}
.h63-rt b{font-size:15px;font-weight:800;white-space:nowrap}
.h63-rm .h62-cd{grid-area:cd;display:flex;gap:4px;margin:0}
.h63-rm .h62-cd span{width:44px;padding:5px 0 4px;border-radius:11px;gap:0}
.h63-rm .h62-cd b{font-size:17px}
.h63-rm .h62-cd i{font-size:10px}
.h63-rm em,.h63-rm .h62-go{display:none}
.h63-rm.inr{grid-template-columns:auto 1fr auto;grid-template-areas:"mo tx go"}
.h63-rm.inr .h62-go{display:grid;grid-area:go;width:28px;height:28px}

/* phones: columns dissolve, order puts azkar first, the orbit becomes a compact widget beside the current dhikr */
@media(max-width:899px){
 .hx.h63{gap:16px}
 .h63-side,.h63-main{display:contents}
 .hx.h63 .h62-az{display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-areas:"hd hd" "orb dz";column-gap:12px;align-items:center;padding:12px 12px 12px 14px}
 .hx.h63 .h62-az>.hx-head{grid-area:hd}
 .hx.h63 .h62-az>.hx-head h2{font-size:17px}
 .hx.h63 .h62-orb{grid-area:orb;--R:50px;width:118px;margin:0}
 .hx.h63 .h62-ring.r2{display:none}
 .hx.h63 .h62-ring.r3{width:calc(var(--R)*2 + 14px);height:calc(var(--R)*2 + 14px)}
 .hx.h63 .h62-node span{left:-5px;top:-5px;width:10px;height:10px;font-size:0;padding:0;border-radius:50%;background:var(--c);border:0;overflow:hidden;color:transparent}
 .hx.h63 .h62-node span::before{display:none}
 .hx.h63 .h62-node.on span{left:-7px;top:-7px;width:14px;height:14px;box-shadow:0 0 0 4px var(--cs)}
 .hx.h63 .h62-node::after{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%}
 .hx.h63 .h62-core{width:76px;height:76px;margin:-38px 0 0 -38px;gap:1px}
 .hx.h63 .h62-core small{display:none}
 .hx.h63 .h62-core b{font-size:11.5px;max-width:64px;line-height:1.25}
 .hx.h63 .h62-core i{font-size:9.5px}
 .hx.h63 .h62-prog{inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px)}
 .hx.h63 .h62-dz{grid-area:dz;margin:0;padding:0;border:0;background:none;text-align:start;align-self:center}
 .hx.h63 .h62-dt{font-size:16px;line-height:1.8;min-height:0;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
 .hx.h63 .h62-dm{justify-content:flex-start;gap:4px 6px;font-size:11px}
 .hx.h63 .h62-dm .h62-src{display:none}
}
@media(max-width:360px){.h63-rm .h62-cd span{width:38px}.h63-rt b{font-size:13.5px}.hx.h63 .h62-az{grid-template-columns:104px minmax(0,1fr)}.hx.h63 .h62-orb{--R:44px;width:104px}}

/* desktop: side column at the top-right (RTL start), main content beside it */
@media(min-width:900px){
 .hx.h63{display:grid;grid-template-columns:minmax(300px,340px) minmax(0,1fr);gap:28px;align-items:start}
 .h63-side{position:sticky;top:84px}
 .hx.h63 .h62-orb{--R:94px;width:288px;margin:2px auto 0}
 .hx.h63 .h62-core{width:124px;height:124px;margin:-62px 0 0 -62px}
 .hx.h63 .h62-core b{font-size:15px;max-width:104px}
 .hx.h63 .h62-node span{width:max-content;padding:0 10px;left:0;translate:-50% 0;height:30px;top:-15px;font-size:11.5px}
 .hx.h63 .h62-az>.hx-head p{white-space:nowrap}
 .hx.h63 .h62-dz{margin:4px 0 0;padding:12px 4px 2px;border:0;border-top:1px solid var(--line,var(--hl));border-radius:0;background:none}
 .hx.h63 .h62-dt{font-size:18px;min-height:0}
 .h63-rm{grid-template-columns:auto 1fr;grid-template-areas:"mo tx" "cd cd" "em em";row-gap:10px;padding:14px}
 .h63-rm .h62-cd{display:grid;grid-template-columns:repeat(4,1fr)}
 .h63-rm .h62-cd span{width:auto;padding:7px 0 5px}
 .h63-rm .h62-cd b{font-size:20px}
 .h63-rm em{display:block;grid-area:em;font-style:normal;font-size:11.5px;color:var(--muted)}
 .h63-rm.inr{grid-template-areas:"mo tx go" "em em em"}
 .hx.h63 .h62-hgrid{grid-template-columns:1fr 1fr}
}
@media(min-width:900px) and (max-height:900px){.h63-side{position:static}}

/* «تذكير صوتي» row on the azkar card */
.vz63{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line,var(--hl))}
.vz-sw{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 4px;border:0;background:none;color:var(--ink,inherit);font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.vz-sw .ico{width:17px;height:17px;color:var(--k-red)}
.vz-sw i{position:relative;width:34px;height:20px;border-radius:999px;background:var(--card2,rgba(127,127,127,.18));border:1px solid var(--line,var(--hl));transition:background .25s}
.vz-sw i::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .25s,background .25s}
.vz63.on .vz-sw i{background:var(--k-red-s);border-color:var(--k-red)}
.vz63.on .vz-sw i::after{background:var(--k-red);transform:translateX(-14px)}
.vz-iv{display:flex;gap:2px;padding:2px;margin-inline-start:auto;border-radius:10px;background:var(--card2,rgba(127,127,127,.08));border:1px solid var(--line,var(--hl));opacity:.55;transition:opacity .25s}
.vz63.on .vz-iv{opacity:1}
.vz-iv button{min-height:30px;padding:0 9px;border:0;border-radius:8px;background:none;color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.vz-iv button.on{background:var(--card);color:var(--ink,inherit);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.vz-mu{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;border:1px solid var(--line,var(--hl));background:none;color:var(--muted);cursor:pointer}
.vz-mu .ico{width:17px;height:17px}.vz-mu .x{display:none}.vz63.mu .vz-mu .x{display:inline}.vz63.mu .vz-mu .w{display:none}.vz63.mu .vz-mu{color:var(--k-red)}
.h62-az.vz-live .h62-dt{color:var(--k-babyt)}
@media(max-width:899px){.hx.h63 .h62-az .vz63{grid-column:1/-1}}
@media(max-width:360px){.vz-iv button{padding:0 6px}.vz-sw span{font-size:12px}}
.h62-az.vz-live .h62-src{display:none}