/* منظّمي — «سماء واحدة» (design-reference/identity/ui.css .sky*): سماء ثابتة خلف كل الصفحات يرسمها js/sky.js.
   تحت كل شيء (z-index -1)، والبطاقات فوقها بلونها الصلب. الانزياح والتعتيم transform/opacity فقط، ولا حركة تتكرر.
   «أسود خالص» يطفئ الدرب والغبار (--band-a و--dust-a صفر) ونجومك 70%. */
/* الطول بلا لوحة المفاتيح في تطبيق الآيفون (--app-h من native/ios.js)، فلا تنكمش السماء معها */
.sky { position: fixed; inset: 0 0 auto; height: var(--app-h, 100%); z-index: -1; overflow: hidden; pointer-events: none; direction: ltr;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-horizon)); }
.sky-pan { position: absolute; inset: 0 0 0 -30%; transform: translateX(calc(var(--pan, 0) * 1.5vw)); transition: transform var(--dur-2) var(--ease-out); }
/* درب التبانة: صورة الطبقة نفسها من النموذج بضبابيتها وحاشية 54px حولها (فالصندوق أوسع من inset: -10% 0 بقدرها)، ثم نفس التدوير */
.sky-band { position: absolute; inset: -16.4% -10.65%; opacity: var(--band-a); background: url(/img/band-v1.webp) 0 0 / 100% 100% no-repeat;
  transform: rotate(-28deg) scaleY(0.55); }
.sky-dust, .sky-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-dust { fill: var(--dust); opacity: var(--dust-a); }
.sky-stars { opacity: var(--stars-a); }
.sky-stars stop { stop-color: var(--star); stop-opacity: 0.55; }
.sky-stars stop + stop { stop-opacity: 0; }
.sky-stars .c { fill: var(--star); }
/* التعتيم حسب عمق الصفحة (js/sky.js) */
.sky-dim { position: absolute; inset: 0; background: var(--sky-0); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }

/* المحتوى يتلاشى خلف شريط الحالة وشريط التنقل العائم (الجوال؛ والآيباد العمودي تحت فقط) */
.topfade, .bottomfade { position: fixed; inset-inline: 0; z-index: 15; pointer-events: none; }
.topfade { top: 0; height: calc(env(safe-area-inset-top, 0px) + 17px); background: linear-gradient(180deg, var(--sky-top) 45%, transparent); }
.bottomfade { bottom: 0; height: 150px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sky-horizon) 90%, transparent) 45%, var(--sky-horizon) 72%); }
.bottomfade.tall { height: 230px; }
@media (min-width: 768px) { .topfade { display: none; } }
@media (min-width: 1024px) { .bottomfade { display: none; } }


@media (prefers-reduced-motion: reduce) {
  .sky-pan { transform: none; transition: none; }
  .sky-dim { transition-duration: var(--dur-1); }
}
@media print { .sky, .topfade, .bottomfade { display: none; } }