/* qlib.css — «مكتبة الأسئلة» (‎/seenjeem/asila/*‎ و‎/khaliya/asila/*‎، 2026-10-16) فوق asila.css.
   الأساس (الشريط اللاصق والرأس وبطاقات الأقسام وترقيم الأسئلة والتذييل والطباعة) من asila.css كما هو، وهنا ما يزيد:
   الجواب المطويّ وزرّ «اكشف الجواب»، وصور الأسئلة، وشارة القيمة (200/400/600)، وشبكة الفئات، ولوحة الحروف كروابط صفحات.
   الألوان كلّها من رموز style.css فتتبع الثيمين. */

/* ── أدوات الصفحة: «اكشف كل الأجوبة» (يظهره السكربت وحده) ── */
.ql-tools{display:flex; justify-content:center; margin:22px 0 0}
.ql-revealall{min-height:42px; padding:0 20px; border-radius:999px; cursor:pointer; font:inherit;
  font-family:var(--font-display),sans-serif; font-weight:700; font-size:14.5px;
  color:var(--ink); background:var(--card); border:1px solid var(--card-line); box-shadow:var(--shadow-soft)}
.ql-revealall:hover{border-color:var(--gold); color:var(--gold-text)}
.ql-revealall[aria-pressed="true"]{border-color:var(--gold)}
.ql-revealall:focus-visible, .ql-ans summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ── شارة القيمة مكان الحرف في رأس القسم ── */
.harf-ch.ql-pts{font-size:15px; letter-spacing:.2px}

/* ── الجواب المطويّ ── */
.ql-ans{margin:6px 0 0}
.ql-ans summary{display:inline-flex; align-items:center; gap:6px; list-style:none; cursor:pointer; user-select:none;
  padding:5px 14px; border-radius:999px; font-size:13.5px; font-weight:700; color:var(--gold-text);
  background:var(--surf); border:1px solid var(--surf-line)}
.ql-ans summary::-webkit-details-marker{display:none}
.ql-ans summary::before{content:"◂"; font-size:11px; transition:transform .15s}
.ql-ans[open] summary::before{transform:rotate(-90deg)}
.ql-ans summary:hover{border-color:var(--gold)}
.ql-ans[open] summary{color:var(--dim)}
.ql-ans .a{margin:8px 0 0}
@media (prefers-reduced-motion:reduce){ .ql-ans summary::before{transition:none} }

/* ── صور الأسئلة والأجوبة (الأعلام والخرائط والشعارات): أبعادٌ محجوزة من القاعدة فلا قفز ── */
.ql-img{display:block; width:auto; max-width:min(100%, 420px); max-height:300px; height:auto; object-fit:contain;
  margin:10px 0 2px; border-radius:12px; border:1px solid var(--card-line); background:var(--surf)}

/* ── فهرس الفئات ── */
.ql-group{margin:30px 0 0}
.ql-group h2{font-family:var(--font-display),sans-serif; font-weight:800; font-size:clamp(19px, .8vw + 15px, 23px);
  color:var(--on-bg); margin:0 0 12px}
.ql-cats{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px}
.ql-cat{display:flex; flex-direction:column; gap:4px; height:100%; box-sizing:border-box; padding:14px 16px; border-radius:16px;
  text-decoration:none; background:var(--card); border:1px solid var(--card-line); box-shadow:var(--shadow-soft)}
.ql-cat b{color:var(--ink); font-family:var(--font-display),sans-serif; font-weight:800; font-size:16px; line-height:1.5}
.ql-cat span{color:var(--dim); font-size:13.5px}
.ql-cat:hover{border-color:var(--gold)}
.ql-cat:hover b{color:var(--gold-text)}

/* ── روابط داخليّة نصّيّة (فئات قريبة) ── */
.ql-links{line-height:2.2}

/* ── لوحة الحروف في صفحة الحرف: روابط صفحات، والحرف الحاليّ مميّز، والحرف بلا صفحة باهت ── */
.ql-letters a[aria-current="page"]{background:linear-gradient(170deg, var(--gold-bright, #e8d49a), var(--gold)); color:var(--on-gold, #3a2c08); border-color:var(--gold)}
.ql-letters span{display:grid; place-items:center; aspect-ratio:1; border-radius:12px; font-family:var(--font-display),sans-serif;
  font-weight:800; font-size:20px; color:var(--dim); opacity:.45; background:var(--surf); border:1px solid var(--surf-line)}

/* ── الحرف السابق/التالي ── */
.ql-prevnext{display:flex; justify-content:space-between; gap:12px; margin:18px 0 0; font-weight:700}
.ql-prevnext a{color:var(--gold-text); text-decoration:none; padding:8px 12px; border-radius:12px; border:1px solid var(--card-line); background:var(--card)}
.ql-prevnext a:hover{border-color:var(--gold)}

@media (max-width:560px){
  .ql-cats{grid-template-columns:1fr 1fr; gap:8px}
  .ql-cat{padding:12px}
  .ql-cat b{font-size:15px}
  .ql-letters span{font-size:18px}
  .ql-prevnext{font-size:14px}
}
@media (max-width:360px){ .ql-cats{grid-template-columns:1fr} }

/* ── الطباعة: الأجوبة ظاهرة بلا أزرار (السكربت يفتحها قبل الطباعة أيضاً) ── */
@media print{
  .ql-tools, .ql-ans summary, .ql-prevnext, .ql-letters{display:none !important}
  .ql-ans > *{display:block !important}
  .ql-cat{border-color:#999; box-shadow:none; background:#fff}
  .ql-cat b, .ql-cat span, .ql-group h2{color:#000 !important}
}