/* ============================================================================
   شريطُ التقدّم وهيئاتُه الخمس — **موضعٌ واحدٌ يرسمها، وسطحان يقرآنه**
   ============================================================================

   ④ · **مصدرٌ واحد** — 12/08/2026، بأمر المالك في [`P-083 §④`]:
   «**تُقرأ القواعد من موضعها الأصليّ** ⛔ **ولا نسخةَ ثانية**».

   ## 🔴 العلّةُ — **نسخةٌ ثانيةٌ عاشت يومًا واحدًا**

   **معاينةُ الهيئات الخمس في اللوحة بُنيت أمسِ** *([`P-082 §④`])* — **واللوحةُ
   لا تحمل `site.css`** ⇒ **فنُسخت أربعُ قواعدَ إلى `app.css` بمفردات اللوحة**
   *(~~`.pp-bar--2` … `.pp-bar--5`~~)*، **وحُرست النسختان بحارسٍ يقارن الإعلانات
   بايتًا ببايت** *(~~`ProgressBarPreviewGuardTest`~~)*.

   ⚠️ **والحارسُ كان يمنع التفرّق ولا يمنع النسخ** — **دَينٌ أُعلن يومَ كُتب.**

   ## ✅ **وهذا الملفُّ هو موضعُها الأصليّ اليوم**

   **يقرؤه سطحان**، ⛔ **ولا ثالثَ**:

   | | |
   |---|---|
   | **الموقعُ العام** | `layouts/site.blade.php` — **قبل `site.css`** ⇒ **فما في ورقة الموقع من قواعدَ أخصَّ يبقى فوقه** *(`.pcard--design-3 .pbar`)* |
   | **لوحةُ التحكم** | `layouts/app.blade.php` — **بعد `app.css`** ⇒ **معاينةُ الهيئات في «إعدادات صفحة المشاريع» ترسم ما يرسمه الموقعُ بالحرف** |

   ⛔ **وما لا يتسرّب إلى اللوحة بهذا**: **لا شيءَ من `site.css`** — **هذا
   ملفٌّ مستقلٌّ لا يستورده ولا يشير إليه**، **وأصنافُه** *(`.pbar` وأخواتُها)*
   **لا يحملها في اللوحة كلِّها إلا عناصرُ المعاينة الخمسة** — **ويحرسه**
   `ProgressBarPreviewGuardTest`.

   ## المتغيّرات

   **كلُّ لونٍ هنا من الثيم** ⛔ **ولا لونَ مكتوب**: `--line` · `--primary` ·
   `--text` · `--on-primary` · `--pbar-sheen`. **وفي اللوحةِ تكتبها
   `SiteTheme::previewCss()` في نطاق المعاينة وحدَه** ⇒ **فخارجَ النطاق لا
   قيمةَ لها.**

   ---

   🔴 **الارتفاع واحد في الخمس — <span dir="ltr">0.5rem</span> — وموضعُ الشريط
   واحد**، بأمر المالك 12/08/2026: أيُّ تغييرٍ في الارتفاع يطيل الكرتَ فتنكسر
   الشبكةُ والصفوف، وعلى الهاتف أسوأ. ⇒ **فالفرقُ داخلَ الشريط لا في حجمه**،
   ولا واحدةٌ من الأربع الجديدة تكتب `height` ولا `margin` ولا `padding`.

   ⛔ **ولا رقمَ يُزاد على الشريط**: الأرقامُ الثلاثةُ تحته تبقى كما هي —
   البندُ هيئةٌ لا معلومة.

   ⚠️ **والاستدارةُ هنا `999px` مكتوبةٌ بيدٍ لا `var(--radius-small)`** —
   وكانت كذلك منذ بُني الشريط، **وتبقى**: هذا هو الاستثناءُ المكتوب في
   ذ-١ شرط ٥، وعلّتُه أنّ ذ-٦ حرّك `--radius-small` لشكلَين ⇒ **فلو تبعه
   الشريطُ لتغيّرت هيئتُه بقرارٍ لا يخصّه**. */
.pbar {
    position: relative;
    display: block;
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.pbar__fill {
    display: block;
    height: 100%;
    background: var(--primary);
}

/* ② مقسّم لخانات — عشرُ خاناتٍ متجاورة، والفواصلُ بلون المجرى نفسِه ⛔ لا
   لونٌ جديد: فما امتلأ يُرى مقطَّعًا فتعدّه العين، وما لم يمتلئ يبقى مجرًى. */
.pbar--2::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to left,
        transparent 0 calc(10% - 2px),
        var(--line) calc(10% - 2px) 10%
    );
}

/* ③ متدرّج اللون — يبدأ من لون المجرى وينتهي بلون الجمعية ⛔ ولا لونَ ثالث،
   والاتجاه إلى اليسار لأن الشريط يمتلئ من اليمين في صفحةٍ عربية. */
.pbar--3 .pbar__fill {
    background: linear-gradient(to left, var(--line), var(--primary));
}

/* ④ بعلامة الهدف — خطٌّ رفيعٌ عند نهاية المجرى، أي عند الهدف نفسِه.

   > # ✅ **تبقى كما هي — حسمُ المالك 12/08/2026 في [`P-082 §⑨`]**
   >
   > ⛔ **بلا تنفيذٍ ولا تغييرِ قيمة** — **وهذه علّةُ الإبقاء مكتوبةً بتاريخها،
   > وهي كلُّ ما في ذلك البند.**
   >
   > 🔴 **وما رُفع إليه، بالرقم لا بالوصف**: **أثرُ هذه الهيئة
   > <span dir="ltr">14</span> بكسلًا من <span dir="ltr">3,808</span>** —
   > <span dir="ltr">0.1970٪</span> **عدَّ بكسلٍ و**<span dir="ltr">0.1388٪</span>
   > **وزنًا** *([`T-085 §٢`])* — **خطٌّ بعرض بكسلين في الطرف** ⇒ **تُرى إن نُظر
   > إليها ولا تُلمح بالمرور.**
   >
   > 🎨 **ومعه حكمُ عين الفنّان بنصّه** *([`R-092/م١ §٢`])*: «**العلامةُ في
   > الطرف الذي انتهى إليه المجرى — أي عند <span dir="ltr">100٪</span> — وذلك
   > موضعٌ يعرفه المشاهدُ بلا علامة** ⇒ **فالعلامةُ تقول ما هو مقولٌ أصلًا**» ·
   > «**الاسمُ يَعِد بأكثر ممّا يقع**».
   >
   > ⇒ **وحسم المالكُ بالإبقاء على علمٍ بالرقمين** — **وهو الفرقُ بين قيمةٍ
   > تبقى بقرارٍ وقيمةٍ تبقى بالسهو.** ⚠️ **وما تغيّر أنها تُرى قبل الاختيار**:
   > **معاينةُ اللوحة** ⇒ **فمن يختارها يختارها وقد رآها.** */
/* > # ✅ **ولونُها صار يقرأ المجرى — 12/08/2026، [`P-086 §②`]**
   >
   > **وكان ~~`background: var(--text)`~~** — **ويبقى مقروءًا ولا يُمحى**
   > (RULES §٩/١). 🔴 **وعلّةُ تغييره**: **حبرُ الصفحة يُشتقُّ للصفحة،
   > والعلامةُ تقف على مجرى الشريط** *(`--line`)* ⇒ **قيمةٌ من سطحٍ لا تلمسه**
   > — **وهي علّةُ اللمعة نفسُها.**
   >
   > **ومقيسًا على `high_contrast`**: **حبرُ الصفحة `#000000` والمجرى
   > `#000000`** ⇒ **تباينٌ <span dir="ltr">1.0000</span>: علامةٌ لا وجودَ
   > لها** ⇐ **وبالمشتقّ <span dir="ltr">21.0000</span>** *([`T-090 §٢`])*.
   > ✅ **وأدنى ما تعطيه على الثمانِ والعشرين <span dir="ltr">9.3912</span>**
   > ⛔ **ولا لونَ كُتب**: `SiteTheme::readableInkOn(line)`. */
.pbar--4::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 2px;
    background: var(--pbar-goal);
}

/* ⑤ بلمعةٍ تمرّ — 🔴 على صفحة المشروع وحدَها، بأمر المالك: تسعُ لمعاتٍ تمرّ
   معًا في شبكةٍ واحدةٍ تجعلها ترقص فلا تعرف العينُ أين تقع. ⇒ فالمُحدِّدُ
   `.project__progress` جزءٌ من القاعدة لا زينةٌ فيها.

   ✅ **والمُحدِّدُ الثاني `#projects_progress_preview` هو معاينةُ اللوحة** —
   **موضعُ الاختيار** ⇒ **ومن يختار هيئةً يراها تعمل.** ⛔ **ولا ثالثَ**:
   **الشبكةُ التي تُرقص اللمعاتِ لا توجد في المعاينة — خمسُ هيئاتٍ مختلفات لا
   تسعُ نسخٍ من واحدة.**

   واللونُ `--on-primary` — الحبرُ الذي يُقرأ فوق لون الجمعية بحكم اشتقاقه ⇒
   فاللمعةُ تُرى على الثمانِ والعشرين ⛔ ولا لونَ يُخترع. والزمنُ
   <span dir="ltr">2.5s</span> = عشرةُ أضعاف أبطأ انتقالٍ في النظام
   *(<span dir="ltr">0.25s</span>)* — مشتقٌّ بمذهب «عُشر الخطوة» ⛔ لا مخترَع.

   > # ✅ **أثرٌ واحدٌ لا رقمان — 12/08/2026، بأمر المالك في [`P-083 §②`]**
   >
   > **وما كان مكتوبًا هنا يبقى مقروءًا ولا يُمحى** (RULES §٩/١): **الشفافيةُ
   > كانت ~~<span dir="ltr">0.45</span> على الثمانِ والعشرين~~**، **ثم صارت
   > أمسِ ~~رقمين يقرآن ضوءَ الصفحة: <span dir="ltr">0.50</span> و<span dir="ltr">0.90</span>~~.**
   >
   > 🔴 **والسببُ الجذريّ**: **الصفحةُ ليست سطحَ اللمعة** — **اللمعةُ تمرُّ
   > داخل `--primary`** ⇒ **فمعادلةٌ تقرأ الصفحةَ تشتقُّ من لونٍ لا تلمسه.**
   >
   > ⇒ **و`--pbar-sheen` اليومَ مشتقّةٌ لتُحدث أثرًا واحدًا على الثمانِ
   > والعشرين** — `SiteTheme::progressSheen()` — **فرقُ إضاءةٍ قدرُه
   > ~~<span dir="ltr">0.188</span>~~ <span dir="ltr">0.252</span> بين الذروة
   > والمِلء** ⛔ **ولا رقمَ في هذه الورقة**. **وطرفا الأثر
   > ~~<span dir="ltr">1.02</span>~~ <span dir="ltr">1.01</span> ضعفًا بعد أن
   > كانا <span dir="ltr">3.51</span>** — [`T-088 §٢`].
   >
   > > ## ✅ **ورُفع الهدفُ — 12/08/2026، بأمر المالك في [`P-084 §②`]**
   > >
   > > **والمشطوبُ يبقى مقروءًا** (RULES §٩/١). **وعلّتُه بنصّه**: «**المساواةُ
   > > تحقّقت لكنها اشتُريت بالنزول**» ⇒ **فصار الهدفُ وسيطَ آثارِ الستِّ
   > > الداكنة لا أضعفَها** ⛔ **ولا رقمَ كُتب بيد.** */
.project__progress .pbar--5 .pbar__fill::after,
#projects_progress_preview .pbar--5 .pbar__fill::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inline-size: 40%;
    opacity: var(--pbar-sheen);
    background: linear-gradient(to left, transparent, var(--on-primary), transparent);
    animation: pbar-sheen 2.5s linear infinite;
}

.project__progress .pbar--5 .pbar__fill,
#projects_progress_preview .pbar--5 .pbar__fill {
    position: relative;
    overflow: hidden;
}

@keyframes pbar-sheen {
    from {
        inset-inline-start: -40%;
    }

    to {
        inset-inline-start: 100%;
    }
}

/* 🔴 ومن أطفأ الحركةَ في جهازه لا يراها — والهيئةُ تبقى صالحةً ساكنة، فالشريطُ
   يقرأ رقمَه كما يقرؤه في الأربع الأخرى. */
@media (prefers-reduced-motion: reduce) {
    .project__progress .pbar--5 .pbar__fill::after,
    #projects_progress_preview .pbar--5 .pbar__fill::after {
        animation: none;
        content: none;
    }
}