/* ══════════════════════════════════════════════════════════════
   هيكل الموقع المشترك — الشريط العلوي والفوتر

   يرافق `client/shared/chrome/{header,footer}.html` (المصدر الوحيد
   للمحتوى) و`client/shared/scripts/chrome.js` (السلوك) و
   `appnav.js` (ما يملأ فتحات الشريط في صفحات التطبيق).

   ── العلّة التي أوجبه ──
   كان الشريط منسوخًا حرفيًّا في **سبعة** ملفات HTML بصنف `.mk-header`،
   وفي `appnav.js` بصنف `.appnav`، وفي صفحات أخرى بأصناف `.topbar`
   و`.nav` و`.gnav`. والفوتر منسوخًا في سبعة و**غائبًا عن سبع**.
   فتغييرٌ واحد يقتضي أربعة عشر تعديلًا، ونسيان واحدٍ منها لا يظهر
   إلا لمن دخل تلك الصفحة بعينها — **والانحراف صامت**: الصفحة تعمل
   تمامًا وشريطُها يقول غير ما تقوله أختها.

   ── لماذا ملفٌ في `shared/styles` لا في `marketing.css` ──
   لأنه يُحمَّل فوق **ورقتين مختلفتين**: `marketing.css` في الصفحات
   العامة و`base.css` في صفحات المنصة. والورقتان تعرّفان الرموز
   الأساسية بالأسماء نفسها عمدًا (`--bg --surface --text --primary
   --space-N --border --radius*`)، فهذا الملف يقرأها ولا يعرّفها.

   ⚠️ **ورموز الفوتر لها بدائل**: `--footer-bg` وأخواتها معرَّفة في
   `marketing.css` وحدها (درجات مصمَّمة)، فتُقرأ هنا بـ
   `var(--footer-bg, var(--surface))` — فيعمل الفوتر على `base.css`
   بأسطحها العادية بدل أن يخرج بلا لون. **وبديلٌ صامت أفضل من
   لون مفقود هنا** لأن النتيجة مرئية فورًا لا مخفيّة.

   🆕 **وورقةُ أيقونات «حِبر» تُستورد من هنا** (`icons-hibr-reading-b`): هذا
   الملفّ تحمّله كلُّ صفحة، والرأسُ المشترك نفسُه يرسم أيقونات، فورقتُها
   حيث يُرسم الرأس. وهي منسوخةٌ من الحزمة بحرفها (`shared/icons/`).
   ══════════════════════════════════════════════════════════════ */

@import url('/shared/icons/icons.css');

/* ══════════════════════════════════════════════════════════════
   أيقوناتُ «حِبر» في المنصّة — ما لا تقوله ورقةُ الحزمة وحدها
   ══════════════════════════════════════════════════════════════ */

/* أيقونةٌ في سطرٍ من نصّ تقف على وسطه لا على خطّ قاعدته — ولا أثرَ
   لهذا في حاويةٍ مرنة */
.ic { vertical-align: middle; }

/* وبجوار النصّ داخل زرٍّ من أزرار `base.css` (وهو مرنٌ بلا فجوة): فجوةُ
   الحزمة بينهما. ومقصورةٌ على زرٍّ فيه أيقونة، فلا يتغيّر زرٌّ بلا أيقونة */
.btn:has(> .ic) { gap: var(--space-2); }

/* والشارةُ في `base.css` سطرٌ بلا حاويةٍ مرنة: شارةٌ فيها أيقونة تصفّهما بفجوة */
.badge:has(> .ic) { display: inline-flex; align-items: center; gap: var(--space-1); }

/* الأسطح: `icons.css` يجعل اللمسةَ بلون الأيقونة على كلّ `.btn` إلّا
   `.soft` و`.ghost` في الحزمة، ونظيراهما في المنصّة `.btn-secondary`
   و`.btn-ghost` — فتبقى لمستُهما برتقاليّةً كما في الحزمة (§١٥) */
.btn-secondary .ic,
.btn-ghost .ic { --ic-ac: var(--ver); }

/* ══════════════════════════════════════════════════════════════
   الشريط العلوي
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ⚠️⚠️ **الشريط ثابتٌ في مكانه لا يتحرّك مع التمرير** — قرار مالك.

   كان `position: sticky` فيرافق القارئ في كل تمريرة. والثمن يقع
   على **جمهور الجوال** تحديدًا: شريطٌ بارتفاع ٥٨ بكسل على شاشة
   ٦٦٧ يأكل **٩٪ من الارتفاع في كل لحظة**، ومعه شريط المتصفح
   وشريط النظام يصير ثلث الشاشة إطارًا لا محتوى. وفي شاشة المهمة
   خاصةً — حيث يقرأ المتعلّم نصًّا ويجيب — كل بكسل محتوى.

   و`static` تُعيد تلك المساحة كاملةً بعد أول تمريرة، والعودة إلى
   أعلى الصفحة تبقى بضغطةٍ واحدة (`Home` أو أعلى الشاشة على الجوال).

   ⚠️ **ومع سقوط `sticky` تسقط الحاجة إلى `backdrop-filter`**:
   الضبابية كانت لأن المحتوى يمرّ **تحت** الشريط. وشريطٌ ثابت في
   التدفّق لا يمرّ تحته شيء — والمرشّح يكلّف إعادة رسمٍ في كل
   إطار على أجهزة ضعيفة بلا أن يُرى.
   ══════════════════════════════════════════════════════════════ */
/* ⚠️⚠️ **`relative` لا `static` — وهو ثابتٌ في مكانه كذلك** (رآه المالك على هاتفه): قائمةُ الجوّال
   (`.site-nav.is-open` أدناه) `position: absolute; top: 100%`، ومقياسُها أقربُ سلفٍ مُموضَع. والشريطُ
   `static` وابنٌ مباشر لـ`body` ولا سلفَ مُموضَعًا، فكانت تُقاس بالكتلة الابتدائيّة فتُرسم عند ارتفاع
   النافذة كاملًا — تحت الشاشة الأولى — فيُضغط الزرُّ ولا يظهر شيء. و`relative` يُبقي الشريطَ في
   تدفّق الصفحة لا يتحرّك مع التمرير (قرارُ المالك أعلاه بحاله)، ويجعله مقياسَ القائمة، ويُعمل
   `z-index` فتُرسم القائمةُ فوق ما تحتها من الصفحة.
   📛 كان `position: static;` — 🔎 git show ced1b8e:client/shared/styles/chrome.css | sed -n '77,84p' */
.site-header {
  position: relative;
  z-index: 40;
  /* على ورق الصفحة كما في حزمة التصميم، لا سطحٌ أبيض فوقها */
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  transition: background-color .6s;
}

/*
 * ⚠️ **الارتفاع صار ٥٢ بكسل بدل ٦٦ (و٤٨ على الجوال بدل ٥٨).**
 * والحدّ الأدنى محكومٌ بأصغر عنصر لمسٍ فيه: ٤٤ بكسل — معيار
 * المنصة كلها. فالنزول دونه يجعل الأزرار غير قابلة للإصابة
 * بالإبهام، والزيادة عليه مساحةٌ لا تحمل شيئًا.
 */
.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
}

.site-header-spacer { flex: 1; }

/* الفتحات الفارغة لا تأخذ مساحة: في الصفحات العامة يبقى `#app-nav-back`
   فارغًا، وفتحةٌ بهامش تدفع الشعار بلا سبب مرئيّ. */
.site-header-back:empty,
.site-header-section:empty,
.site-header-account:empty { display: none; }

/* ── الشعار ── */
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  flex-shrink: 0;
}
.site-brand:hover { text-decoration: none; }

/* ══════════════════════════════════════════════════════════════
   الشعار «حِبر» — ملفّا الحزمة كما هما (`logo-safoo-ai-orange-dot`)

   الارتفاعُ مشتقٌّ من مقاس الرمز في الحزمة: الرمزُ ٦٠ وحدةً في مربّعه،
   وارتفاعُ ملفّ الشعار ٦٩٫٨ وحدة. فرمزُ صفحة المتعلّم (٤٨ بكسل) يجعل
   الملفَّ ٥٦ بكسل، ورمزُ الجوّال (٤٠) يجعله ٤٧، ورمزُ الصفحة الأولى
   (٥٤) يجعله ٦٣ — وهذا الأخير في `landing.css` لأنه للصفحة الأولى وحدها.

   ⚠️ والملفّان لا يرثان رموزَ الصفحة (صورةٌ مستندٌ مستقلّ)، فيُظهر
   الوضعُ ما يوافقه منهما: الفاتحُ افتراضًا، والداكنُ مع `data-theme`.

   📛 كان هنا «نبضُ الشعار» على خطّ «الخيط S» (م-٧) — والشعارُ اليوم
   ملفُّ الحزمة بلا حركة. 🔎 `git show f5e646e:client/shared/styles/chrome.css | sed -n '92,134p'`
   ══════════════════════════════════════════════════════════════ */
.site-brand-logo { display: block; height: 56px; width: auto; }
.site-brand-logo-dark { display: none; }
:root[data-theme="dark"] .site-brand-logo-light { display: none; }
:root[data-theme="dark"] .site-brand-logo-dark { display: block; }

/* ── التنقّل العام ──
   ⚠️ **الشريطُ يتّسع لروابطه في حاويته** (٢٠٢٦-٠٩-٢٦ · م-٢٨٧): رابطُ Excel زاده
   65 بكسل ففاض 109 عن الحاوية (1160) وخرج «ابدأ الآن» من النافذة على عرض 1280 —
   قاسه `check:excel-section` بالعنصر الذي في مركز الزرّ. فضاق الفراغُ بين الروابط،
   وخرجت شارةُ التسعير من الشريط (وهي في كلّ بطاقة وصفحة قسم). */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: auto;
}
.site-nav a {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}
.site-nav a:hover { color: var(--text); text-decoration: none; }

/* خط «الخيط» تحت الرابط الحالي */
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 700; }
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-2);
  bottom: 0;
  height: 2.5px;
  border-radius: 3px;
  background: var(--accent, var(--primary));
}

.site-header-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.site-header-cta .badge-free { display: none; }

.site-menu-btn {
  display: none;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  /* ٤٤×٤٤ حدًّا أدنى — معيار مساحة اللمس في المنصة كلها */
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
}
.site-menu-btn svg { display: block; }

/* ══════════════════════════════════════════════════════════════
   فتحات صفحات التطبيق — يملؤها `appnav.js`
   ══════════════════════════════════════════════════════════════ */

/* زرّ الرجوع: ٤٤×٤٤، وموضعه أول الشريط — أي أقصى اليمين في RTL —
   وهو ما يبلغه الإبهام على الجوال بلا إعادة مسك الجهاز. */
.appnav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.appnav-back:hover { background: var(--bg); }

.site-header-section {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.appnav-sep { color: var(--text-light); flex-shrink: 0; }

.appnav-section {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  /* اسم قسم طويل لا يدفع قائمة الحساب خارج الشاشة */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.appnav-section:hover { color: var(--primary); }

/* ── قائمة الحساب ── */
.appnav-account { position: relative; flex-shrink: 0; }

.appnav-account-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding-inline: var(--space-3);
  /* ألوانُ `.acc` في حزمة «حِبر»: صبغةٌ شفيفة بلا إطار، والحبرُ للعنوان */
  border: 0;
  border-radius: 999px;
  background: var(--toggle-bg);
  color: var(--heading);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s;
}
.appnav-account-btn:hover { background: var(--toggle-bg-hover); }
.appnav-avatar,
.appnav-caret { display: inline-flex; }
.appnav-caret { color: var(--text-muted); }

.appnav-menu {
  position: absolute;
  /* `inset-inline-end` لا `right`: في RTL تُحاذي القائمةُ الزرَّ من
     جهته الصحيحة تلقائيًا، و`right` كانت ستدفعها خارج الشاشة */
  inset-inline-end: 0;
  top: calc(100% + 6px);
  min-width: 210px;
  background: var(--surface-raised, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 50;
}

.appnav-menu-email {
  font-size: 15px;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-1);
  /* بريد طويل يقطع القائمة بدل أن يمدّها */
  overflow-wrap: anywhere;
}

.appnav-menu-item {
  /* مرنٌ لتقف أيقونةُ البند بجوار نصّه (`icons-hibr-reading-b`) */
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: start;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
}
.appnav-menu-item:hover { background: var(--bg); text-decoration: none; }
.appnav-menu-danger { color: var(--danger); }

/* ── مسار التنقّل ── */
.appnav-trail {
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.appnav-trail-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-block: var(--space-2);
  font-size: 13.5px;
}
.appnav-crumb { color: var(--text-muted); text-decoration: none; }
.appnav-crumb:hover { color: var(--primary); text-decoration: underline; }
.appnav-crumb.is-current { color: var(--text); font-weight: 600; }
.appnav-crumb-sep { display: inline-flex; color: var(--text-light); }

/* حلقةٌ وجهتُها شاشةٌ في الصفحة نفسها تُرسم `<button>` لا `<a>` — انظر
   `trailHtml`. وهذه القاعدة تنزع نمط المتصفح الافتراضي وحده فتتطابق
   بالعين مع أختها الرابطة: صنفٌ واحد وشكلان يُقرأ عطلًا. */
button.appnav-crumb {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   زرّ الوضع الليلي/النهاري — في كل صفحة بلا استثناء
   ══════════════════════════════════════════════════════════════ */

/* هيئةُ حزمة التصميم (`.tgl` · `.tip`): أيقونةٌ في دائرةٍ بلا نصٍّ ظاهر،
   والتلميحُ تحتها عند المرور والتركيز. */
.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--toggle-bg);
  color: var(--toggle-fg);
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .25s, transform .25s;
}
.theme-toggle:hover { background: var(--toggle-bg-hover); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { display: block; width: 24px; height: 24px; transition: transform .5s ease; }
.theme-toggle:hover svg { transform: rotate(-20deg); }

.theme-toggle-tip {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, -4px);
  white-space: nowrap;
  background: var(--heading);
  color: var(--bg);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  padding: 6px 14px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 5;
}
.theme-toggle:hover .theme-toggle-tip,
.theme-toggle:focus-visible .theme-toggle-tip { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle svg,
  .theme-toggle-tip { transition: none; }
  .theme-toggle:hover svg { transform: none; }
}

/* الأيقونتان في العنصر نفسه، وتُبدَّل الظاهرة منهما حسب الوضع
   الفعّال — لا إعادة رسم للزرّ فلا يفقد التركيز عند التبديل.
   القمرُ والصفحةُ فاتحة، والشمسُ والصفحةُ داكنة. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* ══════════════════════════════════════════════════════════════
   الفوتر — **مصغَّر، وسطران لا أربعة أعمدة**

   ⚠️⚠️ **التصغير قرارٌ لا اختصار.** الفوتر السابق أربعة أعمدة
   بشعارٍ ووصفٍ وخمسة عشر رابطًا، وارتفاعه ≈٣٢٠ بكسل. وهو معقولٌ
   في صفحةٍ تسويقية تُزار مرة — لكنه صار يظهر في **كل** صفحة، بما
   فيها شاشة المهمة التي يفتحها المتعلّم يوميًّا.

   وعلى جوالٍ بشاشة ٦٦٧ بكسل كان الفوتر ينهار إلى عمود واحد
   فيتجاوز **نصف الشاشة** — أي أن ما بعد المحتوى أطول من المحتوى.

   الآن: صفٌّ أفقيّ يلتفّ + سطرا حقوق وتصريح. الارتفاع ≈١١٠ بكسل
   على الحاسوب و≈١٦٠ على الجوال.

   ⛔ **وما لم يُحذف مهما صُغِّر**: رابطا الخصوصية والشروط، وإخلاء
   المسؤولية عن العلامات التجارية. الأول حقٌّ يُبلَغ من كل صفحة،
   والثاني التزامٌ قانونيّ — وظهورُه في بعض الصفحات يُفرغه.
   ويفرض الاثنين `npm run check:assets`.
   ══════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--footer-bg, var(--surface));
  color: var(--footer-muted, var(--text-muted));
  border-top: 1px solid var(--footer-border, var(--border));
  margin-top: clamp(32px, 5vw, 56px);
  font-size: 15px;
}

/* عمودٌ واحد يتراصّ — والالتفاف داخل صفّ الروابط وحده */
.site-footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-5);
}

.site-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--footer-fg, var(--text));
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  align-self: start;
  /* ٤٤ بكسل حدُّ مساحة اللمس في المنصة كلها */
  min-height: 44px;
}
.site-footer-brand:hover { text-decoration: none; color: var(--primary); }

/* شعارُ التذييل ملفّا الحزمة كشعار الرأس، بمقاسه (٥٦، و٤٧ على الجوّال — الاشتقاقُ عند
   `.site-brand-logo` أعلاه)، ويُظهر الوضعُ ما يوافقه منهما: الفاتحُ على ورق التذييل،
   والداكنُ على «الأعمق». 📛 كان رسمَ «الخيط S» (`.site-footer-brand svg`) — 🔎
   `git show 99d80e4:client/shared/styles/chrome.css | sed -n '425p'` */
.site-footer-logo { display: block; height: 56px; width: auto; }
.site-footer-logo-dark { display: none; }
:root[data-theme="dark"] .site-footer-logo-light { display: none; }
:root[data-theme="dark"] .site-footer-logo-dark { display: block; }
@media (max-width: 640px) {
  .site-footer-logo { height: 47px; }
}

/* ── صفّ الروابط ──
   ⚠️ الفواصل بـ`::after` لا بمحارف في HTML: محرفُ فاصلٍ مكتوب
   ينطقه قارئ الشاشة بين كل رابطين، ويبقى ظاهرًا في آخر السطر بعد
   الالتفاف. و`::after` زخرفةٌ لا تُنطَق ولا تُنسَخ. */
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.site-footer-links a {
  color: var(--footer-muted, var(--text-muted));
  text-decoration: none;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-sm);
  /* ٤٤ بكسل: روابط الفوتر أصغر ما يُلمس في الصفحة، وتزاحمُها
     على الجوال يجعل الخصوصية تُصاب بدل الشروط */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.site-footer-links a:hover { color: var(--primary); text-decoration: underline; }
.site-footer-links a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.site-footer-links a + a::before {
  content: "·";
  margin-inline-end: var(--space-2);
  color: var(--footer-border, var(--border));
}

/* ── سطرا الحقوق والتصريح ── */
.site-footer-meta {
  font-size: 15px;
  color: var(--footer-muted, var(--text-muted));
}
.site-footer-meta a { color: var(--footer-muted, var(--text-muted)); text-decoration: none; }
.site-footer-meta a:hover { color: var(--primary); text-decoration: underline; }

.site-footer-legal {
  font-size: 15px;
  line-height: 1.8;
  color: var(--footer-muted, var(--text-muted));
  border-top: 1px solid var(--footer-border, var(--border));
  padding-top: var(--space-3);
  max-width: 92ch;
}

/* ══ الجوال أولًا في القرار لا في الترتيب ══
   جمهور المنصة على الجوال، فالمقاسات أعلاه مضبوطة له والحاسوب
   يرث سعتها. وهنا يُضيَّق ما يجب أن يضيق وحده. */
@media (max-width: 560px) {
  .site-footer { font-size: 15px; }
  .site-footer-inner { padding-block: var(--space-4); gap: var(--space-2); }
  .site-footer-links { gap: 0 var(--space-1); }
  .site-footer-links a { font-size: 15px; padding-inline: var(--space-1); }
  .site-footer-legal { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════
   الجوال

   ⚠️ **الشريط `sticky` لا `fixed`**: يشغل مساحته في تدفّق الصفحة
   ولا يحتاج `padding-top` تعويضيًّا على `<body>` — وذاك التعويض هو
   ما ينكسر حين يتغيّر الارتفاع (مسار طويل يلتفّ سطرين).
   ══════════════════════════════════════════════════════════════ */

/* تُطوى الروابطُ في القائمة تحت ١٢٠٠ كما في حزمة التصميم (§١٢ · `landing-header-fits-narrow-desktop`).
   📛 كان الحدُّ ١٠٨٠ — 🔎 `git show 1e32a70:client/shared/styles/chrome.css | sed -n '494p'` */
@media (max-width: 1199.98px) {
  .site-nav { display: none; }
  .site-menu-btn { display: inline-flex; }

  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    background: var(--surface-raised, var(--surface));
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4) clamp(16px, 4vw, 32px) var(--space-5);
    gap: var(--space-1);
  }
  .site-nav.is-open a { padding: var(--space-3); font-size: 17px; border-radius: var(--radius-sm); }
  .site-nav.is-open a:hover { background: var(--primary-light); }
  .site-nav.is-open a[aria-current="page"]::after { inset-inline: var(--space-3) auto; width: 28px; }
}

@media (max-width: 640px) {
  /* ⚠️ ٤٨ لا ٥٨: الجوال هو الجمهور، والشريط عليه إطارٌ لا محتوى.
     و٤٨ أدنى ما يسع زرًّا بمساحة لمسٍ ٤٤ بكسل وحدَّين رفيعين —
     والنزول دونه يجعل الأزرار غير قابلة للإصابة بالإبهام. */
  .site-header-inner { gap: var(--space-2); min-height: 48px; }

  /* الشعارُ بمقاس رمز الجوّال في الحزمة (٤٠ بكسل ⇒ الملفّ ٤٧) */
  .site-brand-logo { height: 47px; }

  /* ── زرُّ الدخول بجانب «ابدأ الآن» على كلّ الهواتف (م-٣٠٧) ──
     `mobile-home-login-button` و`mobile-login-wide-screens-only-declined`: لا يُخفى زرُّ الدخول على
     الجوّال. والشريطُ لا يتّسع له بخطّ ١٩ ولو ضاقت المسافات، فخطُّ الزرّين ١٦ بالقرار
     `mobile-header-buttons-font-min-15` — بكسلٌ دون أكبر خطٍّ يزول معه الفيض، ليبقى في الشريط فراغٌ احتياطيّ
     (١٩ ⇒ فيضٌ 6 على 360 · ١٨ ⇒ زرُّ القائمة يأكل من حاشية الشريط 5 · ١٧ ⇒ صفرُ فيضٍ والفراغُ 0 على 390 و3 على 360 ·
     ١٦ ⇒ الفراغُ 7 على 390 و10 على 360 — والفراغُ عرضُ `.site-header-spacer` بـ`check:header-nav`).
     والسطرُ بخطّ الشريط الأصليّ (`--fs-btn` مضروبًا في سطر `.btn` في `marketing.css`) فلا يتغيّر ارتفاعُ الزرّين.
     والمسافاتُ أوسعُ ما يُبقي الفيضَ صفرًا: من الأرضيّة (حاشيةٌ 6 · فجوتان 2 · حشوُ الزرّين 4) بخطواتٍ
     موحّدة بكسلًا لكلّ مسافة — ثلاثٌ هنا على 390، وصفرٌ تحت 390. والنطاقُ شريطٌ ظاهرٌ زرّاه وحده، فلا يمسّ
     شريطَ المسجَّل. 📛 كان هنا `.site-header-cta .btn-ghost { display: none; }` —
     🔎 git show 0f5f2df:client/shared/styles/chrome.css | sed -n '575p'
     📛 وكان «فخطُّ الزرّين ١٧ … أكبرُ خطٍّ يزول معه الفيض» —
     🔎 git show 42249e7:client/shared/styles/chrome.css | sed -n '578,580p' */
  .site-header:has(.site-header-cta:not([hidden])) .site-header-inner { padding-inline: 9px; gap: 5px; }
  .site-header-cta { gap: 5px; }
  .site-header .site-header-cta .btn { font-size: 16px; line-height: calc(var(--fs-btn) * 1.4); padding-inline: 7px; }

  .appnav-section { max-width: 45vw; font-size: 14px; }

  /* «حسابي» تختصر إلى الأيقونة وحدها — و`aria-label` على الزر
     يُبقيها مسمّاة لقارئ الشاشة */
  .appnav-account-label,
  .appnav-caret { display: none; }
  .appnav-account-btn { padding-inline: var(--space-2); }

  .appnav-trail-inner { font-size: 12.5px; padding-block: var(--space-1); }

  /* زرُّ الوضع في الجوّال ٤٤ بكسل كما في حزمة التصميم */
  .theme-toggle { width: 44px; height: 44px; }
}

/* تحت 390 الأرضيّةُ وحدها: على 360 يبقى 10 بكسلات بخطّ ١٦ (و3 بخطّ ١٧)، والخطوةُ تحتاج 11 (م-٣٠٧) */
@media (max-width: 389.98px) {
  .site-header:has(.site-header-cta:not([hidden])) .site-header-inner { padding-inline: 6px; gap: 2px; }
  .site-header-cta { gap: 2px; }
  .site-header .site-header-cta .btn { padding-inline: 4px; }
}

/* ══════════════════════════════════════════════════════════════
   `[hidden]` — القاعدة الدفاعيّة، **وموضعُها هنا قرارٌ لا ترتيب**

   العقد: `hidden` تعني «مخفيّ» دائمًا، بلا استثناء يتفوّق عليه
   مكوّنٌ بعينه. و`!important` متعمَّدة لذلك.

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

   ⇒ فوقعت العلّة: `landing.js:369` يضبط
   `#auth-birthdate-field.hidden = true` **والإسنادُ يصحّ**، ثمّ
   يغلبه `.field { display: grid }` في `marketing.css` — فحقلُ
   تاريخ الميلاد مرسومٌ ٣٧٤×١٠٥ بكسل تحت تبويب «تسجيل الدخول»،
   ومقياسُ قوّةِ كلمةٍ **جديدة** معروضٌ لمن يُدخل كلمتَه القائمة.
   وهذا الملفّ هو الورقةُ الوحيدة التي تحمّلها **كلُّ** صفحة —
   وقد بُني لذلك (انظر ترويسته).

   ── ولماذا عامّةً لا لعناصرَ بأعيانها ──
   كانت هنا في صورتها الفرديّة (`.site-nav[hidden]` و
   `.site-header-cta[hidden]`) **ولم تمنع الحادثة**: كلُّ عنصرٍ
   جديد يُعلن `display` يفتح الثغرة من جديد، والقائمةُ تتقادم بلا
   أن ينتبه أحد. والصنفان مشمولان بالعامّة فلا يحتاجان سطرًا.

   ويفرضه `npm run check:hidden` — بالقياس في المتصفّح لا بقراءة
   الورقة: صفحةٌ تُضاف غدًا بسلسلةٍ ثالثة تُعيد العلّة بحرفها.
   ══════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   `.sr-only` — إخفاءٌ بصريّ يُبقي النصَّ لقارئ الشاشة (م-٢٣٦)

   العلّةُ نفسُها التي رفعت `[hidden]` إلى هذا الملفّ (`ق-١٣`):
   كان التعريفُ في `marketing.css` وحدها، وصفحةُ القسم تستعمل الصنفَ
   في وسمَي حقلِ الملاحظة وحقلِ بحث القاموس **ولا تحمّل تلك الورقة**
   — فيُرسَم الوسمان نصًّا عاديًّا بلا خطأٍ يُرمى. وهذا الملفّ هو
   الورقةُ الوحيدة التي تحمّلها كلُّ صفحة، فالتعريفُ هنا **مرّةً
   واحدة** لا نسخةً ثانية تنحرف.
   ══════════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* حقلُ تاريخ الميلاد — حقلٌ واحد بأيقونة تقويم (قرار المالك
   `birthdate-calendar-picker-replaces-boxes`). الأيقونةُ من مجموعة
   المنصّة فوق طرف الحقل بعرض مساحة اللمس، ولمسُها يفتح المنتقي
   (`shared/scripts/birthDate.js`)؛ وأيقونةُ المتصفّح الأصليّة تُخفى
   داخل الحاوية وحدها فلا تُرسم أيقونتان. والحاويةُ `dir="ltr"` كالحقل،
   فطرفُ الأيقونة وحشوُ الحقل على جهةٍ واحدة. وهنا لا في ورقة صفحةٍ
   للعلّة نفسِها أعلاه: الحقلُ في خمسة مواضع على أربع صفحات. وحقلُ موعد
   الاختبار في إعداد الخطّة يلبس الحاويةَ نفسَها (قرار المالك
   `exam-date-calendar-picker`). */
.date-field {
  position: relative;
}
.date-field .input {
  width: 100%;
  padding-inline-end: 44px;
  cursor: pointer;
}
.date-field .input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}
.date-field-icon {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
}