:root{--bg:#fbfaf7;--fg:#24221f;--mute:#6f6a62;--line:#e4dfd5;--side:#f3efe7;--card:#fff;--acc:#7a4b12;--acc2:#f6ead6;--hl:#fbe7c0;--fs:1.05rem;--bar:3.1rem;color-scheme:light}
:root[data-theme=dark]{--bg:#15171a;--fg:#e2dfda;--mute:#9b968e;--line:#2c3035;--side:#1c1f23;--card:#1d2024;--acc:#e0b56f;--acc2:#2e281f;--hl:#4a3a1f;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#15171a;--fg:#e2dfda;--mute:#9b968e;--line:#2c3035;--side:#1c1f23;--card:#1d2024;--acc:#e0b56f;--acc2:#2e281f;--hl:#4a3a1f;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--bar) + 3.2rem);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs)/1.72 Literata,Georgia,serif}
a{color:var(--acc)}
h1,h2,h3{line-height:1.3;font-weight:600}
[lang=ar],.ar,blockquote.ar{font-family:Amiri,"Noto Naskh Arabic","Traditional Arabic",serif}
button,select,input{font:inherit;font-size:.88rem;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:.45rem;padding:.3rem .55rem}
button{cursor:pointer}button:hover,select:hover{border-color:var(--acc)}
select{max-width:13rem;min-width:0;text-overflow:ellipsis}

/* top bar */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.45rem;height:var(--bar);padding:0 .75rem;background:var(--bg);border-bottom:1px solid var(--line)}
.brand{font-weight:600;text-decoration:none;color:var(--fg);margin-right:.4rem;white-space:nowrap}
.tools{margin-left:auto;display:flex;gap:.3rem;flex:none}
.tools button,.tools .nb{min-width:2.2rem;text-align:center}
.nb{text-decoration:none;border:1px solid var(--line);border-radius:.45rem;padding:.12rem .55rem;color:var(--fg);font-size:.95rem;flex:none}
.progress{position:fixed;top:var(--bar);left:0;right:0;height:2px;z-index:5;pointer-events:none}.progress i{display:block;height:100%;width:0;background:var(--acc)}

/* passage */
.passage{max-width:44rem;margin:0 auto;padding:.5rem 1rem 2rem}
.crumb{margin:1rem 0 0;font-size:.85rem}.crumb a{text-decoration:none}.crumb span{font-size:1.15rem}
.passage h1{margin:.2rem 0 .5rem;font-size:1.7em}
.quran{background:var(--side);border:1px solid var(--line);border-radius:.7rem;padding:1rem 1.2rem;margin:1rem 0 1.5rem}
details.quran>summary{cursor:pointer;font:600 .75rem system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);list-style:none}
details.quran>summary::-webkit-details-marker{display:none}
details.quran>summary::before{content:"▸ "}details.quran[open]>summary::before{content:"▾ "}
details.quran:not([open]){padding:.6rem 1.2rem}
blockquote{margin:1rem 0;padding:0 0 0 1rem;border-left:3px solid var(--line)}
blockquote.ar{border:0;padding:0;margin:1rem 0;text-align:right;font-size:1.45em;line-height:2.1}
blockquote.ar p{margin:0}
.quran blockquote.ar{font-size:1.6em}
.vn{display:inline-block;font-size:.72em;font-family:system-ui,sans-serif;font-weight:600;color:var(--acc);background:var(--acc2);border-radius:.3rem;padding:0 .35rem;margin-right:.3rem;vertical-align:.12em}
.quran .tr{margin:.35rem 0}
.pg{font:500 .62rem system-ui,sans-serif;color:var(--mute);border:1px solid var(--line);border-radius:.25rem;padding:0 .25rem;margin-right:.3rem;vertical-align:.25em}
.footnote{font-size:.85em;color:var(--mute);border-top:1px solid var(--line);margin-top:1.5rem}
.footnote hr{display:none}.footnote ol{padding-left:1.4rem}
.footnote-ref{text-decoration:none;font-size:.75em}
.sec h3{font-size:1.15em;margin:2.2rem 0 .7rem;padding-top:.3rem}
.src{font-size:.82rem;color:var(--mute)}
.lede{color:var(--mute)}
.chips{position:sticky;top:var(--bar);z-index:3;display:flex;gap:.4rem;overflow-x:auto;padding:.55rem 0;background:var(--bg);scrollbar-width:none;border-bottom:1px solid var(--line)}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none;font:500 .78rem/1 system-ui,sans-serif;text-decoration:none;color:var(--fg);border:1px solid var(--line);border-radius:99px;padding:.45rem .75rem;white-space:nowrap}
.chips a.on{background:var(--acc);border-color:var(--acc);color:var(--bg)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:3rem 0 4rem}
.pc{display:block;text-decoration:none;color:var(--fg);border:1px solid var(--line);border-radius:.6rem;padding:.7rem .9rem;background:var(--card);font-size:.92rem;line-height:1.4}
.pc small{display:block;color:var(--acc);font:600 .72rem system-ui,sans-serif;margin-bottom:.2rem}
.pager a:last-child{text-align:right}

/* sūrah header */
.shead{text-align:center;margin:1.5rem 0 2rem}
.sn{font:600 .78rem system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.sar{font-size:2.6rem;line-height:1.6}
.shead h1{margin:.1rem 0 .5rem;font-size:1.5rem}.shead .en{color:var(--mute);font-weight:400}

/* home, overview, topics, search */
.home,.overview{max-width:62rem;margin:0 auto;padding:1rem 1rem 5rem}
.home h1{margin:1.2rem 0 1rem}
.hero{text-align:center;padding:1.5rem 0 1rem}
.hero h1{font-size:2rem;margin:.5rem 0 .2rem}.hero h1 span{display:block;font-size:1.4em;font-weight:400;color:var(--acc)}
.hero .lede{margin:0 0 1.2rem}.hero .links{font-size:.92rem}
.sbox{display:flex;gap:.4rem;max-width:34rem;margin:0 auto}
.sbox input{flex:1;min-width:0;font-size:1rem;padding:.6rem .8rem}
.sbox button{background:var(--acc);border-color:var(--acc);color:var(--bg);font-weight:600;padding:.5rem 1rem}
.filter{width:100%;max-width:24rem;margin:0 0 1rem;padding:.5rem .7rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.6rem}
.card{display:flex;align-items:center;gap:.75rem;padding:.65rem .8rem;border:1px solid var(--line);border-radius:.6rem;background:var(--card);text-decoration:none;color:var(--fg)}
.card:hover{border-color:var(--acc)}
.num{flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:.5rem;background:var(--acc2);color:var(--acc);font:600 .8rem system-ui,sans-serif}
.card .nm{flex:1;min-width:0;line-height:1.3}.card small{display:block;color:var(--mute);font-size:.78rem}
.card .ar{font-size:1.35rem;flex:none}
[data-list] [hidden]{display:none}
#continue a{display:block;margin:0 0 1rem;padding:.7rem .9rem;border-radius:.6rem;background:var(--acc2);text-decoration:none;color:var(--fg)}
#continue small{display:block;color:var(--acc);font:600 .72rem system-ui,sans-serif}
.overview{max-width:46rem}
.plist{list-style:none;padding:0;margin:0}
.plist a{display:block;padding:.8rem 0;border-top:1px solid var(--line);text-decoration:none;color:var(--fg);line-height:1.45}
.plist b{color:var(--acc)}.plist .snip{display:block;font-size:.92rem;margin:.15rem 0}
.plist .tags{display:block;font:.74rem system-ui,sans-serif;color:var(--mute)}
.topics{list-style:none;padding:0;columns:2 22rem;column-gap:2rem}
.topics li{break-inside:avoid;padding:.35rem 0;border-bottom:1px solid var(--line);line-height:1.35}
.topics small{display:block;color:var(--mute);font:.74rem system-ui,sans-serif}
.topics a{text-decoration:none;color:var(--fg)}.topics a:hover{color:var(--acc)}
.searchpage{max-width:46rem}
#search{--pagefind-ui-scale:.85;--pagefind-ui-primary:var(--acc);--pagefind-ui-text:var(--fg);--pagefind-ui-background:var(--bg);--pagefind-ui-border:var(--line);--pagefind-ui-tag:var(--acc2);--pagefind-ui-border-width:1px;--pagefind-ui-border-radius:.5rem;--pagefind-ui-font:Literata,Georgia,serif}
#search mark{background:var(--hl);color:inherit;border-radius:.15rem}

@media (max-width:56rem){
 .brand{font-size:0;margin:0}.brand::before{content:"⌂";font-size:1.25rem;color:var(--acc)}
 select{max-width:9.5rem}
 .bar{gap:.3rem;padding:0 .5rem}
 .hero h1{font-size:1.6rem}
}
@media (max-width:30rem){.tools [data-act^=fs]{display:none}select{max-width:7.6rem}}