/* ══ لماذا Finviro /why-finviro — الكتلةُ الأولى نُقلت من وسم نمطٍ مضمَّن (القاعدة 1 · 2026-09-03) ══
   ⚖ الكتلةُ الثانية بقيت في القالب لأنّها تحمل تعبيرَ Blade داخل CSS (تُعالَج بمتغيّر مضمَّن لاحقاً). */

/* ══ سجلُّ الأداء في صدارة صفحة الثقة (2026-08-07) ═══════════════════════════
   §4: أبيض/أسود · صفر استدارة · بلا ظلال. والرقمُ الكبير أسودُ لا أحمر — النسبةُ
   المنخفضة ليست خطأً يُنذَر منه بل **حقيقةٌ تُعرَض**، وتلوينُها بالأحمر يعتذر عنها. */
.wf-record{border:2px solid var(--fnv-ink);background:var(--fnv-surface);
    padding:24px 22px 20px;margin:0 0 34px;}
.wf-record__eyebrow{display:block;font-family:var(--fnv-font-body);font-size:.8125rem;
    font-weight:800;color:var(--fnv-ink-3);letter-spacing:.06em;margin-bottom:10px;}
.wf-record__h{font-family:var(--fnv-font-display);font-size:clamp(1.15rem,2.6vw,1.6rem);
    font-weight:800;line-height:1.55;margin:0;color:var(--fnv-ink);}
.wf-record__big{font-family:var(--fnv-font-mono);font-size:1.35em;font-weight:800;
    font-variant-numeric:tabular-nums;unicode-bidi:isolate;}
/* الشبكةُ ثلاثيّةٌ على الواسع وواحدةٌ على الهاتف — لا عمودان ضيّقان يكسران الرقم */
.wf-record__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    margin:20px 0 0;border-top:1px solid var(--fnv-border);}
.wf-record__grid > div{padding:14px 16px;border-inline-start:1px solid var(--fnv-border);}
.wf-record__grid > div:first-child{border-inline-start:0;}
.wf-record__grid b{display:block;font-family:var(--fnv-font-mono);font-size:1.6rem;
    font-weight:800;line-height:1.1;color:var(--fnv-ink);font-variant-numeric:tabular-nums;}
.wf-record__grid span{display:block;font-size:.8125rem;line-height:1.75;color:var(--fnv-ink-3);margin-top:4px;}
@media(max-width:640px){
    .wf-record__grid{grid-template-columns:1fr;}
    .wf-record__grid > div{border-inline-start:0;border-top:1px solid var(--fnv-border);}
    .wf-record__grid > div:first-child{border-top:0;}
}
.wf-record__note{font-size:.95rem;line-height:2;color:var(--fnv-ink-muted);
    max-width:var(--fnv-measure);margin:16px 0 0;}
/* ⛔ الصفحةُ كانت **بلا مسار تحويلٍ واحد** — صفحةُ ثقةٍ لا تقول ماذا بعد. */
.wf-record__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
/* زرُّ التحقّق داخل البطاقة: هادئٌ لا يُزاحم العنوان، وهدفُ لمسٍ 44px */
.fnv-moat__vbtn{display:inline-flex;align-items:center;min-height:44px;margin-top:9px;
    padding:9px 14px;border:1.5px solid var(--fnv-ink);font-family:var(--fnv-font-body);
    font-size:.8125rem;font-weight:700;line-height:1.6;color:var(--fnv-ink);
    text-decoration:none;transition:background .15s,color .15s;}
.fnv-moat__vbtn:hover,.fnv-moat__vbtn:focus-visible{background:var(--fnv-ink);color:var(--fnv-bg);}
.wf-btn{display:inline-flex;align-items:center;min-height:44px;padding:11px 18px;
    border:1.5px solid var(--fnv-ink);font-family:var(--fnv-font-body);font-size:.92rem;
    font-weight:700;line-height:1.6;color:var(--fnv-ink);text-decoration:none;
    transition:background .15s,color .15s;}
.wf-btn:hover,.wf-btn:focus-visible{background:var(--fnv-ink);color:var(--fnv-bg);}
/* ⛔ **كان `wf-btn--solid` فكان النصُّ أبيضَ على أبيضَ في الوضع الداكن**
     (قِيس 2026-08-30 · نسبةُ تباينٍ **1.00**): `main.css` الموروثة تحمل
     `[class*="btn--"]:not(.btn--link):not(.btn--light){color:#fff}` بخصوصيّة
     **(0,3,0)**، وصنفي **(0,1,0)** فتدهسه. والاصطدامُ **بالمصادفة**: أيُّ صنفٍ
     لنا يحوي `btn--` يرث لوناً أبيضَ مفروضاً.
   ⚖ **ولم يظهر فاتحاً**: الخلفيّةُ `--fnv-ink` سوداءُ هناك فالأبيضُ المفروضُ
     صحيحٌ بالمصادفة. وانقلبت داكناً فصار الزرُّ أبيضَ والنصُّ أبيض.
   ⚖ **والعلاجُ إزالةُ الاصطدام لا مصارعةُ الخصوصيّة**: شرطةٌ واحدةٌ بدل اثنتين
     ⇒ لا يطابقه المحدِّدُ الموروثُ أصلاً. ورفعُ الخصوصيّة يترك الفخَّ لمن بعدي. */
.wf-btn-solid{background:var(--fnv-ink);color:var(--fnv-bg);}
.wf-btn-solid:hover,.wf-btn-solid:focus-visible{background:var(--fnv-bg);color:var(--fnv-ink);}

/* ══ الكتلةُ الثانية — نُقلت من وسمٍ مضمَّنٍ في القالب (‏قاعدة 1 · 2026-09-04) ══
   ⚖ بقيت هناك بعذر «تحمل تعبيرَ Blade»، والمقيسُ صفرُ تعبيرٍ في 91 سطراً. */
    .fnv-moat{background:var(--fnv-surface);padding:56px 0 72px;}
    .fnv-moat__hero{max-width:840px;margin-bottom:52px;}
    .fnv-moat__eyebrow{display:inline-block;font-family: var(--fnv-font-body);font-size:.8125rem;font-weight:800;
        letter-spacing:normal;color:var(--fnv-dark-text);background:var(--fnv-dark-bg);padding:5px 11px;margin-bottom:16px;}
    .fnv-moat__h1{font-family: var(--fnv-font-body);font-weight:800;font-size:var(--fnv-size-title);
        line-height:1.45;color:var(--fnv-ink);margin:0 0 18px;}
    .fnv-moat__lede{font-family: var(--fnv-font-body);font-size:1.02rem;line-height:2.1;
        color:var(--fnv-ink-muted);margin:0 0 16px;}
    .fnv-moat__lede b{color:var(--fnv-ink);font-weight:800;}
    .fnv-moat__note{font-family: var(--fnv-font-body);font-size:.86rem;line-height:1.95;color:var(--fnv-ink-3);
        margin:0;padding:12px 16px;border-inline-start:3px solid var(--fnv-ink);background:var(--fnv-surface);}

    .fnv-moat__h2{font-family: var(--fnv-font-body);font-weight:800;font-size:clamp(1.25rem,2.6vw,1.6rem);
        color:var(--fnv-ink);margin:0 0 22px;padding-bottom:10px;border-bottom:1.5px solid var(--fnv-ink);}
    .fnv-moat__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;
        background:var(--fnv-surface);border-block-start:1px solid var(--fnv-border);border-inline-start:1px solid var(--fnv-border);margin-bottom:52px;}
/* ⚖ hairgrid (2026-09-06): الخطوطُ من حدود البطاقات لا من خلفيّةٍ تحت الفجوات — لا خلايا رماديّةً يتيمة. */
.fnv-moat__grid>*{border-block-end:1px solid var(--fnv-border);border-inline-end:1px solid var(--fnv-border);min-width:0}
    .fnv-moat__c{background:var(--fnv-surface);padding:22px 20px;}
    .fnv-moat__num{font-family: var(--fnv-font-mono);font-size:.8125rem;font-weight:800;color:var(--fnv-ink-3);
        display:block;margin-bottom:8px;}
    .fnv-moat__ct{font-family: var(--fnv-font-body);font-weight:800;font-size:1.02rem;line-height:1.7;
        color:var(--fnv-ink);margin:0 0 10px;}
    .fnv-moat__cb{font-family: var(--fnv-font-body);font-size:.88rem;line-height:2;color:var(--fnv-ink-muted);margin:0 0 12px;}
    .fnv-moat__cv{font-family: var(--fnv-font-body);font-size:.8125rem;line-height:1.9;color:var(--fnv-ink-3);
        margin:0;padding-top:10px;border-top:1px dashed var(--fnv-border);}
    .fnv-moat__cv b{color:var(--fnv-ink);font-weight:800;}

    .fnv-moat__honest{border: var(--fnv-card-border) solid var(--fnv-ink);padding:22px 24px;margin-bottom:44px;}
    .fnv-moat__honest ul{margin:0;padding-inline-start:20px;}
    .fnv-moat__honest li{font-family: var(--fnv-font-body);font-size:.92rem;line-height:2.05;
        color:var(--fnv-ink-muted);margin-bottom:10px;}
    .fnv-moat__honest li:last-child{margin-bottom:0;}
    .fnv-moat__honest b{color:var(--fnv-ink);font-weight:800;}
    /* ⛔ حُذفت هنا **كتلةُ إعلاناتٍ يتيمة** فقدت مُحدِّدها (2026-08-06): كانت تُنسَب
         إلى عنوان «شريط صحّة المصادر» المحذوف بقرار المالك، فبقيت خصائصُه بلا رأس
         بعد إزالة السطر. و`}` الزائد كان يُغلق `.fnv-moat__honest b` مبكّراً ويجعل
         ما بعده يُقرأ مُحدِّداً — أي أنّ قاعدةً سليمةً كانت تسقط صامتةً.
         ⚖ ولا يُخترع لها مُحدِّد: المَحرفُ الذي كانت تُزيّنه لم يعد موجوداً. */

    .fnv-moat__cta{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
        padding:24px;background:var(--fnv-dark-bg);}
    .fnv-moat__cta > div:first-child{font-family: var(--fnv-font-body);font-size:.94rem;line-height:2;
        color:var(--fnv-on-dark-1);flex:1 1 320px;}
    .fnv-moat__cta b{color:var(--fnv-dark-text);font-weight:800;display:block;margin-bottom:4px;}
    .fnv-moat__btns{display:flex;gap:10px;flex-wrap:wrap;}
    /* ⛔ **ثلاثُ `!important` كانت تُصارع فخّاً موروثاً، والعلاجُ إزالتُه** (2026-09-04):
         `main.css` تحمل `[class*="btn--"]:not(.btn--link):not(.btn--light){color:#fff}`
         بخصوصيّة (0,3,0)، و`fnv-moat__btn--solid` تحوي `btn--` **بالمصادفة** فتُطابقه.
       ⚖ **وهو الفخُّ عينُه الذي عُولج في `wf-btn-solid` أسفلَ هذا الملفّ** بشرطةٍ
         واحدةٍ بدل اثنتين — ولم يُعمَّم على هذا الزرّ. فيُعمَّم اليوم: `--solid`
         ⇐ `-solid`، فلا يطابقه المحدِّثُ الموروثُ أصلاً وتسقط الثلاثُ معاً.
       ⛔ ورفعُ الخصوصيّة يترك الفخَّ لمن بعدي — والإزالةُ تُنهيه. */
    .fnv-moat__btn{font-family: var(--fnv-font-body);font-weight:800;font-size:.88rem;padding:12px 22px;
        text-decoration:none;border:1.5px solid var(--fnv-dark-text);color:var(--fnv-dark-text);white-space:nowrap;}
    .fnv-moat__btn-solid{background:var(--fnv-surface);color:var(--fnv-ink);}
    .fnv-moat__btn:hover{background:var(--fnv-surface);color:var(--fnv-ink);}
    @media (max-width:600px){ .fnv-moat{padding:36px 0 48px;} .fnv-moat__cta{padding:18px;} }

    /* ── دعوةُ الأعلى ─────────────────────────────────────────────── */
    .wf-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:20px;}
    .wf-hero-cta__n{font-family:var(--fnv-font-body);font-size:.8125rem;color:var(--fnv-ink-muted);}

    /* ── جدولُ الطرق الثلاثة ──────────────────────────────────────── */
    /* ⚖ الالتفافُ داخل حاويةٍ بتمريرٍ أفقيّ: الجدولُ أربعةُ أعمدةٍ ولا يجوز أن
         يُزحزح جسمَ الصفحة على الهاتف. */
    .wf-cmp__wrap{overflow-x:auto;margin-bottom:14px;border:1px solid var(--fnv-border);}
    .wf-cmp{width:100%;border-collapse:collapse;font-family:var(--fnv-font-body);min-width:640px;}
    .wf-cmp__cap{caption-side:bottom;padding:10px 12px 0;font-size:.8125rem;line-height:1.8;
        color:var(--fnv-ink-muted);text-align:start;}
    .wf-cmp th, .wf-cmp td{padding:11px 13px;border:1px solid var(--fnv-border);
        font-size:.86rem;line-height:1.8;text-align:start;vertical-align:top;}
    .wf-cmp thead th{font-weight:800;font-size:.875rem;color:var(--fnv-ink);
        background:var(--fnv-surface-2);border-bottom:2.5px solid var(--fnv-ink);}
    .wf-cmp__rh{font-weight:800;color:var(--fnv-ink);background:var(--fnv-surface-2);}
    .wf-cmp td{color:var(--fnv-ink-muted);}
    /* عمودُنا معكوسٌ — تمييزٌ بالبنية لا بلونٍ إضافيّ (ميثاق §4).
       ⛔ **وقعتُ في bug-1130 نفسِه بعد تسجيله بساعات** (قِيس 2026-08-14):
          كتبتُ `.wf-cmp__hu` (خصوصيّة 0,1,0) وفوقها `.wf-cmp thead th` (0,1,2)
          تضع `--fnv-surface-2` — فبقيت الخليّةُ **بيضاء** ونصُّها أبيضُ ⇒ 1.04:1.
          `!important` على `color` لا ينفع: المهزومُ كان `background`.
          القاعدة: الاستثناءُ يجب أن **يفوق** القاعدةَ التي يستثني منها. */
    /* ⚖ **و`!important` هنا زائدةٌ بعد رفع الخصوصيّة**: المحدِّدُ `(0,2,2)` يفوق
         `.wf-cmp thead th` `(0,1,2)` في اللونين معاً — والتعليقُ أعلاه يقول ذلك
         بنفسه («الاستثناءُ يجب أن يفوق القاعدة»)، فبقيت الإشارةُ بعد أن زال سببُها. */
    .wf-cmp thead th.wf-cmp__hu{background:var(--fnv-ink);color:var(--fnv-surface);}
    .wf-cmp thead th.wf-cmp__hu span{color:var(--fnv-surface);}
    /* ⚖ والقاعدةُ المهزومةُ `.wf-cmp td` `(0,1,1)` — فيكفي `(0,2,0)` بلا إلحاح. */
    .wf-cmp td.wf-cmp__us{font-weight:700;color:var(--fnv-ink);}
    .wf-cmp__after{margin-bottom:52px;}

    /* ── روابطُ الفهم ─────────────────────────────────────────────── */
    .wf-learn{border-top:1.5px solid var(--fnv-ink);padding-top:16px;margin:0 0 40px;}
    .wf-learn__t{display:block;font-family:var(--fnv-font-body);font-size:.8125rem;font-weight:800;
        color:var(--fnv-ink-muted);margin-bottom:10px;}
    .wf-learn__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;}
    .wf-learn__l a{font-family:var(--fnv-font-body);font-size:.86rem;font-weight:700;
        color:var(--fnv-ink);text-decoration:underline;text-underline-offset:4px;}
    .wf-learn__l a:hover{color:var(--fnv-ink-muted);}

    @media (max-width:600px){
        .wf-hero-cta .wf-btn{flex:1 1 100%;justify-content:center;}
        .wf-cmp th, .wf-cmp td{padding:9px 10px;font-size:.82rem;}
    }

/* ══ ديناميكيّةٌ بلا جافاسكربت ولا مكتبة (2026-09-04) ══════════════════════════
   ⚖ **المصدر**: دليلُ `scroll-entry-exit-effects` — رسومٌ متحرّكةٌ يقودها التمرير
     (‏`animation-timeline: view()`)، فالمتصفّحُ يُحرّكها على خيط المُركِّب لا على
     خيط JS. ⇒ صفرُ بايتٍ إضافيّ وصفرُ عملٍ في الخيط الرئيسيّ.
   ⛔ **ولا مكتبةَ كشفٍ بالتمرير** (‏AOS وأمثالُها): كلفةٌ دائمةٌ لأثرٍ بصريّ،
     وميثاق §2ج يمنع إطاراً ثانياً. و`IntersectionObserver` بيدٍ كان سيضيف
     مستمعاً لكلّ قسمٍ ويُعيد الطلاءَ من JS.
   ⛔ **وبوّابتان لا واحدة** كما يوجب الدليل:
     ① `prefers-reduced-motion: no-preference` — مَن طلب تقليلَ الحركة لا يراها.
     ② `@supports` — المتصفّحُ الذي لا يعرف `view()` **يعرض المحتوى كاملاً ثابتاً**،
        لا فارغاً. وهذا هو الفرقُ بين تحسينٍ تدريجيٍّ وصفحةٍ بيضاء.
   ⛔ **ولا يُحرَّك رقمٌ ماليّ**: العتامةُ والإزاحةُ على **الحاويات** وحدَها. رقمٌ
     يعدّ صعوداً يُقرأ **قيمةً تتغيّر** وهي ثابتة — وهو كذبٌ بصريّ في صفحة ثقة.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) and (animation-range: entry) {

        @keyframes wf-rise {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: none; }
        }

        /* الأقسامُ الكبرى: صعودٌ خفيفٌ عند الدخول، ولا شيءَ عند الخروج —
           إخفاءُ ما قرأه القارئُ فعلاً إزعاجٌ لا أناقة. */
        .fnv-moat__hero,
        .wf-record,
        .fnv-moat__grid,
        .wf-cmp__wrap,
        .fnv-moat__honest,
        .fnv-moat__cta {
            animation: wf-rise auto linear backwards;
            animation-timeline: view();
            /* ⚖ **`cover 0%` إلى `cover 28%`** لا `entry`: العنصرُ الطويل (‏الجدول)
                 لا يكتمل دخولُه إلّا بعد شاشةٍ كاملة، فتبقى العتامةُ ناقصةً وهو
                 مقروء. والنسبةُ الصغيرةُ تُنهي الحركةَ قبل أن يبدأ القارئُ. */
            animation-range: cover 0% cover 28%;
        }

        /* خلايا سجلّ الأداء: تتابعٌ خفيفٌ يقود العينَ يميناً ثمّ يساراً.
           ⛔ والتأخيرُ **بالنطاق لا بـ`animation-delay`**: التأخيرُ الزمنيُّ مع
              خطِّ زمنِ التمرير يُنتج قفزاتٍ عند التمرير السريع. */
        .wf-record__grid > div {
            animation: wf-rise auto linear backwards;
            animation-timeline: view();
            animation-range: cover 2% cover 26%;
        }
        .wf-record__grid > div:nth-child(2) { animation-range: cover 5% cover 29%; }
        .wf-record__grid > div:nth-child(3) { animation-range: cover 8% cover 32%; }
    }
}

/* ⚖ **وحركةٌ واحدةٌ تعمل بلا `view()` كذلك**: خطُّ الجدول المميِّزُ لعمودنا يُرسَم
     عند التحويم — تفاعلٌ بالمؤشّر لا بالتمرير، فلا يحتاج بوّابةَ `@supports`.
   ⛔ ويبقى خلف بوّابة تقليل الحركة: كلُّ حركةٍ تُطفأ بطلب القارئ. */
@media (prefers-reduced-motion: no-preference) {
    .wf-cmp tbody tr { transition: background .18s ease; }
    .wf-cmp tbody tr:hover { background: var(--fnv-surface-2); }
}