/* Road to Ramadan: its own look. Night sky, gold, geometric star. Loaded last. */
:root{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 6l6.2 14.2L52.6 14l-6.2 14.4L60 32l-13.6 3.6L52.6 50l-14.4-6.2L32 58l-6.2-14.2L11.4 50l6.2-14.4L4 32l13.6-3.6L11.4 14l14.4 6.2z' fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E")}
:root{--r:22px;--shadow:0 6px 18px rgba(10,40,38,.10);--sky1:#1E1B4B;--sky2:#0F4C5C;--sky3:#0B6B63}
:root[data-theme="dark"]{--shadow:0 6px 18px rgba(0,0,0,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--shadow:0 6px 18px rgba(0,0,0,.35)}}

/* page background: a soft glow at the top instead of a flat colour */
body{background-image:radial-gradient(120% 60% at 50% -10%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);background-repeat:no-repeat;background-attachment:scroll}

/* headings get a serif voice */
h1,h2,.hn b,.rtop h2,.card h2,.ltitle{font-family:ui-serif,"Iowan Old Style","Palatino Linotype",Georgia,serif;letter-spacing:.005em}
section>h2::before,.card>h2::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.45em;background:var(--gold);transform:rotate(45deg);border-radius:2px;vertical-align:.08em}

/* cards */
section,.card,.hcard,.rbox{border-radius:var(--r)!important;box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--line) 55%,transparent)!important}

/* Home hero: the night sky */
.hhero{background:var(--star) 0 0/64px,radial-gradient(90% 120% at 100% 0%,rgba(255,214,120,.22),transparent 55%),linear-gradient(150deg,var(--sky1),var(--sky2) 62%,var(--sky3))!important;border-radius:28px!important;padding:20px 20px 16px!important;box-shadow:0 14px 30px rgba(15,40,60,.28)}
.hhero::after{width:150px;height:150px;right:-18px;top:-26px;bottom:auto;border-radius:50%;background:transparent!important;box-shadow:inset -26px 6px 0 0 rgba(255,222,140,.55);filter:none;transform:rotate(-16deg)}
.hhero .hn b{font-size:1.7rem;color:#FFE29A}
.hhero .hn span{color:#fff}
.hbar{background:rgba(255,255,255,.22)}.hbar i{background:linear-gradient(90deg,#FFE29A,#F0B429)}
.hnone{box-shadow:var(--shadow)}

/* Explore tiles: each has its own colour */
.htile{border:0!important;border-radius:20px!important;color:#10302D;box-shadow:var(--shadow);transition:transform .15s}
.htile:active{transform:scale(.97)}
.htile b{font-family:ui-serif,Georgia,serif;font-size:1.02rem}.htile small{color:rgba(16,48,45,.78)}
.htile i{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.55);font-size:1.4rem;top:10px;right:10px}
.hgrid .htile:nth-child(1){background:#D9EEE6}.hgrid .htile:nth-child(2){background:#FBE3D3}.hgrid .htile:nth-child(3){background:#DCE6F7}
.hgrid .htile:nth-child(4){background:#EADFF5}.hgrid .htile:nth-child(5){background:#FFF0C7}.hgrid .htile:nth-child(6){background:#F9DCE3}
.hgrid .htile.kids{background:linear-gradient(120deg,#FFE9A8,#FFD0B0 60%,#F7B7C8);flex-direction:row;align-items:center;min-height:78px;justify-content:flex-start}
.hgrid .htile.kids b{font-size:1.15rem}
:root[data-theme="dark"] .htile{color:#F2F7F5}:root[data-theme="dark"] .htile small{color:rgba(242,247,245,.78)}
:root[data-theme="dark"] .htile i{background:rgba(255,255,255,.14)}
:root[data-theme="dark"] .hgrid .htile:nth-child(1){background:#163C37}:root[data-theme="dark"] .hgrid .htile:nth-child(2){background:#4A2D22}
:root[data-theme="dark"] .hgrid .htile:nth-child(3){background:#1F2E4D}:root[data-theme="dark"] .hgrid .htile:nth-child(4){background:#33264A}
:root[data-theme="dark"] .hgrid .htile:nth-child(5){background:#4A3F17}:root[data-theme="dark"] .hgrid .htile:nth-child(6){background:#4A2431}
:root[data-theme="dark"] .hgrid .htile.kids{background:linear-gradient(120deg,#5A4A16,#5A3A24 60%,#59283C)}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .htile{color:#F2F7F5}:root:not([data-theme="light"]) .htile small{color:rgba(242,247,245,.78)}
 :root:not([data-theme="light"]) .htile i{background:rgba(255,255,255,.14)}
 :root:not([data-theme="light"]) .hgrid .htile:nth-child(1){background:#163C37}:root:not([data-theme="light"]) .hgrid .htile:nth-child(2){background:#4A2D22}
 :root:not([data-theme="light"]) .hgrid .htile:nth-child(3){background:#1F2E4D}:root:not([data-theme="light"]) .hgrid .htile:nth-child(4){background:#33264A}
 :root:not([data-theme="light"]) .hgrid .htile:nth-child(5){background:#4A3F17}:root:not([data-theme="light"]) .hgrid .htile:nth-child(6){background:#4A2431}
 :root:not([data-theme="light"]) .hgrid .htile.kids{background:linear-gradient(120deg,#5A4A16,#5A3A24 60%,#59283C)}
}
.hlab{font-family:ui-serif,Georgia,serif;font-size:1.05rem;color:var(--ink);margin:22px 4px 10px}

/* prayer row as a timeline */
.hrow{position:relative;padding:20px 10px 16px!important}
.hrow::before{content:"";position:absolute;left:8%;right:8%;top:27px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);opacity:.7}
.hp i{position:relative;z-index:1;width:14px;height:14px;border:2px solid var(--surface)}
.hp.on i{background:var(--gold);box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 32%,transparent)}
.hp.on b{color:var(--gold-text)}

/* bottom bar: a floating pill with three tabs */
body #tabs{left:12px!important;right:12px;width:auto!important;bottom:max(10px,env(safe-area-inset-bottom,0px))!important;border-radius:28px!important;border:1px solid color-mix(in srgb,var(--line) 50%,transparent)!important;background:color-mix(in srgb,var(--surface) 90%,transparent)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 28px rgba(8,30,28,.22)!important;padding:6px!important;transform:none!important;max-width:520px;margin:0 auto}
body #tabs button[data-tab="learn"]{display:none!important}
body #tabs button{border-radius:20px!important;position:relative;flex:1}
body #tabs button.on{background:color-mix(in srgb,var(--accent) 14%,transparent)!important;color:var(--accent)!important}
body #tabs button.on::after{content:"";position:absolute;left:50%;bottom:3px;width:18px;height:3px;margin-left:-9px;border-radius:3px;background:var(--gold)}
:root[data-theme="dark"] body #tabs button.on{color:var(--gold)!important}
main{padding-bottom:110px!important}

/* buttons */
button.primary{border-radius:16px;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent)}
.hnone,.hnone b{color:#fff!important}.hnone p{color:rgba(255,255,255,.88)!important}
.hrow::before{display:none}.hrow:has(.hp)::before{display:block}
.hgrid .htile.kids{flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;min-height:84px!important;padding-right:64px}
.hgrid .htile.kids small{max-width:100%}

/* v18: no double-tap zoom, tidy settings, worship group, hidden Learn card on Home */
html,body,button,input,select,label,summary,a{touch-action:manipulation}
#learnToday{display:none!important}
#wgrp:not(.open)~#cFard,#wgrp:not(.open)~#cSun,#wgrp:not(.open)~#cWitr,#wgrp:not(.open)~#cAdh,#wgrp:not(.open)~#cQ{display:none!important}
.wgrp{margin:12px 0}
.wgrp button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border-radius:18px;background:var(--card,#fff);border:1.5px solid var(--soft);min-height:64px}
.wgrp .wgi{font-size:1.6rem}
.wgrp .wgt{flex:1;display:flex;flex-direction:column;min-width:0}
.wgrp .wgt b{font-family:Georgia,"Times New Roman",serif;font-size:1.15rem}
.wgrp .wgt small{color:var(--muted);font-size:.85rem}
.wgrp .wgc{width:10px;height:10px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg);margin:-4px 6px 0 8px;flex:none;transition:transform .2s}
.wgrp.open .wgc{transform:rotate(-135deg);margin-top:4px}
.swrow{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}
.swrow span{display:flex;flex-direction:column}
.swrow small{color:var(--muted);font-size:.85rem;line-height:1.35;margin-top:2px}
input.sw{appearance:none;-webkit-appearance:none;flex:none;width:52px;height:30px;border-radius:30px;background:#b9c4c2;position:relative;transition:background .2s;border:0;margin:0}
input.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
input.sw:checked{background:#0B5D55}
input.sw:checked::after{transform:translateX(22px)}
input.sw:focus-visible{outline:3px solid #C9A227;outline-offset:2px}
.item input.sw,label.item input.sw{width:52px;height:30px;min-width:52px;border:0;border-radius:30px;background:#b9c4c2;box-shadow:none}
.item input.sw:checked{background:#0B5D55}
.item input.sw::after{content:""!important;position:absolute!important;top:3px!important;left:3px!important;width:24px!important;height:24px!important;border:0!important;border-radius:50%!important;background:#fff!important;transform:none!important;opacity:1!important}
.item input.sw:checked::after{transform:translateX(22px)!important}

.bk .bkrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.bkta{width:100%;box-sizing:border-box;border-radius:12px;border:1.5px solid var(--soft);padding:10px;font:inherit;font-size:.8rem;background:var(--soft);color:inherit;resize:vertical}
.bkfile{cursor:pointer}
.bknudge{display:flex;align-items:center;gap:8px;margin:10px 0;padding:10px 12px;border-radius:16px;background:var(--soft);border:1.5px solid #C9A227}
.bknudge span{flex:1;display:flex;flex-direction:column;min-width:0}
.bknudge small{color:var(--muted);font-size:.82rem}
.bknudge button{min-height:40px;padding:0 12px;border-radius:12px}
.bknudge button[data-n=go]{background:#0B5D55;color:#fff;border-color:transparent;font-weight:600}

/* guided dhikr: true black for OLED, dim colours */
.gdcta{margin:14px 0 6px;padding:12px;border-radius:16px;background:var(--soft);display:flex;flex-direction:column;gap:6px}
.gdcta small{color:var(--muted);font-size:.84rem;line-height:1.4}
#gd{position:fixed;inset:0;z-index:200;background:#000;color:#8a7d52;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top,0px)) 14px max(14px,env(safe-area-inset-bottom,0px));-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;cursor:pointer}
#gd *{background-color:transparent}
#gd .gdtop{display:flex;gap:8px;align-items:center}
#gd .gdtop button{min-height:44px;min-width:44px;padding:0 12px;border:1px solid #2a2618;border-radius:12px;color:#6f6542;background:#000;font-size:1rem}
#gd .gdtop button[data-g=hap]{margin-left:auto;font-size:.85rem}
#gd .gdbar{height:3px;background:#17140a;border-radius:3px;margin:12px 0 10px}
#gd .gdbar i{display:block;height:100%;background:#5c5230;border-radius:3px}
#gd .gdtt{text-align:center;color:#6f6542;font-size:.95rem;margin:2px 0 6px}
#gd .gdar{flex:1;min-height:0;overflow:auto;text-align:center;font-family:'Scheherazade New','Amiri Quran',Amiri,'Traditional Arabic',serif;font-size:2rem;line-height:2.3;color:#9a8c5c;padding:6px 4px;display:flex;flex-direction:column}
#gd .gdin{margin:auto 0}
#gd .gdnote{text-align:center;color:#4f4830;font-size:.82rem;margin:4px 0}
#gd .gdct{text-align:center;margin:6px 0;color:#8a7d52}
#gd .gdct b{font-size:4.2rem;font-weight:600;line-height:1}
#gd .gdct span{font-size:1.6rem;color:#5c5230}
#gd .gdct .gdone{font-size:1.05rem}
#gd .gdfoot{display:flex;justify-content:center;gap:10px;color:#4f4830;font-size:.8rem;padding-top:4px}
#gd .gdfoot button{min-height:48px;padding:0 20px;border:1px solid #2a2618;border-radius:14px;color:#8a7d52;background:#000;font-size:1rem}
#gd.gdend .gdmid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
#gd .gdbig{font-size:2.2rem;color:#9a8c5c;margin:0}
#gd .gdsm{color:#5c5230;margin:0;max-width:18rem}

#upd{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:8px;width:min(400px,calc(100% - 24px));box-sizing:border-box;padding:10px 12px;border-radius:16px;background:#0B3D38;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.3)}
#upd span{flex:1;display:flex;flex-direction:column}
#upd small{opacity:.8;font-size:.82rem}
#upd button{min-height:40px;padding:0 12px;border-radius:12px;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
#upd button[data-u=go]{background:#C9A227;color:#1b1b1b;border-color:transparent;font-weight:700}

/* Pure black (OLED) */
:root[data-oled]{--bg:#000;--surface:#000;--soft:#070b0b;--line:#2c3b3a;--track:#2c3b3a;--shadow:none}
:root[data-oled] body,:root[data-oled] main{background:#000}
:root[data-oled] section,:root[data-oled] .card{border-color:var(--line)}
:root[data-oled] #tabs{background:#000;border:1px solid var(--line)}
/* Simple mode */
.htile[data-go="dhikr"]{display:none}
html[data-clean] .htile[data-go="dhikr"]{display:flex}
html[data-clean] .htile:not([data-go="qibla"]):not([data-go="dhikr"]){display:none!important}
html[data-clean] #tabs button[data-tab="prog"]{display:none!important}

/* Today's worship group: prominent card with progress */
.wgrp{margin:6px 0 12px}
.wgrp button{background:linear-gradient(135deg,#0B5D55,#0A3F4C);color:#fff;border:0;border-radius:22px;padding:16px 18px;min-height:78px;box-shadow:var(--shadow)}
.wgrp .wgt b{color:#fff;font-size:1.3rem}
.wgrp .wgt small{color:rgba(255,255,255,.82);font-size:.88rem}
.wgrp .wgi{font-size:1.9rem;background:rgba(255,255,255,.14);border-radius:16px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;flex:none}
.wgrp .wgp{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.2);margin-top:8px;overflow:hidden}
.wgrp .wgp i{display:block;height:100%;width:0;background:#E3B04B;border-radius:6px;transition:width .4s}
.wgrp .wgc{border-color:#fff}
:root[data-oled] .wgrp button{border:1px solid var(--line)}
section.wgrp{background:none!important;border:0!important;padding:0!important;box-shadow:none!important}

/* Daily Ibadah group: crisp colours in dark and Pure black */
:root[data-theme="dark"] .wgrp button{background:linear-gradient(135deg,#14877B,#0F5F70)!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:none;color:#fff}
:root[data-theme="dark"] .wgrp .wgt b,:root[data-theme="dark"] .wgrp .wgt small{color:#fff!important;text-shadow:none}
:root[data-theme="dark"] .wgrp .wgi{background:rgba(255,255,255,.18)}
:root[data-theme="dark"] .wgrp .wgp{background:rgba(255,255,255,.28)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wgrp button{background:linear-gradient(135deg,#14877B,#0F5F70)!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:none;color:#fff}}

/* v26: worship cards - proper colour strip on top, and plain (unrotated) emoji icons */
#cFard{border-top-color:var(--accent)!important}
#cSun{border-top-color:#7A5BC0!important}
#cWitr{border-top-color:#B8841B!important}
#cAdh{border-top-color:#2F78D0!important}
#cQ{border-top-color:#3E9442!important}
#cRam{border-top-color:#B98215!important}
#cFard h2::before,#cSun h2::before,#cWitr h2::before,#cAdh h2::before,#cQ h2::before,#cRam h2::before{width:auto;height:auto;background:none;transform:none;border-radius:0;font-size:1.25rem;line-height:1;margin-right:10px;vertical-align:middle}

/* v30: "x of 15 done" shown first on the Daily Ibadah button */
.wgrp .wgtop{display:inline-block;align-self:flex-start;margin-bottom:4px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.2);color:#fff;font-weight:800;font-size:.85rem}