/* هدايات القرآن — same palette and furniture as the maliki tool, so the two
   read as one site. Gold is the tool's own voice; blue is a link or a
   reference; green belongs to the muṣḥaf and to nothing else. */
@font-face {
  font-family: 'Amiri Quran';
  src: url('/static/fonts/amiri-quran.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

:root{
  --bg:#12161b; --panel:#1b2129; --panel2:#212a33; --line:#2c3742;
  --ink:#e8eef5; --muted:#96a5b5; --accent:#c9a227; --accent2:#5aa9e6;
  --matn:#f0d68a; --sharh:#dfe7ef; --hash:#b9c6d4;
  --quran:#8ee0ae; --quran-bg:#16241d; --quran-line:#274d38;
}
*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink); margin:0;
  font-family:'Readex Pro','Cairo Play',system-ui,sans-serif;
  line-height:1.9;
}
.container{max-width:1000px}

.brand{
  font-family:'Reem Kufi',sans-serif; font-size:2rem; margin:0;
  color:var(--accent); letter-spacing:.5px;
}
.subtitle{color:var(--muted); margin:.25rem 0 0; font-size:.95rem}

/* ---------- modes ---------- */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.3rem 0 1.4rem}
.mode{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i t" "i d";
  gap:.15rem .7rem;text-align:start;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:.85rem 1rem;cursor:pointer;font-family:'Readex Pro',sans-serif;
  transition:border-color .15s, background .15s, transform .1s;
}
.mode:hover{border-color:#44586c;transform:translateY(-1px)}
.mode:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.mode.active{
  border-color:var(--accent);
  background:linear-gradient(180deg,rgba(201,162,39,.14),rgba(201,162,39,.04));
}
.mode .mi{grid-area:i;align-self:center;font-size:1.5rem;color:#4d6274;line-height:1}
.mode.active .mi{color:var(--accent)}
.mode .mt{grid-area:t;font-size:1.02rem;font-weight:700;color:var(--hash)}
.mode .md{grid-area:d;font-size:.76rem;line-height:1.6;color:var(--muted)}
.tabpane{display:none}
.tabpane.active{display:block}
@media (max-width:700px){.modes{grid-template-columns:1fr}}

/* ---------- search ---------- */
.search-row{display:flex; gap:.5rem; margin:1.2rem 0 .6rem}
.search-row input{
  flex:1; padding:.75rem 1rem; border-radius:10px; font-size:1.05rem;
  background:var(--panel); border:1px solid var(--line); color:var(--ink);
  font-family:'Amiri',serif;
}
.search-row input:focus{outline:none; border-color:var(--accent);
                        box-shadow:0 0 0 3px rgba(201,162,39,.15)}
.search-row input::placeholder{color:#66788a}
.search-row button{
  padding:.75rem 1.6rem; border:0; border-radius:10px; cursor:pointer;
  background:var(--accent); color:#1a1400; font-weight:700; font-size:1rem;
}
.search-row button:disabled{opacity:.5; cursor:default}
.examples{font-size:.85rem; color:var(--muted); margin-bottom:1rem}
.examples a{color:var(--accent2); text-decoration:none; margin-inline-start:.7rem}
.examples a:hover{text-decoration:underline}

/* ---------- filters: category (right) | its books (left) ---------- */
.filters{
  display:flex; flex-wrap:wrap; gap:1.2rem; padding:.7rem .9rem; margin-bottom:1rem;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
}
.fgroup{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem;
        font-size:.88rem; width:100%}
.fgroup label{display:flex; align-items:center; gap:.3rem; cursor:pointer;
              color:var(--hash)}
.fgroup input{accent-color:var(--accent); cursor:pointer}
.fgroup label.cat{color:var(--accent);font-weight:600}
.fgroup label.allbooks{color:var(--hash);font-weight:600}
.fgroup label.bk{opacity:.92;font-size:.85rem}

.bookgrid{display:grid;grid-template-columns:max-content 1fr;
          gap:.4rem 1rem;align-items:baseline;width:100%;margin-top:.4rem}
.bookgrid .catcell{white-space:nowrap;padding-inline-end:.9rem;
                   border-inline-end:2px solid var(--line)}
.bookgrid .bookcell{display:flex;flex-wrap:wrap;gap:.35rem .9rem}
/* children run cat,books,cat,books… so the third onward starts a new row */
.bookgrid > *:nth-child(n+3){border-top:1px solid var(--line);padding-top:.45rem}
@media (max-width:600px){
  .bookgrid{grid-template-columns:1fr;gap:.15rem}
  .bookgrid .catcell{border-inline-end:0;padding-inline-end:0;margin-top:.5rem}
}

/* ---------- progress ---------- */
.status{min-height:1.6rem; color:var(--muted); font-size:.9rem; margin-bottom:.5rem}
.spin{
  display:inline-block;width:.8rem;height:.8rem;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;
  margin-inline-end:.5rem;vertical-align:-1px;
}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- answer ---------- */
.answer, .card{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.2rem;margin-bottom:1rem;
}
.mawdu{
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:.6rem .9rem;margin-bottom:1rem;font-size:.95rem;color:var(--hash);
}
.mawdu b{color:var(--accent);font-weight:700}
.ans-p{font-family:'Amiri',serif;font-size:1.12rem;color:var(--sharh);margin:.6rem 0}

/* The verse, as it comes out of the muṣḥaf — the one green thing here. */
.aya{
  font-family:'Amiri Quran','Amiri',serif;
  background:var(--quran-bg); border:1px solid var(--quran-line);
  border-radius:10px; padding:1rem 1.2rem; margin:1rem 0;
  font-size:1.3rem; line-height:2.5; text-align:center; color:var(--quran);
}
.aya .ref{
  display:block; font-family:'Readex Pro',sans-serif; font-size:.75rem;
  color:#6fae8b; margin-top:.5rem; letter-spacing:.02em;
}
blockquote.q{
  margin:.9rem 0;padding:.7rem 1rem;background:var(--panel2);
  border-inline-start:3px solid var(--accent);border-radius:8px;
  font-family:'Amiri',serif;font-size:1.08rem;color:var(--matn);
}
blockquote.q .src{
  display:block;margin-top:.45rem;font-size:.76rem;color:var(--muted);
  font-family:'Readex Pro',sans-serif;
}
blockquote.q .src a{color:var(--accent2);text-decoration:none}
blockquote.q .src a:hover{text-decoration:underline}
blockquote.q.approx{border-inline-start-style:dashed}

/* ---------- the extracted guidance ---------- */
.hidayat{margin-top:1.2rem}
.hidayat h3{
  font-family:'Reem Kufi',sans-serif;font-size:1.05rem;color:var(--accent);
  border-bottom:1px solid var(--line);padding-bottom:.35rem;margin:0 0 .6rem;
}
.hid{display:flex;gap:.7rem;padding:.6rem 0;border-bottom:1px dashed var(--line);
     align-items:flex-start}
.hid:last-child{border:0}
.hid .n{color:#4d6274;font-weight:700;min-width:1.4rem}
.hid .body{flex:1;color:var(--sharh)}
.hid .meta{font-size:.76rem;color:var(--muted);margin-top:.2rem}
.hid .meta a{color:var(--accent2);text-decoration:none}
.badge-r{
  font-family:'Readex Pro',sans-serif;font-size:.68rem;padding:.1rem .5rem;
  border-radius:20px;margin-inline-start:.4rem;white-space:nowrap;
}
.r-nass{background:#1d4b32;color:#8ee0ae}
.r-muayyad{background:#1c3f5a;color:#8eccf5}
.r-mustanbat{background:#4a3a12;color:#f0d68a}
.majal{font-size:.7rem;color:var(--muted);border:1px solid var(--line);
       border-radius:20px;padding:.05rem .5rem;margin-inline-start:.3rem}

/* ---------- apparatus ---------- */
.appar{font-size:.85rem;color:var(--muted)}
.appar summary{cursor:pointer;color:var(--accent2);
               font-family:'Readex Pro',sans-serif}
.appar ul{margin-top:.5rem;padding-inline-start:1.2rem}
.appar a{color:var(--accent2);text-decoration:none}
.warn{
  margin-top:1rem;background:#3a2a2a;border:1px solid #5b3a3a;color:#f0c9a9;
  border-radius:10px;padding:.7rem .9rem;font-size:.9rem;
}
.warn ul{margin:.4rem 0 0;padding-inline-start:1.2rem}
.scope{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:1rem;text-align:center;color:var(--hash);font-size:.95rem;
}
.scope a{color:var(--accent2)}

/* ---------- raw results ---------- */
.res{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:.85rem 1rem;margin-bottom:.7rem;
}
.res .head{
  font-size:.8rem;margin-bottom:.4rem;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:.4rem;
}
.res .head .bk{color:var(--accent);font-weight:700}
.res .head a{color:var(--accent);text-decoration:none}
.res .head .loc{color:var(--muted);font-variant-numeric:tabular-nums}
.res .head .ref{color:var(--accent2)}
.res .txt{font-family:'Amiri',serif;font-size:1.06rem;color:var(--sharh)}
.res .txt .qq{color:var(--quran);font-family:'Amiri Quran','Amiri',serif}

footer{
  text-align:center;color:var(--muted);font-size:.8rem;margin:2.5rem 0 1.5rem;
  border-top:1px solid var(--line);padding-top:1rem;
}
footer a{color:var(--accent2);text-decoration:none}

@media (max-width:600px){
  .brand{font-size:1.55rem}
  .aya{font-size:1.12rem;line-height:2.2;padding:.8rem}
  .res .txt,.ans-p{font-size:1rem}
}
.res .head .n{color:var(--accent);font-weight:700;margin-inline-end:.4rem}

/* ---------------------------------------------------------- share bar */
.sharebar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.sharebar button{
  padding:.5rem 1.1rem;border:0;border-radius:8px;cursor:pointer;
  background:var(--accent);color:#1a1400;font-family:'Readex Pro',sans-serif;
  font-size:.85rem;font-weight:700;
}
.sharebar button:disabled{opacity:.55;cursor:default}
.sharenote{font-size:.78rem;color:var(--muted)}
.shareurl{
  width:100%;margin-top:.5rem;padding:.45rem .6rem;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  font-size:.82rem;direction:ltr;text-align:left;
}

/* the words carrying a منصوصة claim, under the fa'ida */
.hid-q{
  margin-top:.35rem;padding:.4rem .7rem;border-radius:6px;
  background:var(--panel2);border-inline-start:2px solid var(--accent);
  font-family:'Amiri',serif;font-size:.98rem;color:var(--matn);
}
.hid-q.approx{border-inline-start-style:dashed}

/* ------------------------------------------------------------ the quota */
/* Styled here, in the stylesheet this page actually loads: a call to action
   that inherits nothing renders as bare text and reads as a bug. */
.quota{text-align:start}
.quota p{margin:0 0 .7rem}
.cta{
  display:inline-block;padding:.55rem 1.3rem;border-radius:9px;
  background:var(--accent);color:#1a1400;text-decoration:none;
  font-family:'Readex Pro',sans-serif;font-weight:700;font-size:.9rem;
  margin-inline-end:.7rem;
}
.cta:hover{filter:brightness(1.08)}

/* A reference carries Latin digits into RTL prose, where the bidi algorithm
   reorders it. It is also the part a reader copies out, so a mangled one
   travels further than the page. */
.bidi{unicode-bidi:isolate}

/* ---------------------------------------------------------- fold filters */
.foldbar{
  width:100%;text-align:start;background:none;border:0;cursor:pointer;
  color:var(--accent);font-family:'Readex Pro',sans-serif;font-size:.85rem;
  padding:0 0 .4rem;
}
.foldbar::after{content:" ▾";color:var(--muted)}
.filters.folded .foldbar::after{content:" ▸"}
.filters.folded .fgroup{display:none}