/* =====================================================================
   assessment.css — مكوّنات صفحة التقييم (§٦). مُنطاق تحت #sf-assessment.
   صفّ الخيار مشترك في components.css (.sf-orow--assess).
   ===================================================================== */

/* لوحة الأسئلة — الخانة وحالاتها (أُعيدت — الصفّان 94 و99)
   كانت 34px بخطّ 13 وحدٍّ متقطّع، والحالات تُفرَّق بدرجات لونٍ متقاربة. الآن:
   - الرقم 14.5px بوزن 800، ولونه `--sf-ink-2` في كلّ حالة غير الحاليّ، فتباينه ≥ 4.5:1
     في الوضعين (الفاتح 8.6:1 على surface-soft · الداكن 10:1). الحدود متّصلة.
   - كلّ حالة بعلامةٍ غير اللون: **الحاليّ** معكوس الألوان وحوله حلقة، و**المُجاب** عليه ✓
     في الزاوية وحدّه أثقل، و**غير المُجاب** خانةٌ مجرّدة. و**المعلَّم** (لا يستعمله التقييم
     الحاليّ) ⚑ في الزاوية. ولا يحمل «لاحق» علامة: هو غير مُجاب لم يُعرض بعد. */
#sf-assessment .sf-nav-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;
  /* أربعة صفوف أقصى (الصفّ 99)، وما زاد يُمرَّر داخل اللوحة. الحشو 4px لترى الحلقة كاملة:
     overflow يقصّ ما خرج عن الصندوق. */
  max-height:calc(4 * 38px + 3 * 7px + 8px);overflow-y:auto;padding:4px;margin:-4px;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--sf-border) transparent;}
#sf-assessment .sf-nav-cell{position:relative;height:38px;border-radius:var(--sf-r-xs);font-family:var(--sf-font);
  font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:var(--sf-surface-soft);border:1px solid var(--sf-border);color:var(--sf-ink-2);}
#sf-assessment .sf-nav-cell[disabled]{cursor:not-allowed;}
#sf-assessment .sf-nav-cell--seen{background:var(--sf-surface);}
#sf-assessment .sf-nav-cell--answered{background:var(--sf-surface-warm);border:2px solid var(--sf-muted-2);color:var(--sf-ink);}
#sf-assessment .sf-nav-cell--answered::after,
#sf-assessment .sf-nav-cell--flagged::after{position:absolute;top:3px;inset-inline-end:3px;font-size:9px;line-height:1;font-weight:900;}
#sf-assessment .sf-nav-cell--answered::after{content:"✓";color:var(--sf-gold-deep);} /* ذهبيّ لا أخضر: الأخضر يُقرأ «صحيح»، والتقييم لا يكشف الصحّة قبل الإنهاء */
#sf-assessment .sf-nav-cell--flagged{border:2px solid var(--sf-gold-2);}
#sf-assessment .sf-nav-cell--flagged::after{content:"⚑";color:var(--sf-gold-deep);}
#sf-assessment .sf-nav-cell--current{background:var(--sf-ink-surface);border:1px solid var(--sf-ink-surface);color:#fff;
  box-shadow:0 0 0 2px var(--sf-surface-warm),0 0 0 4px var(--sf-gold-2);}
#sf-assessment .sf-nav-cell--current.sf-nav-cell--answered::after{color:#fff;}
/* مفتاح اللوحة: خاناتٌ مصغّرة بأصنافها نفسها، فالمفتاح يطابق ما يُرى ولا يُكرّر الأنماط. */
#sf-assessment .sf-nav-key{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:14px;}
#sf-assessment .sf-nav-key > span{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--sf-ink-2);}
#sf-assessment .sf-nav-key .sf-nav-cell{width:24px;height:24px;font-size:11px;cursor:default;flex:none;}
#sf-assessment .sf-nav-key .sf-nav-cell--current{box-shadow:0 0 0 2px var(--sf-surface-warm),0 0 0 3px var(--sf-gold-2);}

/* أعمدة السبليت عبر أصناف (لا inline) لتنهار على الجوال — درس 1.21.0.
   (home.css ينهار السبليت لكنه مُنطاق تحت #sf-landing فلا يطال التقييم.) */
#sf-assessment .sf-split{display:grid;gap:24px;align-items:start;}
#sf-assessment .sf-split--intro{grid-template-columns:1.35fr 1fr;gap:0;}
#sf-assessment .sf-split--q{grid-template-columns:1fr 1fr;}
/* كتل التراكيب والكتابة بلا قطعة: عمودٌ واحد (10-22). */
#sf-assessment .sf-split--q.sf-split--solo{grid-template-columns:1fr;max-width:860px;}
/* شريط الشاشات (التعليمات · السؤال · التقرير · المراجعة) مثبّت أعلى الصفحة، تحت شريط إدارة ووردبريس إن ظهر. */
#sf-assessment .sf-chrome{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:20;}
@media (max-width:600px){ #sf-assessment .sf-chrome{top:0;} } /* شريط الإدارة هنا لا يثبت، فيصعد مع الصفحة */
#sf-assessment .sf-split--report{grid-template-columns:1.45fr 1fr;gap:22px;}
@media (max-width:900px){
  #sf-assessment .sf-split,
  #sf-assessment .sf-split--intro,
  #sf-assessment .sf-split--q,
  #sf-assessment .sf-split--report{grid-template-columns:1fr;}
}

/* أثناء اختبار التقييم: تمييز اختيار المستخدم بلون محايد (لا صحّة) — الكشف بعد الإنهاء فقط.
   (الصحّة/الخطأ is-correct/is-wrong تظهران في شاشة المراجعة بعد الإنهاء عبر components.css.) */
#sf-assessment .sf-orow--assess.is-answered{border-color:var(--sf-gold);background:var(--sf-surface-warm);}
#sf-assessment .sf-orow--assess.is-answered .sf-orow__mark{border-color:var(--sf-gold);}

/* =====================================================================
   شاشة السؤال — التخطيط (1.76.0)
   كان التخطيط inline: صفٌّ مرن يضمّ عمودًا محتوًى (flex:1) وعمودًا جانبيًّا
   بعرض 288px ثابت. على شاشة 375px لم يبقَ للمحتوى — القطعة والسؤال والخيارات
   كلّها — سوى ~7px مقيسة. نُقل إلى أصناف كي ينقلب إلى عمود على الجوال.
   ===================================================================== */
#sf-assessment .sf-q-top{max-width:1200px;margin:0 auto;height:58px;padding:0 24px;display:flex;align-items:center;gap:16px;}
/* نوع الاختبار والقسم — صنفٌ لا inline، كي ينزل سطرًا وحده على الجوال (‏flex المضمَّن يغلب الورقة). */
#sf-assessment .sf-q-top__info{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
#sf-assessment .sf-q-body{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:22px 28px;display:flex;gap:24px;align-items:flex-start;}
#sf-assessment .sf-q-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;}

/* العمود الجانبي: على سطح المكتب لوحتان ظاهرتان دائمًا وزرّ الطيّ مخفيّ. */
#sf-assessment .sf-q-side{width:288px;flex:none;display:flex;flex-direction:column;gap:14px;}
#sf-assessment .sf-q-side__body{display:flex;flex-direction:column;gap:14px;}
#sf-assessment .sf-q-side__toggle{display:none;}

/* زرّ المظهر على الشريط الداكن أثناء الأسئلة (الصفّ 95): الشريط داكنٌ في الوضعين، فالزرّ
   بألوانه هو لا بسطح الصفحة — وإلّا ظهر قرصٌ أبيض على شريطٍ أسود في الفاتح. */
#sf-assessment .sf-theme-toggle--on-dark{background:transparent;border-color:#6B5A38;color:var(--sf-gold-3);}
#sf-assessment .sf-theme-toggle--on-dark:hover{background:rgba(255,255,255,.08);}

/* منطقة تمرير القطعة: بلا سقف على سطح المكتب (تنمو داخل خليّة الشبكة). */
#sf-assessment .sf-read__scroll{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
/* النصّ الطويل على المكتب يُمرَّر داخل صندوقه (طلب المستخدم 10-22): القطعة لا تتجاوز ارتفاع الشاشة تحت الشريطين،
   فيبقى السؤال وخياراته بجوارها ظاهرَين. رأس القطعة وزرّا الحجم خارج منطقة التمرير، فيبقيان ظاهرَين. */
@media (min-width:901px){
  #sf-assessment .sf-split--q .sf-read{max-height:max(320px,calc(100vh - var(--wp-admin--admin-bar--height,0px) - 150px));}
}

@media (max-width:900px){
  /* الشريط العلويّ يلتفّ بدل أن يضغط عناصره في 58px */
  #sf-assessment .sf-q-top{height:auto;min-height:58px;padding:10px 16px;flex-wrap:wrap;gap:8px 12px;}
  #sf-assessment .sf-q-top__count{order:3;flex:1 0 100%;font-size:13.5px;}
  #sf-assessment .sf-q-top__end{flex:0 0 auto;}

  #sf-assessment .sf-q-body{flex-direction:column;padding:14px 16px 28px;gap:14px;}
  /* اللوحة تسبق السؤال في العرض لا في المصدر: ملخّصها يُقرأ أوّلًا، وترتيب
     المصدر يبقى كما هو ليقرأه قارئ الشاشة بعد المحتوى (وهو موضعه المنطقي). */
  #sf-assessment .sf-q-side{width:100%;order:-1;gap:10px;}
  #sf-assessment .sf-q-side__body{display:none;}
  #sf-assessment .sf-q-side.is-open .sf-q-side__body{display:flex;}

  /* زرّ الطيّ بهيئة «تدريب مخصّص ▾» في باني التدريب */
  #sf-assessment .sf-q-side__toggle{display:flex;align-items:center;gap:10px;width:100%;
    padding:11px 14px;border-radius:13px;border:1px solid var(--sf-border);
    background:var(--sf-surface);color:var(--sf-ink-3);font-family:var(--sf-font);
    text-align:start;cursor:pointer;}
  #sf-assessment .sf-q-side__sum{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  #sf-assessment .sf-q-side__sum b{font-size:13px;font-weight:800;color:var(--sf-ink-3);}
  #sf-assessment .sf-q-side__sum span{font-size:12px;font-weight:600;color:var(--sf-muted);}
  #sf-assessment .sf-q-side__caret{flex:none;font-size:12px;color:var(--sf-muted);}

  /* القطعة تأخذ تمريرًا خاصًّا بها. بلا سقف تمتدّ ~1700px فوق السؤال فيُدفن، ومع
     السقف يبقى السؤال والخيارات في الشاشة نفسها كما على الحاسوب.
     السقف منذ 1.88.7 هو الأكبر من 42vh و«١٨ سطرًا بحجم القراءة الحاليّ»: الـvh
     وحدها لا تعرف شيئًا عن حجم الخطّ، فمن يرفع النصّ إلى 26px بزرّ A+ كان يرى
     أسطرًا أقلّ في الصندوق نفسه. المتغيّر `--sf-rs` ينشره assessment.js عند كل
     تغيير — والـem لا تصلح هنا لأنّ الحاوية تحمل خطّ الواجهة لا خطّ القراءة. */
  #sf-assessment .sf-read__scroll{max-height:max(42vh,calc(var(--sf-rs,16.5px) * 18));}
}

/* =====================================================================
   شاشة البداية (1.87.1) — زرّا النمط · جدول البيانات · نافذة التعليمات
   ===================================================================== */
#sf-assessment .sf-intro{padding:30px;display:flex;flex-direction:column;gap:22px;}
#sf-assessment .sf-intro__t{font-size:22px;font-weight:800;margin:0;text-align:center;}
#sf-assessment .sf-intro__note{font-size:12.5px;line-height:1.8;color:var(--sf-muted);font-weight:600;text-align:center;margin:0;}
#sf-assessment .sf-intro__note b{color:var(--sf-gold-deep);}
/* تنبيه الزائر — بقيّة جدول البيانات المحذوف: أن نتيجته لا تُحفظ لا يُقال في مكان آخر */
#sf-assessment .sf-intro__guest{margin:0;padding:13px 16px;border-radius:12px;text-align:center;
  background:var(--sf-surface-amber);border:1px solid var(--sf-border-soft);
  font-size:13.5px;line-height:1.7;font-weight:600;color:var(--sf-ink-3);}
#sf-assessment .sf-intro__guest b{color:var(--sf-gold-deep);}
/* «سجّل الدخول» رابطٌ إلى إنشاء حساب (1.97.13). مسطَّر لا ملوَّن وحده: داخل جملةٍ
   لا يكفي اللون ليُعرف الرابط (WCAG 1.4.1). */
#sf-assessment .sf-intro__guest a{color:var(--sf-gold-deep);font-weight:800;text-decoration:underline;text-underline-offset:3px;}
#sf-assessment .sf-intro__guest a:hover{text-decoration-thickness:2px;}

/* الزرّان: هدف لمس كبير، وكل ما يلزم القرار مكتوب داخلهما (العدد والمدّة) */
#sf-assessment .sf-modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
#sf-assessment .sf-mode{display:flex;align-items:center;gap:12px;text-align:start;cursor:pointer;
  padding:20px 22px;border-radius:16px;border:1.5px solid var(--sf-border);background:var(--sf-surface);
  font-family:var(--sf-font);color:var(--sf-ink);transition:border-color .15s,background .15s,transform .12s,box-shadow .15s;}
#sf-assessment .sf-mode__img{width:72px;height:72px;flex:none;object-fit:contain;
  transition:transform .2s var(--sf-ease-spring,ease);}
@media (hover:hover){ #sf-assessment .sf-mode:hover .sf-mode__img{transform:scale(1.06);} }
#sf-assessment .sf-mode__txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
#sf-assessment .sf-mode__t{font-size:16px;font-weight:800;}
#sf-assessment .sf-mode__d{font-size:12.5px;font-weight:600;color:var(--sf-muted);}
#sf-assessment .sf-mode:focus-visible{outline:2px solid var(--sf-gold-2);outline-offset:3px;}
#sf-assessment .sf-mode:active{transform:scale(.985);}
@media (hover:hover){
  #sf-assessment .sf-mode:hover{border-color:var(--sf-gold-2);background:var(--sf-surface-warm);
    box-shadow:0 8px 20px rgba(168,116,26,.16);}
}

@media (max-width:640px){
  #sf-assessment .sf-intro{padding:20px 16px;gap:18px;}
  #sf-assessment .sf-modes{grid-template-columns:1fr;}
  #sf-assessment .sf-mode{padding:16px;}
  #sf-assessment .sf-mode__img{width:60px;height:60px;}
}

@media (max-width:560px){
  /* على الجوال: الرجوع والمؤقّت والمظهر والإنهاء سطرٌ، ونوع الاختبار والقسم سطرٌ تحته، ثمّ رقم
     السؤال. كانت الأربعة مع الاسم في سطرٍ واحد فانعصر «تقييم سريع» والمؤقّت سطرين. */
  #sf-assessment .sf-q-top__info{order:2;flex:1 0 100%;}
  #sf-assessment .sf-q-top__end{flex:1 0 auto;}
}