/* ══════════════════════════════════════════════════════════
   LIC — الأنماط الرئيسية
   ══════════════════════════════════════════════════════════ */

/* ── إعادة التهيئة ───────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  /* يمنع اختفاء العنوان تحت الترويسة */

  /* القصّ على html لا على body وحده: جدول المزايا عرضه الأدنى 900px داخل
     ‎.table-wrap‎ الذي يُمرِّره أفقياً — لكن فيضه كان يتسرَّب فيتضخَّم عرض
     المستند إلى 885px على شاشة 390px، فتُزاح الصفحة كلها ويظهر العرض
     «كبيراً ومتضارباً» على الهاتف. الإعلان على body وحده لا يكفي: حين يكون
     overflow الجذر visible يتصاعد إعلان body إلى منفذ العرض ويصير body
     نفسه visible. و‎clip‎ لا ينشئ حاوية تمرير، فالترويسة اللاصقة تبقى تعمل. */
  overflow-x: clip;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
}

/* سمة hidden تسبق أي display في الأصناف — بدونها يظهر زر .btn المخفي */
[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4 {
  line-height: var(--lh-tight);
  font-weight: 800;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* الأرقام دائماً لاتينية ومنتظمة العرض */
.countdown__num,
.stat__num,
.pkg__amount,
.fp-facts strong,
[dir] [dir="ltr"] {
  font-variant-numeric: tabular-nums;
}

/* ── إتاحة ───────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  inset-block-start: -100%;
  inset-inline-start: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  transition: inset-block-start var(--t-fast) var(--ease);
}

.skip-link:focus {
  inset-block-start: 0;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── التخطيط ─────────────────────────────────── */
/* ‎--w‎ هو مقبض «العرض» في م13: أربع قيمٍ لخاصّيةٍ واحدة.
   ولم تُبنَ شبكةٌ بخطوطٍ مسمّاة رغم أناقتها — كانت ستُلزم بتعديل
   ترميز 29 ملفَّ قسم، وربحُها (خلفيةٌ ممتدَّة ومحتوىً محصور) محلولٌ
   أصلاً بـ‎.section‎ حولها ‎.shell‎ داخلها. انظر التكليف §2. */
.shell {
  width: 100%;
  max-width: var(--w, var(--shell));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { --w: var(--shell-narrow); }

/* نطاقات العرض الأربعة — تُوضَع على ‎.section‎ فترثها ‎.shell‎ بداخلها */
[data-width="narrow"] { --w: var(--shell-narrow); }
[data-width="main"]   { --w: var(--shell); }
[data-width="wide"]   { --w: var(--shell-wide); }
[data-width="full"]   { --w: none; }
[data-width="full"] > .shell { padding-inline: 0; }

/* ⚠️ ‎container-type: inline-size‎ تعني ضمناً
   ‎contain: layout style inline-size‎: القسم لا يُحدَّد عرضه بمحتواه
   (وهو كذلك أصلاً — عرضه كامل)، وأيّ ‎position:fixed‎ بداخله يصير
   محبوساً به. **يُقاس قبل الاعتماد** — §6 الفحص 1. */
.section {
  padding-block: var(--section-y);
  position: relative;
  container-type: inline-size;
  container-name: sec;
}

.section--alt {
  background: var(--bg-2);
}

.section__head {
  text-align: center;
  margin-block-end: clamp(2rem, 5vw, 3.5rem);
}

.section__kicker {
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--brand);
  margin-block-end: var(--sp-2);
}

.section__head h2 {
  font-size: var(--fs-2xl);
}

.section__sub {
  margin-block-start: var(--sp-3);
  max-width: 62ch;
  margin-inline: auto;
  color: var(--text-2);
  font-size: var(--fs-lg);
}

.section__note {
  margin-block-start: var(--sp-6);
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-sm);
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── شعار المنتدى ────────────────────────────── */
/* الشعار يحمل اسم المنتدى داخله (assets/svg/lic-s.svg)، ولا يُستخدم الرمز
   المجرَّد إلا في الحالات الشاذة كأيقونة الموقع. وكتابة الاسم في ملف المصمم
   داكنة (#154d57) فتغيب على الخلفية الداكنة — لذلك نسختان: نص داكن للوضع
   الفاتح، ونص فاتح للوضع الداكن. النسختان تُحمَّلان معاً فالتبديل فوري.
   الوضع له ثلاث حالات: سمة صريحة، أو تفضيل النظام بلا سمة — وكلها مُغطَّاة. */
.logo-swap--light {
  display: none;
}

.logo-swap--dark {
  display: block;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo-swap--light {
    display: block;
  }

  :root:not([data-theme="dark"]) .logo-swap--dark {
    display: none;
  }
}

:root[data-theme="light"] .logo-swap--light {
  display: block;
}

:root[data-theme="light"] .logo-swap--dark {
  display: none;
}

/* شعار الترويسة الأفقي: أربع حالات — لغتان × وضعان. الملفّ يُختار هنا في
   متغيِّر واحد، فلا يُنزِّل المتصفِّح إلا الملف الفائز في التتالي.
   `-c` ملوَّن للوضع الفاتح، و`-w` أبيض للوضع الداكن — كما في lic-s أعلاه.
   قواعد الإنجليزية أخصّ دائماً من قواعد الوضع، فلا يغلبها ترتيبُ الملف. */
:root {
  --brand-logo: url("../svg/brand/logo-a-w.svg");
}

:root[lang="en"] {
  --brand-logo: url("../svg/brand/logo-e-w.svg");
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --brand-logo: url("../svg/brand/logo-a-c.svg");
  }

  :root[lang="en"]:not([data-theme="dark"]) {
    --brand-logo: url("../svg/brand/logo-e-c.svg");
  }
}

:root[data-theme="light"] {
  --brand-logo: url("../svg/brand/logo-a-c.svg");
}

:root[data-theme="light"][lang="en"] {
  --brand-logo: url("../svg/brand/logo-e-c.svg");
}

/* ── شاشة التحميل ────────────────────────────── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow);
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.preloader__logo {
  width: min(200px, 45vw);
  animation: pulse 1.8s var(--ease) infinite;
}

.preloader__bar {
  width: min(220px, 50vw);
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.preloader__fill {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: sweep 1.2s var(--ease) infinite;
}

@keyframes pulse {
  50% {
    opacity: .45;
  }
}

@keyframes sweep {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(320%);
  }
}

/* ── الترويسة ────────────────────────────────── */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-block-end: 1px solid transparent;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.site-header.is-stuck {
  border-block-end-color: var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: var(--sh-2);
}

.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.site-header__progress {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--lic-gold-dk), var(--lic-gold), var(--lic-gold-lt));
}

/* الشعار وحده في الترويسة: هو يحمل اسم المنتدى فلا يُكرَّر نصاً بجانبه */
.brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.brand__mark {
  display: block;
  flex-shrink: 0;
  /* الميل 17vw قِيس على أضيق ترويسة أفقية (1100px) بالعربية — وهي أطول نصوص
     التنقُّل — فعندها 187px ويبقى للقائمة متنفَّس. والحدّ الأعلى 248px لا
     يُبلَغ إلا فوق 1459px حيث المتنفَّس واسع.
     والحدّ الأدنى 132px لا 164: عند 360px لا يبقى للشعار بعد البرغر وزرَّي
     اللغة والوضع (182px + فجوة 16) إلا ~130px، فـ164 كانت تُركِب الشعار على
     الأزرار. وتحت 420px يُختصر زرّ اللغة إلى أيقونته فيتَّسع الشعار ثانية. */
  inline-size: clamp(132px, 17vw, 248px);
  aspect-ratio: 2473.7 / 577.79;
  /* النسبة من viewBox المقصوص — والعربية أعرض قليلاً من الإنجليزية */
  background: var(--brand-logo) center / contain no-repeat;
}

:root[lang="en"] .brand__mark {
  aspect-ratio: 2424.09 / 598.77;
}

/* الهواتف الضيِّقة: ميزانية الترويسة 288px عند 320px عرضاً، ولا تكفي شعاراً
   مقبولاً مع زرّ لغة يحمل اسمها. فيُختصر الزرّ إلى الأيقونة — واسم اللغة
   باقٍ في aria-label فلا يخسر قارئ الشاشة شيئاً — ويأخذ الشعار الفارق. */
@media (max-width: 420px) {
  .lang-btn span {
    display: none;
  }

  .brand__mark {
    inline-size: clamp(120px, 34vw, 150px);
  }
}

/* التنقُّل */
.site-nav {
  margin-inline-start: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.site-nav__link {
  position: relative;
  display: block;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.site-nav__link:hover {
  color: var(--text);
  background: var(--surface);
}

.site-nav__link.is-active {
  color: var(--brand);
}

.site-nav__link.is-active::after {
  content: '';
  position: absolute;
  inset-block-end: 2px;
  inset-inline: var(--sp-3);
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.icon-btn {
  inline-size: 38px;
  block-size: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  transition: all var(--t-fast) var(--ease);
}

.icon-btn:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line-2);
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all var(--t-fast) var(--ease);
}

.lang-btn:hover {
  color: var(--text);
  border-color: var(--line-2);
}

.burger {
  display: none;
  inline-size: 38px;
  block-size: 38px;
  position: relative;
}

.burger span {
  position: absolute;
  inset-inline: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: all var(--t) var(--ease);
}

.burger span:nth-child(1) {
  top: 12px;
}

.burger span:nth-child(2) {
  top: 18px;
}

.burger span:nth-child(3) {
  top: 24px;
}

.burger[aria-expanded="true"] span:nth-child(1) {
  top: 18px;
  transform: rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  top: 18px;
  transform: rotate(-45deg);
}

@media (max-width: 1080px) {
  .burger {
    display: block;
  }

  /* الدفع إلى الطرف كان على ‎.site-nav‎ (‎margin-inline-start: auto‎)، وهنا
     تصير القائمة ‎position: fixed‎ فتخرج من التدفُّق ويسقط الدفع معها —
     فتلتصق الأزرار بالشعار ويبقى الفراغ في الطرف. فيُنقل الدفع إليها:
     أقصى اليمين في الإنجليزية وأقصى اليسار في العربية، منطقياً بلا تفريع. */
  .site-header__actions {
    margin-inline-start: auto;
  }

  .site-nav {
    position: fixed;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    background: var(--bg-2);
    border-block-end: 1px solid var(--line);
    box-shadow: var(--sh-3);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t) var(--ease);
  }

  .site-nav.is-open {
    max-height: min(70vh, 560px);
    overflow-y: auto;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    padding: var(--sp-3) var(--gutter);
  }

  .site-nav__link {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-base);
  }

  .site-nav__link.is-active::after {
    inset-block: var(--sp-2);
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: 3px;
    height: auto;
  }
}

/* ── الأزرار ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* الذهبي هو لون الفعل في كل الأزرار — والحبر عليه داكن لأن الأبيض
   فوق الذهب تباينه ‎2.3:1‎ ولا يُقرأ. */
.btn--primary {
  background: linear-gradient(135deg, var(--lic-gold-lt), var(--lic-gold));
  color: var(--gold-ink);
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--lic-gold) 80%, transparent);
}

.btn--primary:hover {
  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--lic-gold) 90%, transparent);
}

.btn--outline {
  border-color: var(--line-2);
  color: var(--text);
  background: var(--surface);
}

.btn--outline:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.btn--ghost {
  color: var(--text-2);
}

.btn--ghost:hover {
  color: var(--text);
  background: var(--surface);
}

/* زر التراجع (مسح الاختيار): ذهبي في السكون، ورمادي عند التراجع نفسه —
   فاللمسة الذهبية تدلّ عليه، والرمادي يقول إن الفعل انسحاب لا إقدام. */
.btn--undo {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--lic-gold) 42%, transparent);
  background: color-mix(in srgb, var(--lic-gold) 10%, transparent);
}

.btn--undo:hover,
.btn--undo:active,
.btn--undo:focus-visible {
  color: var(--text-3);
  border-color: var(--line-2);
  background: var(--surface-2);
}

.btn--undo[disabled],
.btn--undo[aria-disabled="true"] {
  color: var(--text-3);
  border-color: var(--line);
  background: transparent;
}

.btn--lg {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-base);
}

.btn--sm {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
}

.btn--block {
  width: 100%;
}

/* ── الواجهة الرئيسية ────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 9vw, 6rem) clamp(3rem, 7vw, 5rem);
  display: grid;
  place-items: center;
  text-align: center;
  min-height: min(92dvh, 900px);
  overflow: clip;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 20%, transparent 75%);
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
}

.hero__glow--a {
  inline-size: 46vw;
  block-size: 46vw;
  inset-block-start: -12%;
  inset-inline-start: -8%;
  background: var(--lic-gold);
  /* هالة ذهبية تسند لون الأزرار لا تعاكسه */
}

.hero__glow--b {
  inline-size: 40vw;
  block-size: 40vw;
  inset-block-end: -14%;
  inset-inline-end: -6%;
  background: var(--nissa-navy);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.hero__edition {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  backdrop-filter: blur(8px);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}

.hero__edition .dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--st-available);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-available) 25%, transparent);
  animation: blink 2s var(--ease) infinite;
}

@keyframes blink {
  50% {
    opacity: .35;
  }
}

.hero__edition .sep {
  color: var(--text-3);
}

/* شعار المنتدى وحده هنا: شعارا الجهتين انتقلا إلى شريط الشركاء أدناه.
   وهو بديل العنوان لا مرافقه — فيملأ عرض الغلاف ويتوسَّطه. */
.hero__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
}

.hero__logo--main {
  /* عرض الغلاف كاملاً وحدُّه الأقصى 760px: يملأ الشاشة ولا يفيض فيُقصّ */
  inline-size: min(100%, 760px);
}

/* العنوان يلتف بحرية — لا white-space:nowrap */
.hero__title {
  font-size: var(--fs-3xl);
  max-width: 22ch;
  background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 62%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__slogan {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--brand);
  max-width: 30ch;
}

.hero__lead {
  font-size: var(--fs-lg);
  color: var(--text-2);
  max-width: 60ch;
}

.hero__where {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.hero__where i {
  color: var(--brand);
  margin-inline-end: var(--sp-1);
}

.hero__cta {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

.hero__scroll {
  position: absolute;
  inset-block-end: var(--sp-5);
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  animation: bob 2.2s var(--ease) infinite;
}

@keyframes bob {
  50% {
    transform: translateY(8px);
  }
}

/* ── العد التنازلي ───────────────────────────── */
.countdown {
  display: grid;
  /* القيمة الوحيدة الباقية مكتوبةً في الملفّ — وهي ليست بطاقة:
     أربع خلايا توقيتٍ بعرضٍ مقيَّد من طرفيه (‎64‎ إلى ‎96‎)، لا شبكةً
     تُعيد التوزيع. فمقياسُ ‎--col-*‎ لا ينطبق عليها. */
  grid-template-columns: repeat(4, minmax(64px, 96px));
  gap: clamp(.5rem, 2vw, 1rem);
}

.countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  backdrop-filter: blur(8px);
}

.countdown__num {
  font-family: var(--font-num);
  font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.countdown__label {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.countdown__msg {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--st-available);
}

/* ── الأرقام ─────────────────────────────────── */
.stats {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-block: 1px solid var(--line);
  background: var(--bg-2);
}

.stats__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col-xs), 100%), 1fr));
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
}

.stat__icon {
  font-size: 1.4rem;
  color: var(--brand);
  margin-block-end: var(--sp-1);
}

.stat__num {
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
}

.stat__label {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* ── شريط الشركاء ────────────────────────────── */
/* الشعارات تُصمَّم لخلفية بيضاء، فيجلس كل شعار على لوحة فاتحة: يصحّ ذلك
   لشعارات الجهتين اليوم ولأي شعار يُرفَع من لوحة التحكُّم غداً بلا استثناء.
   واللوحة زجاجية لا بيضاء صريحة حتى لا تُوهج العين على الخلفية الداكنة —
   التفصيل في تعليق ‎.partners__plate‎ أدناه. */
.partners {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  /* هالتان خافتتان خلف الشريط: الزجاج لا يُرى زجاجاً فوق لون مصمت — لا بدّ
     أن يكون خلفه تدرُّجٌ يلتقطه ‎backdrop-filter‎ ويشوِّهه. واللوحات تمرّ
     فوقهما بالحركة فيتبدَّل ما تلتقطه، وهذا ما يُحيي الإيهام. */
  background:
    radial-gradient(58% 120% at 18% 0%,
      color-mix(in srgb, var(--lic-gold) 10%, transparent), transparent 68%),
    radial-gradient(52% 110% at 86% 100%,
      color-mix(in srgb, var(--nissa-navy) 20%, transparent), transparent 70%),
    var(--bg-3);
  border-block-start: 1px solid var(--line);
  overflow: clip;
  /* الشريط أعرض من الشاشة ولا يُمرَّرها */
}

.partners__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--brand);
  text-align: center;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-block-end: var(--sp-5);
}

/* الشريط كله LTR: المسار أعرض من الشاشة، ولو تُرك للتدفُّق RTL لبدأ ملتصقاً
   بالحافة اليمنى وفائضاً إلى اليسار — فيخرج بالكامل مع أول ‎translateX‎ سالب.
   اتجاه الحركة تفرضه ‎animation-direction‎ وحده لا تخطيط الصفحة. */
.partners__marquee {
  position: relative;
  direction: ltr;
  cursor: grab;
  /* السحب أفقي فقط: pan-y يترك تمرير الصفحة الرأسي للمتصفِّح بلا اختلاس */
  touch-action: pan-y;
  user-select: none;
}

.partners__marquee.is-dragging {
  cursor: grabbing;
}

/* تلاشي الحافتين بطبقتين فوق الشريط لا بقناع (mask): الخلفية صلبة فيؤدّي
   التدرُّج الغرض نفسه، ويُرسم في كل متصفِّح بلا استثناء. الجهتان فيزيائيتان
   (left/right) لأن التلاشي متناظر فلا يتبع الاتجاه. */
.partners__marquee::before,
.partners__marquee::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset-block: 0;
  inline-size: clamp(24px, 6vw, 96px);
  pointer-events: none;
}

.partners__marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-3), transparent);
}

.partners__marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-3), transparent);
}

/* المسار LTR دائماً: الاتجاه تفرضه الحركة لا تخطيط الصفحة، فيسلم اللف
   من التباس تدفُّق RTL — والعربية تُقلب بـ animation-direction وحده. */
.partners__track {
  display: flex;
  width: max-content;
  animation: partners-scroll var(--partners-dur, 40s) linear infinite;
}

[dir="rtl"] .partners__track {
  animation-direction: reverse;
}

/* من اليسار إلى اليمين */
.partners__marquee:hover .partners__track,
.partners__track:focus-within {
  animation-play-state: paused;
}

@keyframes partners-scroll {
  to {
    transform: translateX(-50%);
  }
}

.partners__group {
  display: flex;
  align-items: flex-end;
}

.partners__item {
  flex: 0 0 auto;
  padding-inline: clamp(.4rem, 1.4vw, .9rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

/* نوع الشراكة فوق الشعار: نصٌّ هادئ لا ينافس الشعار ويحمل data-i18n
   فيتبع تبديل اللغة الفوري. النسخ المكرَّرة داخل li مُعلَّمة aria-hidden. */
.partners__kind {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  line-height: 1.2;
}

.partners__plate {
  display: grid;
  place-items: center;
  inline-size: clamp(200px, 21vw, 300px);
  block-size: 128px;
  padding: var(--sp-4) var(--sp-5);

  /* زجاج مُشوَّش بأبيض متَّسخ (Glass · Blur · dirty white):
     1) أبيض شفَّاف عند 70% — فما خلفه يتخلَّله ويصبغه، فلا يبقى أبيض صريحاً.
     2) ‎backdrop-filter: blur‎ يُشوِّش هالتَي القسم خلفه فيصير زجاجاً حقاً لا
        مجرَّد لون شفَّاف — ولهذا أُضيف التدرُّج خلف الشريط أعلاه.
     3) حبيبات ‎feTurbulence‎ بمزج ‎soft-light‎ هي «الاتِّساخ»: الرمادي المتوسط
        لا يغيِّر شيئاً في هذا المزج فلا يُلطَّخ اللون، ولا يظهر إلا الخشونة.
     4) لمعة قطرية وحافّة داخلية فاتحة تُكملان حرف الزجاج.

     ولماذا اللوح فاتح ولا يُترك شفَّافاً؟ لأن الشعارات تُرفَع من لوحة
     التحكُّم ولونها **غير معلوم مسبقاً** — اليوم ذهبي وغداً أزرق أو أحمر.
     فالمعيار ليس شعاراً بعينه بل: أي درجة لوح تُقرأ عليها أكبر عدد من
     الألوان؟ قِيست النسبة على فضاء sRGB كلّه (18³ لوناً) عند ‎3:1‎:

       لوح أبيض صريح ‎1.000‎ → 56%   ·   نواة اللوح الحالية ‎0.753‎ → 43%
       لوح ‎0.679‎ (بلا نواة)      → 38%   ·   لوح ‎0.319‎ (شفافية 35%) → 13%

     أي أن كل خطوة نحو الرمادي المتوسط تُسقط ألوان شعارات — والرمادي المتوسط
     أسوأ موضع ممكن لأنه يبتلع الداكن والفاتح معاً. ولهذا: الحافّة زجاج
     (‎--plate-tint‎) والنواة تحت الشعار شبه بيضاء (‎--plate-core‎)، فيجتمع
     شكل الزجاج مع أوسع تغطية ممكنة للألوان.

     والفاتح جداً ليس مجاناً أيضاً: شعار أبيض الحبر يختفي على الأبيض الصريح،
     وعلى النواة الحالية يبقى مرئياً ضعيفاً (‎1.31:1‎). فالنواة عند ‎0.753‎
     وسطٌ مقصود لا إهمال. والعلاج الصحيح للشعار الفاتح ليس تعديل اللوح
     للجميع، بل راية لكل شريك في اللوحة تقلب لوحه إلى زجاج داكن.

     ولماذا هنا ‎rgb(… / a)‎ لا ‎opacity‎؟ لأن ‎opacity‎ تُطبَّق على العنصر
     وكل أبنائه ككتلة واحدة، فتُبهت صورة الشعار نفسها: قِيس الذهب ‎#d4a029‎
     فصار ‎#9c7d36‎ — لون العلامة يفسد. أما الألفا داخل قيمة اللون فلا تمسّ
     إلا الطبقة المكتوبة فيها، والشعار يبقى معتماً بلونه الصحيح. */
  /* ثلاثة أرقام تحكم اللوح كلّه — ويقلبها ‎.partners__plate--dark‎ وحدها */
  --plate-tint: .7;     /* زجاج الحافّة — الإحساس بالشفافية */
  --plate-core: .62;    /* نواة شبه بيضاء تحت الشعار وحده */
  --plate-sheen: .415;  /* اللمعة القطرية */

  background-color: rgb(255 255 255 / var(--plate-tint));

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
    radial-gradient(76% 78% at 50% 47%,
      rgb(255 255 255 / var(--plate-core)), rgb(255 255 255 / 0) 74%),
    linear-gradient(158deg,
      rgb(255 255 255 / var(--plate-sheen)), rgb(255 255 255 / 0) 58%);
  background-size: 160px 160px, auto, auto;
  background-blend-mode: soft-light, normal, normal;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);

  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--sh-1), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

/* لوح داكن للشعارات فاتحة الحبر (‎plate = 'dark'‎ في جدول partners).
   الشعار الأبيض تباينه على النواة الفاتحة ‎1.31:1‎ فيكاد يختفي؛ وعلى هذا
   اللوح ينقلب الأمر. نفس الطبقات الأربع بلا استثناء — لا يتغيَّر إلا لون
   الزجاج ونواته، فيبقى الشكل واحداً في الشريط ولا يبدو اللوحان غريبين. */
.partners__plate--dark {
  /* ثلاثة أرقام فقط تقلب اللوح — الطبقات الأربع نفسها بلا تكرار، فيبقى
     الشكل واحداً في الشريط ولا يبدو اللوحان غريبين عن بعضهما.
     و‎--plate-core: 0‎ تُلغي النواة المضيئة (الشعار الفاتح لا يحتاجها). */
  --plate-tint: .1;
  --plate-core: 0;
  --plate-sheen: .09;
  border-color: rgb(255 255 255 / .16);
  box-shadow: var(--sh-1), inset 0 1px 0 rgb(255 255 255 / .12);
}

a.partners__plate:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}

.partners__plate img {
  max-block-size: 100%;
  max-inline-size: 100%;
  width: auto;
  object-fit: contain;
  /* الصورة لا تلتقط المؤشِّر: يمنع سحب الصورة الأصلي فلا يعارض سحب الشريط */
  pointer-events: none;
  -webkit-user-drag: none;
}

/* بلا حركة: نسخة واحدة ساكنة تُمرَّر باليد */
@media (prefers-reduced-motion: reduce) {
  .partners__marquee {
    overflow-x: auto;
  }

  .partners__marquee::before,
  .partners__marquee::after {
    content: none;
  }

  .partners__track {
    animation: none;
    width: auto;
  }

  .partners__track>.partners__group+.partners__group {
    display: none;
  }
}

/* ── عن المنتدى ──────────────────────────────── */
.about {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
}

@media (max-width: 900px) {
  .about {
    grid-template-columns: 1fr;
  }
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.about__text p {
  font-size: var(--fs-lg);
  color: var(--text-2);
}

.about__facts {
  display: grid;
  gap: var(--sp-3);
}

.fact {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  border-inline-start: 3px solid var(--brand);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.fact:hover {
  background: var(--surface-2);
  transform: translateX(calc(var(--sp-1) * -1));
}

[dir="ltr"] .fact:hover {
  transform: translateX(var(--sp-1));
}

/* التسمية أصغر من القيمة — التراتب الصحيح */
.fact dt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-3);
  text-transform: uppercase;
}

.fact dt i {
  color: var(--brand);
}

.fact dt img {
  width: 20px;
  height: auto;
}

.fact dd {
  font-size: var(--fs-lg);
  font-weight: 600;
}

/* أكثرُ من جهةٍ في حقيقةٍ واحدة (م39) — لكلٍّ شعارُها الصغير.
   والقياسُ أصغرُ من قيمة الحقيقة: هذه أسماءٌ في قائمةٍ لا عنوانٌ واحد. */
.fact__orgs {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fact__orgs li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  line-height: 1.35;
}

.fact__orgs img {
  flex: none;
  width: 26px;
  height: 26px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--r-sm);
  padding: 2px;
}

.fact__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-inline-start: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand);
}

.fact__link:hover {
  text-decoration: underline;
}

/* ══ الشبكة: بدائيّةٌ واحدة بأربعة أنماط ══════════
   ثلاث دقائق تقنية، كلٌّ منها عطبٌ حقيقيّ لولاها:

   1. ‎min(var(--g-min), 100%)‎ لا ‎var(--g-min)‎ وحدها — حاويةٌ أضيق
      من 260 بكسل تجعل المسار 260 فيفيض المحتوى أفقياً. وهو العطب
      نفسه الذي قِسناه في البريد (‎scrollWidth: 624‎ على منفذ 390).
   2. ‎minmax(0, 1fr)‎ لا ‎1fr‎ — أدنى ‎1fr‎ هو ‎auto‎، أي عرض أطول
      كلمةٍ لا تُكسَر. ورابطٌ أو اسمٌ إنجليزيّ في نصٍّ عربيّ يوسِّع
      العمود ويكسر الصفّ.
   3. ‎auto-fit‎ يطوي المسار الفارغ فتتمدَّد البطاقات (4 بطاقاتٍ في
      شبكة 3 ⇒ رابعةٌ بعرض الصفّ)، و‎auto-fill‎ يُبقيه. الفرق مرئيّ
      وله وجهان، فصار **نمطين** لا قراراً مخفياً. */
.g       { display: grid; gap: var(--g-gap, var(--sp-5)); }
.g--fit  { grid-template-columns: repeat(auto-fit,  minmax(min(var(--g-min, var(--cards-min, var(--col))), 100%), 1fr)); }
.g--fill { grid-template-columns: repeat(auto-fill, minmax(min(var(--g-min, var(--cards-min, var(--col))), 100%), 1fr)); }
.g--cols { grid-template-columns: repeat(var(--g-cols, 3), minmax(0, 1fr)); }
.g--split{ grid-template-columns: var(--g-split, 1.15fr 1fr); }

/* الحاوية لا الشاشة: القسم يسأل «كم عرضي أنا؟» لا «كم عرض النافذة؟»
   — وهذا ما يجعله قابلاً للنقل بلا مراجعةٍ بصرية. */
@container sec (max-width: 40rem) {
  .g--cols, .g--split { grid-template-columns: 1fr; }
}

/* ══ الهيئة: قيمُ المقابض ⇒ رموزٌ قائمة  (م13) ══════
   كل قيمةٍ هنا تقابل مفتاحاً في ‎SEC_KNOBS‎ في ‎inc/brand.php‎، ولا
   لونٌ حرّ ولا رقمٌ حرّ. وتغييرُ الذهبيّ من «الهوية» يُحرِّك النغمة
   الرابعة في الأقسام كلِّها معاً — ويبقى فحصُ التباين الذي بنته م6
   (‎contrastRatio()‎) حارساً.

   و‎.secwrap‎ ‎display: contents‎: الغلاف يحمل السمات ويختفي من شجرة
   الصناديق، فلا يُضيف صندوقاً ولا يكسر تخطيطاً. والوراثة تعبره لأنها
   لا تمرّ بصندوق.

   و‎color-mix(in srgb)‎ لا ‎oklab‎: المشروع كلُّه على الأولى (‏16 موضعاً
   مقيساً في ‎main.css‎ و‎admin.css‎)، وإدخالُ فضاءٍ ثانٍ يعني سلوكَ
   امتزاجٍ مختلفاً لنغمةٍ واحدة. */
.secwrap { display: contents; }

[data-density="tight"]  { --section-y: clamp(2rem, 5vw, 4rem);  --g-gap: var(--sp-4); }
[data-density="normal"] { --g-gap: var(--sp-5); }
[data-density="airy"]   { --section-y: clamp(5rem, 11vw, 9rem); --g-gap: var(--sp-7); }

[data-tone="base"]  > .section { background: var(--bg); }
[data-tone="alt"]   > .section { background: var(--bg-2); }
[data-tone="deep"]  > .section { background: var(--bg-3); }
[data-tone="brand"] > .section { background: color-mix(in srgb, var(--brand) 12%, var(--bg)); }

[data-align="start"]  .section__head { text-align: start; margin-inline: 0 auto; }
[data-align="center"] .section__head { text-align: center; margin-inline: auto; }

/* نمطُ الشبكة يُطبَّق على الشبكات القائمة داخل القسم — فالمقبض يُبدِّل
   سلوكَ ما هو مرسومٌ أصلاً، ولا يفرض ترميزاً جديداً على 29 ملفّاً. */
[data-grid="fit"]   .cards { grid-template-columns: repeat(auto-fit,  minmax(min(var(--g-min, var(--cards-min, var(--col))), 100%), 1fr)); }
[data-grid="fill"]  .cards { grid-template-columns: repeat(auto-fill, minmax(min(var(--g-min, var(--cards-min, var(--col))), 100%), 1fr)); }
[data-grid="cols"]  .cards { grid-template-columns: repeat(var(--g-cols, 3), minmax(0, 1fr)); }
[data-grid="split"] .cards { grid-template-columns: var(--g-split, 1.15fr 1fr); }

@container sec (max-width: 40rem) {
  [data-grid="cols"] .cards,
  [data-grid="split"] .cards { grid-template-columns: 1fr; }
}

/* ── البطاقات ────────────────────────────────── */
/* أسماءٌ موروثة تبقى — 29 ملفَّ قسمٍ تستعملها — وتُعرَّف بدلالة ‎.g‎
   فلا تبقى قاعدتان لفكرةٍ واحدة تتباعدان. */
/* ⚠️ **متغيِّران لا واحد — وهذا عطبٌ كُشف بالقياس لا بالعين.**
   كانت ‎.cards--3‎ تكتب ‎--g-min‎ **على ‎.cards‎ نفسها**، فتغلب القيمةَ
   الموروثة من غلاف الهيئة — ومقبضُ «أدنى عرضٍ للبطاقة» في م13 لا
   يستطيع أن يفوز أبداً على أيّ قسمٍ من الأقسام الستّة. **مقبضٌ يُحفظ
   ولا يفعل شيئاً، وهو أسوأ من غيابه.**
   فصار للصنف متغيِّرُه ‎--cards-min‎، و‎--g-min‎ (من اللوحة) يسبقه في
   سلسلة الاحتياط: **اللوحةُ إن نطقت، وإلّا فالصنف، وإلّا فالمقياس.** */
.cards      { display: grid; gap: var(--g-gap, var(--sp-5));
              grid-template-columns: repeat(auto-fit,
                  minmax(min(var(--g-min, var(--cards-min, var(--col))), 100%), 1fr)); }
.cards--3   { --cards-min: var(--col); }
.cards--4   { --cards-min: var(--col-sm); }

/* عنصرٌ بلا صندوق  (م22): النصُّ الحرُّ والزرُّ ليسا بطاقتين — والصندوقُ
   حولهما يجعل نصَّ فقرةٍ يبدو بطاقةً فارغةً بلا أيقونة. */
.card--plain {
    background: none; border: 0; padding: 0; box-shadow: none;
    align-items: start; justify-content: center;
}

/* ══ الشبكةُ الحرّة — التموضع بالسحب  (م21) ══
   أربعةٌ وعشرون عموداً: دقّةٌ تجعل الفرقَ عن التموضع الحرّ الحقيقيّ غيرَ
   محسوس، **مع بقاء القيمة صفّاً وعموداً** — فتُورَث الاستجابةُ للهاتف
   والانعكاسُ في العربية بلا سطرٍ إضافيّ، ويبقى ترتيبُ القراءة منطقيّاً.

   ⚠️ **ولا تُفتح إلا بوجود موضعٍ محفوظ** (‏`.cards--free` من `block.php`):
   صفحةٌ لم يُسحَب فيها شيء تبقى شبكتَها القديمة بمقابض م13 عاملةً. */
.cards--free {
    --free-cols: 24;
    grid-template-columns: repeat(var(--free-cols), minmax(0, 1fr));
    grid-auto-rows: minmax(var(--free-row, 88px), auto);
}

/* والانهيارُ إلى عمودٍ واحد **يُلغي الموضعَ المحفوظ نفسه**: عمودٌ من 24
   على شاشةِ هاتفٍ يعني بطاقةً بعرض إصبعٍ واحدة. و`!important` هنا
   مقصودةٌ لأنها تُبطل سمةَ `style` على العنصر — وهي الموضعُ الوحيد في
   الملفّ الذي يفعل ذلك، ولا سبيلَ غيرَه: السمةُ أعلى في الترجيح. */
@media (max-width: 900px) {
    .cards--free { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .cards--free > .card { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

/* الشبكة الفرعية تُسوّي ما لا يستوي.
   ثلاث بطاقاتٍ في صفّ، عنوانُ إحداها سطران والباقي سطر — فيهبط
   نصُّها ويهبط ذيلها. وبالعربية والإنجليزية **تختلف البطاقة التي
   تنكسر**، فما ضُبط للغةٍ ينكسر في الأخرى. والبطاقة هنا تستعير صفوف
   أمّها بدل أن تخترع صفوفها، فتستوي العناوين مع العناوين والذيول مع
   الذيول مهما اختلفت الأطوال. ولا مقبضَ له — يعمل وحده.

   و‎.g--rows‎ **علامةٌ لا قاعدة**: لا تُعلن شيئاً ولا يصحّ أن تُعلن.
   الصفوف الثلاثة تُنشئها ‎grid-row: span 3‎ على الأبناء ضمنياً، فوظيفةُ
   الصنف أن يقول «أبناء هذه الشبكة بطاقاتٌ من ثلاثة صفوف» ليلتقطها
   المحدِّد أدناه. وتُكتب مع ‎.g‎ لا وحدها: ‎class="g g--fit g--rows"‎.

   ⚠️ **وما توقَّعته م12 لم يقع.** كُتب هنا «تُستعمل في م16 حين تُبنى
   الكتلة العامّة»، ثم بُنيت الكتلة فاستعملت ‎.cards‎ نفسها: مقابضُ
   م13 السبعة مكتوبةٌ بدلالة ‎[data-grid] .cards‎، فشبكةٌ بـ‎.g‎ كانت
   ستُولد **بلا مقبضٍ يعمل عليها**. فبقيت ‎.g--rows‎ بلا مستهلك — علامةً
   جاهزةً لشبكةٍ من ثلاثة صفوفٍ ليست بطاقات، إن وُجدت يوماً. */
.cards > .card,
.g--rows > .card {
  grid-row: span 3;                  /* أيقونة · عنوان · نصّ */
  grid-template-rows: subgrid;
  display: grid;
  gap: var(--sp-3);
}

@supports not (grid-template-rows: subgrid) {
  .cards > .card,
  .g--rows > .card { display: flex; flex-direction: column; }
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--sh-2);
}

.card__icon {
  inline-size: 52px;
  block-size: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  font-size: 1.35rem;
}

.card h3 {
  font-size: var(--fs-lg);
}

.card p {
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.card--link:hover h3 {
  color: var(--brand);
}

/* ⚠️ توسيطُ البطاقة الرباعية — المحور تبدَّل، فتبدَّلت الخاصّية.
   كانت ‎.card‎ ‎flex-direction: column‎، فمحورُها المتقاطع **أفقيّ**
   و‎align-items: center‎ تُوسِّط الأيقونة أفقياً. وبعد الشبكة الفرعية
   صارت ‎display: grid‎، فمحورُها المتقاطع **رأسيّ** — و‎align-items‎
   بقيت تعني توسيطاً رأسياً داخل صفّ الشبكة الفرعية، أي إبطالَ استواء
   العناوين وهو غرضُ الشبكة الفرعية كلُّه.
   فالتوسيط الأفقيّ في الشبكة ‎justify-items‎، و‎align-items: start‎
   صراحةً حتى تلتصق كلُّ خليّةٍ بأعلى صفِّها فتستوي الخطوط. */
.cards--4 .card {
  justify-items: center;
  align-items: start;
  text-align: center;
}

/* والاحتياط يعود إلى المحور الأوّل: في ‎flex-direction: column‎
   التوسيطُ الأفقيّ ‎align-items‎ لا ‎justify-items‎. */
@supports not (grid-template-rows: subgrid) {
  .cards--4 .card { align-items: center; }
}

/* ── الكتلة العامّة  (م16) ──────────────────────
   ⚠️ **ثلاث قواعدَ لا أكثر — وهذا مقياسُ نجاح المهمّة لا اختصارٌ فيها.**
   الكتلة تُصدِر ‎.section‎ و‎.shell‎ و‎.cards‎ و‎.card‎ و‎.btn‎ — كلُّها
   مكتوبةٌ من م12، فالمقابض السبعة تعمل عليها بلا سطرٍ واحدٍ جديد.
   ولم يبقَ إلا ما لا مقابلَ له في الأقسام المكتوبة: صورةٌ في موضع
   الأيقونة، وزرٌّ تحت الشبكة. */

/* الصورة تحلّ محلّ الأيقونة، فتأخذ موضعها في الصفّ الأوّل من الشبكة
   الفرعية. و‎aspect-ratio‎ لا ارتفاعٌ ثابت: صورةٌ أعرض أو أضيق تُقصّ
   ولا تُشوَّه، وارتفاعُ الصفّ يبقى واحداً عبر البطاقات. */
.card__img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--surface);
}

/* الزرّ تحت الشبكة، ويتبع محاذاة القسم: ‎[data-align]‎ تُبدِّل ترويسة
   القسم، وهذه تُبدِّل معها الزرَّ فلا يبقى وسطياً وقد صار العنوان بدئياً. */
.block__cta { margin-block-start: var(--sp-6); text-align: center; }
[data-align="start"] .block__cta { text-align: start; }

/* ── المحاور ─────────────────────────────────── */
.tracks {
  display: grid;
  gap: var(--sp-4);
}

.track {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.track:hover {
  border-color: var(--brand);
  background: var(--surface-2);
}

.track__num {
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--brand) 45%, transparent);
}

.track h3 {
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-2);
}

.track h3 i {
  color: var(--brand);
  font-size: .95em;
}

.track p {
  color: var(--text-2);
  font-size: var(--fs-sm);
}

@media (max-width: 560px) {
  .track {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding: var(--sp-4);
  }
}

/* ── الباقات ─────────────────────────────────── */
/* auto-fit يستوعب السبع باقات بلا صفٍّ ناقص */
.pkgs {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col), 100%), 1fr));
  align-items: stretch;
}

.pkg {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.pkg::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: var(--pkg);
}

.pkg::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block-start: -40%;
  inset-inline-end: -30%;
  inline-size: 180px;
  block-size: 180px;
  border-radius: 50%;
  background: var(--pkg);
  opacity: .10;
  filter: blur(30px);
}

.pkg:hover {
  transform: translateY(-6px);
  border-color: var(--pkg);
  box-shadow: var(--sh-3);
}

.pkg--featured {
  border-color: var(--pkg);
  box-shadow: 0 0 0 1px var(--pkg), var(--sh-2);
}

.pkg__badge {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--pkg);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.pkg__icon {
  inline-size: 46px;
  block-size: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--pkg) 18%, transparent);
  color: var(--pkg);
  font-size: 1.25rem;
}

.pkg__name {
  font-size: var(--fs-lg);
}

.pkg__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.pkg__amount {
  font-family: var(--font-num);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
}

.pkg__cur {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.pkg__specs {
  display: grid;
  gap: var(--sp-2);
  margin-block-start: auto;
}

.pkg__specs>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
  border-block-end: 1px dashed var(--line);
  font-size: var(--fs-sm);
}

.pkg__specs>div:last-child {
  border-block-end: 0;
}

.pkg__specs dt {
  color: var(--text-3);
}

.pkg__specs dd {
  font-weight: 700;
}

/* ‎.pkg__zones‎ و‎.zone-chip‎ حُذفتا مع النطاقات (UP-10): كان صفُّ «النطاق
   المقترح» في مواصفات الباقة يعرض حرفاً (B/A) لا يُقرِّر حجزاً ولا سعراً
   — إشارةً بصريّةً بنصِّ ‎config/packages.php‎ نفسِه. */

.btn--pkg {
  justify-content: space-between;
  background: color-mix(in srgb, var(--pkg) 16%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--pkg) 40%, transparent);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
}

.btn--pkg:hover {
  background: var(--pkg);
  color: #fff;
  border-color: var(--pkg);
}

/* ── جدول المزايا ────────────────────────────── */
.swipe-hint {
  display: none;
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-sm);
  margin-block-end: var(--sp-3);
}

.table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.ben-table {
  width: 100%;
  min-width: 900px;
  font-size: var(--fs-sm);
}

.ben-table thead th {
  padding: var(--sp-4) var(--sp-3);
  background: var(--bg-3);
  border-block-end: 2px solid var(--pkg, var(--line));
  text-align: center;
  vertical-align: bottom;
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
}

.ben-table thead th i {
  display: block;
  color: var(--pkg);
  font-size: 1.1rem;
  margin-block-end: var(--sp-1);
}

.ben-table thead th span {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.ben-table thead th small {
  display: block;
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-weight: 400;
}

/* أول عمود ثابت أثناء التمرير الأفقي */
.ben-table tbody th,
.ben-table__corner {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--bg-3);
  text-align: start;
  font-weight: 600;
  color: var(--text-2);
  padding: var(--sp-3) var(--sp-4);
  min-width: 190px;
  border-inline-end: 1px solid var(--line);
}

.ben-table__corner {
  z-index: 3;
}

.ben-table tbody tr:nth-child(even) th,
.ben-table tbody tr:nth-child(even) td {
  background: var(--surface);
}

.ben-table tbody tr:nth-child(even) th {
  background: color-mix(in srgb, var(--bg-3) 92%, var(--brand));
}

.ben-table tbody td {
  padding: var(--sp-3);
  text-align: center;
  border-block-start: 1px solid var(--line);
}

.ben-table .is-yes i {
  color: var(--st-available);
  font-size: 1.05rem;
}

.ben-table .is-no i {
  color: var(--text-3);
  opacity: .55;
}

.ben-table .is-top i {
  color: var(--brand);
  font-size: 1.05rem;
}

.ben-table .is-part i {
  color: var(--accent);
  font-size: 1.02rem;
}

/* ⚠️ خانةُ القيمة كانت بـ‎--font-num‎ — و‎Space Grotesk‎ بلا حروفٍ عربية.
   وقيمُ هذه المصفوفة عربيّةٌ بطبعها: «36 م²» و«20 د» — فكان الرقمُ بخطٍّ
   والوحدةُ بخطِّ ‎monospace‎ الاحتياطيّ في الكلمة الواحدة. و‎tabular-nums‎
   يُبقي المقصودَ منه: أرقامٌ متساوية العرض تصطفّ عمودياً. */
.ben-table .is-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1080px) {
  .swipe-hint {
    display: block;
  }
}

/* ══════════════════════════════════════════════
   الصفحات الداخلية — مكوِّنات المرحلتين 2 و3
   ══════════════════════════════════════════════ */

/* ── ترويسة الصفحة الداخلية ─────────────────── */
/* تحمل ‎<h1>‎ الصفحة. الرئيسية عنوانها في الواجهة، وكل صفحة أخرى
   تحتاج عنواناً أوّلياً واحداً — للبنية ولقارئ الشاشة وللفهرسة. */
.page-head {
  position: relative;
  padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-7);
  overflow: hidden;
  border-block-end: 1px solid var(--line);
}

.page-head__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 120% at 15% 0%, color-mix(in srgb, var(--lic-gold) 14%, transparent), transparent 70%),
    radial-gradient(55% 110% at 85% 100%, color-mix(in srgb, var(--nissa-navy) 22%, transparent), transparent 72%),
    var(--bg-2);
}

.page-head__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
}

.page-head__text {
  min-inline-size: 0;                     /* يسمح للنصّ بالانكماش قبل الميدالية */
}

/* ── ميدالية الشعار ─────────────────────────── */
/* أرضيتها ذهبية ثابتة في الوضعين: رمز المنتدى أبيض، ولو تُرك على خلفية
   الصفحة لاختفى في الوضع الفاتح. الميدالية تحمل أرضيتها معها. */
.page-head__mark {
  position: relative;
  flex: 0 0 auto;
}

.page-head__medal {
  display: grid;
  place-items: center;
  inline-size: 168px;
  block-size: 168px;
  border-radius: 50%;
  background:
    radial-gradient(70% 70% at 32% 28%, rgb(255 255 255 / .28), transparent 62%),
    linear-gradient(150deg, var(--lic-gold-lt), var(--lic-gold) 55%, var(--lic-gold-dk));
  /* هالة تُثبِّت الميدالية في مساحتها بدل أن تطفو وحيدة */
  box-shadow:
    var(--sh-2),
    inset 0 1px 0 rgb(255 255 255 / .45),
    0 0 0 10px color-mix(in srgb, var(--lic-gold) 10%, transparent),
    0 0 0 22px color-mix(in srgb, var(--lic-gold) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--lic-gold-lt) 60%, transparent);
}

.page-head__medal img {
  inline-size: 62%;
  block-size: auto;
  /* الرمز أبيض في الملف — ظلٌّ خفيف يفصله عن الذهب فلا يذوب فيه */
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / .35));
}

/* شريحة الصفحة: تُميِّز الصفحات بعضها من بعض. أرضيتها من خلفية الصفحة
   لا من السطح، وحافّتها ذهبية — فتُقرأ رمزاً واضحاً لا لطخةً على حافّة
   الميدالية. */
.page-head__chip {
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: -8px;
  inline-size: 58px;
  block-size: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid color-mix(in srgb, var(--lic-gold) 55%, transparent);
  box-shadow: var(--sh-2);
  color: var(--lic-gold);
  font-size: var(--fs-xl);
}

@media (max-width: 860px) {
  .page-head__inner {
    flex-direction: column-reverse;       /* الشعار فوق النصّ لا بعده */
    align-items: flex-start;
    gap: var(--sp-5);
  }

  .page-head__medal {
    inline-size: 96px;
    block-size: 96px;
  }

  .page-head__chip {
    inline-size: 34px;
    block-size: 34px;
    font-size: var(--fs-base);
  }
}

.page-head__kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  color: var(--text-3);
  font-size: var(--fs-sm);
  margin-block-end: var(--sp-3);
}

.page-head__kicker .dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--lic-gold);
  box-shadow: var(--sh-glow);
}

.page-head__title {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  margin-block-end: var(--sp-3);
}

.page-head__lead {
  color: var(--text-2);
  font-size: var(--fs-lg);
  max-inline-size: 60ch;
}

/* مرساة قديمة بلا شكل — تُبقي الروابط المنشورة تهبط في مكان معقول */
.anchor-alias {
  display: block;
  block-size: 0;
  scroll-margin-block-start: calc(var(--header-h) + var(--sp-4));
}

/* ── زرّ الانتقال إلى الصفحة العميقة ─────────── */
.section__more {
  margin-block-start: var(--sp-7);
  display: flex;
  justify-content: center;
}

/* ── عمودان: الأهداف ومن يحضر ───────────────── */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col), 100%), 1fr));
  gap: var(--sp-6);
  margin-block-start: var(--sp-7);
}

.split__title,
.group__title,
.steps__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  margin-block-end: var(--sp-4);
}

.split__title i,
.group__title i {
  color: var(--lic-gold);
}

.group__title {
  margin-block-start: var(--sp-7);
}

/* ── قائمة بعلامات صحّ ──────────────────────── */
.ticks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ticks--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col-sm), 100%), 1fr));
}

.ticks li {
  position: relative;
  padding-inline-start: calc(var(--sp-5) + var(--sp-1));
  color: var(--text-2);
}

.ticks li::before {
  content: "\f00c";                       /* Font Awesome — علامة صحّ */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .15em;
  font-size: var(--fs-sm);
  color: var(--lic-gold);
}

/* ── شرائح ─────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-weight: 600;
  color: var(--text-2);
}

.chip i {
  color: var(--lic-gold);
}

.chip--sm {
  padding: 2px var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.chip--room {
  color: var(--text-3);
}

/* ── خطوات مرقَّمة ──────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col-sm), 100%), 1fr));
  gap: var(--sp-5);
}

.step {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.step__num {
  flex: 0 0 auto;
  inline-size: 2rem;
  block-size: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lic-gold-lt), var(--lic-gold));
  color: var(--gold-ink);
  font-family: var(--font-num);
  font-weight: 700;
}

.step p {
  color: var(--text-2);
  font-size: var(--fs-sm);
}

/* ── أسئلة شائعة — <details> أصلية بلا سكربت ── */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary i {
  color: var(--lic-gold);
  transition: transform var(--t) var(--ease);
}

.faq__item[open] summary i {
  transform: rotate(180deg);
}

.faq__item > p {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--text-2);
}

/* ── قائمة التواصل المضغوطة ─────────────────── */
.contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col), 100%), 1fr));
  gap: var(--sp-4);
}

.contact-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.contact-list__item > i {
  flex: 0 0 auto;
  inline-size: 2rem;
  block-size: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--lic-gold);
}

.contact-list__label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.contact-list__val {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

a.contact-list__val:hover {
  color: var(--lic-gold);
}

.contact-actions {
  margin-block-start: var(--sp-6);
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ── بطاقات المتحدثين ───────────────────────── */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col-lg), 100%), 1fr));
  gap: var(--sp-5);
}

.person {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}

.person:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--lic-gold) 45%, var(--line));
}

.person__photo {
  flex: 0 0 auto;
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--lic-gold-lt), var(--lic-gold));
  color: var(--gold-ink);
}

.person__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* الصورة قد تغيب — والحرفان أفضل من مربَّع فارغ */
.person__initials {
  font-size: var(--fs-lg);
  font-weight: 800;
}

.person__name {
  font-size: var(--fs-base);
}

.person__job {
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.person__org {
  color: var(--text-3);
  font-size: var(--fs-xs);
}

.person__talks {
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.person__talks strong {
  display: block;
  margin-block: 2px;
}

.person__talks small {
  color: var(--text-3);
  font-size: var(--fs-xs);
}

/* ── وسم نوع الجلسة ─────────────────────────── */
.tag {
  display: inline-block;
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--line);
}

.tag[data-type="keynote"] {
  background: color-mix(in srgb, var(--lic-gold) 22%, transparent);
  color: var(--gold-ink);
  border-color: color-mix(in srgb, var(--lic-gold) 45%, transparent);
}

.tag[data-type="panel"] {
  background: color-mix(in srgb, var(--nissa-navy) 22%, transparent);
  border-color: color-mix(in srgb, var(--nissa-navy) 45%, transparent);
}

.tag[data-type="workshop"] {
  background: color-mix(in srgb, var(--ly-green) 20%, transparent);
  border-color: color-mix(in srgb, var(--ly-green) 45%, transparent);
}

.tag[data-type="break"] {
  opacity: .75;
}

/* ── جدول الجلسات ───────────────────────────── */
.day-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block: var(--sp-7) var(--sp-5);
  font-size: var(--fs-xl);
}

.day-head__num {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lic-gold-lt), var(--lic-gold));
  color: var(--gold-ink);
  font-family: var(--font-num);
  font-weight: 800;
}

.agenda {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.agenda__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.agenda__row[data-type="break"] {
  background: var(--surface-2);
}

.agenda__time {
  font-family: var(--font-num);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-inline-end: 1px solid var(--line);
  padding-inline-end: var(--sp-4);
}

.agenda__time strong {
  font-size: var(--fs-lg);
}

.agenda__time small {
  color: var(--text-3);
}

.agenda__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-3);
}

.agenda__title {
  font-size: var(--fs-lg);
}

.agenda__sum {
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin-block-start: var(--sp-2);
}

.agenda__people {
  margin-block-start: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.agenda__people li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.agenda__people small {
  display: block;
  color: var(--text-3);
  font-size: var(--fs-xs);
}

.agenda__avatar {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--lic-gold-lt), var(--lic-gold));
  color: var(--gold-ink);
  font-weight: 700;
  font-size: var(--fs-sm);
  flex: 0 0 auto;
}

.agenda__avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

@media (max-width: 620px) {
  .agenda__row {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .agenda__time {
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-2);
    border-inline-end: 0;
    padding-inline-end: 0;
    border-block-end: 1px solid var(--line);
    padding-block-end: var(--sp-3);
  }
}

/* ── مسارات المشاركة في ختام الصفحة ─────────── */
/* البطاقة كلّها رابط لا زرٌّ داخلها: مساحة النقر تصير البطاقة نفسها،
   وهو فرق ملموس على الهاتف. */
.cta {
  background:
    radial-gradient(60% 130% at 20% 0%, color-mix(in srgb, var(--lic-gold) 10%, transparent), transparent 68%),
    radial-gradient(55% 120% at 85% 100%, color-mix(in srgb, var(--nissa-navy) 20%, transparent), transparent 72%),
    var(--bg-3);
  border-block-start: 1px solid var(--line);
}

.cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col), 100%), 1fr));
  gap: var(--sp-5);
}

.cta__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.cta__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--lic-gold) 55%, var(--line));
  box-shadow: var(--sh-2);
}

.cta__icon {
  inline-size: 3rem;
  block-size: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lic-gold-lt), var(--lic-gold));
  color: var(--gold-ink);
  font-size: var(--fs-lg);
}

.cta__card p {
  color: var(--text-2);
  font-size: var(--fs-sm);
  flex: 1 1 auto;
}

.cta__go {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  color: var(--lic-gold);
}

.cta__card:hover .cta__go i {
  transform: translateX(var(--cta-nudge, -4px));
}

:root[dir="ltr"] .cta__card:hover .cta__go i {
  --cta-nudge: 4px;
}

.cta__go i {
  transition: transform var(--t) var(--ease);
}

/* ── لا محتوى بعد ───────────────────────────── */
.empty-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-7);
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  color: var(--text-3);
}

.empty-note i {
  color: var(--lic-gold);
}

/* ── النماذج ────────────────────────────────── */

/* حقل الشرك: مخفي عن العين وعن قارئ الشاشة ومسار لوحة المفاتيح.
   لا يُستعمل ‎display:none‎ وحده لأن بعض الآليات تتخطّى المخفي صراحةً —
   والمقصود أن يبدو حقلاً عادياً لها. */
.hp {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.form--boxed {
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.form__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col), 100%), 1fr));
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}

.field .req {
  color: var(--brand);
  text-decoration: none;
  font-weight: 700;
}

.field .opt {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-weight: 400;
}

.field .opt a {
  color: var(--brand);
  text-decoration: underline;
}

.field input,
.field select,
.field textarea {
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  width: 100%;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--line-2);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

.field input:read-only {
  background: var(--surface);
  color: var(--text-2);
  cursor: default;
}

.field textarea {
  resize: vertical;
  min-height: 90px;
}

.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid {
  border-color: var(--lic-red-lt);
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--brand);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
}

.check input {
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 3px;
  accent-color: var(--brand);
  flex-shrink: 0;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r);
  border: 1px solid;
  margin-block-end: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.alert i {
  font-size: 1.15rem;
  margin-block-start: 1px;
}

.alert--success {
  background: color-mix(in srgb, var(--st-available) 12%, transparent);
  border-color: color-mix(in srgb, var(--st-available) 45%, transparent);
  color: var(--st-available);
}

.alert--error {
  background: color-mix(in srgb, var(--lic-red-lt) 12%, transparent);
  border-color: color-mix(in srgb, var(--lic-red-lt) 45%, transparent);
  color: var(--lic-red-lt);
}

/* ── التذييل ─────────────────────────────────── */
.site-footer {
  background: var(--bg-2);
  border-block-start: 1px solid var(--line);
  padding-block: var(--sp-8) var(--sp-5);
}

.site-footer__top {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1.4fr .7fr 1.2fr .8fr;
  padding-block-end: var(--sp-6);
  border-block-end: 1px solid var(--line);
}

@media (max-width: 1000px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }
}

.site-footer h3 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-block-end: var(--sp-3);
}

.site-footer__brand img {
  width: min(170px, 45vw);
  margin-block-end: var(--sp-4);
}

.site-footer__slogan {
  font-weight: 700;
  color: var(--brand);
  margin-block-end: var(--sp-3);
}

.site-footer__meta {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 2;
}

.site-footer__meta i {
  color: var(--brand);
  margin-inline-end: var(--sp-2);
}

.site-footer__nav ul {
  display: grid;
  gap: var(--sp-2);
}

.site-footer__nav a {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.site-footer__nav a:hover {
  color: var(--brand);
}

.site-footer__orgs {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.org__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.org__row img {
  width: 34px;
  height: auto;
  flex-shrink: 0;
}

.social-list {
  display: flex;
  gap: var(--sp-2);
  margin-block-end: var(--sp-4);
}

.social-list a {
  inline-size: 38px;
  block-size: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  transition: all var(--t-fast) var(--ease);
}

.social-list a:hover {
  color: var(--gold-ink);
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-2px);
}

.site-footer__bottom {
  padding-block-start: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ── زر العودة للأعلى ────────────────────────── */
/* inset-inline-end منطقي — يتبع الاتجاه تلقائياً */
.to-top {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 90;
  inline-size: 46px;
  block-size: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--gold-ink);
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--t) var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
}

/* ── الظهور بالتمرير ─────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease) var(--d, 0ms),
    transform var(--t-slow) var(--ease) var(--d, 0ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}
/* ══ جسم صفحة منشأة من اللوحة (م7) ══════════════ */
.pagebody { padding-block: clamp(2rem, 5vw, 3.5rem); }
.pagebody__lead {
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    color: var(--text-2);
    max-width: 65ch;
    margin-bottom: 1.4rem;
}
.pagebody__text { max-width: 70ch; }
.pagebody__text p { margin-bottom: 1rem; line-height: 1.9; }
.pagebody__media {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--col-sm), 100%), 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}
.pagebody__media figure { margin: 0; }
.pagebody__media img {
    width: 100%;
    height: auto;
    border-radius: var(--r);
    border: 1px solid var(--line);
    display: block;
}
.pagebody__media figcaption {
    margin-top: .5rem;
    font-size: var(--fs-xs);
    color: var(--text-3);
}

/* ══ نائبُ العقدة الفارغة — وضعُ التحرير وحده  (م31) ══
   ⚠️ **لا يُصدَّر في صفحةٍ منشورة بحال**: `nodeStub()` في `inc/tree.php`
   تفحص `editMode()` قبل أن تطبع حرفاً، وهي كاذبةٌ حتماً بلا رمزٍ صالح.
   فالقاعدةُ هنا لا تُطابق شيئاً في الموقع المنشور.

   وعلَّتُها: عقدةٌ فارغةٌ تُصيَّر **لا شيء** — فلا تُنقر فلا تُملأ أبداً.
   «أضفتُ عنصراً ولم يُضَف» كانت وصفاً صادقاً لِما يراه المستخدم. */
.lic-stub {
    display: block;
    margin: var(--sp-3, .75rem) auto;
    max-width: 62ch;
    padding: .7rem 1rem;
    border: 1px dashed var(--brand, #e9c25c);
    border-radius: var(--r-md, 10px);
    background: color-mix(in srgb, var(--brand, #e9c25c) 7%, transparent);
    color: var(--text-2, #c3cbdd);
    font-size: var(--fs-sm, .85rem);
    text-align: center;
}
.lic-stub b { color: var(--brand, #e9c25c); font-weight: 700; }

/* ══════════════════════════════════════════════════════════
   نداءُ البطولة في الرئيسية  (م35 · UP-07)

   ⚠️ **سقط `.comp*` و`.team*` معاً.** كانا لصفحة بطولةٍ بمربَّعات فرقٍ
   وجدولِ نتائج، ثمّ جاء التصحيح: البطولةُ موقعٌ مستقلٌّ لا صفحةٌ هنا.
   ولا يُترك نمطٌ بلا وسمٍ يقرؤه — ورقةٌ تحمل أنماطاً ميتةً تُقرأ بعد
   شهرٍ على أنّها قيدٌ قائم، فيُبنى عليها.

   والصندوقُ **مميَّزٌ لا رابعَ الأقسام** بلفظ الطلب («بشكل مميَّز»):
   حافّةٌ ذهبيّةٌ من جهة البداية، وتدرُّجٌ من لون الهوية — فيُقرأ نداءً
   لا فقرةَ محتوى. والحافّةُ منطقيّةُ الاتّجاه (`inline-start`) فتنقلب
   مع اللغة بلا قاعدةٍ ثانية.
   ══════════════════════════════════════════════════════════ */

.ctf__box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border: 1px solid color-mix(in srgb, var(--lic-gold) 38%, var(--line));
  border-inline-start: 4px solid var(--lic-gold);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--lic-gold) 10%, transparent),
      transparent 62%),
    var(--surface);
}

.ctf__badge {
  inline-size: 3.75rem;
  block-size: 3.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--lic-gold-lt), var(--lic-gold));
  color: var(--gold-ink);
  font-size: 1.6rem;
}

.ctf__body { min-inline-size: 0; }
.ctf__body h2 { margin: 0 0 var(--sp-2); }

.ctf__lead {
  color: var(--text-2);
  margin: 0 0 var(--sp-4);
  max-inline-size: 62ch;
}

.ctf__facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
}
.ctf__facts li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  color: var(--text-3);
  font-size: var(--fs-sm);
}
/* ⚠️ `--font-num` على الأرقام وحدها: خطُّها لا يحمل حرفاً عربيّاً،
   فتصييرُ نصٍّ عربيٍّ به يُسقطه إلى خطٍّ احتياطيٍّ لا يُشبه الصفحة. */
.ctf__facts strong {
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  color: var(--brand);
}

.ctf__act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}
.ctf__btn { white-space: nowrap; }
.ctf__host {
  margin: 0;
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  color: var(--text-2);
  letter-spacing: .02em;
}
.ctf__note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ⚠️ **عمودٌ واحدٌ لا عمودان في الضيّق.** جرَّبتُ `auto 1fr` أوّلاً فبقيت
   الأيقونةُ عموداً بجانب نصٍّ طويلٍ و`align-items:center` يُنزلها إلى
   منتصف ارتفاعه — **فتطفو في وسط الفقرة كأنّها تخصّ سطراً منها**، والنصُّ
   يُحشر في عمودٍ ضيّقٍ إلى جانبها. رأيتُه في لقطةِ 390px. */
@media (max-width: 860px) {
  .ctf__box {
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: var(--sp-4);
    padding: var(--sp-5);
  }
  .ctf__badge { inline-size: 3rem; block-size: 3rem; font-size: 1.3rem; }
  .ctf__lead  { margin-block-end: var(--sp-3); }
  .ctf__facts { gap: var(--sp-4); }
  .ctf__act   { align-items: stretch; }
  .ctf__btn   { justify-content: center; }
}
/* شريحةُ الحالة تتبع نغمةَ المنافسة — القيمُ من `COMP_STATUS` وحدها */
.chip[data-tone="ok"] {
  background: color-mix(in srgb, var(--ok, #2e9e5b) 18%, transparent);
  border-color: color-mix(in srgb, var(--ok, #2e9e5b) 45%, transparent);
}
.chip[data-tone="warn"] {
  background: color-mix(in srgb, var(--warn, #d08700) 18%, transparent);
  border-color: color-mix(in srgb, var(--warn, #d08700) 45%, transparent);
}
.chip[data-tone="gold"] {
  background: color-mix(in srgb, var(--lic-gold) 22%, transparent);
  border-color: color-mix(in srgb, var(--lic-gold) 45%, transparent);
}

/* فقراتُ اليوم التي لا منصّةَ لها تُخفَّف — نفسُ قرار `break` (م34) */
.tag[data-tone="soft"] { opacity: .75; }
.agenda__row[data-type="registration"],
.agenda__row[data-type="lunch"],
.agenda__row[data-type="prayer"] { background: var(--surface-2); }