/* ==========================================================================
   town.css — طبقة «البلدة القديمة». تُحمَّل بعد lux.css ولا تلمس HTML.

   ثلاثة موتيفات، كلٌّ من موضعه في العمارة لا من عمومٍ شرقيّ:

     ١) التاج المدرَّج — الشُرفة النبطية التي تُتوَّج بها واجهات حِجْر.
        اخترناها لأنها خطٌّ يُتوِّج حافةً، لا مساحةٌ تملأ سطحًا: تُعلن
        الانتماء بلا أن تلمس النصّ. موضعها الحافة العليا للّوح الرئيس
        وغلاف الوثيقة — أي حيث يوجد تتويج فعلًا.

     ٢) المداميك — صفوف جدار الطين، متفاوتة الارتفاع لأن الجدار الحقيقي
        لا يستوي. على ظهر الشريط الجانبي وحده: هناك لا يعبر خطٌّ داكن
        متنَ وثيقة. وضعها تحت جداول التقرير كان سيجعل الأرقام تُقرأ على
        مسطرة.

     ٣) المسمار النحاسي — من أبواب البلدة المحفورة. علامة العنصر الفعّال
        في القائمة: نقطة معدنية مغروسة، لا شريحة مسطّحة.

   والأساس الحجري تحت كل لوح ليس زخرفة بل خامة: حدثٌ عند الحافة السفلى
   يقابل خيط الضوء عند العليا في lux، فيُقفَل اللوح من طرفيه ويُقرأ كتلةً
   محمولة لا مستطيلًا ممتلئًا.

   لا مورد خارجي: تدرّجات CSS وSVG مضمَّن مكتوب بالكامل هنا.
   ========================================================================== */

:root{
  --crowstep:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 11'%3E%3Cpath d='M0 10.5H4V7.5H8V4.5H10V1.5H18V4.5H20V7.5H24V10.5H28' fill='none' stroke='%23C9A227' stroke-width='1' stroke-opacity='.6' shape-rendering='crispEdges'/%3E%3C/svg%3E");
  --crown-fade:linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  --mud-rail:repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 10px, rgba(0,0,0,.22) 10px, rgba(0,0,0,.22) 11px, rgba(255,255,255,.012) 11px, rgba(255,255,255,.012) 12px, rgba(255,255,255,0) 12px, rgba(255,255,255,0) 26px, rgba(0,0,0,.16) 26px, rgba(0,0,0,.16) 27px, rgba(255,255,255,.014) 27px, rgba(255,255,255,.014) 28px, rgba(255,255,255,0) 28px, rgba(255,255,255,0) 35px, rgba(0,0,0,.26) 35px, rgba(0,0,0,.26) 36px);
  --stone:linear-gradient(180deg, rgba(0,0,0,.46) 0 1px, rgba(4,3,2,.30) 1px, rgba(4,3,2,.36) 100%);
  --stud-hi:#F2DDA6;
  --stud-mid:#D3AC33;
  --stud-lo:#6E5716;
  --base-h:8px;
}

/* ==========================================================================
   ١) التاج المدرَّج — على عنصرين لا أكثر في الشاشة
   ========================================================================== */
/* lux يضع على .hero::before خيطًا ذهبيًا. نُبقيه ونضيف التاج فوقه:
   الطبقتان في إعلان واحد لأن background-image يُستبدل ولا يُضاف. */
.hero::before,
.rep-cover::before{
  content:""; position:absolute; inset-inline:0; top:0; height:13px;
  pointer-events:none;
  background-image:
    var(--crowstep),
    linear-gradient(90deg, transparent, var(--gold-dim) 18%, var(--gold) 50%,
                    var(--gold-dim) 82%, transparent);
  background-repeat:repeat-x, no-repeat;
  background-position:center top, center bottom;
  background-size:28px 11px, 100% 2px;
  /* التلاشي عند الطرفين: تاجٌ يُقطع فجأةً عند حافة اللوح يُقرأ خطأً في
     الرسم لا قرارًا في التصميم. */
  -webkit-mask-image:var(--crown-fade);
          mask-image:var(--crown-fade);
  opacity:.9;
}
.rep-cover{ position:relative; padding-top:26px; }

/* ==========================================================================
   ٢) جدار المداميك — الشريط الجانبي وحده
   ========================================================================== */
/* lux يضع على .rail تدرّجًا رأسيًا. نُبقيه أسفل المداميك في الإعلان نفسه. */
.rail{
  background-image:
    var(--mud-rail),
    linear-gradient(180deg, var(--rail-hi) 0%, var(--rail-lo) 62%, #0D0B09 100%);
  background-repeat:repeat, no-repeat;
  background-size:100% 36px, 100% 100%;
}

/* ==========================================================================
   ٣) الأساس الحجري — خامة تحت كل لوح
   ========================================================================== */
/* lux يعرّف على .card طبقتين: خيط الضوء العلوي وتدرّج اللوح. نُعيد
   كتابتهما هنا كاملتين لأن الطبقات تُستبدل — ونُدخل الحجر بينهما.
   الحجر يطرح ضوءًا ولا يضيفه، فكل نصّ فوقه يزداد تباينًا لا ينقص. */
.card{
  background-image:
    linear-gradient(180deg, var(--edge-light) 0 1px, rgba(0,0,0,0) 1px),
    var(--stone),
    linear-gradient(180deg, var(--slab-hi) 0%, var(--slab-mid) 58%, var(--slab-lo) 100%);
  background-repeat:no-repeat;
  background-size:100% 100%, 100% var(--base-h, 8px), 100% 100%;
  background-position:0 0, 0 100%, 0 0;
}

/* ==========================================================================
   ٤) المسمار النحاسي — علامة العنصر الفعّال
   ========================================================================== */
/* lux يضع على .nav a.on::before شريحة ذهب على الحافة. نستبدلها بمسمار
   مغروس: تدرّج شعاعي يعطيه حجمًا، فيُقرأ معدنًا في الخشب لا نقطة مرسومة. */
.nav a.on::before{
  inset-block:auto; top:50%; transform:translateY(-50%);
  inset-inline-start:6px;
  width:7px; height:7px; border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, var(--stud-hi) 0 26%,
                    var(--stud-mid) 55%, var(--stud-lo) 100%);
  box-shadow:0 0 6px rgba(201,162,39,.45), inset 0 -1px 1px rgba(0,0,0,.5);
}
.nav a{ padding-inline-start:20px; }

/* ==========================================================================
   ٥) رقم القسم — حافة مدرَّجة صغيرة تردّد التاج
   ========================================================================== */
.rep-no{ min-width:24px; height:24px; }
[dir="rtl"] .rep-no{
  clip-path:polygon(0 0, calc(100% - 6px) 0, calc(100% - 6px) 3px,
                    calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
                    100% 100%, 0 100%);
}

/* من عطّل الحركة أو خفّف الشفافية: الزخرفة تسقط والبنية تبقى */
@media (prefers-reduced-motion: reduce){
  .hero::before, .rep-cover::before{ opacity:.7; }
}


/* ==========================================================================
   ٥) الوثيقة — التقرير التنفيذي غلافًا لا بطاقة
   --------------------------------------------------------------------------
   القسم ١ كان لوحًا داكنًا عليه شعارٌ ونصّ: يُقرأ بطاقةَ لوحةِ متابعة لا
   غلافَ وثيقةٍ تُسلَّم. والفرق ليس زخرفةً بل بنية — الغلاف يحتاج أرضًا
   خاصّةً به، وتتويجًا، وخطًّا يفصل العنوان عن بياناته، وحاشيةً تُقفله.

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

:root{
  /* طبقاتُ حِجْر الرسوبية: خطوطٌ أفقية متفاوتة التباعد كما يتراكم الحجر
     الرملي. شفّافةٌ جدًّا — تُحسّ خامةً ولا تُرى نقشًا. */
  --strata:repeating-linear-gradient(180deg,
    rgba(216,196,160,.030) 0px, rgba(216,196,160,.030) 1px,
    rgba(216,196,160,0)    1px, rgba(216,196,160,0)    9px,
    rgba(0,0,0,.10)        9px, rgba(0,0,0,.10)       10px,
    rgba(216,196,160,.018) 10px, rgba(216,196,160,.018) 11px,
    rgba(216,196,160,0)   11px, rgba(216,196,160,0)    23px,
    rgba(0,0,0,.07)       23px, rgba(0,0,0,.07)       24px);
}

/* ----- الغلاف ----- */
.rep-cover{
  padding:34px 30px 26px;
  border-color:rgba(201,162,39,.30);
  background-image:
    radial-gradient(130% 96% at 50% -14%, rgba(201,162,39,.11), transparent 62%),
    var(--strata),
    linear-gradient(180deg, var(--slab-hi) 0%, var(--slab-mid) 46%, var(--slab-lo) 100%);
  background-size:100% 100%, 100% 24px, 100% 100%;
}
/* الشعار على قرص حجريّ محزوز بالذهب — لا صورة سابحة في الفراغ */
.rep-cover-brand .mark{
  padding:7px; border-radius:14px;
  background:linear-gradient(180deg, rgba(201,162,39,.16), rgba(201,162,39,.04));
  border:1px solid rgba(201,162,39,.34);
}
/* العنوان يُقفل بخيطٍ ذهبيّ يتلاشى — الفاصل بين اسم الوثيقة وبياناتها */
.rep-title{ position:relative; padding-bottom:14px; }
.rep-title::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0;
  width:112px; height:2px;
  background:linear-gradient(90deg, var(--gold), rgba(201,162,39,0));
}
/* خانات البيانات: مسمارٌ نحاسيّ في رأس كلّ خانة كأبواب البلدة */
.rep-meta-c{ position:relative; padding-inline-start:19px; }
.rep-meta-c::before{
  content:""; position:absolute; inset-inline-start:8px; top:16px;
  width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--stud-hi), var(--stud-mid) 55%, var(--stud-lo));
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
/* حاشية الغلاف تُقفل الصفحة بخطٍّ كما فتحها التاج */
.rep-cover-foot{
  border-top:1px solid rgba(201,162,39,.22); padding-top:12px;
}

/* ----- الأقسام ----- */
/* رقم القسم حجرٌ محزوز لا شارةٌ مسطّحة */
.rep-no{
  background:linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border:1px solid rgba(201,162,39,.30);
  box-shadow:inset 0 1px 0 var(--edge-light);
}
/* كل قسم يُتوَّج بخيطٍ ذهبيٍّ رفيع عند حافته العليا — أخفّ من تاج الغلاف
   بكثير: التتويج الكامل للغلاف وحده، وهذه إشارةُ انتماء لا تتويج. */
.rep-sec:not(.rep-cover){ position:relative; }
.rep-sec:not(.rep-cover)::after{
  content:""; position:absolute; inset-inline:14px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,162,39,.34) 22%,
                             rgba(201,162,39,.34) 78%, transparent);
  pointer-events:none;
}

/* ----- بطاقات المؤشّرات ----- */
.rep-kpi-c{
  background-image:var(--strata), linear-gradient(180deg, var(--slab-hi), var(--slab-lo));
  background-size:100% 24px, 100% 100%;
  border-color:var(--line-soft);
}
.rep-kpi-c .v{ color:var(--gold-soft); }

/* ----- جداول الوثيقة ----- */
/* صفّ الترويسة على مدماكٍ خفيف، وخيطٌ ذهبيّ تحته يفصله عن البيانات */
.rep-sec table thead th{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border-bottom:1px solid rgba(201,162,39,.28);
}