/* =====================================================================
   ثيم الورشة — Workshop Theme (RTL-first)
   مستنسخ من صفحة دليل claudecodeclub.ai ومكيَّف للعربية.
   بادئة كل الكلاسات: .ws-
   الأصل: Tailwind + inline styles. هنا: متغيرات + كلاسات صريحة.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Changa:wght@600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');

/* ---------- 1. Tokens ---------- */
:root {
  /* الألوان */
  --ws-bg: #F4E7CE;          /* الكريمي: خلفية الصفحة والهيدر وبوابة الإيميل */
  --ws-paper: #FFFFFF;       /* البطاقات والمدخلات */
  --ws-ink: #1A1410;         /* الحبر: النص والحدود والظلال والنوافذ الداكنة */
  --ws-ink-80: rgba(26, 20, 16, 0.816);  /* نص الفقرات */
  --ws-ink-75: rgba(26, 20, 16, 0.753);  /* نص ثانوي، روابط الفهرس */
  --ws-ink-33: rgba(26, 20, 16, 0.333);  /* فواصل سطر الميتا */
  --ws-ink-13: rgba(26, 20, 16, 0.133);  /* خط فاصل رفيع */
  --ws-yellow: #F5C518;      /* الأزرار الرئيسية، القفل، شريط التنبيه */
  --ws-yellow-2: #E8B23A;    /* درجة أغمق (اختياري للتدرج) */
  --ws-orange: #F87505;      /* عناوين التنبيه، أرقام الخطوات، عنوان البوابة والدعوة */
  --ws-orange-deep: #E04E0D; /* عناوين H2، التعليقات، النقاط، الميتا، الروابط */
  --ws-cream-text: #F4E7CE;  /* النص فوق الخلفيات الداكنة */
  --ws-cream-69: rgba(244, 231, 206, 0.69);
  --ws-cream-25: rgba(244, 231, 206, 0.25);
  --ws-cream-06: rgba(244, 231, 206, 0.06);

  /* الخطوط */
  --ws-font-display-ar: 'Changa', 'Noto Kufi Arabic', sans-serif;      /* عناوين عربية */
  --ws-font-display-en: 'Archivo Black', 'Space Grotesk', sans-serif;  /* عناوين لاتينية */
  --ws-font-body-ar: 'IBM Plex Sans Arabic', 'IBM Plex Mono', system-ui, sans-serif;
  --ws-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ws-font-num: 'Space Grotesk', 'IBM Plex Mono', sans-serif;

  /* الحدود والظلال (بلا تدوير إطلاقاً) */
  --ws-radius: 0px;
  --ws-border: 2.5px;
  --ws-border-thin: 2px;
  --ws-shadow-3: 3px 3px 0 var(--ws-ink);
  --ws-shadow-4: 4px 4px 0 var(--ws-ink);
  --ws-shadow-5: 5px 5px 0 var(--ws-ink);
  --ws-shadow-6: 6px 6px 0 var(--ws-ink);

  /* المقاسات */
  --ws-h1: 48px;
  --ws-h2: 30px;
  --ws-h3: 20px;
  --ws-body: 15px;         /* الأصل 14px مونو — العربية تحتاج نقطة إضافية */
  --ws-small: 13px;
  --ws-label: 11px;
  --ws-micro: 10px;
  --ws-code: 12.5px;
  --ws-leading: 1.75;

  /* التخطيط */
  --ws-max: 1152px;
  --ws-content-max: 820px;
  --ws-toc-w: 256px;
  --ws-gap: 32px;
  --ws-header-h: 112px;    /* مسافة فوق المحتوى تحت الهيدر الثابت */
  --ws-header-radius: 9999px; /* الاستثناء الوحيد للتدوير: كبسولة الهيدر كما في الأصل */
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.ws, .ws-body {
  margin: 0;
  background: var(--ws-bg);
  color: var(--ws-ink);
  font-family: var(--ws-font-body-ar);
  font-size: var(--ws-body);
  line-height: var(--ws-leading);
  direction: rtl;
  text-align: start;
  -webkit-font-smoothing: antialiased;
}
.ws img, .ws video { max-width: 100%; height: auto; display: block; }
.ws a { color: var(--ws-orange-deep); text-decoration: none; }
.ws a:hover { text-decoration: underline; }
.ws p { margin: 0 0 1.1em; color: var(--ws-ink-80); }
.ws strong { color: var(--ws-ink); font-weight: 700; }
.ws hr { border: 0; height: 1px; background: var(--ws-ink-13); margin: 32px 0; }

/* اللاتيني داخل النص العربي: دائماً LTR ومونو */
.ws [dir="ltr"], .ws .ws-latin {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}
.ws code, .ws kbd, .ws .ws-path {
  font-family: var(--ws-font-mono);
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-size: 0.88em;
  background: rgba(26, 20, 16, 0.07);
  border: 0;
  padding: 1px 5px;
  line-height: 1.5;
  color: var(--ws-ink);
}
.ws code, .ws kbd, .ws .ws-path { max-width: 100%; overflow-wrap: anywhere; word-break: break-all; white-space: normal; vertical-align: baseline; }
.ws pre code { background: none; border: 0; padding: 0; display: block; font-size: inherit; color: inherit; white-space: pre-wrap; word-break: break-word; }
.ws-bullets > li > *, .ws-steps > li > *, .ws-faq summary > * { min-width: 0; }

/* الأرقام */
.ws .ws-num, .ws [data-num] {
  font-family: var(--ws-font-num);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  font-weight: 700;
}
.ws .ws-num--xl { font-size: 72px; line-height: 1; color: var(--ws-orange-deep); letter-spacing: -0.02em; }

/* نسيج النقاط الخفيف (اختياري) كما في الأصل */
.ws-grain {
  pointer-events: none; position: fixed; inset: 0; z-index: 60;
  background-image: radial-gradient(var(--ws-ink) 0.5px, transparent 0.6px);
  background-size: 3px 3px; opacity: 0.05; mix-blend-mode: multiply;
}

/* ---------- 3. Typography ---------- */
.ws h1, .ws h2, .ws h3, .ws .ws-h1, .ws .ws-h2, .ws .ws-h3 {
  font-family: var(--ws-font-display-ar);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0; /* العربية لا تتحمل tracking */
}
.ws h1, .ws .ws-h1 { font-size: var(--ws-h1); line-height: 1.18; color: var(--ws-ink); margin-top: 12px; }
.ws h2, .ws .ws-h2 { font-size: var(--ws-h2); color: var(--ws-orange-deep); margin-top: 64px; margin-bottom: 16px; scroll-margin-top: calc(var(--ws-header-h) + 8px); }
.ws h3, .ws .ws-h3 { font-size: var(--ws-h3); color: var(--ws-ink); margin-top: 32px; margin-bottom: 10px; }
.ws h2.ws-h2--ink { color: var(--ws-ink); }

/* عناوين لاتينية (إن وُجد عنوان إنجليزي كامل) */
.ws .ws-display-en {
  font-family: var(--ws-font-display-en);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  direction: ltr;
}

/* التسمية الصغيرة (eyebrow / label) */
.ws .ws-label {
  display: inline-block;
  font-family: var(--ws-font-display-ar);
  font-weight: 700;
  font-size: var(--ws-label);
  color: var(--ws-orange-deep);
  line-height: 1.4;
}
.ws .ws-label--latin {
  font-family: var(--ws-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  direction: ltr;
  unicode-bidi: isolate;
}
.ws .ws-label--orange { color: var(--ws-orange); }

/* الفقرة الافتتاحية */
.ws .ws-lead { font-size: 17px; color: var(--ws-ink); }

/* ---------- 4. Layout ---------- */
.ws-page {
  max-width: var(--ws-max);
  margin: 0 auto;
  padding: var(--ws-header-h) 24px 64px;
  display: flex;
  flex-direction: row;         /* في RTL: العنصر الأول يقع يميناً = الشريط الجانبي */
  gap: var(--ws-gap);
  align-items: flex-start;
}
.ws-main { flex: 1 1 auto; min-width: 0; max-width: var(--ws-content-max); }
.ws-section { margin: 0 0 24px; }
.ws-section > * + * { margin-top: 24px; }
.ws-stack > * + * { margin-top: 20px; }

/* ---------- 5. Header ---------- */
.ws-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 80;
  display: flex; justify-content: center;
  padding: 16px 12px 0;
  pointer-events: none;
}
.ws-header__bar {
  pointer-events: auto;
  display: flex; align-items: center; gap: 24px;
  width: fit-content; max-width: calc(100% - 24px);
  padding: 10px 20px;
  background: var(--ws-bg);
  border: var(--ws-border) solid var(--ws-ink);
  box-shadow: var(--ws-shadow-5);
  border-radius: var(--ws-header-radius);
}
.ws-header__brand { display: flex; align-items: center; gap: 10px; color: var(--ws-ink); font-family: var(--ws-font-display-ar); font-weight: 800; font-size: 18px; white-space: nowrap; }
.ws-header__brand:hover { text-decoration: none; }
.ws-header__logo {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ws-orange); border: var(--ws-border-thin) solid var(--ws-ink);
  display: grid; place-items: center; color: var(--ws-ink);
  font-family: var(--ws-font-display-en); font-size: 13px;
}
.ws-header__nav { display: flex; align-items: center; gap: 22px; }
.ws-header__nav a {
  font-family: var(--ws-font-body-ar); font-weight: 700; font-size: 12.5px;
  color: var(--ws-ink); white-space: nowrap; transition: transform .15s;
}
.ws-header__nav a:hover { transform: translateY(-2px); text-decoration: none; }
.ws-header__actions { display: flex; align-items: center; gap: 10px; }

/* ---------- 6. Buttons ---------- */
.ws-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px;
  font-family: var(--ws-font-display-ar); font-weight: 700; font-size: 13px;
  line-height: 1.2; color: var(--ws-ink);
  background: var(--ws-paper);
  border: var(--ws-border) solid var(--ws-ink);
  box-shadow: var(--ws-shadow-4);
  border-radius: var(--ws-radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ws .ws-btn, .ws a.ws-btn { color: var(--ws-ink); }          /* يتغلب على قاعدة الروابط البرتقالية */
.ws .ws-btn--dark, .ws a.ws-btn--dark { color: var(--ws-cream-text); }
.ws a.ws-header__brand { color: var(--ws-ink); }
.ws-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--ws-shadow-6); text-decoration: none; }
.ws-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ws-ink); }
.ws-btn--primary { background: var(--ws-yellow); box-shadow: var(--ws-shadow-5); }
.ws-btn--orange { background: var(--ws-orange); }
.ws-btn--ghost { background: var(--ws-paper); }
.ws-btn--dark { background: var(--ws-ink); color: var(--ws-cream-text); }
.ws-btn--sm { padding: 8px 14px; font-size: 11px; box-shadow: var(--ws-shadow-3); }
.ws-btn--sm:hover { box-shadow: var(--ws-shadow-4); }
.ws-btn--block { display: flex; width: 100%; }
.ws-btn--latin { font-family: var(--ws-font-display-en); text-transform: uppercase; letter-spacing: 0.08em; direction: ltr; }
.ws-btn .ws-arrow { display: inline-block; transition: transform .15s; }
.ws-btn:hover .ws-arrow { transform: translateX(-3px); } /* السهم في RTL يشير يساراً */
.ws-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- 7. Card ---------- */
.ws-card {
  background: var(--ws-paper);
  border: var(--ws-border) solid var(--ws-ink);
  box-shadow: var(--ws-shadow-4);
  padding: 20px;
  border-radius: var(--ws-radius);
}
.ws-card--lg { padding: 28px; box-shadow: var(--ws-shadow-6); }
.ws-card--cream { background: var(--ws-bg); }
.ws-card--dark { background: var(--ws-ink); color: var(--ws-cream-text); }
.ws-card--dark p { color: var(--ws-cream-text); }
.ws-card--dark h2, .ws-card--dark .ws-h2 { color: var(--ws-orange); margin-top: 0; }
.ws-card--center { text-align: center; }
.ws-card__title { margin: 0 0 10px; }
.ws-card > :last-child { margin-bottom: 0; }

/* TL;DR */
.ws-tldr, .ws-card--tldr {
  background: var(--ws-paper);
  border: var(--ws-border) solid var(--ws-ink);
  box-shadow: var(--ws-shadow-6);
  padding: 24px 28px;
  margin-top: 28px;
}
.ws-tldr .ws-label, .ws-card--tldr .ws-label { display: block; margin-bottom: 8px; }
.ws-tldr p, .ws-card--tldr p { color: var(--ws-ink); margin: 0; font-size: var(--ws-body); }

/* ---------- 8. Meta line ---------- */
.ws-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: 16px;
  font-family: var(--ws-font-body-ar); font-weight: 700; font-size: var(--ws-label);
  color: var(--ws-orange-deep);
}
.ws-meta > span, .ws-meta > a { display: inline-flex; align-items: center; gap: 6px; }
.ws-meta .ws-sep { color: var(--ws-ink-33); }
.ws-meta .ws-num { font-weight: 700; }

/* ---------- 9. TOC (الشريط الجانبي) ---------- */
.ws-toc {
  flex: 0 0 var(--ws-toc-w); width: var(--ws-toc-w);
  position: sticky; top: var(--ws-header-h);
  background: var(--ws-paper);
  border: var(--ws-border) solid var(--ws-ink);
  box-shadow: var(--ws-shadow-5);
  padding: 20px;
}
.ws-toc__title { display: block; margin-bottom: 12px; }
.ws-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ws-toc li { display: flex; align-items: flex-start; gap: 10px; }
.ws-toc__n {
  flex: 0 0 18px; font-family: var(--ws-font-num); font-weight: 700;
  font-size: 10px; color: var(--ws-orange-deep); margin-top: 3px;
  direction: ltr; font-variant-numeric: tabular-nums;
}
.ws-toc a { font-size: 12.5px; line-height: 1.4; color: var(--ws-ink-75); font-weight: 500; }
.ws-toc a:hover, .ws-toc a.is-active { color: var(--ws-ink); text-decoration: underline; }
.ws-toc__divider { height: 1px; background: var(--ws-ink-13); margin: 18px 0; }
.ws-toc__note { text-align: center; font-size: var(--ws-micro); font-weight: 700; color: var(--ws-ink); margin: 10px 0 0; }
.ws-toc .ws-btn + .ws-btn { margin-top: 14px; }

/* ---------- 10. Callout ---------- */
.ws-callout {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--ws-paper);
  border: var(--ws-border) solid var(--ws-ink);
  border-inline-start: 10px solid var(--ws-yellow); /* الشريط على جهة البداية = اليمين في RTL */
  box-shadow: var(--ws-shadow-5);
  color: var(--ws-ink);
}
.ws-callout__title { display: block; margin-bottom: 8px; color: var(--ws-orange); }
.ws-callout p { margin: 0; font-size: 14px; color: var(--ws-ink); }
.ws-callout--dark { background: var(--ws-ink); color: var(--ws-cream-text); }
.ws-callout--dark p { color: var(--ws-cream-text); }
.ws-callout--dark code { border: 0; background: rgba(244,231,206,.10); color: var(--ws-cream-text); }
.ws-callout--yellow { background: var(--ws-yellow); border-inline-start-color: var(--ws-ink); }
.ws-callout--yellow .ws-callout__title { color: var(--ws-ink); }

/* ---------- 11. Code window ---------- */
.ws-code {
  position: relative; margin: 16px 0;
  background: var(--ws-ink); color: var(--ws-cream-text);
  border: var(--ws-border) solid var(--ws-ink);
  box-shadow: var(--ws-shadow-6);
  direction: ltr; text-align: left;
}
.ws-code__lang {
  display: block; padding: 14px 16px 0;
  font-family: var(--ws-font-mono); font-weight: 700; font-size: 9px;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--ws-orange);
}
.ws-code pre {
  margin: 0; padding: 8px 16px 16px; padding-right: 84px;
  font-family: var(--ws-font-mono); font-size: var(--ws-code); line-height: 1.7;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto; color: var(--ws-cream-text);
}
.ws-code .ws-copy {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 6px 10px;
  font-family: var(--ws-font-display-en); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  background: var(--ws-yellow); color: var(--ws-ink);
  border: var(--ws-border) solid var(--ws-ink); box-shadow: var(--ws-shadow-3);
  cursor: pointer; transition: transform .15s;
}
.ws-code .ws-copy:hover { transform: translateY(-2px); }
.ws-code .ws-copy.is-done { background: var(--ws-orange); color: var(--ws-ink); }
/* ملاحظة عربية داخل نافذة الكود (اختياري): سطر RTL مستقل أسفل */
.ws-code__note { direction: rtl; text-align: right; padding: 0 16px 14px; font-size: 12px; color: var(--ws-cream-69); font-family: var(--ws-font-body-ar); }

/* ---------- 12. Mac window ---------- */
.ws-mac {
  margin: 24px 0;
  background: var(--ws-paper);
  border: var(--ws-border) solid var(--ws-ink);
  box-shadow: var(--ws-shadow-6);
  overflow: hidden;
}
.ws-mac__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--ws-bg);
  border-bottom: var(--ws-border-thin) solid var(--ws-ink);
  direction: ltr; /* الأزرار الثلاثة على اليسار دائماً كما في macOS */
}
.ws-mac__dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ws-ink); }
.ws-mac__dot--r { background: #FF5F56; }
.ws-mac__dot--y { background: #FFBD2E; }
.ws-mac__dot--g { background: #27C93F; }
.ws-mac__name { margin-left: 8px; font-family: var(--ws-font-mono); font-size: 12px; font-weight: 600; color: var(--ws-ink); }
.ws-mac__body { padding: 18px 20px; font-family: var(--ws-font-mono); font-size: 13px; line-height: 1.7; color: var(--ws-ink); }
.ws-mac__body[dir="ltr"] { text-align: left; white-space: pre-wrap; }
.ws-mac--dark .ws-mac__body { background: var(--ws-ink); color: var(--ws-cream-text); }
.ws-mac--dark .ws-mac__bar { background: #2A221C; border-bottom-color: var(--ws-ink); }
.ws-mac--dark .ws-mac__name { color: var(--ws-cream-text); }
.ws-mac img { width: 100%; }

/* الصورة بإطار + تعليق */
.ws-figure { margin: 24px 0; }
.ws-figure img { width: 100%; background: var(--ws-paper); border: var(--ws-border) solid var(--ws-ink); box-shadow: var(--ws-shadow-6); }
.ws-caption {
  display: block; margin-top: 10px;
  font-family: var(--ws-font-display-ar); font-weight: 700; font-size: var(--ws-label);
  color: var(--ws-orange-deep); line-height: 1.5;
}
.ws-caption--latin { font-family: var(--ws-font-mono); text-transform: uppercase; letter-spacing: 0.18em; direction: ltr; }

/* ---------- 13. Steps & bullets ---------- */
.ws-steps { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; counter-reset: ws-step; }
.ws-steps > li { display: flex; align-items: flex-start; gap: 12px; color: var(--ws-ink-80); font-size: var(--ws-body); line-height: 1.7; }
.ws-steps > li::before {
  counter-increment: ws-step; content: counter(ws-step);
  flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px;
  display: inline-grid; place-items: center;
  background: var(--ws-orange); color: var(--ws-ink);
  border: var(--ws-border-thin) solid var(--ws-ink);
  font-family: var(--ws-font-num); font-weight: 700; font-size: 11px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ws-steps > li strong { color: var(--ws-ink); }
.ws-steps--lg > li::before { width: 32px; height: 32px; flex-basis: 32px; font-size: 14px; }

.ws-bullets { list-style: none; margin: 16px 0; padding: 0 4px; display: grid; gap: 8px; }
.ws-bullets > li { display: flex; align-items: flex-start; gap: 12px; color: var(--ws-ink-80); font-size: var(--ws-body); line-height: 1.7; }
.ws-bullets > li::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; margin-top: 11px; background: var(--ws-orange-deep); }
.ws-bullets > li strong { color: var(--ws-ink); }
.ws-bullets--cream > li { color: var(--ws-cream-text); }
.ws-bullets--cream > li::before { background: var(--ws-orange); }

/* ---------- 14. Link card ---------- */
.ws-linkcard {
  display: block; margin: 12px 0; padding: 16px;
  background: var(--ws-paper); border: var(--ws-border) solid var(--ws-ink); box-shadow: var(--ws-shadow-4);
  color: var(--ws-ink); transition: transform .15s;
}
.ws-linkcard:hover { transform: translateY(-2px); text-decoration: none; }
.ws-linkcard__title {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ws-font-display-en); font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--ws-orange-deep); direction: ltr; unicode-bidi: isolate;
}
.ws-linkcard__title--ar { font-family: var(--ws-font-display-ar); font-weight: 700; text-transform: none; direction: rtl; font-size: 14px; }
.ws-linkcard__desc { margin: 6px 0 0; font-size: var(--ws-small); color: var(--ws-ink-75); }
.ws-linkcard__url { display: block; margin-top: 6px; font-family: var(--ws-font-mono); font-size: 12px; color: var(--ws-ink-75); direction: ltr; text-align: start; unicode-bidi: isolate; }

/* شبكة «تابع القراءة» */
.ws-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.ws-linkcard--grid { margin: 0; height: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.ws-linkcard--grid .ws-linkcard__body { flex: 1; }
.ws-linkcard--grid .ws-linkcard__head { font-family: var(--ws-font-display-ar); font-weight: 700; font-size: 14px; color: var(--ws-ink); line-height: 1.35; }
.ws-linkcard--grid .ws-linkcard__meta { display: block; margin-top: 4px; font-size: var(--ws-micro); font-weight: 700; color: var(--ws-orange-deep); }
.ws-linkcard--grid .ws-arrow { color: var(--ws-orange-deep); margin-top: 2px; }

/* ---------- 15. FAQ ---------- */
.ws-faq { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 12px; }
.ws-faq details { background: var(--ws-paper); border: var(--ws-border) solid var(--ws-ink); box-shadow: var(--ws-shadow-4); padding: 18px 20px; }
.ws-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--ws-font-display-ar); font-weight: 700; font-size: 14px; color: var(--ws-ink); line-height: 1.4;
}
.ws-faq summary::-webkit-details-marker { display: none; }
.ws-faq summary::after { content: "+"; font-family: var(--ws-font-mono); font-size: 18px; color: var(--ws-orange-deep); transition: transform .2s; flex: 0 0 auto; }
.ws-faq details[open] summary::after { transform: rotate(45deg); }
.ws-faq details p { margin: 12px 0 0; font-size: var(--ws-small); color: var(--ws-ink-75); }

/* ---------- 16. Gate (بوابة الإيميل) ---------- */
.ws-gate-backdrop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 14, 4, 0.72); backdrop-filter: blur(6px); }
.ws-gate {
  position: relative; width: 100%; max-width: 448px; padding: 36px;
  background: var(--ws-bg); border: var(--ws-border) solid var(--ws-ink); box-shadow: var(--ws-shadow-6);
  text-align: center;
}
.ws-gate--inline { margin: 24px auto; }
.ws-gate__lock {
  width: 48px; height: 48px; margin: 0 auto 20px; display: grid; place-items: center;
  background: var(--ws-yellow); border: var(--ws-border) solid var(--ws-ink); box-shadow: var(--ws-shadow-4); color: var(--ws-ink);
}
.ws-gate h2, .ws-gate .ws-h2 { font-size: 24px; color: var(--ws-orange); margin: 0 auto; max-width: 320px; line-height: 1.25; }
.ws-gate form { margin-top: 24px; display: grid; gap: 16px; text-align: start; }
.ws-input {
  width: 100%; padding: 12px 16px;
  font-family: var(--ws-font-mono); font-size: 14px; color: var(--ws-ink);
  background: var(--ws-paper); border: var(--ws-border) solid var(--ws-ink); box-shadow: var(--ws-shadow-4);
  outline: none; border-radius: 0; direction: ltr; text-align: left;
}
.ws-input:focus { box-shadow: var(--ws-shadow-4), 0 0 0 3px var(--ws-yellow); }
.ws-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 12.5px; color: var(--ws-ink-80); line-height: 1.5; }
.ws-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--ws-ink); flex: 0 0 16px; }

/* ---------- 17. CTA dark card ---------- */
.ws-cta {
  margin: 48px 0 0; padding: 48px 32px; text-align: center;
  background: var(--ws-ink); border: var(--ws-border) solid var(--ws-ink); box-shadow: var(--ws-shadow-6); color: var(--ws-cream-text);
}
.ws-cta h2 { color: var(--ws-orange); margin: 0 auto; max-width: 440px; }
.ws-cta p { color: var(--ws-cream-text); margin: 12px auto 0; max-width: 440px; font-size: 14px; }
.ws-cta .ws-btn { margin-top: 28px; }

/* ---------- 18. Footer ---------- */
.ws-footer { background: var(--ws-ink); border-top: 3px solid var(--ws-ink); color: var(--ws-cream-text); margin-top: 64px; }
.ws-footer__inner { max-width: var(--ws-max); margin: 0 auto; padding: 48px 24px; }
.ws-footer__news { padding: 24px 28px; background: var(--ws-cream-06); border: 2px solid var(--ws-cream-25); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.ws-footer__news h4 { margin: 0; font-family: var(--ws-font-display-ar); font-weight: 700; font-size: 14px; color: var(--ws-cream-text); }
.ws-footer__news p { margin: 6px 0 0; font-size: 12px; color: var(--ws-cream-69); }
.ws-footer__form { display: flex; gap: 8px; }
.ws-footer__form .ws-input { background: rgba(0,0,0,.35); border-color: var(--ws-cream-25); color: var(--ws-cream-text); box-shadow: none; min-width: 220px; }
.ws-footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.ws-footer__brand { font-family: var(--ws-font-display-ar); font-weight: 800; font-size: 20px; color: var(--ws-orange); }
.ws-footer__cols p { font-size: 12.5px; color: var(--ws-cream-69); }
.ws-footer__cols h5 { margin: 0 0 12px; font-family: var(--ws-font-display-ar); font-weight: 700; font-size: 11px; color: var(--ws-orange); }
.ws-footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ws-footer__cols a { font-size: 12px; font-weight: 700; color: var(--ws-cream-text); }
.ws-footer__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--ws-cream-25); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--ws-cream-69); }
.ws-footer__bottom .ws-tag { color: var(--ws-orange); font-weight: 700; }

/* ---------- 19. Misc ---------- */
.ws-pill { display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 700; background: var(--ws-paper); border: var(--ws-border-thin) solid var(--ws-ink); box-shadow: var(--ws-shadow-3); }
.ws-pill--yellow { background: var(--ws-yellow); }
.ws-pill--orange { background: var(--ws-orange); }
.ws-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: var(--ws-small); background: var(--ws-paper); border: var(--ws-border) solid var(--ws-ink); box-shadow: var(--ws-shadow-4); }
.ws-table th, .ws-table td { padding: 10px 14px; border-bottom: 1.5px solid var(--ws-ink-13); text-align: start; vertical-align: top; }
.ws-table th { font-family: var(--ws-font-display-ar); font-weight: 700; font-size: 12px; color: var(--ws-orange-deep); border-bottom: var(--ws-border-thin) solid var(--ws-ink); }
.ws-table tr:last-child td { border-bottom: 0; }
.ws-swatch { display: inline-block; width: 18px; height: 18px; border: 1.5px solid var(--ws-ink); vertical-align: middle; margin-inline-end: 8px; }
.ws-stat { display: grid; gap: 4px; padding: 20px; background: var(--ws-paper); border: var(--ws-border) solid var(--ws-ink); box-shadow: var(--ws-shadow-4); }
.ws-stat .ws-num--xl { font-size: 56px; }
.ws-stat__desc { font-size: 12.5px; font-weight: 700; color: var(--ws-ink-75); }
.ws-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.ws-eyebrow { display: block; }
.ws-note { font-size: 12.5px; color: var(--ws-ink-75); }
.ws-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 20. Responsive ---------- */
@media (max-width: 960px) {
  :root { --ws-h1: 34px; --ws-h2: 24px; --ws-header-h: 96px; }
  .ws-page { flex-direction: column; align-items: stretch; gap: 24px; padding-inline: 16px; }
  .ws-toc { order: 2; }   /* الجوال: العنوان والخلاصة أولاً، الفهرس بعد المحتوى */
  .ws-main { order: 1; }
  .ws-toc { position: static; width: 100%; flex-basis: auto; }
  .ws-toc ol { grid-template-columns: 1fr 1fr; }
  .ws-main { max-width: none; width: 100%; min-width: 0; }
  .ws-num--xl { font-size: clamp(40px, 14vw, 72px); }
  .ws-header__nav { display: none; }
  .ws-header__bar { gap: 14px; padding: 8px 14px; }
  .ws-grid-2, .ws-grid-3 { grid-template-columns: 1fr; }
  .ws-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  :root { --ws-h1: 30px; }
  .ws-toc ol { grid-template-columns: 1fr; }
  .ws-code pre { padding-right: 16px; padding-top: 44px; }
  .ws-code__lang { position: absolute; top: 14px; left: 16px; padding: 0; }
  .ws-footer__cols { grid-template-columns: 1fr; }
  .ws-gate { padding: 24px 18px; }
  .ws-num--xl, .ws-stat .ws-num--xl { font-size: 44px; }
}

/* ---------- 21. Print ---------- */
@media print {
  body.ws, .ws-body { background: #fff; color: #000; }
  .ws-header, .ws-toc, .ws-copy, .ws-gate-backdrop, .ws-cta, .ws-footer, .ws-grain, .ws-btn { display: none !important; }
  .ws-page { display: block; padding: 0; max-width: none; }
  .ws-main { max-width: none; }
  .ws-card, .ws-callout, .ws-code, .ws-mac, .ws-linkcard, .ws-figure img, .ws-faq details, .ws-table, .ws-stat { box-shadow: none !important; break-inside: avoid; }
  .ws-callout--dark, .ws-code, .ws-card--dark, .ws-mac--dark .ws-mac__body { background: #fff !important; color: #000 !important; border-color: #000 !important; }
  .ws-callout--dark p, .ws-code pre, .ws-card--dark p { color: #000 !important; }
  .ws h2 { break-after: avoid; }
  .ws a[href^="http"]::after { content: " (" attr(href) ")"; font-family: var(--ws-font-mono); font-size: 10px; direction: ltr; unicode-bidi: isolate; }
}