/* ══ خطُّ الموقع — مستضافٌ عندنا ══
   ملفّان متغيّران في `d/fonts/` يكتبهما `seo_pages.write_site`، وبصمةُ
   بايتاتهما في رابطهما فتنكسر ذاكرةُ المتصفّح وحدها عند التبديل.
   **ويرثهما التطبيقُ والصفحاتُ الثابتة معاً** لأن هذه الكتلة تُقتطع
   إلى `d/site.css` — فلا نسخةَ ثانية تتباعد.
   `font-display:swap` يبقي النصَّ مقروءاً بالخطّ الاحتياطي حتى يصل،
   فلا شاشةَ بيضاء لمن خطُّه بطيء. و`font-weight:200 1000` مدى الوزن
   في الملفّ الواحد — هكذا يغطّي ملفٌّ واحدٌ ‎٤٠٠‎ و‎٦٠٠‎ و‎٧٠٠‎ و‎٨٠٠‎ و‎٩٠٠‎. */
@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;
  font-display:swap;src:url("/taibah/d/fonts/cairo-arabic-wght-normal.woff2?v=714d40cf") 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:"Cairo";font-style:normal;font-weight:200 1000;
  font-display:swap;src:url("/taibah/d/fonts/cairo-latin-wght-normal.woff2?v=caa2f572") 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;
  --bg:#D3CDC1; --card:#E3DED4; --card2:#D9D3C8; --rim:#EEEAE2;
  --line:#C2BBAE; --text:#24201B; --muted:#595248;
  --primary:#3558AE; --primary-ink:#FFFFFF;
  --cta:#2E4E9E; --cta-ink:#FFFFFF;
  --t1:#3D5FAE; --t2:#0D6A4E; --t3:#E0A80A; --t4:#6E685F;
  /* لا يُستعمل للدرجات بعد الدمج — يبقى لرسائل الخطأ والوسوم */
  --t5:#A8392B;
  --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);
  /* الظلال مركّبةٌ من الألوان فوق مرةً واحدة: الداكن يبدّل الألوان
     وحدها، فلا تُكتب الظلال ثلاث مرات. */
  --sh-card:9px 9px 20px var(--sh-dark),-7px -7px 16px var(--sh-light);
  --sh-soft:4px 4px 10px var(--sh-dark),-3px -3px 9px var(--sh-light);
  --sh-in:inset 3px 3px 7px var(--in-dark),inset -3px -3px 7px var(--sh-light);
  --sh-field:var(--sh-in);
  --sh-btn:5px 5px 12px var(--sh-dark),-4px -4px 10px var(--sh-light);
  --sh-btn-cta:var(--sh-btn);
}
/* الليليُّ هو الأصل لكل زائر (قرار المالك) — لا يُسأل نظامُ الجهاز:
   كل ما ليس `data-theme="light"` ليلي، بسمةٍ أو بلا سمة، فيراه أيضاً
   من عطّل السكربت أو التخزين. والنهاريُّ لمن اختاره بالزر وحده.
   والداكن مكتوبٌ مرة واحدة في بايثون ويُحقن هنا مرة واحدة: كان يُحقن
   مرتين (تفضيلُ النظام واختيارُ الزائر)، وقاعدةٌ واحدة تغني عنهما. */
:root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#26231F; --card:#322E28; --card2:#3A352F; --rim:#433D36;
    --line:#48423B; --text:#F0EBE2; --muted:#B5AD9F;
    --primary:#93ABF2; --primary-ink:#131A2C;
    --cta:#93ABF2; --cta-ink:#131A2C;
    /* `--t1..--t5` لم تعد للدرجات بعد السلّم المتّصل، **وتبقى معرَّفةً**:
       تستهلكها `.o1..o5` (معالج التقييم) و`.cvote` و`.steps i.ok`
       و`.send.done` و`.amsg` — وحذفُها يرسمها بلا لون بلا خطأٍ في أيّ فحص. */
    --t1:#8AA6EC; --t2:#3FC79E; --t3:#F2C63F; --t4:#A69F94;
    --t5:#EE8A7A;
    --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);
}
*{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:16px;line-height:1.6;
  font-family:"Cairo","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}
:focus-visible{outline:none;box-shadow:var(--ring)!important}
#q:focus-visible,.idxq input:focus-visible,.dq input:focus-visible,
#cmt: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:1000px;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:22px;
  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:13px;background:var(--card2)}
.ulogo img{display:block;height:40px;width:auto;max-width:74px;
  object-fit:contain}
/* شعارُ جامعةٍ داكنُ الحبر صُمّم لأرضيةٍ فاتحة (`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:10px}
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:14px;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)}
/* العلامة أيقونةٌ قائمة بذاتها لا خلفيةٌ تحت العنوان (طلب المالك) —
   وصارت في هالةٍ بارزة حولها بئرٌ غائرة، كوجه المحاضر في صفحته. */
.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)}
/* بئرُ العلامة بلونِ الهوية الداكن في الوضعين — لا بلون الخلفية.
   **السبب لونُ الشعار نفسِه**: ذيلُه كريميٌّ فاتح، وعلى بيج الوضع
   النهاري (‎#D3CDC1‎) يذوب فلا يبقى منه إلا الرأس. وبئرٌ داكنةٌ تُبقي
   الشعارَ كما صُمِّم في الوضعين، وتصير مرساةً للهوية في النهاري. */
.markw .well{width:84%;height:84%;border-radius:50%;display:grid;
  place-items:center;background:#26231F;box-shadow:var(--sh-in)}
/* ٧٢٪ لا ٨٠٪: شعارُ «وضوح» أعرضُ من شعار الجامعة الذي كان هنا، فبـ٨٠٪
   يلامس طرفاه حافّةَ البئر. */
.mark{display:block;width:72%;height:auto;object-fit:contain}
/* ══ علامةُ «وضوح» ══
   نسختان من الفنّ لا واحدة: رأسُ الشعار فاتحٌ وذيلُه داكن، فنسخةُ
   الأبيض تذوب على الخلفية الداكنة والعكس. والتبديلُ بـCSS لا
   بجافاسكربت — لا ومضةَ شعارٍ خاطئ قبل أن يعمل السكربت، والوضعُ
   الليليُّ هو الأصل فنسختُه هي الظاهرةُ بلا شرط. */
/* العلامةُ الصغيرة في سطر العنوان — ترتفع مع حجم الخط لا بمقاسٍ ثابت */
.hmk{width:1.16em;height:1.16em;object-fit:contain;vertical-align:-.22em}
/* والتبديلُ بعدها بقصد: مُحدِّدٌ أعلى (`.hmk.wm-*`) كي لا يُلغي مقاسُ
   العلامة الصغيرة إخفاءَ النسخة الأخرى — ظهرتا معاً أولَ مرة. */
.wm-light{display:none}
.hmk.wm-dark{display:inline-block}
:root[data-theme="light"] .wm-dark{display:none}
:root[data-theme="light"] .wm-light{display:block}
:root[data-theme="light"] .hmk.wm-light{display:inline-block}
/* ══ كلمةُ «وضوح» شعاراً لا نصّاً (طلب المالك ٢٠ سبتمبر ٢٠٢٦) ══
   ألوانُ العلامة نفسُها: كريميُّها حبراً في الليلي وبنّيُّها في النهاري،
   وذيلُها الرماديُّ الترابيُّ محطّةً ثانيةً في التدرّج.

   **وتبقى نصّاً لا صورة**: هي `<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:18px;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».
   و`5vw` محسوبةٌ لا مقدَّرة: أضيقُ بلاطة (شاشة ٣٢٠px) داخلُها ‎٤٥٫٣px‎،
   ورقمُ Cairo الثقيل عرضُه ‎٠٫٥٥٥em‎ — فخمسةُ أرقامٍ بـ١٦px = ‎٤٤٫٤px‎
   تسع. والتقييماتُ اليوم ٩٠١٥ فالخانةُ الخامسة قريبة؛ لا تكبّر
   المعامل قبل أن تعيد الحساب. */
.st b{display:block;font-size:clamp(1rem,5vw,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:22px;
    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 بلا معنى يُضاف. عرضُه بخطّ Cairo ‎٢٢٫٨٥px‎ لكل بكسل من حجم الخط،
   والمتاحُ له عرضُ الشاشة ناقصاً ما يأكله الشريط.

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

   و`clamp` لا `min`: تحت ‎٤٣٤px‎ يبلغ الحسابُ حدّاً غيرَ مقروء (‎٩px‎
   على هاتف ٣٩٠)، فأرضيّةُ ‎.7rem‎ تُوقفه ويُقبل سطران بحجمٍ يُقرأ —
   وهو ما كان عليه الحال قبل هذه القاعدة أصلاً. ولا `nowrap`: خطٌّ
   بديلٌ أعرض ينكسر سطرين ولا ينزلق تحت الزرّ. */
@media (min-width:375px) and (max-width:719px){
  header .sub{font-size:clamp(.7rem,calc((100vw - 183px)/22.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}}
  .markw{animation:rise .7s .05s both}
  .st{animation:rise .65s both}
  .st:nth-child(1){animation-delay:.12s}
  .st:nth-child(2){animation-delay:.22s}
  .st:nth-child(3){animation-delay:.32s}}
/* حالة التحديث في التذييل بطلب المالك: ليست خبراً يُقرأ أولاً بل
   ختمُ طزاجةٍ يُراجَع آخراً. */
.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:999px;
  padding:6px 15px;color:var(--muted)}

/* ══ أدوات البحث ══
   البحث غائرٌ في الأرضية (حقلٌ يُكتب فيه) والأزرار بارزة (تُضغط) —
   الفرقُ بين ما يُملأ وما يُضغط يُرى قبل أن يُقرأ.
   والشريط ثابت بمكانه أعلى الصفحة — لا يلاحق التمرير (طلب المالك). */
.tools{max-width:1000px;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:1000px;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:22px;
  box-shadow:var(--sh-card)}
#qhead .qnone p{margin:0 0 12px;color:var(--muted)}
#q{width:100%;min-height:52px;padding:10px 46px 10px 44px;border:0;
  border-radius:999px;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:20px;
  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:999px;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:16px;
  box-shadow:var(--sh-soft);color:var(--muted);font-size:.78rem;
  font-weight:600;padding:10px 14px;margin-top:12px}

/* ══ الفهارس: أسهم مطوية خالصة HTML ══ */
.idx{max-width:1000px;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:18px;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}
.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:12px;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:999px;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:14px;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:1000px;margin:0 auto;padding:10px 16px;display:grid;
  gap:16px;grid-template-columns:minmax(0,1fr)}
/* الصفّ يُفتح بـ`<details>` لا بجافاسكربت: التفاصيل تظهر بالضغط ولو
   تعطّل السكربت — القاعدة نفسها التي تعمل بها الفهارس. */
.card{background:var(--card);border:1px solid var(--rim);border-radius:22px;
  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:13px;
  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:999px}
.bar i{display:block;height:100%;border-radius:999px}
/* والبطاقةُ والصفحةُ تقولان الشيءَ نفسَه عن المحاضر نفسِه: كلُّ
   المحاور على السلّم الواحد، وصنفُ `.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:18px;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:999px;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}
/* روابط التذييل — في كل صفحة، فالقواعد لا تُطلب بل تُوجَد */
.flinks{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
  margin-top:12px}
.flinks a,.flinks .cclink{display:inline-block;padding:10px 4px;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:16px;
  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:12px;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:24px;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:18px;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}}

/* ══ الصفحات بعد الرئيسية ══
   صفحة المحاضر والفهرسان والصفحات الثابتة حالاتٌ في المستند نفسه:
   كل ما عداها يختفي ويبقى شريط العنوان. والإخفاء معلّقٌ بـ`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}
body.viewing header{max-width:1140px}
.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:999px;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:24px;
  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:16px;
  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:1140px;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:14px;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-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:24px;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-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"
    "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-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 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"
    "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 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 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:999px;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-tile{padding:8px;border-radius:24px;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:17px;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:13px;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:11px}
  .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{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:999px;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:999px;
  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:22px;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 "Cairo","IBM Plex Sans Arabic",sans-serif}
.pf-plot .rt{fill:var(--muted);font:600 10px "Cairo","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:28px;
  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:999px;background:var(--bg);
  box-shadow:var(--sh-in)}
.pf-list .trk i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(270deg,var(--q1),var(--q2))}
/* **ومحورا الصرامة دخلا السلّم بقرار المالك (٢١ سبتمبر ٢٠٢٦).**
   كانا خارجه بحجّةٍ وجيهة: الأعلى فيهما «أسهلُ وأكثرُ تساهلاً» لا
   «أفضل»، فتخضيرُ «تساهل ١٠٠٪» يقرؤه الطالبُ امتيازاً. عُرضت الحجّةُ
   على المالك صريحةً فاختار السلّمَ لهما — **والنصُّ يحمل المعنى بدل
   اللون**: الفاصلُ فوقهما «السهولة والتساهل — ليست في النسبة»،
   والملاحظةُ تحتهما تشرح أنهما وصفٌ لصعوبة المادة لا حكمٌ على المحاضر،
   ومفتاحُ الرادار يفرّق بينهما وبين الجودة بلونَي الرسم `--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:20px;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:20px;
  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}
/* المادة والدرجة فوق النصّ غائرتان هادئتان — تُقرآن ولا تُضغطان.
   والردُّ تحت التعليق غائرٌ بخطّ أصغر: كلامٌ على الكلام لا رأيٌ ثانٍ. */
.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:999px;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:999px;
  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:14px;
  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" "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-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"
    "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"
    "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:999px;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:800 11px "Cairo","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 1.1s cubic-bezier(.25,1.4,.5,1) both}}
.cr-gs{margin:14px 0 auto;padding:10px 14px;border-radius:14px;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:999px;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))}}
.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:12px;
  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:28px 28px 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:28px;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:14px;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:999px;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:18px;
  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:14px;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}
.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:16px;
  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}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.chip{border:1px solid var(--rim);border-radius:999px;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}
#cmt{width:100%;border:0;border-radius:18px;background:var(--card);
  box-shadow:var(--sh-in);color:var(--text);padding:12px 14px;font:inherit;
  resize:vertical;min-height:110px}
#cmt::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:14px;
  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:18px;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:14px;
  background:var(--card);box-shadow:var(--sh-in);color:var(--text);
  padding:11px 14px;font:inherit}
.fld select[hidden],.fld input[hidden]{display:none}
.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:16px;
  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:14px;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:14px;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)}

/* ══ الصفحات الثابتة (`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:13px;
  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:18px;box-shadow:var(--sh-soft)}
.folds .fold h3{font-size:.92rem}
.folds .fold .chev{width:34px;height:34px;border-radius:11px}
.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}