/* ==================================================================
   Syriana Connect — طبقة الأساس
   ما ترثه الصفحة قبل أن يُركّب مكوّن واحد.

   لا قيمة مكتوبة يدوياً هنا — توكنز فقط.
   لا left/right مطلقة — خصائص منطقية فقط، فالبوابة عربية اليوم
   وقد تُباع لمن يشغّلها بالإنجليزية غداً بلا سطر واحد يتغيّر.
   ================================================================== */

.sy *,
.sy *::before,
.sy *::after{box-sizing:border-box}

/* الجذر. كل ما تحته يعيش داخل .sy، فلا تسرّب إلى صفحات UISP
   التي لم نعد بناءها بعد.

   `body.sy` لا `.sy` وحدها: main.min.css يحمل
   `.panel-container--dashboard .panel-container__panel,body.client-zone{background:#fff}`
   بنوعية 0,1,1، و`.sy` وحدها 0,1,0 فتخسر. النتيجة كانت صفحة بيضاء
   بنص فاتح في الوضع الداكن — أي نص غير مقروء — بينما الهيدر والشريط
   السفلي أسودان. ظهر في لقطة شاشة حقيقية لا في قراءة الكود.
   0,1,1 مقابل 0,1,1 يحسمه ترتيب التحميل، وطبقتنا آخر ورقة. */
body.sy{
  font-family:var(--font-sans);
  font-size:var(--type-body-size);
  font-weight:var(--type-body-weight);
  line-height:var(--leading-body);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  /* أرقام لاتينية بعرض ثابت: العدّادات والأسعار لا ترتجف وهي تتغيّر. */
  font-variant-numeric:tabular-nums;
}

/* ---------- التراتب ------------------------------------------------
   الحجم والوزن يتحرّكان معاً. لا مستوى فرعي أثقل من الذي فوقه —
   وهذا هو العطل C3 مصلحاً من جذره لا بقاعدة تصحيح. */
.sy h1,.sy h2,.sy h3,.sy h4{
  margin:0;
  color:var(--text-strong);
  line-height:var(--leading-tight);
  text-wrap:balance;
}
.sy h1{font-size:var(--type-h1-size);font-weight:var(--type-h1-weight)}
.sy h2{font-size:var(--type-h2-size);font-weight:var(--type-h2-weight)}
.sy h3{font-size:var(--type-h3-size);font-weight:var(--type-h3-weight)}
.sy h4{font-size:var(--type-body-size);font-weight:var(--weight-semibold)}

.sy p{margin:0;text-wrap:pretty}
.sy ul,.sy ol{margin:0;padding:0;list-style:none}

.sy a{
  color:var(--text-link);
  text-decoration:underline;
  text-underline-offset:4px;
}
.sy a:hover{color:var(--surface-action-hover)}
[data-theme='dark'] .sy a:hover{color:var(--color-primary-200)}

.sy small{font-size:var(--type-label-size)}
.sy strong,.sy b{font-weight:var(--weight-semibold)}
.sy hr{border:0;border-top:1px solid var(--surface-border);margin:var(--space-6) 0}

/* ---------- التركيز -------------------------------------------------
   إطار واحد لكل عنصر تفاعلي، ولا عنصر يفقده. :focus-visible وحده
   حتى لا يرى مستخدم الفأرة إطاراً لم يطلبه. */
.sy :focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:var(--radius-control);
}

/* ---------- الاتجاه واللغة -----------------------------------------
   القيم اللاتينية والتقنية تبقى من اليسار داخل الجملة العربية، وإلا
   أعاد خوارزم الاتجاه ترتيبها وقرأ المشترك رقماً غير الذي على الشاشة.
   <bdi> هو الأداة الصحيحة وهي الافتراض في كل قوالبنا. */
.sy bdi{unicode-bidi:isolate}
.sy code,.sy kbd,.sy samp,.sy .sy-mono{
  font-family:var(--font-mono);
  direction:ltr;
  unicode-bidi:isolate;
  font-size:var(--type-label-size);
}

/* اسم يخلط العربية باللاتينية يأخذ اتجاهه من أول حرف قوي فيه. */
.sy-plaintext{unicode-bidi:plaintext}

/* ---------- خدمات ---------------------------------------------------- */
/* السلسلة كلها تحتاج min-inline-size:0 حتى يصل التقييد إلى
   .sy-scroll-x. بدونها يتوقّف التقييد عند أول عنصر flex. */
.sy-stack > *,
.sy-card,
.sy-card__body{min-inline-size:0}

.sy-visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* يظهر للوحة المفاتيح وحدها: «تخطَّ إلى المحتوى». */
.sy-skip:focus{
  position:fixed;inset-inline-start:var(--space-4);inset-block-start:var(--space-4);
  width:auto;height:auto;clip:auto;z-index:1000;
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-control);
  background:var(--surface-action);color:var(--text-on-action);
}

.sy img,.sy svg{max-width:100%;height:auto}

/* كل بلوك يُحمَّل غير متزامن يحجز ارتفاعه مسبقاً عبر --sy-reserve،
   فلا يقفز التخطيط تحت إصبع المشترك وهو يقرأ. القيمة تُكتب في
   القالب بجانب المكوّن لا في ورقة الأنماط. */
.sy [data-sy-reserve]{min-block-size:var(--sy-reserve,0)}

/* حاوية أفقية لكل ما قد يتجاوز عرض الشاشة — جدول أو رسم أو سطر
   طويل. الصفحة نفسها لا تتمرّر أفقياً أبداً. */
/* max-inline-size:100% ليست زائدة: عنصر flex أو grid يأخذ
   min-width:auto افتراضاً، فجدولٌ عرضه 751px داخل .sy-card داخل
   .sy-stack يوسّع أجداده كلّهم بدل أن يتمرّر داخل نفسه — وتتمرّر
   الصفحة أفقياً. قيس على صفحة الفواتير بعرض 390px. */
/* position:relative ليس زينة. أي سليل absolute بلا أبٍ positioned
   يتعلّق بـbody لا بهذه الحاوية، فيخرج من قصّها ويمدّ الصفحة كلها:
   .sy-visually-hidden داخل الجدول (شرح العمود لقارئ الشاشة) كان يهبط
   عند إحداثيات الجدول العريض فيصير المستند 716px على شاشة 390px،
   والصفحة تتمرّر أفقياً رغم أن الجدول محبوس صحيحاً. */
.sy-scroll-x{
  position:relative;
  overflow-x:auto;
  max-inline-size:100%;
  -webkit-overflow-scrolling:touch;
}