/* Findly — تنسيق الجوال وحده
   يُحمَّل بعد dark.css و glass.css في الصفحات الثماني.

   ⚠ قاعدة الملف الوحيدة: **كل ما فيه داخل استعلام وسائط**
   `max-width: 860px` أو أضيق. لا قاعدة عامة واحدة هنا — لأن
   الغرض المعلن هو إصلاح الجوال دون أن يتغيّر في نسخة الحاسب
   بكسل واحد، وحصرُ الملف في الاستعلام يجعل ذلك مضموناً بالبناء
   لا بالانتباه. من يضيف قاعدة خارج الاستعلام يكسر الضمانة.

   وسبب وجوده ملفّاً مستقلّاً لا كتلةً في dark.css: يُقرأ ويُراجَع
   ويُنزع كوحدة واحدة، ولا يختلط بقواعد الحاسب فيُعدَّل أحدها سهواً. */


/* ════════════ ≤ 860px — الجوال واللوح الصغير ════════════ */

@media (max-width: 860px) {

  /* ── سؤال وجواب — على سلّم الخطّ نفسه: 19 · 16.5 · 15.5 · 14 ── */
  .qa-group + .qa-group { margin-block-start: 34px; }
  .qa-group-t { margin-block-end: 14px; font-size: 19px; }
  /* ── بطاقات الوثائق — على سلّم الخطّ نفسه ── */
  .docs-grid  { gap: 14px; }
  .doccard    { padding: 20px 18px; }
  .doccard h3 { font-size: 16.5px; }
  .doccard > p:not(.doc-meta), .doccard .bullets li { font-size: 15.5px; }
  .doc-meta   { font-size: 13px; }
  .doc-size   { font-size: 13px; }

  .qa         { grid-template-columns: 1fr; }
  .qa-item    { padding: 17px 18px; }
  .qa-q       { font-size: 16.5px; }
  .qa-a       { font-size: 15.5px; }
  .qa-more    { font-size: 14px; margin-block-start: 11px; }

  /* ── الهيدر ──
     كان 108px من ارتفاع الشاشة قبل أي محتوى، وشعاره 86px.
     على شاشة 844px ذلك ثُمن الشاشة لشعار وزرَّين. */

  :root { --header-h: 68px; }
  .brand img { block-size: 42px; }
  .hdr-in { gap: 10px; }

  /* ⚠ زرّ القائمة: أيقونته كانت تتكوّم في أعلى الزرّ لا في وسطه.
     السبب في `dark.css`، وهو من النوع الذي لا يُرى إلا بالقياس:

       .chip        { display: grid; place-items: center; }
       .menu-toggle { display: flex; flex-direction: column; }

     `place-items` يوسّط في الشبكة على المحورين. وحين يبدّل
     `.menu-toggle` العرضَ إلى `flex` عموديّ يبقى `align-items`
     نافذاً — فيوسّط أفقياً — بينما المحور الرئيسي (الرأسي) يحكمه
     `justify-content`، ولم يُضبط، فيبقى `flex-start`. النتيجة:
     ثلاثة خطوط بارتفاع 14px تعلو صندوقاً 42px.

     يُعالَج هنا لا في dark.css لأن الزرّ `display: none` على
     الحاسب أصلاً، فلا شيء يتغيّر هناك بحال. */
  .menu-toggle { justify-content: center; }


  /* ⚠ زرّ «اطلب عرض سعر» **لا** يعود إلى الهيدر على الجوال.

     أُعيد سابقاً بحجّة أن زائر الجوال يبقى بلا دعوة ظاهرة، لكنه
     أخرج الهيدر عن سعته: الشعار 165px والزرّ 136px وزرّ القوائم
     30px = 331px داخل 339px متاحة — ثمانية بكسلات لفجوتين، فالتصق
     الثلاثة واندفع زرّ القوائم إلى الحافّة، وسقط زرّ اللغة بقاعدة
     كُتبت خصّيصاً لإفساح المكان له.

     والدعوة ليست مفقودة أصلاً: زرّ «اطلب عرض سعر» أوّل ما يقع تحت
     العنوان في الواجهة، وزرّ الواتساب العائم ظاهر في كل تمرير.
     فيعود الهيدر إلى ما صمّمه `dark.css` أصلاً: شعار · لغة · قائمة
     — ثلاثة عناصر في 339px تتنفّس.

     (`.hdr-cta { display: none }` قائمة في dark.css تحت 860px،
     فحذفُ التجاوز هنا يكفي — لا حاجة إلى قاعدة مضادّة.) */

  /* وزرّ اللغة يبقى ظاهراً عند كل عرض. كان يسقط تحت 380px لأن
     الهيدر لم يتّسع للأربعة؛ وقد صاروا ثلاثة. */



  /* ── الواجهة: بطاقة واحدة في كل عمود ──

     ⚠ كانت `.hx-col` صفّاً أفقياً `overflow-x: auto` بنزيف إلى
     حافّتي الشاشة، وهو حلٌّ صحيح لستّ بطاقات تحشو الشاشة الأولى.
     ومذ صارت بطاقةً واحدة في كل عمود (20-8-2026) انقلب الحلّ
     عيباً: `flex: 0 0 74%` يترك ربع الشاشة فارغاً بلا شيء يُسحب
     إليه، وتمريرٌ جانبيّ لا يقود إلى محتوى. فعادت عموداً بسيطاً.

     (البطاقات الثلاث المنقولة إلى #rates لا تُسحب أيضاً — انظر
     تعليقها هناك.) */

  .hero-x-grid { gap: 22px; }
  /* ⚠ الأعمدة لا تُعطى `1fr` هنا: قاعدة `minmax(0, 360px)` في
     dark.css تحت 1180px هي ما يمنع البطاقة الواحدة من التمدّد إلى
     793px عند 860px. تركُها تعمل يكفي — والحاجة هنا للفجوة فقط. */
  .hx-col { display: grid; gap: 12px; }

  .hx-center { padding-block: 16px 4px; }
  .hx-sub { font-size: 15.5px; }
  .hx-actions { margin-block-start: 28px; gap: 12px; }


  /* ── أهداف اللمس ──
     نقاط تقليب البطاقات 6px: تُرى ولا تُصاب. الحدّ الشفّاف
     يوسّع مساحة الإصابة إلى 26px والنقطة تبقى 6px بصرياً —
     `background-clip: padding-box` هو ما يمنع الحدّ من التلوّن. */

  .gs-dots { gap: 0; }
  .gs-dots button {
    /* ⚠ flex: none إلزامية: النقاط داخل صفّ مرن، فبدونها تنكمش
       من 26px إلى 19px ويضيع نصف ما وُسِّع من مساحة الإصابة. */
    flex: none;
    inline-size: 30px; block-size: 30px;
    border: 12px solid transparent;
    background-clip: padding-box;
    border-radius: 50%;
  }
  .gs-dots button.is-on {
    inline-size: 36px; border-radius: 999px;
    background-clip: padding-box;
  }

  /* حقول المحوّلين: 23px ارتفاعاً لا يُصاب بإصبع. الحاوية .gfx-f
     هي هدف اللمس فعلاً (الحقل داخل label)، فتُرفع هي والحقل معاً. */
  .gfx-f { padding-block: 11px; }
  .gfx-f input, .gfx-f output { min-block-size: 22px; line-height: 22px; }

  /* روابط الفوتر: 26px متلاصقة، إصبعٌ واحد يصيب اثنين */
  .ftr-nav a, .ftr-links a { padding-block: 9px; display: inline-block; }


  /* ── أصغر حجم خطّ مقروء ──
     11px على شاشة صغيرة تُقرأ بجهد، والحدّ العملي 12px. */

  /* استُبدلت بدرجة «الميكرو» في سلّم الخطّ أدناه — 13px لا 12px.
     (كانت تذكر `.hx-src-txt`، وهو صنف ميّت اختفى حين صار لوح
     السورسينج زرّاً زجاجياً.) */


  /* ── الجداول ──
     جدول 640px داخل شاشة 390px يُسحب جانبياً داخل حاويته. ذلك
     مقصود (13.19)، لكن لا شيء كان يخبر الزائر أن فيه ما يُسحب.
     حشوة أضيق تقرّبه من الاتّساع، وتدرّج عند الحافّة يقول الباقي. */

  .tbl { font-size: 13px; }
  .tbl th, .tbl td { padding: 10px 11px; }
  .tbl-wrap, .cbm-scroll { position: relative; }
  .tbl-wrap::after, .cbm-scroll::after {
    content: ""; position: absolute; pointer-events: none;
    inset-block: 0; inset-inline-end: 0; inline-size: 34px;
    background: linear-gradient(to left, rgba(5,21,35,.92), transparent);
  }
  [dir="ltr"] .tbl-wrap::after, [dir="ltr"] .cbm-scroll::after {
    background: linear-gradient(to right, rgba(5,21,35,.92), transparent);
  }


  /* ── إيقاع الصفحة ──
     الرئيسية كانت 17 شاشة، وخدماتنا 12. الحشوة الرأسية وحدها
     تصنع نحو ثلث ذلك على الجوال. */

  .section { padding-block: clamp(40px, 9vw, 58px); }

  /* الفجوات والحشوات تتراكم عبر عشرات البطاقات: تقليصها على
     الجوال وحده يقصّ الصفحة دون أن يمسّ سطراً من المحتوى. */
  .srv-grid, .pcards, .ccards, .formula-grid { gap: 14px; }
  .rates-grid { gap: 12px; }

  /* ⚠ قسم «أسعار وأدوات» **لا** يصير صفّاً يُسحب كعمودَي الواجهة.
     ذاك النمط حُلٌّ لستّ بطاقات تحشو الشاشة الأولى؛ وهذه ثلاث في
     قسم يُبلَغ بالتمرير أصلاً، فالسحب الجانبي هنا يُخفي محتوىً بلا
     مقابل. تبقى عموداً واحداً — الشبكة تفعل ذلك وحدها. */

  /* والزرّان يأخذان عرض الشاشة كأزرار الواجهة، فتُقرأ العائلة واحدة */
  .rates-cta { margin-block-start: 22px; }
  .rates-cta .pill, .rates-cta .glass-btn { flex: 1 1 100%; max-inline-size: 300px; }
  .gcard { padding: 16px; }
  .head { margin-block-end: 28px; }


  /* ── ارتفاع أزرار الواجهة ──
     الأزرار الثلاثة تحت العنوان كانت تبلع 217px من 812 — ربع
     الشاشة لثلاثة أزرار، والعنوان نفسه 44px. وارتفاع كلٍّ منها
     يأتي من السهم الدائري (38px) لا من النصّ، فتصغير السهم هو ما
     يقصّرها فعلاً؛ تقليص الحشوة وحدها يترك السهم يفرض الارتفاع. */

  .hx-actions .pill-arrow,
  .hx-src .pill-arrow { inline-size: 32px; block-size: 32px; }
  .hx-actions .pill-arrow svg,
  .hx-src .pill-arrow svg { inline-size: 14px; block-size: 14px; }

  /* ⚠ `html[dir]` تتصدّر الانتقاء عمداً: قاعدة `html[dir="rtl"] .pill`
     في dark.css تكتب الحشوة بالاختصار، فانتقاء أضعف لا يغلبها. */
  html[dir] .hx-actions .pill { padding-block: 7px; }
  html[dir] .hx-actions .glass-btn,
  html[dir] .glass-btn.hx-src { padding-block: 10px; }

  .hx-title { margin-block-end: 20px; }
  .glass-btn.hx-src { margin-block-start: 12px; }


  /* ── الخلفية: شريط يُرى، لا صورة مدفونة ──

     `object-fit: cover` داخل إطار 375×1167 يرسم صورة 2400×1340
     بعرض 2091px، فلا يظهر منها إلا **18%** — شريحة عمودية رفيعة
     لا يُعرف منها مركب ولا ميناء. والقصّ يفرضه ارتفاع الإطار لا
     شيء آخر: كلّما قصُر الإطار قلّ القصّ.

     فتُحصر الصورة في شريط ينتهي حيث تبدأ البطاقات (480px): يصير
     المرسوم 860px عرضاً، فترتفع الحصّة المرئية إلى **44%** —
     ضعفان ونصف. وما تحت الشريط خلفيةُ الصفحة نفسها: `#051523` هو
     لون الحجاب حرفياً، فبلوغه العتامة الكاملة عند 480px يذيب
     الحدّ فلا يظهر خطّ فاصل.

     ⚠ **والقصّ هو الرافعة الوحيدة.** قيست البدائل: تعتيمُ الصورة
     (`brightness`) مقابل تثقيلِ الحجاب يعطيان — عند تثبيت تباين
     النصّ — التباينَ الداخلي نفسه (0.0215) أي الوضوح نفسه. فلا
     مكسب في المقايضة بينهما، والمكسب كلّه في تقصير الإطار.

     ⚠ **وحدود الحجاب محلولة لا مقدّرة.** الصورة تحمل بقعاً صفراء
     ساطعة (‎rgb(237,233,118)‎ — إضاءة الحمولة)، وكل نصوص الواجهة
     فاتحة. حُسبت لكل مقطع نصّ أدنى عتامة تُبقي تباينه فوق AA، ثم
     بُني التدرّج فوقها بهامش. تخفيفُ رقمٍ بالتقدير يُسقط نصّاً
     تحت حدّ المقروئية — وقع ذلك فعلاً: حجابٌ أفتح بالحدس أنزل
     السطر إلى 1.57:1.

     ⚠ **والحدود تابعة للصورة وموضعِ النصّ معاً — وقد ثبت ذلك
     عملياً.** جُرّبت صورة واجهة أنصع في 25-8-2026 فانهار المطلوب
     إلى 0.195 و 0.22 و صفر و 0.134 و 0.523، ثم أُعيدت الصورة
     الأصلية بقرار المالك فعاد إلى 0.207 و 0.255 و 0.136 و **0.449**
     و 0.354. الأرقام أدناه محلولة **لصورة `hero-ship.jpg` الحالية**
     بهوامش فوق كلٍّ منها.

     **أي تبديل للصورة أو إزاحة رأسية للنصّ يُبطل هذه الأرقام
     ويوجب إعادة حلّها بالحساب لا بالنظر.** والقيدُ الحاكم هنا هو
     العنوان (0.449) لا السطر، بعكس الصورة الأنصع.

     ⚠ **والهيدر شفّاف تماماً** (لا خلفية ولا `backdrop-filter`)،
     فرقيقتا اللغة والقائمة تقعان على الصورة مباشرة وزجاجهما
     `rgba(255,255,255,.055)` لا يحجب شيئاً. هما قيد أعلى التدرّج
     — لا يجوز تفتيحه إلى ما دون ما تحتاجانه ظنّاً أن أعلى الشريط
     خالٍ من النصّ. */

  .hero-x-photo {
    inset-block-end: auto;
    block-size: 480px;
    object-position: 50% 50%;
  }

  /* والحجاب يُبنى للشريط لا للواجهة كلها. والتدرّج الأفقي يسقط:
     على 375px «الأطراف» التي يعتّمها هي الشاشة كلها تقريباً. */
  .hero-x-veil {
    background: linear-gradient(180deg,
      rgba(5,21,35,.46) 0,
      rgba(5,21,35,.38) 100px,
      rgba(5,21,35,.50) 180px,
      rgba(5,21,35,.54) 250px,
      rgba(5,21,35,.60) 330px,
      rgba(5,21,35,.86) 420px,
      rgba(5,21,35,1)   480px);
  }



  /* والهالة تنكمش إلى العنوان وحده. كانت بيضويّة بنصف قطر رأسي
     350px، فوقع مركزها خلف الأزرار وضاعف تعتيمها هناك. */
  .hero-x-glow {
    background: radial-gradient(ellipse 54% 105px at 50% 265px,
      rgba(5,21,35,.22), transparent 78%);
  }



  /* ── الأزرار تكفّ عن الحجب ──

     ثلاثة ألواح بعرض الشاشة فوق الصورة مباشرة. والحاجب فيها ليس
     لونها — خلفيتها `rgba(255,255,255,.09)` شفّافة أصلاً — بل
     `backdrop-filter: blur(18px)`: هو ما يطمس ما خلفها فتُقرأ
     لوحاً صلداً. تخفيفه إلى 6px يُبقي حسّ الزجاج ويُظهر الصورة
     من خلفها. والعرض المقيَّد يترك الصورة تتنفّس من الجانبين. */

  .hx-actions .glass-btn, .glass-btn.hx-src {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .hx-actions .pill, .hx-actions .glass-btn { max-inline-size: 300px; }


  /* ── سلّم الخطّ: سبع درجات بدل ثمانية عشر حجماً ──

     الرئيسية وحدها كانت تحمل ثمانية عشر حجم خطّ مختلفاً:
     12 · 12.5 · 13 · 13.5 · 14 · 14.5 · 15 · 15.5 · 16 · 16.5 ·
     17 · 17.5 · 19 · 19.5 · 21 · 24 · 30 · 38

     على الحاسب تُقرأ هذه الفروق تدرّجاً ناعماً. أما على 375px
     فستّة أحجام متجاورة داخل 2.5px تبدو حجماً واحداً مهزوزاً —
     لا تصنع تراتباً بل ضجيجاً، وهو ما يجعل الصفحة «معجقة» رغم
     أن لا شيء فيها متزاحم فعلاً.

     الدرجات أدناه تُبقي القفزات وتحذف ما بينها. لا يتغيّر سطر
     واحد من المحتوى، ولا يُمسّ حجم على الحاسب. */

  /* عنوان القسم */
  .big-title, .gauge-num { font-size: 26px; }

  /* الأرقام الضخمة — من 24 */
  .cnum, .gcard-v > span { font-size: 22px; }

  /* عنوان البطاقة — من 21 و 19.5 و 19 */
  .srv h3, .dcard h2, .pcard h3, .chart h3,
  .xbox h3, .row h3, .vs-v { font-size: 19px; }

  /* التمهيد — من 17.5 و 17 */
  .head .lead, .gfx-rate span,
  .mini-facts strong, .band-in p { font-size: 16.5px; }

  /* النصّ — من 16 و 15.5 و 15 */
  .srv p, .row p, .track-copy p, .about-copy p, .xbox p, .pcard p,
  .tags li, .bullets li, .addr-big, .quote-line,
  .ftr-nav a, .ftr-tag, .gs-city, .flow li span { font-size: 15.5px; }

  /* الثانوي — من 14.5 و 14 */
  .hx-foot li, .chart-n, .bar-k, .row-num,
  .chart-out, .chint, .note, .dev { font-size: 14px; }

  /* الميكرو — درجة واحدة بدل خمس (13.5 · 13 · 12.5 · 12) */
  .bracket, .srv-num, .pcard-n, .gcard-n, .gauge-lbl, .vs-k, .bar-v,
  .gs-from, .gfx-chg, .gfx-note, .gfx-cur, .gfx-eq, .gfx-f output,
  .glass-pill span, .gcard-top span, .gcard-cta span,
  .chart-top span, .gs-rows li span { font-size: 13px; }


  /* ── امتداد السلّم إلى الصفحات الداخلية ──
     «خدماتنا» و«حاسبة المتر المكعّب» تحملان أصنافاً خاصة بهما لم
     يبلغها ما سبق، فبقيتا على أربعة عشر حجماً وثلاثة عشر بعد أن
     نزلت الرئيسية إلى تسعة. */

  /* عنوان فرعي — 25px كان يقع لصق 26px، فلا يُقرأ فرقاً بل اهتزازاً */
  .mid-title { font-size: 22px; }

  /* عنوان بطاقة — من 21 */
  .formula h3 { font-size: 19px; }

  /* التمهيد — من 18.5 و 18 */
  .page-lead, .split-lead { font-size: 16.5px; }

  /* النصّ — من 16 */
  .callout p, .fit-k, .fit span { font-size: 15.5px; }

  /* الثانوي — من 15 و 14.5
     ⚠ ثلاثة من هذه تحتاج انتقاءً مساوياً لا أضعف: `.tbl thead th`
     و `.steps-calc .eq` معرَّفتان في dark.css بانتقاء أقوى من
     `.tbl th` و `.eq`، والانتقاء يغلب ترتيب التحميل. */
  .jump a, .tbl thead th, .eq, .steps-calc .eq,
  .qform .field label, .demo-bar strong, .demo-bar span,
  .pcard-x { font-size: 14px; }

  /* الميكرو — من 13.5 و 13.12
     ⚠ `.eq-u` مقيسة بـ em داخل `.eq`، فتنزل معها إلى 11.5px إن
     تُركت — تثبيتها صراحةً هو ما يمنع ذلك. */
  .tbl caption, .eq-u { font-size: 13px; }

  /* عنوان بطاقة — بقايا 20px و 18px في التتبّع ومن نحن */
  .stage-list li h3, .rows-tight .row h3,
  .split-copy .pcard h3, .contact-list li a { font-size: 19px; }


  /* ── ما لا تبلغه هذه الورقة، وعمداً ──
     `cbm.css` تُحمَّل **بعد** `mobile.css` في `cbm.html` وحدها،
     فأصناف الحاسبة (`.cbm-f label` · `.cbm-seg button` ·
     `.cbm-empty`) تغلب أي قاعدة هنا. جُرّبت ثم نُزعت: الحاسبة
     نظامٌ مضبوط قائم بذاته له سلّمه (13.20)، ومصارعته برفع
     الانتقاء تكسر أداةً تعمل مقابل توحيدٍ شكليّ. من أراد توحيدها
     فليعدّل `cbm.css` نفسها، لا أن يعلوَ عليها من هنا. */
}


/* ════════════ ≤ 520px — الهواتف الضيّقة ════════════ */

@media (max-width: 520px) {

  /* يغلب قاعدة 520px في dark.css (الملف يُحمَّل بعده) */
  .brand img { block-size: 38px; }

  .hx-col > * { flex: 0 0 min(80%, 270px); }

  /* الزرّان تحت العنوان: بعرض الشاشة، إصبعٌ واحد يصيبهما */
  .hx-actions .pill, .hx-actions .glass-btn { flex: 1 1 100%; }
  .glass-btn.hx-src { inline-size: 100%; justify-content: center; }

  /* ⚠ `.pill` تحمل `white-space: nowrap` عمداً كي لا ينكسر نصّها على
     الحاسب. لكن أحد أزرار النسخة الإنكليزية يبلغ 394px، فيدفع صفحةً
     عرضها 360px ويصنع تمريراً أفقياً — والعربية لا تُظهره لأن نصّها
     أقصر. على الهاتف الضيّق يُسمح بالانكسار: سطران أهون من صفحة
     تنزلق جانبياً. */
  .pill { white-space: normal; max-inline-size: 100%; }

  /* والزرّ الزجاجي مثلها وللسبب نفسه — بل أخطر: زرّ السورسينج
     بالإنكليزية يحتاج 321px داخل 314px، و`.hero-x` تحمل
     `overflow-x: hidden`، فلا يظهر الفائض تمريراً جانبياً يُلاحَظ
     بل بتراً صامتاً لأطراف النصّ. الحشوة تُسوّى الجانبين لأن الزرّ
     صار بعرض كامل وموسّطاً، فحشوة السهم غير المتناظرة لا معنى لها. */
  .glass-btn { white-space: normal; }
  html[dir] .glass-btn.hx-src { padding-inline: 14px; }

  /* ⚠ والسماح بالكسر وحده ينتج مشكلة مقلوبة: نصّ السورسينج
     الإنكليزي ينكسر سطرين فيصير الزرّ 76px — أطول من زرّ «اطلب
     عرض سعر» نفسه، أي أضخم عنصر لأقلّ إجراء أهمية. المتاح داخل
     الزرّ 209px، والنصّ يشغل 235px عند 16px و 205px عند 14px:
     فالدرجة الأصغر هي ما يُرجعه سطراً واحداً — وهي أصدق أيضاً،
     إذ السورسينج سطر تعريفي بخدمة لا دعوة إلى إجراء. */
  .glass-btn.hx-src { font-size: 14px; }
}