/* ══════════════════════════════════════════════════════════════
   دليل الاختبار — /knowledge/

   فوق `marketing.css` (الهوية) و`chrome.css` (الشريط والفوتر).
   ولا لون مكتوب هنا: كل شيء رمزٌ ينقلب مع الوضع الليلي —
   ويفرضه `npm run check:contrast`.
   ══════════════════════════════════════════════════════════════ */

/* «حِبر»: الخلفيّةُ ملساء بلا تدرّجٍ ولا خطٍّ سفليّ، والمقاساتُ رموزُ `--fs-p-*` (`tokens.css`).
   📛 كان الافتتاحُ بتدرّجٍ من `--primary-light` وخطٍّ سفليّ — 🔎
   `git show 99d80e4:client/knowledge/knowledge.css | sed -n '9,17p'` */
.kn-hero {
  padding-block: var(--space-7) var(--space-6);
}

.kn-hero h1 { font-size: var(--fs-p-title); line-height: 1.3; margin-block: var(--space-2) var(--space-4); }
.kn-lede { max-width: 62ch; font-size: var(--fs-p-lead); line-height: 1.75; color: var(--text-muted); }
.kn-lede strong { color: var(--heading); }
.kn-accessed { margin-top: var(--space-4); font-size: var(--fs-p-meta); color: var(--text-muted); }

/* ── التخطيط: فهرس + متن ── */
.kn-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(28px, 5vw, 56px);
  align-items: start;
}

/* ⚠️ عمود المتن. كان مستعمَلًا بلا تعريف (٢٠٢٦-٠٨-١١)، و`min-width`
   الافتراضية لعنصر الشبكة `auto` لا صفر — فمصطلحٌ إنجليزيّ طويل أو
   جدولُ مصادر يمدّ العمود فوق نصيبه ويدفع الصفحة إلى تمريرٍ أفقيّ
   بدل أن يتمرّر داخل حاويته. */
.kn-body { min-width: 0; }

/* الفهرس يلتصق أثناء التمرير — وارتفاع الشريط متغيّر فيُحسب
   بـ`clamp` لا برقم ثابت يطابق ارتفاعًا قد يتغيّر. */
.kn-toc {
  position: sticky;
  top: clamp(70px, 12vh, 90px);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--pad-card-sm);
  box-shadow: var(--card-hi), var(--shadow);
}

.kn-toc-title { font-weight: 700; font-size: var(--fs-p-meta); color: var(--text-muted); margin-bottom: var(--space-3); }
.kn-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); counter-reset: none; }
/* الرابطُ نصٌّ جارٍ والأيقونةُ في هامشه: كان صندوقًا مرنًا فيصير كلُّ `<bdi>` لاتينيّ عنصرًا مستقلًّا
   يلتفّ وحده — «Task 1 و Task 2» تتبعثر (رُصد بالعين، وهي علّةُ نقاط بطاقات الأقسام في الصفحة الأولى).
   📛 كان `display: flex` — 🔎 `git show 99d80e4:client/knowledge/knowledge.css | sed -n '47,58p'` */
.kn-toc a {
  display: block;
  position: relative;
  padding: var(--space-2);
  padding-inline-start: calc(var(--space-2) + 1.4em);
  border-radius: var(--radius-sm);
  font-size: var(--fs-p-meta);
  line-height: 1.6;
  color: var(--text-muted);
  text-decoration: none;
  /* ٤٤ بكسل حدُّ مساحة اللمس في المنصة كلها */
  min-height: 44px;
}
.kn-toc a:hover { background: var(--tint); color: var(--heading); text-decoration: none; }
.kn-toc a > span[aria-hidden="true"] { position: absolute; inset-inline-start: var(--space-2); top: var(--space-2); }

@media (max-width: 900px) {
  .kn-layout { grid-template-columns: minmax(0, 1fr); }
  .kn-toc { position: static; }
}

/* ── الأقسام القابلة للطيّ ── */
/* بطاقةٌ بلا إطار كالسؤال القابل للفتح في الحزمة (`.q` · `pages/home.html`) */
.kn-section {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-panel);
  box-shadow: var(--card-hi), var(--shadow);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.kn-section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: 600;
  font-size: var(--fs-p-card);
  line-height: 1.4;
  color: var(--heading);
  min-height: 44px;
}
.kn-section > summary::-webkit-details-marker { display: none; }
.kn-section > summary:hover { background: var(--tint); }
.kn-section > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

.kn-section-icon { display: inline-flex; line-height: 1; flex: none; }
.kn-section-title { flex: 1; }

/* المؤشّرُ معيّنٌ واحد بالحبر الشفيف يصير قِرمزًا ويدور حين يُفتح القسم (`.qi` في الحزمة).
   📛 كان سهمًا مبنيًّا بالحدود — 🔎 `git show 99d80e4:client/knowledge/knowledge.css | sed -n '94,106p'` */
.kn-section > summary::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--tint2);
  transform: rotate(45deg);
  transition: transform .45s ease, background-color .3s;
}
.kn-section[open] > summary::after,
.kn-section > summary:hover::after { background: var(--primary-fill); transform: rotate(135deg); }

.kn-section-body { padding: 0 var(--space-6) var(--space-6); font-size: var(--fs-p-body); }
.kn-intro { color: var(--text-muted); margin-bottom: var(--space-5); max-width: 70ch; line-height: 1.8; }

.kn-block { margin-bottom: var(--space-6); }
.kn-block:last-child { margin-bottom: 0; }
.kn-block h3 { font-size: var(--fs-p-alert-title); color: var(--heading); margin-bottom: var(--space-3); }
.kn-block p { color: var(--text-muted); line-height: 1.9; max-width: 70ch; }

/* ── الجداول ── */
.kn-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* جدولُ الورقة (`.tbl` · `.tr` · §١٠.٨): كلُّ صفٍّ شريطٌ مستقلّ على الحبر الشفيف بزاوية ١٤ وفراغٍ ٨
   بين الصفوف، وصفُّ العناوين بلا خلفيّة بحبر التفاصيل — ولا خطَّ بين الصفوف ولا حول الجدول.
   📛 كان خطًّا تحت كلّ خليّة وصفَّ عناوين بخلفيّة — 🔎
   `git show 99d80e4:client/knowledge/knowledge.css | sed -n '119,139p'` */
.kn-table {
  width: 100%;
  min-width: 480px;
  border-collapse: separate;
  border-spacing: 0 var(--space-2);
  font-size: var(--fs-p-alert);
}
.kn-table th, .kn-table td {
  padding: var(--pad-row);
  text-align: start;
  vertical-align: top;
  line-height: 1.7;
}
.kn-table tbody th,
.kn-table tbody td { background: var(--tint); }
.kn-table tbody tr > :first-child { border-start-start-radius: var(--radius-row); border-end-start-radius: var(--radius-row); }
.kn-table tbody tr > :last-child { border-start-end-radius: var(--radius-row); border-end-end-radius: var(--radius-row); }
.kn-table thead th {
  padding-block: 0;
  font-size: var(--fs-p-meta);
  font-weight: 700;
  color: var(--text-muted);
  background: none;
}
.kn-table tbody th { font-weight: 700; color: var(--heading); }
.kn-table td { color: var(--text); }

/* ── القوائم ── */
.kn-list { margin: var(--space-3) 0 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); }
.kn-list li { color: var(--text-muted); line-height: 1.9; }
.kn-list li::marker { color: var(--saffron); }

/* ── الملاحظات والتحذيرات — مكوّنُ التنبيه في الورقة (`.alert` · §١٠.٥) ──
   الملاحظةُ «معلومة» (`.a-info`) والتحذيرُ «تنبيه» (`.a-warn`): خلفيّةٌ شفيفة بلون الحالة (وفي الداكن
   خلفيّةٌ واحدة ثابتة)، وشريطٌ يمينيّ ٤ بلونها، والعنوانُ بحبر العنوان والنصُّ بلون المتن.
   📛 كانا بحدٍّ منطقيّ وخلفيّةٍ من `--primary-light` و`--warning-bg` — 🔎
   `git show 99d80e4:client/knowledge/knowledge.css | sed -n '145,161p'` */
.kn-note, .kn-warning {
  border: 0;
  border-radius: var(--radius);
  padding: var(--pad-alert);
  background: var(--alert-info-bg);
  box-shadow: inset -4px 0 0 var(--chart-blue);
}
.kn-note h3, .kn-warning h3 { margin-bottom: var(--space-2); color: var(--heading); }
.kn-note p, .kn-warning p { color: var(--text); font-size: var(--fs-p-alert); }

/* التحذير بلون التحذير لا بلون الخطر: «لا تقابل واحدًا لواحد»
   معلومةٌ يجب أن تُقرأ، لا خطأٌ وقع. */
.kn-warning {
  background: var(--alert-warn-bg);
  box-shadow: inset -4px 0 0 var(--saffron);
}

/* ── المصطلحات ── */
.kn-glossary { margin: var(--space-3) 0 0; display: grid; gap: var(--space-3); }
.kn-glossary dt { font-weight: 700; color: var(--heading); font-size: var(--fs-p-label); }
.kn-glossary dd { margin: var(--space-1) 0 0; color: var(--text-muted); line-height: 1.9; }

/* ── وسم المصدر بجانب كل كتلة — رابطٌ نصّيّ (`.lnk`): حبرُ العنوان وخطٌّ زعفرانيّ تحته ── */
.kn-src {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-size: var(--fs-p-meta);
  color: var(--text-muted);
  text-decoration: none;
  min-height: 44px;
}
.kn-src:hover {
  color: var(--heading);
  text-decoration: underline;
  text-decoration-color: var(--saffron);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ── جدول المصادر ── */
.kn-sources {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-xl);
  padding: var(--pad-card);
  box-shadow: var(--card-hi), var(--shadow);
  margin-top: var(--space-6);
}
.kn-sources h2 { font-size: var(--fs-p-card); margin-bottom: var(--space-2); }
.kn-sources-note { color: var(--text-muted); font-size: var(--fs-p-body); margin-bottom: var(--space-4); }
.kn-sources-list { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-4); font-size: var(--fs-p-body); }
.kn-sources-list li { color: var(--text-muted); }
.kn-source-label { display: block; font-weight: 700; color: var(--heading); font-size: var(--fs-p-body); }
.kn-source-url {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-p-meta);
  /* رابط طويل يقطع السطر بدل أن يمدّ الصفحة */
  overflow-wrap: anywhere;
}
.kn-source-date { display: block; margin-top: var(--space-1); font-size: var(--fs-p-meta); color: var(--text-muted); }

/* الصفّ المقصود بالرابط يُبرَز لحظةً — وإلا قفز الزائر ولم يعرف
   إلى أيّ سطرٍ وصل من بين أحد عشر. والإبرازُ «الصفُّ المميّز» في الورقة: الخانةُ المختارة وشريطٌ قرمزيّ. */
.kn-sources-list li:target { background: var(--primary-light); box-shadow: inset -4px 0 0 var(--primary-fill); border-radius: var(--radius-row); padding: var(--space-2) var(--space-3); }

/* ── الدعوة الأخيرة — الشريطُ الكحليّ بلا إطار، وعنوانُه بمقاس عنوان القسم ── */
.kn-cta {
  margin-top: var(--space-6);
  background: var(--panel-bg, var(--primary-light));
  border: 0;
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 48px);
  text-align: center;
  box-shadow: var(--shadow);
}
.kn-cta h2 { font-size: var(--fs-p-section); line-height: 1.3; margin-bottom: var(--space-3); color: var(--panel-fg, var(--text)); }
.kn-cta p { color: var(--panel-muted, var(--text-muted)); max-width: 60ch; margin-inline: auto; line-height: 1.9; font-size: var(--fs-p-body); }
.kn-cta p strong { color: var(--panel-fg, var(--text)); }
.kn-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-5); }
/* الزرُّ الثانويّ على الكحليّ: صبغةٌ من لون نصّ الشريط لا الحبرُ الشفيف الذي يغيب عليه */
main .kn-cta .btn-ghost { background: color-mix(in srgb, var(--panel-fg) 12%, transparent); color: var(--panel-fg); }
main .kn-cta .btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--panel-fg) 20%, transparent); color: var(--panel-fg); }

@media (prefers-reduced-motion: reduce) {
  .kn-section > summary::after { transition: none; }
}