/* Page-scoped design CSS, served from /public and <link>ed by PageShell for the
   ACTIVE LOCALE ONLY.

   HAND-MAINTAINED. Edit THIS file: there is no generator and no pipeline to
   re-run. The banner this replaces said "GENERATED from
   src/styles/vega-design/pages/<name>.css -- edit that, not this", and both
   halves were false. Nothing imported that copy (app/globals.css imports only
   the five shared sheets), its bytes had already diverged from the ones the
   browser gets, and the regeneration it named -- tools/slice_pages.py plus
   tools/emit_components.py -- predates every change made on import and would
   flatten them. It has been deleted. See
   docs/frontend/VEGA_DESIGN_INTEGRATION.md.

   Living under /public puts these sheets OUTSIDE the bundler, on purpose. They
   are copied to the response byte for byte: unhashed, unminified, and NOT
   fingerprinted, so an edit ships under the URL the previous version already
   holds and you must bust the cache yourself when a change has to land now.
   That is a standing, deliberate exception rather than an oversight -- the
   sheet is chosen per locale at request time by a <link>, which a static
   `import` compiled into a JS chunk cannot do.

   These sheets cannot both be loaded: about.css and about-en.css share 32 of
   their selectors and give them different values (FAQs.html sets
   line-height:1.28!important on .faqpage__h1, FAQs-en.html deliberately omits
   it). Whichever loaded second would win for BOTH languages. Upstream this is
   why the design ships two root layouts; this app serves one URL per page, so
   PageShell links exactly one sheet instead.

   The @layer statement below is repeated verbatim from app/globals.css, and it
   has to be -- as does the `@layer vega-design { ... }` wrapper around every
   rule in this file. Tailwind 4 emits its utilities into a REAL `@layer
   utilities`, and unlayered CSS outranks every layer no matter where it sits in
   the document; unwrapping these rules would therefore not reorder the cascade,
   it would invert the one the design was built against, with each page rule
   beating every Tailwind utility on the page. The statement is the other half:
   layer PRIORITY is fixed by where a layer name is first seen in the document,
   and React hoists a <link rel=stylesheet> without guaranteeing it lands after
   the global sheet. If this file were parsed first and said only
   `@layer vega-design {}`, vega-design would be declared before `theme` and
   `base` and would therefore lose to Tailwind's preflight -- the page would load
   its own CSS and be visibly restyled by the reset. Naming the full order here
   makes the file self-anchoring: whichever sheet the browser sees first
   establishes the same order, and the second is a no-op. */
@layer theme, base, vega-design, components, utilities;

@layer vega-design {
  /* Originally lifted from the inline <style> block of FAQs.html, hand-maintained
     since. The "Regenerate: python tools/slice_pages.py && python
     tools/emit_components.py" line that used to sit here is retired -- see the
     header above.

     These rules live in the page, not in css/style.css, on purpose:
     the shared sheet is loaded by index.html and index-en.html, so an
     addition there risks both. */

  /* الترويسة مثبتة بارتفاع ٧٢ بكسل، فالمرساة التي تقفز إلى قسم تضع
       عنوانه تحتها تمامًا. الهامش يدفعه إلى أسفلها مع فسحة تتنفّس. */
    .faqgroup{ scroll-margin-top:96px; }

    /* أدوات ‎text-*‎ في تيلويند تحمل ارتفاع سطر لاتينيًّا يقصّ العربية —
       درس موثّق في معايير الصفحة §٣، فالارتفاع يُضبط صراحةً هنا. ولذلك
       لا تُكتب عناوين هذه الصفحة بأصناف تيلويند أصلًا. */
    .faqpage__h1{
      font-family:var(--font-head);
      font-size:clamp(32px, 6vw, 46px);
      font-weight:900;
      line-height:1.28 !important;
      color:var(--ink);
      text-wrap:balance;
    }
    /* المتن لا يُوسَّط في العربية (المعايير §٣)، وكتلة الافتتاح استثناؤها
       المذكور هناك، فالتوسيط يقف عند هذا السطر ولا ينزل إلى الأقسام. */
    .faqpage__lede{
      margin-top:16px;
      font-size:clamp(16px, 2.6vw, 18.5px);
      line-height:1.85;
      color:var(--ink-2);
      max-width:56ch; margin-inline:auto;
    }

    .faqjump__label{
      margin-bottom:12px; text-align:center;
      font-size:12.5px; font-weight:700; letter-spacing:.04em;
      color:var(--ink-3);
    }

    .faqcta__h{
      font-family:var(--font-head);
      font-size:clamp(28px, 5.2vw, 46px);
      font-weight:900;
      line-height:1.24 !important;
      color:var(--ink);
    }

    .faqgroup__h{
      font-family:var(--font-head);
      font-size:clamp(25px, 4.4vw, 34px);
      font-weight:900;
      line-height:1.32 !important;
      color:var(--ink);
    }
    .faqgroup__lede{
      margin-top:12px;
      font-size:16px; line-height:1.85; color:var(--ink-2);
      max-width:58ch;
    }
    .faqgroup__count{
      margin-top:10px;
      font-size:13px; font-weight:700; color:var(--ink-3);
    }

    /* رقم السؤال بدل أيقونة لكل سؤال: أربعون أيقونة تتشابه دلالاتها فتصير
       زخرفة، والرقم يجعل القائمة الطويلة قابلة للمسح والإحالة («السؤال ٢٣»).
       والبلاطة نفسها هي ‎.faq__ico‎ بلا تغيير، تمتلئ بنفسجيًّا عند الفتح
       ويقلب الرقم أبيض تبعًا لـ‎currentColor‎. */
    .faq__n{
      font-family:var(--font-head);
      font-size:13.5px; font-weight:800; line-height:1;
      letter-spacing:normal;
      font-variant-numeric:tabular-nums;
    }
    /* أسئلة هذه الصفحة أطول من أسئلة الرئيسية، فمنها ما يلتفّ سطرين على
       الجوال. الارتفاع الافتراضي للـ‎summary‎ مضبوط لسطر واحد، وسطران به
       يتلاصقان، فيُرخى هنا وحده. */
    .faq summary{ line-height:1.55; }

    /* شرائط الانتقال إلى الأقسام. لونها من ‎--accent‎ الخاص بالقسم الذي
       تقود إليه، فالربط بصريّ قبل أن يكون نصيًّا. */
    .qjumps{
      display:flex; flex-wrap:wrap;
      align-items:center; justify-content:center;
      gap:9px;
    }
    /* ‎min-height:44px‎ لا حشوٌ أكبر: المعايير §٧ تفرض ‎٤٤‎ بكسلًا لمساحة
       اللمس، والحشو وحده كان يبلغ بها ‎٣٦‎ (مقيسة). ورفع الحشو كان
       يُسمِّن الشريحة بصريًّا، أمّا الحدّ الأدنى فيمدّ الهدف ويُبقي الشكل. */
    .qjump{
      display:inline-flex; align-items:center; gap:8px;
      min-height:44px;
      padding:9px 16px; border-radius:999px;
      font-size:13.5px; font-weight:700; line-height:1.2;
      color:var(--ink-2);
      background:var(--surface);
      border:1px solid var(--line);
      transition:color .18s ease, border-color .18s ease,
                 background .18s ease, transform .18s ease;
    }
    .qjump svg{ flex:none; color:var(--accent,#8741F9); opacity:.85; }
    /* الأيقونة المصوّرة ترد بمقاس ‎١٢٨بك‎، فبلا حدٍّ صريح تملأ الشريحة.
       و‎١٨بك‎ هنا لا ‎٢٠‎ كما في الشارة: الشريحة أضيق حشوًا. */
    .qjump img{ flex:none; width:18px; height:18px; object-fit:contain; display:block; }
    .qjump:hover{
      color:var(--ink);
      border-color:color-mix(in srgb, var(--accent,#8741F9) 45%, transparent);
      background:color-mix(in srgb, var(--accent,#8741F9) 8%, var(--surface));
      transform:translateY(-2px);
    }
    .qjump:focus-visible{ outline:2px solid var(--purple-2); outline-offset:2px; }

    /* بطاقة «لم تجد إجابتك؟»، بطاقة واحدة موسّطة لا قسم كامل، فالصفحة
       انتهت من مهمّتها وهذا مخرج لمن بقي عنده سؤال. */
    .askbox{
      max-width:720px; margin-inline:auto;
      padding:34px 26px; border-radius:22px;
      text-align:center;
      /* الحدّ متدرّج لا لون واحد، عائلة ‎.faq‎ نفسها، فالبطاقة تُقرأ من
         الصفحة لا دخيلة عليها. */
      border:1.5px solid transparent;
      background:linear-gradient(180deg,var(--surface),var(--surface)) padding-box,
                 linear-gradient(150deg, rgba(135,65,249,.30), var(--line-2)) border-box;
    }
    .askbox__h{
      font-family:var(--font-head);
      font-size:24px; font-weight:900; line-height:1.35 !important;
      color:var(--ink);
    }
    .askbox__p{ margin-top:10px; font-size:15px; line-height:1.85; color:var(--ink-2); }
    .askrow{
      display:flex; flex-wrap:wrap;
      align-items:center; justify-content:center;
      gap:10px 14px; margin-top:20px;
    }
    .askrow .ftlink{
      padding:10px 18px; border-radius:999px;
      border:1px solid var(--line); background:var(--surface-2);
      font-weight:700; color:var(--ink);
    }
    .askrow .ftlink:hover{ color:var(--purple); }

    @media (prefers-reduced-motion: reduce){
      .qjump{ transition:none; }
      .qjump:hover{ transform:none; }
    }
}