/* ═══════════════════════════════════════════════════════════════════════
   وَصل — سطح التسويق.  v3.0 · «SaaS مؤسّسيّ مميّز»

   يبني على `tokens.css` ولا يعرّف لونًا خامًا إلا حيث يلزم قناعٌ أو طبقةٌ
   شفّافة (لا رمز لها). واللوحة هي لوحة اللوحة نفسها: كُحليٌّ للسلطة وأزرقٌ
   كهربائي للفعل — **فصفحةُ البيع ولوحةُ المنتج تُقرآن منتجًا واحدًا**،
   وهو شرطُ ثقةٍ قبل أن يكون شرطَ ذوق: من يرى صفحةً بلوحةٍ ولوحةً بأخرى
   يظنّ أنه اشترى غير ما رأى.

   ── ما يفرّق هذه الورقة عن `ui.css` ──

   الإيقاع لا المكوّنات. سلّم `--s*` (٤ ← ١٤٠) أوسع من سلّم اللوحة عمدًا:
   صفحةٌ تُمسح بالتمرير تحتاج فراغًا يفصل الأفكار، ولوحةٌ تُمسح بالعين
   تحتاج كثافةً تجمع الأرقام. والقياسات هنا `clamp` لأن العرض يتغيّر من
   ٣٧٥ إلى ١٩٢٠ على نفس الصفحة.

   ── و`.ic` هنا هي `.ic` هناك ──

   ١٨px بلا خلفية، كي يعمل `<x-ui.icon>` المشترك على هذا السطح بلا أن
   تحمّل الصفحةُ التسويقية `ui.css` كاملًا. والمربّع المصبوغ الذي كان
   يسمّى `.ic` صار `.ic-box` — الاسمان كانا يتصادمان بصمت.

   ── ومن يحمّلها الآن ──

   الأدواتُ المجانية (`/tools`) والوثيقتان القانونيتان. الصفحةُ التعريفية
   `/` انتقلت إلى `landing.css` (2026-10-04) وأخذت قواعدَها معها — فما
   بقي هنا هو ما تكتبه قوالبُ تلك الصفحات في `class`، لا أكثر. قاعدةٌ
   تُضاف هنا للصفحة التعريفية لن تصلها.
   ═══════════════════════════════════════════════════════════════════════ */

body {
  background: var(--surface);
  color: var(--ink-600);
  font-size: 16px;
  line-height: 1.75;
}

/* ═══════════════════ الهيكل ════════════════════════════════════════════ */

.wrap { inline-size: min(1200px, 100% - 2 * var(--s5)); margin-inline: auto; }

.sec { padding-block: var(--s9); position: relative; }
.sec--sunk { background: var(--surface-sunk); }

.sec-head { max-width: 680px; margin-inline: auto; text-align: center; margin-block-end: var(--s7); }
.sec-head h2 { font-size: clamp(26px, 3.4vw, 40px); margin-block: var(--s3) var(--s4); }
.sec-head p  { color: var(--ink-500); font-size: 17px; line-height: 1.85; }

/* ── العنوان الفوقيّ: خطٌّ كهربائيّ ثم كلمة ──
   الخطّ ليس زخرفة: العناوين العربية بلا علامةٍ قبلها تبدأ كلُّها بنفس
   الثقل البصري، فيصعب على العين أن تعرف أين بدأ قسمٌ جديد أثناء التمرير. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--brand-600);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
}
.eyebrow::before {
  content: "";
  inline-size: 22px; block-size: 2px;
  border-radius: var(--r-full);
  background: var(--brand-500);
}

/* ═══════════════════ الأيقونة ══════════════════════════════════════════
   نفس عقد `ui.css`: ١٨px، بلا خلفية، بـ`currentColor`. */
.ic { inline-size: 18px; block-size: 18px; flex: none; }
.ic-sm { inline-size: 15px; block-size: 15px; }
.ic-lg { inline-size: 22px; block-size: 22px; }

/* المربّع المصبوغ — حاملُ الأيقونة حين تحتاج وزنًا بصريًّا. */
.ic-box {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--r-md);
  flex: none;
}

/* ═══════════════════ الأزرار ═══════════════════════════════════════════
   ثلاثة فقط. الرابع يعني أن أحدها لم يكن له سبب. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-block-size: var(--touch);
  padding-inline: var(--s6);
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  font-weight: 700; font-size: 15px;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand-500); color: var(--white);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { background: var(--brand-600); }

.btn-ghost {
  background: var(--white); color: var(--ink-800);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }

.btn-quiet { background: transparent; color: var(--ink-600); padding-inline: var(--s4); }
.btn-quiet:hover { color: var(--brand-600); background: var(--brand-50); }

.btn-sm { min-block-size: 40px; padding-inline: var(--s5); font-size: 14px; }

/* الأجهزة اللمسية: كل ما يُنقر يرجع إلى الأرضية مهما صغُر شكله.
   **والأرضية بحسب أداة الإشارة لا عرض الشاشة** — لوحيٌّ بعرض ١٠٢٤ يُلمس
   بالإصبع ويرى روابط الشريط كاملةً، فلا ينفع أن تُرفع مع كسر الجوّال. */
@media (pointer: coarse) {
  .btn-sm,
  .nav-links a { min-block-size: var(--touch); }
}

/* ═══════════════════ الشريط العلوي ═════════════════════════════════════
   ثابتٌ، شفّافٌ قليلًا، ويكتسب حدًّا وظلًّا عند التمرير — لا يتغيّر ارتفاعه:
   شريطٌ ينكمش يزحزح كل ما تحته سطرًا كاملًا في منتصف القراءة. */
.nav {
  position: sticky; inset-block-start: 0; z-index: 60;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(1.7) blur(16px);
  -webkit-backdrop-filter: saturate(1.7) blur(16px);
  border-block-end: 1px solid transparent;
  transition: background-color var(--base) var(--ease),
              border-color var(--base) var(--ease),
              box-shadow var(--base) var(--ease);
}
.nav.is-stuck {
  background: rgba(255, 255, 255, .94);
  border-block-end-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.nav-in { display: flex; align-items: center; gap: var(--s4); block-size: 72px; }

.brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-weight: 800; font-size: 19px; color: var(--ink-900);
  flex: none;
}
.brand-mk {
  display: grid; place-items: center; overflow: hidden;
  inline-size: 38px; block-size: 38px;
  border-radius: var(--r-sm);
  background: var(--brand-fixed-950);
  color: var(--on-brand-fixed);
  box-shadow: var(--shadow-brand);
}
.brand-mk svg { inline-size: 21px; block-size: 21px; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-inline-start: var(--s5); }
.nav-links a {
  display: inline-flex; align-items: center;
  min-block-size: 40px;
  padding-inline: var(--s4);
  border-radius: var(--r-sm);
  color: var(--ink-600); font-size: 15px; font-weight: 600;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.nav-links a:hover { color: var(--brand-600); background: var(--brand-50); }

.nav-end { display: flex; align-items: center; gap: var(--s3); margin-inline-start: auto; }

/* مبدّلُ اللغة في شريط الصفحة التعريفية — بلغة روابطه نفسِها. */
.sf-lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 40px; min-inline-size: 44px; padding-inline: var(--s4);
  border-radius: var(--r-sm);
  color: var(--ink-600); font-size: 15px; font-weight: 600; text-decoration: none;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.sf-lang:hover { color: var(--brand-600); background: var(--brand-50); }

.nav-burger {
  display: none;
  place-items: center;
  inline-size: var(--touch); block-size: var(--touch);
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--white); color: var(--ink-700);
  cursor: pointer;
}

/* ── درج الجوّال ──
   يدخل من حافّة القراءة (اليمنى في RTL). و`inert` على ما تحته من عمل
   السكربت لا من عمل الورقة. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(15, 23, 42, .48);
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}
.nav-scrim.is-on { opacity: 1; }

/* **`[hidden]` يُعاد إعلانه لأن `display` المصرَّح يبطله.**
   قاعدةُ المتصفّح `[hidden] { display: none }` من ورقته هو، وأيُّ `display`
   يكتبه المؤلّف يغلبها مهما ضعفت مُحدِّدته. فدرجٌ مصرَّحٌ `flex` يبقى
   **مرئيًّا وهو يحمل `hidden`** — يغطّي الصفحة عند أول تحميل، ولا خطأ في
   أي مكان. */
.nav-drawer[hidden] { display: none; }

.nav-drawer {
  position: fixed; z-index: 80;
  inset-block: 0; inset-inline-start: 0;
  inline-size: min(340px, 88vw);
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  overflow-y: auto;
  /* الصفحة RTL دائمًا (`dir` مثبَّت في القالب)، فالحافّة الداخلية يمينية
     والخروج إليها إزاحةٌ موجبة. */
  transform: translateX(100%);
  transition: transform var(--base) var(--ease);
}
.nav-drawer.is-on { transform: none; }

.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--s4); }
.nav-close {
  display: grid; place-items: center;
  inline-size: var(--touch); block-size: var(--touch);
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--white); color: var(--ink-600); cursor: pointer;
}
.nav-drawer nav { display: grid; gap: 2px; }
.nav-drawer nav a {
  display: flex; align-items: center; gap: var(--s3);
  min-block-size: var(--touch);
  padding-inline: var(--s3);
  border-radius: var(--r-sm);
  color: var(--ink-700); font-weight: 600; font-size: 16px;
}
.nav-drawer nav a:hover { background: var(--brand-50); color: var(--brand-600); }
.nav-drawer .btn { inline-size: 100%; }
.nav-drawer-foot { margin-block-start: auto; display: grid; gap: var(--s3); padding-block-start: var(--s5); }

.chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: var(--r-full);
  background: var(--ok-tint); color: var(--ok-600);
}

/* جدول هندسة المنيو — **حاويةُ التمرير على الجدول لا على الصفحة**.
   نفس اسم الحاوية في `ui.css` وبنفس دورها: جدولٌ أعرض من حاويته يمرَّر
   داخلها، وبلا ذلك يدفع `<body>` كلَّه فيظهر شريط تمريرٍ أفقيّ للصفحة —
   أسوأ عطلٍ يقع على الهاتف: يزيح كل شيء ولا يبدو له سبب. */
/* **و`position: relative` معها** (جولة الاستخدام الثانية ٢٠٢٦-١٠-٠٤): العنصرُ المطلقُ داخلها (`.sr-only` في عنوان
   عمود الحذف) كتلتُه الحاويةُ أوّلُ سلفٍ متموضع — وحاويةُ تمريرٍ غيرُ متموضعة لا تقصّه. فكان يهرب من حافّة
   الجدول إلى الصفحة ويوسّعها ٢٧ بكسل على ٣٢٠، وتُقصّ الشعارُ والعنوان. */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.is-locked { overflow: hidden; }

/* ═══════════════════ التذييل ═══════════════════════════════════════════ */
.foot { background: var(--surface-sunk); border-block-start: 1px solid var(--line); padding-block: var(--s8) var(--s6); }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: var(--s6) var(--s5);
  padding-block-end: var(--s6);
  border-block-end: 1px solid var(--line);
}
.foot-about { display: grid; gap: var(--s4); align-content: start; max-inline-size: 34ch; }
.foot-about p { color: var(--ink-500); font-size: 14px; line-height: 1.85; }
.foot-col { display: grid; gap: var(--s3); align-content: start; }
.foot-col > span { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.foot-col a { color: var(--ink-500); font-size: 14px; }
.foot-col a:hover { color: var(--brand-600); }
.foot-end {
  padding-block-start: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between;
  color: var(--ink-500); font-size: 13px;
}
.foot-end nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.foot-end a:hover { color: var(--brand-600); }

/* ═══════════════════ الظهور بالتمرير ═══════════════════════════════════
   **`.js` شرطٌ لا زينة.** كان `.reveal { opacity: 0 }` غير مشروط، فكل
   الصفحة تحت البطل تبقى غير مرئية حتى يعمل JavaScript — وأيُّ سببٍ يمنعه
   (شبكة بطيئة · سكربت محجوب · خطأ مبكر) يترك الزائر أمام صفحةٍ فارغة
   فيها بطلٌ وتذييل ولا شيء بينهما. أمسكته لقطةٌ آلية للصفحة الحيّة. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ═══════════════════ الشاشات الضيّقة ═══════════════════════════════════ */

@media (max-width: 1100px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-about { grid-column: 1 / -1; max-inline-size: none; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  /* المبدّلُ ينتقل إلى الدرج: شريطٌ بعرض ٣٢٠ لا يتّسع له وللزرّين
     معًا، فيدفع الصفحةَ ١٢px خارج الشاشة. */
  .nav-end .sf-lang { display: none; }
  .nav-end .btn-quiet { display: none; }
  .nav-burger { display: grid; }
}

@media (max-width: 700px) {
  body { font-size: 15.5px; }
  .sec { padding-block: var(--s8); }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════ الوثائق القانونية ═════════════════════════════════
   عمودٌ واحد ضيّق: نصٌّ يُقرأ سطرًا سطرًا لا يُمسح بالعين كصفحة بيع.
   وعرضُ السطر عند ٦٨ حرفًا — أطول من ذلك تتوه العين في العودة للسطر
   التالي، وهذه وثيقة تُقرأ كاملةً لا عناوينَ تُتصفَّح. */
.legal { max-width: 68ch; margin-inline: auto; }
.legal-head { margin-block-end: var(--s8); }
.legal-head h1 { font-size: clamp(28px, 4vw, 40px); margin-block: var(--s3); }
.legal-head p { color: var(--ink-600); font-size: 17px; line-height: 1.9; }
.legal-stamp { font-size: 13.5px; color: var(--ink-500); }

.legal-sec { margin-block-end: var(--s7); }
.legal-sec h2 { font-size: 20px; margin-block-end: var(--s3); }
.legal-sec p { color: var(--ink-700); line-height: 2; margin-block-end: var(--s3); }
.legal-sec ul { margin: 0; padding-inline-start: var(--s5); display: grid; gap: var(--s2); list-style: disc; }
.legal-sec li { color: var(--ink-700); line-height: 1.95; }
.legal-sec a { color: var(--brand-600); text-decoration: underline; }

.legal-nav { display: flex; gap: var(--s3); flex-wrap: wrap; margin-block-start: var(--s8); }

/* ═══════════════════ خدمة قارئ الشاشة ══════════════════════════════════ */
/* `.sr-only` معرَّفةٌ في `ui.css` و`kds.css`، وهذا السطحُ يحمّل `tokens`
   وورقتَه وحدَهما — فنسخةٌ هنا لا استيراد. وبدونها كان عنوانُ عمودِ الحذف
   في جدول تحليل المنيو **يُرسَم مرئيًّا**: صنفٌ لا قاعدةَ له لا يُخفي شيئًا،
   ولا فاحصَ ساكنٌ يرى ذلك لأن أسطحَ التسويق خارج جدول الحارس. */
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-block-start: -60px; inset-inline-start: var(--s5);
  z-index: 100;
  padding: var(--s3) var(--s5);
  background: var(--brand-500); color: var(--white);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  transition: inset-block-start var(--fast) var(--ease);
}
.skip-link:focus { inset-block-start: 0; }

/* ═══════════════════ أدوات أصحاب المطاعم ═══════════════════════════════
   `/tools` ومركزُها وثمانيةُ حاسبات. سابقةُ `tl-` كي لا تصطدم بأقسام
   الصفحة التعريفية، وكلُّها مبنيّةٌ على نفس `.sec` و`.wrap` و`.btn` —
   فالأداةُ تُقرأ امتدادًا للموقع لا صفحةً مستوردة.

   ── ولا لونَ خامًّا هنا ──

   الحزمةُ الأصلية كانت خضراءَ بلوحةٍ خاصّةٍ بها وأيقوناتِ Font Awesome من
   CDN وخطِّ Google. وثلاثتُها مخالفةٌ لقواعد هذا المستودع: اللوحةُ عنّابيّة
   من `tokens.css`، والخطوطُ مستضافةٌ ذاتيًّا، والأيقوناتُ مجموعةٌ مضمَّنة
   (`<x-ui.icon>`). فأُعيد بناؤها هنا بالرموز وحدها — وتتبع السِمةَ الداكنة
   مجّانًا لأن الرموزَ تنقلب معها. */

/* ── المركز ──────────────────────────────────────────────────────────── */
.tl-hub-head { max-width: 720px; margin-block-end: var(--s7); }
.tl-hub-head h1 { font-size: clamp(30px, 4.4vw, 46px); margin-block: var(--s3) var(--s4); }
.tl-hub-head p { color: var(--ink-500); font-size: 17px; line-height: 1.9; }

.tl-grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/* البطاقةُ رابطٌ كامل لا عنوانٌ قابلٌ للنقر: هدفُ اللمس هو البطاقة. */
.tl-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: inherit;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.tl-card:hover { border-color: var(--brand-300); transform: translateY(-2px); }
.tl-card:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; }
.tl-card h2 { font-size: 18px; margin-block: var(--s2) 0; }
.tl-card p { color: var(--ink-500); font-size: 14.5px; line-height: 1.8; flex: 1 1 auto; }

.tl-card-tag {
  position: absolute; inset-block-start: var(--s4); inset-inline-end: var(--s4);
  padding: 2px var(--s2);
  background: var(--brand-100); color: var(--brand-600);
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 700;
}
.tl-card-go {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--brand-600); font-weight: 700; font-size: 14px;
  margin-block-start: var(--s2);
}

/* ── الأداة مقابل المنتج ─────────────────────────────────────────────── */
.tl-vs-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.tl-vs-col {
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.tl-vs-col--on { border-color: var(--brand-300); background: var(--brand-50); }
.tl-vs-col ul { margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.tl-vs-col li { color: var(--ink-700); font-size: 15px; line-height: 1.7; padding-inline-start: var(--s5); position: relative; }
.tl-vs-col li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 9px;
  inline-size: 7px; block-size: 7px; border-radius: var(--r-full);
  background: var(--ink-300);
}
.tl-vs-col--on li::before { background: var(--brand-500); }

/* ── ترويسة الأداة ──────────────────────────────────────────────────── */
.tl-head { padding-block-end: var(--s6); }
.tl-crumb { display: flex; align-items: center; gap: var(--s2); font-size: 13.5px; margin-block-end: var(--s5); }
.tl-crumb a { color: var(--ink-500); }
.tl-crumb a:hover { color: var(--brand-600); }

.tl-head-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center; }
.tl-head-grid h1 { font-size: clamp(26px, 3.8vw, 40px); margin-block: var(--s3) var(--s4); }
.tl-head-grid p { color: var(--ink-500); font-size: 17px; line-height: 1.9; max-width: 58ch; }

.tl-head-mark {
  display: grid; place-items: center;
  inline-size: 92px; block-size: 92px;
  border-radius: var(--r-xl);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-500);
}
.tl-head-glyph { inline-size: 40px; block-size: 40px; }

/* ── جسد الحاسبة ────────────────────────────────────────────────────── */
.tl-calc { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

.tl-panel {
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.tl-panel-head { display: flex; align-items: flex-start; gap: var(--s3); margin-block-end: var(--s5); }
.tl-panel-head h2 { font-size: 19px; margin: 0; }
.tl-panel-head p { color: var(--ink-500); font-size: 14px; margin-block-start: 2px; line-height: 1.7; }

/* الحقل: سؤالٌ ثم سببُه ثم القيمةُ الحيّة ثم المِزلاق. والسببُ ليس زخرفة —
   صاحبُ المطعم لا يعرف «الفود كوست» بالضرورة، ويترك الحقلَ لو لم يُشرَح. */
.tl-field { margin-block-end: var(--s5); }
.tl-field:last-child { margin-block-end: 0; }
.tl-q { font-weight: 700; font-size: 15.5px; color: var(--ink-800); margin: 0 0 2px; }
.tl-why { color: var(--ink-500); font-size: 13px; line-height: 1.7; margin: 0 0 var(--s3); }
.tl-val {
  font-size: 22px; font-weight: 800; color: var(--brand-600);
  font-variant-numeric: tabular-nums; margin-block-end: var(--s2);
  unicode-bidi: plaintext;
}

.tl-scale { display: flex; justify-content: space-between; color: var(--ink-500); font-size: 12px; margin-block-start: var(--s1); }

/* المِزلاق: الجزءُ المقطوعُ ملوَّنٌ بالعلامة عبر `--p` من السكربت.
   والتدرّجُ `to left` لأن السطحَ عربيٌّ يبدأ من اليمين. */
.tl-range {
  /* `--p` نسبةُ الجزء المقطوع، يكتبها السكربتُ على العنصر نفسِه. وتُعلَن
     هنا صفرًا لا تُترك للاحتياطيّ: رمزٌ غيرُ معرَّفٍ في أيِّ ورقة يشكو
     منه `verify_live_surfaces` بحقّ — الاحتياطيُّ يُنجي هذا التصريح
     وحدَه، ولا يُنجي رمزًا يُستعمل غدًا في موضعٍ بلا احتياطيّ. */
  --p: 0%;
  inline-size: 100%; block-size: 6px; margin: 0;
  border-radius: var(--r-full);
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(to left, var(--brand-500) var(--p), var(--line-strong) var(--p));
  cursor: pointer;
}
.tl-range:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 4px; }
.tl-range::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  inline-size: 22px; block-size: 22px; border-radius: var(--r-full);
  background: var(--surface); border: 3px solid var(--brand-500);
  cursor: grab;
}
.tl-range::-moz-range-thumb {
  inline-size: 16px; block-size: 16px; border-radius: var(--r-full);
  background: var(--surface); border: 3px solid var(--brand-500);
  cursor: grab;
}

/* حقلٌ رقميٌّ مكتوب — للأدوات التي تأخذ مبالغ لا نسبًا. */
.tl-num {
  inline-size: 100%;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: var(--surface);
  color: var(--ink-800);
  font: inherit; font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.tl-num:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; border-color: var(--brand-400); }

/* ── النتيجة ────────────────────────────────────────────────────────── */
.tl-result { position: sticky; inset-block-start: var(--s8); }
.tl-hero-num { text-align: center; padding-block: var(--s5) var(--s4); }
.tl-lbl { color: var(--ink-500); font-size: 14px; }
.tl-big {
  font-size: clamp(38px, 6vw, 56px); font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--brand-500);
  margin-block: var(--s2);
}
.tl-big.ok   { color: var(--ok-600); }
.tl-big.warn { color: var(--warn-600); }
.tl-big.bad  { color: var(--danger-600); }
.tl-sub { color: var(--ink-500); font-size: 14px; }

.tl-stamp {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 700;
  background: var(--ok-tint); color: var(--ok-600);
}
.tl-stamp.warn { background: var(--warn-tint); color: var(--warn-600); }
.tl-stamp.bad  { background: var(--danger-tint); color: var(--danger-600); }

/* الشرائح: نصيبُ كلِّ بندٍ من الرقم الكبير. */
.tl-bars { display: grid; gap: var(--s3); margin-block-start: var(--s5); }
.tl-bar-h { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-600); margin-block-end: 4px; }
.tl-bar-h b { color: var(--ink-800); font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.tl-bar-t { block-size: 8px; border-radius: var(--r-full); background: var(--surface-sunk); overflow: hidden; }
.tl-bar-f {
  block-size: 100%; inline-size: 0; border-radius: var(--r-full);
  background: var(--brand-500);
  transition: inline-size 700ms var(--ease);
}
.tl-bar-f.warn { background: var(--warn-500); }
.tl-bar-f.bad  { background: var(--danger-500); }
.tl-bar-f.ok   { background: var(--ok-500); }

.tl-metrics { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); margin-block-start: var(--s5); }
.tl-metric {
  padding: var(--s3) var(--s4);
  background: var(--surface-sunk);
  border-radius: var(--r-md);
  font-size: 13px; color: var(--ink-500);
  display: grid; gap: var(--s1);
}
.tl-metric strong {
  font-size: 17px; color: var(--ink-800); font-weight: 800;
  font-variant-numeric: tabular-nums; unicode-bidi: plaintext;
}
.tl-metric--hl { background: var(--brand-50); }
.tl-metric--hl strong { color: var(--brand-600); }

.tl-insight {
  margin-block-start: var(--s5);
  padding: var(--s4);
  background: var(--info-tint);
  border-radius: var(--r-md);
  color: var(--ink-700); font-size: 14.5px; line-height: 1.85;
}
.tl-insight b { color: var(--ink-900); }
.tl-insight.bad { background: var(--danger-tint); }

.tl-empty { color: var(--ink-500); text-align: center; padding-block: var(--s7); font-size: 15px; line-height: 1.8; }

.tl-send { margin-block-start: var(--s5); }
.tl-send .btn { inline-size: 100%; }
.tl-privacy { color: var(--ink-500); font-size: 12.5px; text-align: center; margin-block-start: var(--s3); line-height: 1.7; }

/* ── جدول تحليل المنيو ──────────────────────────────────────────────── */
.tl-table { inline-size: 100%; border-collapse: collapse; font-size: 14px; }
.tl-table th {
  text-align: start; padding: var(--s2) var(--s3);
  color: var(--ink-500); font-weight: 600; font-size: 12.5px; white-space: nowrap;
  border-block-end: 1px solid var(--line);
}
.tl-table td { padding: var(--s2); border-block-end: 1px solid var(--line); }
.tl-table .tl-num { padding: var(--s2); font-size: 14px; }
.tl-del {
  inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-500); cursor: pointer;
}
.tl-del:hover { border-color: var(--danger-500); color: var(--danger-600); }

.tl-kinds { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); margin-block-start: var(--s5); }
.tl-kind { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--surface-sunk); display: grid; gap: 2px; }
.tl-kind b { font-size: 20px; font-variant-numeric: tabular-nums; }
.tl-kind small { color: var(--ink-500); font-size: 12.5px; line-height: 1.6; }
.tl-kind.star   b { color: var(--ok-600); }
.tl-kind.plow   b { color: var(--info-600); }
.tl-kind.puzzle b { color: var(--warn-600); }
.tl-kind.dog    b { color: var(--danger-600); }

/* ── اختبار الفرع ───────────────────────────────────────────────────── */
.tl-quiz { display: grid; gap: var(--s4); }
.tl-quiz-q { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); }
.tl-quiz-q p { margin: 0 0 var(--s3); font-weight: 700; font-size: 15px; color: var(--ink-800); line-height: 1.7; }
.tl-choices { display: flex; gap: var(--s2); flex-wrap: wrap; }
.tl-choice {
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-600);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.tl-choice[aria-pressed="true"] { background: var(--brand-500); border-color: var(--brand-500); color: var(--white); }
.tl-choice:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ── أخوات الأداة والدعوة ───────────────────────────────────────────── */
.tl-more-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.tl-more-card {
  display: grid; gap: var(--s2); justify-items: start;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: inherit;
  transition: border-color var(--fast) var(--ease);
}
.tl-more-card:hover { border-color: var(--brand-300); }
.tl-more-card:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; }
.tl-more-card strong { font-size: 15px; }
.tl-more-card small { color: var(--ink-500); font-size: 13px; line-height: 1.7; }

.tl-cta-box {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center;
  padding: var(--s7);
  background: var(--brand-900);
  border-radius: var(--r-xl);
}
.tl-cta-box h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 var(--s3); color: var(--white); }
.tl-cta-box p { color: var(--brand-200); font-size: 16px; line-height: 1.85; margin: 0; max-width: 60ch; }
.tl-cta-btns { display: flex; gap: var(--s3); flex-wrap: wrap; }
/* الثانويُّ على الصندوق الداكن: **شفّافٌ لا أبيض**. `.btn-ghost` الأساسيّة
   تُصرّح `background: var(--white)`، فتلوينُ حبرِها أبيضَ وحدَه يعطي أبيضَ
   على أبيض — زرٌّ مرسومٌ بحجمه الكامل ونصٌّ لا يُرى. وقع هنا فعلًا، وقاسه
   المتصفّح: `color` و`background` كلاهما `rgb(255,255,255)`. */
.tl-cta-box .btn-ghost {
  background: transparent;
  border-color: var(--brand-700);
  color: var(--white);
  box-shadow: none;
}
.tl-cta-box .btn-ghost:hover {
  background: var(--brand-800);
  border-color: var(--brand-600);
  color: var(--white);
}

/* ── الضيّق ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tl-calc { grid-template-columns: minmax(0, 1fr); }
  /* اللاصقُ يفقد معناه في عمودٍ واحد: النتيجةُ تحت النموذج لا بجانبه،
     فتثبيتُها يحجب الحقولَ التي تُملأ. */
  .tl-result { position: static; }
  .tl-head-grid { grid-template-columns: minmax(0, 1fr); }
  .tl-head-mark { display: none; }
  .tl-cta-box { grid-template-columns: minmax(0, 1fr); padding: var(--s5); }
}