/* ════════════════════════════════════════════════════════════════════════════
 * atheer-auth-fix.css — شاشة الدخول تُمرَّر حين تقصر النافذة
 *
 * العيب (قِيس عند ٩٠٠ و٤٢٠ و٣٠٠ بكسل ارتفاعًا):
 *   `.auth-page { position: fixed; inset: 0; overflow: hidden }`
 *   ⇒ الصفحة **مثبّتة بحجم النافذة** وارتفاعها = الارتفاع المرئيّ دائمًا،
 *     و`html`/`body` كلاهما `overflow: hidden`. فالنتيجة:
 *     `scrollHeight === clientHeight` عند **كلّ** ارتفاع ⇒ لا تمرير إطلاقًا.
 *
 * والأثر ليس تجميليًّا: على نافذةٍ قصيرة يُقتطع المحتوى و**لا يستطيع
 * المستخدم الوصول إلى زرّ الدخول**. أي أنّ الشاشة الوحيدة التي لا بديل
 * عنها تصير غير قابلة للاستعمال.
 *
 * الإصلاح: تبقى مثبّتةً (لتغطّي الشاشة وتعزل خلفيّتها المتحرّكة) لكنّها
 * **تمرّر رأسيًّا** حين يتجاوز محتواها ارتفاعها. والأفقيّ يبقى محجوبًا
 * لأنّ الزخارف الخلفيّة تتجاوز الحوافّ عمدًا.
 * ════════════════════════════════════════════════════════════════════════════ */
.auth-page {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}
/* الشبكة الداخليّة تكبر بمحتواها بدل أن تُضغط في ارتفاعٍ ثابت. */
.auth-page > .auth-grid,
.auth-page > .auth-topbar,
.auth-page > .auth-footer { min-block-size: 0; }
.auth-grid { align-items: start; }

/* على النوافذ القصيرة تُخفَّض المسافات بدل أن يُقتطع المحتوى — فالتمرير
 * حلٌّ أخير لا أوّل. */
@media (max-height: 720px) {
  /* 🔴 القصّ مقيسٌ بالبكسل: `.auth-grid` ارتفاعه ٢٢٤ ومحتواه ٣١٥ مع
   * `overflow: hidden` ⇒ يُقتطع ٩١px، وزرّ الدخول عند ٢٥٧ يقع خلف خطّ
   * القصّ ٢٣٦. فلا يراه المستخدم ولا يصل إليه.
   *
   * والعلاج **تحويل الصفحة إلى تدفّقٍ عاديّ** عند القصر بدل شبكةٍ بصفوفٍ
   * محسوبة: الأبناء يأخذون ارتفاعهم الطبيعيّ، والصفحة تمرّر. الشبكة تصلح
   * لشاشةٍ واسعة وتصير قفصًا في شاشةٍ قصيرة. */
  .auth-page { display: block; align-content: start; padding-block: 12px; }
  .auth-grid { overflow: visible; block-size: auto; min-block-size: 0; }
  .auth-hero__stats { gap: 10px; }
  .auth-card { padding: 20px; }
}
@media (max-height: 520px) {
  /* الجانب التعريفيّ يُطوى: البطاقة هي المهمّة، والوصف يمكن أن ينتظر. */
  .auth-grid { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
}