/* ════════ assets/hulul.css ════════ */
:root{
  --hl-bg:#f4f7fb; --hl-surface:#fff; --hl-fg:#111827; --hl-muted:#5b6570;
  --hl-line:#d9e1ea; --hl-accent:#0f766e; --hl-accent-2:#145e75;
  --hl-soft:#e6fffa; --hl-mark:#fff3bf;
  --hl-shadow:0 10px 26px rgba(2,6,23,.07);
}
@media (prefers-color-scheme:dark){
  :root{
    --hl-bg:#0f1317; --hl-surface:#171b20; --hl-fg:#e7ebef; --hl-muted:#9aa5b1;
    --hl-line:#2a3038; --hl-accent:#4ecdc4; --hl-accent-2:#2b8a86;
    --hl-soft:#12332f; --hl-mark:#4d4526;
    --hl-shadow:0 10px 26px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--hl-bg); color:var(--hl-fg);
  font-family:"Tajawal","Cairo","Noto Naskh Arabic","Segoe UI",Arial,sans-serif;
}
.wrap{max-width:1040px;margin:0 auto;padding:16px}
.hl{line-height:1.85}

/* ── شريط أدوات الإضافة (لا عنوان ولا مسار تصفح — ووردبريس يطلّعهما) ── */
.hl-head{
  background:linear-gradient(120deg,var(--hl-accent) 0%,var(--hl-accent-2) 100%);
  color:#fff;border-radius:16px;padding:14px;box-shadow:var(--hl-shadow);margin-bottom:12px
}
.hl-bar{display:grid;gap:8px}
.hl-filter-row{display:grid;gap:8px;grid-template-columns:1fr 1fr auto}
.hl-input,.hl-select,.hl-btn{
  width:100%;font:inherit;border-radius:12px;padding:11px 13px;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.96);color:#111827
}
.hl-input{font-size:1.08rem;padding:13px 15px}
.hl-input:focus,.hl-select:focus,.hl-btn:focus-visible{outline:2px solid #6ee7b7;outline-offset:2px}
.hl-btn{
  background:rgba(255,255,255,.16);color:#fff;font-weight:700;cursor:pointer;
  white-space:nowrap;width:auto;border-color:rgba(255,255,255,.45)
}
.hl-btn:hover{background:rgba(255,255,255,.26)}

/* ── التخطيط ── */
.hl-layout{display:grid;grid-template-columns:290px 1fr;gap:12px;align-items:start}

.hl-toc{
  background:var(--hl-surface);border:1px solid var(--hl-line);border-radius:16px;
  padding:12px;box-shadow:var(--hl-shadow);position:sticky;top:12px
}
.hl-toc h2{margin:.2rem 0 .7rem;font-size:1rem}
.hl-toc-list{
  max-height:calc(74vh - 74px);overflow:auto;display:grid;gap:6px;
  scrollbar-width:thin;margin:0;padding:0;list-style:none
}
.hl-toc-list a{
  display:block;text-align:start;border:1px solid var(--hl-line);border-radius:10px;
  background:var(--hl-bg);padding:8px 10px;color:var(--hl-fg);text-decoration:none;font-size:.88rem
}
.hl-toc-list a:hover{border-color:var(--hl-accent);background:var(--hl-soft)}
.hl-toc-list a.is-active{border-color:var(--hl-accent);font-weight:700;background:var(--hl-soft)}
.hl-toc-list li[hidden]{display:none}
.hl-toc-toggle,.hl-toc-close,.hl-toc-overlay{display:none}

.hl-content{
  background:var(--hl-surface);border:1px solid var(--hl-line);border-radius:16px;
  padding:12px;box-shadow:var(--hl-shadow);min-width:0
}
.hl-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.pill{
  border:1px solid var(--hl-line);background:var(--hl-bg);color:var(--hl-muted);
  padding:4px 11px;border-radius:999px;font-size:.78rem;white-space:nowrap
}
.pill--on{border-color:var(--hl-accent);color:var(--hl-accent);background:var(--hl-soft)}

.hl-scroll{padding-inline-end:.4rem}
@media (min-width:901px){
  .hl-scroll{max-height:74vh;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .hl-scroll::-webkit-scrollbar{width:9px}
  .hl-scroll::-webkit-scrollbar-thumb{background:var(--hl-line);border-radius:9px}
}

/* ── بطاقة السؤال ── */
.hl-q{
  border:1px solid var(--hl-line);border-radius:12px;padding:12px 14px;margin:0 0 10px;
  background:var(--hl-bg);
  content-visibility:auto;contain-intrinsic-size:0 280px;scroll-margin-top:78px
}
.hl-q[hidden]{display:none}
.hl-note[hidden],.hl-part[hidden]{display:none}
.hl-q:target{outline:3px solid var(--hl-accent);outline-offset:2px}
.hl-q.is-hit{animation:hl-flash 1.6s ease-out}
@keyframes hl-flash{0%,40%{background:var(--hl-soft)}100%{background:var(--hl-bg)}}

.hl-q__t{margin:0;font-size:1.01rem;line-height:1.7;font-weight:700}
.hl-q__meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:.5rem 0 .7rem}
.hl-tag{
  font-size:.75rem;padding:.15rem .6rem;border-radius:999px;
  background:var(--hl-soft);color:var(--hl-accent);white-space:nowrap
}
.hl-copy{
  margin-inline-start:auto;font:inherit;font-size:.77rem;cursor:pointer;
  background:none;border:1px solid var(--hl-line);border-radius:8px;
  padding:.18rem .55rem;color:var(--hl-muted)
}
.hl-copy:hover{border-color:var(--hl-accent);color:var(--hl-accent)}
.hl-q__a{background:var(--hl-surface);border:1px solid var(--hl-line);border-radius:10px;padding:9px 11px}
.hl-q__a p{margin:.35rem 0}
.hl-q__a ul,.hl-q__a ol{margin:.35rem 0;padding-inline-start:1.4rem}
.hl-q__x{
  margin:.7rem 0 0;padding-inline-start:.75rem;font-size:.88rem;
  color:var(--hl-muted);border-inline-start:3px solid var(--hl-line)
}
.hl-q table{width:100%;border-collapse:collapse;margin:.5rem 0;font-size:.93rem}
.hl-q th,.hl-q td{border:1px solid var(--hl-line);padding:.42rem .6rem;text-align:start}
.hl-q th{background:var(--hl-soft);color:var(--hl-accent);font-weight:600}

mark{background:var(--hl-mark);color:inherit;padding:0 .12em;border-radius:2px}

.hl-empty{
  background:#fff7ed;border:1px dashed #fb923c;color:#7c2d12;
  border-radius:12px;padding:12px;font-size:.92rem
}
@media (prefers-color-scheme:dark){.hl-empty{background:#2a1a0d;color:#fdba74;border-color:#9a5b1f}}
.hl-footer{
  margin-top:10px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  color:var(--hl-muted);font-size:.82rem
}
.hl-note{
  border:1px dashed var(--hl-line);background:var(--hl-bg);border-radius:12px;
  padding:11px;margin-top:10px;color:var(--hl-muted);font-size:.83rem
}
.hl-note h3{margin:0 0 .35rem;font-size:.92rem;color:var(--hl-fg)}

/* ── الجوال: درج الفهرس (من تصميم منولة) ── */
@media (max-width:900px){
  .hl-filter-row{grid-template-columns:1fr}
  .hl-input{font-size:1rem;padding:11px 13px}
  .hl-btn{width:100%}
  .hl-layout{grid-template-columns:1fr}

  .hl-toc-toggle{
    display:block;width:100%;border:none;border-radius:12px;padding:11px 12px;
    background:var(--hl-accent);color:#fff;font:inherit;font-weight:700;
    margin-bottom:8px;cursor:pointer
  }
  .hl-toc{
    position:fixed;inset:auto 16px 16px 16px;top:12vh;width:auto;z-index:70;
    display:none;padding-top:22px
  }
  .hl-toc.is-open{display:block}
  .hl-toc h2{display:none}
  .hl-toc-list{max-height:calc(74vh - 52px)}
  .hl-toc-close{
    display:block;position:absolute;top:8px;inset-inline-start:8px;
    border:1px solid var(--hl-line);background:var(--hl-surface);color:var(--hl-fg);
    border-radius:10px;padding:4px 9px;cursor:pointer;font:inherit;font-size:.83rem
  }
  .hl-toc-overlay{position:fixed;inset:0;background:rgba(2,6,23,.4);z-index:60;display:none}
  .hl-toc-overlay.is-open{display:block}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
}

/* ── ترويسة المقالة: يطلّعها ووردبريس والقالب، لا الإضافة ── */
.wp-sim{max-width:1040px;margin:0 auto;padding:18px 16px 2px}
.wp-crumbs{font-size:.84rem;color:var(--hl-muted);margin:0 0 .55rem}
.wp-crumbs a{color:var(--hl-accent);text-decoration:none}
.wp-crumbs a:hover{text-decoration:underline}
.wp-title{margin:0 0 .5rem;font-size:1.5rem;line-height:1.6;color:var(--hl-fg)}
.wp-intro{margin:0;color:var(--hl-muted);font-size:.95rem}

/* ════════ سطر المرجع أسفل كل سؤال ════════ */
.hl-q__ref{
  margin:.65rem 0 0;padding-top:.5rem;
  font-size:.78rem;line-height:1.75;color:var(--hl-muted);
  border-top:1px dashed var(--hl-line);opacity:.9
}

/* ════════ كتلة ملاحظة (فكرة الدرس) ════════ */
.hl-note{
  margin:0 0 1rem;padding:.85rem 1rem;
  background:var(--hl-soft);border:1px solid var(--hl-line);
  border-radius:12px
}
.hl-note h3{margin:0 0 .4rem;font-size:1rem;color:var(--hl-accent)}
.hl-note p{margin:.35rem 0;font-size:.95rem;line-height:1.9}

/* ════════ رسم توضيحي داخل الإجابة ════════ */
.hl-q__fig{
  margin:.9rem 0;padding:0;
  background:#fff;border:1px solid var(--hl-line);
  border-radius:12px;overflow:hidden
}
.hl-q__fig img{
  display:block;width:100%;height:auto;
  background:#fff
}
.hl-q__fig figcaption{
  padding:.5rem .75rem;
  font-size:.78rem;line-height:1.7;color:var(--hl-muted);
  border-top:1px solid var(--hl-line);background:var(--hl-bg)
}

/* ════════ لسان الرجوع للأعلى ════════ */
:root{
  --hl-top-offset:0px;   /* ارتفاع البنر أو الهيدر العلوي — يضبطه التطبيق أو القالب */
  --hl-app-inset:0px;    /* ارتفاع البنر السفلي في التطبيق */
}

/* لسان صغير لاصق بحافة الشاشة، لا يظهر إلا بعد النزول */
.hl-top-tab{
  position:fixed;z-index:60;
  top:calc(var(--hl-top-offset) + 6px);
  inset-inline-start:50%;transform:translateX(50%) translateY(-16px);
  width:52px;height:32px;padding:0;border:none;
  border-radius:0 0 14px 14px;
  background:#16A34A;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(2,6,23,.28);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility .2s
}
.hl-top-tab.is-on{opacity:1;visibility:visible;transform:translateX(50%) translateY(0)}
.hl-top-tab:hover{background:#15803D}
.hl-top-tab:focus-visible{outline:3px solid #6ee7b7;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.hl-top-tab{transition:none}}

/* سطح المكتب: صفحة الحلول فيها شريط تمرير خاص بها، فلا حاجة للسان */
@media (min-width:901px){.hl-top-tab{display:none!important}}

/* الدرج ينتهي فوق البنر السفلي في التطبيق */
@media (max-width:900px){
  .hl-toc{inset:auto 14px calc(14px + var(--hl-app-inset)) 14px}
  .hl-toc-bar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px}
  .hl-toc-close{position:static;padding:7px 14px}
  .hl-toc-top{
    border:1px solid var(--hl-line);border-radius:10px;padding:7px 14px;
    background:var(--hl-soft);color:var(--hl-accent);font:inherit;font-size:.86rem;
    font-weight:700;cursor:pointer
  }
  .hl-toc-top:hover{background:var(--hl-accent);color:#fff}
}
.hl-toc-bar{display:none}
@media (max-width:900px){.hl-toc-bar{display:flex}}

/* القفز إلى سؤال: هامش بسيط تحت البنر العلوي إن وجد */
.hl-q{scroll-margin-top:calc(var(--hl-top-offset) + 16px)}