/* ============================================================
   سنيح ديجيتال — الرموز البصرية (Design Tokens)
   مصدر الهوية: دليل سنيح المعتمد. صفر مصدر خارجي في هذا الملفّ —
   لا خطوط شبكة، لا CDN، لا صور بعيدة. كل شيء محلّي أو مضمَّن بـdata:.
   ============================================================ */

:root {
  /* الألوان الخمس + بنفسجي قطاع ديجيتال — تُستعمل بنسبة 70/20/10:
     المحايد (أسود/عاجي/رمادي) خلفياتٍ ونصوصاً، الذهب للفعل الأساسي وحده،
     والبنفسجي لوسم «ديجيتال» في الترويسة فقط. */
  --ink:      #111214;  /* أسود سنيح — نصّ ومحايد */
  --gold:     #C9952E;  /* ذهب سنيح — فعلٌ أساسي وحده */
  --ivory:    #F8F5EE;  /* عاجي دافئ — خلفية المحايد */
  --navy:     #071827;  /* كحلي مؤسسي */
  /* رماديُّ الدليل #6E7074 على الأرضيّة البنفسجيّة 4.47:1 — تحت 4.5 ⇒ رماديُّ التطبيق الأغمق
     (`muted` في apps/digital/src/theme.ts): 5.96:1 على الأرضيّة. */
  --grey:     #5C6068;  /* رمادي محايد — نصّ ثانوي */
  --digital:  #6651C6;  /* بنفسجي قطاع ديجيتال — وسمٌ في الترويسة فقط */

  /* ثيم التطبيق «مسار الطلب» على الموقع (قرار المالك 25/09/2026، كالتطبيق 23/09):
     البنفسجيّ لكلّ عنصرٍ تفاعليّ بدل الذهب، وأرضيّةٌ مائلةٌ للبنفسجيّ، وترويسةٌ كحليّة.
     الذهبُ يبقى لونَ الحالة «جديد» (الوسم وتظليل الصفّ) لا لونَ فعل.
     التباين (WCAG، مقيس): الأبيض على #6651C6 = 5.90:1 · وعلى التمرير #5641B0 = 7.56:1 ·
     #A7B2C3 على الكحليّ = 8.38:1 · والأبيض عليه = 17.96:1 · #6651C6 على الأرضيّة = 5.32:1. */
  --accent:          #6651C6;
  --accent-hover:    #5641B0;
  --on-accent:       #FFFFFF;
  --accent-text:     #6651C6;  /* نصٌّ وحدودُ تركيزٍ بنفسجيّة — يُفتح في الداكن */
  --ground:          #F4F2FA;
  --header:          #071827;
  --on-header:       #FFFFFF;
  --on-header-muted: #A7B2C3;

  /* لوحةُ الواجهة العامّة «أ · معرض الأعمال» (قرار المالك 25/09/2026) — فاتحةٌ **مثبَّتة**
     لا تنقلب في الوضع الداكن، فلا تُعاد في كتلته. من ألوان الدليل نفسِها وتدرّجاتها.
     التباين (WCAG، مقيس): #111214 على #F8F5EE = 17.2:1 · #3B3E44 = 9.9:1 · #5C6068 = 5.8:1 ·
     #6651C6 = 5.4:1 · #1A6B43 على #EAF5EF = 5.8:1 · #7A5A12 على #FBF3E4 = 5.8:1 ·
     #111214 على #EDE9FB = 15.8:1 · #6651C6 عليه = 5.0:1. */
  --la-ivory:       #F8F5EE;
  --la-paper:       #FFFFFF;
  --la-ink:         #111214;
  --la-body:        #3B3E44;
  --la-grey:        #5C6068;
  --la-navy:        #071827;
  --la-violet:      #6651C6;
  --la-violet-mid:  #C9B8F5;
  --la-violet-soft: #EDE9FB;
  --la-line:        rgba(17, 18, 20, .10);
  --la-line-strong: rgba(17, 18, 20, .22);
  --la-ok:          #1A6B43;
  --la-ok-soft:     #EAF5EF;
  --la-beta:        #7A5A12;
  --la-beta-soft:   #FBF3E4;
  --la-danger:      #B42828;

  /* نصّ فوق الذهب — ثابتٌ بالوضعين عمداً لا تابعاً لـ--ink: الذهب #C9952E لا
     يتبدّل بين الفاتح والداكن، فنصٌّ يتبدّل فوقه (--ink الفاتح داكن/الداكن فاتح)
     يفشل تباينه ليلاً (2.47:1). القياس (WCAG): #111214 على #C9952E = 6.98:1
     في كِلا الوضعين — لأن كِلا الطرفين ثابتٌ. */
  --on-gold:  #111214;

  --surface:  #FFFFFF;
  --danger:   #B42828;  /* 6.4:1 على الأبيض */
  /* 🔴 --ink ينقلب بين الوضعين (أسود ⇄ عاجيّ)، فأيّ نصٍّ فوقه يلزمه
     رمزُه المقابل. تثبيت #FFFFFF جعل الشريحة المُفعَّلة أبيضَ على
     عاجيّ في الوضع الداكن — تباين 1.1:1. */
  --on-ink:       #FFFFFF;
  --on-ink-muted: rgba(255, 255, 255, .72);
  /* نصّ الوسوم — الخلفيات شفّافة فتعمل في الوضعين، أمّا النصّ فلا: الكحليّ
     (#071827) على سطحٍ داكن اختفى تماماً في «مقبول». القيم أدناه مقيسة فوق
     خلفيّة الوسم نفسها لا فوق السطح. */
  --tag-new:      #7A5A12;   /* 5.6:1 */
  --tag-progress: #4A3A9E;   /* 7.1:1 */
  --tag-done:     #071827;   /* 15.2:1 */
  --line:     rgba(17, 18, 20, .10);
  /* شريطُ الحصّة في شاشة القياس: محايدٌ عمداً لا ذهبيّ — الذهبُ للفعل الأساسي
     وحده بقاعدة 70/20/10، وشريطٌ ذهبيٌّ يسرق انتباهاً يستحقّه الزرّ. */
  --bar:      rgba(17, 18, 20, .45);
  --bar-track: rgba(17, 18, 20, .06);

  /* بوّابة الموظّفين (25/09/2026) — وسومُ الحالة (تعمل · انتبه · معطَّل) ولمساتُ
     الشريط الكحليّ. النصُّ مقيسٌ فوق خلفيّة الوسم نفسِها: #1A6B43 على الأخضر الشفيف
     5.4:1 · #9A5B00 على الذهبيّ الشفيف 5.0:1. */
  --ok:           #1A6B43;
  --ok-soft:      rgba(31, 122, 77, .12);
  --warn:         #9A5B00;
  --warn-soft:    rgba(201, 149, 46, .18);
  --danger-soft:  rgba(180, 40, 40, .10);
  --gold-soft:    rgba(201, 149, 46, .16);
  --header-hover: rgba(255, 255, 255, .07);
  --header-line:  rgba(255, 255, 255, .14);

  /* مسارُ الصفقات (26e) — أرضيّةُ اللوحة وأعمدتُها كنموذج المالك المعتمد، والبطاقاتُ --surface.
     التباين (WCAG، مقيس): #111214 على #ECEEF2 = 16.1:1 · #5C6068 عليه = 5.4:1 · #6651C6 على #EFECFB = 5.1:1. */
  --deal-board:  #F4F5F7;
  --deal-col:    #ECEEF2;
  --accent-soft: #EFECFB;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius: 10px;

  /* قناع رمز الريال السعودي — SVG الهيئة الرسمي مضمَّن بـBase64 (data: URI)،
     لا ملفّ خارجي ولا خطّ رمزي ولا مصدر شبكة.
     🔴 تعريفُه هنا شرط لا زخرفة: استعمال .sar بلا تعريف هذا المتغيّر
     يُنتج مربّعاً فارغاً مكان الرمز بدل الأيقونة. */
  --sar-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTYgM3YxMWw1LTFWMnptNyAwdjkuNmw1LTFWM3pNNiAxNi41bDEyLTIuNHYybC0xMiAyLjR6bTAgNEwxOCAxOHYyTDYgMjIuNXoiLz48L3N2Zz4=");
}

/* الوضع الداكن — نفس الرموز، أدوار مبدَّلة، دون أي تصريح لوني جديد خارج :root */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:     #F8F5EE;
    --ivory:   #0D1117;
    --surface: #131A24;
    --line:    rgba(248, 245, 238, .14);
    /* 🔴 أوّلُ قيمتين (.28 و.09) كانتا متقاربتين على سطحٍ داكن فلم يُقرأ طرفُ
       الشريط — وشريطٌ لا يُرى حدُّه زينةٌ تشغل مساحةً ولا تقول شيئاً. قِيس
       بلقطةٍ حقيقيّة لا بالظنّ، ثمّ فُرّق. */
    --bar:      rgba(248, 245, 238, .58);
    --bar-track: rgba(248, 245, 238, .07);
    /* --grey الأصلي (#6E7074) ثابتٌ على أسطحَ صارت داكنة فسقط تباينه تحت 4.5:1
       (3.52:1 على --surface، 3.81:1 على --ivory). أُفتح تدريجياً لأقرب درجةٍ
       تُجاوز الحدّ بهامش: 5.03:1 و5.44:1 على التوالي (WCAG). */
    --grey:    #868A8E;
    /* الأحمر الفاتح (#B42828) على سطحٍ داكن يهبط إلى 3.1:1 — يُفتَح إلى 7.9:1 */
    --danger:  #FF8A8A;
    --on-ink:       #111214;
    --on-ink-muted: rgba(17, 18, 20, .66);
    --tag-new:      #E3B85C;   /* 7.4:1 داكناً */
    --tag-progress: #B3A6F5;   /* 7.8:1 */
    --tag-done:     #C8D3DC;   /* 9.6:1 */
    --ground:       #0D1117;
    /* #6651C6 على الأرضيّة الداكنة 3.0:1 فقط ⇒ نصٌّ بنفسجيٌّ فاتح (accentOnDark في التطبيق) */
    --accent-text:  #B3A8F2;
    /* وسومُ بوّابة الموظّفين على السطح الداكن — تُفتح كما فُتح الأحمر. */
    --ok:           #5FD3A0;
    --ok-soft:      rgba(45, 212, 167, .14);
    --warn:         #F2C063;
    --danger-soft:  rgba(255, 77, 77, .14);
    --gold-soft:    rgba(201, 149, 46, .20);
    /* الصفقات داكنةً: العمودُ أغمقُ من البطاقة (--surface) فتبرز البطاقة كما في الفاتح. */
    --deal-board:  #0A0F15;
    --deal-col:    #0E141C;
    --accent-soft: rgba(179, 168, 242, .16);
  }
}

/* ------------------------------------------------------------
   الخطوط المضمَّنة محلياً — ملفّا خطٍّ متغيّرين (variable) في
   assets/fonts/: كلٌّ منهما يغطّي الأوزان 100–900 بملفّ واحد، لا ملفّ لكل
   وزن. مسارٌ نسبيّ محلّي فقط — صفر @import وصفر رابط شبكة.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("fonts/noto-sans-arabic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* عناوينُ الصفحة التعريفية وحدها — الملفُّ نفسُه الذي تستعمله داناي، محلّيٌّ بوزنٍ واحد. */
@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("fonts/noto-kufi-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  direction: rtl;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Noto Sans Arabic", "Inter", system-ui, "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

a { color: inherit; }
img { max-width: 100%; }

/* الأرقام — جدولية العرض في كل جدول وعرضٍ لرقم */
.num, table td, table th { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   رمز الريال السعودي — يُرسم بقناع CSS (currentColor) لا بمحرف خطّ،
   فيتلوّن مع النصّ المحيط تلقائياً في الوضعين الفاتح والداكن.
   ------------------------------------------------------------ */
.sar {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask: var(--sar-mask) center / contain no-repeat;
          mask: var(--sar-mask) center / contain no-repeat;
}

/* ------------------------------------------------------------
   الترويسة والتذييل — انظر src/layout.php لبنية الوسوم
   ------------------------------------------------------------ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--header);
  color: var(--on-header);
  border-bottom: 1px solid var(--line);
}

/* 🔑 الشعارُ يبدّل نسختيه بوضع الجهاز لا بلون الترويسة ⇒ على الكحليّ في الوضع الفاتح
   كان سيظهر الظبيُ الأسود. هنا وحدَه تُعرض النسخةُ الذهبيّةُ المعتمدة للخلفيات الداكنة
   (ملفٌّ مستقلّ مستخرجٌ حرفيّاً) خلفيّةً، وتُزاح صورةُ الوسم عن مربّعها. بطاقةُ الدخول
   الفاتحة خارج الترويسة فيبقى شعارُها كما هو. */
.site-header .brand-mark {
  background: url("logo-saniyh-on-dark.svg") center / contain no-repeat;
  object-position: -9999px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* 🔑 كان التسطير يُلغى في `.site-header a` وحدها، فظهرت العلامة مسطَّرةً في
     بطاقة المصادقة حيث لا ترويسة. القاعدة مكانها العنصر نفسه. */
  text-decoration: none;
  color: inherit;
}

.brand-mark { display: block; height: 34px; width: auto; }

.brand-name {
  font-weight: 700;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* وسم «ديجيتال» — البنفسجي المساند، مقصورٌ على هذا الموضع وحده */
.tag-digital {
  display: inline-block;
  background: var(--digital);
  color: #FFFFFF;
  font-size: .75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  line-height: 1.5;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* 🔴 `:not(.btn)` ليس تجميلاً: بدونه تغلب هذه القاعدة `.btn-primary` بالخصوصية
   (0,1,1 مقابل 0,1,0)، فيأخذ زرّ «طلب جديد» الذهبيّ لونَ النصّ الرماديّ —
   تباينٌ 2.1:1 في الوضع الفاتح و1.3:1 في الداكن، وكلاهما دون حدّ WCAG. كان
   العطب في ترويسة كل صفحة عميل، ولم تُظهره شاشة الموظّف لأنها بلا ترويسة. */
.site-nav a:not(.btn) {
  text-decoration: none;
  color: var(--on-header-muted);
  font-size: .9375rem;
  font-weight: 500;
}
.site-nav a:not(.btn):hover { color: var(--on-header); }
/* الزرّ الثانويّ نصُّه --ink (داكنٌ في الفاتح) فيختفي على الكحليّ ⇒ يُقلب داخل الترويسة. */
.site-header .btn-secondary { color: var(--on-header); border-color: rgba(255, 255, 255, .28); }
.site-header .btn-secondary:hover { background: rgba(255, 255, 255, .10); }

.site-footer {
  padding: var(--space-6);
  text-align: center;
  color: var(--grey);
  font-size: .875rem;
  border-top: 1px solid var(--line);
}
/* بندُ الهويّة لا ينكسر من داخله على الجوّال: الرقمُ مع عنوانه، والفاصلُ بين البنود وحدها. */
.footer-identity span { white-space: nowrap; }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6);
}

/* ------------------------------------------------------------
   الأزرار — الذهب (20٪) للفعل الأساسي وحده؛ الثانوي محايدٌ صِرف
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover { background: var(--line); }

/* ------------------------------------------------------------
   الجداول — لعروض الأسعار وقوائم الطلبات
   ------------------------------------------------------------ */
table { border-collapse: collapse; width: 100%; }
table th, table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: right;
}
table th { font-weight: 600; color: var(--grey); }

/* ============================================================
   الطباعة — بديلٌ عمليّ عن تصدير PDF من الخادم.
   🔴 السبب: `src/Pdf.php` يحتاج Chrome headless، و**لا كروم ولا كروميوم ولا
      wkhtmltopdf على خادم الإنتاج** (قِيس 29/08). فزرُّ «تحميل PDF» كان سيفشل
      دائماً. والمتصفّح يحفظ الصفحة PDF بنفسه بلا أي اعتمادٍ على الخادم.
   🔑 ولا نُخفي بالجافاسكربت: قواعد الطباعة وحدها تكفي، فتعمل ولو عُطّل السكربت.
   ============================================================ */
@media print {
    .site-header,
    .site-footer,
    .no-print { display: none !important; }

    body { background: #fff; color: #000; }
    main { max-width: none; margin: 0; padding: 0; }

    /* العرض المجمَّد هو المقصود بالطباعة — بلا إطارٍ ولا ظلّ يبدّد الحبر. */
    .quote-frozen {
        border: 0;
        box-shadow: none;
        padding: 0;
        page-break-inside: auto;
    }

    /* الروابط داخل العرض تُطبع نصّاً — عنوانٌ أزرق على ورقٍ لا معنى له. */
    .quote-frozen a { color: #000; text-decoration: none; }

    /* لا نقطع جدولاً في منتصف صفٍّ. */
    tr, td, th { page-break-inside: avoid; }
}

/* ============================================================
   ٢) العناصر الأوّلية — النماذج والحقول
   كانت الصفحات تعتمد افتراضات المتصفّح: حقولٌ عارية بلا إطار ولا حشو،
   وتسمياتٌ ملاصقة، ونماذج ملصوقة في حافة الشاشة. النظام كان يُنسّق الترويسة
   والأزرار وحدها.
   ============================================================ */
form { margin: 0; }

.field { margin-block-end: var(--space-4); }

label {
    display: block;
    margin-block-end: var(--space-2);
    font-weight: 600;
    font-size: .93rem;
    color: var(--ink);
}

/* 🔴 `tel` و`url` كانا خارج القائمة: حقل الجوال في نموذج التسجيل كان يُرسم
   بنمط المتصفّح الافتراضي — بلا حدٍّ ولا حشوٍ ولا حلقة تركيزٍ ذهبية — بجانب
   حقولٍ منسَّقة. عيبٌ يُرى بالعين ولا يكسر شيئاً، فيبقى. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"],
input[type="url"], select, textarea {
    inline-size: 100%;
    box-sizing: border-box;
    padding: var(--space-3) var(--space-4);
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .12s, box-shadow .12s;
}

textarea { min-block-size: 7rem; resize: vertical; }

/* 🔑 حلقة تركيزٍ مرئية بذهب سنيح — لا `outline: none` بلا بديل: من يتنقّل
   بالمفتاح يفقد موضعه تماماً. والظلّ يعمل في الوضعين. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid transparent;
    border-color: var(--accent-text);
    box-shadow: 0 0 0 3px rgba(102, 81, 198, .28);
}

input::placeholder, textarea::placeholder { color: var(--grey); opacity: 1; }

.hint { margin-block-start: var(--space-2); font-size: .85rem; color: var(--grey); }

/* 🔴 كان `.muted` مستعمَلاً في `account.php` **وغيرَ معرَّفٍ إطلاقاً**: النصّ
   الثانويّ («تظهر على عروض الأسعار…») كان يُرسم بوزن النصّ الأساسيّ ولونه،
   فيتساوى بصرياً مع ما يفترض أن يعلوَه. صنفٌ يُكتب في الترميز ولا وجود له في
   الأنماط لا يُخطئ أحداً — ولذلك يبقى. */
.muted { font-weight: 400; color: var(--grey); }

/* رسائل الخطأ — قائمةٌ عارية كانت تُعرض بنقاطٍ افتراضية */
.errors {
    margin: 0 0 var(--space-6);
    padding: var(--space-3) var(--space-4);
    list-style: none;
    border: 1px solid rgba(180, 40, 40, .35);
    border-radius: var(--radius);
    background: rgba(180, 40, 40, .07);
}
.errors li + li { margin-block-start: var(--space-2); }

/* ============================================================
   ٣) بطاقة المصادقة — شاشة دخولٍ لا نموذجٌ في الفراغ
   ============================================================ */
.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 62vh;
    padding-block: var(--space-8);
}

.auth-card {
    inline-size: 100%;
    max-inline-size: 26rem;
    padding: var(--space-8);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) * 1.6);
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.08);
}

.auth-card h1 {
    margin: 0 0 var(--space-2);
    font-size: 1.5rem;
}

.auth-card .auth-sub {
    margin: 0 0 var(--space-6);
    color: var(--grey);
    font-size: .95rem;
}

.auth-card .btn { inline-size: 100%; margin-block-start: var(--space-2); }

.auth-alt {
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--line);
    font-size: .9rem;
    text-align: center;
}
.auth-alt a { color: var(--grey); }
.auth-alt a:hover { color: var(--ink); }

/* ============================================================
   ٤) الشرائح — الفلاتر كانت روابط مسطَّرة متلاصقة في سطرٍ واحد،
      لا يُعرف منها المُفعَّل من غيره ولا أين ينتهي خيارٌ ويبدأ آخر.
   ============================================================ */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
}

.filters-label {
    margin-inline-end: var(--space-2);
    font-size: .85rem;
    font-weight: 600;
    color: var(--grey);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: .9rem;
    line-height: 1.4;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color .12s, background .12s;
}
.chip:hover { border-color: var(--grey); }

/* 🔑 المُفعَّل يُعرف بالتعبئة لا باللون وحده — عمى الألوان لا يميّز ذهباً من
   رماديّ، والحدّ السميك يُبقيه واضحاً في الوضع عالي التباين. */
.chip[aria-current="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-ink);
    font-weight: 600;
}

.chip .count {
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
    color: var(--grey);
}
.chip[aria-current="true"] .count { color: var(--on-ink-muted); }

/* ============================================================
   ٥) الجدول — قائمة الطلبات كانت صفوفاً بلا حدود ولا محاذاة
   ============================================================ */
.table-wrap {
    overflow-x: auto;                 /* الجوّال: يمرّر الجدول لا الصفحة */
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

table.data {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: .94rem;
}

table.data th {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    font-size: .82rem;
    font-weight: 600;
    color: var(--grey);
    background: var(--ivory);
    border-block-end: 1px solid var(--line);
    white-space: nowrap;
}

table.data td {
    padding: var(--space-4);
    border-block-end: 1px solid var(--line);
    vertical-align: middle;
}
table.data tbody tr:last-child td { border-block-end: 0; }
table.data tbody tr:hover { background: rgba(102, 81, 198, .05); }

/* الأرقام والتواريخ بأرقامٍ متساوية العرض فتصطفّ رأسياً */
table.data .num, table.data .when { font-variant-numeric: tabular-nums; }
/* 🔴 «2026-08-24 09:12» في سياقٍ عربيّ يُعاد ترتيب مقطعيه فيظهر «09:12 2026-08-24».
   المشكلة ليست في النصّ بل في اتجاه السياق: المسافة محايدة، فيُقلب المقطعان.
   🔑 `direction: ltr` تُصلح الترتيب، و`text-align: right` تُبقي العمود محاذياً
      لبداية القراءة العربية. */
table.data .when {
    color: var(--grey);
    white-space: nowrap;
    font-size: .88rem;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

/* ============================================================
   ٦) وسم الحالة
   ============================================================ */
.badge {
    display: inline-block;
    padding: 2px var(--space-3);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.7;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge-new      { background: rgba(201, 149, 46, .14); border-color: rgba(201,149,46,.4);  color: var(--tag-new); }
.badge-progress { background: rgba(102, 81, 198, .12); border-color: rgba(102,81,198,.34); color: var(--tag-progress); }
.badge-done     { background: rgba(7, 24, 39, .08);    border-color: rgba(7,24,39,.22);    color: var(--tag-done); }

/* ============================================================
   ٧) حالة الفراغ — «لا توجد طلبات» كانت جملةً عائمة بلا سياق
   ============================================================ */
.empty {
    padding: var(--space-8) var(--space-6);
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.empty h2 { margin: 0 0 var(--space-2); font-size: 1.05rem; }
.empty p  { margin: 0; color: var(--grey); font-size: .93rem; }

/* عنوان عمودٍ للقارئ الصوتيّ وحده — العمود بلا عنوانٍ يقرؤه الصوت «فارغ». */
/* 🔴🔴 كانت `position: absolute` — وهي الوصفة الشائعة، وهي هنا عطبٌ حقيقيّ:
   العنصر داخل خليّة جدولٍ يُمرَّر أفقياً، ولا سلفَ موضَّع فوقه، فيُحسَب موضعه
   من الجذر عند س≈٦٣٣ **فيمدّ عرض المستند كلّه** — تمريرٌ أفقيّ في كل شاشة فيها
   جدول. كشفَه تعطيلُ القواعد قاعدةً قاعدة على جهازٍ محاكى، لا قراءةُ الشِفرة:
   القاعدة صحيحة منفردةً، والعطب في موضع استعمالها.
   🔑 والبديل يبقى في التدفّق: مربّعٌ ١×١ مقصوص، يُقرأ صوتياً ولا يُرى ولا يهرب. */
.visually-hidden {
    display: inline-block;
    inline-size: 1px; block-size: 1px;
    padding: 0; border: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}


/* ============================================================
   ٨) توسيط رأسيّ حقيقيّ لشاشات المصادقة
   🔴 كانت البطاقة تعلو الشاشة ويبقى تحتها فراغٌ ميّت: `.auth` أخذت `62vh`
      بينما `body` بطول محتواه، فتوسّطت داخل نفسها لا داخل الشاشة.
   🔑 و`:has()` تجعلها تخصّ صفحات المصادقة وحدها — فصفحاتٌ فيها ترويسة وتذييل
      لا يُمدّ فيها `main` بلا داعٍ.
   ============================================================ */
body:has(.auth) {
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
}
body:has(.auth) main { flex: 1 0 auto; display: flex; }
.auth { flex: 1; min-block-size: 0; }

/* شاشات ضيّقة: الحشو ٢٤px من كل جهة يبتلع ثلث العرض في جوّالٍ صغير */
@media (max-width: 30rem) {
    main { padding: var(--space-4); }
    .auth-card { padding: var(--space-6); }
    .auth { padding-block: var(--space-4); }
}

/* برّاق العلامة داخل البطاقة — بديل النمط السطريّ */
.auth-card .brand { justify-content: center; margin-block-end: var(--space-6); }

/* ============================================================
   ٩) الاختيارات — «نعم / لا» كانت زرّاً مجهرياً بجانب نصٍّ عريض
   🔑 التنسيق بـ`:has()` لا بصنفٍ جديد: النموذج يُبنى ديناميكياً من `questions`
      في القاعدة، فأي سؤالٍ يضيفه موظّفٌ غداً يأخذ الشكل نفسه بلا تعديل شِفرة.
   ============================================================ */
label:has(> input[type="radio"]), label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-weight: 400;                  /* الخيار ليس عنواناً */
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
label:has(> input[type="radio"]):hover,
label:has(> input[type="checkbox"]):hover { border-color: var(--grey); }

/* المُختار يُعرف بالحدّ والخلفية معاً لا باللون وحده */
label:has(> input:checked) {
    border-color: var(--accent-text);
    background: rgba(102, 81, 198, .07);
    font-weight: 600;
}

label > input[type="radio"], label > input[type="checkbox"] {
    inline-size: 1.05rem; block-size: 1.05rem;
    accent-color: var(--accent);
    flex: none; margin: 0;
}

/* حلقة التركيز على الصفّ كلّه — الزرّ نفسه أصغر من أن يُرى */
label:has(> input:focus-visible) {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 3px rgba(102, 81, 198, .28);
}

/* ============================================================
   ٩-ب) مجموعة اختيارٍ مُعنوَنة — «نوع الحساب» و«نوع المنشأة» في التسجيل
   🔑 `fieldset` لا `div`: المجموعة سؤالٌ واحدٌ بعدّة أجوبة، و`legend` هي نصّه.
      قارئُ الشاشة ينطق العنوان مع كلّ خيار، فيَعرف المستمعُ أن «فرد» جوابُ
      «نوع الحساب» لا خيارٌ معلَّقٌ في الفراغ. و`div` بعنوانٍ فوقه يفقد هذا.
   ============================================================ */
.choice-group {
    margin: 0 0 var(--space-6);
    padding: 0;
    border: 0;                     /* حدُّ fieldset الافتراضي يزاحم حدود الخيارات */
}
.choice-group > legend {
    /* 🔑 `float` ثمّ `width` — بلا هذا يفرض `legend` عرضه على الحاوية في بعض
       المحرّكات فينكسر الصفّ. والـ`clear` على أوّل خيارٍ بعده يُنهي الطفو. */
    float: inline-start;
    inline-size: 100%;
    margin-block-end: var(--space-2);
    padding: 0;
    font-weight: 600;
    font-size: .93rem;
    color: var(--ink);
}
.choice-group > .choice:first-of-type { clear: both; }

/* 🔑 `.choice` لا يُعيد تعريف شكل الصفّ: قاعدة `label:has(> input[type=radio])`
   أعلاه تملكه بالفعل، وتكرارُه هنا نسختان تتباعدان عند أوّل تعديل. الصنفُ
   للانتقاء والتباعد وحدهما — ولوجوده معنىً في الترميز يقرؤه من يعدّل. */
.choice { margin-block-end: var(--space-2); }
.choice:last-child { margin-block-end: 0; }

/* وصفُ الخيار تحت اسمه — «منشأة» ثمّ سطرُ ما تعنيه */
.choice small {
    display: block;
    margin-block-start: 2px;
    font-weight: 400;
    font-size: .85rem;
    color: var(--grey);
}

/* ============================================================
   ٩-ج) فخّ العسل — حقلٌ يراه الآليّ ولا يراه الإنسان
   🔴 الإخفاء **بالإزاحة لا بـ`display:none`**: كثيرٌ من الآليّات يتخطّى
      `display:none` و`visibility:hidden` صراحةً (وهما أوّل ما يُفحص)، أمّا
      حقلٌ مُزاحٌ خارج الشاشة فيبدو له حقلاً معروضاً عادياً فيملؤه.
   🔑 و`clip-path` مع الأبعاد الصفرية تمنع أي أثرٍ بصريّ حتى في الطباعة،
      و`pointer-events: none` تمنع إصابته بنقرةٍ عرضية.
   ============================================================ */
.hp-field {
    position: absolute;
    inset-inline-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
}

/* ============================================================
   ١٠) بطاقة المحتوى — أقسام صفحات التفاصيل كانت نصّاً متلاصقاً بلا فواصل
   ============================================================ */
.card {
    padding: var(--space-6);
    margin-block-end: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.card > :first-child { margin-block-start: 0; }
.card > :last-child  { margin-block-end: 0; }
.card h2 { margin-block-end: var(--space-4); font-size: 1.05rem; color: var(--ink); }

/* 🔴 مستند الفاتورة/العقد المجمَّد يحمل <style> بمحدِّداتٍ عامّة (body·h2·td) بلا
   نطاق، فحين يُحقَن في الصفحة يتسرّب ويجعل نصّ بطاقة «التحقّق» داكناً على سطحٍ
   داكن فيختفي. نُعيد تثبيت ألوان البطاقة صراحةً بمحدِّدٍ أعلى تخصيصاً ليغلب التسرّب. */
.card > p { color: var(--grey); }
.card table.data td { color: var(--ink); }

/* ترويسة الصفحة: العنوان وسطره التوضيحيّ كتلةٌ واحدة */
.page-head { margin-block-end: var(--space-6); }
.page-head h1 { margin-block-end: var(--space-2); }
.page-head p  { margin: 0; color: var(--grey); }


/* علامة الحقل المطلوب — كانت نجمةً بلون النصّ لا تُميَّز، وبلا وصفٍ صوتيّ */
.req {
    margin-inline-start: 2px;
    color: var(--danger);
    font-weight: 700;
}

/* خطأ الحقل الواحد — كان `<br><strong>` بلون النصّ نفسه */
.field-error {
    margin-block-start: var(--space-2);
    margin-block-end: 0;
    font-size: .87rem;
    font-weight: 600;
    color: var(--danger);
}

/* والحقل المرفوض يُؤطَّر ليُرى موضع العطب لا رسالته وحدها */
.field:has(.field-error) input,
.field:has(.field-error) select,
.field:has(.field-error) textarea { border-color: var(--danger); }

/* ============================================================
   ١١) عرض القراءة — صفحات النصّ الطويل
   🔴 `main` عرضها 1100px، وهو صحيحٌ لجدولٍ أو لوحة، وخاطئٌ لفقرةٍ: قيس السطر
      بلغ ١٣٢ محرفاً، فتضيع العين في العودة إلى بداية السطر التالي.
   🔑 و`ch` تتبع الخطّ المستعمَل فعلاً، فتصحّ في العربية والإنجليزية معاً.
   ============================================================ */
.prose { max-inline-size: 68ch; }
.prose h2 { margin-block-start: var(--space-8); }
.prose li { margin-block-end: var(--space-2); }

/* ============================================================
   ١٢) الترويسة على الشاشات الضيّقة
   🔴 `.brand-name` بـ`display:flex` وافتراضها `nowrap`: فصار «سنيح ديجيتال —
      الموظّفون» سطراً واحداً لا ينكسر، ففرض على الصفحة عرض ٥٤٥ في جهازٍ عرضه
      ٣٩٠ — تمريرٌ أفقيّ في كل شاشة موظّف. ولم يظهر في شاشة الدخول لأنها بلا
      ترويسة، ولا على سطح المكتب لأن المتّسع كافٍ.
   🔑 والجدول كان بريئاً: `.table-wrap` تمرّر محتواها داخلياً كما صُمّمت.
   ============================================================ */
.brand-name { flex-wrap: wrap; }
.site-nav   { flex-wrap: wrap; row-gap: var(--space-2); }

@media (max-width: 40rem) {
    .site-header { padding: var(--space-4); gap: var(--space-3); }
    .site-nav { gap: var(--space-4); font-size: .9rem; }
    .brand-name { font-size: 1rem; }
}

/* ============================================================
   ١٣) شاشة الفريق — كلمةٌ تُعرض مرّةً، وأفعالٌ داخل صفّ جدول
   ============================================================ */
/* الكلمة المولَّدة: تُقرأ حرفاً حرفاً وتُنسخ بلا لبس، فتُعرض بخطٍّ ثابت العرض
   وبحجمٍ يكفي لتمييز l من 1 — وهي تُعرض مرّةً واحدة ولا تُسترجَع. */
.onetime {
    display: inline-block;
    padding: var(--space-3) var(--space-4);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.05rem;
    /* بلا `letter-spacing`: الخطّ الثابت العرض يفصل المحارف أصلاً، والتباعد
       زيادةٌ لا تُبرَّر — والكاشف محقّ في عدّه زخرفة. */
    direction: ltr;
    unicode-bidi: isolate;
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    user-select: all;                  /* نقرةٌ واحدة تُحدّدها كاملة */
}

/* نموذجٌ داخل خليّة — بلا هوامش تكسر ارتفاع الصفّ */
.inline-form { display: inline; margin: 0; }

.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.notice {
    padding: var(--space-3) var(--space-4);
    margin-block-end: var(--space-6);
    border: 1px solid rgba(45, 212, 167, .4);
    border-radius: var(--radius);
    background: rgba(45, 212, 167, .08);
}

/* زرٌّ معطَّل: يُرى أنه معطَّل — وإلا بدا الفعلُ متاحاً ثم لم يستجب */
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* قائمةٌ منسدلة داخل جدول: لا تمتدّ لعرض الخليّة كاملاً */
table.data select { inline-size: auto; min-inline-size: 11rem; padding: var(--space-2) var(--space-3); }


/* قيس القراءة داخل البطاقات — سطرٌ بلغ ١٤٧ محرفاً في تحذير الكلمة المولَّدة،
   وهو أطول نصٍّ في المنصّة يُقرأ مرّةً واحدة ولا يُعاد. */
.card .hint, .card > p { max-inline-size: 68ch; }

/* ============================================================
   ١٤) عمود السبب وقياس ترويسة الصفحة
   🔴 «550 5.1.1 المستخدم غير معروف» كان يُعرض «5.1.1 550 …»: مقطعان لاتينيّان
      يفصلهما محايد في سياقٍ عربيّ فيُقلبان. ورسائل خوادم البريد تبدأ برمزٍ
      لاتينيّ دائماً، فالسياق الصحيح لهذا العمود ltr مع محاذاةٍ إلى اليمين.
   ============================================================ */
table.data .reason {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
    max-inline-size: 26rem;
}

/* السطر التوضيحيّ تحت العنوان بلغ ١٤٧ محرفاً على الشاشة العريضة */
.page-head p { max-inline-size: 68ch; }

/* ============================================================
   ١٥) خيط المحادثة
   🔴 الموجز طلب متغيّر تباعدٍ خامساً غير معرَّف في :root (المُعرَّف: ١،٢،٣،٤،٦،٨
      فقط) — قيمةٌ غير موجودة تُسقط تصريح padding بالكامل (الحشو الأفقي يصير
      صفراً). استُبدل بمتغيّر التباعد السادس (نفس حشو .card الأفقي) مع الإبقاء
      على الرابع رأسياً كما ورد حرفياً.
   ============================================================ */
.msg {
    padding: var(--space-4) var(--space-6);
    margin-block-end: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
/* رسالة الفريق تُميَّز بسطحٍ أفتح، والحاملُ الحقيقيّ للتمييز هو اسم المؤلّف
   العريض في `.msg-head` — نصٌّ يقرؤه الجميع بلا اعتمادٍ على لونٍ ولا حدّ.
   🔴 وكان هنا حدٌّ جانبيّ ذهبيّ 3px بحجّة «عمى الألوان»، والحجّة باطلة: الاسم
      موجودٌ أصلاً فالحدّ زخرفةٌ لا وظيفة — وهو من أكثر أشكال الواجهات المولَّدة
      آلياً تكراراً. أزلتُه بدل تبريره. */
.msg-staff { background: var(--ivory); }
.msg-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    margin: 0 0 var(--space-2); font-size: .9rem;
}
.msg-head .when { color: var(--grey); direction: ltr; unicode-bidi: isolate; }
.msg-body { margin: 0; white-space: pre-wrap; }
.attachments { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.attachments li {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) 0; border-block-start: 1px solid var(--line);
}
input[type="file"] {
    inline-size: 100%; padding: var(--space-3);
    border: 1px dashed var(--line); border-radius: var(--radius);
    background: var(--surface); font: inherit; color: var(--ink);
}

/* 🔴 جولة إصلاح ١ للمهمّة ٥: اسم المرفق لاتينيّ غالباً (امتدادٌ وأرقام) ويُقلب
   في سياقٍ عربيّ — نفس فخّ التاريخ في `.msg-head .when` أعلاه (وعمود السبب في
   القسم ١٤). عزلٌ مكافئ، لا يمنع اسماً عربياً من الظهور صحيحاً — حروفه القويّة
   تُرتَّب بخوارزمية Unicode BiDi بمعزلٍ عن اتجاه الحاوية. */
.attachments a { direction: ltr; unicode-bidi: isolate; }

/* ------------------------------------------------------------
   لوحة الحالة (staff/ops.php) — ما لا نظير له في النظام القائم وحده.
   العنوان الفاصل، شبكةُ البطاقات الرقمية، وصيغةُ «تعذّر القياس».
   ------------------------------------------------------------ */

.section-head {
    margin-block: var(--space-8) var(--space-4);
    font-size: 1rem; font-weight: 600; color: var(--grey);
}
.section-head:first-of-type { margin-block-start: 0; }

/* 🔑 `minmax(min(100%, 16rem), 1fr)` لا `minmax(16rem, 1fr)`: الثانية تفرض
   عموداً أعرض من الشاشة عند 390px فيمتدّ المستند ويظهر تمريرٌ أفقيّ في كل
   الصفحة — وهو ما يقيسه فحص `scrollWidth === clientWidth`. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-4);
    margin-block-end: var(--space-4);
}
.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat-plain { padding: 0; border: 0; background: none; }
.stat-label {
    margin: 0; font-size: .9rem; font-weight: 600; color: var(--grey);
}
.stat-value {
    margin: 0; font-size: 1.6rem; line-height: 1.3; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.stat-note {
    margin: 0; font-size: .8rem; line-height: 1.6; color: var(--grey);
    overflow-wrap: anywhere;
}

/* 🔴🔴🔴 «تعذّر القياس» يُشفَّر **نصّاً** لا لوناً: من لا يميّز الألوان — ومن
   يسمع الصفحة — يقرأ العبارة نفسها. الحدّ المتقطّع إشارةٌ ثانية لا الإشارة. */
.unmeasured {
    display: inline-block; font-size: .95rem; font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border: 1px dashed var(--line); border-radius: var(--radius);
    color: var(--grey);
}
.unmeasured-why {
    display: block; margin-block-start: var(--space-2);
    font-size: .8rem; font-weight: 400; line-height: 1.6; color: var(--grey);
    overflow-wrap: anywhere;
}

.money-split { margin-block-end: var(--space-4); }
.money-split h3, .card > h3 { margin-block: 0 var(--space-3); font-size: 1.05rem; }
.money-split h4 { margin: 0; }

/* مسارٌ لاتينيّ داخل نصٍّ عربيّ — نفس عزل `.when` و`.attachments a`. */
.ltr-code { direction: ltr; unicode-bidi: isolate; font-family: "Inter", monospace; }

/* ─── مربّع الموافقة وبوب-أب الشروط/الخصوصية (signup) ─── */
.consent-field { margin-block: var(--space-6) var(--space-4); }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; font-size: .95rem; }
.consent input { margin-block-start: .2rem; flex: none; }
.consent a { text-decoration: underline; }

/* 🔑 قاعدةُ المؤلِّف `display:flex` تتغلّب على `[hidden]` الافتراضيّة (قاعدةُ
   المتصفّح)، فبلا هذا السطر يبقى المودال ظاهراً وإغلاقُه بـ`hidden` بلا أثر. */
.legal-modal[hidden] { display: none; }
.legal-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.legal-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.legal-modal__panel { position: relative; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); inline-size: min(760px, 100%); max-block-size: 88vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.legal-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--line); }
.legal-tabs { display: flex; gap: var(--space-2); }
.legal-tab { background: transparent; border: 1px solid var(--line); color: var(--grey); padding: var(--space-2) var(--space-3); border-radius: var(--radius); font: inherit; cursor: pointer; }
.legal-tab.is-active { color: var(--ink); border-color: var(--grey); }
.legal-modal__close { background: transparent; border: 0; color: var(--grey); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: var(--space-2); }
.legal-modal__close:hover { color: var(--ink); }
.legal-modal__body { overflow-y: auto; padding: var(--space-4) var(--space-6); }
.legal-modal__body .legal-pane > :first-child { margin-block-start: 0; }
.legal-modal__foot { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--line); text-align: start; }

/* ============================================================
   صفحة العرض (`public/about.php`) — الواجهة «أ · معرض الأعمال»
   (قرارُ المالك 25/09/2026: «أ كما هو»).

   🔑🔑 فاتحةٌ عاجيّةٌ **مثبَّتة** لا تنقلب مع وضع الجهاز — اختيارٌ مقصود:
      المعتمدُ صفحةٌ فاتحة، والعملُ المعروضُ يُقرأ عليها. فالرموزُ المتبدّلة
      (--ink · --grey · --line · --surface …) تُعاد إلى قيمها الفاتحة على
      `body` متى حوت الصفحةُ `.landing-a` — فتُقرأ الترويسةُ والتذييلُ والنموذجُ
      وشريطُ الموافقة كلُّها على العاجيّ بتباينها المقيس في `:root` (`--la-*`).
   🔑 والتخصيصُ بـ`.landing-a` وحدها: صفحاتُ العميل والموظّف لا يمسّها شيء.
      ومتصفّحٌ بلا `:has()` يرى الصفحةَ بثيم المنصّة العاديّ — مقروءةً كما كانت.
   🔑 ملفُّ نمطٍ واحد لا اثنان: رمزان للّون الواحد يتباعدان.
   ============================================================ */
body:has(.landing-a) {
    --ink: var(--la-ink);
    --grey: var(--la-grey);
    --line: var(--la-line);
    --surface: var(--la-paper);
    --ground: var(--la-ivory);
    --accent-text: var(--la-violet);
    --danger: var(--la-danger);
    --header: var(--la-ivory);
    --on-header: var(--la-ink);
    --on-header-muted: var(--la-grey);
    color-scheme: light;
}
body:has(.landing-a) .site-header { border-bottom-color: var(--la-line); }
/* الترويسةُ صارت عاجيّة ⇒ الشعارُ الأسودُ المعتمد للخلفيات الفاتحة لا الذهبيّ. */
body:has(.landing-a) .site-header .brand-mark { background: none; object-position: 50% 50%; }
body:has(.landing-a) main {
    max-width: 1200px;
    padding: 0 clamp(16px, 3vw, 36px);
}

/* 🔑 حلقةُ تركيزٍ ظاهرة لكلّ رابطٍ وزرّ في الصفحة وترويستها وتذييلها. */
.landing-a a:focus-visible,
.landing-a button:focus-visible,
body:has(.landing-a) .site-header a:focus-visible,
body:has(.landing-a) .site-footer a:focus-visible {
    outline: 2px solid var(--la-violet);
    outline-offset: 3px;
    border-radius: 6px;
}

.landing-a h1,
.landing-a h2 {
    font-family: "Noto Kufi Arabic", "Noto Sans Arabic", "Inter", system-ui, sans-serif;
    font-weight: 700;
    color: var(--la-ink);
}

/* الأزرار — الأسود على العاجيّ كما في المعتمد، والثانويّ محدَّدٌ بلا تعبئة.
   تباين: #F8F5EE على #111214 = 17.2:1، وعلى الكحليّ (التمرير) = 16.5:1. */
.landing-a .btn { min-block-size: 44px; padding: 10px 20px; font-size: 1rem; }
.landing-a .btn-primary { background: var(--la-ink); color: var(--la-ivory); }
.landing-a .btn-primary:hover { background: var(--la-navy); }
.landing-a .btn-secondary { color: var(--la-ink); border-color: var(--la-line-strong); }
.landing-a .btn-secondary:hover { background: var(--la-paper); }

/* ── البطل: نصٌّ ورسمٌ توضيحيّ متجاوران، يتكدّسان على الجوّال ── */
.landing-a .landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
    padding-block: clamp(32px, 6vw, 72px) clamp(24px, 3vw, 40px);
}
.landing-a .landing-hero h1 {
    margin: 0;
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.35;
    text-wrap: balance;
}
.landing-a .landing-hero h1 em { font-style: normal; color: var(--la-violet); }
.landing-a .lede {
    margin: 20px 0 0;
    max-inline-size: 38ch;
    color: var(--la-body);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.8;
}
.landing-a .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

/* الرسمُ التوضيحيّ — شبكةٌ بعمودين لا مواضعُ مطلقة: بطاقةُ الجوّال في عمودها
   وحدها، فلا تغطّي صفوفَ اللوحة على أيّ عرض (عيبُ المعتمد أُصلح هنا). */
.landing-a .la-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(124px, 13vw, 168px);
    gap: 16px;
    align-items: start;
}
.landing-a .la-card {
    padding: 16px;
    background: var(--la-paper);
    border: 1px solid var(--la-line);
    border-radius: 16px;
    box-shadow: 0 18px 40px -22px rgba(7, 24, 39, .45);
}
.landing-a .la-card p { margin: 0; }
.landing-a .la-mini { font-size: .75rem; color: var(--la-grey); }
.landing-a .la-dash { grid-column: 1; grid-row: 1; }
.landing-a .la-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    block-size: clamp(80px, 9vw, 110px);
    margin-block: 12px 8px;
}
.landing-a .la-bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--la-violet); }
.landing-a .la-bars i:nth-child(even) { background: var(--la-violet-mid); }
.landing-a .la-bars i:nth-child(1) { block-size: 40%; }
.landing-a .la-bars i:nth-child(2) { block-size: 62%; }
.landing-a .la-bars i:nth-child(3) { block-size: 48%; }
.landing-a .la-bars i:nth-child(4) { block-size: 80%; }
.landing-a .la-bars i:nth-child(5) { block-size: 58%; }
.landing-a .la-bars i:nth-child(6) { block-size: 92%; }
.landing-a .la-bars i:nth-child(7) { block-size: 70%; }
.landing-a .la-bars i:nth-child(8) { block-size: 86%; }
.landing-a .la-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 8px;
    border-block-start: 1px solid var(--la-line);
    font-size: .82rem;
}
/* القيمةُ شريطٌ لا رقم: حارسُ الصفحة يرفض كلَّ رقمٍ بلا مصدر، ورسمٌ توضيحيّ ليس مصدراً. */
.landing-a .la-row b { inline-size: 48px; block-size: 8px; border-radius: 999px; background: var(--la-violet-soft); }
.landing-a .la-row + .la-row b { inline-size: 30px; }
.landing-a .la-phone {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-block-size: 240px;
    margin-block-start: 48px;
    padding: 18px 14px;
    background: var(--la-navy);
    color: #FFFFFF;
    border-color: transparent;
    border-radius: 26px;
}
.landing-a .la-phone .la-mini { color: rgba(255, 255, 255, .74); }
.landing-a .la-phone .la-appt { margin-block-start: 12px; font-weight: 700; }
.landing-a .la-cta {
    margin-block-start: auto;
    padding: 8px;
    border-radius: 8px;
    background: var(--la-violet);
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
}
.landing-a .la-sync { grid-column: 1; grid-row: 2; margin-inline-start: 12%; }
.landing-a .la-sync .la-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
.landing-a .la-sync .la-chips span { padding: 3px 10px; border-radius: 6px; background: var(--la-violet-soft); font-size: .8rem; }

/* ── الأعمال: الدليلُ نفسُه، أربعُ بطاقاتٍ تحت الصدر مباشرةً ── */
.landing-a .la-work { padding-block: 8px clamp(40px, 5vw, 56px); scroll-margin-block-start: 16px; }
.landing-a .la-work h2 { margin: 0 0 16px; font-size: 1.05rem; color: var(--la-grey); }
.landing-a .la-work-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.landing-a .la-w {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px;
    background: var(--la-paper);
    border: 1px solid var(--la-line);
    border-radius: 14px;
}
.landing-a .la-w h3 { margin: 0; font-size: 1.05rem; }
.landing-a .la-w p { margin: 0; color: var(--la-grey); font-size: .88rem; line-height: 1.6; }
.landing-a .la-tag {
    margin-block-start: auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--la-ok-soft);
    color: var(--la-ok);
    font-size: .75rem;
    font-weight: 600;
}
.landing-a .la-w p + .la-tag { margin-block-start: 10px; }
.landing-a .la-tag-beta { background: var(--la-beta-soft); color: var(--la-beta); }
.landing-a .la-work-more { margin: 16px 0 0; }
.landing-a .la-work-more a { color: var(--la-violet); font-weight: 600; }

/* ── صفحة «أعمالنا» (`public/work.php`): دراساتُ الحالة على أرضيّة الواجهة «أ» ── */
.work-page { display: grid; gap: 20px; max-width: 880px; margin-inline: auto; padding-block: clamp(24px, 4vw, 48px); }
.work-page .wk-head h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.35; text-wrap: balance; }
.work-page .wk-head .lede { margin: 0; max-width: 62ch; color: var(--la-body); line-height: 1.8; }
.work-page .wk-case {
    display: grid;
    gap: 16px;
    padding: clamp(18px, 3vw, 26px);
    background: var(--la-paper);
    border: 1px solid var(--la-line);
    border-radius: 16px;
}
.work-page .wk-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.work-page .wk-tags .la-tag { margin: 0; }
.work-page .wk-tag { padding: 2px 10px; border: 1px solid var(--la-line); border-radius: 999px; color: var(--la-grey); font-size: .75rem; }
.work-page .wk-case h2 { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.5; text-wrap: balance; }
.work-page .wk-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.work-page .wk-cols h3 { margin: 0 0 6px; color: var(--la-grey); font-size: .85rem; }
.work-page .wk-cols ul { display: grid; gap: 4px; margin: 0; padding-inline-start: 18px; color: var(--la-body); line-height: 1.75; }
.work-page .wk-nums {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.work-page .wk-nums li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--la-line); border-radius: 12px; }
.work-page .wk-nums b { color: var(--la-ink); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.work-page .wk-nums span { color: var(--la-body); font-size: .9rem; }
.work-page .wk-nums small { color: var(--la-grey); font-size: .75rem; }
.work-page .wk-honest { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--la-beta-soft); color: var(--la-beta); font-size: .9rem; }
.work-page .wk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0; color: var(--la-grey); font-size: .9rem; }
@media (max-width: 640px) {
    .work-page .wk-cols { grid-template-columns: 1fr; }
}

/* ── «فواتيري» (`public/billing.php`): المدفوعُ والمتبقّي كلٌّ في خانته ── */
.bill-sum { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.bill-sum p { margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.bill-sum .bill-lbl { display: block; color: var(--grey); font-size: .85rem; }
.bill-sum strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
/* ── لوحةُ «طلباتي» (`CustomerHome`): ثلاثُ بطاقاتٍ تلتفّ على الجوّال ── */
.home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 20px; }
.home-tile { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.home-tile p { margin: 0; }
.home-lbl { color: var(--grey); font-size: .85rem; }
.home-val strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.home-open { margin: -8px 0 16px; }

/* ── طلباتُ التعديل والبلاغات (`Conversation::tickets`) ── */
.tickets { margin: 0 0 16px; }
.tickets ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tickets li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tickets li p { flex-basis: 100%; margin: 0; color: var(--grey); }
.msg-kind { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.msg-kind > legend { flex-basis: 100%; }
.msg-head .inline-form { display: inline; }

/* ── ملفّاتُ التسليم (`Deliverables`) أعلى طلب العميل ── */
.deliv { margin: 0 0 16px; padding: 16px; border: 1px solid var(--accent-soft); border-radius: var(--radius); background: var(--surface); }
.deliv h2 { margin: 0 0 8px; font-size: 1.1rem; }
.deliv ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.deliv li { display: grid; gap: 2px; }
.deliv a { font-weight: 600; overflow-wrap: anywhere; }

/* ── مراحلُ المشروع (`ProjectStage::bar`): أربعُ نقاطٍ على خطّ، المنجزُ ممتلئٌ والحاليّ بحلقة ── */
.pstage { margin: 0 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pstage p { margin: 0; }
.pstage-head { font-weight: 600; }
.pstage-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0 10px; padding: 0; list-style: none; counter-reset: pstage; }
.pstage-steps li { position: relative; padding-block-start: 24px; text-align: center; color: var(--grey); font-size: .85rem; }
.pstage-steps li::before {
    content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%; translate: 50% 0;
    inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); z-index: 1;
}
.pstage-steps li + li::after {
    content: ""; position: absolute; inset-block-start: 7px; inset-inline-end: 50%; inline-size: 100%;
    border-block-start: 2px dashed var(--line);
}
.pstage-steps li.is-done, .pstage-steps li.is-now { color: var(--ink); }
.pstage-steps li.is-done::before { background: var(--accent); border-color: var(--accent); }
.pstage-steps li.is-now::before { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.pstage-steps li.is-done + li::after, .pstage-steps li.is-done + li.is-now::after { border-block-start: 2px solid var(--accent); }
.pstage-steps li.is-now { font-weight: 700; }
/* التسليمُ خاتمةٌ لا عملٌ جارٍ: النقطةُ الأخيرةُ ممتلئةٌ حين تكون الحاليّة. */
.pstage-steps li.is-now:last-child::before { background: var(--accent); }
.pstage-at { color: var(--grey); font-size: .85rem; }
.pstage-move { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 16px; }

/* صفوفٌ تلتفّ على الجوّال: الرقمُ والمبلغُ سطراً، والحالةُ والأزرارُ سطراً — بلا تمريرٍ أفقيّ. */
.bill-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bill-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
    padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.bill-row p { margin: 0; }
.bill-ref { flex: 1 1 150px; white-space: nowrap; font-weight: 600; }
.bill-ref small, .bill-amt small { display: block; color: var(--grey); font-size: .78rem; font-weight: 400; }
.bill-amt { flex: 1 1 130px; }
.req-type { flex: 1 1 130px; color: var(--grey); }
.bill-amt strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.bill-st { padding: 2px 10px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: .8rem; font-weight: 600; }
.bill-st.is-paid { background: var(--ok-soft); color: var(--ok); }
.bill-act { display: flex; align-items: center; gap: 12px; margin-inline-start: auto !important; }

/* ── الأقسام القصيرة ── */
.landing-a .landing-section {
    padding-block: clamp(32px, 5vw, 56px);
    border-block-start: 1px solid var(--line);
}
.landing-a .landing-section h2 { margin: 0 0 20px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.landing-a .la-build,
.landing-a .la-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.landing-a .la-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: la-step; }
.landing-a .la-build li,
.landing-a .la-steps li {
    padding: 18px;
    background: var(--la-paper);
    border: 1px solid var(--la-line);
    border-radius: 14px;
}
.landing-a .la-build h3, .landing-a .la-steps h3 { margin: 0 0 6px; font-size: 1.02rem; }
.landing-a .la-build p, .landing-a .la-steps p { margin: 0; color: var(--la-grey); font-size: .9rem; line-height: 1.7; }
/* الترقيمُ من CSS لا من النصّ — وبالأرقام العربيّة المشرقيّة. */
.landing-a .la-steps li { counter-increment: la-step; }
.landing-a .la-steps li::before {
    content: counter(la-step, arabic-indic);
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    margin-block-end: 12px;
    border-radius: 50%;
    background: var(--la-violet-soft);
    color: var(--la-violet);
    font-weight: 700;
}

/* الخدماتُ من الكتالوج الحيّ — أسماءٌ كرقاقات، عددُها متغيّر فتلتفّ وحدها. */
.landing-a .la-cat-label { margin: 24px 0 10px; color: var(--la-grey); font-size: .9rem; }
.landing-a .svc-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.landing-a .svc {
    padding: 4px 12px;
    background: var(--la-paper);
    border: 1px solid var(--la-line);
    border-radius: 999px;
    font-size: .85rem;
}

/* ── العرض الموسميّ المرخّص — بطاقةٌ فاتحة، قائمةُ مقارنةٍ لا ثلاثُ بطاقاتٍ متطابقة ── */
.landing-a .campaign {
    margin-block-end: clamp(32px, 5vw, 56px);
    padding: 0 clamp(16px, 3vw, 32px);
    background: var(--la-paper);
    border: 1px solid var(--la-line);
    border-radius: 16px;
}
.landing-a .campaign-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 0 var(--space-6);
    padding-block: var(--space-6);
}
.landing-a .campaign-label {
    grid-column: 1 / -1;
    margin: 0 0 var(--space-1);
    color: var(--la-violet);
    font-size: .8rem;
    font-weight: 700;
}
.landing-a .campaign-head h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.landing-a .campaign-head > p:last-child { margin: 0; color: var(--grey); }
.landing-a .plan-list { border-block-start: 1px solid var(--line); }
.landing-a .plan-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, auto);
    gap: var(--space-6);
    align-items: center;
    padding-block: var(--space-6);
    border-block-end: 1px solid var(--line);
}
.landing-a .plan-copy h3 { margin: 0 0 var(--space-1); font-size: 1.05rem; }
.landing-a .plan-copy p { margin: 0; color: var(--grey); }
.landing-a .plan-copy .plan-monthly { margin-block-start: var(--space-2); font-size: .88rem; }
.landing-a .plan-price { text-align: end; }
.landing-a .plan-price p { margin: 0; }
.landing-a .plan-price strong { font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.landing-a .plan-price del { margin-inline-start: var(--space-2); color: var(--grey); }
.landing-a .plan-price p:last-child { color: var(--grey); font-size: .85rem; }
.landing-a .campaign-license { max-inline-size: 72ch; color: var(--grey); font-size: .86rem; }
.landing-a .campaign-action { margin-block: var(--space-4) var(--space-6); }

/* ── بابُ الهبوط الخفيف (10/09/2026) — النصُّ جانباً والنموذجُ جانباً ──
   🔑 عرضٌ مقيَّد: حقلُ اسمٍ يمتدّ عرضَ الصفحة يبدو استمارةً إداريّة، والمقصودُ
      ثلاثةُ حقولٍ يُنظر إليها فتُملأ. والحقولُ ترث `.field` كسائر المنصّة. */
.landing-a .landing-lead {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 24px clamp(24px, 4vw, 48px);
    align-items: start;
    margin-block-end: clamp(40px, 6vw, 72px);
    padding: clamp(20px, 3vw, 36px);
    background: var(--la-paper);
    border: 1px solid var(--la-line);
    border-radius: 16px;
    scroll-margin-block-start: 16px;
}
.landing-a .la-lead-copy > p { color: var(--la-body); }
.landing-a .la-lead-copy > .hint, .landing-a .la-lead-copy > .auth-alt { color: var(--la-grey); }
.landing-a .lead-form { max-width: 32rem; }
.landing-a .lead-form input[type="text"], .landing-a .lead-form input[type="tel"] { background: var(--la-ivory); }

@media (max-width: 860px) {
    .landing-a .landing-hero, .landing-a .landing-lead { grid-template-columns: minmax(0, 1fr); }
    .landing-a .la-work-grid, .landing-a .la-build { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-a .la-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
    .landing-a .la-build { grid-template-columns: minmax(0, 1fr); }
    .landing-a .la-phone { min-block-size: 200px; margin-block-start: 32px; }
    .landing-a .campaign-head, .landing-a .plan-row { grid-template-columns: 1fr; }
    .landing-a .campaign-head { align-items: start; }
    .landing-a .plan-row { gap: var(--space-3); }
    .landing-a .plan-price { text-align: start; }
}

/* 🔑 `.lede` مستعمَلةٌ في صفحات داناي والموظّفين أيضاً ⇒ قاعدتُها العامّة تبقى كما هي. */
.lede { max-inline-size: 58ch; font-size: clamp(1.02rem, 2vw, 1.18rem); }

/* 🔑 صفُّ من ينتظر اتّصالاً يُوسَم بشريطٍ جانبيّ لا بلونِ خلفيّةٍ كامل: الشاشة
   تُقرأ سريعاً، والشريطُ يُرى بطرف العين ولا يُضعف تباينَ النصّ عليه. */
.row-new td { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.row-new td:first-child { border-inline-start: 3px solid var(--gold); }


/* ------------------------------------------------------------
   شاشةُ قياس الحملة — شريطُ حصّةٍ بـCSS خالص (11/09/2026)

   🔴 ولا مكتبةَ رسمٍ خارجيّة: `LandingTest` يمنع الأصولَ الخارجية في الصفحة
      التعريفية، ونفسُ المبدأ يسري على بوّابة الموظّف — صفحةٌ تنتظر ملفّاً من
      شبكةٍ أخرى تُبطئ وتُسرّب من يفتحها. والشريطُ هنا `div` بعرضٍ نسبيّ.
   🔑 و`aria-hidden` عليه: الرقمُ مكتوبٌ بجواره نصّاً، والشريطُ تكرارٌ بصريٌّ
      له — فقراءتُه مرّتين على قارئ الشاشة ضجيجٌ لا معلومة.
   ------------------------------------------------------------ */
.bar-track {
    height: 6px; border-radius: 999px;
    background: var(--bar-track);
    margin-block-start: var(--space-2);
    overflow: hidden;
}
.bar-fill { height: 100%; background: var(--bar); border-radius: 999px; }

/* صفٌّ يجمع التسمية والرقم ثمّ الشريطَ تحتهما */
.split-row { display: grid; gap: var(--space-1); margin-block-end: var(--space-4); }
.split-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-3); flex-wrap: wrap;
}
.split-head .num { font-weight: 600; }
.split-note { font-size: .85rem; color: var(--grey); }

/* شريطُ موافقة «إعلانات Google» — في الصفحات العامّة التي تطلب الوسم وحدها.
   الرفضُ بوضوح القبول نفسه: الزرّان بالحجم ذاته، والقبولُ وحده ذهبيّ لأنه الفعل. */
.ads-consent {
  position: fixed; inset-inline: 12px; inset-block-end: 12px; z-index: 1000;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  max-inline-size: 880px; margin-inline: auto; padding: 16px 20px;
  background: var(--surface); color: var(--ink);
  border: 1px solid rgba(110, 112, 116, .35); border-radius: 14px;
  box-shadow: 0 6px 28px rgba(7, 24, 39, .18); line-height: 1.7;
}
.ads-consent[hidden] { display: none; }
.ads-consent p { margin: 0; flex: 1 1 320px; min-inline-size: 0; }
.ads-consent-btns { display: flex; gap: 10px; flex: 0 0 auto; }
@media (max-width: 600px) { .ads-consent-btns { inline-size: 100%; } .ads-consent-btns .btn { flex: 1; } }

/* ============================================================
   ١٦) بوّابة الموظّفين — الغلافُ الموحَّد (`src/StaffShell.php`) والرئيسيّة
   (`public/staff/index.php`) — 25/09/2026، بنموذجٍ اعتمده المالك.
   🔑 كلُّ لونٍ هنا رمزٌ من `:root` لا قيمةٌ جديدة، والذهبُ للعدد «الجديد» وحدَه.
   🔑 الشريطُ يميناً لأنّ الصفحة RTL: العمودُ الأوّل في الشبكة هو الأيمن.
   ============================================================ */
.staff-body { background: var(--deal-board); }
.staff-app {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    min-block-size: 100vh;
}

/* ─── شريطُ الأيقونات (الطبقة 2، 26/09/2026) — كحليٌّ 64px يميناً، والإعداداتُ أسفلَه ─── */
.rail {
    position: sticky; inset-block-start: 0; z-index: 10;
    block-size: 100vh;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 0;
    background: var(--header); color: var(--on-header-muted);
}
.rail-brand { display: grid; place-items: center; inline-size: 44px; block-size: 40px; margin-block-end: 10px; border-radius: 10px; }
.rail-brand img { inline-size: 34px; block-size: auto; }
.rail-item {
    position: relative; display: grid; place-items: center;
    inline-size: 44px; block-size: 44px; border-radius: 10px;
    color: var(--on-header-muted); text-decoration: none;
}
.rail-item:hover { background: var(--header-hover); color: var(--on-header); }
.rail-item[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.rail-settings { margin-block-start: auto; }
.ico { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* الاسمُ تلميحٌ نحو المحتوى (يسارَ الشريط في RTL) بالمرور والتركيز — ومقروءٌ للقارئ الآليّ دائماً (شفافيّةٌ لا إخفاء). */
.rail-label {
    position: absolute; inset-inline-start: calc(100% + 10px); inset-block-start: 50%; z-index: 30;
    transform: translateY(-50%); padding: 4px 10px; border-radius: 6px; white-space: nowrap;
    background: var(--header); color: var(--on-header); font-size: .8rem;
    box-shadow: 0 8px 20px -12px rgba(7, 24, 39, .6);
    opacity: 0; pointer-events: none;
}
.rail-item:hover .rail-label, .rail-item:focus-visible .rail-label { opacity: 1; }
.rail-more { display: none; }
.rail .count {
    position: absolute; inset-block-start: 1px; inset-inline-end: 1px;
    min-inline-size: 18px; padding: 0 5px; border-radius: 999px;
    font-size: .66rem; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
    background: var(--header-line); color: var(--on-header);
}
.rail a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ─── الشريطُ العلويّ: العنوان · البحث · الفعلُ الأساسيّ · المؤقّت · حسابي ─── */
.staff-work { display: flex; flex-direction: column; min-inline-size: 0; }
.topbar {
    position: sticky; inset-block-start: 0; z-index: 8;
    display: flex; align-items: center; gap: var(--space-3);
    padding: 10px var(--space-6); background: var(--surface); border-block-end: 1px solid var(--line);
}
.topbar-title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
p.topbar-title { font-size: .95rem; font-weight: 600; }
.topbar-title a { color: var(--grey); text-decoration: none; }
.topbar-title a:hover { color: var(--ink); }
.topbar-search { flex: 1 1 auto; max-inline-size: 380px; margin: 0; margin-inline-start: auto; }
/* 🔑 `label` العامّةُ كتلةٌ بهامشٍ سفليّ، فكانت تسميةُ الحقل المخفيّة تدفعه سطراً تحتها ⇒ النموذجُ مرنٌ والهامشُ صفر
   (والصنفُ يبقى في التدفّق — `position: absolute` عليه ممنوعٌ بحارس CssTokensTest).
   و`type="search"` خارج قائمة الحقول العامّة ⇒ يُعطى خطَّ الصفحة وحجمَه هنا. */
.topbar-search { display: flex; align-items: center; }
.topbar-search .visually-hidden, .filter-bar .visually-hidden { margin: 0; }
.topbar-search input, .filter-bar input[type="search"] { box-sizing: border-box; font: inherit; color: var(--ink); }
.topbar-search input {
    inline-size: 100%; margin: 0; padding: 7px 12px; font-size: .88rem;
    border: 1px solid var(--line); border-radius: 8px; background: var(--deal-board);
}
.topbar-action { flex: none; }
.topbar .staff-timer { flex: 0 1 260px; }
.topbar-me {
    flex: none; display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-text); font-weight: 700; text-decoration: none;
}
.subnav {
    display: flex; gap: 4px; padding: 0 var(--space-6); overflow-x: auto;
    background: var(--surface); border-block-end: 1px solid var(--line);
}
.subnav a { padding: 10px 12px; color: var(--grey); font-size: .88rem; text-decoration: none; white-space: nowrap; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.subnav .count, .hub .count {
    padding: 0 7px; border-radius: 999px; font-size: .72rem; line-height: 1.7;
    background: var(--bar-track); color: var(--grey); font-variant-numeric: tabular-nums;
}
.rail .count.hot, .subnav .count.hot, .hub .count.hot { background: var(--gold); color: var(--on-gold); font-weight: 600; }

.staff-main {
    max-inline-size: 1280px; margin: 0; min-inline-size: 0;
    padding: var(--space-6) var(--space-8) 48px;
    font-size: .9375rem;
}

/* ─── العناصرُ الأوّليّة للرئيسيّة: قسم · بلاطة · وسم · شريطُ شدّة · طابور ─── */
.home { display: flex; flex-direction: column; gap: var(--space-6); }
.home > section { display: flex; flex-direction: column; gap: var(--space-3); }
.home .card, .home .table-wrap, .home .page-head { margin: 0; }
.home-h { margin: 0; font-size: 1.05rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.home-h small { font-size: .75rem; font-weight: 400; color: var(--grey); }
.card.flush { padding: 0; }

.queue { list-style: none; margin: 0; padding: 0; }
.queue li {
    display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--line);
}
.queue li:first-child { border-block-start: 0; }
.sev { align-self: stretch; border-radius: 3px; background: var(--line); }
.sev.r { background: var(--danger); }
.sev.a { background: var(--gold); }
.q-title { font-weight: 600; }
.q-meta { font-size: .85rem; color: var(--grey); overflow-wrap: anywhere; }
.age, .pill {
    display: inline-block; padding: 1px 9px; border-radius: 999px; white-space: nowrap;
    font-size: .75rem; font-weight: 500; background: var(--bar-track); color: var(--grey);
}
.age { margin-inline-start: 6px; }
.age.r, .pill.bad  { background: var(--danger-soft); color: var(--danger); }
.age.a             { background: var(--gold-soft);   color: var(--tag-new); }
.pill.ok           { background: var(--ok-soft);     color: var(--ok); }
.pill.warn         { background: var(--warn-soft);   color: var(--warn); }
.acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.acts form { margin: 0; }
.btn-sm { padding: 5px 12px; font-size: .82rem; border-radius: 8px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--space-3); }
.pair  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tile  { display: flex; flex-direction: column; gap: 2px; padding: 14px var(--space-4); }
.tile-label { font-size: .82rem; color: var(--grey); }
.tile-value { font-size: 1.6rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tile-note  { font-size: .75rem; color: var(--grey); overflow-wrap: anywhere; }
.tile.warn .tile-value { color: var(--danger); }

.grid2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: var(--space-4); }
.funnel { padding: var(--space-2) var(--space-4) 14px; }
.stage {
    display: grid; grid-template-columns: 120px minmax(0, 1fr) 72px; align-items: center; gap: var(--space-3);
    padding: var(--space-2) 0; border-block-start: 1px solid var(--line);
}
.stage:first-child { border-block-start: 0; }
.stage .lbl { font-size: .85rem; }
.stage .span2 { grid-column: span 2; }
.track { block-size: 10px; border-radius: 5px; overflow: hidden; background: var(--bar-track); }
.fill  { block-size: 100%; min-inline-size: 3px; border-radius: 5px; background: var(--accent); }
.stage .v { text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.stage .v small { display: block; font-size: .7rem; font-weight: 400; color: var(--grey); }
.note { margin: 0; padding: 10px var(--space-4); border-block-start: 1px solid var(--line); font-size: .78rem; color: var(--grey); }
.note b { color: var(--ink); }
.mini { display: inline-block; block-size: 6px; margin-inline-start: 8px; border-radius: 3px; vertical-align: middle; background: var(--bar); }

.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--space-3); }
.proj { display: flex; flex-direction: column; gap: var(--space-2); padding: 14px var(--space-4); }
.proj-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.proj h3 { margin: 0; font-size: .95rem; }
.proj .dom { font-size: .75rem; color: var(--grey); }
.card.proj > p { margin: 0; font-size: .85rem; color: var(--ink); }
.proj .next { margin-block-start: auto; padding-block-start: var(--space-2); border-block-start: 1px solid var(--line); font-size: .78rem; color: var(--grey); }
.proj .next b { font-weight: 600; color: var(--ink); }
.proj.is-empty { border-style: dashed; background: transparent; }

.health { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.health > div { padding: var(--space-3) var(--space-4); border-inline-start: 1px solid var(--line); }
.health > div:first-child { border-inline-start: 0; }
.health .lbl { display: block; font-size: .75rem; color: var(--grey); }
.health b { font-size: 1.1rem; font-weight: 600; }
.health .is-ok { color: var(--ok); }
.health .is-bad { color: var(--danger); }
/* جدولٌ داخل بطاقة: خطٌّ فاصلٌ فوقه بدل إطارٍ ثانٍ داخل الإطار. */
.card .table-wrap.inset { border: 0; border-block-start: 1px solid var(--line); border-radius: 0; }

@media (max-width: 900px) {
    .grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .queue li { grid-template-columns: 6px minmax(0, 1fr); }
    .queue .acts { grid-column: 2; justify-content: flex-start; }
    .stage { grid-template-columns: 92px minmax(0, 1fr) 60px; }
    .pair { grid-template-columns: 1fr; }
}

/* ============================================================
   ١٧) مهامُّ المشاريع ووقتُها وكلفتُها (`public/staff/project.php`، 26c) — للمدير وحدَه.
   🔑 كلُّ لونٍ رمزٌ من `:root`؛ والمؤقّتُ الجاري بالبنفسجيّ (لونُ الفعل) لا بالذهب (لونُ «جديد»).
   ============================================================ */
/* مؤشّرُ «مؤقّت يعمل» في الشريط العلويّ — ظاهرٌ على الحاسوب والجوّال (وعلى الجوّال الوقتُ وحدَه). */
.staff-timer {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) 10px; border-radius: 8px;
    background: var(--accent); color: var(--on-accent); text-decoration: none; font-size: .82rem;
    min-inline-size: 0; max-inline-size: 100%;   /* عنوانٌ طويلٌ يُقصّ بنقاطٍ لا يوسّع الشريط */
}
.staff-timer:hover { background: var(--accent-hover); }
.staff-timer-dot { flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--on-accent); }
.staff-timer-text { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-timer .num { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
    .staff-timer-dot { animation: staff-timer-pulse 2s ease-in-out infinite; }
}
@keyframes staff-timer-pulse { 50% { opacity: .35; } }

.crumb { margin: 0 0 var(--space-1); font-size: .85rem; }
.crumb a { color: var(--grey); }
.cost-tiles { margin-block-end: var(--space-3); }
.cost-tiles .tile { margin: 0; }
.cost-tiles .tile-value { font-size: 1.35rem; }
.cost-tiles .unmeasured { font-size: .85rem; }
.rates { margin-block: 0 var(--space-6); }

.add-task, .task-panel { margin-block-end: var(--space-6); }
.add-task > summary { cursor: pointer; font-weight: 600; }
.add-task[open] > summary { margin-block-end: var(--space-4); }
.task-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); column-gap: var(--space-4); }
.task-form .span2 { grid-column: 1 / -1; }
.task-panel h2 { display: flex; justify-content: space-between; gap: var(--space-3); }
.task-panel h3 { margin-block: 0 var(--space-3); font-size: .95rem; }
.task-panel h3 ~ h3 { margin-block-start: var(--space-6); }
.entries { margin: 0; padding-inline-start: var(--space-4); font-size: .85rem; line-height: 1.8; }

.timer-rule { margin-block: 0 var(--space-4); }
.task-group { margin-block-end: var(--space-4); }
.task-group > summary { cursor: pointer; list-style: none; margin-block-end: var(--space-3); }
.task-group > summary::-webkit-details-marker { display: none; }
.task-group > summary h2 { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 1.05rem; }
.task-group > summary h2::before { content: "▸"; color: var(--grey); font-size: .8rem; }
.task-group[open] > summary h2::before { content: "▾"; }
.task-group .count { padding: 0 8px; border-radius: 999px; font-size: .78rem; background: var(--bar-track); color: var(--grey); }

.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.task {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
    margin: 0; padding: var(--space-3) var(--space-4);
}
.task.is-running { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.task-title { margin: 0 0 var(--space-1); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); margin: 0; font-size: .8rem; color: var(--grey); }
.task-meta .late { color: var(--danger); font-weight: 600; }
.task .acts { flex-wrap: nowrap; }
.proj-tasks { margin-inline-start: var(--space-2); vertical-align: middle; }

@media (max-width: 760px) {
    .task { grid-template-columns: 1fr; }
    .task .acts { flex-wrap: wrap; justify-content: flex-start; }
    /* الترويسةُ ثابتةٌ فوق الجوّال ⇒ القفزُ إلى مهمّةٍ أو لوحتها يترك لها مسافةً فلا تختفي تحتها. */
    .task, .task-panel { scroll-margin-block-start: 220px; }
}

/* ============================================================
   ١٨) مسارُ الصفقات (`public/staff/deals.php`، 26e) — لوحةٌ على طريقة Pipedrive بنموذجٍ اعتمده المالك 26/09/2026.
   🔑 كلُّ لونٍ رمزٌ من `:root`؛ البنفسجيُّ للفعل والتقدّم، والأحمرُ للمتأخّر وحدَه، والذهبيُّ لـ«اليوم».
   🔑 تحت 900px تصير اللوحةُ شرائحَ مراحلَ وقائمةً (روابطُ `?stage=` تعمل بلا سكربت).
   ============================================================ */
.deals { display: flex; flex-direction: column; gap: var(--space-3); }
.deals .notice, .deals .errors { margin: 0; }
.deals-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.deals-top h1 { margin: 0; font-size: 1.35rem; }
.deals-view { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.deals-view a { padding: 3px 12px; border-radius: 6px; font-size: .85rem; color: var(--grey); text-decoration: none; }
.deals-view a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

.deals-bar {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) 22px;
    padding: 10px var(--space-4); border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); font-size: .82rem; color: var(--grey);
}
.deals-bar b { color: var(--ink); font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.deals-bar b.is-bad { color: var(--danger); }
.deals-bar .unmeasured { font-size: .8rem; padding: 0 8px; }
.deals-bar .unmeasured-why { display: none; }

.deal-chips { display: none; }

.board {
    display: grid; grid-template-columns: repeat(6, minmax(172px, 1fr)); align-items: start; gap: 10px;
    padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--deal-board); overflow-x: auto;
}
.col {
    display: flex; flex-direction: column; gap: var(--space-2);
    min-block-size: 480px; padding: var(--space-2); border-radius: var(--radius); background: var(--deal-col);
}
.col.drop-ok { outline: 2px dashed var(--accent); outline-offset: -2px; }
.col.drop-no { outline: 2px dashed var(--danger); outline-offset: -2px; cursor: not-allowed; }
.colh { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 0; }
.colh b { font-size: .85rem; }
.colh .num { font-size: .8rem; color: var(--grey); }
.prog { block-size: 3px; margin: 0 4px 2px; border-radius: 2px; overflow: hidden; background: var(--line); }
.prog i { display: block; block-size: 100%; background: var(--accent); }
.col-auto { margin: 0 4px; font-size: .7rem; color: var(--grey); }
.col-cards { display: flex; flex-direction: column; gap: var(--space-2); min-block-size: 80px; }
.col-empty { margin: var(--space-3) 0; font-size: .78rem; color: var(--grey); text-align: center; }

.deal-card {
    position: relative; display: flex; flex-direction: column; gap: 5px;
    padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); cursor: grab; font-size: .82rem; line-height: 1.5;
}
.deal-card:hover { border-color: var(--accent); }
.deal-card.sel { outline: 2px solid var(--accent); outline-offset: -1px; }
.deal-card.dragging { opacity: .45; }
.deal-card .t { font-weight: 600; font-size: .85rem; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.deal-card .t::after { content: ""; position: absolute; inset: 0; }   /* البطاقةُ كلُّها رابطُ لوحتها */
.deal-card .t:focus-visible { outline: none; }
.deal-card:focus-within { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.deal-card .s { color: var(--grey); font-size: .78rem; overflow-wrap: anywhere; }
.deal-card .f { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; pointer-events: none; }
.deal-card .f a { pointer-events: auto; }
.deal-card .call { display: none; }
.av {
    flex: none; display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%;
    background: var(--accent); color: var(--on-accent); font-size: .68rem; font-weight: 700;
}
.av.none { background: var(--bar-track); color: var(--grey); }
.act { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 500; white-space: nowrap; }
.act.late  { background: var(--danger-soft); color: var(--danger); }
.act.today { background: var(--gold-soft);   color: var(--tag-new); }
.act.ok    { background: var(--ok-soft);     color: var(--ok); }
.act.none  { background: var(--bar-track);   color: var(--grey); }

.lost-list { list-style: none; margin: 0; padding: 0; }
.lost-list li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0; border-block-start: 1px solid var(--line); }
.lost-list li:first-child { border-block-start: 0; padding-block-start: 0; }
.lost-list a { color: var(--ink); }
.lost-list .s, .lost-list .why { font-size: .82rem; color: var(--grey); }

/* ─── لوحةُ الصفقة: من الجانب الأيسر (نهايةُ السطر في RTL) فوق المسار ─── */
.deal-drawer {
    position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 20;
    display: flex; flex-direction: column; inline-size: min(420px, 100vw); overflow-y: auto;
    background: var(--surface); border-inline-start: 1px solid var(--line);
    box-shadow: -20px 0 40px -30px rgba(7, 24, 39, .45); font-size: .875rem;
}
.drawer-close {
    position: absolute; inset-block-start: 10px; inset-inline-end: 12px;
    padding: 0 8px; border-radius: 6px; font-size: 1.4rem; line-height: 1.4; color: var(--grey); text-decoration: none;
}
.drawer-close:hover { background: var(--bar-track); }
.dh { padding: var(--space-4) 18px; border-block-end: 1px solid var(--line); }
.dh .crumb { margin: 0; font-size: .78rem; color: var(--grey); }
.dh h2 { margin: 4px 0 6px; font-size: 1.15rem; line-height: 1.4; padding-inline-end: 28px; }
.stages { display: flex; gap: 3px; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.stages li { flex: 1; min-inline-size: 0; }
.stages li::before { content: ""; display: block; block-size: 6px; border-radius: 3px; background: var(--line); }
.stages li.on::before { background: var(--accent); }
.stages li span { display: block; margin-block-start: 4px; font-size: .68rem; color: var(--grey); text-align: center; white-space: nowrap; }
.stages li[aria-current="step"] span { color: var(--accent-text); font-weight: 600; }
.dacts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); }
.dacts .btn { padding: 6px 14px; font-size: .85rem; }
.move-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); margin: var(--space-3) 0 0; font-size: .82rem; }
.move-form label { margin: 0; white-space: nowrap; }
.move-form select { inline-size: auto; min-inline-size: 0; flex: 1 1 120px; margin: 0; padding: 5px 8px; font-size: .82rem; }
.move-form input[type="text"] { flex-basis: 100%; inline-size: 100%; margin: 0; padding: 5px 8px; font-size: .82rem; }
.move-form small { flex-basis: 100%; font-size: .72rem; color: var(--grey); }
.next {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px var(--space-3); margin: 14px 18px 0; padding: 10px 12px;
    border: 1px solid var(--line); border-inline-start: 4px solid var(--line); border-radius: 8px;
}
.next.late  { border-inline-start-color: var(--danger); }
.next.today { border-inline-start-color: var(--gold); }
.next.ok    { border-inline-start-color: var(--ok); }
.next b { display: block; }
.next div > span { font-size: .8rem; color: var(--grey); }
.next details { grid-column: 1 / -1; }
.next form.inline { margin: 0; }
.next summary { cursor: pointer; font-size: .82rem; color: var(--accent-text); }
.next-form { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-2) 0 0; }
.next-form select, .next-form input { inline-size: auto; flex: 1 1 130px; margin: 0; padding: 5px 8px; font-size: .82rem; }
.tabs { display: flex; gap: var(--space-4); padding: var(--space-3) 18px 0; border-block-end: 1px solid var(--line); }
.tabs a { padding-block-end: var(--space-2); color: var(--grey); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.feed { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-3) 18px; list-style: none; }
.ev { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.ev .ic { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--deal-board); color: var(--grey); font-size: .8rem; }
.ev b { font-size: .85rem; font-weight: 600; }
.ev p { margin: 2px 0 0; font-size: .78rem; color: var(--grey); overflow-wrap: anywhere; }
.note-form { padding: var(--space-3) 18px 0; }
.note-form textarea { inline-size: 100%; margin: 0 0 var(--space-2); }
.note-form .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: .82rem; }
.note-form .row label { display: flex; align-items: center; gap: 4px; margin: 0; }
.note-form .row .btn { margin-inline-start: auto; }
.info {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-3);
    margin: auto 0 0; padding: var(--space-3) 18px; border-block-start: 1px solid var(--line); font-size: .82rem;
}
.info dt { color: var(--grey); }
.info dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.deals-toast {
    position: fixed; inset-block-end: var(--space-4); inset-inline-end: var(--space-4); z-index: 30; max-inline-size: min(440px, calc(100vw - 32px));
    background: linear-gradient(var(--danger-soft), var(--danger-soft)), var(--surface);   /* مصمتٌ: لا يشفّ ما تحته */
    box-shadow: 0 12px 30px -18px rgba(7, 24, 39, .5);
}

@media (max-width: 900px) {
    .deal-chips { display: flex; gap: 6px; overflow-x: auto; padding-block-end: 2px; }
    .deal-chips a {
        flex: none; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
        background: var(--surface); color: var(--ink); font-size: .8rem; text-decoration: none; white-space: nowrap;
    }
    .deal-chips a[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
    .board { display: block; padding: 0; border: 0; background: transparent; overflow: visible; }
    .col { display: none; min-block-size: 0; padding: 0; background: transparent; }
    .col.is-current { display: flex; }
    .col .colh, .col .prog { display: none; }
    .deal-card { padding: 11px 12px; }
    .deal-card .call { display: inline-flex; margin-inline-start: auto; }
    .deals-bar { gap: 4px 16px; }
}
@media (prefers-reduced-motion: no-preference) {
    .deal-card { transition: border-color .15s, opacity .15s; }
}

/* ============================================================
   ١٩) أقسامُ الطبقة 2 (26/09/2026): صفحتا المحور · العملاء · المهامّ · البحث.
   🔑 كلُّ لونٍ رمزٌ من `:root`؛ أسطحٌ بيضاءُ بحدٍّ رفيع على أرضيّة اللوحة، والبنفسجيُّ للفعل والمرحلة.
   ============================================================ */
.hub { margin-block-end: var(--space-6); }
.hub-group { margin: 0 0 var(--space-2); font-size: .95rem; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); }
.hub-link {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--space-2);
    padding: 14px var(--space-4); border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: var(--ink); text-decoration: none;
}
.hub-link:hover { border-color: var(--accent); }
.hub-link small { flex-basis: 100%; font-size: .8rem; color: var(--grey); }

.crumb { margin: 0 0 var(--space-3); font-size: .82rem; color: var(--grey); }
.muted { color: var(--grey); font-size: .88em; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-block-end: var(--space-3); }
.filter-bar input[type="search"] {
    flex: 1 1 240px; max-inline-size: 360px; margin: 0; padding: 7px 12px; font-size: .88rem;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.filter-bar select { inline-size: auto; margin: 0; padding: 7px 12px; font-size: .88rem; border-radius: 8px; }
.stage-pill {
    display: inline-block; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
    font-size: .72rem; font-weight: 500; background: var(--accent-soft); color: var(--accent-text);
}
.stage-pill.s-contract, .stage-pill.s-project { background: var(--ok-soft); color: var(--ok); }
.stage-pill.s-lost { background: var(--bar-track); color: var(--grey); }
.cust-table a.row-link { color: var(--ink); text-decoration: none; }
.cust-table a.row-link:hover { color: var(--accent-text); }
.cust { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: var(--space-4); }
.cust-main, .cust-side { display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; }
.cust .card, .results .card { margin: 0; }
.cust .feed { padding: 0; }
.cust .info { margin: 0; padding: 0; border: 0; }
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { padding: var(--space-2) 0; border-block-start: 1px solid var(--line); overflow-wrap: anywhere; }
.rows li:first-child { padding-block-start: 0; border-block-start: 0; }
.rows a { color: var(--ink); }
.people { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.people li { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; overflow-wrap: anywhere; }
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; gap: var(--space-4); }

.acts-top { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-4); }
.agenda { display: flex; flex-direction: column; gap: var(--space-4); }
.agenda-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.agenda-group.g-late  { border-inline-start: 3px solid var(--danger); }
.agenda-group.g-today { border-inline-start: 3px solid var(--gold); }
.agenda-group h2 {
    display: flex; align-items: center; gap: var(--space-2); margin: 0;
    padding: 10px var(--space-4); border-block-end: 1px solid var(--line); font-size: .92rem;
}
.agenda-group.g-late h2 { color: var(--danger); }
.agenda-group h2 .num { font-size: .78rem; font-weight: 500; color: var(--grey); }
.agenda-group .hint { margin: 0; padding: var(--space-3) var(--space-4); }
.agenda-list { margin: 0; padding: 0; list-style: none; }
.agenda-row {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3);
    padding: 10px var(--space-4); border-block-start: 1px solid var(--line);
}
.agenda-row:first-child { border-block-start: 0; }
.agenda-ic { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--deal-board); color: var(--grey); }
.agenda-ic .ico { inline-size: 17px; block-size: 17px; }
.agenda-body { display: flex; flex-direction: column; min-inline-size: 0; }
.agenda-body a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.agenda-body a:hover { color: var(--accent-text); }
.agenda-body .muted { font-size: .8rem; }
.agenda-due { font-size: .85rem; color: var(--grey); white-space: nowrap; direction: ltr; }
.agenda-due.is-bad { color: var(--danger); font-weight: 600; }
.agenda-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.agenda-acts form { margin: 0; }
.agenda-acts details { position: relative; }
.agenda-acts summary { list-style: none; cursor: pointer; }
.agenda-acts summary::-webkit-details-marker { display: none; }
.agenda-acts details[open] .next-form {
    position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 5;
    inline-size: min(300px, calc(100vw - 32px)); padding: 10px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
    box-shadow: 0 12px 30px -18px rgba(7, 24, 39, .5);
}

/* الجوّال: الشريطُ شريطُ تبويباتٍ ثابتٌ في الأسفل (الأقسامُ الخمسة و«المزيد»)، والبحثُ سطرٌ كاملٌ تحت العنوان. */
@media (max-width: 900px) {
    .staff-app { grid-template-columns: minmax(0, 1fr); }
    .rail {
        position: fixed; inset-block: auto 0; inset-inline: 0; block-size: auto;
        flex-direction: row; justify-content: space-around; gap: 0;
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    }
    .rail-brand { display: none; }
    .rail-item {
        display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; align-items: center; gap: 2px;
        inline-size: auto; block-size: 52px; border-radius: 8px;
    }
    .rail-settings { margin-block-start: 0; }
    .rail-label {
        position: static; transform: none; opacity: 1; padding: 0; background: none; box-shadow: none;
        color: inherit; font-size: .66rem;
    }
    .rail-settings .rail-label { display: none; }
    .rail-more { display: block; font-size: .66rem; }
    .rail .count { inset-inline-end: calc(50% - 24px); }
    .staff-main { padding: var(--space-4) var(--space-4) calc(76px + env(safe-area-inset-bottom)); }
    .topbar { flex-wrap: wrap; gap: var(--space-2) 10px; padding: 10px var(--space-4); }
    .topbar-title { flex: 1 1 0; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
    .topbar-search { order: 5; flex-basis: 100%; max-inline-size: none; margin: 0; }
    .topbar .staff-timer { flex: 0 1 auto; }
    .topbar .staff-timer-text { display: none; }
    .subnav { padding: 0 var(--space-2); }
    .cust { grid-template-columns: minmax(0, 1fr); }
    .agenda-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
    .agenda-acts { grid-column: 2 / -1; justify-content: flex-start; }
}
@media (prefers-reduced-motion: no-preference) {
    .rail-item, .hub-link { transition: background-color .15s, border-color .15s; }
    .rail-label { transition: opacity .12s; }
}

/* ═══ لوحة إدارة داناي (26/09/2026) — `src/LumaAdminShell.php` ═══
   شريطٌ برقوقيٌّ يميناً بألوان تصميم 21/09 (#3D1F35)، والمحتوى على أسطح الموقع نفسِها فيتبع الداكن.
   على الجوّال (<900px) يصير الشريطُ صفّاً أفقيّاً قابلاً للتمرير أعلى الصفحة. */
.luma-admin {
  --luma-plum: #3D1F35;
  --luma-plum-line: rgba(255, 255, 255, .14);
  --luma-plum-hover: rgba(255, 255, 255, .08);
  --luma-on-plum: #FFFFFF;
  --luma-on-plum-muted: #D9C6D0;
  --luma-badge: #C98F9D;
  --luma-rose: #A8445F;
  margin: 0;
  background: var(--ivory);
}
.luma-app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-block-size: 100vh; }
.luma-side {
  background: var(--luma-plum); color: var(--luma-on-plum);
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6) var(--space-4); position: sticky; inset-block-start: 0; block-size: 100vh; overflow-y: auto;
}
.luma-brand { display: flex; flex-direction: column; gap: 2px; color: var(--luma-on-plum); text-decoration: none; padding-inline: var(--space-2); }
.luma-brand-name { font-family: "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.3; }
.luma-brand-sub { font-size: .8rem; color: var(--luma-on-plum-muted); }
.luma-nav { display: flex; flex-direction: column; gap: 2px; }
.luma-nav-group { margin: var(--space-3) 0 var(--space-1); padding-inline: var(--space-3); font-size: .75rem; color: var(--luma-on-plum-muted); }
.luma-nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-block-size: 40px; padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  color: var(--luma-on-plum); text-decoration: none; font-size: .92rem;
}
.luma-nav-item:hover { background: var(--luma-plum-hover); }
.luma-nav-item:focus-visible { outline: 2px solid var(--luma-on-plum); outline-offset: -2px; }
.luma-nav-item[aria-current="page"] { background: var(--surface); color: var(--luma-plum); font-weight: 700; }
.luma-nav-badge {
  min-inline-size: 22px; block-size: 22px; padding-inline: 6px; border-radius: 11px;
  display: inline-grid; place-items: center; font-size: .75rem; font-weight: 700;
  background: var(--luma-badge); color: var(--luma-plum);
}
.luma-side-foot { margin: auto 0 0; padding: var(--space-3) var(--space-3) 0; border-block-start: 1px solid var(--luma-plum-line); font-size: .8rem; color: var(--luma-on-plum-muted); line-height: 1.8; }
.luma-side-foot a { color: var(--luma-on-plum); }
/* 🔑 تُلغي `main { max-width; margin: 0 auto }` العامّة: الهوامشُ الآليّةُ في الشبكة تقلّص العنصرَ لعرض محتواه
   (ضيّقٌ على الكمبيوتر، وأعرضُ من الشاشة على الجوّال بجدول الحجوزات 882px). */
.luma-main { padding: var(--space-8); min-inline-size: 0; max-width: none; margin: 0; background: var(--ivory); }
.luma-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); margin-block-end: var(--space-8); }
.luma-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: var(--space-4) var(--space-6); }
.luma-stat-key { border-color: var(--luma-plum); }
.luma-stat-label { margin: 0; font-size: .85rem; color: var(--grey); }
.luma-stat-value { margin: var(--space-2) 0; font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.luma-stat-hint { margin: 0; font-size: .8rem; color: var(--grey); line-height: 1.6; }
.luma-decide h2 { margin-block-end: var(--space-3); }
.luma-decide-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: var(--space-4) var(--space-6); margin-block-end: var(--space-3); color: var(--ink); text-decoration: none;
}
.luma-decide-row:hover { border-color: var(--luma-plum); }
.luma-decide-go { font-weight: 700; color: var(--luma-rose); }
.luma-empty, .luma-unknown { color: var(--grey); }
@media (prefers-color-scheme: dark) {
  .luma-nav-item[aria-current="page"] { color: var(--ink); }
  .luma-stat-key, .luma-decide-row:hover { border-color: var(--luma-badge); }
  .luma-decide-go { color: var(--luma-badge); }
}
@media (max-width: 899px) {
  .luma-app { grid-template-columns: minmax(0, 1fr); }
  .luma-side { position: static; block-size: auto; flex-direction: row; align-items: center; padding: var(--space-3) var(--space-4); gap: var(--space-3); overflow-x: auto; }
  .luma-brand-sub, .luma-nav-group, .luma-side-foot { display: none; }
  .luma-nav { flex-direction: row; gap: var(--space-1); }
  .luma-nav-item { white-space: nowrap; }
  .luma-main { padding: var(--space-4); }
}

/* ── استبيانُ ما قبل البيع (26/09/2026) — في عمود النموذج نفسه، بأصناف المنصّة ورموز `--la-*` ──
   🔑 الخياراتُ صفوفُ `label:has(> input)` العامّة نفسُها (حدٌّ وخلفيّةٌ للمختار وحلقةُ تركيز)؛
      هنا ترتيبُها فقط: رقائقُ متجاورةٌ للقصير، وعمودٌ للطويل. */
.landing-a .lq-step { margin: 0 0 var(--space-4); padding: 0; border: 0; min-inline-size: 0; }
.landing-a .lq-stepname { padding: 0; font-size: .82rem; color: var(--la-grey); }
.landing-a .lq-step h3 { margin: var(--space-2) 0 var(--space-4); font-size: 1.15rem; color: var(--la-ink); }
.landing-a .lq-step h3:focus-visible { outline: 2px solid var(--la-violet); outline-offset: 3px; border-radius: 6px; }
.landing-a .lq .choice-group { margin-block-end: var(--space-4); }
.landing-a .lq-opts { display: flex; flex-wrap: wrap; gap: var(--space-2); clear: both; }
.landing-a .lq-opts.lq-col { flex-direction: column; }
.landing-a .lq-opts .choice { margin: 0; padding: var(--space-2) var(--space-3); }
.landing-a .lq-opts:not(.lq-col) .choice { border-radius: 999px; }
.landing-a .lq-bars { display: flex; gap: 6px; margin-block-end: var(--space-3); }
.landing-a .lq-bars i { flex: 1; block-size: 5px; border-radius: 3px; background: var(--la-line); }
.landing-a .lq-bars i.on { background: var(--la-violet); }
.landing-a .lq-bars[hidden], .landing-a .lq [hidden] { display: none; }
.landing-a .lq-actions { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.landing-a .lq-actions [data-send], .landing-a .lq-actions [data-next] { margin-inline-start: auto; }
.landing-a .lq-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.landing-a .lead-form input[type="email"], .landing-a .lead-form textarea { background: var(--la-ivory); }
/* فروعُ الهدف (الطبقة 3): تحت «ما الذي تريد إنجازه؟» مباشرةً — عنوانُ الفرع يظهر بلا جافاسكربت وحدَه. */
.landing-a .lq-branch { display: grid; gap: var(--space-3); margin-block-end: var(--space-4); padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--la-line); }
.landing-a .lq-branch-head { margin: 0; font-size: .9rem; color: var(--la-grey); }
.landing-a .lq-branch textarea { min-block-size: 4.5rem; }
.landing-a .lq-done { display: grid; gap: var(--space-3); justify-items: start; }
.landing-a .lq-done h3 { margin: 0; font-size: 1.15rem; color: var(--la-ink); }
/* السعرُ الفوريّ (الطبقة 2): خانتان منفصلتان — التأسيسُ والشهريُّ لا يُجمعان */
.landing-a .lq-price { display: grid; gap: var(--space-2); width: 100%; }
.landing-a .lq-price p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--la-line); border-radius: 10px; background: var(--la-paper); }
.landing-a .lq-price-label { color: var(--la-grey); min-width: 9em; }
.landing-a .lq-price strong { color: var(--la-ink); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.landing-a .lq-price-note { color: var(--la-grey); font-size: .9rem; }
.landing-a .lq-badge { padding: 2px 12px; border-radius: 999px; background: var(--la-ok-soft); color: var(--la-ok); font-weight: 700; font-size: .85rem; }
.landing-a .lq-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.landing-a .lq-mail { padding: 4px 10px; border-radius: 8px; background: var(--la-violet-soft); color: var(--la-ink); user-select: all; }
/* إجاباتُ استبيان المهتمّ في لوحة الصفقة (26q) — قائمةُ `.info` نفسُها بعنوانٍ ووسم «ساخن». */
.lq-answers { border-block-start: 1px solid var(--line); }
.lq-answers h3 { margin: 0; padding: var(--space-3) 18px 0; font-size: .9rem; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.lq-answers .info { margin: 0; border: 0; }