/* tokens.css fingerprint: 1019278ce2dd — regenerate by copying opti_soul/docs/tokens.css */

/* =====================================================================
   Opti Soul — أنماط الموقع.
   الألوان تأتي الآن من assets/tokens.css (يُستورد قبل هذا الملف على كل
   صفحة) — لا تعريف لوني محلي هنا (AMEND — Session 37: كان لهذا الملف
   لوحة ألوان يدوية خاصة به مقيسة من app_theme.dart؛ حُذفت واستُبدل كل
   مستهلك بدور tokens.css المناظر، والأكسنت #00FFCC وحدّ #7C93E8 تقاعدا
   نهائيًا لصالح كتلة أحادية اللون. التفاصيل الكاملة في تقرير الجلسة).
   المسافات ونصف القطر والحركة والخط تبقى مِلك هذا الموقع، غير مرتبطة
   بـtokens.css (خارج نطاق تلك الدفعة).
   ===================================================================== */

:root {
  /* المسافات — AppSpacing (app_theme.dart:667-679) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* أنصاف الأقطار — AppRadii (app_theme.dart:701-716) — فقط ما يُستهلك فعليًا */
  --r-card: 16px;
  --r-button: 12px;

  /* الظل — AppShadows.floating (app_theme.dart:737-747): Color(0x59000000) */
  --shadow-floating: 0 4px 12px rgba(0, 0, 0, 0.35);

  /* الحركة — AppMotion (app_theme.dart:722-735) */
  --motion-fast: 200ms;
  --motion-medium: 300ms;
  --motion-curve: cubic-bezier(0.215, 0.61, 0.355, 1); /* تقريب لـ easeOutCubic */

  /* الخط — pubspec.yaml: IBMPlexSansArabic (400 · 600 · 700 فقط)، مستضاف محليًا */
  --font-family: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Tahoma, Arial, sans-serif;

  /* الهوية — الأزرق الأصلي #3850A0 محصور حرفيًّا بمكانين على كامل الموقع:
     علامة الماركة (.brand-mark) ووسم الاسم في الترويسة (.brand) — لا شيء
     غيرهما يستهلك هذا المتغيّر (لا أزرار، لا روابط، لا عناوين، لا تركيز).
     كل ما عداه أحادي اللون عبر أدوار tokens.css. */
  --brand: #3850A0;
}

/* ---------- الخط المستضاف محليًا (assets/fonts/) — لا طلب خارجي ----------
   woff2 هو الصيغة الوحيدة المستضافة الآن (Session 37: حُذف fallback الـttf
   بعد التأكد أن كل المتصفحات المستهدفة تدعم woff2). */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* الطباعة العربية — القيم مقيسة قبل التغيير: line-height:1.6 (نص)، 1.35/1.45
   (h1/h2)، font-size:16px، بلا letter-spacing وبلا text-align صريح. القيم
   الجديدة أدناه: 1.7 للنص الجاري (تباين رأسي أوسع للمحارف العربية، يمنع
   قصّ النزول والتشكيل الذي يسبّبه ارتفاع سطر محسوب للاتينية)، 1.3 للعناوين،
   letter-spacing:0 صريح (الحروف متصلة، أي تباعد يكسر الاتصال)، text-align:
   start صريح (يورَّث لكل عنصر ابن، صفر استخدام لـ right). */
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-family);
  font-weight: 400;
  line-height: 1.7;
  font-size: 16px;
  letter-spacing: 0;
  text-align: start;
  min-width: 320px;
}

@media (max-width: 640px) {
  body { font-size: 17px; } /* حدّ أدنى 17px على الجوال — العربية تبدو أصغر بصريًا عند نفس الحجم الاسمي للاتينية */
}

h1, h2, h3, .brand, .btn, label, button { font-family: var(--font-family); line-height: 1.3; }

/* ---------- تخطَّ إلى المحتوى ---------- */
.skip-link {
  position: absolute;
  inset-inline-start: var(--s3);
  inset-block-start: -100px;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-button);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  z-index: 100;
  transition: inset-block-start var(--motion-fast) var(--motion-curve);
}

.skip-link:focus { inset-block-start: var(--s3); }

/* ---------- حالة التركيز ---------- — سماكة حدّ لا لون خاص (tokens.css
   :focus-visible، مستوردة قبل هذا الملف): لا قاعدة محلية إضافية هنا، كي لا
   تُعيد تعريف outline-color بلون أكسنت متقاعد. */

/* ---------- الترويسة والتنقّل ---------- */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding-block: var(--s3);
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
}

.bar {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: var(--s5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 20px; /* titleLarge */
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  flex: none;
}

.brand-mark {
  /* SVG متجه مُستخرَج بـpotrace من ألفا-قناع الشعار النقطي الأصلي (لم يعد
     محفوظًا في المستودع — انظر decision 7)، حجم أصغر بـ94% (8.3KB مقابل
     144.7KB)، وحادّ في أي دقّة شاشة لأنه متجهي
     لا نقطي — يحلّ سؤال الحدّة على 2x/3x نهائيًا. الأزرق --brand هو أحد
     مكانين وحيدين على كامل الموقع يُسمح لهما باستهلاك لون الهوية. */
  inline-size: 28px;
  block-size: 28px;
  background-color: var(--brand);
  -webkit-mask-image: url("brand/opti-soul-mark.svg");
  mask-image: url("brand/opti-soul-mark.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex: none;
}

.brand-name { direction: ltr; unicode-bidi: isolate; }

/* القائمة المنسدلة للجوال — details/summary أصيل، يعمل بلا JS: الحالة
   المفتوحة/المغلقة سمة HTML حقيقية (open)، لا صنف يديره JS. summary هو
   الابن الأول إلزاميًا (شرط المتصفح ليعمل كمشغّل)، فانتقل زر الهامبرغر
   في DOM إلى ما بعد .header-actions؛ رُتِّب بصريًا بـorder على سطح المكتب
   فقط ليعود بين الشعار والإجراءات كما كان (انظر ترتيب @media(min-width:641px)
   أدناه). */
.nav-disclosure { margin: 0; }

.nav-disclosure summary.nav-toggle { list-style: none; }
.nav-disclosure summary.nav-toggle::-webkit-details-marker { display: none; }
.nav-disclosure summary.nav-toggle::marker { content: ""; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex: 1;
  justify-content: center;
}

.site-nav a {
  color: var(--muted-foreground);
  text-decoration: none;
  font-size: 14px; /* labelMedium */
  font-weight: 400;
  padding-block: var(--s1);
  border-block-end: 2px solid transparent;
  transition: color var(--motion-fast) var(--motion-curve),
    border-color var(--motion-fast) var(--motion-curve);
}

.site-nav a:hover,
.site-nav a:focus-visible { color: var(--foreground); }
.site-nav a:hover { border-block-end-color: var(--border); }

.header-actions { display: flex; align-items: center; gap: var(--s3); flex: none; }

.lang-toggle {
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: var(--r-button);
  padding-block: var(--s2);
  padding-inline: var(--s4);
  font: inherit;
  font-size: 13px; /* labelMedium */
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--motion-fast) var(--motion-curve);
}

.lang-toggle:hover { opacity: .75; }

/* زر القائمة (الجوال) — hamburger بلا مكتبة */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--s1);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-button);
  inline-size: 44px;
  block-size: 44px;
  cursor: pointer;
  flex: none;
}

.nav-toggle .bar-line {
  display: block;
  inline-size: 18px;
  block-size: 2px;
  background: var(--foreground);
  border-radius: 1px;
  transition: transform var(--motion-fast) var(--motion-curve),
    opacity var(--motion-fast) var(--motion-curve);
}

/* تحويل الهامبرغر إلى X — مرتبط بسمة [open] الأصيلة (يعمل بلا JS)، وأيضًا
   بـaria-expanded إن ضبطها JS كطبقة دفاع إضافية (اتفاق الحالتين لا يضرّ). */
.nav-disclosure[open] > summary.nav-toggle .bar-line:nth-child(1),
.nav-toggle[aria-expanded="true"] .bar-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-disclosure[open] > summary.nav-toggle .bar-line:nth-child(2),
.nav-toggle[aria-expanded="true"] .bar-line:nth-child(2) { opacity: 0; }
.nav-disclosure[open] > summary.nav-toggle .bar-line:nth-child(3),
.nav-toggle[aria-expanded="true"] .bar-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- التخطيط ---------- */
main { max-width: 1040px; margin-inline: auto; padding-inline: var(--s5); }
.content-narrow { max-width: 860px; margin-inline: auto; padding-inline: var(--s5); }

/* ارتفاع الترويسة الثابتة — محسوب من صندوقها الفعلي وليس رقمًا عشوائيًا:
   padding-block(s3=12px)×2 = 24px + أطول عنصر داخلي (نفس ارتفاع .nav-toggle
   بعد رفعه إلى 44px لهدف اللمس — أطول من brand-mark 28px) = 44px + حد سفلي
   1px = 69px. زائدًا مسافة تنفّس s4=16px قبل عنوان القسم = 85px. */
:root { --header-block-size: 69px; }

section {
  scroll-margin-block-start: calc(var(--header-block-size) + var(--s4)); /* 85px — يعوّض الترويسة الثابتة عند التنقّل الداخلي (نقر أو Tab+Enter، كلاهما يُفعّل نفس رابط التجزئة) */
}

/* إيقاع رأسي بين الأقسام الرئيسية — s6×2=64px مشتقة من AppSpacing (لا رقم
   عشوائي)، يفصل «الوحدات الست» عن «كيف يعمل» عن «الأسئلة» فصلًا واضحًا.
   تتضامّ (collapse) مع الهامش السفلي للعنصر السابق (.trust-bar/.card) فتبقى
   64px نهائيًا لا 64+سابق. */
#modules, #how, #faq { margin-block-start: calc(var(--s6) * 2); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s5);
  margin-block-end: var(--s4);
}

h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 var(--s1);
}

h2 {
  font-size: 19px;
  font-weight: 600;
  color: var(--foreground);
  margin: var(--s6) 0 var(--s3);
  padding-block-start: var(--s5);
  border-block-start: 1px solid var(--border);
}

.card > h2:first-of-type,
section > h2:first-child { border-block-start: 0; padding-block-start: 0; margin-block-start: var(--s5); }

h3 { font-size: 16px; font-weight: 600; margin: var(--s5) 0 var(--s2); color: var(--foreground); }

/* عرض أقصى للنص الجاري (~68ch) لمنع فقد العين موضعها عند سطر طويل يمتد
   بعرض الشاشة كاملة. ch مبنية على عرض محرف "0" في اللاتينية وليست مقياسًا
   دقيقًا للعربية، لكنها الأداة الوحيدة المتاحة بـCSS خام؛ رُوجعت بصريًا. */
p { margin: 0 0 var(--s3); color: var(--foreground); max-width: 68ch; }

ul { margin: 0 0 var(--s3); padding-inline-start: var(--s5); max-width: 68ch; }
li { margin-block-end: var(--s2); }

.meta { color: var(--muted-foreground); font-size: 13px; margin: 0 0 var(--s1); }

a { color: var(--foreground); }

strong { font-weight: 600; color: var(--foreground); }

.ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- الأزرار ---------- */
.btn {
  display: inline-block;
  border-radius: var(--r-button);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px; /* labelLarge */
  padding-block: var(--s3);
  padding-inline: var(--s5);
  transition: opacity var(--motion-fast) var(--motion-curve);
}

/* ---------- شريط الثقة ---------- */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  margin-block-end: var(--s5);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--muted-foreground);
  font-size: 14px;
}

.trust-item .check-icon { inline-size: 18px; block-size: 18px; color: var(--success); flex: none; }
.trust-item .check-icon svg { display: block; inline-size: 100%; block-size: 100%; }

/* ---------- تبويبات الوحدات — نمط WAI-ARIA Tabs ---------- */
.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block-end: var(--s4);
  border-block-end: 1px solid var(--border);
  padding-block-end: var(--s3);
}

[role="tab"] {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  border-radius: var(--r-button);
  padding-block: var(--s2);
  padding-inline: var(--s4);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  transition: background-color var(--motion-fast) var(--motion-curve),
    color var(--motion-fast) var(--motion-curve),
    border-color var(--motion-fast) var(--motion-curve);
}

[role="tab"] svg { inline-size: 18px; block-size: 18px; flex: none; }

[role="tab"][aria-selected="true"] {
  /* خلفية + حد + وزن خط أثقل معًا — لا تمييز على إشارة واحدة (ضعاف البصر /
     إضاءة قوية). كتلة أحادية (--muted/--foreground) بدل الأكسنت المتقاعد
     #00FFCC — لا صبغة هوية على التنقّل. */
  background: var(--muted);
  border-color: var(--foreground);
  color: var(--foreground);
  font-weight: 700;
}

[role="tab"]:hover { color: var(--foreground); border-color: var(--border); }

[role="tabpanel"] {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s5);
  margin-block-end: var(--s3);
}

[role="tabpanel"] h3 { margin-block-start: 0; }
[role="tabpanel"] ul { padding-inline-start: var(--s5); margin-block-end: 0; }

/* ---------- بطاقات الوحدات (تُستهلَك داخل كل لوح تبويب) ---------- */
.modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-block-end: var(--s5); }

.module {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: border-color var(--motion-fast) var(--motion-curve),
    transform var(--motion-fast) var(--motion-curve);
}

.module:hover { border-color: var(--border); transform: translateY(-2px); }

.module-icon { inline-size: 28px; block-size: 28px; color: var(--foreground); flex: none; }
.module-icon svg { display: block; inline-size: 100%; block-size: 100%; }
.module strong { font-size: 15px; font-weight: 600; color: var(--foreground); }
.module span { font-size: 13px; color: var(--muted-foreground); line-height: 1.7; }

/* ---------- كيف يعمل — خطوات مرقّمة ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-block-end: var(--s5);
}

.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s5);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-weight: 700;
  font-size: 15px;
  margin-block-end: var(--s3);
}

.step h3 { margin-block-start: 0; }
.step p { color: var(--muted-foreground); font-size: 14px; margin-block-end: 0; }

/* ---------- الأسئلة الشائعة — details/summary أصيلة ---------- */
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  margin-block-end: var(--s3);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s4) var(--s5);
  font-weight: 600;
  color: var(--foreground);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-caret {
  inline-size: 18px;
  block-size: 18px;
  color: var(--muted-foreground);
  flex: none;
  transition: transform var(--motion-fast) var(--motion-curve);
}

.faq-item[open] .faq-caret { transform: rotate(180deg); }

.faq-item p {
  padding: 0 var(--s5) var(--s4);
  color: var(--muted-foreground);
  margin: 0;
}

/* ---------- بطاقات الروابط (الدعم / الخصوصية) ---------- */
.tiles { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }

.tile {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s4);
  text-decoration: none;
  color: var(--foreground);
  transition: border-color var(--motion-fast) var(--motion-curve),
    transform var(--motion-fast) var(--motion-curve);
}

.tile:hover { border-color: var(--border); transform: translateY(-2px); }
.tile strong { display: block; color: var(--foreground); font-size: 16px; margin-block-end: var(--s1); }
.tile span { color: var(--muted-foreground); font-size: 13px; }

/* ---------- ظهور تدريجي عند التمرير ----------
   الافتراض: مرئي (opacity:1) بلا أي شرط — هذا ما يراه أي زائر/زاحف لا
   ينفّذ JS. الإخفاء نفسه مشروط بـhtml.js (يضيفها سكربت مضمَّن صغير في
   <head> كل صفحة، قبل هذا الملف، لا داخل nav.js) — فلا يُخفى شيء إلا وقد
   ثبت أن JS يعمل فعلًا. هذا يغطي الحالات الثلاث بقاعدة واحدة: بلا JS
   (html.js غائبة، لا إخفاء) · JS يعمل (nav.js يُظهر عبر IntersectionObserver)
   · JS يعمل لكن nav.js فشل تحميله (شبكة أمان setTimeout في السكربت
   المضمَّن نفسه يُظهر كل شيء بعد 1.5 ثانية إن لم يظهر بالفعل). سكربت
   الوضع الداكن (تفضيل النظام) مستقل تمامًا عن هذه الآلية ولا يتعارض معها
   — كلاهما يضيف صنفًا على <html> (js/dark) دون أن يقرأ أحدهما الآخر. */
.reveal {
  opacity: 1;
  transform: none;
}

html.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--motion-medium) var(--motion-curve),
    transform var(--motion-medium) var(--motion-curve);
}

html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal, .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- التذييل ---------- */
footer {
  max-width: 1040px;
  margin-inline: auto;
  padding: var(--s6) var(--s5) var(--s6);
  color: var(--muted-foreground);
  font-size: 13px;
  border-block-start: 1px solid var(--border);
  margin-block-start: var(--s5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s4);
}

.footer-col strong { display: block; color: var(--foreground); margin-block-end: var(--s2); font-size: 14px; }
.footer-col a { display: block; color: var(--muted-foreground); text-decoration: none; margin-block-end: var(--s1); }
.footer-col a:hover { color: var(--foreground); }
.footer-email { direction: ltr; unicode-bidi: isolate; }
.footer-copy { flex-basis: 100%; padding-block-start: var(--s4); border-block-start: 1px solid var(--border); margin-block-start: var(--s2); direction: ltr; unicode-bidi: isolate; text-align: end; }

[hidden] { display: none !important; }

/* ---------- استجابة: جوال أولًا ← لوحي ← سطح مكتب ---------- */
@media (max-width: 640px) {
  .bar { padding-inline: var(--s4); }
  main, .content-narrow { padding-inline: var(--s4); }
  footer { padding-inline: var(--s4); flex-direction: column; }
  .footer-copy { text-align: start; }
  .card { padding: var(--s4); }
  h1 { font-size: 22px; }
  .modules { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }

  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: var(--card);
    border-block-end: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s3) var(--s4);
    box-shadow: var(--shadow-floating);
  }

  /* الإظهار مربوط بسمة [open] الأصيلة لعنصر details — لا صنف JS. الابن
     المباشر > يمنع تطابق روابط أخرى بالخطأ. */
  .nav-disclosure[open] > .site-nav { display: flex; }
  .site-nav a { padding-block: var(--s3); border-block-end: 1px solid var(--border); }
  .site-nav a:last-child { border-block-end: 0; }

  .nav-toggle { display: flex; }

  /* أهداف اللمس — WCAG 2.5.8: أي عنصر تفاعلي دون 44×44px يُرفَع بـ
     min-block-size/min-inline-size (لا بزيادة حجم الخط) على الجوال فقط. */
  .lang-toggle,
  [role="tab"] {
    min-block-size: 44px;
    min-inline-size: 44px;
  }

  .site-nav a,
  .footer-col a {
    min-block-size: 44px;
    display: flex;
    align-items: center;
  }
}

@media (min-width: 641px) {
  /* سطح المكتب: القائمة مفتوحة دائمًا (سمة open ثابتة في HTML)، summary
     مخفي بقاعدة .nav-toggle{display:none} الافتراضية أعلاه، فلا يبقى من
     details سوى .site-nav. display:contents يزيل صندوق details نفسه من
     التخطيط فيتصرّف .site-nav كعنصر flex مباشر في .bar (يستعيد flex:1 +
     justify-content:center كما كان قبل التبويبات إلى details)، وorder
     يعيد الترتيب البصري: الشعار ← الوحدات ← إجراءات الترويسة، رغم أن
     details يقع بعد .header-actions في DOM (تطلّبه كون summary ابنًا أول
     إلزاميًا). */
  .brand { order: 1; }
  .nav-disclosure { order: 2; display: contents; }
  .header-actions { order: 3; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .modules { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
}

@media (min-width: 901px) {
  .modules { grid-template-columns: repeat(3, 1fr); }
}