/* JiiiMu hadith section: laid out like a hadith book. Chapters (kitab) in a contents column, each hadith as an
   index line (title, gist, narrator and reference); a hadith page reads narrator, text, lesson, reference, then the Arabic. */

/* ---------- hadith of the day: the one illuminated panel ---------- */
.hd-day{display:grid;gap:10px;text-decoration:none;color:var(--text);position:relative;overflow:hidden;
  padding:clamp(22px,4vw,44px) clamp(20px,5vw,60px);border:1px solid var(--gold-deep);border-radius:var(--r-l);
  background:radial-gradient(120% 140% at 100% 0%,rgba(217,180,90,.16),transparent 55%),linear-gradient(180deg,#14295a,#0e1f45)}
.hd-day::before{content:"";position:absolute;inset:8px;border:1px solid var(--rule-soft);border-radius:calc(var(--r-l) - 6px);pointer-events:none}
.hd-day-l{color:var(--gold);font:500 .95rem var(--sans)}
.hd-day b{font:600 clamp(1.5rem,3vw,2.2rem)/1.15 var(--serif);color:var(--gold-soft)}
.hd-day-q{font:500 clamp(1.08rem,2vw,1.3rem)/1.6 var(--serif);max-width:62ch;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hd-day small{color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px}
.hd-day-go{color:var(--gold-soft);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;margin-top:4px;width:max-content}
.hd-day:hover{color:var(--text);border-color:var(--gold)}
.hd-day:hover .hd-day-go{color:#fff}

/* ---------- index: contents column + chapters ---------- */
.hd-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.hd-toc{position:sticky;top:88px;max-height:calc(100vh - 110px);overflow:auto;padding-right:6px}
.hd-side-h{font:600 1.05rem var(--serif);color:var(--gold-soft);margin:0 0 10px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.hd-side-h a{color:inherit;text-decoration:none}
.hd-side-h .ar{font-size:1.2rem;color:var(--gold)}
.hd-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.hd-toc li a{display:flex;justify-content:space-between;gap:10px;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:.95rem;line-height:1.35}
.hd-toc li a span{font-variant-numeric:tabular-nums;color:var(--muted);opacity:.7}
.hd-toc li a:hover{color:var(--text)}
.hd-toc li[aria-current] a,.hd-toc li a.on{color:var(--gold-soft);border-left-color:var(--gold)}

.hd-search{margin-bottom:8px}
.hd-search p{margin:6px 0 0;min-height:1.4em}
.hd-ch{padding:30px 0 10px;scroll-margin-top:84px}
.hd-ch+.hd-ch{border-top:1px solid var(--rule-soft)}
.hd-ch-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.hd-ch-h h2{font-size:clamp(1.45rem,2.6vw,1.9rem);margin:0}
.hd-ch-h h2 a{color:inherit;text-decoration:none}
.hd-ch-h h2 a:hover{text-decoration:underline}
.hd-ch-h .ar{font-size:1.6rem;color:var(--gold)}
.hd-ch>.muted{margin:6px 0 14px;font-size:.95rem}
.hd-list{list-style:none;margin:0;padding:0;counter-reset:h}
.hd-list li a{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;padding:14px 16px 14px 18px;margin:0 -16px 0 -18px;border-radius:12px;text-decoration:none;color:var(--text);position:relative}
.hd-list li a::before{content:"";position:absolute;left:4px;top:22px;width:6px;height:6px;transform:rotate(45deg);border:1px solid var(--gold-deep)}
.hd-list li a:hover{background:rgba(217,180,90,.07)}
.hd-list li a:hover::before{background:var(--gold);border-color:var(--gold)}
.hd-list b{font:600 1.12rem/1.3 var(--serif);color:var(--gold-soft)}
.hd-list span{color:var(--text);font-size:.98rem;line-height:1.5}
.hd-list small,.hd-day small{color:var(--muted);font-size:.85rem}
.hd-list small{display:flex;flex-wrap:wrap;gap:2px 14px}
.hd-list small span,.hd-day small span{color:inherit;font-size:inherit}

/* ---------- one hadith ---------- */
.hd-head h1{font-size:clamp(2rem,4.2vw,3.1rem);max-width:22ch}
.hd-head .lead{max-width:60ch}
.hd-page .hd-grid{grid-template-columns:minmax(0,1fr) 300px}
.hd-main{max-width:720px}
.hd-by{color:var(--muted);margin:0 0 12px}
.hd-by b{color:var(--text);font-weight:600}
.hd-matn{margin:0 0 34px;padding:clamp(20px,3.4vw,34px);border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:4px var(--r-m) var(--r-m) 4px;background:rgba(17,36,79,.6)}
.hd-matn p{font:500 clamp(1.15rem,2.1vw,1.38rem)/1.7 var(--serif);margin:0 0 14px;max-width:none}
.hd-matn cite{font-style:normal;color:var(--gold);font-size:.95rem}
.hd-main h2{font-size:1.35rem;margin:30px 0 10px}
.hd-ref{display:grid;gap:0;margin:0;border-top:1px solid var(--rule-soft)}
.hd-ref>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--rule-soft)}
.hd-ref dt{color:var(--muted)}
.hd-ref dd{margin:0}
.hd-ref ul{list-style:none;margin:0;padding:0}
.hd-ref ul li+li{margin-top:4px}
.hd-act{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 0}
.hd-ar{margin:44px 0 0;padding:28px 0 0;border-top:1px solid var(--rule)}
.hd-ar h2{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:0}
.hd-ar h2 span{font-family:var(--arabic);color:var(--gold);font-weight:400;font-size:1.4rem}
.hd-ar .ar{font-size:clamp(1.45rem,2.8vw,1.85rem);line-height:2.1;text-align:right;color:var(--text);max-width:none;margin:0 0 12px}
.hd-pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:40px 0 0}
.hd-pn a{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r-m);text-decoration:none;color:var(--text)}
.hd-pn a:hover{border-color:var(--gold)}
.hd-pn small{color:var(--muted)}
.hd-pn b{font:600 1rem/1.35 var(--serif);color:var(--gold-soft)}
.hd-pn .next{text-align:right}
.hd-side{position:sticky;top:88px;max-height:calc(100vh - 110px);overflow:auto;padding:18px 18px 20px;border:1px solid var(--rule-soft);border-radius:var(--r-m);background:rgba(17,36,79,.35)}
.hd-side ol{margin:0 0 16px;padding-left:22px;color:var(--muted);font-size:.93rem}
.hd-side li{padding:4px 0;line-height:1.4}
.hd-side li a{color:var(--muted);text-decoration:none}
.hd-side li a:hover{color:var(--text);text-decoration:underline}
.hd-side li[aria-current] a{color:var(--gold-soft);font-weight:600}
.hd-faq details{border-bottom:1px solid var(--rule-soft);padding:14px 0}
.hd-faq summary{cursor:pointer;font:600 1.1rem var(--serif);color:var(--gold-soft)}
.hd-faq details p{margin:10px 0 0}

@media (max-width:900px){
  .hd-grid,.hd-page .hd-grid{grid-template-columns:minmax(0,1fr)}
  .hd-toc{position:static;max-height:none;padding:0}
  .hd-toc ol{display:flex;gap:8px;overflow-x:auto;border:0;padding-bottom:6px;scrollbar-width:thin}
  .hd-toc li a{white-space:nowrap;border:1px solid var(--rule);border-radius:999px;padding:6px 12px;margin:0}
  .hd-toc li[aria-current] a,.hd-toc li a.on{border-color:var(--gold)}
  .hd-side{position:static;max-height:none}
}
@media (max-width:520px){
  .hd-ref>div{grid-template-columns:1fr;gap:2px}
  .hd-pn{grid-template-columns:1fr}
  .hd-pn .next{text-align:left}
}
@media print{.top,.foot,.hd-side,.hd-act,.hd-pn{display:none!important}}

/* ---------- 99 Names of Allah (same frame as a hadith page) ---------- */
.nm-verse{margin:0 0 34px;padding:24px clamp(18px,4vw,40px);border:1px solid var(--gold-deep);border-radius:var(--r-l);text-align:center;
  background:radial-gradient(120% 160% at 50% 0%,rgba(217,180,90,.14),transparent 60%),#0f2148}
.nm-verse .ar{font-size:clamp(1.8rem,4.4vw,2.8rem);color:var(--gold-soft);margin:0 0 8px;line-height:1.7}
.nm-verse figcaption{color:var(--muted);font:500 1.05rem/1.6 var(--serif)}
.nm-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule-soft)}
.nm-grid li{border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.nm-grid a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;padding:18px 18px 20px;height:100%;text-decoration:none;color:var(--text)}
.nm-grid a:hover{background:rgba(217,180,90,.07)}
.nm-grid .no{grid-row:span 3;font:600 .86rem var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;min-width:2ch}
.nm-grid .ar{font-size:1.9rem;color:var(--gold-soft);text-align:right;line-height:1.5}
.nm-grid b{font-weight:600}
.nm-grid .mn{color:var(--muted);font-size:.94rem;line-height:1.4}
.nm-title{display:grid;justify-items:start;gap:4px}
.nm-no{color:var(--gold);font-size:.95rem}
.nm-ar{font-family:var(--arabic);font-size:clamp(3.6rem,10vw,6.4rem);line-height:1.25;color:var(--gold);direction:rtl}
.nm-head h1{margin:0}
.nm-ayah{margin:0 0 18px;padding:20px clamp(16px,3vw,26px);border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:4px var(--r-m) var(--r-m) 4px;background:rgba(17,36,79,.6)}
.nm-ayah .ar{font-size:clamp(1.45rem,2.8vw,1.8rem);line-height:2;text-align:right;margin:0 0 10px;max-width:none}
.nm-ayah figcaption{display:grid;gap:6px;font:500 1.05rem/1.6 var(--serif)}
.nm-ayah figcaption a{font:400 .92rem var(--sans);color:var(--gold)}
.nm-side ol{list-style:none;padding:0}
.nm-side li a{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.nm-side li .ar{color:var(--gold-soft);font-size:1.1rem;order:2}
.hd-ar .ar.long:not(.open){max-height:15.5em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.hd-ar [data-more]{margin:0 0 14px}
bdi{unicode-bidi:isolate}
.nm-title{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:clamp(20px,4vw,48px);justify-items:stretch}
.nm-title .nm-ar{grid-row:1;padding:.3em .45em .1em;border:1px solid var(--gold-deep);border-radius:var(--r-l);background:radial-gradient(100% 100% at 50% 0%,rgba(217,180,90,.14),transparent 70%);line-height:1.6;text-align:center}
.nm-title .nm-no{display:block;margin-bottom:6px}
.nm-all{margin:22px 0 0;display:none}
@media (max-width:900px){.nm-side{display:none}.nm-all{display:block}}
@media (max-width:600px){.nm-title{grid-template-columns:1fr;row-gap:14px}.nm-title .nm-ar{justify-self:start}}