/* 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 about.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. */

  /* ارتفاع السطر وتباعد الأحرف يُورَثان من فرض الملف المشترك للعناوين
       العربية (‎css/style.css §الطباعة‎: ‎1.32 !important‎ و‎normal‎) —
       ضبطهما محليًّا كان يعيد مقادير لاتينية ضيّقة تخنق العربية. */
    .abt__h1{
      font-family:var(--font-head);
      font-size:clamp(30px, 5.6vw, 50px);
      font-weight:900;
      color:var(--ink);
      text-wrap:balance;
    }
    .abt__h2{
      font-family:var(--font-head);
      font-size:clamp(26px, 4.6vw, 42px);
      font-weight:900;
      color:var(--ink);
      text-wrap:balance;
    }
    .abt__lede{ font-size:clamp(16px, 2.4vw, 18.5px); line-height:1.9; color:var(--ink-2); }


    /* السؤال الذي بدأت منه الفكرة. حدّ جانبي لا علامتا اقتباس: العربية
       لا تحمل الاقتباس المعلّق جيّدًا في هذا الحجم. */
    .abt-quote{
      position:relative;
      margin-top:26px; padding:20px 24px;
      border-inline-start:3px solid var(--accent, var(--purple));
      border-start-start-radius:0;  border-end-start-radius:0;
      border-start-end-radius:16px; border-end-end-radius:16px;
      background:color-mix(in srgb, var(--accent, var(--purple)) 7%, transparent);
      font-family:var(--font-head);
      font-size:clamp(17px, 2.8vw, 21px);
      font-weight:800; line-height:1.6 !important;
      color:var(--ink);
    }




    /* شبكة أمان: ‎.reveal-all‎ في الملف المشترك ترفع ‎.reveal‎ و‎.belief‎
       و‎.tool‎ فقط، والشارة تُخفى بقاعدة ‎.has-js .reveal .kicker‎ ولا تعود
       إلا بحركة ‎.reveal.in‎ — فلو تعطّل المراقب بقيت الشارات وحدها خفيّة. */
    .reveal-all .kicker{ opacity:1 !important; animation:none !important; }

    /* ---------------------------------------------------------------
       الغلاف المحيط (الهالتان الناعمتان خلف كل قسم) في ‎css/style.css‎
       يبدأ من القسم الثالث: أوّل قسمين في الصفحة الرئيسية هما الواجهة —
       ولها هالتاها الخاصّتان — وشريط اعتمادات ارتفاعه ‎١١١بك‎ تصير الهالة
       فيه لطخة. وثاني أقسام هذه الصفحة قصّة كاملة الطول، فتبقى وحدها
       مسطّحة بين أقسام مضاءة وتُقرأ فجوة تحت الواجهة مباشرة.

       القاعدتان أدناه تمنحانها التركيبة نفسها التي يعطيها الملف المشترك
       للقسم الثالث (‎4n+3‎) — لا تركيبة جديدة، فيتّصل الإيقاع بلا كسر.
       --------------------------------------------------------------- */
    main > section:nth-of-type(2){ position:relative; isolation:isolate; }
    main > section:nth-of-type(2)::before{
      content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
      background:
        radial-gradient(46% 50% at 12% 30%,
          var(--amb-1, color-mix(in srgb, var(--purple) 10%, transparent)), transparent 68%),
        radial-gradient(38% 44% at 92% 72%,
          var(--amb-2, color-mix(in srgb, var(--sky) 9%, transparent)), transparent 66%);
      -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
              mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
    }
    [data-theme="dark"] main > section:nth-of-type(2){
      --amb-1:color-mix(in srgb, var(--purple) 18%, transparent);
      --amb-2:color-mix(in srgb, var(--sky) 14%, transparent);
    }

    /* ---------------------------------------------------------------
       هيرو طويق.

       العمود المصوّر: قصاصة جبل طويق بسماء شفافة، والنجوم حوله بوصفة
       صفحتَي الدخول نفسها (‎css/auth.css §1d‎) منقولة بنطاق ‎.tuwq‎:
       الغلاف يحمل الأشعّة المائلة ‎45°‎ والقلب ‎.starcore‎ يحمل قناع
       ‎w-star.png‎ وتدرّج الجوهرة. البناء في سكربت أسفل الصفحة — بعد
       ‎js/script.js‎ غير المؤجَّل، فالحقل يكون قد بُني.

       الجبل نفسه ساكن عمدًا: هو رمز الثبات في الاقتباس الذي تحته،
       والحركة كلها للنجوم فوقه.
       --------------------------------------------------------------- */
    .tuwq{
      position:relative; isolation:isolate;
      margin:0; padding:56px 0 0;         /* سماءٌ تتنفّس فيها النجوم فوق القمة */
    }
    /* المشهد لا الصورة: على الشاشات الواسعة يمدّ كتفه خارج الحاوية.
       المعادلة تمدّه ‎64بك‎ كاملة على الشاشات الكبيرة، وتوقفه عند ملامسة
       حافة الشاشة على المتوسطة — رقم ثابت كان سيقصّ القمة عند ‎1440‎. */
    @media (min-width:768px){
      /* المشهد في العمود الثاني الآن، وحافته الخارجية جهة نهاية السطر */
      .tuwq{ margin-inline-end:clamp(-64px, calc((1400px - 100vw) / 2 - 32px), 0px); }
    }
    .tuwq__img{
      display:block; width:100%; height:auto;
      filter:drop-shadow(0 26px 48px rgba(135,65,249,.30));
      /* قاعدة القصاصة قصٌّ مستقيم صريح يقرأ الصورة ملصقًا غريبًا —
         قناع رأسي يذيبها في أرضية الصفحة، ألفا خالص فيصحّ في الجلدين.
         و‎no-repeat‎ يقصّ معها ظلَّ ‎drop-shadow‎ تحت القاعدة فلا يبقى
         شبح مستطيل أسفل التلاشي. */
      -webkit-mask-image:linear-gradient(to bottom, #000 74%, rgba(0,0,0,.5) 90%, transparent 100%);
              mask-image:linear-gradient(to bottom, #000 74%, rgba(0,0,0,.5) 90%, transparent 100%);
      -webkit-mask-repeat:no-repeat;
              mask-repeat:no-repeat;
    }
    [data-theme="dark"] .tuwq__img{
      filter:drop-shadow(0 0 34px rgba(135,65,249,.42))
             drop-shadow(0 26px 60px rgba(2,8,85,.6));
    }
    /* هالة خلف سفح الجبل — أسفل النجوم وأسفل الصورة */
    .tuwq__glow{
      position:absolute; inset:auto 4% 0 4%; height:62%;
      z-index:-2; pointer-events:none;
      background:radial-gradient(52% 62% at 50% 72%,
        color-mix(in srgb, var(--purple) 28%, transparent), transparent 72%);
      filter:blur(6px);
    }
    [data-theme="light"] .tuwq .starfield,
    :root:not([data-theme="dark"]) .tuwq .starfield{ opacity:.85 }
    .tuwq .starfield .star{
      -webkit-mask:none;
              mask:none;
      background:none;
      overflow:visible;
    }
    .tuwq .starfield .star::before{
      content:"";
      position:absolute;
      inset:0;
      transform:rotate(45deg);
      background:
        linear-gradient(90deg, transparent 3%, var(--ray, rgba(255,255,255,.9)) 50%, transparent 97%)
          center / 100% 1.4px no-repeat,
        linear-gradient(0deg,  transparent 3%, var(--ray, rgba(255,255,255,.9)) 50%, transparent 97%)
          center / 1.4px 100% no-repeat;
    }
    .tuwq .starfield .starcore{
      position:absolute;
      inset:28%;
      -webkit-mask:url(/assets/w-star.png) center / contain no-repeat;
              mask:url(/assets/w-star.png) center / contain no-repeat;
    }
    [data-theme="light"] .tuwq .starfield .star,
    :root:not([data-theme="dark"]) .tuwq .starfield .star{
      --ray:rgba(135,65,249,.72);
      filter:drop-shadow(0 0 7px rgba(135,65,249,.55))
             drop-shadow(0 0 18px rgba(135,65,249,.32));
    }
    [data-theme="light"] .tuwq .starfield .starcore,
    :root:not([data-theme="dark"]) .tuwq .starfield .starcore{
      background:radial-gradient(circle at 36% 30%,
                  #FFFFFF 0%,
                  #F2E9FF 13%,
                  #C7A4FF 38%,
                  #8741F9 72%,
                  #6A24D6 100%);
    }
    [data-theme="dark"] .tuwq .starfield .star{
      --ray:rgba(255,255,255,.92);
      filter:drop-shadow(0 0 4px rgba(255,255,255,.95))
             drop-shadow(0 0 13px rgba(199,155,255,.8))
             drop-shadow(0 0 30px rgba(135,65,249,.48));
    }
    [data-theme="dark"] .tuwq .starfield .starcore{
      background:radial-gradient(circle at 36% 30%,
                  #FFFFFF 0%,
                  #FFFFFF 24%,
                  #EADCFF 50%,
                  #BE94FF 78%,
                  #8741F9 100%);
    }
    @media (prefers-reduced-motion:reduce){
      .tuwq .starfield .star::before{ opacity:.5 }
    }

    /* اقتباس ولي العهد تحت الجبل مباشرة، في كل المقاسات — جُرّبت بطاقة
       طافية فوق السفح فغطّت الجبل نفسه، فعادت تحته. بألوان فيقا وبسطح
       مصمت: الخلفية الشفافة السابقة كانت تلتقط توهّج الجبل والنجوم
       خلفها فيتلوّن الكرت بغير لونه — ‎--surface‎ يعزله في الجلدين. */
    .tuwq-quote{
      position:relative; z-index:1;
      margin:16px auto 0; max-width:560px;
      padding:18px 22px;
      background:var(--surface);
      border:1px solid color-mix(in srgb, var(--purple) 24%, transparent);
      border-inline-start:3px solid var(--purple);
      border-start-start-radius:0;  border-end-start-radius:0;
      border-start-end-radius:16px; border-end-end-radius:16px;
      box-shadow:0 16px 32px -20px color-mix(in srgb, var(--purple) 45%, rgba(2,8,85,.35));
      font-family:var(--font-head);
      font-size:clamp(15px, 2vw, 17.5px);
      font-weight:800; line-height:1.85 !important;
      color:var(--ink);
    }
    .tuwq-quote p{ margin:0; }
    .tuwq-quote__cite{
      margin-top:10px;
      font-family:var(--font-body, inherit);
      font-size:13.5px; font-weight:700; color:var(--ink-2);
    }
    .tuwq-quote__cite::before{ content:"— "; }

    /* الجملة المحورية في الهيرو: أثقل وأكبر من المتن، بلون الحبر نفسه
       (‎--ink‎ يتبدّل مع الجلد فلا تحتاج قاعدة ليل). */
    .abt-pivot{
      font-family:var(--font-head); font-weight:900;
      font-size:clamp(19px, 3vw, 24px);
      line-height:1.6 !important;
      color:var(--ink);
    }

    /* ---------------------------------------------------------------
       الفروقات الفردية — خيطٌ واحد تتفرّع عنه الطرق.

       العنوان يقول «الهدف واحد. لكن الطريق إليه يختلف من طالب إلى آخر»،
       فليقله التخطيط لا النصّ وحده: خيط رأسي واحد يمرّ بالقسم كلّه (الهدف)
       وعلى جانبيه في كل ارتفاع طريقان (الزوج). حلّ محلّ أربعة صفوف
       متطابقة يفصلها خطّ كامل العرض فتُقرأ جدولًا، وشاراتِ «و» في وسطها
       لم تكن تحمل معنى، ونقاطٍ مصمتة/مفرّغة لا تكاد تُرى.

       ولا فرق في الوزن أو اللون بين الجانبين: الأزواج ليست محورًا واحدًا
       (زوجٌ عن طول الشرح وآخر عن مصدر التحفيز)، فترميز «نوع أ» و«نوع ب»
       عبر الصفوف كان سيكذب على القارئ. المرآة وحدها تقول إنهما طريقان،
       والنغمة على العقدة لا على الحرف — النغمة نصًّا على الورق الأبيض
       ترسب دون ‎4.5:1‎ (§٢٫١). */
    .duo{ position:relative; }
    .duo::before{
      content:"";
      position:absolute; inset-block:4px;
      inset-inline-start:calc(50% - 0.5px);
      width:1px;
      /* لا ‎--line‎: قيمته ‎.13‎ ألفا ليلًا وليلكيٌّ شبه أبيض نهارًا، فيختفي
         الخيط في الجلدين — وهو حامل المجاز كلّه. مزيجٌ من حبر النصّ يعطي
         ‎.24‎ ألفا على الورق و‎.19‎ على السماء: خيط يُرى ولا ينافس النصّ.
         ويتلاشى طرفاه فلا يُقرأ حدَّ جدولٍ مقصوصًا. */
      background:linear-gradient(to bottom,
        transparent 0,
        color-mix(in srgb, var(--ink-3) 40%, transparent) 9%,
        color-mix(in srgb, var(--ink-3) 40%, transparent) 91%,
        transparent 100%);
    }
    .duo__row{
      display:grid;
      grid-template-columns:1fr 56px 1fr;
      align-items:center;
      padding-block:23px;
    }
    .duo__cell{
      margin:0;
      font-family:var(--font-head); font-weight:800;
      font-size:clamp(15px, 1.9vw, 16.5px);
      line-height:1.75 !important;
      color:var(--ink);
      text-wrap:balance;
    }
    /* المحاذاة مرآةٌ حول الخيط: تميل كل عبارة إليه فيُقرأ الزوج حوارًا */
    .duo__cell{ text-align:end; }
    .duo__cell--b{ text-align:start; }
    /* العقدة تجلس على الخيط: حلقة بلون أرضية القسم تثقبه فتبدو فوقه لا
       خلفه. الحلقة ‎--page‎ لا ‎--surface‎: القسم يقف على أرضية الصفحة
       (‎‎bg-white‎‎ نهارًا و‎#050C34‎ ليلًا)، ولو أخذت لون السطح لظهرت
       هالة أفتح حول كل عقدة في الليل. وهي حلقة اقتطاع لا توهّج. */
    .duo__node{
      justify-self:center;
      width:10px; height:10px; border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 5px var(--page);
    }

    /* الجوال: الخيط الرأسي يفقد معناه في عمود واحد، فتُطوى كل عقدة إلى
       نقطتين على رأس عبارتيها — مصمتة ومفرّغة، وهنا الفرق وظيفته أن
       يفصل سطرين متلاصقين، لا أن يرتّبهما. */
    @media (max-width:767px){
      .duo::before{ display:none; }
      .duo__row{ display:block; padding-block:15px; }
      .duo__row + .duo__row{ border-block-start:1px solid var(--line); }
      .duo__node{ display:none; }
      .duo__cell{
        position:relative;
        text-align:start;
        padding-inline-start:17px;
      }
      .duo__cell::before{
        content:""; position:absolute;
        inset-inline-start:0; inset-block-start:.72em;
        width:7px; height:7px; border-radius:50%;
        background:var(--accent);
      }
      .duo__cell--b{ margin-block-start:9px; }
      .duo__cell--b::before{
        background:transparent;
        box-shadow:inset 0 0 0 2px var(--accent);
      }
    }

    /* عنوان نبضة داخل قسم «العالم تغيّر»: نص بلون الحبر وشريط جانبي
       بالنغمة — النغمة على الحدّ لا على الحرف، فالذهبي على الورق الأبيض
       لا يحمل نصًّا (§٢٫١). */
    .beat{
      font-family:var(--font-head); font-weight:900;
      font-size:17px; line-height:1.5 !important;
      color:var(--ink);
      padding-inline-start:12px;
      border-inline-start:3px solid var(--accent, var(--purple));
    }

    /* عناوين التحولات «من كذا إلى كذا» سطران — بلا موازنة يتيتّم آخر
       سطرٍ بكلمة وحيدة (‎تكيّفي‎ مثلًا). مقصورة على هذه الصفحة كي لا
       تلمس بطاقات الصفحة الرئيسية. */
    .pcard .pcard__title{ text-wrap:balance; }

    /* الجملة الختامية — خاتمة قصة التأسيس، بحجم عنوان لا متن. */
    .abt-final{
      font-family:var(--font-head); font-weight:900;
      font-size:clamp(24px, 4.4vw, 40px);
      line-height:1.5 !important;
      color:var(--ink);
      text-wrap:balance;
    }
}