/* ═══ رموز التصميم المشتركة لمنصة التدريس ═══
   تُستورد في كل صفحة قبل بقية ملفات الأنماط. */

/* ── خط أميري، مستضاف مع المنصة ──
   الآيات بالرسم العثماني لا تظهر صحيحةً إلا في خطٍّ يعرف علاماته:
   السكون القرآني ۡ والدمة المقلوبة ٗ والألف الخنجرية ٰ وعلامات الوقف.
   لو تُرك الأمر للخط الاحتياطي في الجهاز، انقطعت الكلمة عند العلامة
   وسقط الحرف الذي تحتها. ولأن المنصة تعمل من غير شبكة ومن file://
   أيضًا، لا يصحّ تعليق ظهور المصحف على وصول خطٍّ من خادم خارجي؛
   فالملفات هنا بجانب الصفحات.
   الخط: Amiri للمصمم خالد حسني وشركائه، رخصة SIL OFL 1.1،
   نسخة fontsource ٥.٣.٠ المجزّأة. نصّ الرخصة في assets/fonts/amiri-OFL.txt */
@font-face{
  font-family:"Amiri";font-style:normal;font-weight:400;font-display:swap;
  src:local("Amiri"),url("fonts/amiri-arabic-400.woff2") 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;
}
@font-face{
  font-family:"Amiri";font-style:normal;font-weight:700;font-display:swap;
  src:local("Amiri Bold"),local("Amiri"),url("fonts/amiri-arabic-700.woff2") 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;
}
@font-face{
  font-family:"Amiri";font-style:normal;font-weight:400;font-display:swap;
  src:local("Amiri"),url("fonts/amiri-latin-400.woff2") 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:"Amiri";font-style:normal;font-weight:700;font-display:swap;
  src:local("Amiri Bold"),local("Amiri"),url("fonts/amiri-latin-700.woff2") 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;
}

:root{
  --navy:#002856;            /* أرضية العرض — اللون الرئيسي للجامعة */
  --navy-2:#0A3565;          /* سطح مرتفع */
  --faculty:#0DABE2;         /* أزرق: ما يصدر عن الدكتورة — العناوين، المؤقت، المصدر */
  --student:#F8D81B;         /* أصفر: ما يخص الطالبة — القارئة، الإجابة الصحيحة */
  --neutral:#DBD9DA;         /* رمادي: الحدود والنص الثانوي */
  /* لون النصّ الثانوي. كان يُكتب في كل موضعٍ بصيغة
     rgba(var(--neutral-rgb),.6) — وهي مقيسةٌ على اللوحات الداكنة
     وحدها: تخفيتُ لونٍ فاتحٍ على أرضيةٍ داكنة يبقى مقروءًا، وتخفيتُ
     لونٍ داكنٍ على أرضيةٍ فاتحة يذوب فيها. فهبط التلميح في اللوحات
     الفاتحة إلى ٢.٥:١. وهذا اللون مقيسٌ لكل لوحةٍ على حدة: فوق
     ٤.٦:١ على الأرضية وعلى السطح المرتفع معًا. */
  --muted:#95A0B0;
  --surface:#FFFFFF;
  --matn:"Amiri","Scheherazade New","Traditional Arabic",Georgia,serif;
  --ui:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;

  --danger:#E2725B;          /* أحمر طيني: الغياب والحذف والخطأ */
  --ink:#0B3D70;             /* حبر داكن على الأسطح الفاتحة */

  /* ثلاثيات القنوات — تتيح اشتقاق شفافيات من اللون نفسه.
     بلا هذه كان تبديل اللوحة يترك نصف الألوان على حالها، إذ كانت
     rgba(13,171,226,.07) مكتوبةً بأرقامها في عشرة مواضع. */
  --navy-rgb:0,40,86;
  --faculty-rgb:13,171,226;
  --student-rgb:248,216,27;
  --neutral-rgb:219,217,218;
  --danger-rgb:226,114,91;
  --surface-rgb:255,255,255;
  --shadow-rgb:0,0,0;

  --line:rgba(var(--neutral-rgb),.28);
  --line-faculty:rgba(var(--faculty-rgb),.38);
}

/* ═══ اللوحات البديلة ═══
   تُبدَّل من زرّ «الألوان» في ترويسة أي صفحة، ويُحفظ الاختيار على
   الجهاز. كل لوحة تعيد تعريف الرموز نفسها — ولا شيء غيرها — فلا
   تحتاج صفحةٌ ولا ملفُ أنماطٍ تعديلًا عند إضافة لوحة جديدة.

   قاعدة اللوحة: لونان متمايزان لا يلتبسان —
     faculty = ما يصدر عن الدكتورة   ·   student = ما يخصّ الطالبة
   وأرضية داكنة تريح العين في قاعة مظلمة، أو فاتحة تصلح للطباعة
   والشاشات الساطعة. */

/* ١) خضراء ذهبية — خضرة داكنة وذهب المخطوطات */
html[data-theme="green"]{
  --muted:#A9B6AF;
  --navy:#14362A;  --navy-2:#1E4A39;
  --faculty:#6FD8B0;  --student:#E8C466;  --neutral:#D8DED9;
  --danger:#E8836B;   --ink:#0E2A20;
  --navy-rgb:20,54,42;      --faculty-rgb:111,216,176;
  --student-rgb:232,196,102; --neutral-rgb:216,222,217;
  --danger-rgb:232,131,107;
}

/* ٢) عنّابية — نبيذ داكن ووردة ورملي */
html[data-theme="wine"]{
  --muted:#A89799;
  --navy:#361A22;  --navy-2:#4A2530;
  --faculty:#E9A8A0;  --student:#EFC96A;  --neutral:#E2D8D6;
  --danger:#FF8A75;   --ink:#2A1218;
  --navy-rgb:54,26,34;      --faculty-rgb:233,168,160;
  --student-rgb:239,201,106; --neutral-rgb:226,216,214;
  --danger-rgb:255,138,117;
}

/* ٣) ليلية بنفسجية — نيلي عميق وبنفسج وكهرمان */
html[data-theme="indigo"]{
  --muted:#9896AD;
  --navy:#1E1C45;  --navy-2:#2B2860;
  --faculty:#A99BF5;  --student:#F5C453;  --neutral:#DCDAE8;
  --danger:#F0806B;   --ink:#171634;
  --navy-rgb:30,28,69;      --faculty-rgb:169,155,245;
  --student-rgb:245,196,83;  --neutral-rgb:220,218,232;
  --danger-rgb:240,128,107;
}

/* ٤) فحمية — رمادي محايد بلا صبغة، لمن تريد الهدوء */
html[data-theme="slate"]{
  --muted:#A1A5AA;
  --navy:#242830;  --navy-2:#333841;
  --faculty:#79B8E8;  --student:#E5B94F;  --neutral:#D7DADE;
  --danger:#E27D65;   --ink:#1B1E22;
  --navy-rgb:36,40,48;      --faculty-rgb:121,184,232;
  --student-rgb:229,185,79;  --neutral-rgb:215,218,222;
  --danger-rgb:226,125,101;
}

/* ٥) ورقية — أرضية فاتحة كورق المخطوط، حبر داكن.
   وهي اللوحة الوحيدة التي ينقلب فيها المعنى: surface صار داكنًا
   لأنه لون النصّ على الأرضية الفاتحة. */
html[data-theme="paper"]{
  --muted:#5A5347;
  --navy:#F6F1E6;  --navy-2:#FFFBF2;
  --faculty:#166149;  --student:#9A6212;  --neutral:#5A5347;
  --surface:#1A1712;  --danger:#B03A24;   --ink:#1A1712;
  --navy-rgb:246,241,230;   --faculty-rgb:22,97,73;
  --student-rgb:154,98,18;   --neutral-rgb:90,83,71;
  --surface-rgb:26,23,18;    --danger-rgb:176,58,36;
  --line:rgba(var(--neutral-rgb),.34);
}
/* ═══ اللوحات الفاتحة الناصعة ═══
   أرضيةٌ بيضاء أو تكاد، وحبرٌ داكن، ولونان مشبعان داكنان: تُقرأ في
   قاعةٍ مضيئة وعلى شاشة الجوال في النهار، وتُطبع كما تُرى.
   وقياسُ كلٍّ منها مُثبَت: نصّ المتن فوق ١٥:١، ولونا الدكتورة
   والطالبة فوق ٥.٥:١ على الأرضية وعلى السطح المرتفع معًا، وبينهما
   فرقٌ لونيّ (ΔE) فوق ٦٠ فلا يلتبس أحدهما بالآخر. */

/* ٦) ثلجية — أبيض خالص وأزرقٌ سماويّ داكن */
html[data-theme="snow"]{
  --muted:#49545F;
  --navy:#FFFFFF;  --navy-2:#EFF3F8;
  --faculty:#0B5FA5;  --student:#8A5300;  --neutral:#49545F;
  --surface:#0D1520;  --danger:#B02418;   --ink:#0D1520;
  --navy-rgb:255,255,255;   --faculty-rgb:11,95,165;
  --student-rgb:138,83,0;    --neutral-rgb:73,84,95;
  --surface-rgb:13,21,32;    --danger-rgb:176,36,24;
  --line:rgba(var(--neutral-rgb),.30);
}

/* ٧) ورديّة — ورديّ فاتح وعنّابٌ داكن */
html[data-theme="rose"]{
  --muted:#57474D;
  --navy:#FFF2F5;  --navy-2:#FFFFFF;
  --faculty:#A62A56;  --student:#7C5300;  --neutral:#57474D;
  --surface:#1E0F14;  --danger:#B02418;   --ink:#1E0F14;
  --navy-rgb:255,242,245;   --faculty-rgb:166,42,86;
  --student-rgb:124,83,0;    --neutral-rgb:87,71,77;
  --surface-rgb:30,15,20;    --danger-rgb:176,36,24;
  --line:rgba(var(--neutral-rgb),.30);
}

/* ٨) فيروزية — أزرقٌ مائيّ فاتح وفيروزٌ داكن */
html[data-theme="aqua"]{
  --muted:#44565A;
  --navy:#EAF7F8;  --navy-2:#FFFFFF;
  --faculty:#08636F;  --student:#8A5300;  --neutral:#44565A;
  --surface:#08201F;  --danger:#A83224;   --ink:#08201F;
  --navy-rgb:234,247,248;   --faculty-rgb:8,99,111;
  --student-rgb:138,83,0;    --neutral-rgb:68,86,90;
  --surface-rgb:8,32,31;     --danger-rgb:168,50,36;
  --line:rgba(var(--neutral-rgb),.30);
}

/* ٩) ليلكية — بنفسجٌ فاتح وأرجوانٌ داكن */
html[data-theme="lilac"]{
  --muted:#4E4A5E;
  --navy:#F4F0FE;  --navy-2:#FFFFFF;
  --faculty:#5A3CA8;  --student:#8A5300;  --neutral:#4E4A5E;
  --surface:#171232;  --danger:#AC2B34;   --ink:#171232;
  --navy-rgb:244,240,254;   --faculty-rgb:90,60,168;
  --student-rgb:138,83,0;    --neutral-rgb:78,74,94;
  --surface-rgb:23,18,50;    --danger-rgb:172,43,52;
  --line:rgba(var(--neutral-rgb),.30);
}

/* على اللوحات الفاتحة تُقلب حدود التركيز لتُرى على الفاتح */
html[data-theme="paper"] button:focus-visible,
html[data-theme="paper"] a:focus-visible,
html[data-theme="paper"] select:focus-visible,
html[data-theme="snow"] button:focus-visible,
html[data-theme="snow"] a:focus-visible,
html[data-theme="snow"] select:focus-visible,
html[data-theme="rose"] button:focus-visible,
html[data-theme="rose"] a:focus-visible,
html[data-theme="rose"] select:focus-visible,
html[data-theme="aqua"] button:focus-visible,
html[data-theme="aqua"] a:focus-visible,
html[data-theme="aqua"] select:focus-visible,
html[data-theme="lilac"] button:focus-visible,
html[data-theme="lilac"] a:focus-visible,
html[data-theme="lilac"] select:focus-visible{outline-color:var(--faculty)}

*{box-sizing:border-box;margin:0;padding:0}
/* وسم hidden لا يصمد أمام display:flex المعلَن على الصنف، فيُثبَّت هنا
   مرة واحدة لكل الصفحات بدل ملاحقته صنفًا صنفًا. */
[hidden]{display:none!important}
/* رابط نصّي داخل الفقرات. بلا هذا يرثه المتصفّح أزرقَ افتراضيًّا
   (‎#0000EE‎) فلا يُقرأ على أرضيةٍ داكنة — وهو ما وقع فعلًا لرابط
   «الدرجات» في لوحة الشرف. والأنماط الأخصّ (شريط التنقل، الجداول،
   بطاقات المحاضرات) في app.css وهو يُحمَّل بعده فيعلو عليه. */
a:not(.btn){color:var(--faculty);text-decoration-thickness:1px;
  text-underline-offset:.22em}
a:not(.btn):hover{color:var(--student)}

button,a.btn{font:inherit;color:var(--faculty);background:none;
  border:1px solid var(--faculty);padding:.35em 1.1em;cursor:pointer;text-decoration:none}
button:focus-visible,a:focus-visible,li:focus-visible,select:focus-visible{
  outline:2px solid var(--surface);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ═══ مبدّل اللوحات ═══ */
.theme-picker{display:flex;gap:.8em;align-items:center;flex-wrap:wrap;padding-block:.15em}
.theme-dot{width:1.15em;height:1.15em;padding:0;border-radius:50%;
  border:1px solid var(--line);background:var(--dot);cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease}
.theme-dot:hover{transform:scale(1.18)}
/*  النقطة صغيرةٌ بالقصد — لكن الإصبع لا يصيب ١٩ بكسلًا. فتُوسَّع
    مساحةُ اللمس وحدها بطبقةٍ شفّافة حولها، فتبلغ نحو ٣٣ بكسلًا بلا
    أن تكبر النقطة ولا أن تزاحم جارتها (الفسحة بينهما ١٣). */
.theme-dot::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.theme-dot{position:relative}
/* اللوحة الفاتحة: أرضيتها في الوسط ولونها حلقةً حولها */
.theme-dot.light{background:var(--dot-bg);border-color:var(--dot);border-width:3px}
.theme-dot.on{border-color:var(--surface);
  box-shadow:0 0 0 2px rgba(var(--surface-rgb),.55)}
@media print{.theme-picker{display:none}}

/* النقطة الأخيرة: لوحة على المزاج — حلقةٌ تميّزها عن الجاهزة */
.theme-dot.mix{position:relative;border-style:dashed}
.theme-dot.mix::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px dotted var(--neutral);opacity:.55}

.mixer{position:absolute;z-index:40;margin-top:1.9em;
  display:flex;flex-direction:column;gap:.55em;
  background:var(--navy-2);border:1px solid var(--faculty);
  padding:.9em 1em;min-width:14em;
  box-shadow:0 8px 26px rgba(var(--shadow-rgb),.45)}
.mix-field{display:flex;align-items:center;gap:.6em;color:var(--surface);
  font-size:.82rem;cursor:pointer}
.mix-field input[type=color]{inline-size:2.2em;block-size:1.7em;padding:0;
  border:1px solid var(--line);background:none;cursor:pointer}
.mix-note{color:var(--neutral);opacity:.75;font-size:.72rem;line-height:1.6;
  max-inline-size:16em;border-top:1px solid var(--line);padding-top:.5em}
.mixer button{align-self:flex-start}

/* اسم المطوّر في سطر الاعتماد — رابط واتساب */
.credit-link{color:inherit;text-decoration-style:dotted;text-underline-offset:.2em}
.credit-link:hover{color:var(--student)}