/* =====================================================================
   مرصدك — base.css
   إعادة ضبط حديثة + الطبقة النصية الأساسية + عناصر HTML الخام.
   يعتمد على tokens.css. لا يحتوي أي صنف مكوّن (components.css يفعل ذلك).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) إعادة الضبط (Reset)
   --------------------------------------------------------------------- */

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

*{margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-block-start:calc(var(--header-h) + var(--sp-5));
  -moz-tab-size:2;
  tab-size:2;
}

/* احترام تفضيل تقليل الحركة على مستوى المستند */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

body{
  min-block-size:100vh;
  background-color:var(--cream-100);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  font-weight:var(--fw-regular);
  line-height:var(--lh-body);
  letter-spacing:var(--tracking);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
  overflow-x:hidden;
}

/* الاتجاه: المستند بالكامل RTL — نضمن ذلك حتى لو نسي القالب السمة */
html[dir='rtl'] body{direction:rtl}

/* ---------------------------------------------------------------------
   2) العناوين والنصوص
   --------------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  line-height:var(--lh-tight);
  letter-spacing:var(--tracking);
  color:var(--ink);
  text-wrap:balance;
}

h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg)}
h5{font-size:var(--fs-md)}
h6{font-size:var(--fs-base)}

p{line-height:var(--lh-body);text-wrap:pretty}

small{font-size:var(--fs-sm)}

strong,b{font-weight:var(--fw-bold)}

em,i{font-style:normal;color:var(--violet-600)}   /* العربية لا تميل — نميّز بالّلون */

mark{
  background:var(--violet-100);
  color:var(--navy-800);
  padding-inline:.18em;
  border-radius:4px;
}

abbr[title]{text-decoration:underline dotted;cursor:help}

code,kbd,samp,pre{
  font-family:var(--font-mono);
  font-size:.92em;
  direction:ltr;
  unicode-bidi:isolate;
}

code{
  background:var(--violet-50);
  color:var(--violet-700);
  padding:.14em .42em;
  border-radius:6px;
  border:1px solid var(--line);
}

pre{
  background:var(--navy-900);
  color:var(--cream-100);
  padding:var(--sp-4);
  border-radius:var(--r-md);
  overflow-x:auto;
  line-height:1.6;
}

pre code{background:none;border:0;color:inherit;padding:0}

kbd{
  background:var(--white);
  border:1px solid var(--line);
  border-block-end-width:2px;
  border-radius:6px;
  padding:.12em .45em;
  font-size:.85em;
  box-shadow:var(--shadow-xs);
}

blockquote{
  font-family:var(--font-serif);
  font-size:var(--fs-md);
  line-height:var(--lh-prose);
  color:var(--navy-700);
  border-inline-start:3px solid var(--violet-500);
  padding-inline-start:var(--sp-4);
}

hr{
  border:0;
  block-size:1px;
  background:var(--line);
  margin-block:var(--sp-5);
}

/* أرقام لاتينية مستقرّة في الجداول والإحصاءات */
.tnum,
time,
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* عزل اتجاه المقاطع اللاتينية داخل نص عربي */
.ltr{direction:ltr;unicode-bidi:isolate;text-align:start}
.rtl{direction:rtl;unicode-bidi:isolate}

/* ---------------------------------------------------------------------
   3) الروابط
   --------------------------------------------------------------------- */

a{
  color:var(--violet-600);
  text-decoration:none;
  text-underline-offset:.28em;
  text-decoration-thickness:1.5px;
  transition:color var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease);
}

a:hover{color:var(--violet-500);text-decoration:underline}

a:active{color:var(--violet-700)}

/* روابط داخل نص جارٍ خارج .prose تبقى واضحة دون خط دائم */
a[href^='http']:not([class])::after{content:''}

/* ---------------------------------------------------------------------
   4) القوائم
   --------------------------------------------------------------------- */

ul,ol{padding-inline-start:1.35em}

ul ul,ol ol,ul ol,ol ul{margin-block-start:var(--sp-2)}

li{margin-block-end:var(--sp-2);line-height:var(--lh-body)}

li::marker{color:var(--violet-500)}

/* قوائم بلا زخرفة (التنقّل، الشبكات، بطاقات مرتّبة) */
ul[role='list'],
ol[role='list'],
.list-reset{list-style:none;padding:0;margin:0}

.list-reset li{margin:0}

dl{line-height:var(--lh-body)}
dt{font-weight:var(--fw-bold);color:var(--navy-800)}
dd{margin-inline-start:0;color:var(--ink-soft);margin-block-end:var(--sp-3)}

/* ---------------------------------------------------------------------
   5) الوسائط
   --------------------------------------------------------------------- */

img,svg,video,canvas,audio,iframe,embed,object{
  display:block;
  max-inline-size:100%;
}

img,video{block-size:auto;object-fit:cover}

img{
  color:var(--muted);              /* لون نص alt عند فشل التحميل */
  font-size:var(--fs-sm);
}

/* خلفية مؤقتة أثناء التحميل — تُستثنى منها ملفات SVG (الشعار والصور البديلة)
   لأنها شفافة بطبيعتها وتظهر كمستطيل كريمي فوق الخلفيات الداكنة. (VIS-02) */
img:not([src*=".svg"]){background-color:var(--cream-200)}

svg{flex-shrink:0}

/* fill:none هو الافتراضي لأيقونات الـstroke، لكن يجب ألّا يتغلّب على
   سمة fill المكتوبة داخل الأيقونة نفسها (أيقونات العلامات). (REQ-01/VIS-01) */
svg:not([fill]){fill:none}

/* أيقونات SVG الداخلية: stroke 1.6 بلون النص المحيط */
svg[data-icon]{
  inline-size:1.25em;
  block-size:1.25em;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  vertical-align:-.2em;
}

figure{margin:0}

figcaption{
  font-size:var(--fs-sm);
  color:var(--muted);
  margin-block-start:var(--sp-2);
  line-height:var(--lh-snug);
}

/* ---------------------------------------------------------------------
   6) الجداول الخام
   --------------------------------------------------------------------- */

table{
  border-collapse:collapse;
  inline-size:100%;
  text-align:start;
}

th{
  text-align:start;
  font-weight:var(--fw-bold);
  color:var(--navy-800);
}

td,th{padding:var(--sp-3);vertical-align:middle}

caption{
  caption-side:bottom;
  font-size:var(--fs-sm);
  color:var(--muted);
  padding-block-start:var(--sp-3);
  text-align:start;
}

/* ---------------------------------------------------------------------
   7) النماذج — الطبقة الخام (الأنماط الكاملة في components.css)
   --------------------------------------------------------------------- */

input,button,textarea,select,optgroup{
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
}

button{
  background:none;
  border:0;
  cursor:pointer;
  color:inherit;
  text-align:inherit;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled{cursor:not-allowed}

textarea{resize:vertical;min-block-size:120px}

select{cursor:pointer}

label{display:inline-block}

fieldset{border:0}

legend{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  padding:0;
}

/* إزالة أسهم الأرقام في المتصفحات المبنية على WebKit وFirefox */
input[type='number']{-moz-appearance:textfield;appearance:textfield}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button{-webkit-appearance:none}

/* الحقول الزمنية تُكتب لاتينياً دائماً */
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='tel'],
input[type='email'],
input[type='url'],
input[type='number']{direction:ltr;text-align:start}

::placeholder{color:var(--muted);opacity:1}

/* التعبئة التلقائية في كروم لا تكسر الخلفية الكريمية */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--white) inset;
  caret-color:var(--ink);
}

progress{accent-color:var(--violet-500)}

[type='checkbox'],
[type='radio'],
[type='range']{accent-color:var(--violet-500)}

/* ---------------------------------------------------------------------
   8) التركيز والوصولية
   --------------------------------------------------------------------- */

:focus{outline:none}

:focus-visible{
  outline:2px solid var(--violet-500);
  outline-offset:2px;
  border-radius:4px;
}

/* عناصر مستديرة تحتفظ باستدارتها في حلقة التركيز */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{border-radius:inherit}

input:focus-visible,
select:focus-visible,
textarea:focus-visible{outline-offset:1px}

/* نص للقارئات الشاشية فقط.
   !important مقصود: هذه أداة إخفاء بصري تُوضع أحياناً على عناصر تحمل
   أصنافاً لاحقة أقوى ترتيباً (مثل textarea.textarea.sr-only في نماذج
   الأدمن) فتفرض عليها inline-size:100% وmin-block-size، ما ينفخ عرض
   المستند 320px خارج الشاشة. (RESP-09) */
.sr-only{
  position:absolute !important;
  inline-size:1px !important;
  block-size:1px !important;
  min-inline-size:0 !important;
  min-block-size:0 !important;
  max-inline-size:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0 !important;
}

/* يظهر عند التركيز (مثل رابط التخطّي) */
.sr-only--focusable:focus,
.sr-only--focusable:focus-visible{
  position:static !important;
  inline-size:auto !important;
  block-size:auto !important;
  max-inline-size:none !important;
  margin:0 !important;
  overflow:visible !important;
  clip:auto;
  clip-path:none;
  white-space:normal;
}

/* رابط تخطّي إلى المحتوى — أول عنصر في <body> */
.skip-link{
  position:absolute;
  inset-block-start:-100%;
  inset-inline-start:var(--sp-4);
  z-index:var(--z-max);
  background:var(--navy-800);
  color:var(--white);
  font-weight:var(--fw-bold);
  padding:var(--sp-3) var(--sp-5);
  border-radius:0 0 var(--r-md) var(--r-md);
  box-shadow:var(--shadow-lg);
  transition:inset-block-start var(--dur-2) var(--ease);
}

.skip-link:focus,
.skip-link:focus-visible{
  inset-block-start:0;
  color:var(--white);
  text-decoration:none;
  outline:2px solid var(--violet-300);
  outline-offset:-4px;
}

/* ---------------------------------------------------------------------
   9) التحديد وشريط التمرير
   --------------------------------------------------------------------- */

::selection{
  background:var(--violet-500);
  color:var(--white);
  text-shadow:none;
}

::-moz-selection{
  background:var(--violet-500);
  color:var(--white);
}

html{
  scrollbar-width:thin;
  scrollbar-color:var(--violet-300) var(--cream-200);
}

::-webkit-scrollbar{inline-size:11px;block-size:11px}

::-webkit-scrollbar-track{background:var(--cream-200)}

::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--violet-300),var(--violet-400));
  border-radius:var(--r-pill);
  border:3px solid var(--cream-200);
}

::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(var(--violet-400),var(--violet-500));
}

::-webkit-scrollbar-corner{background:var(--cream-200)}

/* حاويات داكنة تعكس ألوان الشريط */
.on-dark{
  scrollbar-color:var(--navy-600) var(--navy-900);
}

.on-dark::-webkit-scrollbar-track{background:var(--navy-900)}
.on-dark::-webkit-scrollbar-thumb{
  background:var(--navy-600);
  border-color:var(--navy-900);
}

/* إخفاء شريط التمرير مع إبقاء التمرير عاملاً */
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.no-scrollbar::-webkit-scrollbar{display:none}

/* ---------------------------------------------------------------------
   10) أدوات مساعدة صغيرة على مستوى الأساس
   --------------------------------------------------------------------- */

[hidden]{display:none !important}

[disabled],
.is-disabled{opacity:.55;pointer-events:none}

.text-start{text-align:start}
.text-center{text-align:center}
.text-end{text-align:end}

.muted{color:var(--muted)}
.soft{color:var(--ink-soft)}
.accent{color:var(--violet-600)}

.nowrap{white-space:nowrap}

.truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* قصّ النص إلى عدد أسطر عبر --lines */
.clamp{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--lines,2);
  line-clamp:var(--lines,2);
  overflow:hidden;
}

.full-w{inline-size:100%}

.relative{position:relative}

/* نص متدرّج بألوان الهوية */
.grad-text{
  background:var(--grad-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* ---------------------------------------------------------------------
   11) الطباعة الورقية
   --------------------------------------------------------------------- */

@media print{
  body{background:#fff;color:#000}
  .site-header,.site-footer,.ticker,.btn,.skip-link,.mobile-menu,
  .drawer,.modal,.toast-stack,.reading-progress{display:none !important}
  a{color:#000;text-decoration:underline}
  .card,.table-wrap{box-shadow:none;border:1px solid #ccc}

  /* الطباعة تعرض كل أيام برنامج الفعالية لا اليوم المفتوح فقط. (VIS-18) */
  .tabs{display:none !important}
  .tab-panel[hidden]{display:block !important}
}