/* Shared look for index.html and the book pages (hand-edited; sync.py only links it). */
@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}

/* book page */
.home{display:inline-block;color:var(--brown);text-decoration:none;font-weight:700;font-size:1.15rem;padding:.3rem 0}
.home:hover,.home:focus{text-decoration:underline}
.read h1{font-size:2.1rem;line-height:1.8;margin:1.5rem 0 .3rem;color:var(--brown)}
.read .sub{text-align:center;color:var(--muted);margin:0 0 1.2rem}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;align-items:center;margin:0 0 1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.actions .meta{width:100%;text-align:center}
.text{font-size:1.35rem;line-height:2.25}
.text p{margin:.5em 0;text-align:justify}
.text h2{font-size:1.25em;margin:1.4em 0 .5em;border-bottom-width:1px}
.text h2.basmala{text-align:center;border:0}
.text b{color:var(--brown)}
.text .quran{color:var(--quran)}
.text .fn{color:var(--muted);font-size:.82em;border-top:1px solid var(--line);margin:1em 0 1.4em;padding-top:.4em}
.text .fn p{margin:.2em 0}
.text .sig{text-align:left;color:var(--brown)}
/* large reading text on laptops; phones keep their size */
@media(min-width:700px){.text{font-size:2rem}.read h1{font-size:2.6rem}}

@media(max-width:560px){
 body{font-size:1.2rem}
 h1{font-size:2rem}
 .book{flex-direction:column;align-items:stretch;gap:.4rem}
 .btn{text-align:center;padding:.6rem 1rem}
}