/* =====================================================================
   إنفوغراف المسجد — الألوان والهيكل

   ألوان الرسوم ليست ذوقاً: كل لون هنا مرَّ على مِحكّ عمى الألوان
   (بروتان ودوتان بنموذج Machado 2009) وعلى حدّ التباين مع الخلفية،
   وأُبقي منها ما نجح في الوضعين معاً — النهاري والليلي. ولا يُبدَّل
   لونٌ منها إلا بإعادة القياس.

   المقياس المسجَّل (نهاري، على أبيض):
     أسوأ زوجٍ متجاور  ΔE 9.2 (دوتان) · وبالرؤية الكاملة 27.6
   والليلي على #111D1B:
     أسوأ زوجٍ متجاور  ΔE 8.6 (بروتان) · وبالرؤية الكاملة 22.5

   وترتيب الفتحات هو آلةُ السلامة لا زينة: اللون يتبع الشيء لا رتبته،
   فلو رشّحتَ سلسلةً بقي لون الباقيات كما هو.
   ===================================================================== */
:root{
  /* ثمانِ فتحاتٍ للهويّة — تُسنَد بالترتيب ولا تُدوَّر */
  --v1:#1baf7a; --v2:#eb6834; --v3:#2a78d6; --v4:#eda100;
  --v5:#4a3aa7; --v6:#e34948; --v7:#008300; --v8:#e87ba4;
  /* سلّمٌ متدرّج للمقدار — لونٌ واحد من الفاتح إلى الغامق */
  --sq1:#cde2fb; --sq2:#9ec5f4; --sq3:#6da7ec; --sq4:#3987e5;
  --sq5:#2a78d6; --sq6:#1c5cab; --sq7:#0d366b;
  /* سلّمٌ رُتَبيّ لخمس مراحل — أفتحه يبقى فوق ٢:١ على الخلفية */
  --or1:#86b6ef; --or2:#5598e7; --or3:#2a78d6; --or4:#1c5cab; --or5:#104281;
  /* أثاث الرسم */
  --vsurf:#FFFFFF; --vgrid:#E4EBE9; --vaxis:#C3D2CE; --vdim:#AEC0BB;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --v1:#199e70; --v2:#d95926; --v3:#3987e5; --v4:#c98500;
  --v5:#9085e9; --v6:#e66767; --v7:#008300; --v8:#d55181;
  --sq1:#0d366b; --sq2:#1c5cab; --sq3:#2a78d6; --sq4:#3987e5;
  --sq5:#6da7ec; --sq6:#9ec5f4; --sq7:#cde2fb;
  --or1:#184f95; --or2:#256abf; --or3:#3987e5; --or4:#6da7ec; --or5:#9ec5f4;
  --vsurf:#111D1B; --vgrid:#20302E; --vaxis:#2E4441; --vdim:#3E5854;
}}
:root[data-theme="dark"]{
  --v1:#199e70; --v2:#d95926; --v3:#3987e5; --v4:#c98500;
  --v5:#9085e9; --v6:#e66767; --v7:#008300; --v8:#d55181;
  --sq1:#0d366b; --sq2:#1c5cab; --sq3:#2a78d6; --sq4:#3987e5;
  --sq5:#6da7ec; --sq6:#9ec5f4; --sq7:#cde2fb;
  --or1:#184f95; --or2:#256abf; --or3:#3987e5; --or4:#6da7ec; --or5:#9ec5f4;
  --vsurf:#111D1B; --vgrid:#20302E; --vaxis:#2E4441; --vdim:#3E5854;
}

/* ---- طبقات التعبئة والخطّ: صنفٌ لكلّ فتحة، فالوضع الليلي يعمل بلا JS ---- */
.vf1{fill:var(--v1)} .vf2{fill:var(--v2)} .vf3{fill:var(--v3)} .vf4{fill:var(--v4)}
.vf5{fill:var(--v5)} .vf6{fill:var(--v6)} .vf7{fill:var(--v7)} .vf8{fill:var(--v8)}
.vs1{stroke:var(--v1)} .vs2{stroke:var(--v2)} .vs3{stroke:var(--v3)} .vs4{stroke:var(--v4)}
.vs5{stroke:var(--v5)} .vs6{stroke:var(--v6)} .vs7{stroke:var(--v7)} .vs8{stroke:var(--v8)}
.vo1{fill:var(--or1)} .vo2{fill:var(--or2)} .vo3{fill:var(--or3)}
.vo4{fill:var(--or4)} .vo5{fill:var(--or5)}
.vq1{fill:var(--sq1)} .vq2{fill:var(--sq2)} .vq3{fill:var(--sq3)} .vq4{fill:var(--sq4)}
.vq5{fill:var(--sq5)} .vq6{fill:var(--sq6)} .vq7{fill:var(--sq7)}
.vdimf{fill:var(--vdim)} .vdims{stroke:var(--vdim)}
/* ألوانُ **الحال** منفصلةٌ عن ألوان الهويّة عمداً: لونُ سلسلةٍ
   يُستعمل لمعنى «سليم/متأخّر» يخلط قناتين، ولونُ حالٍ يُستعمل سلسلةً
   يجعل السلسلةَ الرابعة تبدو إنذاراً. ولا يُحمَّل اللونُ وحده معنىً
   هنا: مع كلّ حالٍ اسمُها في الوسيلة وفي الجدول. */
.vst-ok{fill:var(--ok)} .vst-bad{fill:var(--bad)} .vst-warn{fill:var(--warn)}
.vtrack{fill:var(--vgrid)}

/* النقش — قناةٌ احتياطية حين يخذل اللون: عمى ألوانٍ شديد، أو طباعةٌ
   بالأسود، أو وضعُ الألوان المفروضة. مُطفأةٌ ما لم تُطلب، ولها لونٌ
   احتياطيّ بعد `url()` كي لا تختفي العلامة لو تعذّر النقش. */
.viz-tex .vf1{fill:url(#vtex1) var(--v1)} .viz-tex .vf2{fill:url(#vtex2) var(--v2)}
.viz-tex .vf3{fill:url(#vtex3) var(--v3)} .viz-tex .vf4{fill:url(#vtex4) var(--v4)}
.viz-tex .vf5{fill:url(#vtex5) var(--v5)} .viz-tex .vf6{fill:url(#vtex6) var(--v6)}
.viz-tex .vf7{fill:url(#vtex7) var(--v7)} .viz-tex .vf8{fill:url(#vtex8) var(--v8)}

/* ---- أثاث الرسم: خطوطٌ شعريّة صلبة، لا متقطّعة، ومتراجعة ---- */
.vgrid{stroke:var(--vgrid);stroke-width:1}
.vaxis{stroke:var(--vaxis);stroke-width:1}
.vtxt{fill:var(--muted);font-size:11.5px}
.vtxt2{fill:var(--ink-2);font-size:12.5px}
.vval{fill:var(--ink);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.vring{stroke:var(--vsurf);stroke-width:2}
.vhit{fill:transparent;cursor:default}
.vcross{stroke:var(--vaxis);stroke-width:1;pointer-events:none}

/* ===================== هيكل الصفحة ===================== */
.iz-hero{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:20px 22px;margin-bottom:16px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.iz-hero .hnum{font-family:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  font-weight:600;font-size:52px;line-height:1.05;color:var(--brand-ink);
  font-variant-numeric:normal;letter-spacing:-.01em}
.iz-hero .hlb{font-size:12.5px;color:var(--muted);display:block;margin-bottom:2px}
.iz-hero .hex{font-size:12.5px;color:var(--ink-2);max-width:52ch;line-height:1.75}
.iz-hero .hspark{margin-inline-start:auto;min-width:190px}

.iz-bar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.iz-bar .sep{flex:1}
.iz-bar .lb{font-size:12.5px;color:var(--muted);margin-inline-end:2px}
.iz-tog{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;white-space:nowrap;
  color:var(--ink-2);border:1px solid var(--line);background:var(--surface);
  padding:6px 11px;border-radius:999px;cursor:pointer}
.iz-tog input{margin:0}

.iz-jump{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.iz-jump a{font-size:12.5px;text-decoration:none;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);padding:5px 12px;border-radius:999px}
.iz-jump a:hover{border-color:var(--line-2);background:var(--surface-2)}

.iz-sec{margin:26px 0 6px;scroll-margin-top:14px}
.iz-sec h2{font-size:16px;display:flex;align-items:center;gap:9px}
.iz-sec h2 .ico{width:26px;height:26px;border-radius:8px;background:var(--brand-soft);
  color:var(--brand-ink);display:grid;place-items:center;font-size:13px;flex:0 0 auto}
.iz-sec .lead{font-size:12.5px;color:var(--muted);margin:4px 0 12px}

/* بطاقتان في السطر على الأكثر: ثلاثٌ تُصغّر الرسم حتّى يصير نصُّه
   ستّة بكسلات. والوضوحُ قبل الكثافة. */
.iz-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(430px,1fr))}
@media (min-width:1750px){.iz-grid{grid-template-columns:repeat(2,1fr)}}
.iz-grid.one{grid-template-columns:1fr}

.iz-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:15px 17px;display:flex;flex-direction:column;
  transition:opacity .18s}
/* عند التحديث تبقى الأرقامُ القديمةُ مكانَها بشفافيّةٍ أقلّ: هيكلٌ
   عظميٌّ يومض يقفز بالتخطيط ويُفقد القارئَ موضعَه. */
.iz-card.stale,.iz-hero.stale{opacity:.45;pointer-events:none}
.iz-card h3{font-size:13.5px;margin:0 0 3px}
.iz-card .mean{font-size:12px;color:var(--ink-2);line-height:1.7;margin:0 0 11px}
.iz-card .foot{font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.65}
.iz-card .cbar{display:flex;align-items:flex-start;gap:10px;margin-bottom:2px}
.iz-card .cbar .sp{flex:1}
.iz-card .tblbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-size:11.5px;padding:3px 10px;border-radius:999px;cursor:pointer;white-space:nowrap}
.iz-card .tblbtn[aria-pressed="true"]{background:var(--brand-soft);
  border-color:var(--brand-soft);color:var(--brand-ink);font-weight:600}
/* اتّجاه الرسم من اليسار إلى اليمين — لا لأنّ الصفحة كذلك، بل لأنّ
   `text-anchor` في SVG يتبع اتّجاه الكتابة: في صفحةٍ عربيّة يصير
   «start» يمينَ النصّ، فيمتدّ الكلامُ إلى اليسار فوق الأعمدة.
   قِيس هذا في المتصفّح: كانت تسمية «وصل» تركب شريطها. وبتثبيت
   الاتّجاه هنا صار «start» يسارَ النصّ كما تفترض الهندسةُ فوق،
   والنصُّ العربيُّ نفسه يبقى يُشكَّل ويُرتَّب من اليمين كما هو —
   فالثنائيّة الاتّجاهيّة تعمل داخل الكلمة لا على المقطع كلّه.
   أمّا ترتيبُ الزمن فما زال من اليمين إلى اليسار: هندسةٌ لا اتّجاهُ
   كتابة. */
.iz-card svg{display:block;width:100%;height:auto;overflow:visible}

/* الوسيلة — حاضرةٌ دائماً متى كانت السلاسل اثنتين فأكثر */
.vleg{display:flex;flex-wrap:wrap;gap:5px 16px;margin:0 0 9px;font-size:12px;color:var(--ink-2)}
.vleg span{display:inline-flex;align-items:center;gap:6px}
.vleg i{width:11px;height:11px;border-radius:3px;flex:0 0 auto;display:inline-block}
.vleg i.ln{height:3px;width:15px;border-radius:2px}

/* الجدول التوأم — كل رقمٍ في الرسم موجودٌ هنا بلا تمرير فأرة */
.iz-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.iz-tbl th,.iz-tbl td{padding:6px 9px;border-bottom:1px solid var(--line);text-align:start}
.iz-tbl th{color:var(--muted);font-weight:500;font-size:11.5px}
.iz-tbl td.num{font-variant-numeric:tabular-nums;text-align:start;white-space:nowrap}
.iz-tbl i.sw{width:10px;height:10px;border-radius:3px;display:inline-block;
  margin-inline-end:6px;vertical-align:-1px}
.iz-tblwrap{overflow-x:auto}

.iz-empty{border:1px solid var(--line-2);border-radius:10px;padding:16px;
  color:var(--muted);font-size:12.5px;line-height:1.8;text-align:center}

/* ---- التلميحة: تُحسِّن ولا تحجب — كل رقمٍ فيها موجودٌ في الجدول ---- */
#viz-tip{position:fixed;z-index:9999;pointer-events:none;max-width:250px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-2);
  border-radius:9px;box-shadow:0 6px 24px -8px rgba(0,0,0,.35);
  padding:8px 11px;font-size:12px;line-height:1.7;display:none}
#viz-tip .tt{font-size:11.5px;color:var(--muted);margin-bottom:4px}
#viz-tip .tr{display:flex;align-items:center;gap:7px;white-space:nowrap}
#viz-tip .tr i{width:14px;height:3px;border-radius:2px;flex:0 0 auto}
#viz-tip .tr b{font-variant-numeric:tabular-nums;font-weight:600}
#viz-tip .tr span{color:var(--ink-2);font-size:11.5px}

[data-vtip]{outline:none}
[data-vtip]:focus-visible .vlift,[data-vtip]:hover .vlift{opacity:.14}
.vlift{fill:var(--ink);opacity:0;transition:opacity .12s}

@media (max-width:820px){
  .iz-hero{gap:14px;padding:16px}
  .iz-hero .hnum{font-size:40px}
  .iz-hero .hspark{margin-inline-start:0;width:100%}
  .iz-grid{grid-template-columns:1fr}

  /* ---- أهدافُ اللمس هنا قِيست فوُجدت أصغرَ ما في المنصّة ----

     على ٣٩٠×٨٤٤:
       • مربّعُ «نقشٌ بدل اللون» = **١٣×١٣ بكسلاً**. وهو مفتاحُ
         إتاحةٍ لمن لا يميّز الألوان — فكان أصغرَ ما في الصفحة،
         ولا يبلغ حتى حدَّ WCAG الأدنى (٢٤). ومن وُضع له المفتاح
         هو أوّلُ من عجز عن ضغطه.
       • «جدول» فوق كلّ رسم = **٢٢ بكسلاً**، وهو الطريقُ الوحيد
         إلى قراءة الأرقام لمن لا يرى الرسم. ودونَ الحدّ كذلك.
     فكلاهما يكبر على الهاتف، والشاشةُ الواسعة كما كانت. */
  .iz-tog{padding:9px 13px;font-size:13px;min-height:40px}
  .iz-tog input{width:20px;height:20px;flex:0 0 20px}
  .iz-card .tblbtn{font-size:12.5px;padding:8px 14px;min-height:34px}
  .iz-bar .btn.sec.sm{min-height:40px}
  /* روابطُ القفز: الصفحةُ ٥٠٩٥ بكسلاً على الهاتف، فهي طريقُ الوصول
     الوحيد إلى قسمٍ بعيد — وكانت ٣٣ بكسلاً. */
  .iz-jump a{padding:9px 14px;font-size:13px;min-height:40px;
    display:inline-flex;align-items:center}
  /* والقفزُ يقع تحت الشريط العلويّ اللاصق ما لم يُترك له مكان */
  .iz-sec{scroll-margin-top:72px}
}

/* ---- الطباعة: الشيخ يطبع التقرير، فلا تُقصّ بطاقةٌ بين صفحتين ---- */
@media print{
  .iz-bar,.iz-jump,.iz-card .tblbtn{display:none!important}
  .iz-card,.iz-hero{break-inside:avoid;box-shadow:none;border-color:#ccc}
  .iz-grid{grid-template-columns:1fr 1fr}
  #viz-tip{display:none!important}
}
@media (forced-colors:active){
  .iz-card,.iz-hero{border:1px solid CanvasText}
}

/* ---- «ماذا يحتاج انتباهك الآن؟» — سطورٌ تنقل إلى شاشتها ---- */
.iz-attwrap{display:grid;gap:8px;margin-bottom:16px}
.iz-att{display:flex;align-items:center;gap:12px;width:100%;text-align:start;
  background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--line-2);
  border-radius:11px;padding:11px 14px;cursor:pointer;color:var(--ink);
  transition:transform var(--t1) var(--ease),border-color var(--t1) var(--ease),
             box-shadow var(--t2) var(--ease-out)}
.iz-att:hover{transform:translateX(-2px);box-shadow:var(--shadow);border-color:var(--line-2)}
.iz-att.bad{border-inline-start-color:var(--bad)}
.iz-att.warn{border-inline-start-color:var(--warn)}
.iz-att.ok{border-inline-start-color:var(--ok);cursor:default}
.iz-att .ico{width:26px;height:26px;flex:0 0 auto;border-radius:8px;display:grid;
  place-items:center;font-size:13px;background:var(--surface-2);color:var(--ink-2)}
.iz-att.bad .ico{background:var(--bad-soft);color:var(--bad)}
.iz-att.warn .ico{background:var(--warn-soft);color:var(--warn)}
.iz-att.ok .ico{background:var(--ok-soft);color:var(--ok)}
.iz-att b{display:block;font-size:13.5px;font-weight:600;line-height:1.4}
.iz-att span:not(.ico):not(.arw){display:block;font-size:12px;color:var(--muted);line-height:1.55}
.iz-att .arw{margin-inline-start:auto;color:var(--muted);font-size:17px;line-height:1}
.viz-stale .iz-card,.viz-stale .iz-hero,.viz-stale .tiles{opacity:.45;pointer-events:none;
  transition:opacity var(--t2) var(--ease)}