/* منظّمي — المكوّنات المشتركة بروح iOS (خطة الواجهة، المرحلة 1): ما أُضيف فوق base.css وcomponents.css.
   حبة التبويب المنزلقة، النافذة لوحاً سفلياً على الجوال، التوست فوق الشريط العائم. قيم نظام التصميم فقط. */

/* ── التبويبات: حبة منزلقة تحت التبويب النشط (js/ui-kit.js يضعها ويحرّكها) ── */
.tab-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: calc(var(--radius-md) - 3px);
  background-color: var(--bg-surface-1);
  box-shadow: var(--shadow-soft);
  pointer-events: none;
  transition: transform var(--dur-2) var(--ease-spring);
}
/* الحبة تحل محل خلفية التبويب النشط؛ دونها (قبل تشغيل السكربت) تبقى الخلفية الثابتة */
.tab-bar.has-pill .tab-btn.active { background-color: transparent; box-shadow: none; }
.tab-bar.course-tabs .tab-pill { border-radius: var(--radius-md); }

/* ── التوست: كبسولة عائمة؛ على الجوال في المنتصف فوق الشريط السفلي العائم ── */
@media (max-width: 767px) {
  .toast-container {
    inset-inline: var(--space-4);
    inset-block-end: calc(88px + env(safe-area-inset-bottom));
    align-items: center;
  }
  .toast { width: 100%; }
}

/* ── النوافذ على الجوال: لوح سفلي بمقبض، يُسحب لأسفل للإغلاق (js/ui-kit.js) ── */
@media (max-width: 767px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-container {
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: none;
    box-shadow: var(--shadow-sheet);
    opacity: 1;
    transform: translateY(100%);
    transition: transform var(--dur-3) var(--ease-sheet);
  }
  .modal-overlay.open .modal-container { transform: none; }
  .modal-container::before {
    content: '';
    flex-shrink: 0;
    width: 40px;
    height: 5px;
    margin: var(--space-2) auto 0;
    border-radius: var(--radius-pill);
    background-color: var(--border-strong);
  }
  .modal-container.is-dragging { transition: none; }
  .modal-header { touch-action: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tab-pill, .toast, .modal-container, .modal-overlay, .card, .tag-chip { transition: none; }
  .btn:active:not(:disabled), .card.clickable:active, .card.clickable:hover, button.tag-chip:active, a.tag-chip:active { transform: none; }
  .backup-reminder { animation: none; }
}