/* Look of index.html (hand-edited; build.py only links it). Copied from site-harakat-books. */
@font-face{font-family:"Droid Arabic Naskh";src:url(fonts/DroidNaskh-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Droid Arabic Naskh";src:url(fonts/DroidNaskh-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{color-scheme:light;--bg:#fbf8f1;--ink:#1d1d1b;--brown:#5a4420;--brown2:#3f2f13;--muted:#6b6556;--line:#e3dac6;--edge:#c9b88f;--accent:#8a6d3b;--hover:#f1e8d4;--card:#fff;--btn:#5a4420;--btn2:#3f2f13;--btn-ink:#fff;--quran:#2c6b45}
:root[data-theme=dark]{color-scheme:dark;--bg:#16130e;--ink:#ece4d4;--brown:#d9b97a;--brown2:#f0d49b;--muted:#a59b88;--line:#3a3226;--edge:#5c4d33;--accent:#b8955a;--hover:#2b2419;--card:#211c15;--btn:#b8955a;--btn2:#d9b97a;--btn-ink:#16130e;--quran:#a9dbb8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Droid Arabic Naskh",serif;font-size:1.25rem;line-height:2.1}
main{max-width:820px;margin:0 auto;padding:1.5rem 1rem 4rem}
header{position:relative}
#theme{position:absolute;top:.2rem;left:0;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--edge);background:var(--card);color:var(--brown);cursor:pointer;display:grid;place-items:center;padding:0}
#theme:hover,#theme:focus-visible{background:var(--hover)}
#theme svg{width:1.3rem;height:1.3rem}
#theme .sun,:root[data-theme=dark] #theme .moon{display:none}
:root[data-theme=dark] #theme .sun{display:block}
h1{text-align:center;font-size:2.4rem;margin:1.5rem 0 2rem}
h2{font-size:1.6rem;margin:2.5rem 0 .8rem;padding-bottom:.3rem;border-bottom:2px solid var(--accent);color:var(--brown)}
ul{list-style:none;margin:0;padding:0}
[hidden]{display:none!important}
.btn{flex:none;background:var(--btn);color:var(--btn-ink);text-decoration:none;padding:.5rem 1.2rem;border-radius:.5rem;font-weight:700;font-size:1.1rem;line-height:1.8}
.btn:hover,.btn:focus{background:var(--btn2)}
.btn.light{background:var(--card);color:var(--brown);border:1px solid var(--edge)}
.btn.light:hover,.btn.light:focus{background:var(--hover)}
.src{color:var(--brown)}
.src:hover,.src:focus{color:var(--brown2)}

/* list page */
.book{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
h3{margin:0;font-size:1.3rem;font-weight:700;line-height:2}
h3 a{color:inherit;text-decoration:none}
h3 a:hover,h3 a:focus{color:var(--brown);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
.meta{color:var(--muted);font-size:1.05rem}
nav.authors{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 0 1rem}
nav.authors a{border:1px solid var(--edge);border-radius:2rem;padding:.2rem .9rem;color:var(--brown);text-decoration:none;font-size:1.05rem;background:var(--card)}
nav.authors a:hover,nav.authors a:focus{background:var(--hover)}
nav.authors span{color:var(--muted)}
.bar{position:sticky;top:0;z-index:5;background:var(--bg);padding:.6rem 0;border-bottom:1px solid var(--line)}
.bar input{width:100%;font:inherit;font-size:1.15rem;padding:.4rem .9rem;border:1px solid var(--edge);border-radius:.5rem;background:var(--card);color:inherit}
.bar input:focus{outline:2px solid var(--accent);outline-offset:0}
section{scroll-margin-top:4.5rem}
#none{text-align:center;color:var(--muted);margin:2rem 0}

h3 a{color:inherit;text-decoration:none}
.count{text-align:center;color:var(--muted);margin:0 0 1rem}
section .count{text-align:start;margin:0 0 .5rem;font-size:1.05rem}
.tag{flex:none;border-radius:2rem;padding:.1rem .9rem;font-size:1rem;font-weight:700;text-decoration:none;white-space:nowrap}
.tag.ok{background:#2c6b45;color:#fff}
a.tag.ok:hover,a.tag.ok:focus{background:#1f4f32}
.tag.no{border:1px solid var(--edge);color:var(--muted)}
:root[data-theme=dark] .tag.ok{background:#a9dbb8;color:#16130e}
.filter{display:flex;gap:.4rem;justify-content:center;margin-top:.5rem}
.filter button{font:inherit;font-size:1rem;border:1px solid var(--edge);border-radius:2rem;padding:.1rem .9rem;background:var(--card);color:var(--brown);cursor:pointer}
.filter button[aria-pressed=true]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
@media(max-width:560px){
 body{font-size:1.2rem}
 h1{font-size:2rem}
 .book{flex-direction:column;align-items:stretch;gap:.4rem}
 .tag{align-self:flex-start}
}