/* خِزانة — the book reader. Loaded only on /read pages, after style.css.
   Reading settings live on <html> as data attributes (set before first paint by the inline script). */

html:not(.js) .js-only{display:none!important}
body.rd main{padding-bottom:0}
.rwrap{padding-bottom:28px}

/* ---- text: size, spacing, font, width ---- */
.frame{max-width:38em;transition:max-width .15s}
html[data-rw="n"] .frame{max-width:30em}
html[data-rw="w"] .frame{max-width:52em}
html[data-rlh="s"] .frame{line-height:1.85}
html[data-rlh="l"] .frame{line-height:2.5}
html[data-rfont="amiri"] .frame{font-family:"Amiri","Noto Naskh Arabic",serif}
.frame .txt{overflow-wrap:break-word}
/* text with harakat hidden waits for reader.js to strip them; shows anyway after 1.5 s if the script fails */
html[data-harakat="off"] .frame .txt:not(.hx){visibility:hidden;animation:khz-show 0s 1.5s forwards}
@keyframes khz-show{to{visibility:visible}}

/* headings from "### | title" lines */
.frame .ph{font-family:inherit;font-weight:700;line-height:1.6;margin:1em 0 .6em}
.frame .ph.l1{font-size:1.32em;color:var(--gold-text);text-align:center;width:fit-content;max-width:100%;margin-inline:auto;padding:0 .6em .2em;border-bottom:1px solid var(--rule)}
.frame .ph.l2{font-size:1.16em;color:var(--gold-text);text-align:center}
.frame .ph.l3{font-size:1.04em;color:var(--ink);text-align:start}
.frame .txt>.ph:first-child{margin-top:0}

/* footnote marks and notes */
.frame .fr{font:600 .6em/0 var(--f-ui);vertical-align:super;color:var(--link);padding:.5em .12em;margin:0 .04em;border-radius:3px;text-decoration:none;cursor:pointer;white-space:nowrap}
.frame .fr:hover{background:var(--sheet)}
.frame .fr[aria-expanded="true"]{background:var(--mark);color:var(--ink)}
.frame .notes p{margin:0 0 .35em}
.frame .notes .fn:target{background:var(--mark)}
html[data-notes="off"] .frame .notes,html[data-notes="off"] .frame .fr{display:none}

.fnpop{position:absolute;z-index:70;width:max-content;max-width:min(380px,calc(100vw - 24px));max-height:45vh;overflow:auto;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-top:2px solid var(--btn);border-radius:4px;box-shadow:0 6px 24px rgba(0,0,0,.16);padding:10px 14px;font-family:var(--f-book);font-size:calc(var(--rs) * .82);line-height:1.95}
.fnpop p{margin:0}
.fnpop:focus{outline:0}
@media (max-width:700px){
  .fnpop{position:fixed;inset-inline:0;bottom:0;top:auto!important;left:0!important;width:auto;max-width:none;border-radius:8px 8px 0 0;border-inline:0;border-bottom:0;padding:14px 18px calc(18px + env(safe-area-inset-bottom))}
}

/* ---- tools above the page ---- */
.tools{gap:6px}
.tools .iconbtn{min-height:38px;gap:6px}
.tocbtn{display:none}
.iconbtn[aria-pressed="true"]{color:var(--btn);border-color:var(--btn)}
.iconbtn[aria-pressed="true"] .ic{fill:currentColor}
@media (max-width:600px){
  .tools .lbl,.tocbtn span,.jump button{display:none}
  .tools{gap:4px}
  .tools .iconbtn{padding:6px 5px}
  .jump{gap:4px}
  .jump input{width:56px}
  .jump select{padding-inline:4px}
}

/* ---- contents: sidebar on wide screens, drawer on phones and in reading mode ---- */
.rtoc .dhead{display:none}
.dsearch{margin:4px 0 10px;gap:0;border:1px solid var(--rule);border-radius:4px;background:var(--sheet)}
.dsearch input{border:0!important;background:transparent!important;font-size:14px!important}
.dsearch .iconbtn{border:0}
.dtabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.dtabs button{flex:1;border:0;background:none;color:var(--ink-2);font:600 14px var(--f-ui);padding:6px 4px;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.dtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--btn)}
.rtoc li{scroll-margin-block:30vh}
.rtoc li.on>a{background:var(--sheet);border-radius:3px;padding-inline:6px;margin-inline:-6px}
.bmlist ul{list-style:none;margin:0;padding:0}
.bmlist li{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--rule-2)}
.bmlist li a{flex:1;padding:7px 0;color:var(--ink);min-width:0}
.bmlist li a small{display:block;color:var(--ink-2);font-size:12.5px}
.bmlist .iconbtn{border:0;padding:4px}
.bmlist p{color:var(--ink-2);font-size:14px}

@media (max-width:860px){ .tocbtn{display:inline-flex} }
html.reading .tocbtn{display:inline-flex}

@media (max-width:860px){
  .reader .rtoc{position:fixed;z-index:60;inset-block:0;inset-inline-start:0;width:min(360px,88vw);max-height:none;margin:0;border:0;border-radius:0;
    background:var(--paper);box-shadow:0 0 0 1px var(--rule),0 0 30px rgba(0,0,0,.18);padding:0 14px 20px;overflow:auto;overscroll-behavior:contain;
    transform:translateX(105%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s}
  .reader .rtoc ul{max-height:none;overflow:visible}
  .reader .rtoc .dhead{display:flex}
}
html.reading .reader .rtoc{position:fixed;z-index:60;inset-block:0;inset-inline-start:0;width:min(380px,88vw);max-height:none;margin:0;border:0;border-radius:0;
  background:var(--paper);box-shadow:0 0 0 1px var(--rule),0 0 30px rgba(0,0,0,.18);padding:0 14px 20px;overflow:auto;overscroll-behavior:contain;
  transform:translateX(105%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s}
html.reading .reader .rtoc .dhead{display:flex}
.rtoc .dhead{position:sticky;top:0;z-index:1;background:var(--paper);align-items:center;justify-content:space-between;gap:8px;padding:12px 0 8px;font-family:var(--f-book);font-size:17px;color:var(--link)}
.rtoc .dhead b{font-weight:700;line-height:1.4}
.reader .rtoc:target,html.toc-open .reader .rtoc{transform:none;visibility:visible;transition:transform .22s ease}
@media (min-width:861px){ html:not(.reading) .reader .rtoc:target{transform:none} }
.scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.32)}
html.reading.toc-open .reader{grid-template-columns:minmax(0,1fr)}

/* ---- bottom bar: previous / where you are / next ---- */
.rbar{position:sticky;bottom:0;z-index:50;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;
  background:var(--paper);border-top:1px solid var(--rule);padding:6px max(12px,calc((100% - 1120px) / 2 + 16px)) calc(6px + env(safe-area-inset-bottom))}
.rbar .pbtn{min-height:44px;min-width:44px;justify-content:center;gap:4px;font:15px var(--f-ui);color:var(--ink)}
.rbar .pbtn[aria-disabled="true"]{opacity:.35;pointer-events:none}
.rbar-c{display:flex;flex-direction:column;align-items:center;gap:0;min-width:0;max-width:520px;width:100%;justify-self:center;margin:0}
.rbar-c label{font:14px var(--f-ui);color:var(--ink-2);white-space:nowrap;line-height:1.5}
.rbar-c input[type=range]{width:100%;margin:2px 0 0;height:24px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.rbar-c input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--rule);border-radius:2px}
.rbar-c input[type=range]::-moz-range-track{height:3px;background:var(--rule);border-radius:2px}
.rbar-c input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7.5px;border-radius:50%;background:var(--btn);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--btn)}
.rbar-c input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--btn);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--btn)}
.rbar-c input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:480px){ .rbar .pbtn span{display:none} .rbar{gap:6px} }

/* ---- reading mode: only the text ---- */
.rtop{display:none}
html.reading body{background:var(--page)}
html.reading .top,html.reading footer,html.reading .crumbs,html.reading .tools,html.reading .rwrap>.note,html.reading .rmain>.note{display:none}
html.reading .reader{grid-template-columns:minmax(0,1fr);margin-top:0}
html.reading .rwrap{padding-top:calc(56px + env(safe-area-inset-top));padding-bottom:72px}
html.reading .frame{border:0;background:transparent;padding-block:12px 24px}
html.reading .rtop{display:flex;position:fixed;z-index:52;inset-inline:0;top:0;align-items:center;gap:6px;background:var(--paper);border-bottom:1px solid var(--rule);
  padding:calc(6px + env(safe-area-inset-top)) max(10px,calc((100% - 1120px) / 2 + 16px)) 6px;transform:translateY(-110%);transition:transform .2s ease}
.rtop .iconbtn{border:0;min-height:40px;min-width:40px;justify-content:center}
.rtop-t{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;overflow:hidden;white-space:nowrap}
.rtop-t b{font:700 16px var(--f-book);color:var(--link);overflow:hidden;text-overflow:ellipsis}
.rtop-t span{font:13px var(--f-ui);color:var(--ink-2)}
html.reading .rbar{position:fixed;inset-inline:0;bottom:0;transform:translateY(110%);transition:transform .2s ease}
html.reading.bars .rtop,html.reading.bars .rbar,html.reading .rtop:focus-within,html.reading .rbar:focus-within{transform:none}

/* ---- Aa settings ---- */
.aa{position:fixed;z-index:70;top:72px;inset-inline-end:max(16px,calc((100% - 1120px) / 2 + 16px));width:min(340px,calc(100vw - 24px));
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.16);padding:6px 16px 14px;font:14px var(--f-ui)}
html.reading .aa{top:calc(60px + env(safe-area-inset-top))}
.aa-h{display:flex;align-items:center;justify-content:space-between;padding:6px 0 8px;border-bottom:1px solid var(--rule-2);margin-bottom:4px}
.aa-h .iconbtn{border:0}
.aa-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0}
.aa-row>span{color:var(--ink-2);white-space:nowrap}
.seg{display:flex;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.seg button,.seg output{border:0;background:var(--paper);color:var(--ink);font:14px var(--f-ui);padding:6px 11px;min-height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.seg>*+*{border-inline-start:1px solid var(--rule)!important}
.seg output{cursor:default;min-width:46px;color:var(--ink-2)}
.seg button[aria-checked="true"]{background:var(--btn);color:var(--btn-ink)}
.seg .f-naskh{font-family:"Noto Naskh Arabic",serif;font-size:15px}
.seg .f-amiri{font-family:"Amiri",serif;font-size:16px}
.seg .t-light:not([aria-checked="true"]){background:#fff;color:#262626}
.seg .t-sepia:not([aria-checked="true"]){background:#f4ecd8;color:#3d3122}
.seg .t-dark:not([aria-checked="true"]){background:#1e1d1b;color:#e8e5df}
@media (max-width:600px){
  .aa{top:auto!important;bottom:0;inset-inline:0;width:auto;border-radius:10px 10px 0 0;border-inline:0;border-bottom:0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* ---- page turn ---- */
.frame.turn-out-next{transform:translateX(24px);opacity:0}
.frame.turn-out-prev{transform:translateX(-24px);opacity:0}
.frame.turn-in-next{transform:translateX(-24px);opacity:0;transition:none}
.frame.turn-in-prev{transform:translateX(24px);opacity:0;transition:none}
.frame{transition:transform .14s ease,opacity .14s ease}
.frame[aria-busy="true"]{opacity:.55}

@media (prefers-reduced-motion:reduce){
  .frame,.reader .rtoc,html.reading .reader .rtoc,html.reading .rtop,html.reading .rbar,.toast{transition:none!important}
  .frame.turn-out-next,.frame.turn-out-prev,.frame.turn-in-next,.frame.turn-in-prev{transform:none;opacity:1}
}
@media print{
  .rbar,.rtop,.tools,.rtoc,.aa,.fnpop,.scrim{display:none!important}
  .reader{display:block}
}