/* ═══════════════════════════════════════════════════════════════════════════
   assets/css/jadhlah-tour.css — الجولةُ الإرشادية (ن٧ · سبتمبر ٢٠٢٦)
   ═══════════════════════════════════════════════════════════════════════════

   🔑 **ولا مكتبةَ خارجية ولا CDN.** القاعدةُ مكتوبةٌ في هذا المشروع
      (`jadhlah-picker.js:47`)، والسابقةُ مقيسة: `public_footer.php` كُتب
      بأصناف Tailwind وتعليقُه يقول «لا يفترض شيئاً»، فكانت `photographer.php`
      على جوال ٣٩٠ بكسل `scrollWidth = 1000`.
      ومكتبةُ الجولات الوحيدة في المستودع (`driver.js` في
      `invitations/admin.php:194`) تُحمَّل من `cdn.jsdelivr.net` — ورسالتُها
      عند الانقطاع «⚠️ تعذر تحميل الجولة».

   🔴 **وسقفُ `z-index` مأخوذٌ فعلاً:** `jadhlah-picker.css:162` ⇒
      `2147483000`. وقيمتان متسابقتان على السقف تعنيان أن من يأتي أخيراً
      يفوز — **والأسلم أن تُغلق الجولةُ كلَّ مفتوحٍ قبل الإبراز** ثم تجلس
      فوقه بواحد. فالمنافسةُ على الرقم علاجُ عرَضٍ، والإغلاقُ علاجُ سبب.

   ⚠️ **وكلُّ رمزٍ هنا معرَّفٌ في `tokens.css`** — والمتغيّرُ غير المعرَّف
      **لا يرمي شيئاً**: يظهر النصُّ بلا لون، وهي مصيدةٌ وقعت في
      `portal.css` (`--gold-light`).
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═════════════════════════════════════════════════════════════════════
   ٠) الرموز المحليّة — والورقةُ **مستقلّةٌ عن `tokens.css`**
   ═════════════════════════════════════════════════════════════════════
   🔴 **ولم يكن كذلك — ومقيسٌ في متصفّحٍ حقيقيّ لا مُستنتَج.** كانت
      44 قراءةً خاماً بلا احتياطيّ، فصفحةٌ لا تحمّل `tokens.css`
      تُسقط الخاصيةَ **بصمت**:

        `.jt-pop` ⇒ خلفيةٌ شفّافة · نصٌّ أسود · بلا حدّ ولا استدارة · خطُّ Times

      أي **زرُّ الإجراء الأساسيّ نصُّه أسودُ على خلفيةٍ شفّافة** —
      لا يُرى إطلاقاً، ولا خطأَ ولا رسالة. وهو نمط `--gold-light` في
      `portal.css` بعينه، موثَّقٌ في `CLAUDE.md`.

   🔑 **والعلاج خريطةٌ مُنطاقة لا كتلةُ `html { … }` عامّة** — وثلاثةُ
      أسبابٍ مقيسة:
      ١. كتلةٌ عامّة **تُسرّب رموزاً إلى صفحةٍ لم تُعرّفها قطّ**، فعنصرٌ
         فيها يقرأ `var(--txt, #333)` بنيّةِ ثيمٍ فاتح يصير أبيضَ على
         أبيض. **فالمكوّنُ يُصلح نفسَه ويكسر جارَه.**
      ٢. ولا تبعيّةَ ترتيبِ تحميل — الخريطةُ داخل الورقة نفسِها.
      ٣. وهو **الاصطلاحُ المقيسُ في هذا المستودع**: `jadhlah-picker.css`
         (`--k-*`) و`includes/app_shell.php` (`--jg`/`--jbd`) كلاهما
         يفعله، والثاني توثيقُه صريح: «يحمل أنماطَه معه».

   ⚠️ **والقيمُ منقولةٌ من `:root` في `tokens.css` آلياً لا باليد** —
      وسابقةُ `display_name` في ثلاث هجرات موثَّقةٌ في `CLAUDE.md`:
      كُتب فوقها «مقروءةٌ من Migration 015» وكانت من الذاكرة.
   🔑 **و`tokens.css` تبقى المرجع:** `var(--x, <منقول>)` — فحين
      تُحمَّل تفوز هي، وحين تغيب يبقى المكوّنُ كما صُمّم. وتغييرُ
      الهوية فيها **يصل هنا بلا لمس حرف**.
   ═════════════════════════════════════════════════════════════════════ */
.jt-root {
  --jt-ease          : var(--ease, cubic-bezier(.22,.61,.36,1));
  --jt-font-body     : var(--font-body, 'Thmanyah Sans', 'YearCamel', 'Tajawal', -apple-system, 'Segoe UI', Tahoma, sans-serif);
  --jt-font-display  : var(--font-display, 'Thmanyah Serif Display', 'YearCamel', 'Tajawal', -apple-system, 'Segoe UI', Tahoma, sans-serif);
  --jt-font-num      : var(--font-num, 'YearCamel', 'Tajawal', -apple-system, 'Segoe UI', Tahoma, sans-serif);
  --jt-fs-lg         : var(--fs-lg, 17px);
  --jt-fs-md         : var(--fs-md, 14px);
  --jt-fs-sm         : var(--fs-sm, 13px);
  --jt-fs-xs         : var(--fs-xs, 12px);
  --jt-fw-bold       : var(--fw-bold, 700);
  --jt-fw-medium     : var(--fw-medium, 500);
  --jt-gold          : var(--gold, #D4AF37);
  --jt-gold-bright   : var(--gold-bright, #EACB66);
  --jt-gold-dim      : var(--gold-dim, #8f7622);
  --jt-line          : var(--line, #2a2a34);
  --jt-r             : var(--r, 14px);
  --jt-r-lg          : var(--r-lg, 20px);
  --jt-sh-3          : var(--sh-3, 0 12px 40px -12px rgba(0,0,0,.7));
  --jt-surface       : var(--surface, #131318);
  --jt-surface-2     : var(--surface-2, #1a1a21);
  --jt-surface-3     : var(--surface-3, #24242c);
  --jt-t-fast        : var(--t-fast, .16s);
  --jt-txt           : var(--txt, #f4f4f6);
  --jt-txt-2         : var(--txt-2, #adafb8);
  --jt-txt-3         : var(--txt-3, #71717c);
}


/* ── زرُّ «؟» ─────────────────────────────────────────────────────────────
   ⚠️ **ويرث حجمَ صفحته:** يُطبع بصنفِ الصفحة (`tb-btn` في الصدفة،
      `japp-help` في شريط التطبيق) **مع** `jtour-open`، فالأبعادُ من هناك
      وهذا الملفُّ يضبط الأيقونةَ وحدها. ونسخةٌ ثانية من زرٍّ قائم تفترق
      عنه بعد أول تعديل. */
.jtour-open { cursor: pointer; }
.jtour-open svg { width: 18px; height: 18px; display: block; fill: none; }
/* ⚠️ **و`fill: none` صريحةً** — الأيقونةُ مرسومةٌ بالخطّ وحده، وصفحةٌ تكتب `svg{fill:currentColor}`
   على أزرارها (لوحةُ الضيوف: `.ig-ib svg`) كانت تملأ الدائرةَ بلون «؟» نفسِه فتختفي العلامة. */

/* شريطُ التطبيق: زرٌّ بحجم `.japp-home` نفسِه */
/* 🔴 **وهذا الزرّ وحده خارج خريطة `--jt-*` — وليس سهواً.**
   هو يعيش داخل `<nav class="japp">` لا داخل `.jt-root`، فلا يرث
   الخريطةَ أصلاً. وجارُه `.japp-home` يقرأ نطاقَ الشريط نفسِه
   (`--jbd` · `--jmu` · `--jg` · `--jgd`) المعرَّف في `app_shell.php`
   بقيمٍ صريحة.
   ⚠️ **ومقيسٌ في المتصفّح:** كان يقرأ `--line` و`--txt-2` العامّين،
      فعلى صفحةٍ بلا `tokens.css` خرج بـ`border-width: 0` و
      `color: rgb(0,0,0)` **وجارُه إلى جانبه سليم** — زرّان متلاصقان
      أحدُهما بحدٍّ والآخرُ بلا حدّ، وهو أظهرُ ما يُرى.
   🔑 **فالمكوّنُ يتبع نطاقَ مضيفه لا نطاقَه** حين يُرسَم داخله. */
.japp-help {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--jbd, #26262b);
  border-radius: 10px;
  background: transparent;
  color: var(--jmu, #9a9aa2);
  padding: 0;
}
.japp-help:hover { color: var(--jg, #D4AF37); border-color: var(--jgd, #B8941E); }
/* 🔴 **و٤٤×٤٤ على الجوال — والقاعدةُ يوثّقها `app_shell.php` نفسُه**
   (`:414`): «الإصبعُ ليست مؤشّراً: ٤٤ بكسل هو الحدُّ الذي توصي به أبل
   وجوجل، ودونه يُخطئ اللمسُ فيُفتح تطبيقٌ آخر».
   ⇒ وزرٌّ جديد بـ٣٤ بجوار `.japp-home` بـ٤٤ **يُخالف قاعدةً مكتوبةً في
     الملفّ الذي يجاوره** — ومقيسٌ في المتصفّح: كان ٣٤×٣٤ والبيتُ ٤٤.
   ⚠️ **والحدُّ ٦٤٠ لا ٥٦٠** — هو حدُّ استعلام الشريط نفسِه، ورقمٌ
      مختلفٌ يُنتج نافذةً بين الحدّين يتفاوت فيها الزرّان. */
@media (max-width: 640px) {
  .japp-help { width: 44px; height: 44px; border-radius: 12px; }
  .japp-help svg { width: 19px; height: 19px; }
}

/* ── الطبقةُ والإبراز ───────────────────────────────────────────────────── */
.jt-root {
  position: fixed;
  inset: 0;
  z-index: 2147483001;          /* فوق منتقي القوائم (2147483000) بواحد */
  pointer-events: none;
}
.jt-root.is-on { pointer-events: auto; }

/* 🔑 **التعتيمُ بـ`box-shadow` هائلٍ حول المستطيل** لا بأربع طبقات: طبقةٌ
   واحدة تتحرّك، فلا أربعةُ مستطيلاتٍ تفترق بنصفِ بكسلٍ عند التمرير فيظهر
   خطٌّ فاصلٌ بينها. */
.jt-spot {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .72), 0 0 0 2px var(--jt-gold) inset;
  pointer-events: none;
}
/* 🔴 **ولا انتقالَ على موضع الإبراز — وهو قرارٌ مقيسٌ لا ذوق.**
   كُتب أولاً `transition: top/left/width/height .28s`، فبدا أنعمَ عند
   القفز بين الخطوات. **والقياسُ أسقطه:** الموضعُ يُحدَّث في كل إطارٍ أثناء
   التمرير الناعم (`scrollIntoView({behavior:'smooth'})`)، فالانتقالُ
   **يُعاد تشغيلُه في كل إطار** والإبرازُ يلاحق العنصرَ بتأخّرٍ ثابت.
   ⇒ ومقيسٌ في المتصفّح: تغطيةُ `#navSearch` و`#layEdit` كانت **صفراً**
     (المستطيلُ في مكانٍ آخر تماماً)، وثلاثُ بطاقاتٍ أخرى دون ٨٠٪.
   🔑 **والإبرازُ يجب أن يكون ملتصقاً بالعنصر لا ملاحقاً له** — والصفحةُ
      هي التي تتحرّك بنعومة، فالالتصاقُ هو ما يبدو صحيحاً. */

.jt-spot.jt-none {
  top: 50%; left: 50%; width: 0; height: 0;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .78);
}

/* ── الفقاعة ─────────────────────────────────────────────────────────────── */
.jt-pop {
  position: absolute;
  width: min(360px, calc(100vw - 32px));
  background: var(--jt-surface);
  border: 1px solid var(--jt-line);
  border-radius: var(--jt-r);
  box-shadow: var(--jt-sh-3);
  padding: 16px 18px 14px;
  color: var(--jt-txt);
  font-family: var(--jt-font-body);
  direction: rtl;
  text-align: right;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s var(--jt-ease), transform .2s var(--jt-ease);
}
.jt-pop.is-in { opacity: 1; transform: none; }

.jt-pop h4 {
  margin: 0 0 8px;
  /* 🆕 ن٢٨ — **فسحةُ زرّ الإغلاق:** × في زاوية البداية (١٠→٣٨ بكسل) والحشوةُ ١٨ — فكان يغطّي
     أوّلَ العنوان ونصفَ وسم «جديد». ٢٦ تُبقي بينهما ٦ بكسل. */
  padding-inline-start: 26px;
  font-family: var(--jt-font-display);
  font-size: var(--jt-fs-lg);
  font-weight: var(--jt-fw-bold);
  color: var(--jt-gold-bright);
  line-height: 1.4;
}
.jt-pop p {
  margin: 0;
  font-size: var(--jt-fs-md);
  line-height: 1.85;
  color: var(--jt-txt-2);
}

/* 🆕 ن٢٨ — وسمُ «جديد»: ما أُضيف بعد آخر نسخةٍ رآها المستخدم.
   ⚠️ **ونصٌّ داكنٌ على الذهب** كزرّ الإجراء (`.jt-btn.pri`) — تباينُ الأبيض
      على `#D4AF37` دون ٢:١، وهو ما صحّحته الدعوات في ن٢٥ حساباً لا ذوقاً. */
.jt-new {
  display: inline-block;
  margin-inline-end: 8px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--jt-gold);
  color: #17140a;
  font-family: var(--jt-font-body);
  font-size: var(--jt-fs-xs);
  font-weight: var(--jt-fw-bold);
  line-height: 1.7;
  vertical-align: 2px;
}

/* ── الذيل: تقدّمٌ وأزرار ──────────────────────────────────────────────── */
.jt-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--jt-line);
}
/* 🔑 **والعدّادُ رقمٌ لا نقاط:** الخطواتُ تُسقَط بالصلاحية وبغياب المرساة،
   فعددُها يختلف من مستخدمٍ لآخر — وصفُّ نقاطٍ يتبدّل طولُه بين الشاشات
   يبدو عطلاً، ورقمٌ «٣ من ٧» يصدُق دائماً. */
.jt-n {
  font-family: var(--jt-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--jt-fs-xs);
  color: var(--jt-txt-3);
  margin-inline-end: auto;
  white-space: nowrap;
}
.jt-btn {
  appearance: none;
  border: 1px solid var(--jt-line);
  background: var(--jt-surface-2);
  color: var(--jt-txt);
  font-family: inherit;
  font-size: var(--jt-fs-sm);
  font-weight: var(--jt-fw-medium);
  border-radius: 10px;
  padding: 8px 14px;
  min-height: 36px;
  cursor: pointer;
  transition: background var(--jt-t-fast) var(--jt-ease), border-color var(--jt-t-fast) var(--jt-ease);
}
.jt-btn:hover { background: var(--jt-surface-3); }
.jt-btn.pri {
  background: var(--jt-gold);
  border-color: var(--jt-gold);
  color: #17140a;
  font-weight: var(--jt-fw-bold);
}
.jt-btn.pri:hover { background: var(--jt-gold-bright); border-color: var(--jt-gold-bright); }

/* زرُّ الإغلاق × في الزاوية */
.jt-x {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--jt-txt-3);
  font-size: 18px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
}
.jt-x:hover { color: var(--jt-txt); background: var(--jt-surface-3); }

/* ── جوال: ورقةٌ سفلية لا فقاعةٌ عائمة ────────────────────────────────────
   🔴 **والفقاعةُ العائمة على ٣٩٠ بكسل تغطّي ما تشرحه.** العرضُ الأدنى
      للفقاعة ٣٢٨ بكسل، فأينما وُضعت غطّت المرساة. والورقةُ السفلية تترك
      أعلى الشاشة مرئياً — وهو موضعُ الإبراز بعد التمرير. */
@media (max-width: 560px) {
  .jt-pop {
    width: 100vw;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    top: auto !important;
    border-radius: var(--jt-r-lg) var(--jt-r-lg) 0 0;
    border-inline: 0;
    border-bottom: 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(16px);
  }
  .jt-pop.is-in { transform: none; }
  /* 🆕 ن٢٨ — **ورقةٌ علويّة حين المرساةُ في النصف الأسفل** (يضع الصنفَ `jadhlah-tour.js`) —
     شريطُ البوابة السفليّ وزرُّ الحفظ مثبَّتان هناك، والورقةُ السفلية كانت تغطّيهما كاملاً. */
  .jt-pop.jt-top {
    top: 0 !important;
    bottom: auto !important;
    border-radius: 0 0 var(--jt-r-lg) var(--jt-r-lg);
    border-top: 0;
    border-bottom: 1px solid var(--jt-line);
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-bottom: 14px;
    transform: translateY(-16px);
  }
  .jt-pop.jt-top.is-in { transform: none; }
  .jt-pop.jt-top .jt-x { top: calc(10px + env(safe-area-inset-top, 0px)); }
  /* ⚠️ **و٤٨ بكسل للزرّ على اللمس** — والإصبعُ ليست مؤشّراً. */
  .jt-btn { min-height: 48px; padding: 12px 18px; font-size: var(--jt-fs-md); }
  .jt-foot { flex-wrap: wrap; }
  .jt-n { width: 100%; margin: 0 0 4px; }
}

/* ── ⚠️ واحترامُ تفضيل تقليل الحركة ──────────────────────────────────────
   من يُصاب بدوار الحركة يُعطّلها في نظامه، وتجاهلُ تفضيله يجعل الجولة
   تؤذيه — وهي المبنيّةُ لتُعين. */
@media (prefers-reduced-motion: reduce) {
  /* ⚠️ و`.jt-spot` بلا انتقالٍ أصلاً (راجع أعلاه) — فالباقي الفقاعةُ وحدها،
     والتمريرُ يصير `auto` من الجافاسكربت في الحالة نفسِها. */
  .jt-pop { transition: none; transform: none; }
}

/* ── ⚠️ ولا يُخفى شيءٌ بالطباعة إلا الجولة ───────────────────────────────── */
@media print { .jt-root, .jtour-open { display: none !important; } }