/* استجابة الشاشات — تخطيط ومقاسات فقط، بلا أي تغيير في هوية الألوان أو الخطوط.

   ⚠️ يجب أن يبقى هذا الملف آخر ورقة أنماط في index.html:
   محدداته (‎.course‎ ، ‎.statbar‎ ، ‎.wi-grid‎ …) معرّفة أصلاً في components.css بنفس
   التخصيص، و‎@media‎ لا يرفع التخصيص — فمن يُحمَّل أخيرًا يكسب. (كانت هذه القواعد
   في layout.css المُحمَّل قبل components.css، فكانت كلها ميتة على الجوال.)

   نقطتا الكسر هما نفسهما المستعملتان في المشروع: 860px و520px. */

/* ===================== ≤ 860px: الأعمدة تنهار وأهداف اللمس تكبر ===================== */
@media (max-width: 860px){
  .hero{padding-top:56px}

  .options{grid-template-columns:1fr}

  /* ثلاثة أعمدة لا تتسع (issue #112): بطاقة النسبة تأخذ سطراً كاملاً أعلى الشريط فيبقى
     شريط التقدّم واسعاً وواضحاً، والساعتان جنباً إلى جنب تحتها — أقل ارتفاع ممكن بلا
     تكديس ثلاث بطاقات رأسياً. البطاقة الأوسط مُثبَّتة صراحةً، والجانبيتان تتدفّقان للسطر التالي. */
  .statbar{grid-template-columns:1fr 1fr}
  .stat-main{grid-column:1 / -1; grid-row:1}

  /* لوحة «ماذا لو»: ثلاثة أعمدة كانت تسحق القائمة المنسدلة إلى 26px */
  .wi-grid{grid-template-columns:1fr}
  .wi-row .select{min-width:0}
  /* شريط الساعات: مساحة لمس كافية — المسار والمقبض يبقيان في المنتصف بصريًا */
  .wi-hours input[type=range]{min-height:32px}

  /* صف المقرر: أعمدة سطح المكتب الثلاثة لا تتسع (كان عمود الاسم ينهار إلى 0px)،
     والتكديس في عمود واحد جعل المقرر 155px مقابل 74px على سطح المكتب — أربعة أسطر
     منفصلة. الحل سطران بنفس ترتيب سطح المكتب ومعلوماته كاملة:
       [الرمز ‖ الساعات والشارات]
       [الاسم ثم المتطلبات]
     الرمز يبقى في البداية (يمين RTL) والشارات في النهاية (يسار) تمامًا كسطح المكتب. */
  .course{
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:"code side" "main main";
    align-items:center; gap:3px 10px; padding:9px 18px;
  }
  .c-code{grid-area:code; text-align:start}
  .c-main{grid-area:main}
  .c-side{grid-area:side; justify-content:flex-end}
  /* line-height الافتراضي 1.85 يترك ~12px هواء فوق كل سطر اسم — 1.5 يكفي للعربية */
  .c-name{font-size:14px; line-height:1.55; gap:4px 7px}
  .c-sub{margin-top:0; line-height:1.55}

  /* خط الرحلة: إزاحة أقل تُعيد 8px لعرض البطاقة */
  .term-wrap{padding-inline-start:32px}
  /* المسافة بين الفصول تتبع كثافة البطاقة نفسها */
  .terms{gap:16px}
  .term-head{padding:14px 18px 10px}
  .course-list{padding:0 0 4px}

  /* رقاقات ضمن السطر — كانت 19px/26px/30px ارتفاعًا، صعبة اللمس */
  .pr-chip{min-height:30px; padding:4px 9px}
  .sim-chip{min-height:32px; padding:5px 7px 5px 11px}
  .sim-chip button{padding:4px}
  .mini-chip{min-height:32px}

  /* زر الرفع اليدوي — كان 31px */
  .upload-toggle{min-height:40px}

  /* صفحة المقررات غير الأساسية (issue #92): نفس علاج صف المقرر أعلاه — أربعة أعمدة لا تتسع،
     فتصير سطرين: [الرمز ‖ الساعات] ثم [الاسم والمتطلبات]، ومربع الاختيار عمود جانبي بطول
     السطرين (issue #176): في سطر الرمز وحده كانت منطقة ضغطه (44×44) ستنزل على أول سطر الاسم،
     فيبدّل التحديد من أراد فتح التفاصيل. الفجوة 12px تتسع لامتداد المنطقة أفقياً (11px). */
  .nc-course{
    grid-template-columns:22px auto minmax(0, 1fr);
    grid-template-areas:"chk code hours" "chk main main";
    gap:4px 12px; padding:10px 18px;
  }
  .nc-course .nc-check{grid-area:chk; align-self:center}
  .nc-c-code{grid-area:code; text-align:start}
  .nc-c-h{grid-area:hours; justify-self:end}
  .nc-c-main{grid-area:main}
  .nc-c-name{font-size:13.5px; line-height:1.55}
  .nc-pkg-head{padding:14px 18px 8px}
  .nc-pkg-prog, .nc-pkg-note{margin-inline:18px}
  .nc-intro{padding:12px 15px; line-height:1.9}

  /* Footer (issue #105، وأُعيد ترتيبه لاحقاً): ثلاثة أعمدة سطح المكتب (LinkedIn ‖ مساري ‖
     ملاحظات) كانت تنهار لعمود واحد بثلاث كتل متتالية بفراغات كبيرة — امتداد رأسي طويل بلا
     داعٍ. الحل: صفّان مضغوطان بدل ثلاث كتل — LinkedIn (يسار) وTelegram (يمين) جنباً إلى جنب
     في الصف العلوي، والعلامة التجارية صف مستقل بعرض كامل تحتهما. أول اسم في
     grid-template-areas يقع يمين الشبكة في RTL والأخير يسارها (لا يتبع ترتيب الكتابة LTR
     المعتاد) — لذا "feedback linkedin" يضع LinkedIn يساراً وTelegram يميناً كما يُطلَب. */
  .footer{padding:18px 0 22px}
  .footer-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"feedback linkedin" "brand brand";
    text-align:center; gap:10px 10px;
  }
  .footer-col{align-items:center; gap:2px}
  /* justify-self:end الخاص بسطح المكتب (محاذاة LinkedIn لليسار الفعلي) يُلغى هنا
     — عمودان متجاوران بعرض متساوٍ، فالتمركز داخل كل عمود هو المطلوب لا الدفع لطرف واحد */
  .footer-col-linkedin{justify-self:stretch}
  .footer-col-linkedin .footer-col-title{text-align:center}
  .footer-link{margin-inline:auto}
  /* شعار التذييل صار <img class="footer-logo"> (issue #184) بصنفه الخاص — لا محدِّد svg عام هنا
     إطلاقاً: `.footer-col-brand svg` التقط سابقاً سهم رابط «شكر خاص» فأزاحه (issue #174) */
  .footer-logo{width:36px; height:36px; margin-bottom:6px}
  .footer-col-title{font-size:11.5px}
  .footer-note{font-size:11px}
}

/* ===================== ≤ 640px: تكديس شريط أدوات المسار (issue #121) =====================
   نقطة الكسر مشتقّة من قياس فعلي لا من رقم مستدير: البحث (260px) وزرّا الأدوات (158.6 +
   150.8) وفجوتاهما (12×2) يحتاجون 593.4px ليتشاركوا سطراً واحداً، أي حاوية ≥593.4 ⇒ شاشة
   ≥637px بعد حشوة الحاوية (22×2). دون ذلك كان الصف ينتهي بثلاثة أسطر آخرها زر وحيد يتيم.
   البديل المقصود هنا: [رجوع | العنوان] ثم [البحث] بعرض كامل ثم [خارطة المتطلبات | ماذا لو]
   نصفين — وهو نفس تخطيط الجوال، رُفع سقفه من 520px ليغطي «المنطقة الميتة» 521–640px التي
   لم تكن تحكمها أي قاعدة. يُتحقَّق منه آلياً: npm run check:layout */
@media (max-width: 640px){
  /* الفجوة 8px تسري على كل مدى التكديس لا على ≤520 وحده: حساب نصف العرض أدناه
     (‎calc(50% - 4px)‎) مبنيّ عليها تحديداً، وبفجوة 12px يتجاوز الزرّان السطر
     بمقدار 4px فينزل كلٌّ منهما سطراً مستقلاً بعرض كامل */
  .pt-row{gap:8px}
  /* زر الرجوع يحاذي أول سطر من العنوان بدل أن يطفو في منتصف عنوان متعدد الأسطر */
  #btnBack{align-self:flex-start; order:1}
  /* flex:1 1 0 هو القاعدة العامة في layout.css — هنا الترتيب، وتصفير أرضية العرض (340px)
     لأن الشاشة نفسها قد تضيق عنها فتُحدث تجاوزاً أفقياً لو بقيت */
  .pt-titles{order:2; min-width:0}
  /* هنا وحده يُقصد كسر الصف: البحث يأخذ سطراً كاملاً ثم الزرّان نصفين تحته */
  .search{order:5; flex:1 1 100%; min-width:0; width:100%}
  /* الترتيب الأصغر يأتي أولًا = يمينًا في RTL، فيطابق ترتيب DOM بعد التبديل */
  #btnPrereqMap{order:6}
  #btnWhatIf{order:7}
  #btnWhatIf, #btnPrereqMap{flex:1 1 calc(50% - 4px); min-width:0}
}

/* ===================== ≤ 520px: أضيق الشاشات (360–430px) ===================== */
@media (max-width: 520px){
  /* بطاقة تحديثات الإصدار (#171): زرّا البلاغ والمتابعة بعرض كامل تحت نصّيهما، هدف لمس أوضح */
  .btn.rn-report-btn, .rn-foot .btn{flex:1 1 100%}

  /* 22px×2 هامش من أصل 360 مبالغ فيه — الاسترجاع 12px لكل جانب للمحتوى */
  .container{padding-inline:16px}

  /* الشريط العلوي (issue #203): الشعار 48px و«دربك أوضح» 13px أطول بنحو 16px، وفي صفحة المسار
     ثلاثة أزرار. التضييق هنا يوفّر ~30px فيتّسع الصف من 390px فصاعداً بلا التفاف. المقاسات
     نفسها لا تُمس، والنصّان لا يلتفّان أبداً (التفافهما يضاعف ارتفاع الشريط بصرياً). */
  .brand{padding:4px 0; gap:8px}
  .brand-name, .brand-sub{white-space:nowrap}
  .nav-actions{gap:6px}
  .auth-btn{padding:8px 10px; gap:6px}

  /* الصفحة الرئيسية */
  .opt-card{padding:22px 18px}
  .opt-tag{top:14px; inset-inline-end:16px}
  .dropzone{padding:12px 14px}
  .faq{padding:34px 0 56px}
  .faq-item summary{padding:14px 16px}
  .faq-a{padding:0 16px 16px}

  /* شريط أدوات المسار — أضيق الشاشات: مقاسات فقط، والترتيب والفجوة في كتلة ≤640px أعلاه */
  .path-toolbar{padding:16px 0 4px}
  #btnWhatIf, #btnPrereqMap{padding:10px 8px}
  .pt-title{font-size:17px}

  /* الإحصاءات */
  .statbar{grid-template-columns:1fr 1fr; gap:9px}
  .stat{padding:10px 13px; border-radius:15px}
  .stat-value{font-size:21px}
  .stat-pct{font-size:24px}
  .stat-sub{font-size:11px}
  /* موضع الطالب والتخرج قد يتجاوران بضيق — يُسمح لهما بسطرين بدل قصّ النص */
  .stat-main-foot{font-size:11px; gap:6px 10px}
  .stat-grad{margin-inline-start:0}

  /* دليل المتطلبات: الإجراءات تنزل سطراً كاملاً في الطرف الآخر، والفاصل الرأسي يصير
     خطاً أعلاها — الفاصل الرأسي بلا معنى حين ينكسر الصف (issue #112) */
  .legend{gap:7px}
  .legend-actions{
    flex:1 1 100%; justify-content:flex-end;
    padding-inline-start:0; border-inline-start:none;
    padding-top:7px; border-top:1px solid var(--border);
  }

  /* لوحة ماذا لو وشريط المحاكاة */
  .whatif{padding:16px}
  .simbar{padding:10px 12px}

  /* بطاقات الأترام */
  .term-wrap{padding-inline-start:28px}
  .term-head{padding:13px 15px 9px}
  .term-title{font-size:16px}
  .course{padding:9px 15px}
  .empty-term{padding:12px 15px 15px}
  .term-note{margin:6px 15px 12px; line-height:1.7}

  /* نافذة تفاصيل المقرر: سقف 720px مناسب لسطح المكتب فقط — على الجوال
     تأخذ كامل الارتفاع المتاح، و dvh تستوعب شريط عنوان المتصفح المتغيّر */
  .modal-ov{padding:12px}
  .modal{
    padding:20px; border-radius:18px;
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
  }
  .m-title{font-size:19px}
  .seg button{padding:8px 13px}

  /* نافذة «تعديل» — خطوة 2: أزرار الحالة الأربعة كانت بحجم سطح المكتب فتتزاحم مع اسم
     المقرر، فيلتفّ لعدد أسطر كبير (issue #59). الأزرار تصغر (خط وحشوة) مع بقاء نصها
     كاملاً وترتيبها الأفقي كما هو؛ اسم المقرر يُقيَّد بسطرين ثم يُقطع بعلامة قطع بدل
     الالتفاف بلا حدود. عمود الرمز يضيق قليلاً ليُفسح مساحة إضافية للاسم والأزرار معاً. */
  .bulk-course-seg{grid-template-columns:52px 1fr auto; column-gap:6px}
  .bulk-course-seg .bulk-c-code{font-size:10px}
  .bulk-course-seg .bulk-c-name{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden; font-size:12px; line-height:1.45;
  }
  /* min-height يضمن هدف لمس ≥33px رغم تصغير الخط والحشوة البصريَّين */
  .bulk-seg{
    font-size:9.5px; padding:0 6px; min-height:33px;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* صفحة المقررات غير الأساسية: شريط التأكيد يصير سطرين حتى لا يُسحق نصّه بين الزرّين */
  .nc-course{padding:10px 15px}
  .nc-pkg-head{padding:13px 15px 8px}
  .nc-pkg-title{font-size:15.5px}
  .nc-pkg-prog, .nc-pkg-note{margin-inline:15px}
  .nc-bar-row{flex-wrap:wrap; gap:8px}
  .nc-bar-info{flex:1 1 100%; font-size:12.5px}
  .nc-done-opt{flex:1 1 100%; justify-content:center}
  .nc-bar .btn{flex:1 1 calc(50% - 4px); justify-content:center}
  #viewNonCore{padding-bottom:124px}

  /* شاشة تحليل الملفات */
  .an-card{width:min(420px, calc(100vw - 32px)); padding:24px 20px}

  /* زر «تراجع» داخل التوست: الهامش السالب يوسّع مساحة اللمس (29×25 ← 53×41)
     دون أي تغيير في الشكل أو في مقاس التوست نفسه */
  .toast-undo-btn{padding:8px 12px; margin:-8px -12px}
}

/* ===================== ≤ 380px: فئة 360px ===================== */
@media (max-width: 380px){
  /* الشريط العلوي (issue #203): في صفحة المسار لا يتّسع الصف لنص «تسجيل الدخول» حتى بعد تضييق
     ≤520px (كان يلتف لسطرين على main أصلاً: زر بارتفاع 57px). يبقى الزر بأيقونته، والنص مخفيّ
     بصرياً فقط فيبقى اسمه لقارئ الشاشة. وكذلك اسم الحساب في مكانه نفسه بعد الدخول (الصورة تبقى). */
  .auth-label, .auth-name{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
  }
  /* أيقونة وحدها: مربع 40×40 كجاريه .icon-btn */
  .auth-btn{padding:0; width:40px; height:40px}
}