/* ═══════════════════════════════════════════════════════════════════
   نظام خط تنصيص — thmanyah Sans
   المصدر الوحيد لتعريف الخط في المشروع. لا تكرّر @font-face في أي صفحة.

   الملفات محلية في brand/fonts/ ولا تُجلب من أي نطاق خارجي.
   الأوزان الثلاثة هي المستعملة فعلاً في التصميم: 400 و500 و700.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "thmanyah Sans";
  src: url("fonts/thmanyahsans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "thmanyah Sans";
  src: url("fonts/thmanyahsans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "thmanyah Sans";
  src: url("fonts/thmanyahsans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* عائلة احتياطية معايَرة على مقاييس ثمانية، تمنع قفز التخطيط في
   اللحظة بين أول رسم ووصول ملف الخط. */
@font-face {
  font-family: "thmanyah Sans Fallback";
  src: local("Arial");
  ascent-override: 96.94%;
  descent-override: 24.23%;
  size-adjust: 103.16%;
}

/* ── الحرف المرسل (ss01) ───────────────────────────────────────────
   يُطبَّق من هنا وحده. لا تضف font-feature-settings في أي مكوّن. */

.mursal { font-feature-settings: "ss01"; }

/* العناوين ترث الإرسال. المتن لا يحمله: الحروف الممتدة تكسر إيقاع
   القراءة في الفقرات. */
h1, h2, h3, h4, h5, h6 { font-feature-settings: "ss01"; }

/* استثناء: ناتج الاستخراج نصُّ المستخدم نفسه، وقد يكون آية أو حديثاً
   أو نصاً نظامياً. رسمه شأن المستند لا شأن الموقع، فيُترك كما ورد. */
.prose-container,
.prose-container h1, .prose-container h2, .prose-container h3,
.prose-container h4, .prose-container h5, .prose-container h6,
#textOutput,
#originalText {
  font-feature-settings: normal;
}

/* ═══════════════════════════════════════════════════════════════════
   قشرة الصفحة — عرض وهوامش موحّدة
   كان الهيدر يستعمل max-w-6xl وبقية الأقسام container الافتراضي، فينتج
   ثلاثة عروض مختلفة على الصفحة الواحدة. والأسوأ أن container في Tailwind
   يساوي عرض نقطة التوقف نفسها، فعند 1280px و1536px بالضبط يتساوى مع
   عرض النافذة ويصير الهامش صفراً — والمحتوى يلاصق حافة الشاشة.
   قشرة واحدة بعرض ثابت وحشوة لا تنهار مهما كان عرض النافذة.
   ═══════════════════════════════════════════════════════════════════ */
.page-shell {
  /* لا نتّكل على preflight الخاص بـTailwind: هو نفسه يأتي من CDN خارجي،
     وبدونه تُضاف الحشوة إلى العرض فتفيض القشرة خارج الشاشة. */
  box-sizing: border-box;
  width: 100%;
  max-width: 72rem;                          /* 1152px */
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* قشرة أعرض للأقسام التي تحتاج مساحة (الجداول والمقارنات) */
.page-shell-wide {
  box-sizing: border-box;
  width: 100%;
  max-width: 80rem;                          /* 1280px */
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* ── شبكة أمان للحركة ───────────────────────────────────────────────
   aos.css (من CDN خارجي) يخفي كل عنصر data-aos بـopacity:0 وينتظر
   aos.js ليُظهره. فإن وصل الأول وتعثّر الثاني — وهو وارد مع أي عطل أو
   حجب — تبقى أقسام كاملة بيضاء بلا محتوى. هذا يعيدها. */
html.aos-unavailable [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
  animation: none !important;
}