/* ══════════════════════════════════════════════════════════════
   «حِبر» على الصفحات الاثنتي عشرة — ورقةُ المكوّنات في حزمة التصميم
   (`identity/components.css` · §١٠ و§١٢ من الدليل)

   تحمّلها بعد أوراقها: صفحاتُ الأقسام الأربع · «من نحن» · «تواصل معنا» ·
   دليلُ الاختبار · الوثائقُ النظاميّة · ٤٠٤ (فوق `marketing.css`) · والموافقة ·
   وضبطُ كلمة المرور · والملاحظات (فوق `base.css`).

   ⚠️ **ورقةٌ مستقلّة لا قواعدُ في `marketing.css` و`base.css`**: الورقتان
   تحملهما الصفحتان المصمّمتان (الصفحة الأولى وصفحة المتعلّم) وبوّابةُ الوليّ
   ولوحةُ الإدارة، وأصنافُهما مشتركة (`.btn` · `.field` · `.card`) — فقاعدةٌ
   هناك تغيّر صفحةً مصمَّمة أو صفحةً لم يبلغها التصميم. وهنا تبلغ هذه الصفحاتِ
   وحدها لأنها وحدها تحمّلها.

   الشكلُ وحده: لا نصَّ ولا معرّفَ ولا سلوك. والألوانُ أدوارٌ من `tokens.css`،
   والمقاساتُ رموزُ `--fs-p-*`، وأشكالُ المكوّنات رموزُها هناك. والمكوّناتُ
   محصورةٌ في `main`، فلا تمسّ الرأسَ المشترك ولا بانرَ ملفّات الارتباط.
   ══════════════════════════════════════════════════════════════ */

/* ── الأساس ── */
body { font-size: var(--fs-p-body); line-height: 1.75; }

/* ══════════════════════════════════════════════════════════════
   الرأس — كرأس الصفحة الأولى في الصفحات العامّة، وكرأس صفحة المتعلّم
   في صفحات المنصّة؛ فلا يتبدّل الرأسُ بين صفحةٍ وأختها.
   ══════════════════════════════════════════════════════════════ */

/* الصفحاتُ العامّة (رأسٌ فيه روابطُ التنقّل): مقاسُ القائمة والزرّين، والشعارُ ٦٣،
   وعرضُ الرأس من ١٢٠٠ بهامش ٦٤ حتى ١٣١٢ — قواعدُ الصفحة الأولى بعينها (`landing.css`). */
.site-nav a { font-size: var(--fs-nav); }
.site-header-cta .btn { font-size: var(--fs-btn); }
@media (min-width: 641px) {
  .site-header:has(.site-nav) .site-brand-logo { height: 63px; }
}
@media (min-width: 1200px) {
  .site-header:has(.site-nav) .site-header-inner.container {
    max-width: calc(var(--header-max-wide) + 2 * var(--header-pad-wide));
    padding-inline: var(--header-pad-wide);
  }
}

/* صفحاتُ المنصّة (رأسُ التطبيق بلا روابط): «الأعمق» في الوضع الداكن كرأس صفحة المتعلّم */
.site-header:not(:has(.site-nav)) { background: var(--header-bg-app); }

/* ══════════════════════════════════════════════════════════════
   الأزرار — `.btn` في الورقة: زاويةٌ ١٠ بلا إطار، ويرتفع الزرُّ عند المرور
   ويسطع، وحلقةُ التركيز بلون `--focus`. و`.btn-ghost` بإطاره الرفيع في
   الورقتين يُرسم ثانويًّا (`.btn.soft`): «لا حدودَ داكنةً رفيعة»، والحزمةُ
   ترسم الزرَّ الثاني بجانب الرئيس ثانويًّا (`pages/home.html`).
   ══════════════════════════════════════════════════════════════ */
main .btn {
  gap: var(--space-3);
  font-size: var(--fs-p-btn);
  font-weight: 700;
  line-height: 1.4;
  padding: var(--pad-btn);
  border: 0;
  border-radius: var(--radius-sm);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s, background-color .2s;
}
main .btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); text-decoration: none; }
main .btn:active:not(:disabled) { transform: translateY(1px) scale(.985); box-shadow: none; }
main .btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
main .btn:disabled {
  background: var(--tint2);
  color: var(--text-muted);
  box-shadow: none;
  opacity: .75;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

main .btn-primary,
main .btn-primary:hover:not(:disabled) {
  background: var(--primary-fill);
  color: var(--on-primary);
  box-shadow: var(--shadow-btn);
}

main .btn-secondary,
main .btn-ghost {
  background: var(--btn-soft-bg);
  color: var(--btn-soft-fg);
  border: 0;
  box-shadow: none;
}
main .btn-secondary:hover:not(:disabled),
main .btn-ghost:hover:not(:disabled) {
  background: var(--btn-soft-bg-hover);
  color: var(--btn-soft-fg);
  border-color: transparent;
  filter: none;
}

main .btn-sm { font-size: var(--fs-p-btn-sm); padding: var(--pad-btn-sm); }
main .btn-lg { font-size: var(--fs-p-btn-lg); padding: var(--pad-btn-lg); }
main .btn-block { width: 100%; }

/* ══════════════════════════════════════════════════════════════
   الحقول — `.inp` في الورقة: على `--field-bg` بلا إطار، وحلقةُ التركيز
   بلون `--focus` على خلفيّة البطاقة، وعنوانُ الحقل بحبر العنوان.
   ══════════════════════════════════════════════════════════════ */
main .field { display: grid; gap: var(--space-2); }
main .label {
  margin: 0;
  font-size: var(--fs-p-label);
  font-weight: 600;
  color: var(--heading);
}
main .input,
main .select,
main .textarea {
  min-height: var(--field-height);
  padding: 0 var(--field-pad-x);
  font-size: var(--fs-p-input);
  color: var(--heading);
  background: var(--field-bg);
  border: 0;
  border-radius: var(--radius-field);
  transition: background-color .2s ease, box-shadow .2s ease;
}
main .input.en { font-size: var(--fs-p-label); }
main .textarea { padding-block: var(--space-3); line-height: 1.7; }
main .input::placeholder,
main .textarea::placeholder { color: var(--text-muted); opacity: 1; }
main .input:hover,
main .select:hover,
main .textarea:hover { background: var(--field-bg-hover); }
main .input:focus,
main .select:focus,
main .textarea:focus {
  outline: 0;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--focus);
}
main .hint { font-size: var(--fs-p-meta); color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════
   التنبيهات — `.alert` في الورقة: خلفيّةٌ شفيفة وشريطٌ يمينيّ ٤ بلون حالته،
   والنصُّ بلون المتن. وفي الوضع الداكن خلفيّةٌ واحدة ثابتة (`--alert-*-bg`).
   ══════════════════════════════════════════════════════════════ */
main .alert {
  padding: var(--pad-alert);
  font-size: var(--fs-p-alert);
  line-height: 1.6;
  color: var(--text);
  border: 0;
  border-radius: var(--radius);
}
main .alert-error { background: var(--alert-err-bg); box-shadow: inset -4px 0 0 var(--primary); }
main .alert-success { background: var(--alert-ok-bg); box-shadow: inset -4px 0 0 var(--chart-ok); }

/* ══════════════════════════════════════════════════════════════
   البطاقات — `.card` في الورقة: خلفيّةُ البطاقة بلا إطار، زاويةٌ ٢٤ وحشوةٌ
   ٣٢×٣٤ (والصغيرةُ ٢٢×٢٤ بزاوية ٢٠)، ولمعةٌ في الداكن وظلّ.
   ══════════════════════════════════════════════════════════════ */
main .card {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-xl);
  padding: var(--pad-card);
  box-shadow: var(--card-hi), var(--shadow);
}
main .card-title { font-size: var(--fs-p-card); font-weight: 700; line-height: 1.35; color: var(--heading); }
@media (max-width: 700px) {
  main .card { padding: var(--pad-card-sm); border-radius: var(--radius-lg); }
}

/* ══════════════════════════════════════════════════════════════
   الشارات — `.bdg` في الورقة: ١٨ بوزنٍ ثقيل وزاويةٍ كاملة بلا إطار.
   «متاح الآن» بلون «آخر قياس»، و«قريبًا» بلا خلفيّة ومعيّنٌ زعفرانيّ قبلها.
   ══════════════════════════════════════════════════════════════ */
main .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-p-meta);
  font-weight: 700;
  line-height: 1.6;
  padding: var(--space-05) var(--space-3);
  border: 0;
  border-radius: 999px;
}
main .badge-free { background: var(--primary-light); color: var(--primary); border: 0; }
main .badge-success { background: var(--state-last-bg); color: var(--state-last-fg); }
main .badge-soon { background: transparent; color: var(--text-muted); font-weight: 600; padding-inline: 0; border: 0; }
main .badge-soon::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--saffron);
  transform: rotate(45deg);
}

/* ══════════════════════════════════════════════════════════════
   صفحاتُ الأقسام — الافتتاح
   الخلفيّةُ ملساء: نُزع تدرّجُ لون القسم وخطُّه السفليّ («لا أزرقَ رماديّ
   فاتح في أيّ قسم» · «لا حدودَ داكنةً رفيعة»). ومسارُ الصفحة `.crumbs`:
   ٢٠ بحبر التفاصيل، والفاصلُ معيّنٌ ٧ بالحبر الشفيف، والصفحةُ الحاليّة بحبر العنوان.
   ══════════════════════════════════════════════════════════════ */
.mk-track-hero {
  background: none;
  border-bottom: 0;
  padding-block: var(--space-7) var(--space-6);
}
.mk-crumbs { gap: var(--space-3); font-size: var(--fs-p-label); color: var(--text-muted); flex-wrap: wrap; }
.mk-crumbs a { color: var(--text-muted); }
.mk-crumbs a:hover { color: var(--heading); }
.mk-crumbs > span:last-child { color: var(--heading); font-weight: 600; }
.mk-crumbs > span[aria-hidden="true"] {
  flex: none;
  width: 7px;
  height: 7px;
  font-size: 0;
  background: var(--tint2);
  transform: rotate(45deg);
}
.mk-track-hero h1 { font-size: var(--fs-p-title); line-height: 1.3; }
.mk-track-hero .mk-hero-lede { font-size: var(--fs-p-lead); line-height: 1.75; color: var(--text-muted); }
.mk-track-hero-badges { gap: var(--space-3); }
.mk-hero-pricing { font-size: var(--fs-p-meta); }
.mk-hero-actions { gap: var(--space-4); }

/* الرسمُ في الافتتاح وصورُ التوضيح: بطاقةٌ بلا إطار */
.mk-visual,
.mk-photo {
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--card-hi), var(--shadow);
}

/* ── رأسُ القسم: عنوانٌ بمقاس `.h3`، والعنوانُ الصغير بقِرمز النصّ بلا تباعد ── */
.mk-section-head { max-width: 820px; }
.mk-section-head h2 { font-size: var(--fs-p-section); line-height: 1.3; }
.mk-kicker { font-size: var(--fs-p-meta); font-weight: 600; }
.mk-section-sub { font-size: var(--fs-p-body); line-height: 1.6; }

/* ── نتائجُ التعلّم: بطاقاتٌ صغيرة منفصلة ── */
.mk-outcomes { gap: var(--gap-cards); }
.mk-outcome {
  gap: var(--space-3);
  padding: var(--pad-card-sm);
  font-size: var(--fs-p-body);
  line-height: 1.7;
  color: var(--text);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--card-hi), var(--shadow);
}
.mk-outcome svg { margin-top: calc((1.7em - 20px) / 2); }

/* ── محاورُ المسار: خيطٌ بالحبر الشفيف وعُقَدٌ معيّناتٌ بالقِرمز (`.stepper` في الورقة) ── */
.mk-units { max-width: 820px; gap: var(--space-6); padding-inline-start: 40px; }
.mk-units::before { inset-inline-start: 11px; width: 2px; background: var(--tint2); opacity: 1; }
.mk-unit::before {
  top: calc(var(--fs-p-card) * .7 - 7px);
  inset-inline-start: -35px;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 0;
  background: var(--primary-fill);
  transform: rotate(45deg);
}
.mk-unit-head { gap: var(--space-3); margin-bottom: var(--space-2); }
.mk-unit h3 { font-size: var(--fs-p-card); line-height: 1.4; }
.mk-unit p { font-size: var(--fs-p-body); line-height: 1.75; color: var(--text-muted); }
.mk-unit-num { font-size: var(--fs-p-meta); color: var(--text-muted); }

/* ── بطاقاتُ «لمن» و«لماذا»: `.card` وعنوانُها `.h4`، وأيقونتُها `.ibtn` ٤٦ على الحبر الشفيف ── */
.mk-audience,
.mk-features { gap: var(--gap-cards); }
.mk-slice,
.mk-feature {
  gap: var(--space-4);
  padding: var(--pad-card);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--card-hi), var(--shadow);
}
.mk-slice-icon,
.mk-feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--heading);
}
/* أيقوناتُ «حِبر» بمقاس جدول الحزمة (٢٤) من `icons.css` (`icons-hibr-reading-b`).
   📛 كانت الرسومُ القديمة تُصغَّر هنا إلى ٢٢ — 🔎 `git show 2c1453b:client/shared/styles/hibr-pages.css | sed -n '293,294p'` */
.mk-slice h3,
.mk-feature h3 { font-size: var(--fs-p-card); line-height: 1.35; margin-bottom: var(--space-1); color: var(--heading); }
.mk-slice p,
.mk-feature p { font-size: var(--fs-p-body); line-height: 1.7; color: var(--text-muted); }
@media (max-width: 700px) {
  .mk-slice,
  .mk-feature { padding: var(--pad-card-sm); border-radius: var(--radius-lg); }
}

/* ── المتطلّباتُ والأدوات: بطاقتان، والبندُ نصٌّ جارٍ ومعيّنٌ زعفرانيّ في هامشه ──
   كان البندُ صندوقًا مرنًا فيتبعثر نصُّه حول المقطع اللاتينيّ (`A2`)، وهي علّةُ
   نقاط بطاقات الأقسام في الصفحة الأولى بعينها. */
.mk-req { gap: var(--gap-cards); }
.mk-req-card {
  padding: var(--pad-card);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--card-hi), var(--shadow);
}
.mk-req-card h3 { gap: var(--space-3); font-size: var(--fs-p-card); color: var(--heading); }
.mk-req-card h3 .ic { color: var(--accent-ink); }
.mk-req-card ul { gap: var(--space-3); font-size: var(--fs-p-body); line-height: 1.7; color: var(--text-muted); }
.mk-req-card li { display: block; position: relative; padding-inline-start: calc(9px + var(--space-3)); }
.mk-req-card li::before {
  position: absolute;
  inset-inline-start: 0;
  top: calc(.85em - 4.5px);
  width: 9px;
  height: 9px;
  margin: 0;
  border-radius: 0;
  background: var(--saffron);
  transform: rotate(45deg);
}

/* ── الأسئلة: `.q` في الصفحة الأولى من الحزمة — بطاقةٌ بلا إطار، ومعيّنٌ واحد
   بالحبر الشفيف يصير قِرمزًا ويدور حين يُفتح السؤال (بدل «+») ── */
.mk-faq { gap: var(--space-3); max-width: 900px; }
.mk-faq details {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-panel);
  box-shadow: var(--card-hi), var(--shadow);
}
/* عنوانُ السؤال نصٌّ جارٍ لا صندوقٌ مرن، والمعيّنُ في هامشه: الصندوقُ المرن (`marketing.css`) يجعل
   المقطعَ اللاتينيّ (`7.0`) عنصرًا مستقلًّا يأخذ فراغَه فتتبعثر الجملة — رُصد بالعين، وهي علّةُ نقاط
   بطاقات الأقسام في الصفحة الأولى بعينها. */
.mk-faq summary {
  display: block;
  position: relative;
  padding: var(--space-5) var(--space-6);
  padding-inline-end: calc(var(--space-6) + 18px + var(--space-4));
  font-size: var(--fs-p-card);
  font-weight: 600;
  line-height: 1.5;
  color: var(--heading);
}
.mk-faq summary::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--space-6);
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0;
  font-size: 0;
  background: var(--tint2);
  transform: rotate(45deg);
  transition: transform .45s ease, background-color .3s;
}
.mk-faq details[open] summary::after,
.mk-faq summary:hover::after { background: var(--primary-fill); transform: rotate(135deg); }
.mk-faq details > p {
  max-width: none;
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--fs-p-body);
  line-height: 1.7;
  color: var(--text-muted);
}

/* ── النثر («من نحن» والوثائق): نصُّ المتن بمقاسه، والمؤكَّدُ بحبر العنوان ── */
.mk-prose { max-width: 760px; font-size: var(--fs-p-body); line-height: 1.9; }
.mk-prose > p + p { margin-top: var(--space-5); }
.mk-prose strong { color: var(--heading); font-weight: 700; }

/* ── «تواصل معنا»: النموذجُ وبطاقةُ المعلومات بمكوّن البطاقة، والحقولُ بمكوّن الحقل أعلاه ── */
.mk-form,
.mk-contact-card {
  gap: var(--space-5);
  padding: var(--pad-card);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--card-hi), var(--shadow);
}
.mk-contact-line { gap: var(--space-4); font-size: var(--fs-p-body); line-height: 1.7; color: var(--text-muted); }
.mk-contact-line strong { color: var(--heading); font-size: var(--fs-p-label); }
.mk-contact-line .en { font-size: var(--fs-p-body); }
.mk-contact-line svg { margin-top: calc((1.7em - 21px) / 2); color: var(--primary); }
@media (max-width: 700px) {
  .mk-form,
  .mk-contact-card { padding: var(--pad-card-sm); border-radius: var(--radius-lg); }
}

/* ══════════════════════════════════════════════════════════════
   الشريطُ الختاميّ — كحليٌّ بحلقة القلم ونقاطها الثلاث (`.close` في الصفحة
   الأولى من الحزمة): النصُّ والزرّان في عمود، والحلقةُ بجانبها (وفوقها على الجوّال).
   والحلقةُ منقولةٌ كما هي من الحزمة وأنماطُها كأنماطها في الصفحة الأولى.
   ══════════════════════════════════════════════════════════════ */
.mk-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--space-7);
  align-items: center;
  border-radius: var(--radius-xl);
}
.mk-panel h2 { font-size: var(--fs-p-title); line-height: 1.25; }
.mk-panel .mk-panel-content { grid-column: 1; grid-row: 1; }
.mk-panel .mk-panel-content p { font-size: var(--fs-p-lead); line-height: 1.7; }
.mk-panel-ring { grid-column: 2; grid-row: 1; width: 100%; max-width: 360px; justify-self: center; }
.mk-panel-ring svg { display: block; width: 100%; height: auto; overflow: visible; }
.mk-panel-ring .pen  { fill: none; stroke: var(--panel-fg); stroke-width: 4.5; stroke-linecap: round; opacity: .9; }
.mk-panel-ring .pen2 { fill: none; stroke: var(--primary-fill); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1100; stroke-dashoffset: 1100; }
.mk-panel-ring .pd   { transform-box: fill-box; transform-origin: center; }
.mk-panel-ring .f-ver  { fill: var(--primary-fill); }
.mk-panel-ring .f-saf  { fill: var(--saffron); }
.mk-panel-ring .f-band { fill: var(--panel-fg); }
@media (prefers-reduced-motion: no-preference) {
  .mk-panel-ring .pd { transition: transform .8s ease; }
  .mk-panel:hover .mk-panel-ring .pen2 { animation: hibr-pen-draw 2s ease forwards; }
  .mk-panel:hover .mk-panel-ring .pd { transform: rotate(90deg); }
}
@keyframes hibr-pen-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 820px) {
  .mk-panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .mk-panel-ring { grid-column: 1; grid-row: 1; max-width: 260px; }
  .mk-panel .mk-panel-content { grid-row: 2; }
}
/* الزرُّ الثانويّ على الكحليّ: صبغةٌ من لون نصّ الشريط لا الحبرُ الشفيف الذي يغيب عليه */
main .mk-panel .btn-ghost {
  background: color-mix(in srgb, var(--panel-fg) 12%, transparent);
  color: var(--panel-fg);
}
main .mk-panel .btn-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--panel-fg) 20%, transparent);
  color: var(--panel-fg);
}