/* ============================================================================
   تأويلات أهل السنة — reader
   A codex, not an app: parchment leaves bound in dark leather, gold hairlines,
   ink that stays legible for hours. Everything RTL, everything paired.
   ========================================================================= */

@font-face { font-family:'Amiri'; src:url('fonts/Amiri-Regular.ttf') format('truetype');
             font-weight:400; font-display:swap; }
@font-face { font-family:'Amiri'; src:url('fonts/Amiri-Bold.ttf') format('truetype');
             font-weight:700; font-display:swap; }
@font-face { font-family:'Amiri Quran'; src:url('fonts/AmiriQuran-Regular.ttf') format('truetype');
             font-weight:400; font-display:swap; }
@font-face { font-family:'Uthman Taha'; src:url('fonts/UthmanTahaNaskh-Regular.ttf') format('truetype');
             font-weight:400; font-display:swap; }
@font-face { font-family:'Uthman Taha'; src:url('fonts/UthmanTahaNaskh-Bold.ttf') format('truetype');
             font-weight:700; font-display:swap; }
@font-face { font-family:'Noto Nastaliq Urdu'; src:url('fonts/NotoNastaliqUrdu-VF.ttf') format('truetype');
             font-weight:400 700; font-display:swap; }
@font-face { font-family:'Scheherazade New'; src:url('fonts/ScheherazadeNew-Regular.ttf') format('truetype');
             font-weight:400; font-display:swap; }

/* ---------------------------------------------------------------- tokens */
:root{
  --ink:#261d12;        --ink-soft:#6b5941;      --ink-faint:#9c8968;
  --leaf:#fbf5e7;       --leaf-2:#f3ead6;        --deck:#e0d3b6;
  --field:#efe6d2;
  --rule:#d3c4a4;       --rule-hard:#b8a479;
  --gold:#9c7726;       --gold-lit:#c9a04a;
  --maroon:#7b1113;     --verd:#136b3c;     --quran:#6d5312;
  --bind:#1d1610;       --bind-2:#2a2016;        --bind-3:#3a2c1e;
  --bind-ink:#e9dcc0;   --bind-soft:#a8977a;
  --sel:#f6e4a8;

  --fs-ar:1;            /* arabic size multiplier, user controlled     */
  --fs-ur:1;            /* urdu size multiplier, separately controlled */
  --pgap:0.75em;        /* paragraph spacing, user controlled          */
  --ur:50%;             /* width of the urdu column, drag controlled   */
  --gut:14px;           /* gutter between the two leaves               */
  --rail:322px;
  --shadow:0 1px 2px rgba(50,35,10,.10), 0 10px 30px -14px rgba(50,35,10,.42);
}
html[data-theme="lamp"]{
  --ink:#e2d5bb;        --ink-soft:#a4947a;      --ink-faint:#7b6e5a;
  --leaf:#1a1611;       --leaf-2:#16130f;        --deck:#2b2419;
  --field:#100d0a;
  --rule:#3b3225;       --rule-hard:#4d4130;
  --gold:#c9a04a;       --gold-lit:#e3bd68;
  --maroon:#dd9a7e;     --verd:#79c79b;     --quran:#d9b25e;
  --bind:#0c0a07;       --bind-2:#15110c;        --bind-3:#241c13;
  --bind-ink:#e2d5bb;   --bind-soft:#8d7f66;
  --sel:#5c4a1c;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; direction:rtl; overflow:hidden;
  background:var(--field);
  color:var(--ink);
  font:400 15px/1.7 'Amiri','Scheherazade New',serif;
  -webkit-font-smoothing:antialiased;
}
/* a whisper of tooth on the field, so the leaves sit on something */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
::selection{background:var(--sel); color:var(--ink);}

/* ============================================================== structure */
/* dvh, with vh for browsers that predate it. On a phone 100vh is the height
   with the address bar hidden, so with it showing the app was taller than the
   screen: the first swipe scrolled the whole document by the difference and
   carried the toolbar off the top, leaving bare text. Desktop Chrome's phone
   mode has no address bar, so it never showed there. dvh follows the bar. */
#app{position:relative; z-index:1; display:flex; height:100vh; height:100dvh;}

/* ------------------------------------------------------------ the binding */
#rail{
  flex:0 0 var(--rail); width:var(--rail); min-width:0;
  display:flex; flex-direction:column; overflow:hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.34), transparent 26px),
    linear-gradient(180deg, var(--bind-2), var(--bind) 60%);
  color:var(--bind-ink);
  border-inline-end:1px solid #000;
  transition:flex-basis .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1);
}
body.rail-closed #rail{flex-basis:0; width:0; border-inline-end-color:transparent;}
#rail > *{min-width:var(--rail);}

.brand{padding:20px 22px 14px; border-bottom:1px solid var(--bind-3); flex:none;}
.brand h1{
  margin:0; font:700 27px/1.35 'Amiri',serif; color:#f2e5c6; letter-spacing:.01em;
}
.brand .sub{
  /* Arabic is the default interface, so the base font is Amiri. The Urdu
     and English interfaces override font-family further down; listing
     Nastaliq first here rendered the Arabic subtitle in the Urdu face. */
  margin-top:3px; font:400 13px/1.6 'Amiri',serif;
  color:var(--bind-soft);
}
.brand .rule{
  height:1px; margin-top:13px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.65;
}

/* -------------------------------------------------------------- searching */
.seek{padding:14px 18px 12px; border-bottom:1px solid var(--bind-3); flex:none;}
.seek-box{position:relative; display:flex; align-items:center;}
.seek-box > svg{
  position:absolute; right:11px; width:15px; height:15px;
  fill:none; stroke:var(--bind-soft); stroke-width:1.7; pointer-events:none;
}
#q{
  width:100%; padding:9px 33px 9px 30px;
  font:400 15px/1.6 'Amiri',serif; color:#f4e9d2;
  background:rgba(0,0,0,.34);
  border:1px solid var(--bind-3); border-radius:3px;
  outline:none; transition:border-color .18s, box-shadow .18s, background .18s;
}
#q::placeholder{color:#7d6f58;}
/* Chrome/Edge/Safari draw their own clear button on type=search — hide it,
   the styled #q-clear below is ours. Without this, two × appear. */
#q::-webkit-search-cancel-button,
#q::-webkit-search-decoration{-webkit-appearance:none; appearance:none;}
#q::-ms-clear{display:none; width:0; height:0;}
#q:focus{border-color:var(--gold); background:rgba(0,0,0,.5);
         box-shadow:0 0 0 3px rgba(156,119,38,.17);}
#q-clear{
  position:absolute; left:6px; width:20px; height:20px; border:0; border-radius:50%;
  background:transparent; color:var(--bind-soft); font-size:15px; line-height:1;
  cursor:pointer; display:none;
}
#q-clear:hover{color:var(--gold-lit);}
body.searching #q-clear{display:block;}

.seek-scope{display:flex; gap:5px; margin-top:9px;}
.seek-scope button{
  flex:1; padding:4px 0; cursor:pointer;
  font:400 12.5px/1.6 'Amiri',serif; color:var(--bind-soft);
  background:transparent; border:1px solid var(--bind-3); border-radius:3px;
  transition:all .16s;
}
.seek-scope button:hover{color:#e7d9ba; border-color:#4a3a26;}
.seek-scope button[aria-pressed="true"]{
  color:#1d1610; background:var(--gold-lit); border-color:var(--gold-lit); font-weight:700;
}
.seek-note{margin-top:8px; font:400 11.5px/1.5 'Amiri',serif; color:#7d6f58; min-height:17px;}
.seek-note b{color:var(--gold-lit); font-weight:400;}

/* -------------------------------------------------------------- the index */
#tree{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:6px 0 40px;}
#tree::-webkit-scrollbar,#hits::-webkit-scrollbar,#scroll::-webkit-scrollbar{width:9px;}
#tree::-webkit-scrollbar-thumb,#hits::-webkit-scrollbar-thumb{background:#3b2f20; border-radius:9px;}
#tree::-webkit-scrollbar-thumb:hover,#hits::-webkit-scrollbar-thumb:hover{background:#54432d;}
#tree::-webkit-scrollbar-track,#hits::-webkit-scrollbar-track{background:transparent;}

.grp{border-bottom:1px solid rgba(58,44,30,.4);}
.caret{flex:0 0 9px; width:9px; height:9px; color:var(--gold);
       transition:transform .22s cubic-bezier(.4,0,.2,1);}
.caret svg{width:9px; height:9px; display:block; fill:currentColor;}
[aria-expanded="true"] > .caret{transform:rotate(-90deg);}

.kids{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.grp[data-open="1"] > .kids{
  grid-template-rows:1fr;
}
.kids-inner{
  min-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .2s ease, transform .26s cubic-bezier(.4,0,.2,1), visibility .28s, padding-bottom .28s;
  visibility:hidden;
  padding-bottom:0;
}
.grp[data-open="1"] > .kids > .kids-inner{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  padding-bottom:5px;
}

.node{
  display:flex; align-items:baseline; gap:8px; width:100%;
  padding:6px 34px 6px 16px; text-align:start; cursor:pointer;
  background:transparent; border:0; border-inline-start:2px solid transparent;
  color:var(--bind-soft); font:400 14.5px/1.75 'Amiri',serif;
  transition:background .14s, color .14s, border-color .14s;
}
.node:hover{background:rgba(255,255,255,.05); color:#efe2c4;}
.node .ttl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.node .pg{margin-inline-start:auto; font-size:11px; color:#5f5442; flex:none;}
.node.current{color:#1d1610; background:var(--gold-lit); border-inline-start-color:#5e4715;}
.node.current .pg{color:#4a3813;}

.surah > .row{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:9px 18px 9px 14px; text-align:start; cursor:pointer;
  background:transparent; border:0; border-inline-start:2px solid transparent;
  color:#dcc98f; font:700 16.5px/1.7 'Amiri',serif;
  transition:background .14s, color .14s;
}
.surah > .row:hover{background:rgba(255,255,255,.06); color:#f3e3b6;}
.surah > .row .idx{
  flex:none; width:25px; height:25px; border-radius:50%;
  display:grid; place-items:center;
  font:400 11px/1 'Amiri',serif; color:var(--gold-lit);
  border:1px solid rgba(201,160,74,.4);
}
.surah > .row .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.surah > .row .idx.dot{font-size:13px; border-style:dashed;}
.surah > .row .cnt{margin-inline-start:auto; flex:none;
                   font:400 11px/1 'Amiri',serif; color:#6f624d;}
.grp.active > .row{background:rgba(201,160,74,.14); color:#f7e9bd;}

.ayat{display:flex; flex-wrap:wrap; gap:4px; padding:2px 36px 12px 14px;}
.ayat button{
  min-width:34px; padding:3px 7px; cursor:pointer;
  font:400 12.5px/1.45 'Amiri',serif; color:#b0a084;
  background:rgba(0,0,0,.24); border:1px solid #33291c; border-radius:2px;
  transition:all .14s;
}
.ayat button:hover,.ayat button.current{
  color:#1d1610; background:var(--gold-lit); border-color:var(--gold-lit);
}

/* ------------------------------------------------------------ hit results */
#hits{display:none; flex:1; overflow-y:auto; overscroll-behavior:contain; padding:4px 0 40px;}
body.searching #hits{display:block;}
body.searching #tree{display:none;}
.hit{
  display:block; width:100%; text-align:right; cursor:pointer;
  padding:10px 18px; background:transparent; border:0;
  border-bottom:1px solid rgba(58,44,30,.5); transition:background .14s;
}
.hit:hover{background:rgba(255,255,255,.05);}
.hit.current{background:rgba(201,160,74,.13);}
.hit .where{display:flex; align-items:center; gap:8px;
            font:400 11.5px/1.5 'Amiri',serif; color:var(--gold);}
.hit .where .tag{padding:0 5px; border:1px solid #3a2c1e; border-radius:2px; color:#8a7a5f;
                  flex:none;}
.hit .where .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hit .where .num{margin-inline-start:auto; flex:none;}
/* Brighter than the rest of the rail on purpose: this is the one thing in it
   that is read rather than glanced at. #b6a68a at 12px Nastaliq was asked
   about as "too dim". */
.hit .frag{
  margin-top:4px; color:#e2d6bb; font:400 14px/1.85 'Amiri',serif;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.hit .frag.ur{font-family:'Noto Nastaliq Urdu','Amiri',serif; font-size:13.5px; line-height:2.15;}
.hit mark{background:transparent; color:var(--gold-lit); font-weight:700;}
.empty{padding:26px 20px; color:#7d6f58; font:400 14px/1.9 'Amiri',serif; text-align:center;}

/* =============================================================== the leaf */
#main{flex:1; min-width:0; display:flex; flex-direction:column; position:relative;}

.bar{
  display:flex; align-items:center; gap:8px; flex:none;
  padding:0 14px; height:52px; position:relative; z-index:15;
  background:linear-gradient(180deg,var(--leaf),var(--leaf-2));
  border-bottom:1px solid var(--rule-hard);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
}
html[data-theme="lamp"] .bar{box-shadow:none;}

.ico{
  flex:none; width:33px; height:33px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:3px;
  color:var(--ink-soft); transition:all .16s;
}
.ico:hover{color:var(--ink); background:rgba(156,119,38,.12); border-color:var(--rule);}
.ico svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6;
         stroke-linecap:round; stroke-linejoin:round;}
.ico[aria-pressed="true"]{color:var(--gold); border-color:var(--gold); background:rgba(156,119,38,.14);}


/* the type panel */
.panel{
  position:absolute; top:56px; left:14px; z-index:30; width:300px;
  max-height:calc(100vh - 78px); max-height:calc(100dvh - 78px); overflow-y:auto;
  padding:16px 18px 18px;
  background:var(--leaf); border:1px solid var(--rule-hard); border-radius:4px;
  box-shadow:var(--shadow); display:none;
}
.panel.open{display:block; animation:drop .2s cubic-bezier(.4,0,.2,1);}
@keyframes drop{from{opacity:0; transform:translateY(-7px);} to{opacity:1; transform:none;}}
.panel h2{
  margin:0 0 13px; font:700 15px/1.5 'Amiri',serif; color:var(--ink);
  padding-bottom:8px; border-bottom:1px solid var(--rule);
}
.ctrl{margin-bottom:15px;}
.ctrl label{
  display:flex; justify-content:space-between; align-items:baseline;
  font:400 13.5px/1.7 'Amiri',serif; color:var(--ink-soft); margin-bottom:5px;
}
.ctrl label span{color:inherit;}
.ctrl label .val{color:var(--gold); font-size:12.5px;
                 direction:ltr; unicode-bidi:isolate;}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px;
  background:var(--rule-hard); border-radius:3px; outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--gold); border:2px solid var(--leaf); cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .14s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18);}
.panel .reset{
  width:100%; margin-top:4px; padding:6px; cursor:pointer;
  font:400 13px/1.5 'Amiri',serif; color:var(--ink-soft);
  background:transparent; border:1px dashed var(--rule-hard); border-radius:3px;
}
.panel .reset:hover{color:var(--gold); border-color:var(--gold);}

/* --------------------------------------------------------- the two leaves */
#scroll{
  flex:1; overflow-y:auto; overscroll-behavior:contain; position:relative;
  padding:26px 20px 90px;
}
#scroll::-webkit-scrollbar-thumb{background:var(--rule-hard); border-radius:9px;}
#scroll::-webkit-scrollbar-track{background:transparent;}

/* height is owned by the renderer: an inline min-height until the page has
   been measured once, then whatever the real content needs. Do not add
   content-visibility here — it re-estimates off-screen pages and drags the
   reader away from the page they navigated to. */
/* `direction:ltr` here governs geometry only — each leaf sets its own rtl for
   text. Placement is stated with `order` rather than left to inheritance, so
   the Urdu translation is on the left and the Arabic original on the right no
   matter what direction an ancestor happens to carry. */
.spread{
  display:flex; gap:var(--gut); align-items:stretch; direction:ltr;
  max-width:1800px; margin:0 auto 26px; scroll-margin-top:14px;
}
.spread.lit .leaf{border-color:var(--gold);}

.leaf{
  flex:1 1 auto; min-width:0; position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.5), transparent 120px), var(--leaf);
  border:1px solid var(--deck);
  border-bottom-width:3px; border-left-width:2px; border-radius:2px;
  box-shadow:var(--shadow);
  padding:32px 38px 38px;
  transition:border-color .3s;
}
html[data-theme="lamp"] .leaf{background:var(--leaf);}
.leaf.ur{order:1; flex-basis:var(--ur); direction:rtl;}              /* left  */
.grip   {order:2;}                                                   /* gutter */
.leaf.ar{order:3; flex-basis:calc(100% - var(--ur)); direction:rtl;} /* right */
body.view-ar .leaf.ur, body.view-ar .grip{display:none;}
body.view-ar .leaf.ar{flex-basis:100%; max-width:1080px; margin:0 auto;}
body.view-ur .leaf.ar, body.view-ur .grip{display:none;}
body.view-ur .leaf.ur{flex-basis:100%; max-width:1080px; margin:0 auto;}

.folio{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  padding-bottom:9px; border-bottom:1px solid var(--rule);
  font:400 12px/1 'Amiri',serif; color:var(--ink-faint);
}
.folio .n{
  padding:3px 9px; border:1px solid var(--rule-hard); border-radius:2px;
  color:var(--gold); background:rgba(156,119,38,.07); font-size:12.5px;
}
.folio .ch{
  /* Long chapter names - the study sections run to a full line - must not wrap
     the header or push the language label off the end. min-width:0 is what lets
     a flex item shrink below its content at all. */
  min-width:0; flex:0 1 auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink-soft); font-size:11.5px;
}
.folio .ch:empty{display:none;}
.folio .lang{margin-inline-start:auto; letter-spacing:.08em; font-size:10.5px;
             color:var(--ink-faint); flex:none; padding-inline-start:10px;}

/* ---- arabic body ---- */
.leaf.ar .body{
  font:400 calc(26px * var(--fs-ar))/1.95 'Amiri','Scheherazade New',serif;
  color:var(--ink); text-align:justify;
}
.leaf.ar .body p{margin:0 0 var(--pgap);}
.leaf.ar .body .title{
  display:block; margin:1.15em 0 .5em;
  color:var(--maroon); font-weight:700; font-size:1.06em; text-align:center;
}
.leaf.ar .body .footnote{font-size:.82em; color:var(--ink-soft);}
.leaf.ar .body .punct{color:var(--ink-soft);}

/* ---- urdu body ---- */
.leaf.ur .body{
  font:400 calc(16.5px * var(--fs-ur))/2.35 'Noto Nastaliq Urdu','Amiri',serif;
  color:var(--ink); text-align:justify;
}
.leaf.ur .body p{margin:0 0 calc(var(--pgap) + .25em);}
.leaf.ur .body .title{
  display:block; margin:1.1em 0 .5em;
  color:var(--maroon); font-weight:700; font-size:1.04em; text-align:center;
}
.leaf.ur .body .quran_ayah{
  /* Amiri Quran before Uthman Taha, and the order is the whole point.
     U+06DD ARABIC END OF AYAH encloses the digits that follow it: Amiri
     Quran draws them inside an ornate rosette, which is how a mushaf sets
     an ayah number. Uthman Taha draws the ring empty and leaves the digits
     stranded outside it. */
  font-family:'Amiri Quran','Uthman Taha','Amiri',serif;
  font-size:1.12em; line-height:1.9; color:var(--quran);
  unicode-bidi:isolate; padding:0 3px;
}
.leaf.ur .body .arabic_text{
  font-family:'Uthman Taha','Amiri',serif;
  font-size:1.02em; line-height:1.8; color:var(--maroon); font-weight:700;
  unicode-bidi:isolate; padding:0 3px;
}
.leaf.ur .body .untranslated{
  display:block; margin:.5em 0; padding:6px 12px;
  border-inline-start:3px solid var(--gold); background:rgba(156,119,38,.09);
  font-family:'Uthman Taha','Amiri',serif; font-size:1em; direction:rtl;
}
.leaf .body table{max-width:100%; border-collapse:collapse; margin:.7em auto; font-size:.9em;}
.leaf .body td,.leaf .body th{border:1px solid var(--rule); padding:2px 8px;}
.leaf .body hr{border:0; border-top:1px solid var(--rule); margin:.8em 0;}

/* the gutter clasp — drag to re-apportion the spread */
.grip{
  flex:0 0 var(--gut); align-self:stretch; position:relative; cursor:col-resize;
  touch-action:none;
}
.grip::before{
  content:''; position:absolute; inset:0 calc(50% - .5px);
  background:var(--rule-hard); opacity:.55; transition:opacity .16s, background .16s;
}
.grip::after{
  content:''; position:absolute; top:calc(50% - 21px); left:calc(50% - 3.5px);
  width:7px; height:42px; border-radius:4px;
  background:var(--leaf); border:1px solid var(--rule-hard);
  box-shadow:0 1px 3px rgba(0,0,0,.2); transition:all .16s;
}
.grip:hover::before,body.dragging .grip::before{opacity:1; background:var(--gold);}
.grip:hover::after,body.dragging .grip::after{
  background:var(--gold); border-color:var(--gold); height:56px; top:calc(50% - 28px);
}
body.dragging{cursor:col-resize; user-select:none;}
body.dragging .leaf{pointer-events:none;}

/* search hit marks inside the leaves */
.leaf mark{
  background:rgba(201,160,74,.34); color:inherit;
  border-radius:2px; padding:0 1px; box-shadow:0 0 0 1px rgba(156,119,38,.3);
}

/* the loading state — one breathing letter, nothing more */
#veil{
  position:absolute; inset:52px 0 0; display:grid; place-items:center; align-content:center;
  background:var(--field); z-index:20;
}
#veil.gone{display:none;}
#veil .mark{font:700 34px/1.6 'Amiri',serif; color:var(--gold); animation:pulse 1.5s ease-in-out infinite;}
#veil .msg{margin-top:4px; font:400 13px/1.6 'Amiri',serif; color:var(--ink-faint); text-align:center;}
@keyframes pulse{0%,100%{opacity:.32;} 50%{opacity:.95;}}

/* ------------------------------------------------------------- responsive */
@media (max-width:1000px){
  :root{--rail:280px;}
  .leaf{padding:24px 22px 30px;}
  #scroll{padding:16px 10px 90px;}
}
@media (max-width:720px){
  .spread{flex-wrap:wrap;}
  .leaf.ar,.leaf.ur{flex-basis:100%!important;}
  .grip{display:none;}
  /* Stacked, the Arabic comes first: it is the text, the Urdu its rendering,
     and on a wide screen it is the right-hand - the first-read - leaf. With
     the Urdu on top a reader saw two screens of Urdu before any Arabic, and
     took the Arabic to be missing. */
  .leaf.ar{order:1;}
  .leaf.ur{order:3;}

  /* The rail is a flex column on a desktop, which on a 390px phone left the
     page 110px wide and pushed the toolbar off-screen. Here it lifts out of
     the flow and slides over the page instead.
     The document is dir="rtl" in every interface language, so the rail sits on
     the right and hides by moving right - translateX is physical, not logical. */
  #rail{
    position:fixed; inset-block:0; inset-inline-start:0;
    z-index:60; flex-basis:0;
    width:min(86vw,var(--rail));
    transform:translateX(0); transition:transform .22s ease;
    box-shadow:-16px 0 44px rgba(0,0,0,.5);
  }
  body.rail-closed #rail{width:min(86vw,var(--rail)); transform:translateX(100%);}
  /* the desktop rule pins children to the full rail width, which overflows once
     the rail is capped at 86vw */
  #rail > *{min-width:0;}

  #rail-scrim{
    position:fixed; inset:0; z-index:55;
    background:rgba(10,7,4,.5);
    opacity:1; transition:opacity .22s ease;
  }
  body.rail-closed #rail-scrim{opacity:0; pointer-events:none;}
}
/* the scrim only exists on small screens */
@media (min-width:721px){ #rail-scrim{display:none;} }

/* ========================================================= segmented sets */
.seg{
  display:flex; flex:none; overflow:hidden; align-items:stretch;
  /* 33px, the same as .ico. Every control in this bar is one row of the same
     height; a segment that sizes itself from its own text ends up shorter than
     the icons beside it, which is what happened the moment the view buttons
     stopped containing an SVG and started containing a word. */
  min-height:33px;
  border:1px solid var(--rule-hard); border-radius:3px;
}
.seg button{
  display:flex; align-items:center; justify-content:center;
  padding:0 10px; cursor:pointer; white-space:nowrap;
  background:transparent; border:0; border-inline-start:1px solid var(--rule);
  color:var(--ink-soft); font:400 12.5px/1.45 'Amiri',serif;
  transition:background .15s, color .15s;
}
.seg button:first-child{border-inline-start:0;}
.seg button:hover{background:rgba(156,119,38,.12); color:var(--ink);}
.seg button[aria-pressed="true"]{
  background:var(--gold); color:#fdf7e6; font-weight:700;
}
.seg.wide{width:100%;}

/* ---- icon segments -------------------------------------------------------
   The view picker carried translated words - عربی / دونوں / اردو - which is
   three variable-width labels in a toolbar that has to survive a 390px phone.
   The icons say the same thing in a fixed 30px and need no translation. */
.seg.glyph button{padding:5px 7px; line-height:0;}
.seg.glyph svg{
  width:19px; height:19px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.5;
}
/* The filled column is the text you get. Arabic sits on the right leaf and
   Urdu on the left, so the icon matches the page in front of you. */
.seg.glyph svg rect.on{fill:currentColor; opacity:.55; stroke:none;}
.seg.glyph button[aria-pressed="true"] svg rect.on{opacity:.9;}

/* ---- language segment ----------------------------------------------------
   Was a <select> showing العربية / اردو / English, wide enough to be first out
   of the toolbar on a narrow screen. Codes rather than flags: no flag names a
   language honestly - Arabic spans twenty-odd countries, Urdu two. The full
   name is on the tooltip and the aria-label. */
.seg.lang button{
  padding:5px 8px;
  font:600 11px/1.5 'Iowan Old Style',Georgia,serif;
  letter-spacing:.05em;
  direction:ltr;
}

.seg.wide button{flex:1;}

/* ------------------------------------------------------------- bar extras */
.bar{overflow:hidden;}


/* --------------------------------------------------------- panel controls */
.panel .pick{
  width:100%; padding:5px 7px;
  font:400 13px/1.5 'Amiri',serif; color:var(--ink);
  background:var(--leaf); border:1px solid var(--rule-hard); border-radius:3px; outline:none;
}
.panel .pick:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(156,119,38,.15);}
.ctrl.pair{display:flex; align-items:center; gap:6px;}
.ctrl.pair .dash{flex:none; color:var(--ink-faint); font-size:12px;}
.panel .check{
  display:flex; align-items:center; gap:8px; margin-bottom:9px; cursor:pointer;
  font:400 13px/1.6 'Amiri',serif; color:var(--ink-soft);
}
.panel .check input{accent-color:var(--gold); width:14px; height:14px;}
.panel .p-note{
  margin:10px 0 8px; padding:6px 8px; border-radius:3px;
  background:rgba(156,119,38,.08); border:1px solid var(--rule);
  font:400 12px/1.6 'Amiri',serif; color:var(--ink-soft); text-align:center; min-height:16px;
}
.panel .p-note.warn{color:var(--maroon); border-color:var(--maroon);
                    background:rgba(123,17,19,.07);}
.panel .reset.go{
  border-style:solid; border-color:var(--gold); color:var(--gold);
  font-weight:700; padding:8px;
}
.panel .reset.go:hover{background:var(--gold); color:#fdf7e6;}

/* ================================================== interface language */
/* The book stays in its own script; only the chrome follows the choice. */
body.ui-en [data-i18n], body.ui-en .ui-txt, body.ui-en #q,
body.ui-en .panel .pick, body.ui-en .ctrl label{
  font-family:'Iowan Old Style','Palatino Linotype',Georgia,serif;
  direction:ltr; text-align:start;
}
body.ui-en #q{padding:9px 30px 9px 33px;}
body.ui-en .seek-box > svg{right:auto; left:11px;}
body.ui-en #q-clear{left:auto; right:6px;}
body.ui-en .ctrl label{letter-spacing:.01em;}
/* segmented sets read left to right when the chrome does */
body.ui-en .seg, body.ui-en .seek-scope{direction:ltr;}

/* The blanket [data-i18n] rule above start-aligns text, which is right for a
   label or a heading and wrong for a button: a button centres its own label,
   and these three sit in equal boxes where anything else reads as broken.
   English only, because the rule that caused it is English only. */
body.ui-en button[data-i18n], body.ui-en .seek-scope button,
body.ui-en .seg button{text-align:center;}

body.ui-ur [data-i18n], body.ui-ur .ui-txt, body.ui-ur #q,
body.ui-ur .panel .pick, body.ui-ur .ctrl label{
  font-family:'Noto Nastaliq Urdu','Amiri',serif;
}
body.ui-ur .ctrl label, body.ui-ur .panel .check{line-height:2.1;}
body.ui-ur .seg button{font-size:11.5px; line-height:2;}
body.ui-ur .seek-scope button{font-size:11px; line-height:2;}
body.ui-ur .brand .sub{line-height:1.9;}
/* the book's own title is Arabic in every interface */
.brand h1{direction:rtl; unicode-bidi:isolate;}

/* ================================================== print from the reader */
/* Ctrl+P on the reader itself prints the leaves that are on screen; the
   print panel builds a proper document for anything larger. */
@media print{
  #rail, .bar, .panel, #veil, .grip{display:none !important;}
  /* only pages that actually carry markup: the rest are empty shells whose
     min-height would otherwise print as hundreds of blank sheets */
  .spread:empty{display:none !important; min-height:0 !important;}
  .spread{min-height:0 !important;}
  body, #app, #main, #scroll{height:auto; overflow:visible; background:#fff;}
  body::before{display:none;}
  #scroll{padding:0;}
  .spread{display:block; margin:0 0 8mm; max-width:none;}
  .leaf{border:0; box-shadow:none; padding:0 0 6mm; background:#fff;}
  .leaf.ar, .leaf.ur{flex-basis:auto !important; max-width:none;}
}

/* the two print actions: save a finished file, or open a copy and print it */
.panel .p-acts{display:flex; flex-direction:column; gap:7px;}
.panel .p-acts .reset{margin-top:0;}


/* ==========================================================================
   Toolbar refinement
   --------------------------------------------------------------------------
   Surface treatment only: no heights, paddings or positions change, so the
   reading layout is untouched. The vocabulary is the book's own - gilt rules,
   tooled wells, inlaid plaques - so the bar belongs to the same object as the
   leaves instead of sitting on top of them like app chrome.
   ====================================================================== */

/* A gilt line along the bar's lower edge, the same gradient the brand rule
   uses. This is the one move that ties the bar to the rest of the binding. */
.bar::after{
  content:''; position:absolute; inset-inline:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,
    transparent 0%, rgba(156,119,38,.30) 18%, var(--gold) 50%,
    rgba(156,119,38,.30) 82%, transparent 100%);
  opacity:.75; pointer-events:none;
}

/* Lifts the bar off the leaves, as a board sits above the text block. */
.bar{box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 6px 14px -12px rgba(50,35,10,.5);}
html[data-theme="lamp"] .bar{box-shadow:0 8px 18px -14px rgba(0,0,0,.75);}

/* Icons: warm and quiet at rest, gilt when engaged. */
.ico{transition:color .18s, background .18s, border-color .18s, box-shadow .18s;}
.ico:hover{box-shadow:0 1px 4px -1px rgba(50,35,10,.18);}
.ico[aria-pressed="true"]{
  box-shadow:0 0 0 2px rgba(156,119,38,.14), 0 1px 3px -1px rgba(50,35,10,.25);
}
.ico:active{transform:translateY(.5px);}

/* The view switch reads as an inlaid plaque: the track is recessed, the
   chosen face is raised and gilded. */
.seg{
  background:var(--field);
  box-shadow:inset 0 1px 2px rgba(50,35,10,.12);
}
.seg button[aria-pressed="true"]{
  background:linear-gradient(180deg, var(--gold-lit), var(--gold));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(50,35,10,.28);
  text-shadow:0 1px 0 rgba(80,55,10,.35);
}
.seg button:not([aria-pressed="true"]):hover{background:rgba(156,119,38,.10);}

/* Jump fields sit in the surface rather than on it. */

/* Where you are in the book. The folio is a small gilt cartouche, as a page
   number is ruled off in a manuscript; figures are tabular so the number does
   not jitter as you turn pages. */
.folio{
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
  border-color:rgba(156,119,38,.45);
  background:linear-gradient(180deg, rgba(156,119,38,.05), rgba(156,119,38,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-theme="lamp"] .folio{box-shadow:none;}

/* ------------------------------------------------- phone toolbar (must be last)
   This overrides .bar, which is declared further up at the same
   specificity - a @media block placed above it simply loses the cascade. */
@media (max-width:720px){
  /* The toolbar is a fixed 52px row with overflow:hidden, so on a 390px phone
     everything past the halfway point was cut off: the sura jump, the page box
     and the language picker were all lost. Compact controls alone did not close
     a 605px-into-390px gap; it has to wrap. */
  .bar{
    flex-wrap:wrap;
    height:auto; min-height:52px;
    overflow:visible;
    padding:6px 10px;
    gap:6px;
  }
  /* Two rows, not three: letting the sura jump grow to fill the row pushed the
     language picker onto a third. Capped, the whole second row fits. */

  /* transform is physical, not logical. The drawer hides with translateX(100%),
     which is correct while it is anchored to the right - but English anchors it
     left, where moving it right just slid it across the page instead of off it.
     Measured: the closed drawer sat at 280-560 on a 390px screen. */
  html[dir="ltr"] body.rail-closed #rail{transform:translateX(-100%);}
  html[dir="ltr"] #rail{box-shadow:16px 0 44px rgba(0,0,0,.5);}
}

/* ---------------------------------------------- English interface direction
   applyI18n sets dir=ltr on <html> for English, which flips the rail to the
   left and reverses the toolbar - where an English reader expects them.
   The book must not follow. The spread stays RTL so the Arabic keeps the right
   leaf and the Urdu the left, as the printed edition has it, and so the two
   columns do not swap under the reader mid-session. */
/* body carries a hard direction:rtl, which outranks the dir attribute on
   <html> and was why setting dir=ltr moved nothing at all. The base rule is
   left alone - it is the correct default whenever dir is absent - and only the
   English case is redirected. */
html[dir="ltr"] body{direction:ltr;}

/* The spread needs nothing here. It already pins its own geometry with
   direction:ltr plus explicit `order` on the leaves, precisely so an ancestor's
   direction cannot move the Arabic off the right-hand leaf. Overriding it here
   was what swapped the columns under English. */
/* ------------------------------------------------------- theme button glyph */
#t-theme .th{display:none;}
html[data-theme="daylight"]  #t-theme .th-daylight{display:block;}
html[data-theme="parchment"] #t-theme .th-parchment{display:block;}
html[data-theme="lamp"]      #t-theme .th-lamp{display:block;}

/* ============================================================ daylight theme
   Light throughout, binding included. Parchment keeps its dark rail; this is
   for reading in a bright room where that block of leather is the only dark
   thing on the screen.

   The token block does most of it. The rest of this section exists because the
   rail was written when it was always dark, so roughly thirty of its colours
   are literals rather than tokens. Overriding them here, scoped to this theme,
   leaves parchment and lamp untouched - tokenising the lot would have meant
   editing a palette that already works. */
html[data-theme="daylight"]{
  --ink:#2c2418;        --ink-soft:#6b5d47;      --ink-faint:#938469;
  --leaf:#fffdf8;       --leaf-2:#f8f4ea;        --deck:#e4dccb;
  --field:#eeeade;
  --rule:#ddd4c0;       --rule-hard:#c0b49a;
  --gold:#8a6718;       --gold-lit:#a8801f;
  --quran:#6b5010;
  --bind:#f4f0e4;       --bind-2:#eae5d6;        --bind-3:#d8cfb9;
  --bind-ink:#33291b;   --bind-soft:#7a6c55;
  --shadow:0 1px 2px rgba(70,55,25,.09), 0 10px 28px -14px rgba(70,55,25,.3);
}

/* the binding, unbound */
html[data-theme="daylight"] #rail{
  background:
    linear-gradient(90deg, rgba(120,100,60,.09), transparent 26px),
    linear-gradient(180deg, var(--bind-2), var(--bind) 60%);
  border-inline-end-color:var(--rule-hard);
}
html[data-theme="daylight"] .brand h1{color:#2e2416;}
html[data-theme="daylight"] .brand .sub{color:#665843;}       /* was 4.25 */

/* the two search fields */
html[data-theme="daylight"] #q,
html[data-theme="daylight"] #qq{
  color:#2c2418; background:rgba(255,255,255,.75); border-color:var(--bind-3);
}
html[data-theme="daylight"] #q::placeholder,
html[data-theme="daylight"] #qq::placeholder{color:#8d8069;}
html[data-theme="daylight"] #q:focus,
html[data-theme="daylight"] #qq:focus{background:#fff;}
html[data-theme="daylight"] .seek-note,
html[data-theme="daylight"] #qq-note{color:var(--bind-soft);}

/* scope buttons and the Quran trigger */
html[data-theme="daylight"] .seek-scope button{color:var(--bind-soft);}
html[data-theme="daylight"] .seek-scope button:hover{color:#2c2418; border-color:var(--rule-hard);}
html[data-theme="daylight"] .seek-scope button[aria-pressed="true"]{
  /* --gold-lit is too pale to carry white text here: 3.58. */
  color:#fffdf8; background:var(--gold); border-color:var(--gold);
}
html[data-theme="daylight"] .qq-open{
  color:var(--gold); background:rgba(255,255,255,.6); border-color:var(--bind-3);
}
html[data-theme="daylight"] .qq-open:hover{background:#fff;}

/* the index */
html[data-theme="daylight"] #tree::-webkit-scrollbar-thumb,
html[data-theme="daylight"] #hits::-webkit-scrollbar-thumb{background:#cfc4ab;}
html[data-theme="daylight"] .grp{border-bottom-color:rgba(150,135,105,.3);}
html[data-theme="daylight"] .surah > .row{color:#3a2f1d;}
html[data-theme="daylight"] .surah > .row:hover{background:rgba(120,100,60,.08); color:#1f1a10;}
html[data-theme="daylight"] .grp.active > .row{background:rgba(168,128,31,.15); color:#2a2214;}
html[data-theme="daylight"] .node{color:var(--ink-soft);}
html[data-theme="daylight"] .node:hover{background:rgba(120,100,60,.08); color:#2c2418;}
html[data-theme="daylight"] .node .pg{color:#726550;}         /* was 2.71 */
html[data-theme="daylight"] .node.current{color:#fffdf8; background:var(--gold);}
html[data-theme="daylight"] .node.current .pg{color:#f0e6cd;}
html[data-theme="daylight"] .ayat button{
  color:var(--ink-soft); background:rgba(255,255,255,.55); border-color:var(--bind-3);
}
html[data-theme="daylight"] .ayat button.current{color:#fffdf8; background:var(--gold); border-color:var(--gold);}

/* search results */
html[data-theme="daylight"] .hit{border-bottom-color:rgba(150,135,105,.35);}
html[data-theme="daylight"] .hit:hover{background:rgba(120,100,60,.07);}
html[data-theme="daylight"] .hit.current{background:rgba(168,128,31,.14);}
html[data-theme="daylight"] .hit .where .tag{color:var(--bind-soft); border-color:var(--bind-3);}
/* The rail is light here; the dark-rail beige was near-invisible on it. */
html[data-theme="daylight"] .hit .frag{color:#2c2418;}
html[data-theme="daylight"] .hit mark{color:var(--gold);}

/* the Quran dialog is its own dark card */
html[data-theme="daylight"] .qq-dlg-in{background:#fffdf8; border-color:var(--rule-hard);}
html[data-theme="daylight"] .qq-dlg-head h2{color:#2c2418;}
html[data-theme="daylight"] .qq-drop{background:#fffdf8; border-color:var(--rule-hard);}
html[data-theme="daylight"] .qq-row{color:#2c2418; border-bottom-color:rgba(150,135,105,.3);}
html[data-theme="daylight"] .qq-row:hover,
html[data-theme="daylight"] .qq-row.on{background:rgba(168,128,31,.12);}
html[data-theme="daylight"] .qq-x{color:var(--bind-soft); border-color:var(--bind-3);}
html[data-theme="daylight"] .qq-empty,
html[data-theme="daylight"] .qq-more{color:var(--bind-soft);}
html[data-theme="daylight"] .qq-dlg::backdrop{background:rgba(60,50,30,.4);}

/* ---- volume steps ---------------------------------------------------------
   The scroll ends where the volume does, because only one volume is rendered at
   a time. These carry the reader across the join rather than sending them back
   to the index. */
.vol-step{
  display:block; width:min(100%,420px); margin:0 auto 26px;
  padding:13px 18px;
  font:400 14px/1.6 'Amiri',serif; color:var(--gold);
  background:var(--leaf); border:1px solid var(--rule-hard); border-radius:3px;
  cursor:pointer; text-align:center;
  transition:color .16s, border-color .16s, background .16s;
}
.vol-step.next{margin-bottom:0;}
.vol-step:hover{color:var(--ink); border-color:var(--gold); background:var(--leaf-2);}
.vol-step:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* ═══ Viewing as somebody else ═══════════════════════════════════════════
   Fixed to the top of every page, not tucked into the staff area: the point
   of impersonating is to be where the reader is, and a banner nobody sees
   while it matters is how staff act as a reader by accident.

   Maroon, because this is a state to leave rather than a feature to enjoy. */
.viewing-as{
  position:fixed; inset-inline:0; top:0; z-index:300;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:8px 16px;
  background:var(--maroon); color:#fdf3ef;
  font:400 12.5px/1.5 'Iowan Old Style','Amiri',Georgia,serif;
  box-shadow:0 2px 10px -4px rgba(0,0,0,.5);
}
.viewing-as span{flex:1; min-width:0;}
.viewing-as strong{font-weight:700;}
.viewing-as form{margin:0;}
.viewing-as button{
  padding:5px 13px; cursor:pointer; white-space:nowrap;
  font:inherit; font-size:12px;
  color:#fdf3ef; background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.45); border-radius:3px;
}
.viewing-as button:hover{background:rgba(0,0,0,.4);}

/* The banner is fixed, so everything beneath it moves down by its height. */
body:has(.viewing-as) #app,
body:has(.viewing-as) .ask-wrap,
body:has(.viewing-as) .shell{padding-top:37px;}

/* ─────────────────────────────────────────────── asking before something final

   Signing out, deleting a thread, deleting a person. See confirm.js for why
   these are not native confirm() dialogs.

   Lives in style.css because it is wanted on every page and this is the only
   stylesheet all of them load.

   Every colour is a token, and that is not tidiness. The three themes move
   --leaf and --ink in opposite directions: a literal that reads well on
   parchment is invisible under daylight, and this file has had to be corrected
   for exactly that four times. --maroon and --leaf are safe as a pair precisely
   because they always move together, in opposite directions. */

.warn-veil{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(20,14,6,.52);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  animation:warn-veil-in .16s ease both;
}

.warn-box{
  width:min(420px, 100%);
  background:var(--leaf);
  color:var(--ink);
  border:1px solid var(--rule);
  border-radius:16px;
  padding:22px 22px 18px;
  box-shadow:0 18px 50px -12px rgba(20,14,6,.55);
  animation:warn-box-in .18s cubic-bezier(.2,.8,.3,1) both;
  text-align:start;
}

.warn-h{
  margin:0 0 8px;
  font-size:18px; font-weight:600; line-height:1.4;
  color:var(--ink);
}

.warn-p{
  margin:0 0 20px;
  font-size:13.5px; line-height:1.65;
  color:var(--ink-soft);
  /* The name of the thing may be in any script and any length - a thread is
     titled with the reader's own first question. It must not push the dialog
     wider than the screen. */
  overflow-wrap:anywhere;
}

.warn-row{ display:flex; gap:10px; justify-content:flex-end; }

.warn-btn{
  font:inherit; font-size:13.5px; font-weight:600;
  padding:9px 18px; border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, filter .15s;
}

.warn-btn.ghost{
  background:transparent; color:var(--ink-soft); border-color:var(--rule);
}
.warn-btn.ghost:hover{ background:var(--leaf-2); color:var(--ink); }

.warn-btn.go{ background:var(--gold); color:var(--leaf); }
.warn-btn.danger{ background:var(--maroon); color:var(--leaf); }
.warn-btn.go:hover, .warn-btn.danger:hover{ filter:brightness(1.08); }

.warn-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

@keyframes warn-veil-in{ from{opacity:0} to{opacity:1} }
@keyframes warn-box-in{
  from{ opacity:0; transform:translateY(8px) scale(.97) }
  to  { opacity:1; transform:none }
}

/* On a phone it sits at the foot, where the thumb already is. */
@media (max-width:520px){
  .warn-veil{ align-items:flex-end; padding:0 }
  .warn-box{
    width:100%; border-radius:16px 16px 0 0;
    padding:20px 18px calc(18px + env(safe-area-inset-bottom));
    animation-name:warn-sheet-in;
  }
  .warn-row{ gap:8px }
  .warn-btn{ flex:1; padding:12px 14px }
}

@keyframes warn-sheet-in{
  from{ opacity:0; transform:translateY(100%) }
  to  { opacity:1; transform:none }
}

@media (prefers-reduced-motion:reduce){
  .warn-veil, .warn-box{ animation:none }
}

/* ───────────────────────────────────────── the verse you asked for

   Clicking an ayah in the index lands on the commentary that opens
   «وقوله تعالى» and discusses it — not the top of the page, and not the
   block of verses at the head of the section where nothing is explained
   yet. This is what marks the place once you arrive.

   Tokens only: --sel is the selection gold and moves with the theme. A
   literal here would be invisible under daylight, which this file has
   been corrected for before. */

mark.ayah-lit{
  background:var(--sel);
  color:inherit;
  border-radius:3px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  animation:ayah-lit 8s ease-out both;
}

/* --sel alone is not enough here. It is the selection gold, #f6e4a8, and the
   page it sits on is #fbf5e7 - close enough that a reader scanning a dense
   folio for the verse they clicked can miss it entirely. The gold rule round
   it is what actually says "here"; the tint only warms the words. */
@keyframes ayah-lit{
  0%   { background:transparent;   box-shadow:0 0 0 0 transparent; }
  4%   { background:var(--sel);    box-shadow:0 0 0 7px var(--sel), inset 0 0 0 2px var(--gold); }
  10%  { background:var(--sel);    box-shadow:0 0 0 3px var(--sel), inset 0 0 0 2px var(--gold); }
  82%  { background:var(--sel);    box-shadow:0 0 0 3px var(--sel), inset 0 0 0 2px var(--gold); }
  100% { background:transparent;   box-shadow:0 0 0 0 transparent; }
}

@media (prefers-reduced-motion:reduce){
  mark.ayah-lit{
    animation:none;
    background:var(--sel);
    box-shadow:0 0 0 3px var(--sel), inset 0 0 0 2px var(--gold);
  }
}

/* ---- the About window ---------------------------------------------------
   The translator's preface, in Urdu only. It borrows the Qur'an dialog's card
   (.qq-dlg) so the two windows are recognisably one family, and differs only
   where long prose needs it: wider, set in Nastaliq, scrolling inside. */
.about-dlg .qq-dlg-in{
  width:min(680px, calc(100vw - 32px));
  max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px);
  display:flex; flex-direction:column;
}
.about-dlg .qq-dlg-head{flex:0 0 auto;}
.about-dlg .qq-dlg-head h2{font-family:'Noto Nastaliq Urdu','Amiri',serif; font-size:17px; line-height:2;}
.about-body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  /* Ragged, not justified: justifying Nastaliq can only widen the spaces,
     and it widened them unevenly enough to look like gaps in the text. */
  direction:rtl; text-align:right;
  /* Nastaliq hangs far above and below its line; anything tighter than this
     clips the descenders of one line into the next. */
  font:400 15px/2.4 'Noto Nastaliq Urdu','Amiri',serif;
  color:#e8dcc2;
  padding-inline:4px 12px;
  outline:none;
  /* The browser's default scrollbar is a white strip down a dark card. */
  scrollbar-width:thin;
  scrollbar-color:var(--bind-3, #3b2f20) transparent;
}
.about-body::-webkit-scrollbar{width:8px;}
.about-body::-webkit-scrollbar-track{background:transparent;}
.about-body::-webkit-scrollbar-thumb{background:var(--bind-3, #3b2f20); border-radius:4px;}
html[data-theme="daylight"] .about-body{scrollbar-color:#cfc4ab transparent;}
html[data-theme="daylight"] .about-body::-webkit-scrollbar-thumb{background:#cfc4ab;}
.about-body p{margin:0 0 1.1em;}
/* The title is the file's first line, in bold. */
.about-body > p:first-child{text-align:center; margin-bottom:1.3em;}
.about-body > p:first-child strong{font-size:19px; font-weight:400; color:var(--gold-lit, #c9a04a);}
.about-body strong{font-weight:700;}
.about-body em{font-style:normal;}
/* The address is Latin inside Urdu: isolated so the bidi algorithm cannot
   carry the full stop or the @ to the wrong end, and set in a face with
   proper Latin letters rather than Nastaliq's borrowed ones. */
.about-body a{
  color:var(--gold-lit, #c9a04a); text-decoration:none;
  direction:ltr; unicode-bidi:isolate;
  /* Sized by eye against the Nastaliq beside it, not by number: Nastaliq at
     15px reads far larger than Latin at 15px, and .95em left the address
     looking like a footnote. */
  font-family:'Amiri',serif; font-size:18px;
}
.about-body a:hover{text-decoration:underline;}
html[data-theme="daylight"] .about-body{color:#2c2418;}
html[data-theme="daylight"] .about-body > p:first-child strong,
html[data-theme="daylight"] .about-body a{color:var(--gold);}

@media (max-width:720px){
  /* Full screen, like the Qur'an dialog on a phone. */
  .about-dlg .qq-dlg-in{width:100vw; max-height:none;}
  .about-body{padding:0 2px 24px; font-size:14.5px;}
}

/* The About icon sits apart, at the far end of the toolbar - the left, in
   this right-to-left bar. */
.about-ico{margin-inline-start:auto;}