/* ═══════════════ 🎞 حركات مقصودة فقط (19 سبتمبر 2026 — find-animation-opportunities / animate) ═══════════════
   لوحة شغل يومي = أقل حركة لا أكثر. كل حركة هنا لها غرض مسمّى، تحت 300ms، transform/opacity فقط، وتحترم «تقليل الحركة».

   ✅ المقبول:  القائمة المنسدلة (من زرّها) · خلفية النافذة/اللوحة (تلاشٍ) · الأقسام القابلة للطي · مؤشر «جاري التنفيذ» ·
               علامة ✓ بإشعار النجاح · سحب اللوحة السفلية للإغلاق وخروج الإشعار من حافته (motion.js).
   ❌ المرفوض عمداً (لا تضفها):
      - لوحة الأوامر Ctrl+K والتنقل بين الأقسام: تُستخدم عشرات/مئات المرات باليوم → بلا حركة (الدخول المتدرّج خُفّض لأول 6 عناصر فقط).
      - رسم الخطوط البيانية تدريجياً وعدّ الأرقام مع كل تحديث: بيانات يقرأها المضيف ليقرر — الحركة تعيق.
      - «اضغط مطوّلاً للحذف»: الحذف محمي أصلاً بنافذة تأكيد؛ حاجزان = احتكاك بلا فائدة.
      - ارتداد/نبض على البطاقات والأسعار، وحركات مع التمرير: زينة على واجهة معلومات كثيفة. */

html[data-skin="calm"] { --ease-drawer: cubic-bezier(.32, .72, 0, 1); }

@media (prefers-reduced-motion: no-preference) {
  /* ─── 1) القائمة المنسدلة (قائمة المستخدم): تكبر من زرّها لا من وسطها — اتساق مكاني · أحياناً · 160ms ─── */
  html[data-skin="calm"] .menu { transform-origin: top left;   /* الواجهة RTL: زر المستخدم بأقصى اليسار والقائمة معلّقة تحته */
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
  @starting-style { html[data-skin="calm"] .menu { opacity: 0; transform: scale(.96) translateY(-4px); } }

  /* ─── 2) خلفية النافذة واللوحة تتلاشى بدل ما تقفز — منع تغيير مفاجئ · أحياناً · 180ms (النافذة نفسها تبقى من الوسط) ─── */
  html[data-skin="calm"] :is(.scrim, .modal-host, #nav-scrim) { transition: opacity 180ms ease; }
  @starting-style { html[data-skin="calm"] :is(.scrim, .modal-host, #nav-scrim) { opacity: 0; } }

  /* ─── 3) الأقسام القابلة للطي (details): تنفتح بارتفاعها بدل القفز — بيان حالة · أحياناً · 220ms (تحسين تدريجي: المتصفح القديم يقفز كما كان) ─── */
  html[data-skin="calm"] { interpolate-size: allow-keywords; }
  html[data-skin="calm"] details::details-content { block-size: 0; opacity: 0; overflow: clip;
    transition: block-size 220ms var(--ease-out), opacity 180ms ease, content-visibility 220ms allow-discrete; }
  html[data-skin="calm"] details[open]::details-content { block-size: auto; opacity: 1; }
  html[data-skin="calm"] summary { cursor: pointer; }
  html[data-skin="calm"] details > summary::marker { color: var(--text-3); }

  /* ─── 4) شريط التحديد بالتقويم وإشعار النجاح: علامة ✓ تُرسم مرة — متعة صغيرة بلحظة إنجاز (تطبيق أسعار، حفظ) · 260ms ─── */
  html[data-skin="calm"] .toast.success::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: url("/static/vendor/check.svg") center / contain no-repeat; mask: url("/static/vendor/check.svg") center / contain no-repeat;
    animation: ok-pop 260ms var(--ease-out) 80ms backwards; }
}
@keyframes ok-pop { from { opacity: 0; transform: scale(.6) rotate(-12deg); } to { opacity: 1; transform: none; } }

/* ─── 5) «جاري التنفيذ…»: مؤشر دوران سريع (0.6s) — الأسرع يخلّي الانتظار يحس أقصر. يبقى حتى مع «تقليل الحركة» لأنه بيان حالة، لكن أبطأ ─── */
html[data-skin="calm"] .btn.is-busy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-direction: row-reverse; }   /* ::after + row-reverse: المؤشر قبل النص (::before محجوز للمعة الزر الأساسي) */
html[data-skin="calm"] .btn.is-busy::after { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-inline-start-color: transparent; opacity: .85; animation: spin .6s linear infinite; }
@media (prefers-reduced-motion: reduce) { html[data-skin="calm"] .btn.is-busy::after { animation-duration: 1.4s; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── 6) مقبض اللوحة السفلية: منطقة لمس أكبر وإشارة إنه ينسحب ─── */
@media (max-width: 767px) {
  html[data-skin="calm"] .panel-handle { position: relative; width: 44px; height: 5px; margin-top: 8px; cursor: grab; }
  html[data-skin="calm"] .panel-handle::after { content: ""; position: absolute; inset: -14px -60px; }        /* هدف لمس 33×164 فوق المقبض النحيف */
  html[data-skin="calm"] .panel-head { cursor: grab; }
  html[data-skin="calm"] .panel { will-change: transform; }
}