/* ═══════════════════════════════════════════════════════
 *  sitemap.css — أُستخرِج آليًا من pages/sitemap.php
 *  المقطع 1 من 1 · سطور 169–169 في الأصل.
 *  ⚠️ الترتيب بين المقاطع مقصود: بينها كتل <style> مشروطة
 *     باقية في الصفحة، والتتالي يعتمد على تسلسلها.
 *  ⚠️ نُقلت إلى لغة تصميم الرئيسية (٥ سبتمبر ٢٠٢٦): كل الرموز المحلّية حُذفت
 *     وتُورَث من wtq-v4-base.css مباشرة — لا جسر أسماء بديلة.
 *     لا كحلي ولا تدرّج ولا ظلّ، والزوايا var(--r) عدا الكبسولات 999px.
 *  ⚠️ إعادة بناء قويّة (٨ سبتمبر ٢٠٢٦): الصفحة صارت على مكوّنات لغة الرئيسية —
 *     رأس بعلامة «نقطة + كلمة» ← صفّ إحصاءات ← شريط تنقّل على أرضية لوح ←
 *     تسعة أقسام برأس (بلاطة أيقونة + h2 + عدّاد) وشبكة بطاقات ← بطاقة ملاحظة
 *     ← نداء ختامي بعرض الشاشة. والأيقونات كلها SVG خطّي مضمَّن.
 * ═══════════════════════════════════════════════════════ */
/* الخطّ موروث من body (Alexandria) — لا عائلة ثانية.
   overflow-x:clip كي تخرج أشرطة الأقسام بعرض الشاشة بلا فيض أفقي. */
.smx{color-scheme:light;color:var(--ink);background:#fff;line-height:1.75;overflow-x:clip;container-type:inline-size}
.smx .wrapx{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.smx a{text-decoration:none}

/* ═══ الأيقونات ═══
   ⚠️ ٨ سبتمبر ٢٠٢٦ — وسوم <i class="fas fa-…"> تُحيَّد ولا تُحذف (قاعدة: لا حذف
   من الترميز)، وكل موضع ظاهر أخذ بديله SVG خطّيًّا مضمَّنًا بأسلوب الرئيسية
   (stroke-width 1.8 · نهايات مستديرة): البحث · المسرد السريع التسعة · رؤوس
   الأقسام التسعة · أسهم البطاقات والصفوف · ملاحظة الزواحف. والاستثناء الوحيد
   أيقونة علامة الهيرو: توقيع العلامة في الرئيسية «نقطة زرقاء + كلمة» بلا أيقونة
   في مواضعها كلها، والنقطة أدناه هي بديلها. */
.smx .fas{display:none}
.smx .ar{display:none}
.smx .ico{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:none}
/* سهم البطاقة/الصفّ: اتّجاهه يُختار في PHP من $__dir فلا ينقلب خطأً في الإنجليزية
   (transform لا يُقلَب في I18nCss عمدًا، فالقلب البصري ليس حلًّا هنا). */
.smx .ic-ar{width:13px;height:13px;flex:none;color:var(--muted);transition:color .18s}

/* ═══ فتات التنقّل ═══ */
.sm-bc{padding:16px 0 0;font-size:12.5px;font-weight:400;color:var(--muted)}
.sm-bc ol{list-style:none;display:flex;gap:8px;padding:0;margin:0;flex-wrap:wrap}
.sm-bc a{color:var(--blue);font-weight:500}

/* ═══ الهيرو — رأس على قالب الرئيسية: علامة ← h1 ← سطر شرح ═══ */
.sm-hero{padding:44px 0 8px;text-align:center}
/* ⚠️ العلامة كانت كبسولة زرقاء بأيقونة Font Awesome — وهي في الرئيسية
   «نقطة زرقاء 6px + كلمة» بلا خلفية ولا حدّ في مواضعها كلها (قِيس). */
.sm-ey{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;color:var(--muted);font-weight:500;font-size:12.5px;padding:0;border-radius:0;margin-bottom:14px}
.sm-ey::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15);flex:0 0 auto}
.sm-hero h1{font-size:clamp(32px,4.2vw,48px);font-weight:800;color:var(--ink);letter-spacing:-.03em;margin:0 0 14px;line-height:1.28}
.sm-hero > p{color:var(--muted);max-width:62ch;margin:0 auto;font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9}

/* ═══ صفّ الإحصاءات — رقم كبير فوق لصيقة، لا كبسولات ═══
   مكوّن الكتالوج: الرقم tabular-nums واللصيقة 12.5px var(--muted).
   اللصيقة عقدة نصّ شقيقة لـ<b> فتصير عنصرًا ضمنيًّا في العمود — ترث من .sm-stat. */
.sm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.sm-stat{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 10px 18px;font-size:12.5px;font-weight:400;color:var(--muted);line-height:1.7}
.sm-stat b{font-size:clamp(25px,2.6vw,32px);font-weight:500;color:var(--blue);line-height:1.35;font-variant-numeric:tabular-nums}

/* ═══ البحث ═══ */
.sm-search{max-width:520px;margin:26px auto 0;position:relative}
/* الحشو منطقي لا فيزيائي: الفراغ 42px يجب أن يقع على الجهة التي تحملها
   الأيقونة (inset-inline-end) في اللغتين — بالحشو الفيزيائي كان يُقلَب في
   النسخة الإنجليزية المولَّدة فيتراكب صندوق النصّ مع الأيقونة 11px (قِيس). */
.sm-search input{width:100%;padding-block:12px;padding-inline:16px 42px;border:1px solid var(--line);border-radius:var(--r);font-family:inherit;font-size:14px;font-weight:400;box-sizing:border-box;color:var(--ink);background:#fff}
.sm-search input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.sm-search .ico{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px;pointer-events:none}
.sm-none{display:none;text-align:center;color:var(--muted);font-size:13.5px;font-weight:400;padding:26px 0}

/* ═══ المسرد السريع — شريط بعرض الشاشة على أرضية لوح ═══
   ⚠️ الأرضية لوح كي لا يتوالى ثلاثة أسطح بيضاء (هيرو ← مسرد ← أوّل قسم)
   قبل أوّل تناوب. الآليّة نفسها المستعملة في .sm-cta (هامش سالب + حشو
   معوِّض بمرجع 50cqw لا 50vw، فشريط التمرير لا يصنع فيضًا أفقيًّا). */
.sm-qnav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:40px 0 0;padding:22px 0;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-inline:calc(50cqw - 50%);margin-inline:calc(50% - 50cqw)}
/* حشو 9px: هدف اللمس ≥ 40px ارتفاعًا على الهاتف (قِيس) */
.sm-qnav a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:12.5px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:7px;transition:border-color .16s,color .16s}
.sm-qnav a:hover{border-color:var(--blue);color:var(--blue)}
.sm-qnav a .ico{width:14px;height:14px;color:var(--blue)}

/* ═══ الأقسام ═══
   الإيقاع 96px كإيقاع اللغة (.v4-sec في wtq-v4-base.css).
   والأرضيّات تتناوب أبيض / var(--panel) بلا قسمين متتاليين بلون واحد:
   الأقسام التسعة كلها <section> شقيقة داخل .wrapx، فـnth-of-type(even)
   يصبغ 2 و4 و6 و8 ويبقى 1 و3 و5 و7 و9 بيضاء — وقبلها شريط المسرد على لوح
   فالتناوب يبدأ صحيحًا — ثم بطاقة sm-xml البيضاء فشريط sm-cta على لوح. */
.sm-sec{padding:96px 0}
.sm-sec:nth-of-type(even){background:var(--panel);padding-inline:calc(50cqw - 50%);margin-inline:calc(50% - 50cqw)}
/* رأس القسم: بلاطة أيقونة 40px (كـ.v4-itile) ← h2 ← عدّاد، ثم سطر شرح تحتها. */
.sm-sh{display:flex;align-items:center;gap:14px;margin-bottom:0}
.sm-sh .ic{width:40px;height:40px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:grid;place-items:center;flex:none}
.sm-sh .ic .ico{width:19px;height:19px}
/* 1.7 ارتفاعًا: عنوان عربي قد يُكسر على سطرين، والشدّة تعلو حدّ السطر */
.sm-sh h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;color:var(--ink);letter-spacing:-.025em;line-height:1.7;margin:0}
.sm-sh .cnt{font-size:12px;font-weight:500;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-variant-numeric:tabular-nums;flex:none}
/* 54px = بلاطة 40 + فجوة 14 → السطر يبدأ تحت العنوان بالظبط */
.sm-sd{color:var(--muted);font-size:clamp(13.5px,1.05vw,15px);font-weight:300;line-height:1.9;margin:14px 0 30px;padding-inline-start:54px;max-width:62ch}

/* شبكة البطاقات — على قالب .v4-card: حدّ رفيع بلا ظلّ، عنوان 500 ووصف 300 */
.sm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sm-item{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;transition:border-color .18s,transform .18s}
.sm-item:hover{border-color:#C7D7FB;transform:translateY(-2px)}
.sm-item:hover .ic-ar{color:var(--blue)}
.sm-item:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* السهم يُدفع إلى نهاية السطر بـorder — الترميز لا يُعاد ترتيبه */
.sm-item > .tx{order:1;flex:1;min-width:0}
.sm-item > .ic-ar{order:2;margin-top:4px}
.sm-item .t{display:block;font-weight:500;color:var(--ink);font-size:14.5px;line-height:1.7}
.sm-item .d{display:block;color:var(--muted);font-size:13px;font-weight:300;line-height:1.85;margin-top:4px}
.sm-item.here{background:var(--blue-50);border-color:#D6E2FB}

/* ═══ القوائم الديناميكية (العقود · المقالات) ═══ */
.sm-list{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:4px 20px;max-height:440px;overflow-y:auto}
.sm-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.sm-row:last-child{border-bottom:none}
.sm-row > .t{order:1;font-weight:500;color:var(--ink);font-size:13.5px;line-height:1.7;flex:1;min-width:0}
/* التاريخ جزيرة لاتينية داخل صفّ عربي — يُعزل كي لا ينقلب ترتيبه */
.sm-row > .dt{order:2;font-size:12px;font-weight:400;color:var(--muted);flex-shrink:0;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.sm-row > .ic-ar{order:3}
.sm-row:hover .t{color:var(--blue)}
.sm-row:hover .ic-ar{color:var(--blue)}
.sm-row:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sm-empty{color:var(--muted);font-size:13.5px;font-weight:400;padding:18px 0;text-align:center}
.sm-empty a{color:var(--blue);font-weight:500}

/* ═══ ملاحظة الزواحف — بطاقة ببلاطة أيقونة كبطاقات اللغة ═══ */
.sm-xml{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:0;font-size:13.5px;font-weight:300;color:var(--muted);line-height:1.9}
.sm-xml .itile{width:40px;height:40px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:grid;place-items:center;flex:none}
.sm-xml .itile .ico{width:19px;height:19px}
.sm-xml b{color:var(--ink);font-weight:500}
.sm-xml a{color:var(--blue);font-weight:500}

/* ═══ النداء الختامي: شريط بعرض الشاشة على var(--panel) بحشو 96px بلا زاوية ═══
   الهامش السالب يخرجه من حاوية 1240 والحشو يعيد محتواه إلى عرضها بالضبط.
   ⚠️ المرجع 50cqw (عرض .smx) لا 50vw: عرض الشاشة يشمل شريط التمرير فيفيض 7px
      أفقيًّا (قِيس عند 1240)، وعرض الحاوية لا يشمله فالفيض صفر.
      والسطران السابقان احتياطي لمتصفّح بلا وحدات الحاويات. */
.sm-cta{background:var(--panel);border-radius:0;text-align:center;color:var(--ink);padding:96px 28px;margin:64px 0 0;padding-inline:calc(50cqw - 50%);margin-inline:calc(50% - 50cqw)}
.sm-cta h2{font-size:clamp(30px,3.8vw,46px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.7;margin:0 0 14px}
.sm-cta p{color:var(--muted);margin:0 auto 30px;max-width:62ch;font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9}
.sm-cta a{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);border:1px solid var(--blue);color:#fff;font-weight:500;font-size:14.5px;padding:12px 26px;border-radius:var(--r);margin:0 5px;transition:background .16s,transform .15s}
.sm-cta a:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-1px)}
.sm-cta a .ico{width:15px;height:15px}
.sm-cta a.gh{background:#fff;color:var(--blue);border-color:#C7D7FB}
.sm-cta a.gh:hover{background:var(--blue-50);border-color:var(--blue)}

/* ═══ الشاشات الأصغر — لا نصّ يُقرأ تحت 12px ═══ */
@media(max-width:900px){
  .smx .wrapx{padding:0 20px}
  .sm-sec{padding:64px 0}
  .sm-grid{grid-template-columns:1fr 1fr}
  .sm-qnav{margin-top:32px;padding-block:18px}
  .sm-cta{padding:64px 20px;padding-inline:calc(50cqw - 50%);margin-top:48px}
}
@media(max-width:640px){
  .sm-stats{grid-template-columns:1fr 1fr}
  .sm-cta a{display:flex;width:100%;margin:0 0 10px}
  .sm-cta a:last-child{margin-bottom:0}
}
@media(max-width:620px){
  .sm-grid{grid-template-columns:1fr}
  .sm-sd{padding-inline-start:0}
  .sm-sh{gap:12px}
}

/* أهداف اللمس على الهاتف: الروابط السطرية بلا صنف — فتات التنقّل، ورابطا
   ملاحظة الزواحف (‎/sitemap.xml‎ و‎/robots.txt‎)، ورابط الحالة الفارغة —
   ارتفاع صندوقها 15.2px عند 390، دون 40px المطلوبة (قِيس).
   inline-flex يرفع صندوق السطر نفسه، فلا تتراكب مساحتان قابلتان للّمس
   (بعكس حشو رأسي بهامش سالب، وهو ما يجعل سطرين متجاورين يتداخلان). */
@media(max-width:768px){
  .sm-bc ol{align-items:center}
  .sm-bc a,.sm-xml a,.sm-empty a{display:inline-flex;align-items:center;min-height:40px}
}

/* WTQ-IOS-ZOOM — الهاتف: خطّ الحقول 16px يمنع تكبير سفاري التلقائي
   عند التركيز (سلوك iOS لأي حقل خطّه أصغر من 16px، ولا يتراجع). */
@media(max-width:768px){
  .sm-search input,#smq{font-size:16px}
}