/* ══ خطُّ الموقع — مستضافٌ عندنا ══
   ملفّان متغيّران في `d/fonts/` يكتبهما `seo_pages.write_site`، وبصمةُ
   بايتاتهما في رابطهما فتنكسر ذاكرةُ المتصفّح وحدها عند التبديل.
   **ويرثهما التطبيقُ والصفحاتُ الثابتة معاً** لأن هذه الكتلة تُقتطع
   إلى `d/site.css` — فلا نسخةَ ثانية تتباعد.
   `font-display:swap` يبقي النصَّ مقروءاً بالخطّ الاحتياطي حتى يصل،
   فلا شاشةَ بيضاء لمن خطُّه بطيء. و`font-weight:200 1000` مدى الوزن
   في الملفّ الواحد — هكذا يغطّي ملفٌّ واحدٌ ‎٤٠٠‎ و‎٦٠٠‎ و‎٧٠٠‎ و‎٨٠٠‎ و‎٩٠٠‎. */
/* خطوطُ هوية «أداة» (المالك ١٥ أكتوبر ٢٠٢٦): IBM Plex Sans Arabic للنصّ بوزنين (400 · 700 — ما فوقه يأخذ 700،
   والوزنان ٤ ملفّات تُطلب عند الحاجة وحدها) · Noto Kufi Arabic للعناوين · IBM Plex Mono لقراءات الأرقام.
   كلُّها SIL OFL مستضافةٌ عندنا (`tools/assets/fonts/LICENSE-identity.txt`) — كانت Cairo متغيّراً واحداً. */
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;
  font-display:swap;src:url("/ksu/d/fonts/IBMPlexSansArabic-400-arabic.woff2?v=a9cefdca") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,
    U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,
    U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;
  font-display:swap;src:url("/ksu/d/fonts/IBMPlexSansArabic-400-latin.woff2?v=653bfd52") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;
  font-display:swap;src:url("/ksu/d/fonts/IBMPlexSansArabic-700-arabic.woff2?v=27765dba") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,
    U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,
    U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;
  font-display:swap;src:url("/ksu/d/fonts/IBMPlexSansArabic-700-latin.woff2?v=9e002e65") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:700;
  font-display:swap;src:url("/ksu/d/fonts/NotoKufiArabic-700.woff?v=dcdab1c7") format("woff")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;
  font-display:swap;src:url("/ksu/d/fonts/IBMPlexMono-500-latin.woff2?v=d32f0e07") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD}
/* هوية طلابية مستقلة — «ناعم بارز» (Neumorphism)، قرار المالك ١٣ سبتمبر.
   أرضيةٌ رملية دافئة تبرز منها البطاقات بظلّين: داكنٌ تحت وفاتحٌ فوق،
   فتبدو محفورةً من المادة نفسها لا ملصقةً عليها. والحقول غائرة بالظلّ
   المعكوس، والضغطة تحفر الزرّ في مكانه. ولمسةُ اللون في البلاطات
   وحدها (خوخي · نعناعي · ليلكي) — ما حولها هادئ.
   الفاتح أغمق قليلاً من العيّنة والداكن أفتح قليلاً (طلب المالك):
   البروز يحتاج أرضيةً ليست بيضاء ولا سوداء، وإلا ضاع أحد الظلّين.
   والسلّمُ أربعُ درجات ينتهي بالرمادي لا بالأحمر: الأحمرُ حكمٌ ولونُ
   خطر، والدرجةُ المنخفضة معلومةٌ لا تهمة. والرماديُّ دافئٌ ليجاور
   الرمل. الأرقام مفحوصة: النصّ الباهت ≥ ٤٫٨:١ على الأرضية والسطح في
   الوضعين، والحبر على كل درجة ≥ ٥٫٥:١. */
:root{
  color-scheme:light;
  /* افتراضُ السلّم **في الجذر لا في `.sc`**: إعلانُه على `.sc` نفسِها
     يغلب الوراثة، فتتجمّد عند الوسط كلُّ بلاطةٍ ترث `--p` من أمّها. */
  --p:50;
  /* أساسُ «أداة» النهاريّ (`docs/identity-2026-10/src/tokens.py` — كلُّ نصٍّ ≥4.5:1 محسوباً) */
  --bg:#DEDBD3; --card:#ECEAE4; --card2:#E4E1DA; --rim:#F7F5F1;
  --line:#C3BEB3; --text:#1E1C19; --muted:#524D45;
  --primary:#1F55C9; --primary-ink:#FFFFFF;
  --cta:#1F55C9; --cta-ink:#FFFFFF;
  --t1:#3D5FAE; --t2:#0B6646; --t3:#E0A80A; --t4:#6E685F;
  /* لا يُستعمل للدرجات بعد الدمج — يبقى لرسائل الخطأ والوسوم */
  --t5:#A3382A;
  --tier-ink:#FFFFFF;
  /* سلّمُ النسبة — النهاريّ **معكوس**: الخلفيةُ داكنةٌ والحبرُ أبيض،
     فالإضاءةُ أدنى من نظيرتها ليلاً بنحو ‎.28‎ عند الطرفين. **لا تُنسخ
     أرقامُ الكتلة الأخرى إلى هنا**: نصٌّ أبيضُ على كهرمانٍ فاتح هو ما
     يحدث لو نُسخت. الإضاءةُ من ‎.375‎ إلى ‎.525‎ صعوداً بلا ارتداد،
     وأدنى تباينٍ ‎٥٫٠٢:١‎.
     الأطراف: ‎٠‎ ← ‎#7C1609‎ · ‎٥٠‎ ← ‎#72541A‎ · ‎١٠٠‎ ← ‎#267D5F‎.
     **والوسطُ برونزٌ لا أصفرُ ساطع، وهذا ثمنٌ مفروضٌ لا مختار**: الحبرُ
     أبيضُ ثابتٌ والإضاءةُ رتيبة، فلا يجوز أن يعلوَ الوسطُ طرفَيه.
     والعوضُ أن تباينَ الوسط صار ‎٧٫٠٠:١‎. (الوضعُ الليليُّ هو الأصلُ لكل
     زائرٍ لم يختر، وفيه الوسطُ كهرمانٌ كما طُلب.) */
  --sc-r0:48.7794%; --sc-r1:-33.7788%; --sc-r2:4.4457%;  --sc-r3:16.7787%;
  --sc-g0:8.5425%;  --sc-g1:40.5045%; --sc-g2:6.7737%;  --sc-g3:-4.9242%;
  --sc-b0:3.6210%;  --sc-b1:33.5240%; --sc-b2:-7.0944%; --sc-b3:-6.3738%;
  --sc-gr:5px; --sc-ga:.26;
  --ic1:#3F3A34; --ic2:#4B453E; --ic3:#5B544B;
  --rank-f:#A32F5E; --rank-m:#2451A6;
  --peach-a:#E7A084; --peach-b:#F0CFBD;
  --mint-a:#80C8BE; --mint-b:#C4E3DD;
  --lilac-a:#A7A3D6; --lilac-b:#D3D0EC;
  /* لونُ إحصائيات المادة: درجاتُ الخوخي نفسه أعمق — الأغمقُ نصٌّ على
     السطح (≥٤٫٥:١)، والأفتحُ درجاتُ B وC */
  --acc:#AE5433; --acc-2:#DE9C80; --acc-3:#EBC1AE; --acc-4:#F2DCD1; --acc-ink:#FFF7F2;
  --tile-ink:#201C18;
  /* وشعارُ «وضوح» في النهاري نقشٌ غائرٌ لا توهّج: الكريميُّ على بيج
     ‎#E3DED4‎ فرقُهما دون ٥٪ إضاءة فلا هالةَ تُرى، والهالةُ الداكنة
     لطخة. فالبنّيُّ الدافئ حبراً، و‎--t4‎ ذيلاً، وفاتحٌ فوقُ وداكنٌ تحت. */
  --wm-a:#2E2A26; --wm-b:#6E685F;
  --wm-shadow:drop-shadow(0 1px 0 rgba(255,252,246,.9))
    drop-shadow(0 2px 3px rgba(110,98,80,.5));
  --q1:#4F6BD6; --q2:#7B90E6; --s1:#7466B0; --s2:#9489C8;
  --sh-dark:rgba(110,98,80,.45); --sh-light:rgba(255,252,246,.85);
  --in-dark:rgba(110,98,80,.38);
  --ov:rgba(38,30,22,.5);
  --ring:0 0 0 2px var(--bg),0 0 0 5px var(--primary);
  /* الظلال مركّبةٌ من الألوان فوق مرةً واحدة: الداكن يبدّل الألوان
     وحدها، فلا تُكتب الظلال ثلاث مرات. */
  /* «أداة»: صفائحُ مشغولة — حافّةٌ مضيئة فوق وظلٌّ قصير تحت، والغائرُ ظلٌّ داخليّ (كان «ناعم بارز»: ظلّان متقابلان).
     والليليُّ يعيد كتابتها في `DARK_TOKENS` بقيمه. */
  --sh-card:inset 0 1px 0 rgba(255,255,255,.85),0 1px 0 rgba(60,52,40,.28),0 10px 18px -12px rgba(60,52,40,.5);
  --sh-soft:inset 0 1px 0 rgba(255,255,255,.8),0 1px 0 rgba(60,52,40,.25);
  --sh-in:inset 0 2px 4px rgba(60,52,40,.22),inset 0 -1px 0 rgba(255,255,255,.7);
  --sh-field:var(--sh-in);
  --sh-btn:inset 0 1px 0 rgba(255,255,255,.8),0 1px 0 rgba(60,52,40,.3),0 6px 12px -8px rgba(60,52,40,.5);
  --f-d:"Noto Kufi Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --f-n:"IBM Plex Mono","IBM Plex Sans Arabic",monospace;
  --sh-btn-cta:var(--sh-btn);
}
/* الليليُّ هو الأصل لكل زائر (قرار المالك) — لا يُسأل نظامُ الجهاز:
   كل ما ليس `data-theme="light"` ليلي، بسمةٍ أو بلا سمة، فيراه أيضاً
   من عطّل السكربت أو التخزين. والنهاريُّ لمن اختاره بالزر وحده.
   والداكن مكتوبٌ مرة واحدة في بايثون ويُحقن هنا مرة واحدة: كان يُحقن
   مرتين (تفضيلُ النظام واختيارُ الزائر)، وقاعدةٌ واحدة تغني عنهما. */
:root:not([data-theme="light"]){
    color-scheme:dark;
    /* أساسُ «أداة» الليليّ */
    --bg:#1C1B19; --card:#262421; --card2:#2E2B27; --rim:#3A3631;
    --line:#45403A; --text:#EFEDE8; --muted:#A9A398;
    --primary:#7FB0FF; --primary-ink:#0E1A2E;
    --cta:#7FB0FF; --cta-ink:#0E1A2E;
    /* `--t1..--t5` لم تعد للدرجات بعد السلّم المتّصل، **وتبقى معرَّفةً**:
       تستهلكها `.o1..o5` (معالج التقييم) و`.cvote` و`.steps i.ok`
       و`.send.done` و`.amsg` — وحذفُها يرسمها بلا لون بلا خطأٍ في أيّ فحص. */
    --t1:#8AA6EC; --t2:#4CD6A6; --t3:#F2C63F; --t4:#A69F94;
    --t5:#FF8A7A;
    --tier-ink:#141820;
    /* سلّمُ النسبة — الليليّ: الخلفيةُ الملوّنة فاتحةٌ والحبرُ داكن.
       ثلاثُ كثيراتِ حدودٍ على الأسس (١ · k · m · n) تعطي قنواتِ sRGB
       نسباً مئوية، مشتقّةً بأقلّ المربّعات من مسارٍ صُمّم في OKLCH:
       الإضاءةُ من ‎.655‎ إلى ‎.850‎ **صعوداً بلا ارتداد** — وهذا ليس ذوقاً
       بل شرطَ إتاحة: من لا يميّز الأحمر من الأخضر (٨٪ من الذكور) يبقى
       له الترتيبُ في السطوع. أدنى تباينٍ على السلّم ‎٥٫١٦:١‎.
       الأطراف: ‎٠‎ ← ‎#F05548‎ · ‎٥٠‎ ← ‎#E0A735‎ · ‎١٠٠‎ ← ‎#69EAC3‎. */
    --sc-r0:94.0144%; --sc-r1:-52.9193%; --sc-r2:15.3545%; --sc-r3:9.5925%;
    --sc-g0:33.4753%; --sc-g1:58.3823%; --sc-g2:1.0950%;  --sc-g3:3.8018%;
    --sc-b0:28.1614%; --sc-b1:48.2104%; --sc-b2:-27.9882%; --sc-b3:-7.2682%;
    --sc-gr:7px; --sc-ga:.46;
    --ic1:#EEE8DE; --ic2:#E2DBD0; --ic3:#D2CABE;
    --rank-f:#F2A5C8; --rank-m:#A3C0F5;
    --peach-a:#9A5A45; --peach-b:#633E31;
    --mint-a:#336F67; --mint-b:#244541;
    --lilac-a:#5A5694; --lilac-b:#39365F;
    --acc:#EE9A78; --acc-2:#9C5A44; --acc-3:#6B4336; --acc-4:#45322A; --acc-ink:#20140E;
    --tile-ink:#FBF4EC;
    /* شعارُ «وضوح» نصّاً — الليليُّ يحتمل توهّجاً على بطاقةٍ ‎#322E28‎.
       `--wm-a` كريميُّ العلامة حرفاً بحرف، و`--wm-b` رماديُّ ذيلِها
       مرفوعاً إلى ‎--muted‎ كي يبقى التباينُ فوق العتبة. */
    --wm-a:#EFEAE4; --wm-b:#B5AD9F;
    --wm-shadow:drop-shadow(0 0 .42em rgba(239,234,228,.30))
      drop-shadow(0 0 1.05em rgba(239,234,228,.13));
    --q1:#7189F0; --q2:#94A7F5; --s1:#A99FD8; --s2:#8177B5;
    --sh-dark:rgba(0,0,0,.5); --sh-light:rgba(255,240,215,.08);
    --in-dark:rgba(0,0,0,.55);
    --ov:rgba(0,0,0,.55);
    --sh-card:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 rgba(0,0,0,.65),0 10px 18px -10px rgba(0,0,0,.75);
    --sh-soft:inset 0 1px 0 rgba(255,255,255,.05),0 1px 0 rgba(0,0,0,.6);
    --sh-in:inset 0 2px 5px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.04);
    --sh-btn:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 rgba(0,0,0,.6),0 6px 12px -8px rgba(0,0,0,.7);
}
*{box-sizing:border-box;margin:0}
/* `hidden` يغلب كل `display` صريح. بدونه كان زرّ «وثّقه في تيليجرام»
   يظهر قبل الإرسال (`.send{display:flex}` تغلب السمة) و«عرض المزيد»
   يبقى بعد آخر محاضر — والفحص الذي يثبت ظهوره بعد الإرسال لا يثبت شيئاً. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-size:1rem;line-height:1.6;
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,
    system-ui,sans-serif;
  /* فراغُ آخر الصفحة كما كان (٤٨) **فوق** ما يحجزه شريطُ التنقّل السفلي
     (`--bnav`)، فلا يختبئ التذييلُ ولا آخرُ بطاقةٍ تحته. */
  padding-bottom:calc(48px + var(--bnav))}
button,select,input,textarea{font:inherit;color:inherit}
/* صوتُ «أداة»: العناوينُ كوفية (وزنٌ واحد 700)، وقراءاتُ الأرقام الكبيرة أحاديّةُ العرض */
h1,h2,h3{font-family:var(--f-d);font-weight:700}
.pf-big{font-family:var(--f-n);font-weight:500;letter-spacing:0}
:focus-visible{outline:none;box-shadow:var(--ring)!important}
#q:focus-visible,.idxq input:focus-visible,.dq input:focus-visible,
#cmt:focus-visible,#crc:focus-visible,.fld input:focus-visible,.fld select:focus-visible,
.fld textarea:focus-visible{box-shadow:var(--sh-in),var(--ring)!important}
/* زرّ المسح الذي يرسمه المتصفح لحقل البحث — عندنا زرٌّ خاص، واثنان
   جنباً إلى جنب يُربكان. */
#q::-webkit-search-cancel-button,.idxq input::-webkit-search-cancel-button,
.dq input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* الأيقونة ترث لون النصّ وحجمه: `1em` تكبر وتصغر مع السطر الذي
   تسكنه. والطبق مخفيٌّ بلا `display:none` — الأخيرة تُبطل `<use>` في
   بعض المحركات. وفوق الأزرار الملوّنة تلبس الأيقونةُ حبرَ الزرّ لا
   تدرّجَ الهوية — الداكنُ على الأزرق لا يُرى. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.15em;height:1.15em;vertical-align:-.22em;fill:none;
  stroke:url(#ig);stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round;flex-shrink:0;margin-inline-end:.3em}
.rbtn .ic,.send .ic,.chip.sel .ic{stroke:currentColor}
.sortbtn .ic,.navlnk .ic{width:1.3em;height:1.3em;vertical-align:-.3em}
.srow .si .ic{width:1.45rem;height:1.45rem;margin:0}

/* ══ الترويسة ══
   شريطٌ بارز فيه العنوان وزرّ الوضع، ثم «البطل»: العلامة في هالةٍ
   غائرة وثلاث بلاطات ملوّنة بالأرقام. في صفحة المحاضر والفهارس يبقى
   الشريط وحده — الخروج من الصفحة لا يعني الخروج من الموقع. */
header{max-width:1280px;margin:0 auto;padding:18px 16px 4px}
.hbar{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 12px;
  background:var(--card);border:1px solid var(--rim);border-radius:13px;
  box-shadow:var(--sh-card)}
.hwho{flex:1;min-width:0}
/* ══ شعارُ الجامعة ══
   **خانةٌ متغيّرة لا ملفٌّ باسمِ جامعةٍ واحدة.** الموقعُ يصير لستّ
   جامعات، فعلامةُ «وضوح» علامةُ المنصّة وتبقى في سطر العنوان، وهذه
   علامةُ الجامعة الحاليّة وحدها — تتبدّل بتبدّل `UNI` في بايثون ولا
   اسمَ جامعةٍ مكتوبٌ في قالبٍ ولا في نمط.
   و`.hwho{flex:1}` تدفعها إلى الطرف المقابل تلقائياً، فتقع بين العنوان
   وزرّ الوضع بلا `order` ولا `margin:auto`.
   **وخلفيةٌ باهتة تحته (طلب المالك بعد المعاينة):** فنُّ الشعار خطوطٌ
   سماويةٌ فاتحة، وعلى بيج الوضع النهاري (`--card:#E3DED4`) تذوب حتى
   يكاد لا يُرى. و`--card2` خطوةٌ واحدةٌ من لون الشريط **تنقلب مع الوضع
   من تلقائها** (أغمقُ قليلاً في النهاري، أفتحُ قليلاً في الليلي) —
   فتُسند الخطوطَ في الاثنين بلا أن تصير بئراً داكنة.
   وباهتةٌ لا غائرة بقصد: `.thm` بجوارها بظلٍّ بارز، فلو أخذ الشعارُ
   ظلَّه صار زرّاً ثالثاً يُضغط ولا يستجيب. */
.ulogo{flex-shrink:0;display:grid;place-items:center;line-height:0;
  padding:6px 7px;border-radius:9px;background:var(--card2)}
.ulogo img{display:block;height:40px;width:auto;max-width:74px;
  object-fit:contain}
/* ══ مبدّلُ الجامعة (`universities.switch_html`) ══
   الشعارُ زرٌّ يفتح قائمةَ الجامعات: الحاليّةُ غائرةٌ بعلامة، والحيّةُ
   روابطُ تدخلها، والقادمةُ «قريباً» بلا رابط، وفي القاع «كل الجامعات»
   إلى الرئيسية. طُلب للحاسب أولاً ثم للجوال (المالك 2026-09-23).
   **الجوال:** الشعارُ وسهمٌ صغير بلا اسم — العرضُ لا يحتمله — والقائمةُ
   تنسدل تحت الترويسة بعرضها كلِّه (`.hbar` مرساتُها)، فلا تخرج عن الشاشة
   أيّاً كان موضعُ الشعار. **الحاسب** (≥١٠٠٠px أدناه): الزرُّ باسم الجامعة
   والقائمةُ مرساتُها الزرُّ نفسُه. */
.hbar{position:relative}
.usw{flex-shrink:0}
.usw summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:3px;border-radius:9px;-webkit-tap-highlight-color:transparent}
.usw summary::-webkit-details-marker{display:none}
.usw summary:focus-visible{outline:none;box-shadow:var(--ring)}
.uswn{display:none}
.usw summary>.ic{display:block;width:14px;height:14px;color:var(--muted);
  transition:rotate .15s}
.usw[open] summary>.ic{rotate:180deg}
.uswm{position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:60;
  padding:8px;background:var(--card);border:1px solid var(--rim);
  border-radius:13px;box-shadow:var(--sh-card)}
.uso{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 10px;
  border-radius:9px;color:var(--text);text-decoration:none}
a.uso:hover{background:var(--card2)}
.uso.cur{background:var(--bg);box-shadow:var(--sh-in)}
.uso b{flex:1;min-width:0;font-size:.92rem;font-weight:800;line-height:1.4}
.uso>.ic{width:18px;height:18px;color:var(--primary)}
.uso.soon{cursor:default}
.uso.soon b{color:var(--muted)}
.uso i{flex-shrink:0;font-style:normal;font-size:.72rem;font-weight:800;
  padding:2px 10px;border-radius:9px;background:var(--card2);color:var(--muted)}
.uwl{flex-shrink:0;width:44px;height:44px;border-radius:9px;display:grid;
  place-items:center;background:var(--card2)}
.uwl img{display:block;max-width:32px;max-height:32px;width:auto;height:auto}
.uwl .ic{width:22px;height:22px;color:var(--muted)}
.usall{display:flex;align-items:center;justify-content:center;min-height:44px;
  margin-top:6px;padding:6px 10px 0;border-top:1px solid var(--line);
  font-weight:800;font-size:.86rem;color:var(--primary);text-decoration:none}
.usall:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.usw summary>.ic,.usw summary{transition:none}}
/* شعارُ جامعةٍ داكنُ الحبر صُمّم لأرضيةٍ فاتحة (`paper` في `universities.py`
   — الأميرة نورة أخضرُ داكن) يذوب في خلفية الوضع الليلي. فتُفرش تحته
   أرضيةُ الوضع النهاري نفسُها (`#E3DED4`) ويبقى **بلونه الرسميّ**. كانت هنا
   `filter` تقلبه ظلّاً أبيض، فسأل المالك: «ليش الشعارات بدون لون» — شعارُ
   جامعةٍ لا يُعاد تلوينُه. والليليُّ هو الأصل فالقاعدةُ له، والنهاريُّ
   أرضيتُه فاتحةٌ أصلاً. `img.paper` لشعارٍ بلا بئرٍ تحمله (صفحة الكلية). */
:root:not([data-theme="light"]) .paper{background:#E3DED4}
:root:not([data-theme="light"]) img.paper{padding:4px;border-radius:9px}
header h1{font-size:1.22rem;font-weight:900;line-height:1.35;
  letter-spacing:-.3px;text-wrap:balance}
header .sub{color:var(--muted);font-size:.84rem;margin-top:2px;
  font-weight:600;text-wrap:balance}
/* زرّ الوضع: الأيقونة تقول أين أنت الآن (شمس = نهاري، قمر = ليلي)
   والوصف الصوتي يقول ماذا تفعل الضغطة. مخفيٌّ حتى يشغّله السكربت:
   زرٌّ لا يعمل أسوأ من زرٍّ غائب. و`display:grid` تغلب `hidden`
   فنعيد إخفاءه صراحةً. */
.thm{flex-shrink:0;width:46px;height:46px;border:1px solid var(--rim);
  border-radius:9px;background:var(--card);box-shadow:var(--sh-soft);
  color:var(--text);cursor:pointer;display:grid;place-items:center;
  transition:box-shadow .15s}
.thm[hidden]{display:none}
.thm:active{box-shadow:var(--sh-in)}
.thm svg{width:20px;height:20px}
.thm .i-moon{display:none}
:root:not([data-theme="light"]) .thm .i-sun{display:none}
:root:not([data-theme="light"]) .thm .i-moon{display:block}
/* العلامة في صفِّ البلاطات على الجوال كما في الحاسب (طلب المالك): كانت
   في صفٍّ وحدها بقطر ١٤٢px فوق البلاطات، فيأكل «البطل» ٢٥٤px من شاشةٍ
   طولها ٨١٢ — فراغٌ حول دائرة — ولا يبدأ أولُ محاضر إلا عند ٥٩٦px.
   `--hs` ارتفاعٌ واحد للعلامة والبلاطات معاً فلا يعلو أحدهما الآخر،
   ويتمدّد مع العرض حتى يسلّم لمقاس الحاسب عند ٧٢٠px. */
.hero{--hs:clamp(64px,20vw,116px);display:grid;gap:10px;margin-top:14px;
  align-items:center;grid-template-columns:auto minmax(0,1fr)}
.hero-t{display:none}
/* العلامة أيقونةٌ قائمة بذاتها لا خلفيةٌ تحت العنوان (طلب المالك) —
   وصارت في هالةٍ بارزة حولها بئرٌ غائرة، كوجه المحاضر في صفحته. */
.markw{width:var(--hs);height:var(--hs);
  border-radius:50%;display:grid;place-items:center;background:var(--card);
  border:1px solid var(--rim);box-shadow:var(--sh-soft)}
/* بئرُ العلامة بلونِ الهوية الداكن في الوضعين — لا بلون الخلفية.
   **السبب لونُ الشعار نفسِه**: ذيلُه كريميٌّ فاتح، وعلى بيج الوضع
   النهاري (‎#DEDBD3‎ — كان ‎#D3CDC1‎ قبل «أداة») يذوب فلا يبقى منه إلا الرأس. وبئرٌ داكنةٌ تُبقي
   الشعارَ كما صُمِّم في الوضعين، وتصير مرساةً للهوية في النهاري. */
.markw .well{width:84%;height:84%;border-radius:50%;display:grid;
  place-items:center;background:#1C1B19;box-shadow:var(--sh-in)}
/* ٧٢٪ لا ٨٠٪: شعارُ «وضوح» أعرضُ من شعار الجامعة الذي كان هنا، فبـ٨٠٪
   يلامس طرفاه حافّةَ البئر. */
.mark{display:block;width:72%;height:auto;object-fit:contain}
/* ══ علامةُ «وضوح» ══
   نسختان من الفنّ لا واحدة: رأسُ الشعار فاتحٌ وذيلُه داكن، فنسخةُ
   الأبيض تذوب على الخلفية الداكنة والعكس. والتبديلُ بـCSS لا
   بجافاسكربت — لا ومضةَ شعارٍ خاطئ قبل أن يعمل السكربت، والوضعُ
   الليليُّ هو الأصل فنسختُه هي الظاهرةُ بلا شرط. */
/* العلامةُ الصغيرة في سطر العنوان — ترتفع مع حجم الخط لا بمقاسٍ ثابت.
   **شكلٌ واحد في الوضعين** (المالك 2026-09-23): الفنُّ الفاتح على بلاطةٍ
   بلون الهوية الداكن الثابت (`#1C1B19` أرضيةُ «أداة» الليلية — لونُ بئر `.markw` نفسُه)، لا نسختان
   تُبدَّلان — لا واحدةَ منهما تُقرأ على الأرضيتين. */
.hmk{display:inline-block;width:1.3em;height:1.3em;box-sizing:border-box;
  padding:.13em;border-radius:.34em;background:#1C1B19;object-fit:contain;
  vertical-align:-.3em}
/* ══ كلمةُ «وضوح» شعاراً لا نصّاً (طلب المالك ٢٠ سبتمبر ٢٠٢٦) ══
   ألوانُ العلامة نفسُها: كريميُّها حبراً في الليلي وبنّيُّها في النهاري،
   وذيلُها الرماديُّ الترابيُّ محطّةً ثانيةً في التدرّج.

   **وتبقى نصّاً لا صورة**: هي `<h1>` في التطبيق و`.htitle` في ٢٢٨٢
   صفحةٍ يفهرسها قوقل، ومعها `og:site_name` وJSON-LD. فلا `text-indent`
   ولا SVG ولا استبدالٌ بصورة.

   **حارسان لازمان لا زينة:** `background-clip:text` مع حبرٍ شفّاف
   **يُخفي الكلمة كلّياً** في وضع التباين القسري وفي أي محرّكٍ لا يدعمه
   — فالتدرّجُ داخل `@supports`، و`forced-colors` تعيد الحبرَ صريحاً.
   واللونُ المصمت `--wm-a` هو الأساس، فمن سقط عنه التدرّجُ رأى الكلمة
   بلون العلامة لا فارغة.

   **الوضعان يختلفان في النوع لا في الدرجة:** الليليُّ يحتمل توهّجاً
   (بطاقةٌ داكنة `#322E28`)، والنهاريُّ لا — الكريميُّ على بيج `#E3DED4`
   فرقُهما دون ٥٪ إضاءة فلا يُرى، والتوهّجُ الداكن يصير لطخةً حول
   الحرف. فالنهاريُّ نقشٌ غائر: فاتحٌ فوقُ وداكنٌ تحت، وهي لغةُ الظلال
   في هذا الملف أصلاً.

   و`em` لا `px`: حجمُ العنوان يهبط ‎١١٪‎ تحت ٤٢٠px، وظلٌّ بالبكسل يبقى
   بحجمه فيثقل على الجوال.
   و`to left` لا `90deg`: الصفحةُ `dir="rtl"` والتدرّجُ فيزيائيٌّ لا
   منطقيّ، فـ`90deg` يبدأ من آخر الكلمة العربية.
   و`filter:drop-shadow` لا `text-shadow`: مع `background-clip:text`
   يُرسم ظلُّ النصّ **فوق** التدرّج المقصوص داخل الحرف فيلطّخه، بينما
   `drop-shadow` يعمل على شكل المرسوم كلِّه ويقع خلفه. */
.wmk{display:inline-block;color:var(--wm-a);filter:var(--wm-shadow)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wmk{background:linear-gradient(to left,var(--wm-a),var(--wm-b));
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent}
}
@media (forced-colors:active){
  .wmk{background:none;-webkit-text-fill-color:currentColor;
    color:CanvasText;filter:none}
}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
/* البلاطة إطارٌ بارز وداخله وجهٌ ملوّن: الإطار ظلٌّ داخليّ بلون السطح،
   فلا عنصرَ إضافيّ في الوسم. والظلُّ الناعم لا ظلُّ البطاقة: بلاطةٌ
   بارتفاع ٧٥px تحت ظلٍّ بنصف قطر ٢٠px تبدو عائمةً في ضباب. */
.st{border-radius:13px;padding:10px 10px 9px;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:var(--hs);
  color:var(--tile-ink);border:1px solid var(--rim);
  box-shadow:var(--sh-soft),inset 0 0 0 5px var(--card);
  background:linear-gradient(155deg,var(--peach-a),var(--peach-b))}
.st:nth-child(2){background:linear-gradient(155deg,var(--mint-b),var(--mint-a))}
.st:nth-child(3){background:linear-gradient(155deg,var(--lilac-a),var(--lilac-b))}
/* `tabular-nums` تثبّت عرض الرقم: بدونها يرقص الصندوق أثناء العدّ
   لأن عرض «1» ليس عرض «8».
   والحجمُ محسوبٌ لا مقدَّر: أضيقُ بلاطة (شاشة ٣٢٠px) داخلُها ‎٤٥px‎، ورقمُ Plex الثقيل (هوية «أداة») عرضُه
   ‎٠٫٦em‎ قِيس في المتصفح — فخمسةُ أرقامٍ تسع حتى ‎١٥px‎: ‎٤٫٦vw‎ على ٣٢٠ = ‎١٤٫٧px‎ ← ‎٤٤٫٢px‎. وكان ‎٥vw‎
   على Cairo (‎٠٫٥٥٥em‎) ففاض بثلاثة بكسلات بعد التبديل (الملك سعود: تقييماتُها خمسُ خانات). يحرسه
   `e2e/identity.spec.js` — لا تكبّر المعامل قبل أن تعيد القياس. ولا خطَّ أحاديَّ العرض هنا (أعرضُ من هذا). */
.st b{display:block;font-size:clamp(.9rem,4.6vw,1.9rem);font-weight:800;
  line-height:1.1;font-variant-numeric:tabular-nums}
.st span{font-size:clamp(.68rem,2.9vw,.8rem);font-weight:700;margin-top:2px}
/* الحاسب كما كان حرفياً — المالكُ راضٍ عنه وهو المرجع الذي قِيس عليه
   الجوال. هذه الكتلة **بعد** القواعد الأساسية بقصد: التحديدُ واحد
   فالترتيبُ هو الحَكَم. */
@media (min-width:720px){
  .hero{gap:22px;margin-top:18px}
  .markw{width:150px;height:150px;box-shadow:var(--sh-card)}
  .stats{gap:18px}
  .st{min-height:150px;padding:20px 20px 16px;border-radius:13px;
    box-shadow:var(--sh-card),inset 0 0 0 7px var(--card)}
  .st b{font-size:2.15rem}
  .st span{font-size:.8rem}
}
@media (max-width:719px){
  header{padding-top:14px}
  .hbar{gap:10px}
  .thm{width:44px;height:44px}
  .ulogo{padding:5px 6px}
  .ulogo img{height:36px;max-width:50px}
}
@media (max-width:420px){
  .hero{gap:8px}
  .stats{gap:7px}
  header h1{font-size:1.08rem}
  header .sub{font-size:.78rem}
}
/* الوصفُ سطرٌ واحد على الهواتف الشائعة: كان ينكسر سطرين فيعلو الشريط
   ٢٤px بلا معنى يُضاف. عرضُه بخطّ Plex ‎٢١٫٩٤px‎ لكل بكسل من حجم الخط (قِيس مع «أداة»؛ كان Cairo ‎٢٢٫٨٥‎)،
   والمتاحُ له عرضُ الشاشة ناقصاً ما يأكله الشريط.

   **أُعيد اشتقاقُ المطروح مع دخول شعار الجامعة** — كان ١١٦ فصار ١٨٣:
   حواشي الترويسة ‎٣٢‎ + حشوةُ الشريط ‎٢٦‎ + حدّاه ‎٢‎ + زرّ الوضع ‎٤٤‎
   + خانةُ الشعار ‎٦١‎ (صورةٌ ‎٣٦px‎ ارتفاعاً × نسبة ‎١٫٣٦‎ = ‎٤٩‎، وحشوةٌ
   ‎٦×٢‎) + فجوتان ‎٢٠‎ = ‎١٨١‎، وبكسلان هامشاً. نسخُ الرقم القديم كان
   يُرجع الوصفَ سطرين صامتاً.

   و`clamp` لا `min`: تحت ‎٤٣٤px‎ يبلغ الحسابُ حدّاً غيرَ مقروء (‎٩px‎
   على هاتف ٣٩٠)، فأرضيّةُ ‎.7rem‎ تُوقفه ويُقبل سطران بحجمٍ يُقرأ —
   وهو ما كان عليه الحال قبل هذه القاعدة أصلاً. ولا `nowrap`: خطٌّ
   بديلٌ أعرض ينكسر سطرين ولا ينزلق تحت الزرّ. */
@media (min-width:375px) and (max-width:719px){
  header .sub{font-size:clamp(.7rem,calc((100vw - 183px)/21.9),.84rem)}
}
/* دخولٌ متدرّج: الصناديق تطلع واحداً بعد الآخر مع بدء العدّ، فيُقرأ
   الشريط حركةً واحدة لا ثلاث قفزات. `both` تُبقي الحالة النهائية،
   و`no-preference` تحترم من أطفأ الحركة في نظامه. */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
  /* حركةٌ يُرى فرقُها (قرار المالك ١٣ أكتوبر — يغلب حدودَ مواصفة راحة العين §٤): البلاطاتُ
     تقفز بارتدادٍ خفيف واحدةً بعد الأخرى، ثم العنوانُ والبحثُ والأزرار. على التحميل وحده
     (أعلى الصفحة، فلا يُرى شيءٌ مخفيٌّ ثم يقفز) */
  @keyframes pop{0%{opacity:0;transform:translateY(28px) scale(.86)}
    60%{opacity:1;transform:translateY(-5px) scale(1.03)}100%{opacity:1;transform:none}}
  .markw{animation:pop .7s .05s both}
  .st{animation:pop .7s cubic-bezier(.22,1,.36,1) both}
  .st:nth-child(1){animation-delay:.12s}
  .st:nth-child(2){animation-delay:.24s}
  .st:nth-child(3){animation-delay:.36s}
  .hero-t h2{animation:rise .6s cubic-bezier(.22,1,.36,1) both}
  .hero-t p{animation:rise .6s .1s cubic-bezier(.22,1,.36,1) both}
  .tools .in{animation:rise .6s .45s cubic-bezier(.22,1,.36,1) both}
  .tools .tchip,.tools .trend .tl{animation:rise .5s cubic-bezier(.22,1,.36,1) both}
  .tools .trend>:nth-child(1){animation-delay:.55s}
  .tools .trend>:nth-child(2){animation-delay:.6s}
  .tools .trend>:nth-child(3){animation-delay:.65s}
  .tools .trend>:nth-child(4){animation-delay:.7s}
  .tools .trend>:nth-child(5){animation-delay:.75s}
  .tools .trend>:nth-child(n+6){animation-delay:.8s}
  .tools .toolrow>*{animation:rise .55s cubic-bezier(.22,1,.36,1) both}
  .tools .toolrow>:nth-child(1){animation-delay:.6s}
  .tools .toolrow>:nth-child(2){animation-delay:.67s}
  .tools .toolrow>:nth-child(3){animation-delay:.74s}
  .tools .toolrow>:nth-child(4){animation-delay:.81s}}
/* حالة التحديث في التذييل بطلب المالك: ليست خبراً يُقرأ أولاً بل
   ختمُ طزاجةٍ يُراجَع آخراً. */
.ver{display:inline-flex;align-items:center;gap:2px;margin-top:12px;
  font-size:.72rem;font-weight:700;background:var(--card);
  border:1px solid var(--rim);box-shadow:var(--sh-soft);border-radius:9px;
  padding:6px 15px;color:var(--muted)}

/* ══ أدوات البحث ══
   البحث غائرٌ في الأرضية (حقلٌ يُكتب فيه) والأزرار بارزة (تُضغط) —
   الفرقُ بين ما يُملأ وما يُضغط يُرى قبل أن يُقرأ.
   والشريط ثابت بمكانه أعلى الصفحة — لا يلاحق التمرير (طلب المالك). */
.tools{max-width:1280px;margin:0 auto;padding:16px 16px 12px}
.in{position:relative}
.in svg{position:absolute;inset-inline-start:16px;top:50%;
  translate:0 -50%;width:18px;height:18px;stroke:var(--muted);fill:none;
  stroke-width:2.2;pointer-events:none}
/* عدسةُ البحث الرئيسية زرٌّ حقيقيّ (كانت `<svg aria-hidden>` زخرفية
   يضغطها الطالبُ فلا يحدث شيء). و**مركزُ الأيقونة كما كان بالضبط**:
   ‏٨ + ١٧ = ٢٥ بكسل، وهو ١٦ + ٩ قبلها — فالشكلُ لم يتغيّر وحدَها
   مساحةُ اللمس كبرت إلى ٣٤ بكسل. وصناديقُ فلترة الفهارس تُبقي
   قاعدةَ `.in svg` أعلاه: أيقونتُها زخرفيةٌ فعلاً. */
.in #go{position:absolute;inset-inline-start:8px;top:50%;translate:0 -50%;
  display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;
  border-radius:50%;background:none;cursor:pointer;z-index:1}
.in #go svg{position:static;translate:none;inset-inline-start:auto}
.in #go:hover svg,.in #go:focus-visible svg{stroke:var(--text)}
/* صفُّ «عرض المزيد» في المنسدلة: آخرُ الصفوف وبخطٍّ يفصله عمّا فوقه */
.sgmore{border-top:1px solid var(--line);font-weight:700;color:var(--acc)}
/* ترويسةُ صفحة النتائج — العددُ وحالةُ «لا نتائج».
   **وعرضُها عرضُ العمود** (`1000px` كـ`header` و`.tools` و`main`): كانت
   بهامشٍ ١٦ بكسل وحدَه بلا سقفٍ ولا توسيط، فعلى الشاشة العريضة تمتدّ
   بعرض النافذة كلِّها فيقع سطرُ «نتائج … — ٢٢ محاضراً» على حافةِ
   الشاشة بعيداً عن البطاقات التي يعدّها — وبلّغ عنه المالك. */
#qhead{max-width:1280px;margin:14px auto 0;padding:0 16px}
#qhead .qn{font-weight:700}
#qhead .qn b{color:var(--acc)}
#qhead .qnone{margin:10px 0 0;padding:20px;text-align:center;
  background:var(--card);border:1px solid var(--rim);border-radius:13px;
  box-shadow:var(--sh-card)}
#qhead .qnone p{margin:0 0 12px;color:var(--muted)}
/* لحظةُ فراغ البحث بحبّة رمل (خريطةُ الشخصيات — المالك ١٥ أكتوبر ٢٠٢٦: «موافق ابدا»): الشخصيةُ صامتة
   والكلامُ للصفحة، بحجمها الأوسط ٩٦ وواحدةٌ في الشاشة، ولا بيانات دكتور بجانبها (`docs/characters.md`).
   تُرسم في ظلٍّ (`mascotIn` — أصنافُ رسمها `sh`·`w`·`st` تصادم أصنافَ هذه الصفحة)، ومتغيّراتُ ألوانها
   على `:root` تحت (`@MASCOT_ROOT@`) فتنفذ إليه وراثةً. */
#qhead .qnone .qmz{display:block;width:96px;margin:0 auto 4px}
#qhead .qnone .qnt{display:block;margin:0 0 6px;font-size:1.05rem;font-weight:800;overflow-wrap:anywhere}
#qhead .qnone .navlnk{width:fit-content;margin-inline:auto}
/* لحظةُ الإرسال في الورقتين (المحاضر · المادة): هدهدٌ «وصل» أو «ما وصل»، وساعةٌ رملية لحدّ اليوم — فوق رسالة
   الورقة بعد الردّ الحقيقي، والرسالةُ هي الكلام. وفي «وصل» يتنحّى النموذجُ فتصير الورقةُ خاتمة (الحجمُ الكبير). */
.sheet .smom{display:block;width:96px;margin:8px auto 0}
.sheet .smom.big{width:160px}
/* «في كل مكان» (المالك ١٦ أكتوبر — `docs/characters.md` §٣): **حبّةُ رمل في شريط البحث** تهزّ راسها وأنت تكتب وتنطّ حين يلقى
   وتحفر حين لا، صامتةً (`aria-hidden` — الكلامُ للمنسدلة)، وزرُّ المسح يتزحزح لها · **شخصيةُ كل أداة** في بلاطتها مكانَ أيقونتها
   (ثابتة — `data-still`) · **الهدهدُ** بجانب «درست عنده؟» في بطاقة التقييم، بعيداً عن الأرقام · و**حبّةُ رمل** تزرع أولَ حبّةٍ في
   الآراء الفاضية (وعلى الجوال يظهر مربّعُها حينها وحده). */
/* الهدهدُ في رأس ورقتي التقييم، بين العنوان وزرّ الإغلاق — ويتنحّى للحظة النتيجة (`.smom`) */
.sheet .sh .shz{display:block;width:58px;flex:0 0 auto;margin-inline-start:auto;margin-block:-8px}
.sheet .sh .shz[hidden]{display:none}
.in .qmz{position:absolute;inset-inline-end:6px;top:50%;translate:0 -50%;width:50px;z-index:1}
.in.mz #q{padding-inline-end:102px}
.in.mz #clr{inset-inline-end:60px}
.ttile .tic.mz{width:64px;height:47px;background:none;box-shadow:none;border-radius:0;margin-bottom:4px}
.pf-ctah{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pf-mz{display:block;width:84px;flex:0 0 auto}
.pf-voices .pf-mz{width:76px}
@media (max-width:719px){.pf-cta .pf-voices.none{display:flex;min-height:0}}
@MASCOT_ROOT@
#q{width:100%;min-height:52px;padding:10px 46px 10px 44px;border:0;
  border-radius:9px;background:var(--bg);box-shadow:var(--sh-in);
  font-size:1rem;font-weight:600}
#q::placeholder{color:var(--muted);font-weight:500}
.row{display:flex;gap:10px;margin-top:12px}
/* زر مسح البحث داخل البار */
#clr{position:absolute;inset-inline-end:10px;top:50%;translate:0 -50%;
  width:32px;height:32px;border:1px solid var(--rim);border-radius:50%;
  background:var(--card);box-shadow:var(--sh-soft);color:var(--muted);
  cursor:pointer;font-size:.85rem;font-weight:700}
/* الاقتراحات الحية — لوحة بارزة تحت البار */
#sug{background:var(--card);border:1px solid var(--rim);border-radius:13px;
  box-shadow:var(--sh-card);margin-top:10px;overflow:hidden}
.sgr{display:flex;align-items:center;justify-content:flex-start;
  gap:10px;width:100%;min-height:48px;padding:10px 16px;border:0;
  background:none;cursor:pointer;font-weight:700;text-align:start}
.sgr:hover{background:var(--card2)}
.sgr+.sgr{border-top:1px solid var(--line)}
.sgr small{color:var(--muted);font-weight:600;flex-shrink:0;
  margin-inline-start:auto}
/* الثلاثة في صفٍّ واحد بطلب المالك. `wrap` لا تمديد: ثلاثة عناصر
   عربية على شاشة ٣٢٠px لا تتسع في سطر، فتنزل إلى سطرين بدل أن
   تنضغط حروفها. و«الترتيب:» سقطت من نصّ الزر — الأيقونة تقولها. */
.toolrow{flex-wrap:wrap}
/* زرّا الفهرسين روابط خام تشتغل حتى بلا جافاسكربت، و«إضافة محاضر»
   زرٌّ يلبس `navlnk` ليطابق إخوته حرفياً — لا نمطٌ ثانٍ يوازيه. */
.sortbtn,.navlnk{flex:1 1 22%;min-width:132px;min-height:48px;
  display:flex;align-items:center;justify-content:center;padding:8px 14px;
  border:1px solid var(--rim);border-radius:9px;background:var(--card);
  box-shadow:var(--sh-soft);font-weight:700;font-size:.82rem;
  color:var(--text);text-decoration:none;cursor:pointer;text-align:center;
  transition:box-shadow .15s}
.sortbtn:active,.navlnk:active{box-shadow:var(--sh-in)}
button.navlnk{font-family:inherit}
/* الجوال أهدأ (طلب المالك: «صغّر بعض الأشياء»): البحثُ والأزرار الأربعة
   كانت بمقاس الحاسب على شاشةٍ ثلثُه. و٤٤px حدٌّ لا يُنزل عنه — دونها
   يخطئ الإبهامُ الزرَّ. وخطُّ `#q` يبقى ‎1rem‎: أقلّ من ١٦px يجعل iOS
   يقرّب الصفحة عند لمس الحقل. */
@media (max-width:719px){
  .tools{padding-top:14px}
  #q{min-height:48px}
  .toolrow{gap:8px;margin-top:10px}
  .toolrow .sortbtn,.toolrow .navlnk{min-height:44px;padding:6px 12px}
}
#nojs{background:var(--card);border:1px solid var(--rim);border-radius:13px;
  box-shadow:var(--sh-soft);color:var(--muted);font-size:.78rem;
  font-weight:600;padding:10px 14px;margin-top:12px}

/* ══ الفهارس: أسهم مطوية خالصة HTML ══ */
.idx{max-width:1280px;margin:22px auto 0;padding:0 16px;
  scroll-margin-top:12px}
.idx h2{font-size:1.15rem;font-weight:800;margin-bottom:2px}
.hint2{color:var(--muted);font-size:.78rem;margin-bottom:12px}
.idx details{background:var(--card);border:1px solid var(--rim);
  border-radius:13px;box-shadow:var(--sh-soft);margin-top:10px;
  overflow:hidden}
.idx summary{padding:13px 16px;font-weight:700;font-size:.88rem;
  cursor:pointer;list-style-position:inside}
.idx summary small{color:var(--muted);font-weight:600;white-space:nowrap}
/* صورُ المواد (`course_images`): دائرةٌ كصور المحاضرين — في الفهرس والاقتراح ورأس المادة مكانَ الكتاب */
.crimg{border-radius:50%;display:block;object-fit:cover;flex:0 0 auto}
.idx summary .crimg.ix{display:inline-block;width:36px;height:36px;vertical-align:middle;margin-inline-end:4px}
.sgr .crimg{width:28px;height:28px}
.pf-well .crimg{width:87%;height:87%}
.idx details>div{padding:2px 12px 12px}
/* المستوى الثاني غائرٌ داخل الأول: الشجرة تُقرأ من العمق لا من الإزاحة. */
.idx details details{background:var(--bg);border-color:transparent;
  box-shadow:var(--sh-in);margin-top:8px}
.drow{display:flex;align-items:center;gap:10px;min-height:44px;
  padding:8px 10px;border-radius:9px;color:var(--text);
  text-decoration:none;font-size:.84rem;font-weight:600}
.drow:hover,.drow:active{background:var(--card2)}
/* `.pgl` رابطُ صفحة الكلية/المادة أعلى الفهرس — تعريفُه مع صفحة المادة. */
/* ══ سلّمُ النسبة المتّصل ══
   **قرارُ المالك ٢٠ سبتمبر ٢٠٢٦، وهو ينقض قراراً سابقاً بوعي:** كان
   السلّمُ أربعَ درجاتٍ مقطوعةً تنتهي بالرمادي لا بالأحمر، وكان مكتوباً
   هنا أن «الأحمرَ حكمٌ ولونُ خطر، والدرجةَ المنخفضة معلومةٌ لا تهمة».
   وقال المالك نصّاً: «الأحمر يعطي تنبيه وهذا المهم» — فصار السلّمُ
   متّصلاً أحمر ← كهرمان ← أخضر على **كل نسبةٍ يراها الطالب**.

   **الرقمُ وحده يُبثّ** (`style="--p:87"`) واللونُ يُحسب هنا مرّةً
   واحدة — فلا تعود العتباتُ تُكتب ستَّ مرّاتٍ في ثلاثة ملفّات.

   **مسارٌ واحدٌ لا مساران:** السلّمُ صُمّم في OKLCH ثم شُحن ثلاثَ
   كثيراتِ حدودٍ على قنوات sRGB — فما يراه كروم يراه متصفّحُ تيليجرام
   الداخليُّ على جهازٍ قديم حرفاً بحرف. لا `oklch` ولا `color-mix` ولا
   `@supports` ولا نسخةٌ ثانيةٌ تتباعد.

   **الحزامُ خاصّيّتان لا واحدة:** الرماديُّ في `background-color`
   والسلّمُ في `background-image`. قيمةٌ فاسدةٌ لـ`--p` تُسقط الصورةَ
   وحدَها فيبقى تحتها رماديٌّ مقروء — لا شفافيّةٌ صامتة. (و`var(--p,50)`
   وحدَها لا تكفي: `--p:` فارغةً قيمةٌ *صحيحة* بنصّ المواصفة.) */
.sc{
  --sc-k:calc(var(--p)/100);                      /* ٠←١ خطّي */
  --sc-m:calc(var(--p)*(100 - var(--p))/2500);    /* قوسٌ ذروتُه ١ عند ٥٠ */
  --sc-n:calc(var(--sc-k)*var(--sc-m));           /* القوسُ مائلاً للقمّة */
  --sc-w:calc(var(--sc-k)*var(--sc-k)*var(--sc-k)*var(--sc-k));  /* وزنُ التوهّج */
  --sc-fr:calc(var(--sc-r0) + var(--sc-r1)*var(--sc-k) + var(--sc-r2)*var(--sc-m) + var(--sc-r3)*var(--sc-n));
  --sc-fg:calc(var(--sc-g0) + var(--sc-g1)*var(--sc-k) + var(--sc-g2)*var(--sc-m) + var(--sc-g3)*var(--sc-n));
  --sc-fb:calc(var(--sc-b0) + var(--sc-b1)*var(--sc-k) + var(--sc-b2)*var(--sc-m) + var(--sc-b3)*var(--sc-n));
  --sc-bg:rgb(var(--sc-fr), var(--sc-fg), var(--sc-fb));
  --sc-gc:rgba(var(--sc-fr), var(--sc-fg), var(--sc-fb), calc(var(--sc-ga)*(.5 + .5*var(--sc-w))));
  --sc-rd:calc(var(--sc-gr) + var(--sc-gr)*1.8*var(--sc-w))}
.pct.sc,.mini.sc,.axo.sc,.bar i.sc,.pf-list .trk i.sc,
.pf-tiles .pf-tile.sc .pf-face{
  background-color:var(--t4);
  background-image:linear-gradient(var(--sc-bg),var(--sc-bg))}
.pct.sc,.mini.sc,.axo.sc,.pf-tiles .pf-tile.sc .pf-face{color:var(--tier-ink)}
/* التوهّج: خفيفٌ عامٌّ عند كل قيمة (فالأحمرُ يتوهّج أيضاً) ثم يشتدّ
   بـ‎(p/100)⁴‎ قرب المئة. وشعاعُ الأشرطة أضيق: ستّةُ محاورَ متراصّةٌ
   بفجوة ١٣px، فهالةٌ بعرض ٢٠px تتداخل مع جارتها. */
.pct.sc,.axo.sc{box-shadow:var(--sh-soft),0 0 var(--sc-rd) var(--sc-gc)}
.mini.sc{box-shadow:0 0 calc(var(--sc-rd)*.55) var(--sc-gc)}
.bar i.sc,.pf-list .trk i.sc{box-shadow:0 0 calc(var(--sc-rd)*.55) var(--sc-gc)}
.pf-tiles .pf-tile.sc{box-shadow:var(--sh-card),0 0 var(--sc-rd) var(--sc-gc)}
.mini{min-width:46px;text-align:center;border-radius:9px;
  color:var(--tier-ink);font-size:.72rem;font-weight:800;padding:2px 6px;
  flex-shrink:0}
.mini.t0{background:var(--card2);color:var(--muted);box-shadow:none}
.top{display:inline-block;margin:14px 0;color:var(--muted);
  font-size:.8rem;text-decoration:none;font-weight:700}
/* بحثان في فهرس المواد. ‏`font-size:1rem` مقصود: أقلّ من ‏١٦px يجعل
   iOS يقرّب الصفحة عند لمس الحقل، فيخرج الفهرس عن الشاشة.
   والحشوتان تحجزان مكان العدسة وزرِّ المسح: بلا حجزٍ ينزلق النصّ
   الطويل تحت الزرّ. */
.idxq{margin:0 0 12px}
.idxq input{width:100%;min-height:50px;padding:10px 46px 10px 44px;
  border:0;border-radius:9px;background:var(--bg);box-shadow:var(--sh-in);
  font-family:inherit;font-size:1rem;font-weight:600;color:var(--text)}
.idxq input::placeholder{color:var(--muted);font-weight:500}
.idxq .clr{position:absolute;inset-inline-end:10px;top:50%;
  translate:0 -50%;width:30px;height:30px;border:1px solid var(--rim);
  border-radius:50%;background:var(--card);box-shadow:var(--sh-soft);
  color:var(--muted);cursor:pointer;font-size:.9rem;line-height:1}
/* حقلُ المادة أهدأ: هو داخل بطاقةٍ مفتوحة، فلو حمل ظلَّها وحجمَها
   صار بطاقةً ثانية داخلها. */
.dq{margin:6px 2px 8px}
.dq input{width:100%;min-height:44px;padding:9px 14px;border:0;
  border-radius:9px;background:var(--bg);box-shadow:var(--sh-in);
  font-family:inherit;font-size:1rem;font-weight:600;color:var(--text)}
.idx details details .dq input{background:var(--card2)}
.dq input::placeholder{color:var(--muted);font-weight:500}
.idxnone{color:var(--muted);font-size:.8rem;padding:10px 4px;
  font-weight:600}
/* ‏`.drow` و`details` لهما `display` صريح يغلب قاعدة المتصفّح
   للسمة `hidden`، فلا يختفيان بها وحدها. */
.idx [hidden]{display:none!important}

/* ══ القائمة ══
   `minmax(0,1fr)` لا `1fr`: الثانية تعني `minmax(auto,1fr)`، وأرضيّةُ
   `auto` هي أصغرُ عرضٍ ممكن للبطاقة — فسطرُ الرتبة والكلية الطويل
   يوسّع العمود إلى ٦٢٧px داخل حاوٍ عرضه ٣٨٦، فتنزلق الصفحة أفقياً
   على الجوال. والصفر يسمح للعمود بالانكماش، فيقصّ الاسمُ الطويل.
   عمودٌ واحد لا شبكة: الصفّ المضغوط يُقرأ مسحاً من أعلى لأسفل. */
main{max-width:1280px;margin:0 auto;padding:10px 16px;display:grid;
  gap:16px;grid-template-columns:minmax(0,1fr)}
/* وعلى الحاسب عمودان ثم ثلاثة (قرار المالك ٢٢ سبتمبر): البطاقةُ المفتوحة
   تمدّ صفَّها وحده، و`align-items:start` كي لا تتمدّد جاراتُها معها. */
@media (min-width:1000px){main{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
@media (min-width:1440px){main{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* الصفّ يُفتح بـ`<details>` لا بجافاسكربت: التفاصيل تظهر بالضغط ولو
   تعطّل السكربت — القاعدة نفسها التي تعمل بها الفهارس. */
.card{background:var(--card);border:1px solid var(--rim);border-radius:13px;
  box-shadow:var(--sh-card);transition:translate .15s}
@media(hover:hover){.card:hover{translate:0 -2px}}
.crow{display:flex;align-items:center;gap:12px;padding:12px 14px;
  cursor:pointer;list-style:none}
.crow::-webkit-details-marker{display:none}
.card[open] .crow{padding-bottom:6px}
/* `min-width:0` تسمح للعنصر المرن بالانكماش دون محتواه، فالاسم
   الطويل يُقصّ ولا يدفع الدرجة خارج الصفّ. */
.cwho{flex:1;min-width:0}
.cwho h3{font-size:1rem;font-weight:800;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* على الجوال يلتفّ الاسم إلى سطرين ثم يُقصّ: الرباعيّ كان يُقصّ عند ٣٧٥px
   من آخره («ايمان علي عبدالعزيز ال…») — واسمُ العائلة هو ما يبحث به
   الطالب. السطرُ الثانوي يبقى سطراً واحداً، والدرجةُ `flex-shrink:0` فلا
   يمسّها شيء؛ وفوق ٧٢٠px العمودُ يسع الاسم كاملاً فيبقى سطراً.
   **ارتفاعُ السطر متروكٌ على ١٫٦ عمداً**: نقطتا الياء الأخيرة في Cairo
   تنزلان ٠٫٤٧em تحت السطر، و١٫٤ تترك لهما ٠٫٣٣ — فتقصّهما
   `overflow:hidden` ويُقرأ «الحربي» «الحربى»؛ وحشوةٌ سفلية تعوّضهما تكشف
   رأسَ السطر الثالث المقصوص (قِيسا في المتصفح). و`-webkit-box` ما تفهمه
   المتصفحاتُ كلُّها اليوم وسفاري iOS منها. **والقياسيةُ `line-clamp` قبل
   المسبوقة لا بعدها عمداً**: حيث يُفهم الاثنان يغلب الأخير، والمسبوقةُ هي
   المضمونةُ على `-webkit-box` وهي ما قِيس — فلا يتبدّل السلوك يوم تصل
   القياسية. و`anywhere` حارسٌ لكلمةٍ أطول من السطر. ولا
   `text-wrap:balance`: الموازنةُ تضيّق السطرين فيُقصّ من الاسم الطويل أكثر. */
@media (max-width:719px){
  .cwho h3{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;
    line-clamp:2;-webkit-line-clamp:2;overflow-wrap:anywhere}
}
/* الرتبة بلونٍ يتبع صيغتها: وردي للمؤنّثة وأزرق للمذكّرة. والدرجتان
   مفحوصتان على سطح البطاقة (٥٫٠:١ و٥٫٦:١ في النهاري، ٧٫٤ و٧٫٦ في
   الليلي) — السطر صغير، ولونٌ باهت عليه يُقرأ رماداً لا معنى. */
.rk{font-weight:800}
.rk.rf{color:var(--rank-f)}
.rk.rm{color:var(--rank-m)}
.cwho .meta{display:block;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin:2px 0 0}
.cscore{display:flex;flex-direction:column;align-items:center;gap:4px;
  flex-shrink:0}
/* عدّاد مضغوط: أيقونةٌ ورقم بدل «١٠ تقييماً». الكلمة تتكرّر في كل
   صفٍّ بلا أن تضيف شيئاً، والأيقونة تقولها مرةً واحدة للعين. */
.cscore small{color:var(--muted);font-size:.7rem;font-weight:700;
  white-space:nowrap}
.cmet{display:inline-flex;align-items:center;gap:3px}
.cmet .ic{width:.95em;height:.95em;vertical-align:0;margin-inline-end:0}
.cbody{padding:0 16px 15px}
/* صورة المحاضر: حرفٌ أول في الوسم (يُرى بلا جافاسكربت)، ويستبدله
   السكربت بصورةٍ رمزية ثابتةٍ لكل محاضر. */
.avatar{width:50px;height:50px;border-radius:50%;flex-shrink:0;padding:3px;
  display:grid;place-items:center;overflow:hidden;background:var(--card);
  border:1px solid var(--rim);box-shadow:var(--sh-soft);
  font-weight:900;font-size:1.15rem;color:var(--muted)}
.avatar svg{width:100%;height:100%;display:block;border-radius:50%}
.card h3{font-size:1.02rem;font-weight:800}
.meta{color:var(--muted);font-size:.76rem;margin:4px 0 0}
.subs{color:var(--muted);font-size:.74rem;margin:4px 0 12px;
  font-weight:600}
.card .meta:last-of-type,.card .subs{margin-bottom:12px}
.overall{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.overall small{color:var(--muted);font-size:.75rem;font-weight:600}
.none{color:var(--muted);font-size:.78rem}
.pct{font-weight:800;font-size:1.02rem;border-radius:9px;
  padding:3px 13px;color:var(--tier-ink);box-shadow:var(--sh-soft)}
.pct.t0{background:var(--card2);color:var(--muted);box-shadow:var(--sh-in)}
/* «تقييمات قليلة»: إطارٌ متقطّع بلا لون درجة — الشكلُ نفسه يقول إن
   الرقم لم يكتمل بعد، فلا يُقرأ حكماً. */
.pct.few{background:none;color:var(--muted);border:1.5px dashed var(--line);
  box-shadow:none;font-size:.72rem;font-weight:700;padding:4px 9px}
.ax{margin:7px 0}
.ax .t{display:flex;justify-content:space-between;gap:8px;
  font-size:.78rem;margin-bottom:5px;font-weight:700}
.ax .t span{color:var(--muted);white-space:nowrap}
/* فاصلُ البطاقة توأمُ `.pf-list .sep` في صفحة المحاضر: ما تحته سهولةٌ
   لا جودة، «ليست في النسبة». قاعدةٌ مستقلّة لا محدِّدٌ مشترك معه: هامشُ
   ذاك (`margin-top:2px`) يأتي بعدها في الملف فيغلب هوامشَ البطاقة. */
.axsep{display:flex;align-items:center;gap:10px;color:var(--muted);
  font-size:.74rem;font-weight:700;margin:12px 0 8px}
.axsep:after{content:"";flex:1;border-top:1px dashed var(--line)}
/* **`overflow:hidden` حُذف من `.bar`** — وهو أصلُ عطبٍ صامت: كان يقصّ
   ظلَّ الحشوة فلا تُرسم الهالةُ أصلاً مهما كُتبت. ووضعُها على المجرى بدله
   يجعل محوراً عند ١٢٪ يُحاط بهالةٍ حمراءَ بعرض الشريط كلِّه — فتكذّب
   الهالةُ الحشوة. والحذفُ آمنٌ لا تجميليّ: `.bar i` تحمل `border-radius`
   بنفسها، وتوأمُها `.pf-list .trk` في صفحة المحاضر يعمل بلا `overflow`
   منذ اليوم الأول. **وعرضُ الحشوة يُقصّ في المولّد** (`max(0,min(100,p))`)
   لا هنا — فالقصُّ البصريُّ لم يكن حارساً بل ستاراً على قيمةٍ شاذّة. */
.bar{height:12px;padding:2px;background:var(--bg);box-shadow:var(--sh-in);
  border-radius:9px}
.bar i{display:block;height:100%;border-radius:9px}
/* والبطاقةُ والصفحةُ تقولان الشيءَ نفسَه عن المحاضر نفسِه: كلُّ
   المحاور على السلّم الواحد، وصنفُ `.hard` يبقى للفاصل والترتيب لا للّون. */
.rate{margin-top:auto;padding-top:14px}
.rate .rbtn{display:flex;align-items:center;justify-content:center;gap:4px;
  width:100%;min-height:54px;border-radius:13px;text-decoration:none;
  background:var(--primary);color:var(--primary-ink);font-weight:800;
  cursor:pointer;box-shadow:var(--sh-btn);border:1px solid transparent;
  transition:translate .12s,box-shadow .12s}
.rate .rbtn:active{translate:0 2px;box-shadow:var(--sh-in)}
/* «اترك تعليقاً»: ثانويٌّ تحت زرّ التقييم — بسطح البطاقة لا بلون الإجراء،
   كي يبقى التقييمُ هو الدعوةَ الأولى ويُرى التعليقُ باباً مستقلاً بجانبه. */
.rate .rbtn.alt{margin-top:10px;min-height:48px;background:var(--card);
  color:var(--text);border-color:var(--rim)}
#more{display:block;width:calc(100% - 32px);max-width:968px;
  margin:14px auto 0;min-height:52px;border:1px solid var(--rim);
  border-radius:9px;background:var(--card);box-shadow:var(--sh-soft);
  font-weight:700;cursor:pointer}
#more:active{box-shadow:var(--sh-in)}
footer{text-align:center;color:var(--muted);font-size:.78rem;
  padding:30px 16px}
/* روابط التذييل — في كل صفحة، فالقواعد لا تُطلب بل تُوجَد */
/* هدفُ لمسٍ ٤٤px (كان ~٣٩): الارتفاعُ من `min-height` لا من حشوةٍ أكبر،
   فالشكلُ كما هو والفراغُ بين الصفوف أقلّ ليعوّض. (فحص 2026-09-23) */
.flinks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;
  margin-top:12px}
.flinks a,.flinks .cclink{display:inline-flex;align-items:center;min-height:44px;
  padding:0 6px;color:var(--muted);
  background:none;border:0;font:inherit;cursor:pointer;
  font-size:.78rem;font-weight:700;
  text-decoration:none}
.flinks a:hover{text-decoration:underline}
/* بانر الموافقة على الكوكيز — يظهر حتى يُختار، ويُفتح ثانيةً من رابط الذيل */
/* مضغوطٌ بطلب المالك: العرضُ كما هو، والارتفاعُ والخطُّ أصغر — كان يغطّي
   قرابة بطاقتين من القائمة على الجوال. الزرّان ٤٠ بكسل: أدنى ما يُلمس براحة. */
/* ويجلس **فوق** شريط التنقّل السفلي بفاصل ١٢px لا عليه: كلاهما مثبَّتٌ في
   الأسفل، ولو تشاركا الموضع لغطّى البانرُ الشريطَ حتى يُختار. */
.cc{position:fixed;inset-inline:12px;bottom:calc(12px + var(--bnav));z-index:40;max-width:560px;
  margin:0 auto;background:var(--card);border:1px solid var(--rim);border-radius:13px;
  box-shadow:var(--sh-card);padding:10px 14px}
.cc h4{font-size:.86rem;font-weight:800;margin:0 0 2px}
.cc p{color:var(--muted);font-size:.72rem;font-weight:600;line-height:1.55;margin:0}
.cc p a{color:var(--primary);font-weight:700}
.cc .ccb{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cc button{flex:1;min-width:110px;min-height:40px;border-radius:9px;border:1px solid var(--rim);
  font:inherit;font-weight:800;font-size:.78rem;cursor:pointer;background:var(--card);
  color:var(--text);box-shadow:var(--sh-soft)}
.cc button.pri{background:var(--primary);color:var(--primary-ink);border-color:transparent;
  box-shadow:var(--sh-btn)}
.cc button:active{box-shadow:var(--sh-in)}

/* ══ شريط التنقّل السفلي ══
   ثلاثُ وجهاتٍ ثابتة في كل صفحة (قرار المالك): الرئيسية · المواد · الكليات.
   حبّةٌ عائمة لا شريطٌ ملتصق بالحافة: البارزُ في هذه الهوية يُرى بظلّيه
   (داكنٌ تحت وفاتحٌ فوق)، والملتصقُ بحافة الشاشة يُقصّ نصفُ ظلّه فيبدو
   مسطّحاً غريباً عن البطاقات. فهي أختُ `.hbar` شكلاً وأختُ `.cc` موضعاً.
   وعلى الشاشة العريضة تبقى حبّةً في الوسط بعرضٍ أقصى: شريطٌ بعرض ١٢٨٠px
   يباعد الأهدافَ الثلاثة أربعمئة بكسل ويرسم خطّاً تحت صفحةٍ عمودُها ألف.
   `--bnav` ما يحجزه الشريط من أسفل الشاشة (ارتفاعُه ٦٦ + ارتفاعُه عن
   الحافة ١٢): يقرؤه `body` ليُبقي فراغَه، و`.cc` ليجلس فوقه، و`html`
   كي لا يقف عنصرٌ مركَّزٌ عليه بلوحة المفاتيح تحت الشريط.
   والطبقات: الشريط ٣٠ < بانر الكوكيز ٤٠ < الأوراق ٥٠ — فالورقةُ تغطّيه،
   والبانرُ لا يغطّيه ولا يتغطّى به.
   ولا `env(safe-area-inset-bottom)`: وسمُ `viewport` بلا `viewport-fit=cover`
   فالقيمةُ صفرٌ دائماً وكتابتُها إيهام — والعومُ ١٢px يُبعدها عن مؤشّر آيفون. */
:root{--bnav:78px}
html{scroll-padding-bottom:calc(var(--bnav) + 12px)}
.bnav{position:fixed;inset-inline:12px;bottom:12px;z-index:30;max-width:420px;
  margin:0 auto;display:flex;gap:6px;padding:6px;background:var(--card);
  border:1px solid var(--rim);border-radius:13px;box-shadow:var(--sh-card);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s}
/* يغيب مع النزول ويعود مع الصعود (طلب المالك) — القارئُ النازل يقرأ،
   والصاعدُ يبحث عن وجهة. السمةُ على `<html>` لا على الشريط: بانرُ الكوكيز
   جالسٌ فوقه بـ`--bnav`، فلو غاب الشريط وحده بقي البانر معلّقاً فوق فراغ.
   وإزاحةٌ لا `display`: يبقى في ترتيب التركيز، و`BNAV_JS` يعيده لحظةَ
   يصله التركيز بلوحة المفاتيح.
   **والإزاحةُ وحدها لا تُغيّبه على الهاتف** (بلّغ المالك من آيفونه: «ما
   يختفي بشكل كامل»): متصفحاتُ الجوال تطوي شريطَها السفلي مع النزول نفسِه
   الذي يُغيّب شريطَنا، فتنكشف تحت حافة الشاشة القديمة ٥٠–٩٠px — وهي
   بالضبط حيث أُزيح (كان ٢٨px تحت الحافة). ولا يُرى هذا في محاكاة الحاسب:
   شاشتُها لا تتمدّد. فالغيابُ بـ`opacity:0` أولاً — لا يُرى أينما وقع —
   والإزاحةُ للحركة فقط. و`pointer-events:none` كي لا تُصيب لمسةٌ زرّاً لا
   يُرى. و`transform` لا `translate`: سفاري قبل ‎١٤٫١‎ لا يعرف الثانية فيبقى
   الشريط مكانه.
   ومن أطفأ الحركة في نظامه يراه يغيب ويعود بلا انزلاق (القاعدة العامّة
   فوق تُسقط كل `transition`). */
.navoff .bnav{transform:translateY(calc(100% + 40px));opacity:0;
  pointer-events:none}
.cc{transition:bottom .28s cubic-bezier(.2,.7,.2,1)}
.navoff .cc{bottom:12px}
.bnav a{flex:1 1 0;min-width:0;min-height:52px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border-radius:13px;color:var(--muted);text-decoration:none;
  font-size:.72rem;font-weight:700;line-height:1.35;white-space:nowrap;
  transition:box-shadow .15s}
.bnav .ic{width:22px;height:22px;margin:0;vertical-align:0}
@media(hover:hover){.bnav a:hover{color:var(--text)}}
.bnav a:active{box-shadow:var(--sh-in)}
/* «أنت هنا» محفورٌ في الأرضية كالخيار المختار في الأوراق: يُرى بالشكل
   والوزن قبل اللون. والنصُّ بحبر الصفحة لا بالأزرق — الأزرقُ على الرمل
   ٤٫٢:١ لا يكفي نصّاً بهذا الصغر، فبقي للأيقونة وحدها (حدُّها ٣:١). */
.bnav a[aria-current]{background:var(--bg);box-shadow:var(--sh-in);
  color:var(--text);font-weight:800}
.bnav a[aria-current] .ic{stroke:var(--primary)}
/* حلقةُ التركيز العامّة تستبدل الظلَّ كلَّه، فيفقد «أنت هنا» حفرتَه حين
   يُركَّز عليه بلوحة المفاتيح — فيُجمع الاثنان كما في حقول الإدخال. */
.bnav a[aria-current]:focus-visible{box-shadow:var(--sh-in),var(--ring)!important}
@media print{.bnav{display:none}}
/* ══ الشاشةُ العريضة (≥١٠٠٠px) — نسخةُ الحاسب ══
   المالك (٢٢ سبتمبر ٢٠٢٦): «الصفحات نفسُها للجوال والحاسب — خلّ نسخة
   الحاسب تشبه المواقع». فشريطُ التنقّل يترك أسفلَ الشاشة ويصير صفّاً في
   الترويسة (هو في `.hbar` أصلاً في المستند)، وقائمةُ المحاضرين عمودان ثم
   ثلاثة (`main`)، والحاوياتُ ١٢٨٠px. والجوالُ كما هو حرفاً. */
@media (min-width:1000px){
  :root{--bnav:0px}
  html{scroll-padding-bottom:12px}
  .bnav{position:static;max-width:none;margin:0;padding:0;background:none;
    border:0;box-shadow:none;gap:4px;flex:0 0 auto;transform:none;opacity:1;
    pointer-events:auto;transition:none}
  .navoff .bnav{transform:none;opacity:1;pointer-events:auto}
  .cc,.navoff .cc{bottom:12px}
  .bnav a{flex:0 0 auto;flex-direction:row;gap:7px;min-height:44px;
    padding:0 16px;border-radius:9px;font-size:.9rem}
  .bnav .ic{width:20px;height:20px}
  .bnav a[aria-current]{background:var(--bg)}
}
/* ── أشرطةٌ من حافةٍ إلى حافة (≥١٠٠٠px) ──
   المالك أشار إلى rateyourprof.com مثالاً: حاويتُه ١٢٨٠px كحاويتنا، وما
   يجعله «يملأ الحاسب» أن شريطَ العنوان وشريطَ البطل ملوّنان من حافة
   الشاشة إلى حافتها والمحتوى وسطَهما. فالترويسةُ شريطٌ بلون البطاقة
   بعرض النافذة، والبطلُ وأدواتُ البحث شريطٌ واحد متدرّج **من ألوان
   الموقع نفسها** (`--card`←`--card2`، والحبرُ `--text`) — كان أزرقَ
   بنفسجياً فرفضه المالك: «اجعله كلون كل شيء في الموقع» (2026-09-23) (التدرّجُ أفقيّ
   `to left` فيتّصل بين العنصرين المتراكبين بلا درزة) وفيه عنوانٌ كبير
   وبلاطاتُ الأرقام والبحث. والمحتوى يبقى في `--wrap`.
   `padding-inline:max(16px,calc((100% - var(--wrap))/2))` توسيطٌ بلا
   حاوٍ إضافيّ في الوسم. */
@media (min-width:1000px){
  :root{--wrap:1280px;--band-ink:var(--text);--band-a:var(--card);--band-b:var(--card2)}
  header{max-width:none;padding:0;margin:0}
  .hbar{max-width:none;border-radius:0;border-width:0 0 1px;box-shadow:none;
    padding:12px max(16px,calc((100% - var(--wrap))/2))}
  .hero{display:block;margin:0;padding:44px max(16px,calc((100% - var(--wrap))/2)) 8px;
    background:linear-gradient(to left,var(--band-a),var(--band-b));color:var(--band-ink)}
  .hero-t{display:block;text-align:center;max-width:820px;margin:0 auto 26px}
  .hero-t h2{font-size:2.6rem;font-weight:900;line-height:1.25;margin:0 0 10px;
    text-wrap:balance;color:var(--band-ink)}
  .hero-t p{font-size:1.08rem;line-height:1.8;margin:0;opacity:.88;text-wrap:pretty}
  .markw{display:none}
  .stats{max-width:760px;margin:0 auto;gap:14px}
  .st{min-height:118px;box-shadow:var(--sh-card);border-color:var(--rim);
    animation:none}
  .tools{max-width:none;margin:0;padding:18px max(16px,calc((100% - var(--wrap))/2)) 40px;
    background:linear-gradient(to left,var(--band-a),var(--band-b));
    border-bottom:1px solid var(--rim)}
  .tools .in,.tools .toolrow,.tools #sug,.tools #nojs{max-width:820px;margin-inline:auto}
  .tools #q{font-size:1.06rem;min-height:56px}
  .tools .toolrow{justify-content:center}
  #qhead,main,.idx{margin-top:22px}
}
/* الشاشةُ العريضة جداً (≥١٨٠٠px — شاشةُ المالك 4K على تكبير ١٠٠٪): ١٢٨٠px
   تبدو عموداً ضيّقاً. الحاوياتُ ١٦٨٠، والقائمةُ أربعةُ أعمدة، والخطُّ ١٨px:
   الأحجامُ بالـrem تتبعه (`body{font-size:1rem}`) والهوامشُ بالـpx تبقى. */
@media (min-width:1800px){
  :root{--wrap:1680px}
  html{font-size:18px}
  #qhead,.idx,main,#prof{max-width:1680px}
  #more{max-width:1648px}
  main{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
}

/* مبدّلُ الجامعة على الحاسب: زرٌّ بارز باسم الجامعة وسهم، والقائمةُ
   مرساتُها الزرُّ لا الترويسة (هي شريطٌ بعرض النافذة هنا). */
@media (min-width:1000px){
  .hbar{position:static}
  .usw{position:relative}
  .usw summary{gap:10px;padding-block:4px;padding-inline:4px 12px;
    border:1px solid var(--rim);border-radius:13px;background:var(--card);
    box-shadow:var(--sh-soft);transition:box-shadow .15s}
  .usw summary:hover{background:var(--card2)}
  .usw[open] summary{box-shadow:var(--sh-in)}
  .usw summary:focus-visible{box-shadow:var(--ring)}
  .usw .ulogo{padding:4px 5px;border-radius:9px}
  .usw .ulogo img{height:34px;max-width:60px}
  .uswn{display:block;font-weight:800;font-size:.9rem;white-space:nowrap}
  .usw summary>.ic{width:16px;height:16px}
  .uswm{top:calc(100% + 10px);inset-inline:0 auto;width:30rem}
  .uso{min-height:0;padding:8px 10px}
}

/* ══ الصفحات بعد الرئيسية ══
   صفحة المحاضر والفهرسان والصفحات الثابتة حالاتٌ في المستند نفسه:
   كل ما عداها يختفي ويبقى شريط العنوان. والإخفاء معلّقٌ بـ`hasjs`
   للفهارس: بلا جافاسكربت لا راوٍ ولا زرَّ رجوع، فيبقى الفهرسان في
   أسفل الصفحة ويعمل رابطُ المرساة كما كان. */
/* وترويسةُ النتائج (`#qhead`) منها: تبقى في المستند كي يجدها الراجعُ
   إلى نتائجه، لكنها لا تُرى فوق صفحةِ محاضرٍ ولا فهرس — سطرُ «نتائج
   «محمد» — ٨٣٩ محاضراً» تحت بطاقةِ محاضرٍ واحد يعدّ ما لا يُعرض. */
body.viewing .hero,body.viewing .sub,body.viewing .tools,
body.viewing main,body.viewing .idx,body.viewing #more,
body.viewing #qhead,body.viewing .top{display:none}
body.hasjs .idx{display:none}
body.browsing .idx.on{display:block}
body.browsing .hero,body.browsing .sub,body.browsing .tools,
body.browsing main,body.browsing #more,body.browsing #qhead,
body.browsing .top{display:none}
/* دون الحاسب فقط: على ≥١٠٠٠px الترويسةُ شريطٌ بعرض النافذة وهامشُها صفر، فحصرُها
   بـ١٢٨٠ هنا ألصقها باليمين في صفحة المحاضر (لقطة المالك 2026-09-23). */
@media (max-width:999px){body.viewing header{max-width:1280px}}
.pback.idxback{display:none}
body.browsing .idx.on .pback.idxback{display:inline-flex}
.pback{display:inline-flex;align-items:center;gap:4px;min-height:46px;
  padding:8px 18px;margin-bottom:12px;border:1px solid var(--rim);
  border-radius:9px;background:var(--card);box-shadow:var(--sh-soft);
  color:var(--text);font-weight:700;font-size:.84rem;cursor:pointer}
.pback:active{box-shadow:var(--sh-in)}
.pback .ic{rotate:90deg}
/* الصفحات الثابتة: نصٌّ يُقرأ لا بطاقاتٌ تُمسح — ورقةٌ بارزة واحدة،
   سطرٌ أطول قليلاً وفراغٌ أوسع بين الفقرات. */
.doc{max-width:800px;margin:22px 16px 0;padding:18px 20px 22px;
  background:var(--card);border:1px solid var(--rim);border-radius:13px;
  box-shadow:var(--sh-card)}
@media (min-width:832px){.doc{margin-inline:auto}}
.doc h2{font-size:1.18rem;margin:2px 0 14px}
.doc h3{font-size:.95rem;margin:22px 0 6px;color:var(--primary)}
.doc p{line-height:1.9;margin:8px 0}
.doc .lead{background:var(--bg);box-shadow:var(--sh-in);border-radius:13px;
  padding:14px 16px;font-weight:600}
.doc ul{margin:8px 0;padding-inline-start:20px;line-height:1.9}
.doc li{margin:4px 0}
.doc a{color:var(--primary);font-weight:700}
.docbtn{margin:14px 0}
.docbtn .send{max-width:320px}

/* ══ صفحة المحاضر ══
   بلاطاتٌ مرتّبة كلوحة: البطاقة بوجهه، نسبتان ملوّنتان، المواد، ومن
   يدرّس مادته؛ ثم بصمة المحاور وتفصيلها، ثم التقييم والآراء.
   على الجوال عمودٌ واحد بترتيب القراءة: من هو، كم درجته، ماذا
   يدرّس، كيف يشرح — ثم «قيّم». */
#prof{max-width:1280px;margin:0 auto;padding:10px 16px 8px}
/* الزرّان متلاصقان في أوّل السطر لا متباعدان بعرض الصفحة (طلب المالك
   ٢٠ سبتمبر ٢٠٢٦): `space-between` كان يدفع المشاركةَ إلى الطرف المقابل
   فيصير بينهما فراغٌ بعرض الشاشة على الحاسب، واليدُ التي ضغطت «رجوع»
   تقطع الصفحةَ كلَّها لتشارك. والصفُّ مشتركٌ مع صفحة المادة والصفحات
   الثابتة (`seo_pages._shell`) فيصلها التعديلُ بلا لمسِ وسمِها. */
.pf-top{display:flex;align-items:center;justify-content:flex-start;
  gap:10px;margin-bottom:14px}
.pf-top .pback{margin:0}
.pf-knob{width:46px;height:46px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--rim);border-radius:9px;background:var(--card);
  box-shadow:var(--sh-soft);cursor:pointer;color:var(--text)}
.pf-knob:active,.pf-knob.ok{box-shadow:var(--sh-in)}
.pf-knob .ic{margin:0;width:20px;height:20px}
/* على الجوال عمودٌ مرن بترتيبٍ صريح لا شبكةٌ بمناطق: البطاقة الغائبة
   (لا محاور لمن لا تقييم له) لا تترك صفّاً فارغاً بفجوتين كما تتركه
   منطقةُ شبكةٍ بلا عنصر.
   وزرُّ التقييم بعد النسبة مباشرةً: كان بعد شاشتين ونصف من المحاور
   والرسم، والطالبُ الذي جاء ليقيّم لا يقرأ بصمة أحدٍ قبل أن يجده. */
.pf-grid{display:flex;flex-direction:column;gap:18px}
.pf-who{order:1}.pf-tiles{order:2}.pf-says{order:2}.pf-cta{order:3}.pf-subs{order:4}
.pf-axes{order:5}.pf-radar{order:6}.cmts{order:7}.pf-peers{order:8}
.pf-card{background:var(--card);border:1px solid var(--rim);
  border-radius:13px;box-shadow:var(--sh-card);padding:18px;min-width:0}
.pf-who{grid-area:who;display:flex;flex-direction:column;align-items:center;
  text-align:center}
.pf-tiles{grid-area:tiles;display:grid;gap:16px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.pf-tiles.one{grid-template-columns:minmax(0,1fr)}
.pf-subs{grid-area:subs}
.pf-says{grid-area:says;display:grid;gap:12px}
.pf-peers{grid-area:peers;display:flex;flex-direction:column;gap:14px;
  min-width:0}
.pf-radar{grid-area:radar}
.pf-axes{grid-area:axes}
.pf-cta{grid-area:cta;display:grid;gap:18px;align-items:center;
  grid-template-columns:minmax(0,1fr)}
/* ══ التخطيط على الشاشة: لافتةُ هويةٍ ثم منصّةُ المحاور ══
   (طلب المالك ٢٠ سبتمبر ٢٠٢٦: «الدكتور بالنصّ · الصفحة غير مريحة ·
   بروزٌ على طولٍ لمربّع شريط النسب لأنه أهمّ شيء».)

   **العلّةُ لم تكن في بطاقة المحاور بل في عمود الأقران.** كان يشغل
   أربعة أعمدةٍ ممتدّةً صفّين إلى جانب الهوية، وارتفاعُه (رأسٌ + أربعةُ
   صفوفٍ ≈٤٢٠px) يفرض ارتفاعَ الصفّين الأوّلين — فيمطّ `.pf-who` فيولد
   الفراغُ الميّتُ بين الوصف والشارتين (‎`.pf-chips{margin-top:auto}`‎
   يدفعهما إلى القاع)، ويدفع صفَّ المحاور إلى ~٦٠٠px من أعلى المستند
   أي تحت طيّةِ شاشةٍ ارتفاعُها ٦٨٠px. فنزل الأقرانُ صفّاً كاملاً
   بعمودين، وارتفع كلُّ ما تحتهم.

   المقيسُ عند ١٢٨٠px: الهويةُ ٢٦٠٫٥ ← ١١٠٨px (الاسمُ سطرٌ واحد بعد
   سطرين) · بطاقةُ المحاور ٤٤٨٫٨ ← ٦٣٧٫٢px وشريطُها ١٥٦ ← ٢٤١px ·
   ورأسُها ٦٠٠ ← ٣٠٢px من أعلى المستند.

   والجوالُ لا يُمَسُّ بسطرٍ واحد: كلُّ ما هنا داخل `min-width:720`. */
@media (min-width:720px){
  .pf-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-areas:
    "who who who who who who" "tiles tiles tiles tiles tiles tiles"
    "says says says says says says"
    "axes axes axes axes axes axes" "subs subs subs subs subs subs"
    "cta cta cta cta cta cta" "radar radar radar radar radar radar"
    "peers peers peers peers peers peers" "cmts cmts cmts cmts cmts cmts"}
  .pf-cta{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  /* الأقرانُ صفّان من اثنين في كلِّ عرضٍ ≥٧٢٠ — كان الحدُّ ينتهي عند
     ١٠٥٩ فيعود العمودُ الطويل هو نفسُه الذي يمطّ الصفوف. */
  .pf-peers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-peers .pf-ph{grid-column:1/-1}
  /* بطاقةٌ قصيرةٌ في صفٍّ تحكمه بطاقةٌ طويلة تُمَطُّ فيولد فيها فراغٌ
     ميّتٌ جديد مكانَ الذي أزلناه — فتُثبَّت على ارتفاع محتواها. */
  .pf-grid .pf-tiles,.pf-grid .pf-says,.pf-grid .pf-subs,.pf-grid .pf-axes{align-self:start}
  /* ــ لافتةُ الهوية: الوسمُ كما هو، والأبناءُ الأربعة بمناطق ــ
     التقييدُ بـ`.pf-grid` لازمٌ: `.pf-who` مشتركةٌ مع صفحة المادة
     (`.crs`) وصفحات الكلية الثابتة (`.hub`)، و`.hub>*{grid-area:auto}`
     لا يصفّر إلا `grid-area` و`order` فلا يحميهما من هذه القواعد. */
  .pf-grid .pf-who{display:grid;align-items:center;column-gap:22px;row-gap:0;
    text-align:start;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"ava name" "ava meta" "ava chips"}
  /* الثلاثةُ تتناسب أو تنكسر: الهالةُ ١٥٠ والبئرُ ١٢٤ والرسمُ ١٠٨ في
     الأصل. تصغيرُ اثنين دون الثالث يُطفح الرسمَ من بئره فيبدو مقصوصاً
     — وقع فعلاً في أوّل بناءٍ للّافتة. النسبُ محفوظةٌ هنا: ‎٨٢٫٧٪‎ و‎٨٧٪‎. */
  .pf-grid .pf-who .pf-halo{grid-area:ava;width:104px;height:104px;margin:0}
  .pf-grid .pf-who .pf-well{width:86px;height:86px}
  .pf-grid .pf-who .pf-well svg{width:75px;height:75px}
  /* `h1` للصفحة الثابتة و`h2` للتطبيق — المحدِّدان معاً وإلا أصاب واحدةً */
  .pf-grid .pf-who h1,.pf-grid .pf-who h2{grid-area:name;align-self:end;
    font-size:1.42rem;max-width:100%}
  .pf-grid .pf-who .meta{grid-area:meta;align-self:start;margin:2px 0 0;
    font-size:.9rem}
  /* `margin-top:auto` هو الفراغُ الميّتُ بعينه — يُصفَّر داخل اللافتة وحدها */
  .pf-grid .pf-who .pf-chips{grid-area:chips;align-self:start;margin:10px 0 0;
    justify-content:flex-start}
  /* سقفٌ لرسم البصمة حين تملأ الصفَّ وحدها. الرسمُ `width:100%` فكان يتمدّد
     مع عموده حتى 605px على 1280، فتبلغ البطاقةُ 601px ارتفاعاً — «كبيرة
     جدًا بزيادة» بكلام المالك (٢١ سبتمبر ٢٠٢٦). و380 عرضُ `viewBox` نفسُه:
     ما فوقه تكبيرٌ لا يزيد معلومة. العرضُ وحده يُسقَّف لا الارتفاع — النسبةُ
     من `viewBox`، وتثبيتُ الارتفاع يقصّ الرسم. */
  .pf-grid .pf-plot svg{max-width:380px;margin-inline:auto}
}
@media (min-width:1060px){
  /* الصفُّ الأول: الهويةُ لافتةٌ بعرض الشبكة.
     الثاني: المحاورُ (٧) من جهة بدء القراءة، والبلاطتان (٥) بعدهما. */
  .pf-grid{gap:22px;grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-areas:
    "who who who who who who who who who who who who"
    "axes axes axes axes axes axes axes tiles tiles tiles tiles tiles"
    "axes axes axes axes axes axes axes says says says says says"
    "axes axes axes axes axes axes axes subs subs subs subs subs"
    "cta cta cta cta cta cta cta cta cta cta cta cta"
    "radar radar radar radar radar radar radar radar radar radar radar radar"
    "peers peers peers peers peers peers peers peers peers peers peers peers"
    "cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts"}
  /* عمودان جانبيّان متساويان و`auto` بينهما: الصورةُ في أقصى جهة البدء
     والشارتان في أقصى المقابل، والاسمُ في المنتصف الهندسيِّ للصفحة مهما
     طال — لأن `1fr` و`1fr` يقتسمان الباقيَ بالتساوي. */
  .pf-grid .pf-who{
    grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);
    grid-template-areas:"ava name chips" "ava meta chips";text-align:center}
  .pf-grid .pf-who .pf-halo{justify-self:start}
  .pf-grid .pf-who h1,.pf-grid .pf-who h2{font-size:1.5rem}
  .pf-grid .pf-who .pf-chips{justify-self:end;align-self:center;margin:0;
    justify-content:flex-end}
  /* حارسا البطاقة الغائبة: `axesListHTML` ترجع فراغاً لمن لا تقييمَ له،
     و`radarHTML` لمن دليلُه ضعيف — ومنطقةٌ بلا عنصرٍ تترك ٦٣٧px حفرةً
     في جهة القراءة. هذان يطويان الصفَّ بدلها. و`:has` إن غابت عن
     متصفّحٍ قديمٍ عادت الحفرةُ ولم تنكسر الصفحة. */
  .pf-grid:not(:has(.pf-axes)){grid-template-areas:
    "who who who who who who who who who who who who"
    "tiles tiles tiles tiles tiles tiles tiles subs subs subs subs subs"
    "says says says says says says says says says says says says"
    "cta cta cta cta cta cta cta cta cta cta cta cta"
    "peers peers peers peers peers peers peers peers peers peers peers peers"
    "cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts"}
  .pf-grid:not(:has(.pf-axes)) .pf-tiles.one{max-width:620px}
  .pf-grid:has(.pf-axes):not(:has(.pf-radar)){grid-template-areas:
    "who who who who who who who who who who who who"
    "axes axes axes axes axes axes axes tiles tiles tiles tiles tiles"
    "axes axes axes axes axes axes axes says says says says says"
    "axes axes axes axes axes axes axes subs subs subs subs subs"
    "cta cta cta cta cta cta cta cta cta cta cta cta"
    "peers peers peers peers peers peers peers peers peers peers peers peers"
    "cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts"}
  /* ــ البصمةُ والأقرانُ صفٌّ واحدٌ مقسوم ــ
     (طلب المالك ٢١ سبتمبر ٢٠٢٦: «بصمة التقييم كبيرة جدًا بزيادة · خلّها
     مقسومة بينها وبين من يدرّسون المادة · ارفعها فوق خلّها يسارها».)
     البصمةُ ستّةُ أعمدةٍ من جهة البدء (اليمين) والأقرانُ ستّةٌ بعدها — وكانت
     كلٌّ منهما صفّاً كاملاً، ونصفُ بطاقة البصمة فراغ.

     **الشرطُ موجبٌ بـ`:has` لا حارسٌ سالب:** رسمٌ فعليّ (`.pf-plot`) وقرينٌ
     واحدٌ على الأقل (`.pf-peer`). فمن لا بصمةَ له، ومن بصمتُه «ما اكتملت
     بعد» (فيها `.pf-voices` لا `.pf-plot`)، ومن لا أقرانَ له (فيه `.pf-empty`
     لا `.pf-peer`) — يبقون على الصفّين كما كانوا بلا قاعدةٍ تخصّهم. ومتصفّحٌ
     بلا `:has` يُسقط هذه القواعدَ كلَّها معاً فيبقى كذلك ولا ينكسر. ولا تُجمع
     بفاصلةٍ مع محدِّدٍ بلا `:has`: المحدِّدُ المجهول يُبطل القاعدةَ كلَّها.

     **`.pf-grid` في صدر كلِّ محدِّدٍ لازمة، لسببين:** `.pf-plot` المجرّدةُ
     تخسر أمام قاعدة 560px (عمودان) لأنها تأتي بعد هذه الكتلة في الملف
     والنوعيّةُ متساوية — جُرِّبت فبقي العمودان. و`.pf-peer` و`.pf-ph`
     مشتركتان مع صفحة المادة وصفحات الكليات، فالمجرّدةُ تتسرّب إليها.

     **و`align-self:start` على النصفين:** عنصرُ الشبكة يُمَطّ إلى ارتفاع
     صفّه، و`.pf-peers` شبكةٌ تمطّ صفوفَها معها — فبقرينٍ واحد بلغ رأسُها
     215px وبطاقتُه 214px بدل 73 و72. وهي علّةُ السطر أعلاه نفسُها.

     **والرسمُ فوق مفتاحه بسقف 320px:** بلا سقفٍ يملأ الرسمُ النصفَ (505px)
     فيعلو 425px وحده وتعود البطاقةُ قرابةَ 600px كأنّ شيئاً لم يتغيّر.
     و320 هو مقاسُ الرسم على الجوال
     بعينه. والخطُّ بوحدات `viewBox` فيصغر مع الرسم (12.5 ← 10.5px)، فرُفع
     إلى 14 ليبقى قرابةَ 12px كبقية الصفحة.

     المقيسُ عند 1280px: بطاقةُ البصمة 1108×601 ← 543×443px · والأقرانُ
     بجانبها 543×418px · والصفّان معاً 869 ← 443px. */
  .pf-grid:has(.pf-plot):has(.pf-peer){grid-template-areas:
    "who who who who who who who who who who who who"
    "axes axes axes axes axes axes axes tiles tiles tiles tiles tiles"
    "axes axes axes axes axes axes axes says says says says says"
    "axes axes axes axes axes axes axes subs subs subs subs subs"
    "cta cta cta cta cta cta cta cta cta cta cta cta"
    "radar radar radar radar radar radar peers peers peers peers peers peers"
    "cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts"}
  .pf-grid:has(.pf-plot):has(.pf-peer) .pf-radar,
  .pf-grid:has(.pf-plot):has(.pf-peer) .pf-peers{align-self:start}
  .pf-grid:has(.pf-plot):has(.pf-peer) .pf-peers{
    grid-template-columns:minmax(0,1fr)}
  .pf-grid:has(.pf-plot):has(.pf-peer) .pf-plot{
    grid-template-columns:minmax(0,1fr)}
  .pf-grid:has(.pf-plot):has(.pf-peer) .pf-plot svg{max-width:320px}
  .pf-grid:has(.pf-plot):has(.pf-peer) .pf-plot .lbl{font-size:14px}
  .pf-grid:has(.pf-plot):has(.pf-peer) .pf-plot .rt{font-size:11.5px}
  /* المفتاحُ عمودان تحت الرسم، وسطرُ «المحور الباهت» الثالثُ بعرضهما */
  .pf-grid:has(.pf-plot):has(.pf-peer) .pf-key{display:grid;gap:12px 18px;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-grid:has(.pf-plot):has(.pf-peer) .pf-key div:nth-child(3){
    grid-column:1/-1}
}
.pf-halo{width:150px;height:150px;border-radius:50%;display:grid;
  place-items:center;margin:4px 0 14px;background:var(--card);
  border:1px solid var(--rim);box-shadow:var(--sh-card)}
.pf-well{width:124px;height:124px;border-radius:50%;display:grid;
  place-items:center;background:var(--bg);box-shadow:var(--sh-in)}
.pf-well svg{width:108px;height:108px;display:block;border-radius:50%}
@media (max-width:719px){
  .pf-halo{width:118px;height:118px;margin:0 0 10px}
  .pf-well{width:96px;height:96px}
  .pf-well svg{width:84px;height:84px}
  .pf-face{min-height:150px}
  /* الآراء نفسها تحت البطاقة مباشرةً على الجوال — مربّعُ الانتظار زائد */
  .pf-cta .pf-voices{display:none}
}
.pf-who h2{font-size:1.3rem;font-weight:900;line-height:1.35;
  text-wrap:balance}
.pf-who .meta{font-size:.84rem;line-height:1.55;margin:4px 0 14px}
.pf-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
  margin-top:auto}
.pf-chip{display:inline-flex;align-items:center;gap:3px;padding:5px 12px;
  border-radius:9px;font-size:.84rem;font-weight:800;background:var(--card);
  border:1px solid var(--rim);box-shadow:var(--sh-soft);
  font-variant-numeric:tabular-nums}
.pf-chip small{font-weight:600;color:var(--muted);font-size:.74rem}
.pf-chip.rank{color:var(--t2)}
.pf-chip.rank .ic{stroke:currentColor}
/* «وش يقولون الطلاب»: الرقمُ أخضرُ ثقيل والباقي خافت، والشريطُ غائرٌ
   كشرائط المحاور. والوسومُ أقراصٌ غائرة لا بارزة: البارزُ في الصفحة
   يُضغط، وهذه تُقرأ. */
.pf-again p{margin:0 0 6px;font-size:.86rem;font-weight:700;color:var(--muted)}
.pf-again .num{font-family:var(--f-n);font-variant-numeric:tabular-nums;font-weight:700;color:var(--t2);font-size:1rem}
.pf-ab{height:12px;padding:2px;border-radius:9px;background:var(--bg);box-shadow:var(--sh-in);overflow:hidden}
.pf-ab i{display:block;height:100%;border-radius:9px;background:var(--t2);
  transform-origin:right;animation:pf-grow 900ms cubic-bezier(.2,.8,.2,1)}
@keyframes pf-grow{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.pf-ab i{animation:none}}
.pf-facts{display:flex;flex-wrap:wrap;gap:8px}
.pf-fact{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:9px;
  background:var(--bg);box-shadow:var(--sh-in);font-size:.8rem;font-weight:700}
.pf-fact small{color:var(--muted);font-weight:700;font-family:var(--f-n);font-variant-numeric:tabular-nums}
.pf-tile{padding:8px;border-radius:13px;background:var(--card);
  border:1px solid var(--rim);box-shadow:var(--sh-card);min-width:0}
.pf-face{height:100%;min-height:196px;border-radius:13px;padding:14px 15px 13px;
  display:flex;flex-direction:column;color:var(--tile-ink);
  background:linear-gradient(155deg,var(--peach-a),var(--peach-b))}
.pf-tile.mint .pf-face{background:linear-gradient(155deg,var(--mint-b),var(--mint-a))}
.pf-tt{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pf-tt h3{font-size:1rem;font-weight:800;line-height:1.35;text-wrap:balance;
  min-width:0;overflow-wrap:anywhere}
.pf-ico{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;
  border-radius:9px;background:var(--card);border:1px solid var(--rim);
  box-shadow:var(--sh-soft)}
.pf-ico .ic{margin:0;width:19px;height:19px}
.pf-big{margin-top:auto;font-size:clamp(2rem,11vw,2.9rem);font-weight:800;
  line-height:1;font-variant-numeric:tabular-nums}
.pf-big.words{font-size:1.45rem;line-height:1.25}
.pf-cap{font-size:.84rem;font-weight:700;margin-top:6px}
/* تحت ٤٠٠px: البلاطتان جنباً إلى جنب في ‏١٥٠px لكلٍّ — «المشاهدات» كانت
   تتجاوز صندوقها وعلى ‏٣٢٠px انزلقت الصفحة أفقياً. */
@media (max-width:400px){
  .pf-tiles{gap:12px}
  .pf-face{padding:12px 11px 11px;min-height:170px}
  .pf-ico{width:34px;height:34px;border-radius:9px}
  .pf-ico .ic{width:16px;height:16px}
  .pf-cap{font-size:.78rem}
}
.pf-subs{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pf-subs .pf-h b,.pf-says .pf-h b{display:block;font-size:1.05rem;font-weight:800;line-height:1.3}
.pf-h small{display:block;color:var(--muted);font-size:.8rem;font-weight:600}
.pf-sublist{display:flex;flex-wrap:wrap;gap:8px;margin-inline-start:auto}
.pf-sub{display:inline-flex;align-items:center;min-height:44px;padding:4px 14px;
  border-radius:9px;border:1px solid var(--rim);background:var(--card);
  box-shadow:var(--sh-soft);font-weight:700;font-size:.84rem;cursor:pointer}
.pf-sub:active{box-shadow:var(--sh-in)}
.pf-sub.na{cursor:default;box-shadow:var(--sh-in);color:var(--muted)}
.pf-ph h3{font-size:1.02rem;font-weight:800;line-height:1.4}
.pf-ph{padding:14px 18px;display:flex;align-items:center;gap:10px}
.pf-ph>div{flex:1;min-width:0}
.pf-more{flex-shrink:0;min-height:44px;padding:4px 14px;border-radius:9px;
  border:1px solid var(--rim);background:var(--card);box-shadow:var(--sh-soft);
  font-weight:700;font-size:.8rem;cursor:pointer;white-space:nowrap}
.pf-more:active{box-shadow:var(--sh-in)}
.pf-ph small{display:block;color:var(--muted);font-size:.8rem;font-weight:600}
.pf-peer{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:12px 14px;background:var(--card);
  border:1px solid var(--rim);border-radius:13px;box-shadow:var(--sh-card);
  color:var(--text);text-decoration:none;transition:translate .15s}
@media(hover:hover){.pf-peer:hover{translate:0 -2px}}
.pf-peer .avatar{width:46px;height:46px}
/* الاسم هنا سطران **في كل المقاسات** لا على الجوال وحده: الصفُّ يسكن
   عموداً من شبكة (٢–٣ أعمدة في صفحة المادة والكلية، وعمودَ الأقران في
   صفحة المحاضر) فعرضُه ~٣٤٠–٣٦٠px حتى على الشاشة الكبيرة، وللاسم منه
   ~٢١٥px — قِيس على ١٢٨٠px: الخماسيّ يُقصّ كما يُقصّ على الجوال.
   وارتفاعُ السطر وترتيبُ `line-clamp` على حالهما للسبب المشروح عند
   `.cwho h3`. */
.pf-peer b{display:-webkit-box;-webkit-box-orient:vertical;line-clamp:2;
  -webkit-line-clamp:2;font-size:.94rem;font-weight:800;overflow:hidden;
  overflow-wrap:anywhere}
.pf-peer>span:nth-child(2){min-width:0}
.pf-peer .meta{display:block;margin:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pf-peer .pct{font-size:.9rem;padding:2px 10px}
.pf-empty{color:var(--muted);font-size:.84rem;font-weight:600}
.pf-hd{display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;margin-bottom:8px}
.pf-hd h3{font-size:1.15rem;font-weight:800;line-height:1.35}
.pf-hd small{display:block;color:var(--muted);font-size:.8rem;font-weight:600}
.pf-plot{display:grid;gap:16px;align-items:center;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.pf-plot{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
/* الرسم يُكتب يساراً عمداً: `text-anchor` تنقلب معانيها في مستندٍ
   RTL، فتنقلب تسميات المحاور على الجهة الخطأ من نقاطها. */
.pf-plot svg{width:100%;height:auto;display:block;overflow:visible;direction:ltr}
.pf-plot .lbl{fill:var(--muted);font:700 12.5px "IBM Plex Sans Arabic",sans-serif}
.pf-plot .rt{fill:var(--muted);font:600 10px "IBM Plex Sans Arabic",sans-serif}
.pf-plot .ring{fill:none;stroke:var(--line);stroke-width:1}
.pf-plot .lbl.na{opacity:.5}
.pf-key{display:flex;flex-direction:column;gap:12px;font-size:.86rem}
.pf-key div{display:flex;gap:10px;align-items:flex-start}
.pf-key i{width:14px;height:14px;border-radius:4px;flex-shrink:0;margin-top:6px}
.pf-key b{display:block;font-weight:800}
.pf-key span{color:var(--muted);font-size:.78rem;line-height:1.55;font-weight:600}
/* ══ بطاقةُ المحاور: بروزٌ دائم وشارةُ النسبة العامّة ══
   (طلب المالك ٢٠ سبتمبر ٢٠٢٦: «بروزٌ على طولٍ لأنه أهمّ شيء».)
   البروزُ الأكبرُ جاء بالترتيب — رفعُها فوق الطيّة في شبكة العريض —
   وهذا يكمّله بصرياً: سطحٌ متدرّجٌ يفصلها عن سائر البطاقات، وحافّةٌ
   أوسع، وعنوانٌ أكبر، وأشرطةٌ أوسعُ تباعداً. ولا لونَ هويّةٍ جديد:
   الفرقُ في العمق والمساحة لا في صبغةٍ تنازع السلّم. */
.pf-axes{padding:22px 20px;border-radius:13px;
  background:linear-gradient(180deg,var(--card2),var(--card));
  box-shadow:var(--sh-card),inset 0 0 0 1.5px var(--rim)}
.pf-axes .pf-hd{align-items:center}
.pf-axes .pf-hd h3{font-size:1.3rem}
.pf-axes .pf-list{gap:15px;margin-top:15px}
/* شارةُ النسبة العامّة في فراغ صدر البطاقة.
   `<b>`/`<i>` لا `<small>`/`<h3>`: محدِّدا `.pf-hd small` و`.pf-hd h3`
   نسبيّان فيبتلعان أيَّ عنصرٍ منهما داخل الشارة (`display:block` ولونٌ
   باهت). و`tabular-nums` كي لا يرقص الرقمُ بين محاضرٍ وآخر. */
.axo{flex-shrink:0;width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;line-height:1;font-weight:900;
  font-size:1.2rem;font-variant-numeric:tabular-nums;
  border:1px solid var(--rim)}
.axo b{font-weight:900}
.axo i{font-style:normal;font-size:.58em;font-weight:800;opacity:.85}
/* ونقصُ الدليل دائرةٌ متقطّعةٌ بلا لون — لا رقمٌ يدّعي ثقةً ليست فيه.
   وحدُّها أغمقُ من `--line` كي تُرى على سطح البطاقة المتدرّج. */
.axo.few{background:none;color:var(--muted);box-shadow:none;
  border:1.5px dashed var(--muted);font-size:1rem;font-weight:700}
@media (max-width:379px){.axo{width:54px;height:54px;font-size:1.04rem}}
.pf-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:13px;
  margin-top:12px}
.pf-list li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 44px;
  gap:12px;align-items:center;font-size:.88rem}
.pf-list .nm{font-weight:700;line-height:1.35}
.pf-list .v{text-align:left;font-weight:800;font-variant-numeric:tabular-nums}
.pf-list .v.na{font-size:.72rem;font-weight:600;text-align:left;line-height:1.35}
@media (max-width:479px){
  .pf-list li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .pf-list .trk{grid-column:1/-1;grid-row:2}
}
.pf-list .trk{height:12px;padding:2px;border-radius:9px;background:var(--bg);
  box-shadow:var(--sh-in)}
.pf-list .trk i{display:block;height:100%;border-radius:9px;
  background:linear-gradient(270deg,var(--q1),var(--q2))}
/* شرطةُ متوسط الموقع: خطٌّ رأسيّ رفيع فوق الشريط بلون النص، فتُرى
   على الملوّن والفارغ معاً. */
.pf-list .trk{position:relative}
.pf-list .trk .avg,.pf-avgkey .avg{position:absolute;top:-3px;bottom:-3px;width:3px;
  margin-inline-start:-1.5px;border-radius:2px;background:var(--text);opacity:.55}
.pf-avgkey{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.74rem;
  font-weight:700;margin:12px 0 0}
.pf-avgkey .avg{position:relative;display:inline-block;height:14px;top:0;bottom:0;margin:0}
/* زرُّ «قيّم» العائم — فوق شريط التنقّل (`--bnav`) كبانر الكوكيز، وينزل
   مكانه حين يغيب الشريطُ مع النزول. والطبقة ٢٩ تحت الشريط والبانر. */
/* ⚠️ **مكانُه ثابتٌ من أول رسم ويُظهَر بـ`transform`/`opacity` وحدهما** — لا `hidden`
   ولا `bottom` يتغيّر: كان يظهر من 0×0 داخل `#prof` (حركتُه بـ`transform` تجعله حاويةَ
   كلِّ `fixed`) وينزلق `bottom` مع الشريط، فسجّل CLS ‏0.13 على 375 (حدُّ قوقل 0.1).
   ولهذا هو خارج `#prof` في الصفحة نفسها، و`openProf` يملؤه. */
.pf-dock{position:fixed;inset-inline:12px;bottom:calc(10px + var(--bnav));z-index:29;
  max-width:420px;margin:0 auto;transform:translateY(calc(100% + 24px + var(--bnav)));
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s,visibility 0s .32s}
.pf-dock.on{transform:none;opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s}
.navoff .pf-dock.on{transform:translateY(calc(var(--bnav) - 2px))}
.pf-dock .rate{padding:0;margin:0}
.pf-dock .rbtn{box-shadow:var(--sh-card)}
@media (prefers-reduced-motion:reduce){.pf-dock,.pf-dock.on{transition:none}}
@media (min-width:720px){.pf-dock{display:none!important}}
/* **ومحورا الصرامة دخلا السلّم بقرار المالك (٢١ سبتمبر ٢٠٢٦).**
   كانا خارجه بحجّةٍ وجيهة: الأعلى فيهما «أسهلُ وأكثرُ تساهلاً» لا
   «أفضل»، فتخضيرُ «تساهل ١٠٠٪» يقرؤه الطالبُ امتيازاً. عُرضت الحجّةُ
   على المالك صريحةً فاختار السلّمَ لهما — **والنصُّ يحمل المعنى بدل
   اللون**: الفاصلُ فوقهما «خارج النسبة — تظهر ولا تُحسب»،
   والملاحظةُ تحتهما تشرح أنهما وصفٌ لصعوبة المادة لا حكمٌ على المحاضر،
   ومفتاحُ الرادار يفرّق بينهما وبين الجودة بلونَي الرسم `--s1/--s2`
   (والرادارُ لم يُمسّ، فمفتاحُه ما زال صادقاً عمّا يصفه).
   وتوكنا `--s1/--s2` يبقيان: الرادارُ يستهلكهما. */
.pf-list .sep{display:flex;align-items:center;gap:10px;color:var(--muted);
  font-size:.74rem;font-weight:700;margin-top:2px}
.pf-list .sep:after{content:"";flex:1;border-top:1px dashed var(--line)}
.pf-cta h3{font-size:1.18rem;font-weight:800}
.pf-cta p{color:var(--muted);font-size:.88rem;font-weight:600;max-width:52ch;
  margin:2px 0 0}
.pf-cta .rate{padding-top:12px}
.pf-voices{border-radius:13px;background:var(--bg);box-shadow:var(--sh-in);
  padding:18px;min-height:150px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center}
.pf-voices b{font-size:.98rem;font-weight:800}
.pf-voices span{color:var(--muted);font-size:.82rem;font-weight:600;max-width:44ch}
.tnote{font-size:.76rem;color:var(--muted);margin:12px 0 0;line-height:1.65}
.cmts{grid-area:cmts;min-width:0}
.cmts:empty{display:none}
.cmts-h{font-size:1.05rem;font-weight:800;margin:0 0 12px}
.cmt{background:var(--card);border:1px solid var(--rim);border-radius:13px;
  padding:14px 16px;box-shadow:var(--sh-soft);margin-bottom:12px}
/* `pre-line` يحفظ أسطر الطالب ولا يسمح بوسمٍ — النصّ نصّ. */
.cmt p{white-space:pre-line;font-size:.9rem;line-height:1.8;margin-top:8px;
  max-width:72ch}
/* وجهٌ لكل رأي (طلب المالك 2026-09-23): أيقونةُ شخصٍ بألوانٍ تختلف بين
   الآراء — من لوحة وجوه المحاضرين نفسِها (`PERSON`)، والبذرةُ من الرأي
   نفسه فيبقى لونُه كما هو كلما فُتحت الصفحة. */
.cmt{display:flex;gap:12px;align-items:flex-start;margin-bottom:25px}
.cav{flex:0 0 40px;width:40px;height:40px;border-radius:50%;overflow:hidden;
  box-shadow:var(--sh-soft)}
.cav svg{display:block;width:100%;height:100%}
.cbody{flex:1;min-width:0}
.cbody>p:first-child{margin-top:0}
/* الحاسب: النصُّ على عرض البطاقة كلِّه وبخطٍّ أكبر (طلب المالك 2026-09-23) —
   حدُّ ٧٢ حرفاً يترك نصفَ البطاقة فارغاً على الشاشة العريضة. */
@media (min-width:1000px){
  .cmt{padding:18px 20px;gap:16px}
  .cmt p{max-width:none;font-size:1.06rem;line-height:1.9}
  .cav{flex-basis:48px;width:48px;height:48px}
  .cmt .cchip{font-size:.8rem}
}
/* المادة والدرجة فوق النصّ غائرتان هادئتان — تُقرآن ولا تُضغطان.
   والردُّ تحت التعليق غائرٌ بخطّ أصغر: كلامٌ على الكلام لا رأيٌ ثانٍ. */
.cmeta{display:flex;flex-wrap:wrap;gap:6px}
.cchip{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;
  font-weight:700;border-radius:9px;padding:4px 10px;background:var(--bg);
  box-shadow:var(--sh-in);color:var(--muted);max-width:100%}
.cchip .ic{width:.95em;height:.95em;vertical-align:0;margin-inline-end:0}
/* ══ إعجابٌ وعدمُه على الرأي (طلب المالك ٢٠ سبتمبر ٢٠٢٦) ══
   زرّان بارزان هادئان، والمضغوطُ غائرٌ بلون الحكم. الأرقامُ من الخادم؛
   والصفحةُ تُبدّل فوراً ثم تصحّح بما يرجع، فلا لمسةٌ تبدو بلا أثر على
   شبكةٍ بطيئة. وقبل أن يردّ الخادمُ أولَ مرة تبقى الأزرارُ بلا رقمٍ لا
   بصفرٍ كاذب. */
.cvote{display:flex;gap:8px;margin-top:10px}
.cvote button{display:inline-flex;align-items:center;gap:6px;min-height:36px;
  padding:4px 12px;border:1px solid var(--rim);border-radius:9px;
  background:var(--card);box-shadow:var(--sh-soft);color:var(--muted);
  font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:box-shadow .12s}
.cvote button .ic{width:16px;height:16px;margin:0}
.cvote button:active{box-shadow:var(--sh-in)}
.cvote button[aria-pressed="true"]{box-shadow:var(--sh-in);background:var(--bg)}
.cvote button.up[aria-pressed="true"]{color:var(--t2)}
.cvote button.dn[aria-pressed="true"]{color:var(--t5)}
.creps{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.crep{background:var(--bg);box-shadow:var(--sh-in);border-radius:9px;
  padding:9px 12px;font-size:.82rem;line-height:1.7;color:var(--text);
  white-space:pre-line}
.crep b{display:inline-block;font-size:.7rem;font-weight:800;color:var(--muted);
  margin-inline-end:6px}

/* ══ صفحة المادة (قرار المالك ١٥ سبتمبر) ══
   مكوّناتُ صفحة المحاضر نفسُها في شبكةٍ خاصة: البطلُ والبلاطتان صفٌّ، ثم
   تقييمُ المادة وزرُّه، ثم من يدرّسها، ثم الآراء. ومكوّناتُ المحاضر تحمل
   مناطقَ شبكةٍ مسمّاة وترتيباً — داخل `.crs` تُصفَّر وإلا صنعت أعمدةً ضمنية.
   والأنماطُ هنا لا في صفحات البحث وحدها: الصفحةُ الثابتة تقرأ هذا الملف. */
/* الشبكةُ بمناطق مسمّاة لكل مقاس: البطاقاتُ مختلفةُ الأحجام كلوحة قيادة
   (فكرةُ المالك من صور لوحاتٍ أعجبته)، والجوالُ عمودان — الرقمان جنباً إلى جنب. */
.crs{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:"who who" "bar bar" "k1 k2" "ring ring" "face face" "grd grd"
    "wave wave" "dots dots" "cta cta" "lect lect" "tut tut" "cmts cmts"}
.crs>*{min-width:0}
.a-who{grid-area:who}.a-bar{grid-area:bar}.a-k1{grid-area:k1}.a-k2{grid-area:k2}
.a-ring{grid-area:ring}.a-face{grid-area:face}.a-grd{grid-area:grd}
.a-wave{grid-area:wave}.a-dots{grid-area:dots}.a-cta{grid-area:cta}
.a-lect{grid-area:lect}.a-tut{grid-area:tut}.a-cmts{grid-area:cmts}
@media (min-width:720px){
  .crs{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:
    "who who who who who who ring ring ring ring ring ring"
    "bar bar bar bar bar bar bar bar bar bar bar bar"
    "k1 k1 k1 k1 k1 k1 k2 k2 k2 k2 k2 k2"
    "face face face face face face face face face face face face"
    "grd grd grd grd grd grd wave wave wave wave wave wave"
    "dots dots dots dots dots dots cta cta cta cta cta cta"
    "lect lect lect lect lect lect lect lect lect lect lect lect"
    "tut tut tut tut tut tut tut tut tut tut tut tut"
    "cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts"}
}
@media (min-width:1060px){
  .crs{gap:22px;grid-template-areas:
    "who who who who bar bar bar bar bar bar bar bar"
    "who who who who k1 k1 k1 k2 k2 k2 ring ring"
    "face face face face face face face grd grd grd grd grd"
    "wave wave wave wave dots dots dots dots cta cta cta cta"
    "lect lect lect lect lect lect lect lect lect lect lect lect"
    "tut tut tut tut tut tut tut tut tut tut tut tut"
    "cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts"}
}
.crs .pf-cta{grid-template-columns:minmax(0,1fr)}
.crs .pf-who{justify-content:center}
/* شريطُ الدكاترة: رقائقُ تبدّل الإحصائيات كلها بين المادة وبين دكتورٍ بعينه */
.cr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:14px 18px}
.cr-bh b{display:flex;align-items:center;font-size:.95rem;font-weight:800}
.cr-bh small{display:block;color:var(--muted);font-size:.74rem;font-weight:600}
.cr-pills{display:flex;flex-wrap:wrap;gap:8px;margin-inline-start:auto}
.cr-pill{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:4px 14px;
  border-radius:9px;border:1px solid var(--rim);background:var(--card);
  box-shadow:var(--sh-soft);font:inherit;font-size:.78rem;font-weight:700;
  color:var(--text);cursor:pointer;text-decoration:none}
.cr-pill i{width:7px;height:7px;border-radius:50%;background:var(--acc)}
@media (max-width:719px){.cr-pills{flex-wrap:nowrap;overflow-x:auto;margin-inline:-18px;
  padding:4px 18px 10px;scrollbar-width:none}.cr-pill{flex-shrink:0}}
.cr-pill.on{box-shadow:var(--sh-in);background:var(--bg)}
/* بطاقةُ رقم: أيقونةٌ في دائرة، والرقمُ كبيرٌ تحت اسمه */
.ck{display:flex;flex-direction:column;gap:2px;padding:16px 18px;min-height:150px}
.ck-ico{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;
  border-radius:50%;background:var(--card);border:1px solid var(--rim);box-shadow:var(--sh-soft)}
.ck-ico .ic{margin:0;width:19px;height:19px}
.ck small{color:var(--muted);font-size:.78rem;font-weight:700;margin-top:auto;padding-top:12px}
.ck b{font-size:clamp(1.7rem,7vw,2.3rem);font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums}
.ck-sub{color:var(--muted);font-size:.72rem;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* حلقةُ النجاح: قرصٌ بلون النصّ نفسه — داكنٌ في الفاتح وفاتحٌ في الداكن */
.cr-ring{display:grid;place-items:center;min-height:150px}
.cr-ringd{position:relative;width:150px;height:150px;border-radius:50%;display:grid;
  place-items:center;background:var(--text);box-shadow:var(--sh-card)}
.cr-ringd svg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.cr-ringd .tr{fill:none;stroke:var(--bg);stroke-opacity:.16;stroke-width:9}
.cr-ringd .ar{fill:none;stroke:var(--acc-2);stroke-width:9;stroke-linecap:round}
.cr-ringt{position:relative;text-align:center;color:var(--bg)}
.cr-ringt b{display:block;font-size:1.65rem;font-weight:800;line-height:1.05;
  font-variant-numeric:tabular-nums}
.cr-ringt small{font-size:.7rem;font-weight:700;opacity:.8}
/* وجوهُ الصعوبة: خمسةُ أزرارٍ بارزة، والأقربُ لمتوسط الطلاب مضاءٌ باللون */
.cf-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:10px 18px;padding:12px 0;border-top:1px dashed var(--line)}
.cf-row:first-of-type{border-top:0}
.cf-h b{display:flex;align-items:center;font-size:.9rem;font-weight:800}
.cf-w{display:block;color:var(--acc);font-size:.8rem;font-weight:800;margin-top:2px}
.cf-w.na{color:var(--muted);font-weight:600}
.cf-k{display:flex;gap:8px}
.cf-kn{display:flex;flex-direction:column;align-items:center;gap:3px}
.cf-kn .k{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--rim);box-shadow:var(--sh-soft);color:var(--muted)}
.cf-kn .k svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cf-sc{display:flex;justify-content:space-between;gap:10px;margin-top:4px;
  font-size:.66rem;font-weight:700;color:var(--muted)}
.cf-kn .k.on{background:var(--acc);border-color:transparent;color:var(--acc-ink);
  box-shadow:var(--sh-soft),0 0 0 4px var(--acc-4)}
.cf-kn small{min-height:1.2em;font-size:.66rem;font-weight:800;color:var(--muted);
  font-variant-numeric:tabular-nums}
@media (max-width:479px){.cf-row{grid-template-columns:minmax(0,1fr)}
  .cf-k{justify-content:space-between}.cf-kn .k{width:44px;height:44px}}
/* «الدرجة المتوقعة»: عدّادٌ كعدّاد السرعة (طلب المالك: «شيء مبدع» يُفهم بنظرة).
   مسارٌ واحدٌ غائر يمتلئ بتدرّجٍ حتى الدرجة المتوقعة، وشَرطاتٌ حوله طولُها بعدد
   من أخذ كل درجة، ومقبضٌ بارزٌ في الوسط يحمل الدرجة وتخرج منه الإبرة.
   يُرسم يساراً عمداً: العدّادُ يعلو نحو اليمين. */
.cr-grd{display:flex;flex-direction:column}
.cr-gauge{margin-top:auto;padding-top:4px}
.cr-gauge svg{display:block;width:100%;max-width:360px;margin:0 auto;overflow:visible;direction:ltr}
.cr-gauge .trk{fill:none;stroke:var(--bg);stroke-linecap:round}
.cr-gauge .trk2{fill:none;stroke:var(--in-dark);stroke-opacity:.35;stroke-linecap:round}
.cr-gauge .fil{fill:none;stroke-linecap:round}
.cr-gauge .tk{stroke:var(--acc-2);stroke-linecap:round}
.cr-gauge .tk.m{stroke:var(--acc)}
.cr-gauge .tk.z{stroke:var(--line)}
.cr-gauge text{font:700 11px "IBM Plex Mono","IBM Plex Sans Arabic",sans-serif;fill:var(--muted);
  text-anchor:middle;dominant-baseline:middle}
.cr-gauge text.m{fill:var(--acc);font-size:13px}
.cr-gauge .ndl{transform-box:view-box;transform-origin:160px 162px;transform:rotate(var(--a))}
.cr-gauge .ndl path{fill:var(--text);stroke:none}
.cr-gauge .knob{fill:var(--card);stroke:var(--rim);stroke-width:1}
.cr-gauge .kv{font-size:30px;fill:var(--acc)}
.cr-gauge .kl{font-size:8.5px;fill:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  @keyframes crNeedle{from{transform:rotate(-90deg)}}
  /* الإبرةُ تتأرجح إلى قيمتها (قرار المالك ١٣ أكتوبر: حركةٌ تُرى) — تجاوزٌ خفيف ثم تستقرّ */
  .cr-gauge .ndl{animation:crNeedle .95s cubic-bezier(.34,1.4,.64,1) .15s both}}
.cr-gs{margin:14px 0 auto;padding:10px 14px;border-radius:9px;background:var(--bg);
  box-shadow:var(--sh-in);font-size:.84rem;font-weight:700;text-align:center;line-height:1.7}
.cr-none{display:grid;place-items:center;height:150px;color:var(--muted)}
.cr-none .ic{width:46px;height:46px;margin:0;opacity:.45}
/* الموجة: عمودٌ لكل درجة حول خطٍّ واحد، وأشيعُها بأعمق لون */
.cr-wave{display:flex;flex-direction:column}
.cr-wh b{display:block;font-size:2.3rem;font-weight:800;line-height:1.1;color:var(--acc)}
.cr-wh small{color:var(--muted);font-size:.76rem;font-weight:700}
.cr-wv{height:160px;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin-top:auto;padding-top:14px}
.cr-wv div{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;
  align-items:center;gap:6px;min-width:0}
.cr-wv .wb{width:8px;border-radius:9px;background:var(--acc-2)}
.cr-wv .wb.hi{width:11px;background:var(--acc)}
.cr-wv .wb.z{background:var(--line)}
.cr-wv b{font-size:.62rem;font-weight:800;color:var(--muted);direction:ltr;unicode-bidi:isolate}
/* الأعلى تقييماً في المادة (أو الدكتورُ المختار): وجهُه ونسبتُه وسطرُه في المادة —
   حلّت محلَّ «من كل ٢٠ يرسب» التي كرّرت نسبةَ العدّاد. */
.cr-best{display:flex;flex-direction:column;gap:4px;padding:16px 18px;color:var(--text);
  text-decoration:none}
.cr-best .cb-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cr-best .cb-h small{color:var(--muted);font-size:.78rem;font-weight:700}
.cr-best .cb-p{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:12px}
.cr-best .avatar{width:62px;height:62px}
.cr-best b{display:block;font-size:1rem;font-weight:800;line-height:1.35}
.cr-best .meta{display:block;margin:2px 0 0}
.cr-best .cr-at{display:block;margin-top:8px;font-size:.74rem;font-weight:800;color:var(--acc)}
.cr-best .pct{margin-inline-start:auto;font-size:1.05rem}
@media(hover:hover){a.cr-best:hover{translate:0 -2px}}
.cr-dg i.on{background:var(--acc);box-shadow:none}
.cr-well .ic{width:54px;height:54px;margin:0;stroke-width:1.6}
.cr-sec{display:flex;flex-direction:column;gap:14px}
.cr-rows{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.cr-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.cr-rows{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ══ «خصوصيين لهالمادة» (قرار المالك ٢٢ أكتوبر ٢٠٢٦) ══
   قسمٌ مموَّل بوسم «ممول !» يفتح ورقةَ الشرح. ثلاثُ بطاقاتٍ بالكثير، مرتّبةٌ
   بـ«نفعك؟» من الخدمة لا بالمال، وفوقها «كم احتاجوا خصوصي» من تقييم المادة. */
.tu-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tu-hd h3{font-size:1.05rem;font-weight:800}
.tu-hd small{display:block;color:var(--muted);font-size:.8rem;font-weight:600}
.tu-need{display:flex;align-items:center;gap:12px;margin-top:12px}
.tu-need b{font-size:.84rem;font-weight:800;color:var(--acc);white-space:nowrap}
.tu-bar{flex:1;height:10px;border-radius:999px;background:var(--bg);box-shadow:var(--sh-in);overflow:hidden}
.tu-bar i{display:block;height:100%;border-radius:999px;background:var(--acc-2)}
@media (prefers-reduced-motion:no-preference){
  @keyframes tuBar{from{width:0}}
  @keyframes tuIn{from{opacity:0;translate:0 8px}}
  @keyframes tuPop{40%{scale:1.08}}
  /* الأشرطةُ تنمو حين تُرى بطاقتُها (`mv-in` من الكشف المتدرّج) لا قبلها خارج الشاشة */
  .tu-bar i,.tu-mini i{animation:tuBar .9s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .25s) both}
  .tu-best{animation:tuPop .5s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .45s) both}
  .tu-q,.tu-q small{animation:tuIn .45s cubic-bezier(.22,1,.36,1) both}
  .tu-q button.on{animation:tuPop .35s ease-out}}
.mm{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;min-height:44px;padding:3px 13px;
  border:0;border-radius:999px;font:inherit;font-size:.72rem;font-weight:800;color:var(--muted);
  background:var(--bg);box-shadow:var(--sh-in);cursor:pointer}
.mm i{font-style:normal;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
  border:1.5px solid currentColor;font-size:.62rem}
.tu-rows{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.tu-rows{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tu-rows:has(.tu-best){padding-top:8px}
.tu{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.tu-top{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center}
/* وسيلةُ الإعلان (صورة/مقطع يرفعه المراجع — `dalil_tutors.RULES`): رأسُ البطاقة بحافّتها، ومن بلا وسيلة بطاقتُه الافتراضية */
.tu-md{margin:-14px -16px 0;aspect-ratio:16/9;overflow:hidden;background:var(--bg);border-radius:inherit;
  border-end-start-radius:0;border-end-end-radius:0}
.tu-md img,.tu-md video{display:block;width:100%;height:100%;object-fit:cover}
.tu:has(.tu-md) .tu-best{top:10px}
.tu-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-d);
  font-weight:700;font-size:1.1rem;background:var(--bg);box-shadow:var(--sh-in);color:var(--primary)}
.tu-top b{display:block;font-size:.94rem;font-weight:800}
.tu-top .meta{display:block;margin:0;font-size:.74rem}
.tu-pr{font-size:.82rem;font-weight:800;white-space:nowrap;text-align:center}
.tu-top .tu-pr b{display:inline;font-family:var(--f-n);font-size:1rem;font-weight:500;font-variant-numeric:tabular-nums}
.tu-pr small{display:block;font-size:.66rem;color:var(--muted);font-weight:700}
.tu-ok{display:flex;align-items:center;gap:8px;font-size:.76rem;font-weight:800;color:var(--primary)}
.tu-ok .ic{margin:0;width:15px;height:15px}
.tu-ok.new{color:var(--muted)}
.tu-ok .tu-mini{flex:1;max-width:90px;height:6px;border-radius:999px;background:var(--bg);box-shadow:var(--sh-in);overflow:hidden}
.tu-ok .tu-mini i{display:block;height:100%;border-radius:999px;background:var(--primary)}
/* الأنفعُ للطلاب: شارةٌ على الأول وحده، ولا تظهر إلا بتقييمٍ كافٍ — لا تُشترى */
.tu-best{position:absolute;top:-11px;inset-inline-start:16px;display:inline-flex;align-items:center;gap:5px;padding:2px 10px;
  border-radius:999px;font-size:.68rem;font-weight:800;color:var(--acc-ink);background:var(--acc)}
.tu-best .ic{margin:0;width:13px;height:13px}
.tu{position:relative;transition:translate .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
@media(hover:hover){.tu:hover{translate:0 -3px}}
.tu-go{transition:scale .12s,filter .2s}
.tu-go:active{scale:.97}
@media(hover:hover){.tu-go:hover{filter:brightness(1.06)}}
.tu-tags{display:flex;flex-wrap:wrap;gap:6px}
.tu-tags span{font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--bg);
  box-shadow:var(--sh-in);color:var(--muted)}
.tu-go{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;margin-top:auto;
  border-radius:9px;background:var(--primary);color:var(--primary-ink);font-weight:800;font-size:.86rem;
  text-decoration:none;box-shadow:var(--sh-btn)}
.tu-go .ic{margin:0;width:17px;height:17px}
.tu-q{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:.8rem;font-weight:800}
.tu-q .ic{margin:0;width:15px;height:15px}
.tu-q small{display:inline-flex;align-items:center;gap:6px}
.tu-q button{min-height:36px;padding:3px 14px;border-radius:9px;border:1px solid var(--rim);background:var(--card);
  box-shadow:var(--sh-soft);font:inherit;font-size:.78rem;font-weight:800;color:var(--text);cursor:pointer}
.tu-q button.on{background:var(--bg);box-shadow:var(--sh-in)}
.tu-q small{color:var(--muted);font-weight:700}
.tu-me{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.8rem;font-weight:700;color:var(--muted);margin:0}
.tu-me .tu-mz{width:58px}
.tu-q .tu-mz2{width:48px}
/* «اعرض نفسك» بابُ الربح: هدفُ لمسٍ ٤٤ (مدقق التصميم) */
.tu-me button{border:0;background:none;min-height:44px;padding:4px 8px;font:inherit;color:var(--primary);font-weight:800;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.tu-why p{font-size:.86rem;line-height:1.85;margin:10px 0}
.tu-why ul{margin:6px 0 12px;padding-inline-start:20px;font-size:.84rem;line-height:1.9}
/* المادةُ بلا أرقام: البطلُ ثم الدعوةُ ثم من يدرّسها — بلا بطاقاتٍ فارغة */
.crs.is-blank{grid-template-areas:"who who" "cta cta" "lect lect" "tut tut" "cmts cmts"}
@media (min-width:720px){.crs.is-blank{grid-template-areas:
  "who who who who who who cta cta cta cta cta cta"
  "lect lect lect lect lect lect lect lect lect lect lect lect"
  "tut tut tut tut tut tut tut tut tut tut tut tut"
  "cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts"}}
/* «قيّم المادة» في البطل: الزرُّ الكبير تحت الإحصائيات بعيدٌ على الجوال */
.pf-chip.cr-qr{background:var(--primary);color:var(--primary-ink);border-color:transparent;
  text-decoration:none;box-shadow:var(--sh-btn);transition:translate .12s,box-shadow .12s}
.pf-chip.cr-qr .ic{stroke:currentColor}
.pf-chip.cr-qr:active{translate:0 2px;box-shadow:var(--sh-in)}
/* الدكتورُ المختار في الشريط يُعلَّم في القائمة */
.pf-peer.on{box-shadow:var(--sh-card),0 0 0 2px var(--primary)}
.cr-none2 .cr-pill{margin-inline-start:6px;min-height:32px;font-size:.78rem}
.pf-peer .cr-at{display:block;margin-top:2px;font-size:.7rem;font-weight:800;
  color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pct.nc{background:var(--card2);color:var(--muted);box-shadow:var(--sh-in);
  font-size:.72rem;padding:4px 9px}
.cchip.who{color:var(--primary);background:var(--card);box-shadow:var(--sh-soft)}
.cchip a{color:inherit;text-decoration:none}
.cmts-sub{color:var(--muted);font-size:.78rem;font-weight:700;margin:-6px 0 12px}
.pgl{display:block;margin:6px 0 4px;padding:8px 10px;border-radius:9px;
  color:var(--primary);font-size:.8rem;font-weight:700;text-decoration:none}
.pgl:hover{background:var(--card2)}

/* ══ الأوراق: الترتيب · التقييم · البلاغ · التواصل · الاقتراح ══
   ورقةٌ من الأسفل على الجوال وحوارٌ وسط الشاشة على الكبير. أرضيّتها
   أرضيّة الصفحة، فالخيارات عليها تبرز كما تبرز البطاقات. */
#ov{position:fixed;inset:0;z-index:50;background:var(--ov);
  display:flex;align-items:flex-end;justify-content:center}
#ov[hidden]{display:none}
.sheet{background:var(--bg);width:100%;max-height:88dvh;overflow-y:auto;
  border-radius:13px 13px 0 0;padding:18px 16px 22px;
  border-top:1px solid var(--rim)}
@media(min-width:720px){
  #ov{align-items:center}
  .sheet{max-width:560px;border-radius:13px;border:1px solid var(--rim)}
}
.sh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sh b{font-size:1.05rem;font-weight:800}
.sh button{min-width:44px;min-height:44px;border:1px solid var(--rim);
  border-radius:9px;background:var(--card);box-shadow:var(--sh-soft);
  color:var(--muted);font-size:1.1rem;cursor:pointer}
.sh button:active{box-shadow:var(--sh-in)}
.sheet .hint{color:var(--muted);font-size:.8rem;font-weight:600;margin:8px 0 4px}
.steps{display:flex;gap:8px;justify-content:center;margin:4px 0 10px}
.steps i{width:30px;height:7px;border-radius:9px;background:var(--line)}
.steps i.on{background:var(--primary);box-shadow:none}
.steps i.ok{background:var(--t2);box-shadow:none}
/* صف خيار في ورقة الترتيب: أيقونة في بئرٍ غائرة + اسم + وصف */
.srow{display:flex;align-items:center;gap:14px;width:100%;
  min-height:58px;padding:11px 14px;margin-top:10px;border-radius:13px;
  background:var(--card);border:1.5px solid var(--rim);
  box-shadow:var(--sh-soft);cursor:pointer;text-align:start;
  transition:box-shadow .15s,border-color .15s}
.srow .si{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;
  border-radius:9px;background:var(--bg);box-shadow:var(--sh-in)}
.srow b{display:block;font-size:.92rem}
.srow small{color:var(--muted);font-size:.76rem;font-weight:600}
.srow.on{box-shadow:var(--sh-in);border-color:var(--primary)}
.rq{margin:18px 0 0;scroll-margin-top:12px}
.rq>b{font-size:.9rem;font-weight:800}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.opt{min-height:50px;text-align:start;padding:11px 16px;border-radius:13px;
  background:var(--card);border:1.5px solid var(--rim);box-shadow:var(--sh-soft);
  cursor:pointer;display:flex;align-items:center;gap:12px;
  font-weight:600;transition:box-shadow .15s,border-color .15s}
.opt::before{content:"";width:14px;height:14px;border-radius:50%;
  background:var(--c);flex-shrink:0}
/* المختار محفورٌ في الأرضية بإطار لونه — يُرى الفرق ولو بلا ألوان. */
.opt.sel{border-color:var(--c);font-weight:800;background:var(--bg);
  box-shadow:var(--sh-in)}
.o1{--c:var(--t1)}.o2{--c:var(--t2)}.o3{--c:var(--t3)}
.o4{--c:var(--t4)}.o5{--c:var(--t5)}
.opt2{font-size:.68rem;font-weight:600;color:var(--muted);
  margin-inline-start:6px}
.rq.again{border-top:1px dashed var(--line);padding-top:12px;
  margin-top:14px}
/* ══ الأسئلة الذكية ══ الخياراتُ وصفٌ لا سلّم: لونٌ واحد (الأساسيّ) لا ألوانُ الجيد والسيئ، وعمودان. */
.rq.sq .opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opt.on{--c:var(--primary)}
/* ══ ورقةُ «سؤال بسؤال» (اختيار سعود ٢٢ أكتوبر ٢٠٢٦ — النموذج `/mnt/project-files/wuduh-smart/redesign/`) ══
   سؤالٌ واحد على الشاشة بخياراتٍ كبيرة. كلُّ الأسئلة في الصفحة (`.deck .rq`) والظاهرُ `.cur` وحده — فالحمولةُ
   والمعرّفاتُ كما كانت. والهدهدُ يمشي على شريط التقدّم (`--pg`) ويقفز مع كل جواب ويتكلّم بفقاعة (`.shsay` —
   قرارُ سعود: «خليها تتكلم بفقاعة كلام بسيطة»). وحركتُها كحركة الموقع: ≤ ثانية · مرّة · وتقليلُ الحركة يُسقطها. */
.sheet .sh b{font-family:var(--f-d);font-weight:700;font-size:1.02rem}
.qbar{position:relative;height:12px;border-radius:99px;background:var(--card2);box-shadow:var(--sh-in);
  margin:40px 2px 30px}
.qbar .qfill{position:absolute;inset-block:0;inset-inline-start:0;width:var(--pg,0%);border-radius:99px;
  background:var(--t2);transition:width .5s cubic-bezier(.3,1.3,.5,1)}
.qbar .qfill::after{content:"";position:absolute;inset:2px 8px auto;height:3px;border-radius:9px;
  background:rgba(255,255,255,.35)}
.sheet:has(.qbar){min-height:min(88dvh,760px)}
.qbar .qn{position:absolute;top:17px;inset-inline-end:0;font-family:var(--f-n);font-size:.74rem;
  font-weight:500;color:var(--muted)}
.sheet .qbar .shz{position:absolute;bottom:3px;inset-inline-start:var(--pg,0%);width:46px;margin:0;
  margin-inline-start:-22px;transition:inset-inline-start .5s cubic-bezier(.3,1.3,.5,1)}
.sheet .qbar .shz[hidden]{display:none}
.shsay{position:absolute;bottom:22px;inset-inline-start:calc(var(--pg,0%) + 28px);z-index:3;white-space:nowrap;
  pointer-events:none;background:var(--card);color:var(--text);border:1.5px solid var(--rim);
  box-shadow:var(--sh-btn);border-radius:12px;border-end-start-radius:3px;padding:4px 11px;
  font-size:.78rem;font-weight:800;opacity:0;transition:opacity .25s}
.qbar.flip .shsay{inset-inline-start:auto;inset-inline-end:calc(100% - var(--pg,0%) + 28px);
  border-end-start-radius:12px;border-end-end-radius:3px}
.shsay.on{opacity:1}
.deck .rq{display:none;margin:0}
.deck .rq.cur{display:block}
.qeb{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:700;color:var(--muted);
  padding:5px 11px;border-radius:99px;background:var(--card2);box-shadow:var(--sh-in)}
.qeb .ic{width:16px;height:16px}
.qeb.sm{color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--card2))}
.qeb .opt2{margin:0}
.deck .rq>b{display:block;font-family:var(--f-d);font-weight:700;font-size:1.38rem;line-height:1.5;
  margin:12px 0 2px}
.deck .opts{gap:10px;margin-top:14px}
.deck .opt{min-height:58px;border-width:2px;border-radius:15px;font-size:1rem;font-weight:700;
  box-shadow:var(--sh-btn);color:var(--text)}
.deck .opt::after{content:"✓";margin-inline-start:auto;flex:none;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--c);color:#fff;font-size:.78rem;font-weight:800;
  transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.deck .opt.sel{background:color-mix(in srgb,var(--c) 11%,var(--card))}
.deck .opt.sel::after{transform:scale(1)}
.deck .rq.sq .opts{gap:10px}
.deck .rq.sq .opt{min-height:62px;justify-content:center;text-align:center;position:relative}
.deck .rq.sq .opt::before{display:none}
/* عددُ خياراتٍ فرديّ: عمودٌ واحد — في عمودين يبقى الأخيرُ وحيداً في صفّه */
.rq.sq .opts:has(>.opt:last-child:nth-child(odd)){grid-template-columns:minmax(0,1fr)}
.deck .rq.sq .opt::after{position:absolute;top:-8px;inset-inline-end:-6px;width:22px;height:22px}
.deck .rq.again{border:0;padding:0}
.deck .rq.again .opts{display:grid;grid-template-columns:1fr 1fr}
.deck .rq.again .opt{min-height:118px;flex-direction:column;justify-content:center;font-size:1.08rem;
  position:relative}
.deck .rq.again .opt::before{width:22px;height:22px}
.deck .rq.again .opt::after{position:absolute;top:10px;inset-inline-end:10px}
.qnav{display:flex;align-items:center;gap:10px;margin-top:22px}
.qnav .qp{width:48px;height:48px;flex:none;border-radius:13px;border:1px solid var(--rim);
  background:var(--card);box-shadow:var(--sh-soft);color:var(--muted);font-size:1.05rem;cursor:pointer}
.qnav .qs,.qjump{background:none;border:0;font:inherit;font-weight:700;color:var(--muted);
  padding:12px 6px;cursor:pointer}
.qnav .qs{margin-inline-start:auto}
.qjump{display:flex;align-items:center;gap:6px;margin:6px auto 0;font-size:.86rem}
.qjump .ic{width:16px;height:16px}
.qjump[disabled]{opacity:.45;cursor:not-allowed}
#csubs,#crl{flex-direction:column;gap:10px}
#csubs .chip,#crl .chip{min-height:56px;padding:12px 16px;border-radius:15px;border-width:2px;
  font-size:1rem;font-weight:700;text-align:start;box-shadow:var(--sh-btn)}
#csubs .chip.alt,#crl .chip.alt{min-height:48px;font-weight:600;color:var(--muted);box-shadow:none}
.smsay{display:table;margin:10px auto 0;background:var(--card);border:1.5px solid var(--rim);
  box-shadow:var(--sh-btn);border-radius:12px;border-end-start-radius:3px;padding:6px 14px;
  font-weight:800;font-size:.9rem}
.smb{position:relative;display:block;height:0;width:0;margin:0 auto}
.smb i{position:absolute;width:9px;height:9px;border-radius:3px;background:var(--c);opacity:0}
@keyframes qaIn{from{opacity:0;transform:translateX(-40px)}}
@keyframes qaInB{from{opacity:0;transform:translateX(40px)}}
@keyframes qaOpt{from{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes qaPop{40%{transform:scale(1.035)}}
@keyframes qaSay{from{transform:scale(.6) translateY(8px)}}
@keyframes qaBurst{0%{opacity:1;transform:translate(-50%,-50%)}
  100%{opacity:0;transform:translate(calc(var(--x)*1px),calc(var(--y)*1px)) rotate(var(--r))}}
@media (prefers-reduced-motion:no-preference){
  .deck .rq.cur{animation:qaIn .38s cubic-bezier(.2,.9,.25,1) backwards}
  .deck.back .rq.cur{animation-name:qaInB}
  .deck .rq.cur .opt{animation:qaOpt .34s cubic-bezier(.2,.9,.25,1.15) backwards;
    animation-delay:calc(var(--j,0) * 45ms + 80ms)}
  .deck .rq.cur .opt.sel{animation:qaPop .36s cubic-bezier(.3,1.5,.5,1)}
  .shsay.on,.smsay{animation:qaSay .35s cubic-bezier(.3,1.6,.5,1) backwards}
  .smsay{animation-delay:.3s}
  .smb i{animation:qaBurst .9s cubic-bezier(.15,.8,.3,1) backwards;animation-delay:calc(var(--d) * 40ms + 200ms)}
}
/* العرض: سطرٌ لكل سؤال — الاسم · الخيارُ الأكثر وعددُه · شريطٌ بحصص الخيارات (الأكثرُ بالأساسيّ) */
.sqs-h{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);
  font-size:.82rem;font-weight:800;color:var(--muted)}
.sqs{list-style:none;padding:0;margin-top:10px;display:flex;flex-direction:column;gap:12px}
.sqs li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:4px 12px;
  align-items:center;font-size:.86rem}
.sqs .nm{font-weight:700;display:flex;align-items:center;gap:6px}
.sqs .nm .ic{width:16px;height:16px;color:var(--muted)}
.sqs .ans{font-weight:800;text-align:end}
.sqs .ans small{display:block;font-weight:600;font-size:.72rem;color:var(--muted)}
.sqs .seg{grid-column:1/-1;display:flex;gap:3px;height:10px;padding:2px;border-radius:9px;
  background:var(--bg);box-shadow:var(--sh-in)}
.sqs .seg i{display:block;border-radius:6px;background:var(--line);min-width:6px}
.sqs .seg i.sqm{background:var(--primary)}
/* صفُّ «تفاصيل من الطلاب» في صفحة المادة — **بـ`:has` لا في الشبكة الأصلية**: منطقةٌ بلا عنصرٍ تترك صفّاً
   فارغاً بفجوتين (انظر رأس `.pf-grid`)، والبطاقةُ تغيب عن كل مادةٍ لم يُجب فيها أحد. */
/* الحركة («ابي واضح الفرق في الموشن» — والعقدُ الباقي: تقليلُ الحركة يُسقطها · ≤ ثانية · ولا حركةَ بلا نهاية):
   الأسئلةُ تدخل متدرّجةً من تحت المحاور (`--i` من `sqRows`)، ونقطةُ الخيار تنبض لحظةَ يُختار،
   وأشرطةُ «تفاصيل من الطلاب» تنمو من بدايتها حين تُرسم الصفحة. */
@keyframes sqPop{0%{transform:scale(1)}45%{transform:scale(1.6)}100%{transform:scale(1)}}
@keyframes sqGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:no-preference){
  .rq.sq .opt.sel::before{animation:sqPop .32s ease-out}
  .sqs .seg i{transform-origin:right center;animation:sqGrow .7s cubic-bezier(.2,.7,.2,1) backwards;
    animation-delay:calc(var(--i,0) * 70ms + 150ms)}
}
.a-sq{grid-area:sq}
.crs:has(>.a-sq){grid-template-areas:"who who" "bar bar" "k1 k2" "ring ring" "face face" "grd grd"
    "wave wave" "dots dots" "sq sq" "cta cta" "lect lect" "cmts cmts"}
@media (min-width:720px){
  .crs:has(>.a-sq){grid-template-areas:
    "who who who who who who ring ring ring ring ring ring"
    "bar bar bar bar bar bar bar bar bar bar bar bar"
    "k1 k1 k1 k1 k1 k1 k2 k2 k2 k2 k2 k2"
    "face face face face face face face face face face face face"
    "grd grd grd grd grd grd wave wave wave wave wave wave"
    "dots dots dots dots dots dots cta cta cta cta cta cta"
    "sq sq sq sq sq sq sq sq sq sq sq sq"
    "lect lect lect lect lect lect lect lect lect lect lect lect"
    "cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts"}
}
@media (min-width:1060px){
  .crs:has(>.a-sq){grid-template-areas:
    "who who who who bar bar bar bar bar bar bar bar"
    "who who who who k1 k1 k1 k2 k2 k2 ring ring"
    "face face face face face face face grd grd grd grd grd"
    "wave wave wave wave dots dots dots dots cta cta cta cta"
    "sq sq sq sq sq sq sq sq sq sq sq sq"
    "lect lect lect lect lect lect lect lect lect lect lect lect"
    "cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts cmts"}
}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.chip{border:1px solid var(--rim);border-radius:9px;background:var(--card);
  box-shadow:var(--sh-soft);color:var(--text);padding:8px 14px;font:inherit;
  font-size:.84rem;font-weight:700;cursor:pointer;min-height:44px}
.chip.sel{background:var(--primary);color:var(--primary-ink);
  border-color:transparent;font-weight:800;
  box-shadow:inset 2px 2px 5px rgba(0,0,0,.25)}
.chip.alt{background:transparent;box-shadow:none;
  border:1.5px dashed var(--line);font-weight:600}
.chip.sel2{font-weight:700;padding:8px 12px}
.lbl2{font-size:.8rem;font-weight:700;color:var(--muted);
  margin:16px 0 2px}
/* `#crc` تعليقُ المادة: كان بلا قاعدة فظهر مربّعاً أبيضَ بحجم المتصفّح */
#cmt,#crc{width:100%;border:0;border-radius:13px;background:var(--card);
  box-shadow:var(--sh-in);color:var(--text);padding:12px 14px;font:inherit;
  resize:vertical;min-height:110px}
#cmt::placeholder,#crc::placeholder{color:var(--muted)}
.clen{text-align:end;color:var(--muted);font-size:.72rem;font-weight:700;
  margin-top:4px}
.rsum{background:var(--card);box-shadow:var(--sh-in);border-radius:9px;
  padding:10px 13px;font-size:.8rem;font-weight:700;margin:12px 0 4px;
  line-height:1.7}
.send{display:flex;align-items:center;justify-content:center;gap:4px;
  margin-top:18px;min-height:54px;border-radius:13px;font-weight:800;
  text-decoration:none;background:var(--cta);color:var(--cta-ink);
  border:1px solid transparent;box-shadow:var(--sh-btn);cursor:pointer;
  transition:translate .12s,box-shadow .12s}
/* الزرّ لا يملأ العرض كما يملؤه الرابط: `display:flex` تجعل الرابطَ
   كتلةً تتمدّد، والزرُّ يبقى بقياس نصّه. والزرّ لا يرث الخطّ ولا
   يسقط حدّه بنفسه. */
button.send{width:100%;cursor:pointer;font:inherit;font-weight:800}
.send:active{translate:0 2px;box-shadow:var(--sh-in)}
.send.dis{background:var(--card2);color:var(--muted);box-shadow:var(--sh-in);
  pointer-events:none}
.send.back{background:var(--card);color:var(--text);border-color:var(--rim);
  box-shadow:var(--sh-soft)}
/* «وصل تقييمك»: حالةُ تمامٍ لا زرٌّ معطَّل — محفورٌ بلون النجاح. */
.send.done{background:var(--card);color:var(--t2);box-shadow:var(--sh-in);
  border-color:var(--rim);pointer-events:none}
.send[disabled]{cursor:not-allowed}
.fld{margin:12px 0}
.fld label{display:block;font-size:.8rem;font-weight:700;
  color:var(--muted);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;border:0;border-radius:9px;
  background:var(--card);box-shadow:var(--sh-in);color:var(--text);
  padding:11px 14px;font:inherit}
.fld select[hidden],.fld input[hidden]{display:none}
/* ورقةُ «اعرض نفسك»: حدٌّ يُرى على الداكن (٣:١ — WCAG 1.4.11)؛ الحقولُ هنا تُملأ من الصفر لا تُختار */
#tjn,#tjp,#tjm{border:1px solid var(--muted)}
.fld .filt{margin-bottom:6px;font-size:.85rem;background:transparent;
  box-shadow:none;border:1.5px dashed var(--line)}
.fld input+select,.fld select+input{margin-top:8px}
.maybe{margin:10px 0;padding:10px 12px;border-radius:13px;
  background:var(--card);box-shadow:var(--sh-in)}
.maybe .sub{font-size:.78rem;color:var(--muted);margin-bottom:6px}
.mb{display:flex;align-items:center;gap:8px;width:100%;
  border:1px solid var(--rim);border-radius:9px;background:var(--card);
  box-shadow:var(--sh-soft);color:var(--text);padding:9px 11px;font:inherit;
  font-size:.84rem;font-weight:700;text-align:start;margin-top:8px;
  cursor:pointer}
.mb small{margin-inline-start:auto;font-weight:500;color:var(--muted);
  font-size:.72rem}
.amsg{border-radius:9px;padding:11px 14px;font-size:.84rem;
  font-weight:700;margin:10px 0;background:var(--card);box-shadow:var(--sh-in)}
.amsg.good{color:var(--t2)}
.amsg.bad{color:var(--t5)}
/* ══ إضافاتُ الرئيسية (قرار المالك ١٣ أكتوبر ٢٠٢٦ — الإضافات ٢–٧) ══
   بمتغيّرات الموقع نفسها (`--card` · `--rim` · `--sh-soft` …)، إلا لونَي النافذة:
   ضوءُ مصباح (`--lamp`) وزجاجٌ مطفأ (`--glass`). النموذج:
   `docs/ideas-2026-10/mockups/ratings-home-site.html`. */
:root{--lamp:#E9A93A;--lamp-hi:#F7CF7A;--glass:#7C8996;--shd:.13}
:root:not([data-theme="light"]){--lamp:#F2C063;--lamp-hi:#FFE6A8;--glass:#3C4652;--shd:.3}
/* ٢ نبضُ الأسبوع داخل بلاطة التقييمات — حبرُ البلاطة نفسه */
.st{position:relative}
.st .wk{position:absolute;top:9px;inset-inline-start:9px;font-style:normal;font-size:.7rem;
  font-weight:800;padding:2px 8px;border-radius:9px;background:rgba(255,255,255,.16);
  color:var(--tile-ink);white-space:nowrap}
@media (max-width:719px){.st .wk{top:6px;inset-inline-start:6px;font-size:.66rem;padding:1px 6px}
  .st .wk .wkl{display:none}}
/* ٣ «يبحث زملاؤك عن» — رقائقُ تحت البحث، وعلى الجوال صفٌّ يُسحب */
.trend{display:flex;align-items:center;gap:8px;margin-top:10px;overflow-x:auto;
  scrollbar-width:none;padding:2px 2px 6px;-webkit-overflow-scrolling:touch}
.trend::-webkit-scrollbar{display:none}
.trend .tl{flex:none;font-size:.76rem;font-weight:700;color:var(--muted);white-space:nowrap}
.tchip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 14px;
  border-radius:9px;background:var(--card);border:1px solid var(--rim);box-shadow:var(--sh-soft);
  font:inherit;font-size:.8rem;font-weight:700;color:var(--text);white-space:nowrap;cursor:pointer}
.tchip small{color:var(--muted);font-weight:700;font-size:.7rem}
.tchip:active{box-shadow:var(--sh-in)}
@media (min-width:720px){.trend{flex-wrap:wrap;justify-content:center;overflow:visible}}
/* ٤ الكليات بمبانيها — الرسمُ من `tools/assets/buildings/`، والنوافذُ المضاءة = تقييماتُ الأسبوع */
.cols,.revs{max-width:1280px;margin:4px auto 6px;padding:0 16px}
.colsh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 2px 10px}
.colsh h2{font-size:1.02rem;font-weight:900;margin:0}
.colsh .note,.colsh .note2{font-size:.76rem;font-weight:700;color:var(--muted);
  display:inline-flex;align-items:center;gap:6px}
.colsh .note i{width:9px;height:9px;border-radius:2px;background:var(--lamp);display:inline-block}
.colsh a{margin-inline-start:auto;font-size:.8rem;font-weight:800;color:var(--primary);
  text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.colsr,.revr{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:6px 4px 14px;margin:0 -4px}
.colsr::-webkit-scrollbar,.revr::-webkit-scrollbar{display:none}
.ctile{flex:0 0 132px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:10px 8px 11px;border-radius:13px;background:var(--card);border:1px solid var(--rim);
  box-shadow:var(--sh-soft);color:var(--text);text-decoration:none;text-align:center}
.ctile:active{box-shadow:var(--sh-in)}
.ctile .cimg{height:64px;display:grid;place-items:center;margin-bottom:4px}
.ctile .cimg svg{height:64px;width:auto;max-width:112px;overflow:visible}
.ctile .cimg .w{fill:var(--glass)}
.ctile.lit .cimg .w{fill:var(--lamp)}
.ctile .cimg .sh{fill:#000;opacity:var(--shd)}
.ctile b{font-size:.86rem;font-weight:800;line-height:1.4}
.ctile small{font-size:.72rem;font-weight:700;color:var(--muted);line-height:1.5}
.ctile small em{display:block;font-style:normal;color:var(--text)}
@media (min-width:1000px){.colsr{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  overflow:visible}.ctile{flex:none}}
/* أدواتُ الطالب (`tools_registry.strip_html` — بأمر المالك «سوي كل شيء حرفيا»، ١٥ أكتوبر): بلاطاتٌ بنمط الكليات */
.tls{max-width:1280px;margin:4px auto 6px;padding:0 16px}
.tlsr{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 4px 14px;margin:0 -4px}
.tlsr::-webkit-scrollbar{display:none}
.ttile{flex:0 0 132px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;
  border-radius:13px;background:var(--card);border:1px solid var(--rim);box-shadow:var(--sh-soft);color:var(--text);
  text-decoration:none;text-align:center;min-height:44px}
.ttile:active{box-shadow:var(--sh-in)}
.ttile .tic{width:44px;height:44px;display:grid;place-items:center;border-radius:9px;margin-bottom:6px;
  background:var(--bg);box-shadow:var(--sh-in);color:var(--primary)}
.ttile .tic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ttile b{font-size:.84rem;font-weight:800;line-height:1.4}
.ttile small{font-size:.72rem;font-weight:700;color:var(--muted);line-height:1.5}
@media (min-width:1000px){.tlsr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}.ttile{flex:none}}
/* ٥ أحدث الآراء — من الخدمة (`/c/latest`)؛ مخفيّةٌ حتى تصل، فلا مكانَ فارغ إن لم تصل */
.rev{flex:0 0 min(78vw,300px);scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;
  padding:14px 16px;border-radius:13px;background:var(--card);border:1px solid var(--rim);
  box-shadow:var(--sh-soft);color:var(--text);text-decoration:none;min-width:0}
.rev:active{box-shadow:var(--sh-in)}
.rev p{margin:0;font-size:.88rem;font-weight:600;line-height:1.85;flex:1;overflow-wrap:anywhere}
.rev .who{font-size:.76rem;font-weight:700;color:var(--muted)}
.rev .who b{color:var(--text);font-weight:800}
.rev .when{font-size:.7rem;font-weight:700;color:var(--muted)}
@media (min-width:1000px){.revr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:visible}.rev{flex:none}}
/* ٦ رأسُ القائمة — الترتيبُ نفسُه الذي في ورقة «الأنسب ▾» (`SORT`)، أزراراً ظاهرة */
.lhead{max-width:1280px;margin:6px auto 0;padding:0 16px;display:flex;align-items:center;
  flex-wrap:wrap;gap:6px 14px}
.lhead h2{font-size:1.02rem;font-weight:900;margin:0 2px}
.lhead .seg{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:var(--card2);
  box-shadow:var(--sh-in)}
.lhead .seg button{min-height:40px;padding:0 14px;border:0;border-radius:9px;background:none;
  color:var(--muted);font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}
.lhead .seg button[aria-pressed="true"]{background:var(--card);color:var(--text);box-shadow:var(--sh-soft)}
.lhead small{font-size:.74rem;font-weight:700;color:var(--muted);margin-inline-start:auto}
.card .ago{display:block;font-size:.68rem;font-weight:700;color:var(--muted);margin-top:2px;
  white-space:nowrap}
/* ٧ «ما لقيت دكتورك؟» — بعد القائمة، بوجه البلاطة النعناعية */
.rcta{max-width:1248px;margin:14px auto 4px;display:flex;align-items:center;flex-wrap:wrap;
  gap:12px 18px;padding:16px 18px;border-radius:13px;color:var(--tile-ink);border:1px solid var(--rim);
  box-shadow:var(--sh-soft),inset 0 0 0 5px var(--card);
  background:linear-gradient(155deg,var(--mint-b),var(--mint-a))}
@media (max-width:1279px){.rcta{margin-inline:16px}}
.rcta .ico{width:46px;height:46px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);flex:none}
.rcta .ico .ic{width:24px;height:24px;stroke:var(--tile-ink)}
.rcta .tx{flex:1 1 240px;min-width:0}
.rcta .tx b{display:block;font-size:1.02rem;font-weight:900;line-height:1.5}
.rcta .tx span{display:block;font-size:.8rem;font-weight:700;opacity:.88;line-height:1.7}
.rcta .gos{display:flex;gap:8px;flex-wrap:wrap}
.rcta .go{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:9px;
  background:var(--card);color:var(--text);box-shadow:var(--sh-soft);border:1px solid var(--rim);
  font:inherit;font-weight:900;font-size:.88rem;cursor:pointer}
.rcta .go.ghost{background:none;color:var(--tile-ink);border:1.5px solid rgba(255,255,255,.45);
  box-shadow:none}
:root[data-theme="light"] .rcta .go.ghost{border-color:rgba(0,0,0,.25)}
.rcta .go:active{box-shadow:var(--sh-in)}
/* هذه كلُّها للرئيسية: تختفي في صفحة المحاضر والفهارس، وبلا سكربتٍ تختفي أزرارُها
   (تنادي دوالَّ الصفحة). والبحثُ يُخفي الكلياتِ والآراء ليصعد ما يطابق. */
body.viewing .cols,body.viewing .revs,body.viewing .lhead,body.viewing .rcta,
body.browsing .cols,body.browsing .revs,body.browsing .lhead,body.browsing .rcta,
body.qon .cols,body.qon .revs,body.qon .lhead h2,
body.viewing .tls,body.browsing .tls,body.qon .tls{display:none}
body:not(.hasjs) .lhead,body:not(.hasjs) .rcta,body:not(.hasjs) .trend{display:none}

/* ══ الحركة على الموقع كلِّه (قرار المالك ١٣ أكتوبر: «ابي واضح الفرق في الموشن») ══
   **يغلب حدودَ `docs/ideas-2026-10/13-eye-comfort.md` §٤** بطلب المالك صراحةً (سجلُّه في
   `owner-feedback.md`): حركةٌ تُرى. وما بقي من المواصفة لا يُمسّ: **تقليلُ الحركة يُسقطها كلَّها**
   (تحت)، ولا حركةَ بلا نهاية إلا ما يقف وحده، ولا يُخفى شيءٌ بلا شبكة أمان (`mvSafe`).
   ‏`mvjs` يضعه سكربتُ الرأس قبل أول رسم؛ و`MOTION_JS` يكشف كلَّ قسمٍ حين يدخل الشاشة
   (`mv-in`) بتأخيرٍ متدرّج (`--d`)، و`mv-now` لما يظهر بلا حركة (البحثُ وهو يُكتب).
   والأقسامُ: .ctile,.ttile,.rev,.rcta,.lhead,#list>.card,.pf-card,.idx>details */
@media (prefers-reduced-motion:no-preference){
  @keyframes mvUp{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes mvSafe{to{opacity:1}}
  /* عموديٌّ لا أفقيّ: إزاحةٌ أفقية تمدّ عرضَ الصفحة لحظتَها، فيصغّرها الجوالُ ليتّسع لها
     ويغطّي بانرُ الكوكيز الشريطَ السفلي (كشفه `bottom-nav.spec` و`profile-split.spec`) */
  @keyframes mvPage{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
  @keyframes mvGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes mvBuild{0%{transform:scaleY(0)}65%{transform:scaleY(1.1)}82%{transform:scaleY(.96)}100%{transform:scaleY(1)}}
  @keyframes mvShape{0%{opacity:0;transform:scale(.25)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
  @keyframes mvDot{0%{transform:scale(0)}70%{transform:scale(1.35)}100%{transform:scale(1)}}
  @keyframes mvRipple{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
  @keyframes mvWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}60%{transform:rotate(10deg)}}
  /* ١) كشفُ الأقسام: مخفيّةٌ قبل أن تدخل الشاشة، وتصعد بتدرّجٍ حين تدخل. وإن لم يأتِ السكربتُ
     خلال ثانيتين ونصف ظهرت وحدها (`mvSafe`) — لا قسمَ يبقى غائباً لعطلٍ في سكربت */
  .mvjs :is(.ctile,.ttile,.rev,.rcta,.lhead,#list>.card,.pf-card,.idx>details):not(.mv-in),.mv-rv:not(.mv-in){opacity:0;animation:mvSafe 0s 2.5s forwards}
  :is(.ctile,.ttile,.rev,.rcta,.lhead,#list>.card,.pf-card,.idx>details).mv-in{animation:mvUp .65s cubic-bezier(.22,1,.36,1) var(--d,0s) both}
  .mv-in.mv-now{animation:none}
  /* ٢) الصفحةُ تصعد داخلةً حين تُفتح (محاضر · مادة · فهرس). ⚠️ `backwards` لا `both`: الملءُ
     الأمامي يُبقي `transform` محسوباً (مصفوفةَ الهوية) بعد انتهاء الحركة، فيصير `#prof` حاويةً لكلِّ
     `position:fixed` تحته — شريطُ حاسبة المعدل الثابت التصق برأس الصفحة لا بالشاشة، وتنبيهُها بذيلها.
     والنهايةُ هي النمطُ العاديّ نفسُه فلا فرقَ يُرى. يحرسه `e2e/gpa.spec.js` */
  body.viewing #prof,body.browsing .idx.on{animation:mvPage .45s cubic-bezier(.22,1,.36,1) backwards}
  /* ٣) المباني تُبنى من الأرض حين تظهر بلاطتُها، ثم تُضاء نوافذُ النشطة واحدةً بعد الأخرى
     (`.on` بعد البناء — `MOTION`). وقبل `.on` زجاجٌ، وإن لم يأتِ أُضيئت وحدها */
  .ctile.mv-in .cimg svg{transform-origin:50% 100%;
    animation:mvBuild .75s cubic-bezier(.22,1,.36,1) calc(var(--d,0s) + .12s) both}
  .mvjs .ctile.lit:not(.on) .cimg .w{fill:var(--glass);animation:mvLampSafe 0s 3s forwards}
  @keyframes mvLampSafe{to{fill:var(--lamp)}}
  .ctile.lit.on .cimg .w{transition:fill .35s ease-out}
  /* ٤) أشرطةُ المحاور تنمو حين يظهر قسمُها، صفّاً بعد صفّ — والرادارُ ينفتح من مركزه */
  .pf-card.mv-in .pf-list .trk i{transform-origin:right center;
    animation:mvGrow .9s cubic-bezier(.22,1,.36,1) calc(var(--d,0s) + .25s) both}
  .pf-card.mv-in .pf-list li:nth-child(2) .trk i{animation-delay:calc(var(--d,0s) + .33s)}
  .pf-card.mv-in .pf-list li:nth-child(3) .trk i{animation-delay:calc(var(--d,0s) + .41s)}
  .pf-card.mv-in .pf-list li:nth-child(4) .trk i{animation-delay:calc(var(--d,0s) + .49s)}
  .pf-card.mv-in .pf-list li:nth-child(n+5) .trk i{animation-delay:calc(var(--d,0s) + .6s)}
  .pf-card.mv-in .pf-plot polygon[fill]{transform-box:view-box;transform-origin:190px 160px;
    animation:mvShape .85s cubic-bezier(.22,1,.36,1) calc(var(--d,0s) + .2s) both}
  .pf-card.mv-in .pf-plot circle{transform-box:fill-box;transform-origin:center;
    animation:mvDot .45s cubic-bezier(.22,1,.36,1) calc(var(--d,0s) + .75s) both}
  /* ٥) نبضُ الأسبوع: يظهر بعد العدّ ثم يتموّج ثلاثاً ويقف */
  .st .wk{animation:mvUp .4s 1.3s both,mvRipple 1.4s ease-out 1.8s 3}
  /* ٦) «ما لقيت دكتورك؟»: أيقونتُه تهتزّ مرةً حين يظهر */
  .rcta.mv-in .ico{animation:mvWiggle .7s ease-in-out calc(var(--d,0s) + .5s) both}
  /* ٧) رأسُ القائمة: حبّةٌ تنزلق بين الأزرار (`.ind` — `segSync`) */
  .lhead .seg{position:relative}
  .lhead .seg .ind{position:absolute;top:3px;bottom:3px;left:0;border-radius:9px;background:var(--card);
    box-shadow:var(--sh-soft);transition:transform .45s cubic-bezier(.34,1.45,.64,1),width .45s cubic-bezier(.34,1.45,.64,1);
    pointer-events:none}
  .lhead .seg.has-ind button{position:relative;z-index:1}
  .lhead .seg.has-ind button[aria-pressed="true"]{background:none;box-shadow:none}
  /* ٨) تحت المؤشر: البطاقاتُ ترتفع قليلاً (`translate` لا `transform`: الكشفُ يملك ذاك) */
  @media (hover:hover){
    #list>.card,.ctile,.rev,.tchip,.pf-peer{transition:translate .22s cubic-bezier(.22,1,.36,1),box-shadow .22s}
    #list>.card:hover,.ctile:hover,.rev:hover,.pf-peer:hover{translate:0 -4px}
    .tchip:hover{translate:0 -2px}}
  /* ٩) تبديلُ الوضع تلاشٍ للصفحة كلِّها (View Transitions حيث يدعمها المتصفح) */
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}

/* ══ الصفحات الثابتة (`tools/seo_pages.py`) ══ */
.hlink{display:block;color:inherit;text-decoration:none}
.htitle{display:block;font-size:1.22rem;font-weight:900;line-height:1.35;
  letter-spacing:-.3px;text-wrap:balance}
@media (max-width:420px){.htitle{font-size:1.08rem}}
.hdesc{display:block;color:var(--muted);font-size:.78rem;font-weight:600;line-height:1.5}
a.pback,a.pf-more,a.pf-sub{text-decoration:none;color:var(--text)}
a.pf-more{display:inline-flex;align-items:center}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin:0 4px 16px;
  color:var(--muted);font-size:.78rem;font-weight:700}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--primary);text-decoration:underline}
.crumbs .sep{opacity:.55}
.pf-who h1{font-size:1.3rem;font-weight:900;line-height:1.35;text-wrap:balance}
.pf-who .lede{color:var(--muted);font-size:.84rem;font-weight:600;line-height:1.7;
  max-width:46ch;margin:0 0 14px}
.pf-well img{width:76%;height:auto;display:block}
.pf-well .ic{width:54px;height:54px;margin:0;stroke-width:1.6}
.pf-tile.lilac .pf-face{background:linear-gradient(155deg,var(--lilac-a),var(--lilac-b))}
.pf-tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.pf-tiles.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-tiles.three .pf-tile:last-child{grid-column:1/-1}
  .pf-tiles.three .pf-tile:last-child .pf-face{min-height:120px}}
.pf-cap small{display:block;font-weight:600;opacity:.85;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cmts .cchip a{color:inherit;text-decoration:none}
.cmts .cchip a:hover{color:var(--primary)}
.cchip.who{color:var(--primary);box-shadow:var(--sh-soft);background:var(--card)}
.cmore{color:var(--muted);font-size:.8rem;font-weight:700;text-align:center;margin:4px 0 0}
.pct.nc{background:var(--card2);color:var(--muted);box-shadow:var(--sh-in);
  font-size:.72rem;padding:4px 9px}
/* صفحاتُ الكلية والمادة: البطلُ والبلاطات صفٌّ، ثم أقسامٌ بعرض الصفحة */
/* مكوّناتُ صفحة المحاضر تحمل في الثيم مناطقَ شبكةٍ مسمّاة (`grid-area:who`)
   وترتيباً (`order`) — داخل `.hub` تصنع أعمدةً ضمنية وتقلب الترتيب، فتُصفَّر. */
.hub{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.hub>*{min-width:0;order:0;grid-area:auto}
@media (min-width:720px){
  .hub{grid-template-columns:repeat(12,minmax(0,1fr))}
  .hub>*{grid-column:1/-1}
  .hub>.pf-who{grid-column:span 5}
  .hub>.pf-tiles{grid-column:span 7}
}
@media (min-width:1060px){.hub{gap:22px}.hub>.pf-who{grid-column:span 4}
  .hub>.pf-tiles{grid-column:span 8}}
.hub .pf-who{justify-content:center}
.hub .pf-tiles{align-content:stretch}
.hsec{display:flex;flex-direction:column;gap:14px}
.rows{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.rows{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fold>summary{list-style:none;cursor:pointer}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary:active{box-shadow:var(--sh-in)}
.fold .chev{flex-shrink:0;width:40px;height:40px;display:grid;place-items:center;border-radius:9px;
  background:var(--card);border:1px solid var(--rim);box-shadow:var(--sh-soft);transition:rotate .2s}
.fold .chev .ic{margin:0;width:18px;height:18px}
.fold[open] .chev{rotate:180deg}
.fold>.rows{margin-top:14px}
.hsec.fold{display:block}
/* الأقسامُ المطويّة شبكةٌ من عنواوين مضغوطة: المفتوحُ يأخذ عرض الصفحة */
.folds{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.folds>h2{font-size:1.05rem;font-weight:800;margin:6px 4px 0}
@media (min-width:720px){.folds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .folds>h2,.folds>.fold[open]{grid-column:1/-1}}
@media (min-width:1060px){.folds{grid-template-columns:repeat(3,minmax(0,1fr))}}
.folds .fold>summary{padding:10px 14px;border-radius:13px;box-shadow:var(--sh-soft)}
.folds .fold h3{font-size:.92rem}
.folds .fold .chev{width:34px;height:34px;border-radius:9px}
.pf-ph .n{flex-shrink:0;color:var(--muted);font-size:.8rem;font-weight:800;
  font-variant-numeric:tabular-nums}
.chipcard{display:flex;flex-direction:column;gap:12px}
.chipcard .pf-sublist{margin:0}
.hub .pf-cta .rate{padding-top:12px}
/* صورةُ المادة في بئر رأسها مكانَ أيقونة الكتاب — دائرةٌ كصور المحاضرين */
.pf-well .crimg{width:87%;height:87%;border-radius:50%;display:block;object-fit:cover}