/* ============================================================
   AL MOUTMAG — canvas-v2.css  (v0.6.0 · Canvas-Tech)
   أنماط ترقية الإبراز (Shiki) + لمسات ثيمات Mermaid فقط.
   تُحمَّل بعد components.css وتعتمد متغيرات main.css القائمة:
   --alm-radius-sm · --alm-border · --alm-shadow · --alm-mono · --alm-cyan
   لا تعدّل أي قاعدة قائمة — تضيف طبقة .shiki-box وتحسّن .mermaid-box.
   ثيم Shiki مزدوج (defaultColor:false): كل span يحمل --shiki-light
   و --shiki-dark معاً → التبديل CSS خالص بلا إعادة رسم.
   ============================================================ */

/* ---------- Shiki: صندوق الكود المُرقّى ---------- */
.alm-md pre.shiki-box{
  direction:ltr;text-align:left;overflow-x:auto;margin:.75em 0;position:relative;
  border:1px solid var(--alm-border);border-radius:var(--alm-radius-sm);
  background-color:var(--shiki-dark-bg,#0a1120);          /* ثيم one-dark-pro */
  box-shadow:var(--alm-shadow);
  padding:13px 15px;
  transition:background-color .25s ease,border-color .25s ease;
}
.alm-md pre.shiki-box code{
  display:block;background:none;border:0;padding:0;margin:0;
  font-family:var(--alm-mono);font-size:.86em;line-height:1.7;white-space:pre;
  color:var(--shiki-dark,#d6e2f5);                        /* ثيم one-dark-pro */
}
.alm-md pre.shiki-box code span{color:var(--shiki-dark,inherit)}
.alm-md pre.shiki-box:focus-visible{outline:1px solid var(--alm-cyan);outline-offset:2px}

/* الوضع الفاتح (احتياطي مستقبلي): قلب الألوان عبر متغيرات الثيم المزدوج
   — لا يعيد رسم شيء؛ يكفي body.alm-shiki-light (يضبطه setShikiTheme) */
body.alm-shiki-light .alm-md pre.shiki-box{
  background-color:var(--shiki-light-bg,#ffffff);
  border-color:rgba(2,6,17,.14);
}
body.alm-shiki-light .alm-md pre.shiki-box code,
body.alm-shiki-light .alm-md pre.shiki-box code span{color:var(--shiki-light,#24292e)}
body.alm-shiki-light .alm-md pre.shiki-box::after{color:#94a3b8} /* شارة اللغة على خلفية فاتحة */

/* ---------- Mermaid: لمسة زجاجية فوق قاعدة components.css القائمة ---------- */
.alm-md .mermaid-box{box-shadow:var(--alm-shadow);transition:border-color .25s ease}
.alm-md .mermaid-box svg{margin:0 auto;display:block}      /* تمركز تام داخل الصندوق */
.alm-md .mermaid-box:focus-visible{outline:1px solid var(--alm-cyan);outline-offset:2px}