/* ============================================================
   نبض — دليل التحاليل (المرحلة ٣)
   يمتدّ من feature.css ولا يعيد تعريف رمز واحد منه.
   صفحات قراءة لا صفحات بيع: عمود نصّ واحد، وجداول تُقرأ لا تُزيَّن.
   ============================================================ */

.article { max-width: 780px; }

/* ── ترويسة المقال ── */
.art-head { padding: 34px 0 10px; }
.art-head h1 {
  font-size: clamp(28px, 4vw, 42px); line-height: 1.22; font-weight: 700;
  margin: 20px 0 14px; letter-spacing: -0.4px;
}
.art-head .lead { color: var(--ink-soft); font-size: 18px; margin: 0; }

.hub-head { max-width: 780px; }
.hub-note {
  margin-top: 28px; background: var(--surface-1); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--brand); border-radius: 16px; padding: 22px 24px;
}
.hub-note p { margin: 0 0 10px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.8; }
.hub-note p:last-child { margin: 0; }
.hub-note strong { color: var(--ink); font-weight: 600; }

/* ── بطاقة الحقائق ── */
.facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin: 30px 0 0; padding: 0;
  background: var(--line); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
}
@media (max-width: 620px) { .facts { grid-template-columns: 1fr; } }
.facts > div { background: var(--surface-1); padding: 16px 18px; }
.facts dt { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 4px; }
.facts dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }

/* ── نصّ المقال ── */
.article h2 {
  font-size: clamp(21px, 2.8vw, 27px); line-height: 1.3; font-weight: 700;
  margin: 52px 0 14px; letter-spacing: -0.2px; scroll-margin-top: 90px;
}
.article > p { color: var(--ink-soft); margin: 0 0 18px; font-size: 16.5px; line-height: 1.9; }

/* ── الجداول ── */
.table-wrap { overflow-x: auto; margin: 0 0 8px; -webkit-overflow-scrolling: touch; }
main table {
  width: 100%; border-collapse: collapse; font-size: 15.5px;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; min-width: 460px;
}
main caption {
  caption-side: top; text-align: start; color: var(--ink-faint);
  font-size: 13px; padding: 0 0 10px;
}
main th, main td { padding: 13px 16px; text-align: start; border-bottom: 1px solid var(--line); }
main thead th {
  background: var(--thead-bg); color: var(--ink); font-weight: 600;
  font-size: 13.5px; white-space: nowrap;
}
main tbody tr:last-child th, main tbody tr:last-child td { border-bottom: 0; }
main tbody th { font-weight: 500; color: var(--ink); }
main td.num {
  font-variant-numeric: tabular-nums;
  /* الرقم يُرسم LTR كي لا ينقلب «41–50»، لكن محاذاته تبقى يميناً
     كترويسة العمود — `text-align: start` مع `direction: ltr` تعني
     اليسار، فينفصل الرقم عن عنوانه. */
  direction: ltr; unicode-bidi: isolate; text-align: right;
  color: var(--brand-text); font-weight: 600; white-space: nowrap;
}
main td.src { color: var(--ink-faint); font-size: 13px; }

/* ── صندوق المصدر ── */
.source-box {
  margin: 56px 0 0; background: var(--surface-1);
  border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 26px 28px;
}
.source-box h2 { margin: 0 0 12px; font-size: 19px; }
.source-box p { margin: 0 0 12px; font-size: 15.5px; color: var(--ink-soft); line-height: 1.8; }
.source-box strong { color: var(--ink); }
.source-box a { border-bottom: 1px solid var(--brand-edge); }
.source-box a:hover { border-bottom-color: var(--brand); }
.source-box .fine,
.source-box .disclaim {
  margin: 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-faint); line-height: 1.75;
}

/* ── فحوص المجموعة ── */
.sibs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sibs a {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 7px 16px; font-size: 14.5px;
  color: var(--ink-soft); transition: border-color .2s var(--ease), color .2s var(--ease);
}
.sibs a:hover { color: var(--ink); border-color: var(--brand-edge-2); }
.all-link { margin: 0; font-size: 15px; }

/* ── شبكة الفهرس ── */
.marker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .marker-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .marker-grid { grid-template-columns: 1fr; } }
.marker-grid a {
  display: block; background: var(--surface-1); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 18px; color: var(--ink);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.marker-grid a:hover { border-color: var(--brand-edge-2); transform: translateY(-2px); }
.marker-grid strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.marker-grid span { color: var(--ink-faint); font-size: 13px; }

main > section h2 {
  font-size: clamp(21px, 2.8vw, 28px); font-weight: 700;
  margin: 0 0 20px; display: flex; align-items: baseline; gap: 12px;
  scroll-margin-top: 90px;
}
main > section h2 .count {
  font-size: 13px; font-weight: 500; color: var(--brand-text);
  background: var(--brand-dim); border: 1px solid var(--brand-edge);
  border-radius: var(--radius-pill); padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}

/* الأسئلة ترث من feature.css؛ هذا ضبط عرضٍ فقط */
.article .faq { max-width: none; }
.article .closer { margin-top: 64px; }

/* ── الجداول على الشاشات الضيّقة ──
   `min-width` الثابت كان يفرض تمريراً أفقياً حتى حين يتّسع المحتوى لو
   لُفّ. على الجوال: نسمح للفئة باللفّ ونضيّق الحشوة، فيختفي التمرير
   في أغلب الجداول ويبقى متاحاً لمن يحتاجه فعلاً. */
@media (max-width: 560px) {
  main table { min-width: 0; font-size: 14.5px; }
  main th, main td { padding: 11px 10px; }
  main tbody th, main thead th { white-space: normal; }
  main caption { font-size: 12.5px; }
}

/* خليةٌ تحمل جملةً عربية فيها أرقام: تبقى RTL، وكل مدى معزول بـdir="ltr"
   في وسمه. فرضُ LTR على الخلية يقلب ترتيب المقاطع عند اللفّ. */
main td.conv { color: var(--brand-text); font-weight: 600; }
main td.conv span { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 420px) {
  main th, main td { padding: 10px 7px; }
  main table { font-size: 14px; }
  main tbody th .chip { margin-inline-end: 6px; }
}

/* إشارة إلى وجود ما يُمرَّر — الشريط يختفي على iOS حتى يبدأ التمرير */
.table-wrap { scrollbar-width: thin; }
.table-wrap::-webkit-scrollbar { height: 6px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }