/* ═══ طبقة اللون — القطاعُ والمحطة ═══════════════════════════════════════════
 *
 * منقولةٌ عن `docs/bd-v2/design/screens/skin-color.css` (١٦٥ سطرًا، معتمدة من
 * المالك). **والنقلُ بالمعنى لا بالحرف، وهذا قرارٌ مقيس لا تسهيل:**
 *
 * الملفُّ الأصليّ كُتب لترميز النماذج، ويستهدف أسماءً عامّة جدًّا: `.row`
 * و`.entry` و`.claim` و`.btn` و`.tag` و`.sheet` — وهي كلُّها **تعيش في البوابة
 * بمعنًى آخر**: ٢٨ استعمالًا لـ`.row` · ١٣٥ لـ`.claim` · ٦٠ لـ`.btn` ·
 * ٨٢ لـ`.sheet`. ونقلُه حرفًا يحقن — بين ما يحقن — `animation:settle` في كلّ
 * صفٍّ في البوابة، و`transition` في كلّ زرّ. وفوق ذلك يقرأ رموزًا غير موجودة
 * هنا (`--s1`…`--s4` و`--radius`)، فيخرج الحشوُ صفرًا حيث توقّعه المصمّم.
 *
 * **فالمنقولُ هو ما يحمل المعنى:** القيمُ نفسُها حرفًا (عشرةُ قطاعات وثمانيةُ
 * تدرّجات ورموزُ الحركة)، وخرائطُ `[data-sector]` و`[data-stage]` حرفًا،
 * والرقاقاتُ بمفرداتِ البوابة (`--space-*` و`--radius-*`) وبادئتِها `az-`.
 *
 * **والمتروكُ ولماذا:** `.view-timeline`/`.view-grid`/`.view-columns` — للبوابة
 * سطحُها الخاصّ (`listSurface`) بخمس قراءات، وطريقتان للشيء الواحد أسوأ من
 * واحدة · `.view-switch` — مفتاحُ البوابة روابطُ `<a>` لا أزرارٌ بـJS، وقشرته
 * `.az-switch` · `.sheet` — جدولُ الحاسبة، ويأتي مع تحويل الحاسبة لا قبله ·
 * `.xlink`/`.backlinks` — لوحُ الخيوط مبنيٌّ بقشرته · وكتلةُ الحركة كلُّها،
 * فهي تستهدف الأسماء المتصادمة وحدها.
 *
 * **والقيود الثلاثة تبقى كما هي:** لا لونَ مخترع (كلُّها إزاحةُ صبغةٍ عن
 * لافندر النظام `#967BB6`) · واللونُ يحمل معنًى ولا يزيّن · والحركةُ إضافةٌ
 * لا أساس.
 */

:root {
  /* ── القطاعات: عائلةٌ واحدة، صبغاتٌ متجاورة، تشبّعٌ منخفض ──
     مشتقّةٌ بإزاحة hue عن لافندر النظام مع إبقاء الإضاءة، فلا تصرخ ولا تتنافر. */
  --sector-culture: #967BB6;   /* الثقافة — لافندر النظام نفسه */
  --sector-urban: #7B8FB6;     /* الإسكان والعمران */
  --sector-social: #7BB6A4;    /* التنمية الاجتماعية */
  --sector-transport: #8A9BA8; /* النقل واللوجستيات */
  --sector-env: #8FB67B;       /* البيئة والاستدامة */
  --sector-health: #B67B93;    /* الصحة */
  --sector-edu: #B6A47B;       /* التعليم والتدريب */
  --sector-sport: #A87B8A;     /* الرياضة والترفيه */
  --sector-energy: #9B8FA8;    /* الطاقة والصناعة */
  --sector-finance: #7BA4B6;   /* المالية والاستثمار */

  /* ── المحطات: تدرّجٌ واحد يشتدّ كلّما تقدّمت الرحلة ──
     فالعين تقرأ التقدّم من العمق لا من اختلاف الصبغة. */
  --stage-0: #D3C6E0; --stage-1: #BEAACF; --stage-2: #AB93C2; --stage-3: #967BB6;
  --stage-4: #7C6199; --stage-5: #614A78; --stage-6: #473658; --stage-7: #2D2238;
  --stage-8: #221A2B; --stage-9: #17121D; /* المحطات عشر (المالك ٢٥ سبتمبر) */

  --dur-1: 140ms; --dur-2: 260ms; --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* خرائطُ القطاع — بالاسم العربيّ كما يُكتب في `organizations.sector`. */
[data-sector="الثقافة والتراث"] { --sector: var(--sector-culture); }
[data-sector="الإسكان والعمران"] { --sector: var(--sector-urban); }
[data-sector="التنمية الاجتماعية"] { --sector: var(--sector-social); }
[data-sector="النقل واللوجستيات"] { --sector: var(--sector-transport); }
[data-sector="البيئة والاستدامة"] { --sector: var(--sector-env); }
[data-sector="الصحة"] { --sector: var(--sector-health); }
[data-sector="التعليم والتدريب"] { --sector: var(--sector-edu); }
[data-sector="الرياضة والترفيه"] { --sector: var(--sector-sport); }
[data-sector="الطاقة والصناعة"] { --sector: var(--sector-energy); }
[data-sector="المالية والاستثمار"] { --sector: var(--sector-finance); }

/* ── النغمة: لونٌ ثابتٌ لاسمٍ خارج المفردات العشر ──────────────────────────
   أبوابُ الأطلس إحدى وعشرون بمفرداتها الخاصّة، وقائمةُ الوسوم مفتوحة. فبدل
   تسمية «التعدين» ثقافةً ليأخذ لونها، تُشتقّ نغمةٌ ثابتة من الاسم وتختار
   واحدًا من العشرة. فيبقى اللونُ عائلةً واحدة، ويبقى ثابتًا للشيء نفسه. */
[data-tone="0"] { --sector: var(--sector-culture); }
[data-tone="1"] { --sector: var(--sector-urban); }
[data-tone="2"] { --sector: var(--sector-social); }
[data-tone="3"] { --sector: var(--sector-transport); }
[data-tone="4"] { --sector: var(--sector-env); }
[data-tone="5"] { --sector: var(--sector-health); }
[data-tone="6"] { --sector: var(--sector-edu); }
[data-tone="7"] { --sector: var(--sector-sport); }
[data-tone="8"] { --sector: var(--sector-energy); }
[data-tone="9"] { --sector: var(--sector-finance); }

[data-stage="0"] { --stage: var(--stage-0); } [data-stage="1"] { --stage: var(--stage-1); }
[data-stage="2"] { --stage: var(--stage-2); } [data-stage="3"] { --stage: var(--stage-3); }
[data-stage="4"] { --stage: var(--stage-4); } [data-stage="5"] { --stage: var(--stage-5); }
[data-stage="6"] { --stage: var(--stage-6); } [data-stage="7"] { --stage: var(--stage-7); }
[data-stage="8"] { --stage: var(--stage-8); } [data-stage="9"] { --stage: var(--stage-9); }

/* ── النقطة: أصغرُ ما يقول «هذا قطاعٌ آخر» ────────────────────────────────── */
.az-sector-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
  background: var(--sector, var(--p500));
}

/* ── رقاقةُ القطاع: لونٌ مقروء لا نقطةٌ صغيرة ────────────────────────────── */
a.az-sector-link{color:inherit;text-decoration:none}
.az-sector-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--micro);
  font-weight: 500;
  background: color-mix(in srgb, var(--sector, var(--p500)) 14%, var(--paper));
  color: color-mix(in srgb, var(--sector, var(--p500)) 80%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--sector, var(--p500)) 32%, transparent);
}

/* ── رقاقةُ المحطة: العمقُ يقول كم قطعنا من الرحلة ───────────────────────── */
.az-stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--micro);
  font-weight: 500;
  background: color-mix(in srgb, var(--stage, var(--p500)) 16%, var(--paper));
  color: color-mix(in srgb, var(--stage, var(--p500)) 78%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--stage, var(--p500)) 34%, transparent);
}

/* ── الحدُّ الجانبيّ: صفٌّ يعلن قطاعه بلا كلمة ───────────────────────────────
   ولا يُلصق بـ`.row` العامّة: البوابة تستعملها في ثمانيةٍ وعشرين موضعًا
   بمعانٍ مختلفة. فصنفٌ صريح، يُطلب حيث يُراد. */
.az-sector-edge {
  border-inline-start: 3px solid var(--sector, var(--p300));
  padding-inline-start: calc(var(--space-4) - 3px);
}

/* ── وصفوفُ السطح المشترك تلبس حدَّ قطاعها حين تعلنه ──────────────────────
   والقاعدة مشروطةٌ بالسمة، فلا إعلانَ واحدًا على صفٍّ لا قطاعَ له: الطبقةُ
   تبقى خاملةً على كلّ قائمةٍ لم تُعلن قطاعها بعد. */
.az-card[data-sector], .az-card[data-tone],
.az-gcard[data-sector], .az-gcard[data-tone] { border-inline-start: 3px solid var(--sector, var(--p300)); }

.az-table tr[data-sector] > td:first-child,
.az-table tr[data-tone] > td:first-child { box-shadow: inset 3px 0 var(--sector, var(--p300)); }

.az-timeline > li[data-sector] > time,
.az-timeline > li[data-tone] > time { color: color-mix(in srgb, var(--sector, var(--p500)) 70%, var(--ink)); }

/* ── رموز لون الحالة: ست حالات × ثلاث درجات ─────────────────────────────────
   `--st-X` صلبة للشريط والنقطة · `--st-X-bg` فاتحة لخلفية الرقاقة · `--st-X-ink`
   داكنة للنص (تباينها ≥٤٫٥ على الكريمي `#F2EDE3` وعلى السطح `#FBF7EE` وعلى
   خلفية رقاقتها). والصلبة للعلامة لا للنص. ولا تحمل اللونَ وحده: كل حالة
   لها أيقونة ونص في الواجهة. */
:root {
  --st-bar: 3px; /* سماكة شريط الحالة */
  --st-decision: #C0392B; --st-decision-bg: #F8E3DF; --st-decision-ink: #8E1F1F; /* تحتاج قرارك */
  --st-waiting: #B5780A;  --st-waiting-bg: #F7EBCF;  --st-waiting-ink: #7A4F00;   /* تنتظر غيرك */
  --st-review: #2F6DB5;   --st-review-bg: #E1EBF7;   --st-review-ink: #1F4E8C;    /* قيد الدراسة */
  --st-done: #2E8B57;     --st-done-bg: #DDF0E4;     --st-done-ink: #17613B;      /* تقدّم مكتمل */
  --st-new: #7B5EA7;      --st-new-bg: #E9E2F3;      --st-new-ink: #5B3F8A;       /* جديدة من الرادار */
  --st-calm: #8F867A;     --st-calm-bg: #E8E2D6;     --st-calm-ink: #5E564A;      /* هادئة */
}
[data-status="decision"] { --st: var(--st-decision); --st-bg: var(--st-decision-bg); --st-ink: var(--st-decision-ink); --st-icon: "!"; }
[data-status="waiting"] { --st: var(--st-waiting); --st-bg: var(--st-waiting-bg); --st-ink: var(--st-waiting-ink); --st-icon: "◔"; }
[data-status="review"] { --st: var(--st-review); --st-bg: var(--st-review-bg); --st-ink: var(--st-review-ink); --st-icon: "◐"; }
[data-status="done"] { --st: var(--st-done); --st-bg: var(--st-done-bg); --st-ink: var(--st-done-ink); --st-icon: "✓"; }
[data-status="new"] { --st: var(--st-new); --st-bg: var(--st-new-bg); --st-ink: var(--st-new-ink); --st-icon: "✦"; }
[data-status="calm"] { --st: var(--st-calm); --st-bg: var(--st-calm-bg); --st-ink: var(--st-calm-ink); --st-icon: "–"; }

/* رقاقةُ الحالة: أيقونةٌ ونصّ على خلفية فاتحة. الأيقونة مزخرفة (النصّ يقول المعنى). */
.az-status, .s1-item[data-status] .s1-gate {
  display: inline-flex; align-items: center; gap: calc(var(--space-2) * .75); width: max-content; max-width: 100%;
  padding: 1px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--micro); font-weight: 700; white-space: nowrap;
  background: var(--st-bg, var(--st-calm-bg)); color: var(--st-ink, var(--st-calm-ink));
}
.az-status::before, .s1-item[data-status] .s1-gate::before {
  content: var(--st-icon, "–"); content: var(--st-icon, "–") / "";
  display: inline-grid; place-items: center; flex: none; width: 1.25em; height: 1.25em; border-radius: 50%;
  background: var(--st, var(--st-calm)); color: var(--paper); font-size: .75em; line-height: 1; font-weight: 800;
}