/* ============================================================
   base.css — أكاديمية البنية المؤسسية · هوية إيجاد التقنية

   دمج الاتجاهين المختارين:
     أ · لوحة تطبيق   — شريط جانبي داكن ثابت بلون العلامة، حلقة تقدّم،
                        تنقّل حاضر دائماً، وشريط علوي فاتح فيه الفعل التالي.
     ج · بطاقات ملوّنة — غلاف بتدرّج ألوان الشعار، وكل قسم بطاقة بيضاء
                        بحواف مستديرة وظلّ ناعم، وأرقام في مربّعات ملوّنة.

   قواعد ثابتة من قياس النسخ السابقة:
     · عمود قراءة ~76 حرفاً داخل البطاقة، والعريض وحده يملأ عرضها.
     · سبع درجات حجم لا ثمانٍ وعشرون.
     · الظلّ والاستدارة يفصلان، فلا نحتاج حدوداً سميكة ملوّنة.
   ============================================================ */

/* ============================================================
   fonts.css — خطوط هوية EJAD TECH، مستضافة محلياً ومجزّأة.
   لا اتصال بأي مصدر خارجي — شبكات الجهات تحجب مزوّدي الخطوط كثيراً،
   والاستضافة المحلية تُبقي CSP مقفلاً على المصدر نفسه.
   مولَّد بـ engine/build-fonts.py — لا يُحرَّر يدوياً.
   ============================================================ */
@font-face{font-family:"EJAD Sans";font-style:normal;font-weight:400 500;font-display:swap;src:url("fonts/ejad-400.woff2?v=61caf9a7") format("woff2")}
@font-face{font-family:"EJAD Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ejad-600.woff2?v=c89d5161") format("woff2")}
@font-face{font-family:"EJAD Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/ejad-700.woff2?v=c63147b7") format("woff2")}

:root{
  /* ---------- ألوان إيجاد التقنية ---------- */
  --brand-petrol:#032E38; --brand-mint:#13E9B1; --brand-teal:#00CCB8;
  --brand-grey:#80999E; --brand-orange:#F26B43; --brand-plum:#1C0132;

  --ink:#062730; --ink-soft:#26525C; --ink-mut:#52696F;
  --paper:#EEF4F4; --surface:#fff; --surface-2:#F4F9F9; --surface-3:#E9F1F1;
  --line:#DFEAEA; --line-soft:#EDF4F4;

  --verd:#07695C; --verd-deep:#032E38; --verd-tint:#E4FBF4; --verd-line:#9EE3CE;
  --amber:#9A3D14; --amber-tint:#FDF2EC; --amber-line:#F3C9B4;
  --blue:#1E5468;  --blue-tint:#E9F1F4;  --blue-line:#B4CDD5;
  --rust:#8E3227;  --rust-tint:#FBECE9;  --rust-line:#E5BFB7;
  --plum:#4A2260;  --plum-tint:#F2EBF6;

  /* الشريط الجانبي — داكن دائماً في الوضعين */
  --side-bg:#032E38; --side-bg-2:#04252D;
  --side-ink:#B6D5D1; --side-ink-2:#7FA9A4; --side-hi:#13E9B1;
  --side-hover:rgba(255,255,255,.07);

  /* التدرّجات — من الشعار مباشرة */
  --grad-cover:
    radial-gradient(90% 120% at 0% 0%, rgba(19,233,177,.28), rgba(19,233,177,0) 58%),
    linear-gradient(135deg,#1C0132 0%,#0A3B4B 45%,#0A6E76 100%);
  --grad-chip:linear-gradient(135deg,var(--brand-teal),var(--brand-mint));

  /* ---------- الخطّ ---------- */
  --body:"EJAD Sans","Segoe UI",system-ui,sans-serif;
  --mono:"EJAD Sans",ui-monospace,"Cascadia Mono",monospace;

  /* ---------- سُلّم الأحجام ---------- */
  --t-2xs:11.5px; --t-xs:12.5px; --t-sm:14px; --t-md:15.5px;
  --t-base:17px; --t-lede:19px; --t-h3:20px; --t-h2:24px; --t-h1:33px;

  /* ---------- سُلّم المسافات ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:72px; --s9:104px;

  /* ---------- الاستدارة والظلّ ---------- */
  --r-xs:7px; --r-sm:10px; --r:14px; --r-lg:18px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(3,46,56,.045), 0 5px 14px rgba(3,46,56,.055);
  --sh-2:0 2px 5px rgba(3,46,56,.05), 0 16px 36px rgba(3,46,56,.09);
  --sh-side:0 0 0 1px rgba(3,46,56,.04);

  /* ---------- المقاسات ---------- */
  --side:274px;
  --bar:60px;
  --main:1000px;
  --measure:41rem;
}

@media (prefers-color-scheme:dark){
  :root{
    --ink:#E6F4F1; --ink-soft:#BCD6D3; --ink-mut:#8DABAF;
    --paper:#021A20; --surface:#04272F; --surface-2:#052E37; --surface-3:#073741;
    --line-soft:#0A343E;
    --verd:#25D6A6; --verd-deep:#6BF0CD; --verd-tint:#053630; --verd-line:#0C5A4F;
    --amber:#F0946A; --amber-tint:#2E1D15; --amber-line:#553524;
    --blue:#83C4DA;  --blue-tint:#082832;  --blue-line:#124452;
    --rust:#EE9A8D;  --rust-tint:#2E1A16;  --rust-line:#512E27;
    --plum:#C79BE0;  --plum-tint:#22132B;
    --sh-1:0 1px 2px rgba(0,0,0,.3);
    --sh-2:0 10px 30px rgba(0,0,0,.4);
    --side-bg:#021A20; --side-bg-2:#01151A;
  }
}

*{box-sizing:border-box}
/* عناصر النموذج لا ترث الخطّ من body في المتصفحات — تأخذ خطّ النظام.
   بدون هذا كان زرّ حذف الصفّ («×») وغيره يخرج بخطّ Arial داخل صفحة
   كلّها بخطّ الهوية. */
button,input,select,textarea{font-family:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + var(--s5))}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*{animation:none!important;transition:none!important}
}

body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:var(--t-base);line-height:1.85;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}

body.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);min-height:100vh}

.skip{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus{position:fixed;inset-inline-start:12px;top:12px;width:auto;height:auto;
  clip:auto;clip-path:none;z-index:200;background:var(--brand-petrol);color:#fff;
  padding:10px 18px;border-radius:var(--r-sm)}
.sr{display:inline-block;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;vertical-align:top}
:focus-visible{outline:2.5px solid var(--brand-teal);outline-offset:2px;border-radius:var(--r-xs)}

/* ============================================================
   الشريط الجانبي الداكن — «أ · لوحة تطبيق»
   ============================================================ */
.side{background:var(--side-bg);color:var(--side-ink);position:sticky;top:var(--bar);
  height:calc(100vh - var(--bar));overflow:hidden auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;z-index:70}
.side::-webkit-scrollbar{width:7px}
.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:var(--r-xs)}
.side-in{padding:var(--s5) 0 var(--s6);display:flex;flex-direction:column;gap:var(--s5)}

/* رأس الجانبية صار سطر الحجم وحده — حدٌّ سفليّ يفصله عمّا بعده */
.side-head{padding:0 var(--s5) var(--s4);border-bottom:1px solid rgba(255,255,255,.09)}

.side-blk{padding:0 var(--s3)}
.side-blk-tight{margin-top:auto;padding-top:var(--s4)}
.side-k{margin:0 0 var(--s2);padding:0 var(--s3);font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.07em;color:var(--side-ink-2);line-height:1.7}

/* محتوى الوحدة */
.side .toc{list-style:none;margin:0;padding:0;counter-reset:toc}
.side .toc li{counter-increment:toc}
.side .toc a{display:flex;gap:var(--s3);align-items:baseline;padding:7px var(--s3);
  border-radius:var(--r-xs);text-decoration:none;color:var(--side-ink);
  font-size:var(--t-sm);line-height:1.7;transition:background .12s,color .12s}
.side .toc a::before{content:counter(toc,decimal-leading-zero);font-size:var(--t-2xs);
  color:var(--side-ink-2);flex:0 0 auto;font-variant-numeric:tabular-nums}
.side .toc a:hover{background:var(--side-hover);color:#fff}
.side .toc a.on{background:var(--side-hi);color:var(--brand-petrol);font-weight:600}
.side .toc a.on::before{color:rgba(3,46,56,.55)}

/* وحدات المسار */
.side-units{list-style:none;margin:0;padding:0}
.side-units a{display:flex;gap:var(--s3);align-items:center;padding:8px var(--s3);
  border-radius:var(--r-xs);text-decoration:none;color:var(--side-ink);
  font-size:var(--t-sm);line-height:1.5;transition:background .12s,color .12s}
.side-units a:hover{background:var(--side-hover);color:#fff}
.side-units a.on{background:rgba(19,233,177,.14);color:#fff;font-weight:600;
  box-shadow:inset 2px 0 0 var(--side-hi)}
.side-units a b{font-size:var(--t-2xs);color:var(--side-ink-2);font-weight:600;flex:0 0 auto}
.side-units a.on b{color:var(--side-hi)}
.side-units a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* روابط الأكاديمية */
.side-links{list-style:none;margin:0;padding:0}
.side-links a{display:flex;gap:var(--s3);align-items:center;padding:9px var(--s3);
  border-radius:var(--r-xs);text-decoration:none;color:var(--side-ink);
  font-size:var(--t-sm);transition:background .12s,color .12s}
.side-links a:hover{background:var(--side-hover);color:#fff}
.side-links a.on{background:var(--side-hi);color:var(--brand-petrol);font-weight:600}
.ic{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.side-links a.on .ic{opacity:1}

/* رقائق مختصرة أسفل صفحات الوحدات */
.side-chips{list-style:none;margin:0;padding:0 var(--s3);display:flex;flex-wrap:wrap;gap:6px;
  border-top:1px solid rgba(255,255,255,.08);padding-top:var(--s4)}
.side-chips a{display:flex;gap:6px;align-items:center;padding:5px 10px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);color:var(--side-ink);text-decoration:none;font-size:var(--t-xs)}
.side-chips a:hover{background:var(--side-hi);color:var(--brand-petrol)}
.side-chips .ic{width:13px;height:13px}

/* المسارات */
.side-tracks{list-style:none;margin:0;padding:0}
.side-tracks a{display:flex;gap:var(--s3);align-items:center;padding:7px var(--s3);
  border-radius:var(--r-xs);text-decoration:none;color:var(--side-ink);font-size:var(--t-sm)}
.side-tracks a:hover{background:var(--side-hover);color:#fff}
.side-tracks b{width:18px;flex:0 0 auto;font-size:var(--t-2xs);color:var(--side-ink-2);font-weight:600}
.side-tracks span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-tracks em{font-style:normal;font-size:var(--t-2xs);color:var(--side-ink-2);
  font-variant-numeric:tabular-nums;flex:0 0 auto}

.side-veil{display:none}

/* الأعداد ذات الفاصل («0 / 37» · «3/9») تنقلب في سياق RTL لأن المسافة
   تكسر مقطع الرقم الواحد فيُرتَّب المقطعان من اليمين. العزل يمنع ذلك. */
.side-prog-t b,.bar-sec-n,.side-tracks em,.res-sc{
  direction:ltr;unicode-bidi:isolate}
/* رقاقة المسار فيها عدد + معدود عربي، فتبقى RTL ويُعزل رقمها وحده. */
.trk-c{unicode-bidi:isolate}

/* ============================================================
   الشريط العلوي الفاتح
   ============================================================ */
.app-b{min-width:0;display:flex;flex-direction:column}
.bar{grid-column:1/-1;position:sticky;top:0;z-index:120;height:var(--bar);flex:0 0 auto;
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:var(--s4);padding:0 var(--s6)}
.bar-menu{display:none;width:36px;height:36px;flex:0 0 auto;border:1px solid var(--line);
  border-radius:var(--r-xs);background:var(--surface);color:var(--ink-soft);cursor:pointer;
  padding:0;place-items:center;font-size:var(--t-sm)}
.bar-menu svg{width:19px;height:19px}
/* العلامة في رأس الصفحة: شعار الشركة كاملاً واسم الأكاديمية بجانبه،
   ظاهران على كل العروض لأن الرأس يمتدّ فوق الجانبية والمحتوى معاً. */
.bar-brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;
  color:var(--ink);flex:0 0 auto;padding-inline-end:var(--s4);
  border-inline-end:1px solid var(--line)}
.bar-brand img{height:30px;width:auto;display:block}
.bar-brand .lg-d{display:none}
@media (prefers-color-scheme:dark){
  .bar-brand .lg-l{display:none}
  .bar-brand .lg-d{display:block}
}
.bar-brand-t{font-size:var(--t-sm);font-weight:700;letter-spacing:-.012em;
  white-space:nowrap;line-height:1.25}
.bar-brand-t em{display:block;font-style:normal;font-size:var(--t-2xs);font-weight:600;
  color:var(--ink-mut);letter-spacing:0}
.bar-brand:hover .bar-brand-t em{color:var(--verd)}
@media(max-width:900px){.bar-brand-t em{display:none}}
/* على الجوال يبقى الاسم ظاهراً ويتنازل عنوان القسم عن مكانه — رقمه يكفي */
@media(max-width:560px){
  .bar-brand{gap:var(--s2);padding-inline-end:var(--s3)}
  .bar-brand img{height:25px}
  .bar-brand-t{font-size:var(--t-2xs)}
  .bar-sec-t{display:none}
  .bar-sec{padding-inline-start:var(--s3)}
}

.bar-crumb{margin:0;font-size:var(--t-xs);color:var(--ink-mut);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-crumb b{color:var(--ink-soft);font-weight:600}
.bar-sec{margin:0;display:flex;gap:var(--s2);align-items:baseline;min-width:0;
  padding-inline-start:var(--s4);border-inline-start:1px solid var(--line)}
.bar-sec-n{font-size:var(--t-2xs);color:var(--ink-mut);flex:0 0 auto;font-variant-numeric:tabular-nums}
.bar-sec-t{font-size:var(--t-xs);font-weight:600;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-act{margin-inline-start:auto;display:flex;gap:var(--s2);align-items:center;flex:0 0 auto}
.bar-act > a:not(.btn){color:var(--ink-mut);text-decoration:none;font-size:var(--t-sm);
  padding:6px 10px;border-radius:var(--r-xs)}
.bar-act > a:not(.btn):hover{background:var(--surface-2);color:var(--ink)}
.bar-line{position:absolute;inset-inline-start:0;bottom:-1px;height:2px;width:0;
  background:var(--brand-mint);transition:width .2s}

/* ============================================================
   التخطيط
   ============================================================ */
main{flex:1 1 auto;min-width:0;width:100%;max-width:var(--main);margin:0 auto;
  padding:var(--s6) var(--s6) var(--s9);counter-reset:sec}

/* ============================================================
   الغلاف — تدرّج ألوان الشعار · «ج»
   ============================================================ */
.cover{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--grad-cover);color:#fff;padding:var(--s6) var(--s6) var(--s5);
  margin-bottom:var(--s5);box-shadow:var(--sh-2)}
.cover::after{content:"";position:absolute;inset-inline-end:-90px;top:-110px;
  width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.06)}
.cover > *{position:relative}
.pills{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.pill{font-size:var(--t-2xs);font-weight:600;padding:4px 11px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30);color:#fff}
.pill.hot{background:var(--brand-mint);border-color:var(--brand-mint);color:var(--brand-petrol)}
.pill.warm{background:#C74A18;border-color:#C74A18;color:#fff}
.cover h1{margin:0 0 var(--s3);font-size:var(--t-h1);line-height:1.3;font-weight:700;
  letter-spacing:-.018em;color:#fff;max-width:24ch}
.cover .lede{margin:0;font-size:var(--t-md);line-height:1.85;color:rgba(255,255,255,.92);
  max-width:58ch}

/* النصّ داخل الغلاف على تدرّج داكن: b و code و a ترث ألوان النصّ الفاتح
   (--ink · --verd) فتخرج شبه غير مرئية — تباين 1.4:1. تُقلب هنا صراحةً.
   وفاحص التباين كان يتخطّى الخلفيات المتدرّجة فلم يرصدها. */
.cover b,.cover strong{color:#fff;font-weight:700}
.cover code{color:#EAF7F4;background:rgba(255,255,255,.16);font-weight:600}
.cover a{color:var(--brand-mint);text-decoration-color:rgba(19,233,177,.5)}
.cover a:hover{color:#fff}
.cover .ref{color:var(--brand-mint);border-bottom-color:rgba(19,233,177,.5)}
.cover .ref:hover{background:rgba(255,255,255,.12);color:#fff}

.cover-sm{padding:var(--s5) var(--s6)}
.cover-sm .pills{margin-bottom:var(--s3)}
.cover-sm h1{max-width:26ch}
.cover-sm .lede{margin-bottom:0}

/* ============================================================
   بلاطات الأرقام · «ج»
   ============================================================ */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:var(--s3);margin-bottom:var(--s5)}
.tile{background:var(--surface);border-radius:var(--r);padding:var(--s4);
  box-shadow:var(--sh-1);border:1px solid var(--line-soft)}
.tile-ic{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  margin-bottom:var(--s3)}
.tile-ic svg{width:17px;height:17px}
.tile b{display:block;font-size:var(--t-h2);font-weight:700;line-height:1.2;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.tile span{font-size:var(--t-xs);color:var(--ink-mut)}
.t-g .tile-ic{background:var(--verd-tint);color:var(--verd)}
.t-o .tile-ic{background:var(--amber-tint);color:var(--amber)}
.t-b .tile-ic{background:var(--blue-tint);color:var(--blue)}
.t-p .tile-ic{background:var(--plum-tint);color:var(--plum)}

/* ---------- بطاقة حقائق الوحدة ---------- */
.ucard{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--s4) var(--s5);background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--s4) var(--s5);
  margin-bottom:var(--s5)}
.ucard > div{min-width:0}
.ucard span{display:block;font-size:var(--t-2xs);letter-spacing:.05em;color:var(--ink-mut);
  margin-bottom:3px}
.ucard b{display:block;font-size:var(--t-sm);font-weight:600;line-height:1.7}
.ucard a{color:var(--verd);text-decoration:none;border-bottom:1px solid var(--verd-line)}
.ucard a:hover{background:var(--verd-tint)}

/* ============================================================
   بطاقة القسم · «ج»
   ============================================================ */
.sec{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  border:1px solid var(--line-soft);padding:var(--s5) var(--s6) var(--s6);
  margin-bottom:var(--s4);scroll-margin-top:calc(var(--bar) + var(--s4))}
.sec[id]{counter-increment:sec}
.sec > h2{margin:0 0 var(--s5);font-size:var(--t-h2);line-height:1.3;font-weight:700;
  letter-spacing:-.012em;display:flex;gap:var(--s4);align-items:center}
.sec[id] > h2::before{content:counter(sec);flex:0 0 auto;width:34px;height:34px;
  border-radius:var(--r-sm);background:var(--grad-chip);color:var(--brand-petrol);
  font-size:var(--t-sm);font-weight:700;display:grid;place-items:center;
  font-variant-numeric:tabular-nums}
.sec-intro{padding-top:var(--s6)}

/* عمود القراءة داخل البطاقة — العريض وحده يملأ عرضها */
.sec > p, .sec > ul, .sec > ol, .sec > h3, .sec > .sub-l,
.sec > .cx, .sec > .memo, .sec > .muted, .sec > .fnote,
.sec > .aim, .sec > .warn-note{max-width:var(--measure)}

.h-sec{margin:var(--s7) 0 var(--s4);font-size:var(--t-h2);font-weight:700;
  line-height:1.3;letter-spacing:-.012em}
.h-sec:first-child{margin-top:0}

/* ============================================================
   الطباعة النصّية
   ============================================================ */
.eyebrow{margin:0 0 var(--s3);font-size:var(--t-xs);color:var(--ink-mut);
  letter-spacing:.04em;font-weight:600}
.eyebrow a{color:inherit}
h1{margin:0 0 var(--s4);font-size:var(--t-h1);line-height:1.3;font-weight:700;
  letter-spacing:-.018em}
.lede{margin:0 0 var(--s5);font-size:var(--t-lede);line-height:1.85;color:var(--ink-soft);
  max-width:var(--measure)}
h3{margin:var(--s5) 0 var(--s3);font-size:var(--t-h3);font-weight:600;line-height:1.5}
.cnt{font-size:var(--t-sm);color:var(--verd);font-weight:600;
  background:var(--verd-tint);border-radius:var(--r-pill);padding:2px 10px;
  vertical-align:middle;margin-inline-start:var(--s2)}
p{margin:0 0 var(--s4)}
main ul,main ol{margin:0 0 var(--s4);padding-inline-start:var(--s5)}
main li{margin-bottom:var(--s2)}
main li::marker{color:var(--brand-teal)}
b,strong{font-weight:600;color:var(--ink)}
a{color:var(--verd);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--verd-deep)}
/* الرمز بنفس أسرة الخطّ لا بأسرة أحادية المسافة، فلا سبب لتصغيره:
   .88em كانت تولّد ستّة أحجام مشتقّة (11 · 12.3 · 13.3 · 13.6 · 15 · 17.6)
   خارج سلّم الأحجام. التمييز يكفيه اللون والخلفية. */
code{font-family:var(--mono);font-size:inherit;font-weight:600;direction:ltr;
  unicode-bidi:isolate;display:inline-block;white-space:nowrap;color:var(--verd);
  background:var(--verd-tint);padding:0 6px;border-radius:var(--r-xs)}
.muted{color:var(--ink-mut);font-size:var(--t-sm);line-height:1.7}
.aim{color:var(--ink-mut);font-size:var(--t-md);margin:0 0 var(--s4)}
.sub-l{margin:var(--s4) 0 var(--s1);font-weight:600;font-size:var(--t-md)}
.fnote{font-size:var(--t-sm);color:var(--ink-mut)}
.tw{overflow-x:auto;margin:var(--s5) 0;border-radius:var(--r);
  border:1px solid var(--line-soft)}
.short{max-width:var(--measure)}
.w{width:100%}

.ref{color:var(--verd);text-decoration:none;border-bottom:1px dashed var(--verd-line);
  font-weight:600}
.ref:hover{border-bottom-style:solid;background:var(--verd-tint)}
.ref-bad{color:var(--rust);border-bottom:1px dotted var(--rust)}
/* إشارة كُتبت بهيئة رمز: `{{block:BB-X}}` — تبقى رابطاً وتُعرض كرمز */
.ref-code{border-bottom:0;padding:0}
.ref-code code{border-bottom:1px dashed var(--verd-line)}
.ref-code:hover code{border-bottom-style:solid;background:var(--verd)!important;color:#fff}

/* ============================================================
   الملاحظات — كتل ملوّنة ناعمة بأيقونة · «ج»
   ============================================================ */
.cx{margin:var(--s5) 0;padding:var(--s4) var(--s4) var(--s4) var(--s4);
  border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line-soft)}
.cx-t{margin:0 0 var(--s2);font-size:var(--t-sm);font-weight:700;letter-spacing:.01em;
  color:var(--ink-soft);display:flex;gap:var(--s3);align-items:center}
.cx-t::before{content:"";flex:0 0 auto;width:24px;height:24px;border-radius:var(--r-xs);
  background:var(--brand-grey) center/14px no-repeat}
.cx p{margin:0 0 var(--s3);font-size:var(--t-md);line-height:1.85;color:var(--ink-soft)}
.cx p:last-child{margin-bottom:0}
.cx ul,.cx ol{margin:0 0 var(--s2);font-size:var(--t-md)}
.cx ul:last-child,.cx ol:last-child{margin-bottom:0}

.cx-warn{background:var(--amber-tint);border-color:var(--amber-line)}
.cx-warn .cx-t{color:var(--amber)}
.cx-warn .cx-t::before{background-color:var(--brand-orange);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v8'/%3E%3Cpath d='M12 17.6v.2'/%3E%3C/svg%3E")}
.cx-warn p{color:var(--amber)}

.cx-info{background:var(--verd-tint);border-color:var(--verd-line)}
.cx-info .cx-t{color:var(--verd)}
.cx-info .cx-t::before{background-color:var(--brand-teal);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 11v7'/%3E%3Cpath d='M12 6.4v.2'/%3E%3C/svg%3E")}
.cx-info p{color:var(--verd-deep)}

.cx-note{background:var(--blue-tint);border-color:var(--blue-line)}
.cx-note .cx-t{color:var(--blue)}
.cx-note .cx-t::before{background-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 4h10v16l-5-4-5 4z'/%3E%3C/svg%3E")}
.cx-note p{color:var(--blue)}

.warn-note{margin:var(--s2) 0 0;font-size:var(--t-sm);color:var(--amber);line-height:1.7}

/* المشهد الافتتاحي */
.memo{margin:0 0 var(--s5);padding:var(--s5);border-radius:var(--r);
  background:var(--surface-3);position:relative}
.memo p{margin:0 0 var(--s3);font-size:var(--t-md);line-height:1.85;color:var(--ink-soft)}
.memo p:last-child{margin-bottom:0}
.said{font-style:normal;color:var(--verd);font-size:var(--t-md);font-weight:600}

/* ============================================================
   الاقتباس من المصدر
   ============================================================ */
.quote{margin:var(--s5) 0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--surface)}
.quote::before{content:"";display:block;height:3px;background:var(--brand-grey)}
.quote-binding::before{background:var(--brand-petrol)}
.quote-assessed::before{background:var(--blue)}
.quote-guidance::before{background:var(--brand-grey)}
.quote > *{margin-inline:var(--s5)}
.quote > *:first-of-type{margin-top:var(--s4)}
.quote > *:last-child{margin-bottom:var(--s5)}
.quote p{font-size:var(--t-md);line-height:1.85;margin-bottom:var(--s3)}
.quote ul,.quote ol{padding-inline-start:var(--s5);font-size:var(--t-md)}
.q-badge{display:inline-block;font-size:var(--t-xs);font-weight:600;
  padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-3);
  color:var(--ink-mut);margin-bottom:var(--s2)}
.q-loc{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-mut);
  margin-inline-start:var(--s2)}
.q-draft{color:var(--amber)}
.block{display:block}

/* ============================================================
   الرسومات
   ============================================================ */
.dgm{margin:var(--s5) 0;background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:var(--s5)}
/* مقاس طبيعي لا ممدود: كانت كل الرسوم تُمدّ إلى عرض الحاوية، وعروضها
   الداخلية تتراوح 500–871، فتخرج نفس قيمة font-size بأحجام تختلف 74%
   بين رسم وآخر. بالمقاس الطبيعي يصير حجم 12 هو 12 في كل الرسوم. */
.dgm svg{display:block;max-width:100%;height:auto;margin-inline:auto;direction:ltr}
/* :where() بلا وزن نوعيّ — بدونها كانت هذي القاعدة (0,1,2) تهزم كل
   أصناف نصّ الرسومات (0,1,0)، فيخرج كل نصّ في الـ 86 رسماً بلون --ink
   وتضيع مراتب اللون: العدد والمكتوم والتسمية بلون واحد،
   ورقم النقطة الملوّنة يخرج داكناً فوق دائرة نعناعية بتباين 1.65. */
:where(.dgm svg text){unicode-bidi:plaintext;font-family:var(--body);fill:var(--ink)}
/* على الشاشات الضيّقة يُمرَّر الرسم أفقياً داخل إطاره. والحدّ الأدنى يُشتقّ
   من عرض الرسم نفسه لا يُثبَّت عند 620px: بالتثبيت كان رسم عرضه 500 يُصغَّر
   إلى 0.61 ورسم عرضه 740 إلى 0.84 — فيختلف حجم النصّ بينهما 37%. */
.dgm{overflow-x:auto}
.dgm svg{min-width:calc(var(--dw, 760) * 0.82px)}
.dgm figcaption{margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--ink-mut);line-height:1.7}
.dgm-box{fill:var(--surface);stroke:var(--line);stroke-width:1.1}
.dgm-accent{fill:var(--verd-tint);stroke:var(--verd-line)}
.dgm-cross{fill:var(--blue-tint);stroke:var(--blue-line)}
.dgm-alt{fill:var(--surface-3);stroke:var(--line)}
.dgm-unit{fill:var(--surface);stroke:var(--line);stroke-width:1.1;transition:fill .14s}
a:hover .dgm-unit{fill:var(--verd-tint)}
.dgm-gate{fill:var(--amber-tint);stroke:var(--amber-line);stroke-width:1.5}
.dgm-crossu{fill:var(--blue-tint);stroke:var(--blue-line);stroke-dasharray:4 3}
.dgm-cell{fill:var(--surface);stroke:var(--line);stroke-width:1}
.dgm-self{fill:var(--surface-3)}
.dgm-xc{fill:var(--verd-tint)}
.dgm-bar{fill:var(--verd-line)}
.dgm-bar-top{fill:var(--brand-teal)}
.dgm-link{stroke:var(--ink-mut);stroke-width:1.1;fill:none;opacity:.5}
.dgm-arrow{stroke:var(--ink-mut);stroke-width:1.1;fill:none}
.dgm-arrowhead{fill:var(--ink-mut)}
.dgm-rail{stroke:var(--line);stroke-width:1.5}
.dgm-dep{stroke:var(--verd);stroke-width:1.2;fill:none;stroke-dasharray:3 3;opacity:.42;
  transition:opacity .12s,stroke-width .12s}
/* 27 سهم تبعية فوق 37 صندوقاً تُقرأ كتشابك. عند التمرير على وحدة تُخفت
   كل الأسهم إلا الملامسة لها، فيصير التشابك أداةَ استكشاف لا ضجيجاً. */
.dgm-map svg.focusing .dgm-dep{opacity:.07}
.dgm-map svg.focusing .dgm-dep.hot{opacity:1;stroke-width:2.1;stroke-dasharray:none}
.dgm-map svg.focusing a:not(.hot) .dgm-unit{opacity:.35}
.dgm-map svg.focusing a:not(.hot) text{opacity:.4}
.dgm-map a{cursor:pointer}
.dgm-loop{stroke:var(--amber);stroke-width:1.4;fill:none;stroke-dasharray:5 3}
.dgm-num,.dgm-num-sm{font-family:var(--mono);fill:var(--verd);font-weight:600}
.dgm-lbl{font-weight:600}
.dgm-uc{font-family:var(--mono);font-weight:600}
.dgm-ut,.dgm-sm,.dgm-mut,.dgm-cap,.dgm-track{fill:var(--ink-mut)}
.dgm-op{font-family:var(--mono);fill:var(--ink-mut)}
.dgm-dot{fill:var(--verd)}
.dgm-dot-gate{fill:var(--brand-orange)}
/* الخريطة صارت بعرض أسرة الرسوم نفسها (801) فلا تحتاج حدّاً أدنى خاصاً —
   وإبقاؤه كان يمدّها 2.4% فتخرج أحجامها مخالفة لبقية الرسوم. */
.dgm-dot-cross{fill:var(--blue)}
.dgm-dotn{fill:var(--surface);font-family:var(--mono);font-weight:600}
@media print{.dgm{break-inside:avoid}}

/* ============================================================
   الجداول
   ============================================================ */
main table{width:100%;border-collapse:collapse;font-size:var(--t-md);
  background:var(--surface-2)}
.tw table{margin:0}
main thead th{text-align:start;font-weight:600;font-size:var(--t-xs);color:var(--ink-mut);
  padding:var(--s3);background:var(--surface-3);white-space:nowrap;letter-spacing:.02em}
main tbody td{padding:var(--s3);border-top:1px solid var(--line-soft);
  vertical-align:top;line-height:1.7}

/* ============================================================
   التمرين
   ============================================================ */
.ex{margin:var(--s5) 0;background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden}
.ex-h{display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap;
  padding:var(--s4) var(--s5);background:var(--surface-3)}
.ex-h b{font-size:var(--t-md)}
.ex-meta{font-size:var(--t-sm);color:var(--ink-mut)}
.ex-b{padding:var(--s2) var(--s5)}
.exq{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.exq:last-child{border-bottom:0}
.exq-q{margin:0 0 var(--s3);font-size:var(--t-md);font-weight:600;line-height:1.7}
.exq-q .n{display:inline-grid;place-items:center;width:24px;height:24px;
  border-radius:var(--r-xs);background:var(--grad-chip);color:var(--brand-petrol);
  font-size:var(--t-xs);font-weight:700;margin-inline-end:var(--s2);vertical-align:middle}
.exo{display:flex;gap:var(--s3);align-items:flex-start;padding:10px var(--s3);
  border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;
  background:var(--surface);margin-bottom:6px;font-size:var(--t-md);line-height:1.7;
  transition:border-color .12s,background .12s}
.exo:hover{border-color:var(--verd-line)}
.exo input{margin-top:5px;accent-color:var(--brand-teal);flex:0 0 auto}
.exo.ok{background:var(--verd-tint);border-color:var(--verd-line)}
.exo.no{background:var(--rust-tint);border-color:var(--rust-line)}
.exo.miss{border-color:var(--verd-line);border-style:dashed}
.exfb{display:none}
.exfb.on{display:block;margin:var(--s3) 0 0;padding:var(--s3) var(--s4);
  border-radius:var(--r-sm);background:var(--surface);font-size:var(--t-sm);
  line-height:1.85;color:var(--ink-soft);border-inline-start:3px solid var(--line)}
.exfb.y{border-inline-start-color:var(--brand-teal)}
.exfb.n{border-inline-start-color:var(--brand-orange)}
.exfb .src{display:block;margin-top:var(--s2);font-family:var(--mono);font-size:var(--t-xs);
  color:var(--ink-mut)}
.ex-f{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
  padding:var(--s4) var(--s5);background:var(--surface-3)}
.ex-score{font-size:var(--t-sm);font-weight:700}
.ex-score.pass{color:var(--verd)}
.ex-score.fail{color:var(--amber)}

/* ============================================================
   الأزرار
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:var(--s2);height:38px;padding:0 var(--s5);
  border:0;border-radius:var(--r-pill);background:var(--brand-petrol);color:#fff;
  font-family:var(--body);font-size:var(--t-sm);font-weight:600;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:background .13s,transform .1s}
.btn:hover{background:#05414F;color:#fff}
.btn:active{transform:translateY(1px)}
.btn.mint{background:var(--brand-mint);color:var(--brand-petrol)}
.btn.mint:hover{background:var(--brand-teal);color:var(--brand-petrol)}
.btn.ghost{background:var(--surface);color:var(--ink-soft);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--brand-teal)}
.btn.sm{height:32px;padding:0 var(--s4);font-size:var(--t-xs)}
.btnrow{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin:0}
@media (prefers-color-scheme:dark){
  .btn{background:var(--brand-mint);color:var(--brand-petrol)}
  .btn:hover{background:var(--brand-teal);color:var(--brand-petrol)}
}

/* ============================================================
   المخرج — جدول مرجعي: ماذا يجب أن يحتويه، وسندُ كل بند
   ============================================================ */
.tpl{margin:var(--s5) 0;background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden}
.tpl-h{padding:var(--s4) var(--s5);background:var(--surface-3)}
.tpl-t{margin:0;font-size:var(--t-md);font-weight:700}
.tpl-meta{margin:var(--s2) 0 0;display:flex;gap:6px;flex-wrap:wrap}
.tpl-apr{margin:var(--s2) 0 0;font-size:var(--t-sm);color:var(--ink-soft)}
.tpl-apr b{color:var(--verd)}
.tpl-tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm);background:var(--surface-2)}
.tpl-tbl th{text-align:start;padding:var(--s2) var(--s3);font-size:var(--t-xs);
  color:var(--ink-mut);font-weight:600;background:var(--surface-2);white-space:nowrap}
.tpl-tbl td{padding:var(--s3);border-top:1px solid var(--line-soft);vertical-align:top;line-height:1.7}
.tpl-n{width:30px;color:var(--ink-mut);font-variant-numeric:tabular-nums}
.tpl-f b{display:block;font-weight:600}
.tpl-note{display:block;margin-top:3px;font-size:var(--t-xs);color:var(--ink-mut);line-height:1.7}
.tpl-src{color:var(--ink-mut);font-size:var(--t-xs);min-width:140px}
.tpl-foot{margin:0;padding:var(--s3) var(--s5);background:var(--surface-3);
  font-size:var(--t-xs);color:var(--ink-mut);line-height:1.7}
.lvtag{display:inline-block;font-size:var(--t-xs);padding:2px 9px;border-radius:var(--r-pill);font-weight:600}
.lv0{background:var(--verd-tint);color:var(--verd)}
.lv1{background:var(--blue-tint);color:var(--blue)}
.lv2{background:var(--surface-3);color:var(--ink-mut)}
.lv3{background:var(--amber-tint);color:var(--amber)}

/* ============================================================
   السجل — جدول أمثلة توضيحية (لا يُملأ)
   ============================================================ */
.reg{margin:var(--s5) 0;background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden}
.reg-h{padding:var(--s4) var(--s5);background:var(--surface-3)}
.reg-t{margin:0;font-size:var(--t-md);font-weight:700}
.reg-note{margin:var(--s2) 0 0;font-size:var(--t-sm);color:var(--ink-mut);line-height:1.7}
.reg-tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm);background:var(--surface-2)}
.reg-tbl th{text-align:start;padding:var(--s2) var(--s3);font-weight:600;font-size:var(--t-xs);
  color:var(--ink-mut);white-space:nowrap;background:var(--surface-2)}
.reg-tbl td{padding:var(--s3);border-top:1px solid var(--line-soft);vertical-align:top;line-height:1.7}
.reg-foot{margin:0;padding:var(--s3) var(--s5);background:var(--surface-3);
  font-size:var(--t-xs);color:var(--ink-mut);line-height:1.7}

/* ============================================================
   خلاصة الوحدة — ما يخرج به القارئ
   ============================================================ */
.sum{margin:var(--s6) 0 var(--s4);background:var(--surface);border:1px solid var(--verd-line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1)}
.sum-key{border-color:var(--amber-line)}
.sum-t{margin:0;padding:var(--s5) var(--s5) var(--s2);font-size:var(--t-h3);font-weight:700}
.sum-why{margin:0;padding:var(--s3) var(--s5);background:var(--amber-tint);
  font-size:var(--t-sm);line-height:1.85;color:var(--amber)}
.sum-src{display:block;margin-top:var(--s1);font-size:var(--t-xs);opacity:.85}
.sum-sub{margin:0;padding:var(--s3) var(--s5) 0;font-size:var(--t-sm);color:var(--ink-mut)}
.sum-b{margin:0;padding:var(--s3) var(--s5) var(--s5);padding-inline-start:calc(var(--s5) + var(--s5));
  font-size:var(--t-md);line-height:1.85}
.sum-b li{margin-bottom:var(--s3)}
.sum-b li::marker{color:var(--brand-teal);font-weight:700}

/* ============================================================
   الفجوات
   ============================================================ */
.gapcard{margin:var(--s5) 0;padding:var(--s5);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.gapcard::before{content:"";display:block;width:44px;height:3px;border-radius:var(--r-xs);
  background:var(--brand-orange);margin-bottom:var(--s4)}
.gap-closed::before{background:var(--brand-mint)}
.gap-t{margin:0 0 var(--s3);font-size:var(--t-md);font-weight:700;
  display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.gap-id{font-family:var(--mono);font-size:var(--t-xs);padding:3px 10px;
  border-radius:var(--r-pill);background:var(--amber-tint);color:var(--amber)}
.gap-closed .gap-id{background:var(--verd-tint);color:var(--verd)}
.gap-st{font-size:var(--t-xs);color:var(--ink-mut);font-weight:400}
.gapcard p{margin:0 0 var(--s3);font-size:var(--t-md);line-height:1.85}
.gapcard ul{margin:0 0 var(--s3);padding-inline-start:var(--s5);font-size:var(--t-sm)}
.gap-guide{margin:var(--s3) 0 0;padding-top:var(--s3);border-top:1px solid var(--line-soft);
  font-size:var(--t-sm);color:var(--ink-soft)}

/* ============================================================
   تنقّل الوحدة
   ============================================================ */
.unav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s3);margin-top:var(--s5)}
.unav a{display:block;padding:var(--s4);background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r);text-decoration:none;
  color:var(--ink);font-size:var(--t-sm);line-height:1.5;box-shadow:var(--sh-1);
  transition:transform .12s,box-shadow .12s}
.unav a:hover{color:var(--verd);transform:translateY(-2px);box-shadow:var(--sh-2)}
.unav .dis{display:block;padding:var(--s4);border-radius:var(--r);opacity:.45;
  font-size:var(--t-sm);line-height:1.5}
.unav span{display:block;font-size:var(--t-xs);color:var(--ink-mut);margin-bottom:3px}
@media(max-width:700px){.unav{grid-template-columns:1fr}}

/* ============================================================
   الرئيسية
   ============================================================ */

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:var(--s3);margin:0 0 var(--s5)}
.stat{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:var(--s4);box-shadow:var(--sh-1)}
.stat b{display:block;font-size:var(--t-h2);font-weight:700;color:var(--ink);
  letter-spacing:-.025em;line-height:1.2;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--ink-mut)}

.trk{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:var(--s5);margin-bottom:var(--s4)}
.trk-h{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-bottom:var(--s3)}
.trk-n{width:30px;height:30px;flex:0 0 auto;border-radius:var(--r-sm);
  background:var(--surface-3);color:var(--ink-mut);display:grid;place-items:center;
  font-size:var(--t-sm);font-weight:700}

.trk-t{font-size:var(--t-h3);font-weight:700;flex:1;min-width:170px;line-height:1.3}
.trk-t em{display:block;margin-top:2px;font-style:normal;font-size:var(--t-xs);
  color:var(--ink-mut);font-weight:400}
.trk-c{font-size:var(--t-xs);color:var(--ink-mut);background:var(--surface-2);
  border-radius:var(--r-pill);padding:3px 11px;white-space:nowrap}

.ur{display:flex;gap:var(--s3);align-items:center;padding:var(--s3);
  text-decoration:none;color:var(--ink);border-radius:var(--r-sm);
  transition:background .12s}
a.ur:hover{background:var(--surface-2)}
.ur.soon{opacity:.45;cursor:default}

.ur-m{flex:1;min-width:0}
.ur-t{display:block;font-size:var(--t-md);line-height:1.7}
.ur-c{font-size:var(--t-xs);color:var(--verd);font-weight:600;margin-inline-end:var(--s2)}
.ur-o{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--ink-mut)}
.ur-e{flex:0 0 auto;font-size:var(--t-xs);color:var(--ink-mut);white-space:nowrap}
@media(max-width:620px){.ur-e{display:none}}

.card{display:block;padding:var(--s5);background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--sh-1);
  text-decoration:none;color:var(--ink);transition:transform .12s,box-shadow .12s}
a.card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.card b{display:block;margin-bottom:var(--s2);font-size:var(--t-h3);font-weight:700}
.card span,.card p{display:block;margin:0;font-size:var(--t-sm);color:var(--ink-mut);line-height:1.7}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:var(--s3);margin:var(--s4) 0}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:var(--s3);margin:var(--s4) 0}
.databox{margin:var(--s5) 0;padding:var(--s5);background:var(--surface-2);
  border-radius:var(--r);border:1px solid var(--line-soft)}
.databox p{margin:0 0 var(--s3);font-size:var(--t-sm);color:var(--ink-soft)}
.databox p:last-child{margin-bottom:0}

/* ============================================================
   الوسوم
   ============================================================ */
.tag{display:inline-block;font-size:var(--t-xs);padding:2px 9px;border-radius:var(--r-pill);
  vertical-align:middle;font-weight:600;background:var(--surface-3);color:var(--ink-mut)}
.tag.gate{background:var(--amber-tint);color:var(--amber)}
.tag.cross,.tag.dom{background:var(--blue-tint);color:var(--blue)}
.tag.soon,.tag.std,.tag.input{background:var(--surface-3);color:var(--ink-mut)}
.tag.cycle,.tag.dual{background:var(--rust-tint);color:var(--rust)}

/* ============================================================
   صفحات الكيانات
   ============================================================ */
.ent{margin-bottom:var(--s3);padding:var(--s5);background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--sh-1)}
.ent:target{border-color:var(--brand-teal);box-shadow:0 0 0 3px var(--verd-tint)}
.ent h3,.ent h4{margin:0 0 var(--s3);font-size:var(--t-md);font-weight:700;
  display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.ent-text{margin:0 0 var(--s3);font-size:var(--t-md);line-height:1.85}
.ent-list{margin:0 0 var(--s3);padding-inline-start:var(--s5);font-size:var(--t-sm)}
.clauses{margin:var(--s3) 0 0;padding-inline-start:var(--s5);font-size:var(--t-sm);line-height:1.85}
.clauses li{margin-bottom:var(--s3)}
.ent-f{display:flex;gap:var(--s4);flex-wrap:wrap;margin:var(--s3) 0 0;padding-top:var(--s3);
  border-top:1px solid var(--line-soft);font-size:var(--t-xs);color:var(--ink-mut)}
.term{margin-bottom:var(--s3);padding:var(--s5);background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--sh-1)}
.term:target{border-color:var(--brand-teal);box-shadow:0 0 0 3px var(--verd-tint)}
.term h3{margin:0 0 var(--s2);font-size:var(--t-h3)}
.term p{margin:0;font-size:var(--t-md);line-height:1.85;color:var(--ink-soft)}

/* ============================================================
   البحث والامتحان
   ============================================================ */
.sbig input{width:100%;height:56px;border:1px solid var(--line);border-radius:var(--r);
  padding:0 var(--s5);font-family:var(--body);font-size:var(--t-lede);
  background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.sbig input:focus{border-color:var(--brand-teal);outline:none;box-shadow:0 0 0 3px var(--verd-tint)}
.gfilter input{width:100%;max-width:420px;height:44px;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:0 var(--s4);font-family:var(--body);
  font-size:var(--t-md);background:var(--surface);color:var(--ink)}
.gfilter input:focus{border-color:var(--brand-teal);outline:none;box-shadow:0 0 0 3px var(--verd-tint)}
.smeta{margin:var(--s4) 0;font-size:var(--t-sm);color:var(--ink-mut)}
.res{display:block;margin-bottom:var(--s3);padding:var(--s4) var(--s5);background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--sh-1);
  text-decoration:none;color:var(--ink);transition:transform .12s,box-shadow .12s}
.res:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.res-top{display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap;margin-bottom:var(--s2)}
.res-k{font-size:var(--t-xs);padding:2px 9px;border-radius:var(--r-pill);
  background:var(--verd-tint);color:var(--verd);font-weight:600}
.res-control{background:var(--rust-tint);color:var(--rust)}
.res-u{font-size:var(--t-xs);color:var(--ink-mut)}
.res-sc{margin-inline-start:auto;font-size:var(--t-xs);color:var(--ink-mut)}
.res-t{margin:0 0 var(--s2);font-size:var(--t-md);font-weight:700;line-height:1.5}
.res-x{margin:0;font-size:var(--t-sm);line-height:1.7;color:var(--ink-mut)}
mark{background:var(--verd-tint);color:var(--ink);padding:0 3px;border-radius:var(--r-xs);font-weight:600}
.empty{margin:var(--s5) 0;padding:var(--s8) var(--s5);text-align:center;
  background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-lg);
  color:var(--ink-mut);font-size:var(--t-md);line-height:1.85}
.sugg{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;margin-top:var(--s4)}
.sugg button{padding:7px var(--s4);border:1px solid var(--verd-line);border-radius:var(--r-pill);
  background:var(--verd-tint);color:var(--verd);font-family:var(--body);
  font-size:var(--t-sm);font-weight:600;cursor:pointer}
.sugg button:hover{background:var(--brand-teal);color:#fff}
.qsrc{font-size:var(--t-xs);color:var(--verd);text-decoration:none;font-weight:600;
  background:var(--verd-tint);border-radius:var(--r-pill);padding:2px 9px;margin-inline-start:var(--s2)}
.qsrc:hover{background:var(--brand-teal);color:#fff}
#qBody .exq{margin-bottom:var(--s3);padding:var(--s5);background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--sh-1)}
#qFoot{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-top:var(--s4);
  padding:var(--s4) var(--s5);background:var(--surface);border-radius:var(--r);
  border:1px solid var(--line-soft);box-shadow:var(--sh-1)}

/* ============================================================
   صفحة التقدّم
   ============================================================ */

/* ============================================================
   الحالة والتذييل
   ============================================================ */

.foot{margin-top:auto;padding:var(--s6);border-top:1px solid var(--line)}
.foot p{max-width:var(--main);margin:0 auto var(--s2);font-size:var(--t-xs);
  color:var(--ink-mut);line-height:1.85}
.foot-brand{max-width:var(--main);margin:0 auto var(--s5);display:flex;align-items:center;
  gap:var(--s5);flex-wrap:wrap;padding-bottom:var(--s5);border-bottom:1px solid var(--line-soft)}
.foot-brand img{height:52px;width:auto;display:block}
/* الشعار نسختان: حبر داكن للخلفية الفاتحة وأبيض للداكنة. */
.foot-brand .lg-d{display:none}
@media (prefers-color-scheme:dark){
  .foot-brand .lg-l{display:none}
  .foot-brand .lg-d{display:block}
}
.foot-brand p{margin:0}
.foot-brand b{display:block;font-size:var(--t-md);font-weight:700;color:var(--ink);
  letter-spacing:-.012em;line-height:1.5}
.foot-brand span{display:block;font-size:var(--t-xs);color:var(--ink-mut);margin-top:2px}
@media(max-width:520px){.foot-brand{gap:var(--s4)}.foot-brand img{height:40px}}

/* ============================================================
   الطباعة
   ============================================================ */
@media print{
  body.app{display:block}
  .side,.bar,.unav,.ex-f,.form-f,.reg-f,.skip,.saved,.degrade,.sugg,.side-veil{display:none!important}
  main{padding:0;max-width:none}
  body{font-size:11pt;background:#fff;color:#000}
  .cover{background:#fff!important;color:#000;box-shadow:none;border:1px solid #bbb}
  .cover h1,.cover .lede{color:#000}
  .sec,.quote,.ex,.form,.reg,.gate,.dgm,.gapcard{break-inside:avoid;
    box-shadow:none;border:1px solid #ccc}
  a{color:#000;text-decoration:none}
}

/* ============================================================
   الاستجابة — الشريط الجانبي يصير درجاً
   ============================================================ */
@media(max-width:1060px){
  body.app{display:block}
  /* المستند RTL دائماً، والدرج يخرج من حافة اليمين — فالإزاحة فيزيائية
     لا منطقية: inset-inline-end في RTL هو اليسار، وقلبها يُظهر الدرج مفتوحاً. */
  /* الدرج ينزلق تحت الرأس لا فوقه، فيبقى الشعار واسم الأكاديمية ظاهرين */
  .side{position:fixed;top:var(--bar);bottom:0;right:0;width:min(300px,86vw);
    transform:translateX(100%);transition:transform .22s;
    height:calc(100dvh - var(--bar));z-index:100;
    box-shadow:-14px 0 40px rgba(0,0,0,.24)}
  .side.on{transform:none}
  .side-veil{display:block;position:fixed;inset:var(--bar) 0 0;z-index:95;
    background:rgba(2,22,28,.5)}
  .side-veil[hidden]{display:none}
  .bar-menu{display:grid}
  .side-blk-tight{margin-top:var(--s4)}
}
/* جدول من ثلاثة أعمدة فأكثر كان يُسحَق على الشاشة الضيّقة حتى تصير الخلية
   كلمةً في كل سطر وارتفاع الصف ‎288px‎. الحدّ الأدنى يجعل الغلاف يمرّر أفقياً. */
@media(max-width:760px){
  .tw table:has(th:nth-child(3)){min-width:520px}
  .tw table:has(th:nth-child(5)){min-width:660px}
}
@media(max-width:760px){
  :root{--t-h1:26px;--t-h2:21px;--t-base:16.5px;--measure:100%;--bar:56px}
  .bar{padding:0 var(--s4);gap:var(--s3)}
  .bar-crumb{display:none}
  .bar-sec{border:0;padding:0;flex:1}
  /* الروابط النصّية موجودة في رقائق الدرج، وهنا تبتلع اسم القسم */
  .bar-act > a:not(.btn){display:none}
  main{padding:var(--s4) var(--s4) var(--s8)}
  .cover{padding:var(--s5) var(--s5) var(--s4);border-radius:var(--r)}
  .cover h1{max-width:none}
  .sec{padding:var(--s5) var(--s4) var(--s5);border-radius:var(--r)}
  .sec > h2{gap:var(--s3)}
  .sec[id] > h2::before{width:28px;height:28px;font-size:var(--t-xs)}
  .tiles{grid-template-columns:1fr 1fr}
  .resume,.trk,.gapcard,.ent,.term,
  .resume,.trk{padding:var(--s4)}
  .ex-b,.reg-h,.ex-h,.ex-f,.tpl-h,.tpl-foot,.reg-foot,
  .sum-t,.sum-why,.sum-sub,.form-b{padding-inline:var(--s4)}
  /* التعداد كان يفقد نصف عرض السطر على الشاشة الضيّقة */
  .sum-b{padding:var(--s3) var(--s4) var(--s5);padding-inline-start:var(--s6)}
  .dgm{padding:var(--s4)}
  .foot{padding:var(--s5) var(--s4)}
}