/*
 * ══════════ نظامُ التصميم — موضعٌ واحدٌ لكلّ قرارٍ يُرى ══════════
 *
 * بنصّ المالك حين سُئل عمّا يريد أن يشعر به من يفتح الموقع:
 * **«مكتبةٌ هادئةٌ رصينة»**، ثمّ: «الجمعُ بين سلاسة الموقع وسهولته إلى جانب
 * ثرائه العلميّ»، و**«الإتقانُ والأناقةُ … دون تكلّف»**.
 *
 * ── لمَ ملفٌّ واحد ──
 *
 * كانت هذه القراراتُ مكرَّرةً في ثلاثين قالبًا: لونٌ يُكتب هنا وهناك، وحافّةٌ
 * `rounded-2xl` في موضعٍ و`rounded-lg` في جاره، ومسافةٌ تُختار بالعين في كلّ
 * صفحة. **فالموقعُ يبدو مبنيًّا على يدين — وهو كذلك.**
 *
 * وما يُكتب هنا يُقرأ من مكانين لا ثالثَ لهما: أصنافُ Tailwind (عبر
 * `tailwind.config.js`)، وقواعدُ القراءة أدناه.
 *
 * ══════ ١. اللونُ أزرقُ الشعار — بحكم المالك ══════
 *
 * قِيست الألوانُ من `logo.png` نفسِه: البنفسجيُّ `#703090` هو الغالبُ فيه،
 * والأزرقُ `#1070c0` يليه. فأُخذ البنفسجيُّ أوّلَ الأمر.
 *
 * **وحكم المالكُ بغيره** بنصّه: «تفاجأت بتغيّر لون الموقع من الأزرق إلى
 * البنفسجي، والأزرق هو المحبّب عندي، وكان هو الغالب على الموقع، فليته يعود
 * إلى الأزرق **لأنه اللون المعروف به**».
 *
 * **وحجّتُه أقوى من القياس**: خمسٌ وعشرون سنةً عرف الناسُ فيها هذا الموقعَ
 * بلونه، **وذاك أثرٌ لا تقيسه قراءةُ ألوانٍ في صورة**. والأزرقُ في الشعار
 * كذلك — فليس خروجًا عن القاعدة، بل اختيارُ ثانيه لا أوّله.
 *
 * وعُمِّق `#1070c0` إلى **`#0C5E9C`**: اللونُ الأصلُ تباينُه على الورق ٤:١
 * بالكاد، وهذا ٦٫٢:١ — **يُقرأ نصًّا وزرًّا معًا**.
 *
 * وكان في الموقع `primary: #0066CC` — **أزرقُ الويب العامّ**، لا أزرقُ
 * الشعار. والفرقُ بينهما هو الفرقُ بين لونٍ يخصُّ هذا الموقعَ ولونٍ لا يخصّ
 * أحدًا.
 *
 * **والحبرُ والورقُ يميلان معه**: كانا يميلان إلى البنفسجيّ بالكاد، ورماديٌّ
 * بنفسجيٌّ تحت أزرقَ يُقرأ لونًا ثالثًا لا حيادًا.
 *
 * ══════ ٢. والورقُ لا يكون أبيضَ ناصعًا ══════
 *
 * `#FFFFFF` تحت نصٍّ عربيٍّ طويل يُتعب العين — التباينُ أعلى ممّا تحتمله
 * القراءةُ المتّصلة. و`#FAF9FB` ورقٌ يميل إلى الدفء بالكاد، **يُرى ورقًا ولا
 * يُرى لونًا**.
 *
 * والحبرُ `#221E2B` لا `#000`: أسودُ تامٌّ على أبيضَ تامٍّ حدٌّ حادّ، وهذا
 * أهدأُ ولا ينقص وضوحًا (تباينُه ١٥:١).
 *
 * ══════ ٣. والطباعةُ بخطٍّ واحد ══════
 *
 * كان في الموقع خطّان يتنافسان: المتنُ Cairo والعناوينُ Amiri، **فيُقرأ
 * العنوانُ من موقعٍ والمتنُ من موقع**. وحكم المالكُ فيهما: «خطُّ صوت العربية
 * سيّئ وقراءتُه ليست سلسة» — فصارا IBM Plex Sans Arabic وحده.
 *
 * **فالفرقُ يُصنع بالمقاس والتباعد والوزن، لا بخطٍّ ثانٍ.** وذاك هو «دون
 * تكلّف» بعينه.
 *
 * والعربيّةُ تحتاج تباعدًا أوسعَ من اللاتينيّة: حروفُها متّصلةٌ وفيها نقاطٌ
 * تحت السطر وفوقه، **وسطرٌ ضيّقُ التباعد يجعل نقاطَ سطرٍ تلامس حروفَ الذي
 * تحته**. فالمتنُ ٢٫١، والعناوينُ ١٫٦.
 *
 * ══════ ٤. والحوافُّ والظلالُ تخفت ══════
 *
 * `rounded-3xl` وظلٌّ تحت كلّ بطاقةٍ يجعل الصفحةَ بطاقاتٍ تطفو — **وذاك شكلُ
 * لوحةِ تطبيقٍ لا شكلُ مكتبة**. فالحوافُّ ٨ بكسل، **والحدُّ الشعريُّ يحلّ
 * محلَّ الظلّ**: ورقٌ وخطوطٌ فاصلة.
 */

:root {
    /* ── الحبر ── */
    --ink-rgb: 28 36 48;
    --ink: rgb(var(--ink-rgb));
    /*
        أُدكِنت بطلب المالك: «ما زال الخطُّ في التحكيم باللونِ الرماديّ، ليته يكون
        أكثرَ وضوحًا»، وقالها في اليوميّات أيضًا.

        وقيسَت قبل التغيير فإذا هي **مجتازةٌ للمعايير**: 7.47:1 و6.39:1 على
        الأبيض، وكلاهما فوق حدّ AA. **لكنّ المعيارَ وُضع للحرف اللاتينيّ**،
        والعربيُّ أدقُّ حروفًا وأكثرُ استدارةً فيُقرأ أخفَّ من نسبته. فالحكمُ
        لعين القارئ لا للرقم — والرقمُ بعد التدكين 10.83:1 و8.98:1.
    */
    --ink-soft-rgb: 52 62 76;
    --ink-soft: rgb(var(--ink-soft-rgb));
    /*
     * ══════ والرماديُّ الباهتُ لا يُقرأ ══════
     *
     * شكا المالك في ملفّ طلباته: **«إيضاحُ جميع النصوص التي تظهر باهتةً أو
     * رماديّة»**، ثمّ أعادها في الشهادات: «توضيحُ الكلام الذي يظهر رماديًّا
     * بأن يكون أسودَ غامقًا».
     *
     * وكانت `123 136 150` على الورق الأبيض تعطي تباينًا **٣٫٥ إلى ١**، وهو
     * دون الحدّ المعتمَد (٤٫٥) — أي أنّها ليست ذوقًا يُختلف فيه بل نصٌّ **لا
     * يقرؤه بعضُ الناس**.
     *
     * وهذه اللمسةُ تصل **٦٤٥ موضعًا** في الموقع (`text-ink-muted`)، فتصحيحُها
     * هنا خيرٌ من تعديل ستّمئة سطر — **وأثبتُ**: قالبٌ يُكتب غدًا يرثُ الصوابَ
     * من نفسه.
     *
     * و`85 96 110` تعطي **٦٫٢ إلى ١**، فتبقى ثانويّةً في المرتبة ويُقرأ
     * حرفُها. ولم تُجعل سوداءَ صرفًا: **لو ساوت المتنَ لضاع الفرقُ بين ما
     * يُقرأ أوّلًا وما يُقرأ بعدَه**، وهو الذي يجعل الصفحةَ تُمسح بالعين.
     */
    --ink-muted-rgb: 64 74 88;
    --ink-muted: rgb(var(--ink-muted-rgb));

    /* ── الورق ── */
    --paper-rgb: 248 250 252;
    --paper: rgb(var(--paper-rgb));
    --surface-rgb: 255 255 255;
    --surface: rgb(var(--surface-rgb));
    --surface-sunk-rgb: 241 245 249;
    --surface-sunk: rgb(var(--surface-sunk-rgb));
    --line-rgb: 226 232 240;
    --line: rgb(var(--line-rgb));
    --line-strong-rgb: 203 213 225;
    --line-strong: rgb(var(--line-strong-rgb));

    /* ── الهُويّة: من الشعار ── */
    --brand-rgb: 12 94 156;
    --brand: rgb(var(--brand-rgb));
    --brand-deep-rgb: 8 67 111;
    --brand-deep: rgb(var(--brand-deep-rgb));
    --brand-tint-rgb: 232 241 249;
    --brand-tint: rgb(var(--brand-tint-rgb));
    --brand-line-rgb: 195 219 239;
    --brand-line: rgb(var(--brand-line-rgb));

    /* والأزرقُ للروابط — من الشعار كذلك، معمَّقًا ليقرأ على الورق. */
    --azure-rgb: 14 111 184;
    --azure: rgb(var(--azure-rgb));
    --azure-tint-rgb: 231 242 251;
    --azure-tint: rgb(var(--azure-tint-rgb));

    /* ── ودلالاتٌ ثابتةٌ لا تتغيّر بالهُويّة ── */
    --good-rgb: 31 111 74;
    --good: rgb(var(--good-rgb));
    --warn-rgb: 138 90 18;
    --warn: rgb(var(--warn-rgb));
    --bad-rgb: 163 43 43;
    --bad: rgb(var(--bad-rgb));

    /* ── المسافات ── */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    /* ── الحوافّ ── */
    --r-sm: 6px;
    --r: 8px;
    --r-lg: 12px;

    /*
     * ── وعرضُ سطر القراءة ──
     *
     * **أهمُّ رقمٍ في صفحةٍ يُقرأ فيها نصٌّ طويل.** السطرُ الذي يتجاوز نحو
     * ٧٥ حرفًا تضيع العينُ في عودتها إلى أوّله، فتُعاد قراءةُ السطر أو
     * يُقفز عنه. و٦٨٠ بكسلًا عند مقاسنا نحو ٧٠ حرفًا عربيًّا.
     */
    --measure: 680px;
}

/*
 * ══════════ ٥. سطحُ القراءة ══════════
 *
 * `.reading` تُلبَس المتنَ المخزَّن — عشرين سنةً من HTML كُتب في محرّرات
 * مختلفة: `<p style="text-align: justify">` وجداولُ ومراسي حواشٍ.
 *
 * **ولا يُعاد كتابةُ ذلك المتن.** يُنقّى عند العرض (`Core/Html.js`) ثمّ
 * يُلبَس هذه القواعد، **فتُضبط الطباعةُ بلا أن يُمَسّ حرفٌ من الأرشيف**.
 */
/*
 * ── التباعدُ والتسوية — بحكم المالك بعد أن نظر ──
 *
 * **١. النصُّ يُسوَّى من الطرفين.** بنصّه: «التنسيقُ من اليمين فقط… بداياتُ
 * الأسطر متساوية، لكن من اليسار غيرُ متساوية، **وهو تشويهٌ للمقالة وتقليلٌ
 * لجاذبيتها**».
 *
 * وكنتُ سوّيتُه من جهةٍ واحدةٍ عمدًا، خشيةَ «أنهار» الفراغ التي تظهر في
 * العربية حين يُمَطُّ ما بين الكلمات في عمودٍ ضيّق. **والحكمُ حكمُه، والخشيةُ
 * مدفوعةٌ هنا**: العمودُ سبعون حرفًا — وهو من السَّعة بحيث يبقى المطُّ يسيرًا.
 *
 * **٢. والتباعدُ قُرّب.** بنصّه: «لو تقاربت الأسطرُ قليلًا فستكون الصفحةُ
 * أفضل». فمن ٢٫١ إلى ١٫٩٥ — **يبقى أوسعَ ممّا تحتاجه اللاتينيّة** (نقاطُ
 * العربية تحت السطر وفوقه)، ويقرب.
 */
.reading {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.95;
    letter-spacing: 0;
    text-align: justify;

    /* ورابطٌ لاتينيٌّ طويلٌ في نصٍّ مسوًّى يخرج من العمود إن لم يُكسَر. */
    overflow-wrap: break-word;
}

.reading > * + * {
    margin-top: 1.15em;
}

/*
 * ══════════ وخطُّ المقالات واحد ══════════
 *
 * بطلب المالك: **«هل يمكن أن توحّد خطَّ المقالات كلِّها — قصدي اسم الخطّ —
 * دون تغيير الحجم أو التسميك وعدم التسميك، لأنّ بعض المقالات مختلفةُ الخطّ،
 * ربّما من أثر الموقع القديم»**.
 *
 * ── وهو من الموقع القديم فعلًا، وقِيس ──
 *
 * **٧٦٠ متنًا من ٣٧٣٧ تحمل خطًّا مفروضًا** في وسومها: `Arial` أربعَ مئة مرّة،
 * و`Times New Roman`، و`arial black`، و`AL-Mohanad` — خطٌّ لا يملكه قارئٌ
 * اليوم **فيسقط إلى خطّ نظامه**، فتخرج المقالةُ بخطٍّ لا أحدَ اختاره.
 *
 * ── ويُوحَّد عند العرض لا في المخزون ──
 *
 * **ولا تُعاد كتابةُ ٧٦٠ متنًا لأجل اسم خطّ**: قاعدةُ هذا الموقع أنّ ما يُخزَّن
 * لا يُمَسّ ويُنقّى عند العرض (`Core/Html.js`)، **وإعادةُ الكتابة لا رجعةَ
 * فيها والقاعدةُ سطرٌ يُرفع متى شئنا**.
 *
 * ── والاسمُ وحدَه، لا الحجمُ ولا الثِّخَن ──
 *
 * وهو نصُّ طلبه. **فلا يُكتب `font: inherit`** — تلك تسحق الحجمَ والثِّخَنَ
 * معًا، فيضيع عنوانٌ داخليٌّ كُتب بحجمٍ أكبر وتضيع كلمةٌ غُمّقت. والمكتوبُ
 * `font-family` وحدَها.
 *
 * و`!important` لازمةٌ هنا: **الخطُّ مكتوبٌ في سمة السطر** (`style="..."`)،
 * ولا يغلبها إلّا هي.
 */
.reading,
.reading * {
    font-family: inherit !important;
}

/*
 * **إلّا ما كان شيفرةً**: `code` و`pre` و`kbd` و`samp` خطُّها ثابتُ العرض
 * قصدًا — وحرفٌ فيها يُفرَّق عن حرفٍ بعرضه. و`samp` في هذا الأرشيف ١٣٨٢ مرّة.
 */
.reading code,
.reading kbd,
.reading pre,
.reading samp {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace !important;
}

/*
 * **ولا تُفرض التسويةُ على ما سُوّي عمدًا.** في الأرشيف فقراتٌ مركَّزةٌ
 * (`text-align: center`) — أبياتُ شعرٍ وعناوينُ داخليّةٌ ومراجع. وقاعدةٌ
 * بـ`!important` تسحقها كلَّها، **ولا يظهر ذلك إلّا لمن يعرف كيف كانت**.
 *
 * فالتسويةُ أعلاه افتراضٌ يرثه ما لا رأيَ له، وما حمل رأيًا بقي عليه.
 */

.reading p:empty {
    display: none;
}

.reading h2,
.reading h3,
.reading h4 {
    color: var(--brand-deep);
    font-weight: 600;
    line-height: 1.6;
    margin-top: 1.8em;
    margin-bottom: 0.5em;
}

.reading h2 { font-size: 1.3em; }
.reading h3 { font-size: 1.15em; }
.reading h4 { font-size: 1.05em; }

.reading a {
    color: var(--azure);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.reading a:hover {
    color: var(--brand);
}

/*
 * ── والاقتباسُ خطٌّ لا صندوق ──
 *
 * صندوقٌ ملوَّنٌ يقطع القراءة؛ **وخطٌّ على الحافّة يقول «هذا منقول» ولا
 * يوقف العين**.
 */
.reading blockquote {
    border-inline-start: 3px solid var(--brand-line);
    padding-inline-start: var(--s-4);
    color: var(--ink-soft);
    margin-inline-start: 0;
}

.reading ul,
.reading ol {
    padding-inline-start: 1.4em;
}

.reading ul { list-style: disc; }
.reading ol { list-style: decimal; }

.reading li + li {
    margin-top: 0.4em;
}

.reading img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r);
    border: 1px solid var(--line);
}

/*
 * **والجدولُ يجرّ الصفحةَ عرضًا إن لم يُحبَس.** جداولُ الأرشيف عريضةٌ
 * بأعمدةٍ ثابتة، وصفحةٌ تنزلق يمينًا وشمالًا تُقرأ عطبًا.
 */
.reading table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.94em;
}

.reading th,
.reading td {
    border: 1px solid var(--line);
    padding: var(--s-2) var(--s-3);
    text-align: start;
}

.reading th {
    background: var(--surface-sunk);
    font-weight: 600;
}

/* والحروفُ اللاتينيّةُ في متنٍ عربيّ — تُقرأ باتّجاهها. */
.reading code,
.reading pre {
    direction: ltr;
    text-align: left;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.9em;
}

.reading pre {
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s-3);
    overflow-x: auto;
}

/*
 * ══════════ ٦. وما يُقرأ طويلًا يُقاس بالشاشة ══════════
 *
 * على الجوّال يضيق العمودُ فيقصر السطرُ من نفسه، **لكنّ المقاسَ يبقى ١٧
 * بكسلًا**: تصغيرُه على الشاشة الصغيرة عادةٌ متوارثةٌ من زمنٍ كانت الشاشاتُ
 * فيه أقلَّ دقّة، **وهي اليوم تُصعّب القراءةَ حيث هي أصعب**.
 */
@media (max-width: 640px) {
    .reading {
        line-height: 2;
    }
}

/*
 * ══════════ ٧. الطباعةُ على ورق ══════════
 *
 * **وهذه ليست ترفًا في موقعٍ علميّ**: البحوثُ تُطبع لتُقرأ بالقلم. فتُحذف
 * الترويسةُ والتذييلُ وكلُّ زرّ، ويبقى النصُّ وعنوانُه ومصدرُه.
 */
@media print {
    .no-print,
    header,
    footer,
    nav {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .reading {
        font-size: 12pt;
        line-height: 1.8;
        color: #000;
    }

    .reading a {
        color: #000;
        text-decoration: none;
    }

    /* **ورابطٌ مطبوعٌ بلا عنوانه رابطٌ ذهب.** فيُكتب بجانبه. */
    .reading a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #444;
        word-break: break-all;
    }
}

/*
 * ══════════ ٨. ولا تنزلق الصفحةُ عرضًا ══════════
 *
 * **قِيس**: القائمةُ المنسدلة لـ«أقسام الموقع» عرضُها ٩٠٠ بكسل، ومثبَّتةٌ
 * بحافّتها إلى حافّة زرِّها. وزرُّها في أقصى الصفّ، **فتمتدّ خارج الشاشة
 * ولو كانت مخفيّة** — والعنصرُ المطلقُ يزيد عرضَ ما يُمرَّر إليه وإن لم
 * يُرَ.
 *
 * فكانت كلُّ صفحةٍ في الموقع تنزلق يمينًا بضعةً وعشرين بكسلًا، **ويظهر ذلك
 * قصًّا في حافّة النصّ** — ولا يمسكه فحصٌ يقرأ الروابط ولا الأصناف.
 *
 * ── و`clip` لا `hidden` ──
 *
 * `overflow-x: hidden` **يصنع وعاءَ تمرير**، فتكفّ الترويسةُ اللاصقة
 * (`sticky`) عن اللصوق في بعض المتصفّحات. و`clip` تقصّ ولا تصنع وعاءً —
 * **فتبقى الترويسةُ لاصقةً كما هي**.
 */
body {
    overflow-x: clip;
}

/*
 * ══════════ ٩. عنوانُ الحقلِ يُنقر فيقع المؤشِّر في خانته ══════════
 *
 * شكا المالك: **«نماذجُ تعبئة المعلومات في (التحكيم العلميّ) و(إصدار
 * الشهادات) ضعيفان، فكأنّ حقلَ المعلومة التي تُكتب عائمٌ يحتاج لمحاولةٍ حتّى
 * يقع المؤشِّرُ على مساحة التعبئة»**.
 *
 * **وقِيس**: أربعةٌ وأربعون عنوانَ حقلٍ في أربع شاشات، **ولا واحدٌ منها
 * مربوطٌ بحقله** — لا `for` ولا لفٌّ. فالنقرُ على الكلمة لا يفعل شيئًا،
 * والهدفُ الوحيدُ شريطُ الخانة نفسِه. ومن يقرأ عنوانًا ثمّ ينقره — وهو ما
 * يفعله كلُّ أحد — يجد الصفحةَ لا تستجيب.
 *
 * وربطُ الأربعة والأربعين هو نصفُ العلاج، وهذا نصفُها الآخر:
 *
 *   ١. **مؤشِّرُ اليد** — فيُعرَف أنّه يُنقر قبل أن يُجرَّب.
 *   ٢. **وحيّزُ نقرٍ أوسعُ من الحرف** — سطرٌ كاملٌ لا كلمةٌ رفيعة.
 *   ٣. **وحدٌّ أدنى لارتفاع الخانة** — ٤٤ بكسلًا، وهو أقلُّ ما تُصيبه
 *      الإصبعُ على شاشةِ هاتفٍ بلا تصويب.
 *
 * ولا تُمسّ الخاناتُ التي داخلَ `label` يلفّها (نموذجُ الإسهام مثلًا):
 * تلك تعمل أصلًا، **وهي التي سمّاها المالك «بقيّةَ النماذج»**.
 */
label[for] {
    cursor: pointer;
}

label[for]:hover {
    color: var(--brand, inherit);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select {
    min-height: 44px;
}