/* ═══════════════════════════════════════════════════════════════
   شاشتا المحجورين والأفضلية المقيسة
   ═══════════════════════════════════════════════════════════════

   ⚠️ مبدأ حاكم لهذه الشاشتين: **الرقم بطوله لا بلونه**.
      شريط الأفضلية يُقرأ بالطول، فيصل معناه إلى من لا يميّز
      الألوان وإلى من يقرأ في شمس الظهيرة على جوال.
   ═══════════════════════════════════════════════════════════════ */

/* بطاقة ملاحظة — سياق محايد قبل القوائم.
   ⚠️ رمادية عمداً: لو أخذت لون التحذير لقُرئ الشرحُ إنذاراً. */
.note-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--ui-pad, var(--s3));
  display: flex; flex-direction: column; gap: 4px;
  margin: var(--s2) 0;
}

/* شريط الأفضلية — المقياس ×0 إلى ×5.
   ⚠️ يُقصّ عند المئة في الـJS لا هنا: شريطٌ يفيض إطارَه يوهم
      بأفضلية أكبر مما قِيس. */
.edge-bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--border-2);
  overflow: hidden;
  margin: 6px 0 2px;
}
.edge-bar > i {
  display: block; height: 100%;
  border-radius: inherit;
  background: var(--grad);
  transform-origin: right center;
  animation: edgeGrow .5s cubic-bezier(.2, .7, .3, 1) both;
}

/* ⚠️ الحركة تنمو من الصفر: امتلاءٌ فوري يُقرأ حالةً ثابتة،
      والنمو يقول «هذا مقياس». */
@keyframes edgeGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* صفّ وسوم صغير */
.tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}

/* بطاقة عقوبة — الحدّ الجانبي وحده يكفي.
   ⚠️ لا نصبغ الخلفية كلّها: بطاقةٌ حمراء كاملة تصرخ، والمطلوب
      أن تُقرأ لا أن تُفزع. */
.rowcard.warn {
  border-color: var(--down);
  box-shadow: inset 3px 0 0 var(--down);
}

/* عنوان فرعي داخل الشاشة */
h3.sub {
  margin: var(--s4) 0 var(--s2);
  font-size: .95rem; font-weight: 700;
  color: var(--text-2);
}

/* ═══ دخول متدرّج لبطاقات القوائم ═══
   ⚠️ التأخير يتوقّف عند العنصر الثامن: قائمةٌ من ثلاثين بطاقة
      بتدرّج متصل تُنهي حركتها بعد ثانيتين، فيبدو التطبيق بطيئاً
      لا أنيقاً. */
#blocked-slot .rowcard,
#edge-slot .rowcard {
  animation: cardIn .34s cubic-bezier(.2, .7, .3, 1) both;
}
#blocked-slot .rowcard:nth-child(1),
#edge-slot .rowcard:nth-child(1) { animation-delay: .02s; }
#blocked-slot .rowcard:nth-child(2),
#edge-slot .rowcard:nth-child(2) { animation-delay: .05s; }
#blocked-slot .rowcard:nth-child(3),
#edge-slot .rowcard:nth-child(3) { animation-delay: .08s; }
#blocked-slot .rowcard:nth-child(4),
#edge-slot .rowcard:nth-child(4) { animation-delay: .11s; }
#blocked-slot .rowcard:nth-child(5),
#edge-slot .rowcard:nth-child(5) { animation-delay: .14s; }
#blocked-slot .rowcard:nth-child(6),
#edge-slot .rowcard:nth-child(6) { animation-delay: .17s; }
#blocked-slot .rowcard:nth-child(7),
#edge-slot .rowcard:nth-child(7) { animation-delay: .20s; }
#blocked-slot .rowcard:nth-child(n+8),
#edge-slot .rowcard:nth-child(n+8) { animation-delay: .22s; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ⚠️ احترام تفضيل تقليل الحركة **إلزامي**: من فعّله قد يكون
      حسّاساً للدوار طبّياً، لا مجرّد مفضّلٍ للهدوء. */
@media (prefers-reduced-motion: reduce) {
  .edge-bar > i,
  #blocked-slot .rowcard,
  #edge-slot .rowcard {
    animation: none !important;
  }
}