/* 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:#1e1e1e;--ink:#e8e4dc;--brown:#d9b97a;--brown2:#f0d49b;--muted:#a3a3a3;--line:#333333;--edge:#474747;--accent:#b8955a;--hover:#2d2d2d;--card:#252526;--btn:#b8955a;--btn2:#d9b97a;--btn-ink:#1e1e1e;--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)}
.views{display:flex;justify-content:center;margin:0 0 1rem}
.views button{font:inherit;font-size:1.1rem;line-height:1.8;padding:.2rem 1.2rem;border:1px solid var(--accent);background:var(--card);color:var(--brown);cursor:pointer}
.views button:first-child{border-radius:0 2rem 2rem 0}
.views button:last-child{border-radius:2rem 0 0 2rem;border-right:0}
.views button:hover,.views button:focus-visible{background:var(--hover)}
.views button[aria-pressed=true]{background:var(--btn);color:var(--btn-ink);font-weight:700}
:root[data-view=science] .v-author,:root:not([data-view=science]) .v-science{display:none!important}
.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 .tbl{border-collapse:collapse;margin:1em auto;font-size:.9em}
.text .tbl td,.text .tbl th{border:1px solid var(--line);padding:.15em .6em;text-align:center}
.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}
}
.text .verses{color:var(--quran);border-inline-start:3px solid var(--accent);padding-inline-start:.7em;margin-top:1.1em}
.text .basmala{text-align:center;color:var(--quran)}
.text .ref{color:var(--brown);font-weight:700}
.text .n{font-size:.85em}
h2 a{color:inherit;text-decoration:none}
h2 a:hover,h2 a:focus{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
/* kind groups (كتب / مقالات / فتاوى وفوائد) under each author */
.group h3.kind{font-size:1.15rem;color:var(--btn-ink);background:var(--accent);display:inline-block;padding:0 .9rem;border-radius:2rem;margin:1.2rem 0 .3rem;line-height:1.9}
.group h3.kind span{opacity:.8;font-weight:400}
.group.top h3.kind{font-size:1.35rem;margin-top:1.6rem}

/* footnote pop-ups (notes.js) */
.nref{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding:0 .3em;margin:0 .15em;border-radius:1em;border:1px solid var(--edge);background:var(--hover);color:var(--brown);font:700 .68em/1 "Droid Arabic Naskh",serif;vertical-align:.55em;cursor:pointer}
.nref:hover,.nref:focus-visible,.nref[aria-expanded=true]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.note-pop{position:absolute;z-index:10;width:min(34rem,calc(100vw - 16px));background:var(--card);color:var(--ink);border:1px solid var(--edge);border-radius:.7rem;box-shadow:0 6px 24px rgba(0,0,0,.18);padding:.7rem 1rem .8rem 2.4rem;font-size:1.4rem;line-height:2}
.note-pop::before{content:"";position:absolute;top:-7px;left:calc(var(--ax,50%) - 7px);width:12px;height:12px;background:var(--card);border-left:1px solid var(--edge);border-top:1px solid var(--edge);transform:rotate(45deg)}
.note-pop.up::before{top:auto;bottom:-7px;transform:rotate(225deg)}
.note-pop .x{position:absolute;top:.35rem;left:.4rem;width:1.9rem;height:1.9rem;border:0;border-radius:50%;background:none;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer}
.note-pop .x:hover,.note-pop .x:focus-visible{background:var(--hover);color:var(--ink)}
.note-pop .body{max-height:55vh;overflow:auto}
.note-pop .n{color:var(--brown);font-weight:700}

/* «إبلاغ عن خطأ» (report.js) */
.report{margin:3rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line);text-align:center}
.report button{font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer}
.report form{text-align:start}
.report textarea{width:100%;font:inherit;font-size:1.15rem;line-height:1.9;padding:.5rem .8rem;border:1px solid var(--edge);border-radius:.5rem;background:var(--card);color:inherit;resize:vertical}
.report textarea:focus{outline:2px solid var(--accent);outline-offset:0}
.report .row{display:flex;gap:.6rem;justify-content:center;margin-top:.6rem}
.report .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.report .msg{margin:.8rem 0 0;color:var(--muted)}
.report .fail{color:#b3261e}

/* ===== paper look (everyone; Bilal's browsers keep the classic look above through ?look=classic, see theme.js) =====
   Like the المقالات الواضحات videos: white page in a pink-and-red double frame, Amiri text, Thuluth titles. */
@font-face{font-family:"Amiri";src:url(fonts/Amiri-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Amiri";src:url(fonts/Amiri-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Thuluth";src:url(fonts/ThuluthDecorated.woff2) format("woff2");font-display:swap}
:root:not([data-look=classic]){--bg:#000;--page:#fff;--ink:#1b1b1b;--brown:#a3222b;--brown2:#7d1820;--muted:#5c5552;--line:#f0d6d4;--edge:#e2a19f;--accent:#a3222b;--hover:#fbf1f0;--card:#fff;--btn:#a3222b;--btn2:#7d1820;--btn-ink:#fff;--quran:#2c6b45}
:root[data-theme=dark]:not([data-look=classic]){--bg:#081120;--page:#0f1b2d;--ink:#f2e8d5;--brown:#f2a097;--brown2:#f7c0b9;--muted:#b3aa9c;--line:#2a3550;--edge:#9e4a4b;--accent:#f2a097;--hover:#1f2234;--card:#0f1b2d;--btn:#f2a097;--btn2:#f7c0b9;--btn-ink:#0f1b2d;--quran:#a9dbb8}
:root:not([data-look=classic]) body{font-family:"Amiri","Droid Arabic Naskh",serif;line-height:2}
:root:not([data-look=classic]) main{position:relative;max-width:920px;margin:1.2rem auto;padding:2.6rem 2.8rem 3.2rem;background:var(--page)}
:root:not([data-look=classic]) main::before{content:"";position:absolute;inset:14px;border:7px solid var(--edge);box-shadow:inset 0 0 0 5px var(--page),inset 0 0 0 7px var(--accent);pointer-events:none}
:root:not([data-look=classic]) h1{font-family:"Thuluth","Amiri",serif;font-weight:400;color:var(--accent);font-size:3.6rem;line-height:1.7;margin:.6rem 0 1.4rem}
:root:not([data-look=classic]) .read h1{font-size:3rem;line-height:1.8;margin:.8rem 0 .4rem;color:var(--accent)}
:root:not([data-look=classic]) h2{font-family:"Thuluth","Amiri",serif;font-weight:400;text-align:center;font-size:2.2rem;line-height:1.9;color:var(--accent);border-bottom:1px solid var(--edge)}
:root:not([data-look=classic]) .text h2{font-family:inherit;font-weight:700;text-align:start;font-size:1.15em;line-height:inherit;border:0}
:root:not([data-look=classic]) .text h2.basmala{text-align:center}
:root:not([data-look=classic]) .home{font-family:"Thuluth","Amiri",serif;font-weight:400;font-size:1.7rem;line-height:1.6;color:var(--accent);margin:.3rem .6rem 0 0}
:root:not([data-look=classic]) #theme{top:0;background:var(--page);color:var(--accent)}
:root:not([data-look=classic]) .bar{background:var(--page)}
:root:not([data-look=classic]) h3 a:hover,:root:not([data-look=classic]) h3 a:focus{color:var(--accent)}
:root:not([data-look=classic]) .text{font-size:1.3rem;line-height:2.2}
:root:not([data-look=classic]) .text .fn{border-top-color:var(--edge)}
:root:not([data-look=classic]) .note-pop{font-family:"Amiri",serif}
:root:not([data-look=classic]) .nref{font-family:"Amiri",serif}
@media(min-width:700px){:root:not([data-look=classic]) .text{font-size:1.8rem}:root:not([data-look=classic]) .read h1{font-size:3.8rem}}
@media(max-width:560px){
 :root:not([data-look=classic]) main{margin:.35rem;padding:1.9rem 1.4rem 2.2rem}
 :root:not([data-look=classic]) main::before{inset:7px;border-width:4px;box-shadow:inset 0 0 0 3px var(--page),inset 0 0 0 4px var(--accent)}
 :root:not([data-look=classic]) h1{font-size:2.8rem}
 :root:not([data-look=classic]) .read h1{font-size:2.4rem}
 :root:not([data-look=classic]) h2{font-size:1.8rem}
}