/* ============================================================
   styles.css — هوية الجامعة (الخطوط + الألوان) + التابان فقط
   ============================================================ */

/* خط KFUPM الرسمي: IBM Plex Sans Arabic (محلي، يعمل أوفلاين) */
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('../assets/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('../assets/fonts/IBMPlexSansArabic-Medium.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('../assets/fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('../assets/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype'); }

/* خط عناوين KFUPM الرسمي: KFUPM Display (محلي، يعمل أوفلاين) */
@font-face { font-family: 'KFUPM Display'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('../assets/fonts/KFUPM-Regular.ttf') format('truetype'); }
@font-face { font-family: 'KFUPM Display'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('../assets/fonts/KFUPM-Bold.ttf') format('truetype'); }

:root {
  --c-ink:       #14233f;
  --c-ink-soft:  #5d6b82;
  --c-kfupm:     #2c5e65;   /* بترولي الجامعة */
  --c-kfupm-soft:#e7eff0;
  --c-gold:      #c9a25c;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* html بـ overflow:hidden يوقف «ترحيل التمرير» للنافذة، فيصير الـbody هو حاوية التمرير الفعلية
   (بلا هذا يتمرّر جذر المتصفح بشريطه الأصلي ويبقى body.scrollTop = 0 فلا يشتغل شريطنا) */
html { height: 100%; overflow: hidden; }
/* الـbody هو حاوية التمرير — نُخفي شريطه الأصلي ونبني شريطًا مخصّصًا #xscroll نتحكّم في جهته حسب اللغة */
body { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* شريط التمرير المخصّص: عنصر DOM حقيقي ظاهر دائمًا، جهته قرارنا — يسار مع العربي، يمين مع الإنجليزي.
   البنية: سهم أعلى · مسار فيه الإبهام · سهم أسفل */
#xscroll {
  position: fixed; z-index: 46; top: 6px; bottom: 6px; left: 3px; width: 8px;
  display: flex; flex-direction: column; align-items: stretch;
}
html[data-lang="en"] #xscroll { left: auto; right: 3px; }
#xup, #xdown {
  flex: none; height: 10px; border: 0; background: transparent; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #2c5e65; font-size: 6.5px; line-height: 1;
}
#xup:hover, #xdown:hover { color: #1c3f45; }
#xtrack { flex: 1; position: relative; margin: 2px 0; }
#xthumb {
  position: absolute; left: 1px; right: 1px; top: 0; min-height: 30px;
  border-radius: 5px; background: #2c5e65; cursor: grab;
  transition: background .15s;
}
#xthumb:hover { background: #244c52; }
#xthumb:active { background: #1c3f45; cursor: grabbing; }
html[data-theme="dark"] #xthumb { background: #34676f; }   /* بترولي أغمق */
html[data-theme="dark"] #xthumb:hover { background: #3f7b85; }
html[data-theme="dark"] #xthumb:active { background: #4a8d96; }
html[data-theme="dark"] #xup, html[data-theme="dark"] #xdown { color: #3f7b85; }
html[data-theme="dark"] #xup:hover, html[data-theme="dark"] #xdown:hover { color: #4a8d96; }

body {
  background: #fff;
  color: var(--c-ink);
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* [hidden] يكسب دائمًا حتى مع display من كلاس آخر */
[hidden] { display: none !important; }

/* ---------- شريط اللغة (فوق التابين): عربي · English ---------- */
.langbar {
  display: flex; gap: 4px;
  width: fit-content; margin: 16px auto 0;
  background: var(--c-kfupm-soft); border-radius: 10px; padding: 3px;
}
.langbar button {
  border: 0; background: transparent; cursor: pointer;
  padding: 5px 15px; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--c-kfupm);
  transition: background .15s, color .15s;
}
.langbar button.is-active { background: var(--c-kfupm); color: #fff; box-shadow: 0 2px 6px rgba(4, 12, 28, .14); }

/* ---------- التابان أعلى الصفحة: سوق المواد (يمين) · المكتبة (يسار) ---------- */
.tabs {
  display: flex; justify-content: center; gap: 5px;
  width: fit-content; margin: 14px auto 0;
  background: var(--c-kfupm-soft); border-radius: 12px; padding: 4px;
}
.tabs button {
  border: 0; background: transparent; cursor: pointer;
  padding: 9px 26px; border-radius: 9px;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: 16px; font-weight: 700; color: var(--c-kfupm);
  transition: background .15s, color .15s;
}
.tabs button.is-active { background: var(--c-kfupm); color: #fff; box-shadow: 0 2px 7px rgba(4, 12, 28, .18); }

/* ============ الشريط الجانبي: التابان فوق + المظهر واللغة أسفله ============
   يمين مع العربية · يسار مع الإنجليزية (dir يبقى rtl، والقلب عبر html[data-lang]) */
:root { --side-w: 154px; }
.sidebar {
  position: fixed; z-index: 40; top: 0; bottom: 0; right: 0;
  width: var(--side-w);
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 12px; overflow-y: auto;
  background: var(--c-kfupm-soft);
  border-left: 1px solid var(--border);
  box-shadow: -2px 0 14px -8px rgba(13, 42, 72, .16);
}
html[data-lang="en"] .sidebar {
  right: auto; left: 0;
  border-left: 0; border-right: 1px solid var(--border);
  box-shadow: 2px 0 14px -8px rgba(13, 42, 72, .16);
}
/* إفساح مكان الشريط في جسم الصفحة */
body { padding-right: var(--side-w); }
html[data-lang="en"] body { padding-right: 0; padding-left: var(--side-w); }

/* شريط تمرير الشريط الجانبي: بترولي أنحف قليلًا (كان يرث العرض التلقائي ~17px الأعرض من شريط الصفحة) */
.sidebar { scrollbar-width: thin; }
.sidebar::-webkit-scrollbar { width: 9px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(44, 94, 101, .55); border-radius: 99px;
  border: 2px solid transparent; background-clip: padding-box;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(44, 94, 101, .78); background-clip: padding-box; }
html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb { background: #2c5e65; }
html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb:hover { background: #234a50; }

/* شعار الموقع «أكاديميا»: أعلى الشريط الجانبي، محاذى لليمين، بخط الهوية KFUPM Display */
.side-logo {
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700; font-size: 22px; line-height: 1;
  color: var(--c-kfupm); text-align: center;
  padding: 2px 4px 0;
}
html[data-theme="dark"] .side-logo { color: var(--brand-tx); }

/* التابان: صفّان مسطّحان يمتدّان على كامل عرض الشريط من الحافة للحافة (قائمة تنقّل لا أزرار عائمة).
   الهامش السالب يلغي حَشْو الشريط الأفقي فيصل الصف إلى الحافتين، والصف النشط يُظلَّل كاملًا */
.sidebar .tabs {
  flex-direction: column; align-items: stretch;
  width: auto; margin: 0 -12px; padding: 0; gap: 0;
  background: transparent; border-radius: 0;
}
.sidebar .tabs button {
  width: auto;
  display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  padding: 14px 16px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
  color: var(--c-kfupm); font-size: 15px;
}
/* الأيقونة: يمين النص بالعربي (الأيقونة أول عنصر في صفّ rtl) · يسار النص بالإنجليزي (قلب الاتجاه) */
.sidebar .tabs .tab-ic { flex: none; width: 18px; height: 18px; display: block; }
html[data-lang="en"] .sidebar .tabs button { direction: ltr; }
.sidebar .tabs button + button { border-top: 1px solid var(--border); }
.sidebar .tabs button.is-active { background: var(--c-kfupm); color: #fff; box-shadow: none; }

/* أدوات أسفل الشريط: الوضع · المظهر · اللغة */
.side-ctl {
  margin-top: auto; display: flex; flex-direction: column; gap: 9px; align-items: stretch;
  padding-top: 13px; border-top: 1px solid var(--border);
}

/* ============================================================
   مجموعتا الشريط: أبوابُ المحتوى فوق، وسجلُّك أنت في القاع
   ============================================================
   الأوليان (المكتبةُ والركن) أبوابُ **المحتوى**، والأخريان (الاختباراتُ وإحصائيّاتُك)
   سجلّاك أنت — لا تُتصفَّحان بل يُرجع إليهما. فجنسان لا يُقرآن صفًّا واحدًا.
   ===== والدفعُ إلى القاع ‎margin-top: auto‎ على الثانية لا على ‎.side-ctl‎ =====
   الفضلةُ كلُّها تُجمع قبل أوّل هامشٍ تلقائيّ، فمن حمله سبق. وكانت ‎.side-ctl‎ تحمله
   فتلتصق بالقاع وحدَها — فلو بقي عليها لَعلقت المجموعةُ الثانيةُ في الأعلى ملاصقةً
   للأولى، وهو نقضُ الفصل. ولو حملاه معًا لَاقتسما الفضلةَ فوقفت الثانيةُ في الوسط.
   فينتقل الهامشُ إليها، وتُعطى ‎.side-ctl‎ فُرجةً مكتوبةً — **حاملٌ واحدٌ للفضلة**.
   ============================================================ */
.sidebar .tabs--me { margin-top: auto; }
.sidebar .tabs--me + .side-ctl { margin-top: 12px; }
/* وخيطٌ فوقها يقول «جنسٌ آخر» — يبلغ حافّتَي الشريط لأنّ المجموعةَ تنزف إليهما */
.sidebar .tabs--me { border-top: 1px solid var(--border); }
.sidebar .themebar, .sidebar .langbar { width: 100%; margin: 0; }
.sidebar .themebar button, .sidebar .langbar button { flex: 1; justify-content: center; }
.sidebar .langbar button { padding: 6px 6px; font-size: 12px; text-align: center; }

@media (max-width: 560px) {
  :root { --side-w: 116px; }
  .sidebar { padding: 12px 8px; }
  .sidebar .tabs { margin: 0 -8px; }   /* يطابق حَشْو الشريط الأضيق ليصل الصف للحافتين */
  .sidebar .tabs button { font-size: 13.5px; padding: 12px 10px; }
  .sidebar .langbar button { font-size: 11px; }
}

/* ---------- لوحتا المحتوى ---------- */
.panel { min-height: 70vh; max-width: 1180px; margin: 0 auto; padding: clamp(18px, 2.5vw, 30px) clamp(16px, 3vw, 32px); padding-top: 23px; }

/* ---------- أدوات السوق: مستطيل البحث (يمين) + زر التصنيفات (يساره) ---------- */
.market-tools { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(16px, 2vw, 24px); }

/* حقل البحث يبتلع كل المتاح فيمتلئ الصفّ حتى أقصى اليسار (بمحاذاة الخط والنافذة تحته)،
   ويتقلّص وحده كلّما أُضيفت شرائح تصنيف — فالصفّ يبقى ممتلئًا دائمًا بلا فراغ يسار */
.search {
  flex: 1 1 auto; min-width: 180px;
  border: 1.5px solid #d7dee8; border-radius: 11px;
  padding: 10px 15px;
  font-family: inherit; font-size: 14px; color: var(--c-ink);
  outline: none;
  transition: border-color .15s;
}
.search:focus { border-color: var(--c-kfupm); }
.search::placeholder { color: #9fb2cc; }

.filterwrap { position: relative; flex: none; }   /* عرضه ثابت لا ينمو ولا ينكمش */
.btn-filter {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid #d7dee8; background: #fff; cursor: pointer;
  border-radius: 11px; padding: 10px 16px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--c-kfupm);
  transition: border-color .15s, background .15s;
}
.btn-filter:hover { border-color: var(--c-kfupm); background: var(--c-kfupm-soft); }
.btn-filter svg { width: 16px; height: 16px; }
.fbadge {
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  background: var(--c-gold); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* الفلاتر المفعّلة بعد زر التصنيفات: رقاقة لكل فلتر، والنقر (× عند المرور) يحذفه */
/* الشرائح المفعّلة آخر الصفّ (أقصى اليسار): تأخذ عرض محتواها وتنكمش قبل أن ينكمش البحث كثيرًا */
.factive { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; flex: 0 1 auto; }
.fact {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; cursor: pointer;
  background: var(--c-kfupm-soft); color: var(--c-kfupm);
  border-radius: 9px; padding: 6px 11px;
  font-family: inherit; font-size: 12px; font-weight: 700;
  transition: background .15s, color .15s;
}
.fact:hover { background: #f6e3e3; color: #b3433c; }
.fact-x { font-size: 10px; opacity: .65; }

/* لوحة التصنيفات المنسدلة */
.fpanel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  width: 300px;
  background: #fff; border: 1.5px solid #d7dee8; border-radius: 14px;
  padding: 14px 15px;
  box-shadow: 0 16px 38px -16px rgba(13, 42, 72, .3);
}
.fgroup + .fgroup { margin-top: 13px; padding-top: 13px; border-top: 1px solid #eef2f7; }
.fgroup__t { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--c-ink-soft); }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  border: 1.5px solid #d7dee8; background: #fff; cursor: pointer;
  border-radius: 9px; padding: 5px 11px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--c-ink-soft);
  transition: all .15s;
}
.fchip:hover { border-color: var(--c-kfupm); color: var(--c-kfupm); }
.fchip.on { background: var(--c-kfupm); border-color: var(--c-kfupm); color: #fff; }

/* ---------- شبكة المواد (كثيفة — الكتاب هو البطل، اتجاه E) ---------- */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 24px 16px; }
.m-none { color: var(--c-ink-soft); }

/* ---------- مستطيل السوق: البحث والتصنيفات أعلاه، وسطر كتب واحد يُمرَّر أفقيًا ---------- */
.market-box {   /* بلا صندوق: الأدوات وبار الكتب مزروعة بالصفحة مباشرة */
  background: transparent; border: 0; border-radius: 0;
  padding: 0; box-shadow: none;
}
.market-box .market-tools { position: relative; z-index: 2; margin-bottom: clamp(14px, 1.8vw, 20px); }
/* سطر الكتب: فيض أفقي، صف واحد لا يلتفّ، كل بطاقة بعرض ثابت */
#m-grid.m-strip {
  position: relative; z-index: 1;
  display: flex; flex-wrap: nowrap; gap: 18px;
  grid-template-columns: none;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 5px; scroll-padding-inline: 8px;
}
#m-grid.m-strip .crow { flex: 0 0 auto; width: 128px; }
/* شريط تمرير رفيع بلون الهوية */
#m-grid.m-strip::-webkit-scrollbar { height: 8px; }
#m-grid.m-strip::-webkit-scrollbar-thumb { background: #c7d2d5; border-radius: 8px; }
#m-grid.m-strip::-webkit-scrollbar-thumb:hover { background: var(--c-kfupm); }
#m-grid.m-strip::-webkit-scrollbar-track { background: transparent; }
#m-grid.m-strip { scrollbar-width: thin; scrollbar-color: #c7d2d5 transparent; }
.market-box .m-none { padding: 8px 2px; }

/* بطاقة المادة — عمودية بلا إطار: كتاب 3D مائل (الميل الحالي) فوق، والاسم والساعات
   تحته في الوسط. التخطيط العام ثابت لا ينعكس مع اللغة؛ الاستثناء الوحيد (بطلب المستخدم):
   اتجاه ميل الكتاب — عربي: الكعب يمين · English: معكوس */
html[data-lang="en"] .crow { direction: ltr; }
.crow {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 8px 6px 6px;
  background: transparent; border: 0; border-radius: 12px;
  cursor: pointer;
}
.crow:hover .cname { color: var(--c-kfupm); }

.cimg {
  flex: none; width: 98px; height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1.5px dashed #cfd9e0; border-radius: 8px 3px 3px 8px; background: transparent;
  color: #9fb2cc; font-family: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; overflow: hidden; padding: 0;
  transition: border-color .15s, color .15s;
}
.cimg svg { width: 26px; height: 26px; }
.cimg:hover { border-color: var(--c-gold); color: var(--c-gold); }
.cimg.has-img { border-style: solid; }
.cimg img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ الكتاب ثلاثي الأبعاد (الشكل ١ «الميلان الكلاسيكي») ============
   هندسة مستقلة عن مقاس الصورة: الارتفاع ثابت والعرض يتبع نسبة الصورة (بلا قص)،
   كتلة الأوراق والغلاف الخلفي مبنيان على حواف العنصر نفسه.
   عربي: الكعب يمين والأوراق يسار · English: معكوس */
.cimg--book {
  width: auto; height: 150px;
  border: 0 !important; background: transparent !important;
  overflow: visible; border-radius: 0;
  perspective: 720px;
  padding: 2px 8px 8px 14px;   /* متنفس لكتلة الأوراق والظل */
}
.cimg--book .bk { --thk: 12px; }
.bk {
  --thk: 10px; --tilt: 26deg; --r: 3px;
  position: relative; display: block;
  height: 100%; width: fit-content;
  transform-style: preserve-3d;
  transform: rotateY(var(--tilt));
  transition: transform .45s ease;
}
.bk img {
  height: 100%; width: auto; display: block;
  object-fit: unset;                          /* لا قصّ إطلاقًا */
  border-radius: var(--r) 1px 1px var(--r);   /* زوايا جهة الفتح (يسار) */
  transform: translateZ(0.1px);
}
/* كتلة الأوراق على جهة الفتح */
.bk::before {
  content: ''; position: absolute; top: 1px; bottom: 1px;
  left: calc(var(--thk) / -2 + 1px); width: var(--thk);
  background: linear-gradient(90deg, #e3ddcd 0%, #f6f2e7 12%, #e7e1d1 25%, #f6f2e7 38%, #e7e1d1 50%, #f6f2e7 63%, #e7e1d1 75%, #f4efe3 88%, #e3ddcd 100%);
  transform: translateZ(calc(var(--thk) / -2)) rotateY(90deg);
}
/* الغلاف الخلفي + الظل المسقط */
.bk::after {
  content: ''; position: absolute; inset: 0;
  background: #10242b;
  border-radius: 1px var(--r) var(--r) 1px;
  transform: translateZ(calc(var(--thk) * -1));
  box-shadow: 0 8px 16px rgba(13, 42, 72, .3);
}
/* مرور الماوس على البطاقة يعتدل الكتاب نحو الناظر */
.crow:hover .bk { transform: rotateY(7deg); }

/* ============ الغلاف البديل: كتاب ملوّن بالكود (المواد بلا صورة) ============
   نفس هندسة الكتاب 3D، لكن الوجه لوحة متدرّجة بلون الكلية + كود المادة (لاتيني) */
.bk--ph .bkface {
  height: 100%; aspect-ratio: .7; box-sizing: border-box;
  border-radius: var(--r) 1px 1px var(--r);
  background: linear-gradient(150deg, var(--phc1, #3a6f76), var(--phc2, #22454b));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: #eef3f3; text-align: center; padding: 8px;
  transform: translateZ(0.1px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.bk--ph .bkface b {
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: .05em; direction: ltr; opacity: .9;
  max-width: 100%;
}
/* بالعربي: اسم القسم عربي — اتجاه rtl بلا تباعد حروف، ويُسمح بالالتفاف («هندسة حاسب») */
html[data-lang="ar"] .bk--ph .bkface b {
  direction: rtl; letter-spacing: normal; font-size: 14px; line-height: 1.2; white-space: normal;
}
.bk--ph .bkface i {
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; font-weight: 700;
  font-size: 27px; font-style: normal; direction: ltr; line-height: 1;
}
/* لون الغلاف البديل حسب الكلية */
/* لون واحد لكل الأغلفة البديلة: بترولي الهوية (كان لونًا لكل كلية) */
.bk--ph { --phc1: #3a6f76; --phc2: #22454b; }

/* شارة «مثبّتة»: مساهمة ثبّتها الأدمن فتتصدّر القائمة */
.post-pinned {
  display: inline-flex; align-items: center; gap: 3px;
  margin-inline-start: 8px; padding: 1px 7px; border-radius: 7px;
  background: var(--u-gold-hov); color: var(--u-gold);
  font-size: 10.5px; font-weight: 800;
}
.post-pinned svg { width: 11px; height: 11px; }

/* تلميح الكاميرا فوق الكتاب البديل (السوق الرئيسي فقط — النقر يرفع صورة) */
.ph-cam {
  position: absolute; top: 4px; inset-inline-start: 4px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(20, 35, 63, .55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.ph-cam svg { width: 15px; height: 15px; }
button.cimg--ph:hover .ph-cam { opacity: 1; }

/* الكتاب الكبير داخل نافذة المادة (خلفية بترولية) */
.cm-cimg--book {
  width: auto; height: 128px;
  border: 0; background: transparent; overflow: visible;
  perspective: 560px;
  padding: 2px 10px 10px 16px;
  margin-bottom: 12px;
}
.cm-cimg--book .bk--lg { --thk: 15px; --r: 4px; }
.cm-cimg--book .bk--lg::after { box-shadow: 0 14px 26px rgba(4, 12, 18, .5); }
.cm-cimg--book:hover .bk--lg { transform: rotateY(7deg); }

/* بالإنجليزي: كتاب لاتيني — الكعب يسار والأوراق يمين */
html[data-lang="en"] .bk { transform: rotateY(calc(var(--tilt) * -1)); }
html[data-lang="en"] .bk::before { left: auto; right: calc(var(--thk) / -2 + 1px); }
html[data-lang="en"] .bk img { border-radius: 1px var(--r) var(--r) 1px; }
html[data-lang="en"] .bk--ph .bkface { border-radius: 1px var(--r) var(--r) 1px; }
html[data-lang="en"] .bk::after { border-radius: var(--r) 1px 1px var(--r); }
html[data-lang="en"] .crow:hover .bk,
html[data-lang="en"] .cm-cimg--book:hover .bk--lg { transform: rotateY(-7deg); }
html[data-lang="en"] .cimg--book { padding: 2px 14px 8px 8px; }

/* ============ كتاب 3D صغير جدًا: غلاف الكتاب داخل مساهمة «المادة» ============ */
.bk--xs { --thk: 5px; --r: 2px; height: 48px; }
.bk--xs::after { box-shadow: 0 3px 7px rgba(13, 42, 72, .28); }
.bk--xs.bk--ph .bkface { padding: 3px; gap: 1px; }
.bk--xs.bk--ph .bkface b { font-size: 8px; letter-spacing: 0; }
html[data-lang="ar"] .bk--xs.bk--ph .bkface b { font-size: 7.5px; }
.bk--xs.bk--ph .bkface i { font-size: 9px; }
/* عرض الكتاب: كتاب صغير يمينًا واسمه يساره */
.pb-book { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.pb-book__bk { flex: none; perspective: 300px; display: flex; align-items: center; }
.pb-book__n { min-width: 0; color: var(--u-tx-strong); font-weight: 700; font-size: 13px; }
/* (حُذف جلد محرّر «المادة» القديم: ‎.bookedit*‎ و‎.chipe__sel‎ — التحرير صار إنلاين بمستطيلات ‎.chipe‎) */

/* تحرير «المادة» إنلاين: مستطيلات تفاعلية بنفس شكل الكومنت المنشور — نوعية (منسدلة) · نسبة (رقم+سهمان) · وصف · كتاب */
.chipe {
  display: inline-flex; align-items: center; gap: 6px;
  background: #e1c172; color: #14233f;
  padding: 5px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
}
.chipe i { font-style: normal; font-weight: 600; opacity: .8; }
/* لغة/نوعية المادة: مستطيل بحشوة الشِبّة حول المنسدلة المخصّصة (نفس ثيم منسدلة الدكاترة) */
.chipe--type, .chipe--lang { padding: 4px 10px; }
/* توحيد أطوال مستطيلات محرّر «المادة» (الكتاب/اللغة/النوعية/الترابط/الوصف): كلها بارتفاع واحد
   = ارتفاع مستطيل الترابط 34px (نفس معيار محرّر الدكاترة) — حصريًا لمحرّر المادة لا الدكتور */
.fold-peek--edit:not(.fold-peek--rich) > .chipe,
.fold-peek--edit:not(.fold-peek--rich) > .chipe-in--desc { min-height: 34px; box-sizing: border-box; }
.fold-peek--edit:not(.fold-peek--rich) > .chipe--book { align-items: center; }
.chipe--rel b { font-weight: 800; direction: ltr; min-width: 30px; text-align: center; }
.chipe__steps { display: flex; flex-direction: column; gap: 2px; margin-inline-start: 1px; }
/* السهمان يمين الرقم بالعربي (ترتيب DOM) · وبالإنجليزي ينتقلان لأقصى النهاية فيصيران يساره */
html[data-lang="en"] .chipe__steps { order: 1; }
.chipe__steps button {
  border: 0; background: rgba(20, 35, 63, .14); color: #14233f; cursor: pointer;
  border-radius: 3px; width: 17px; height: 11px; padding: 0;
  font-size: 7px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.chipe__steps button:hover { background: rgba(20, 35, 63, .28); }
/* صفّ حقول التحرير يلفّ ويتمركز */
.pk--edit .fold-peek { align-items: flex-start; flex-wrap: wrap; gap: 8px; }   /* الحقول تنمو لأسفل من الأعلى */
/* حقول شفّافة (textarea) داخل المستطيلات الصفراء (حبر داكن) — تتمدّد لأسفل مع النص فلا يُفقد شيء */
.chipe-in {
  border: 0; outline: none; background: transparent; color: #14233f;
  font-family: inherit; font-weight: 700; font-size: 12px; line-height: 1.45;
  resize: none; overflow: hidden; white-space: pre-wrap; word-break: break-word; display: block;
}
.chipe-in::placeholder { color: rgba(20, 35, 63, .5); font-weight: 600; }
.chipe--book { gap: 6px; align-items: flex-start; }
.chipe-bookimg { flex: none; cursor: pointer; display: flex; align-items: center; margin-top: 1px; }
.chipe-in--book { width: 108px; }
/* الوصف مستطيل أصفر عريض قابل للكتابة (يتمدّد لأسفل) */
.chipe-in--desc {
  flex: 1 1 170px; min-width: 130px;
  background: #e1c172; color: #14233f;
  padding: 6px 11px; border-radius: 8px; font-weight: 600; font-size: 12.5px;
}
.chipe-in--desc::placeholder { color: rgba(20, 35, 63, .55); }
/* الوصف داخل عمود محرر الدكتور: سطر واحد يتمدّد مع النص (لا يرث ارتفاع 170px من سياق الصف) */
.fold-peek--rich .chipe-in--desc { flex: none; width: 100%; box-sizing: border-box; }
/* ===== محرّر «الغياب والتأخير»: خمسة عدّادات في صفّ واحد (١٤ ÷ ٥ لا يستقيم، فالشبكة ١٠ هنا)
   ثم شريط الغياب الحيّ تحتها بعرض البطاقة ===== */
.pk--edit .peek-badges.absedit { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.pk--edit .peek-badges.absedit .chipe { grid-column: span 2; }
.absedit__strip { display: flex; justify-content: flex-start; margin-top: 8px; }
.absedit__strip .chipe--absview { flex: none; }

/* ===== محرّر الدكتور: صفٌّ ثالث مستقلّ للانطباع وحده (التأخير انتقل آخر الصفّ الثاني) ===== */
.doc-descwrap { width: 100%; box-sizing: border-box; }
.doc-descwrap .doc-desc-ce { overflow: visible; min-height: 34px; cursor: text; }
.doc-desc-ce:empty::before { content: attr(data-ph); opacity: .55; pointer-events: none; }
/* ===== محرر الدكتور المضغوط: مستطيلات صفراء تتراصّ مثل «المادة» ===== */
/* الإيميل: التلميح (إيميل الدكتور) يمين‑لـ‑يسار، والكتابة (اللاتينية) يسار‑لـ‑يمين */
.chipe--mail .chipe-in--mail { flex: 1 1 auto; width: auto; min-width: 0; direction: ltr; text-align: left; }
.chipe--mail .chipe-in--mail:placeholder-shown { direction: rtl; text-align: right; }
/* شبكة ١٤ عمودًا — تملأ العرض بلا بقايا وتُقسَّم صفّين متساويي الطرفين:
   الصفّ ١: منتقي الدكتور ٤ + الإيميل ٦ + الساعات ٤ = ١٤
   الصفّ ٢: المكتب ٤ + الشرح ٥ + التصحيح ٥ = ١٤
   (الغياب والتأخير خرجا إلى تبويبهما) · والانطباع صفٌّ ثالث كامل العرض خارج الشبكة */
.pk--edit .peek-badges .chipe { min-height: 34px; box-sizing: border-box; width: auto; grid-column: span 5; }
.pk--edit .peek-badges .chipe--wide { grid-column: span 4; }   /* منتقي الدكتور · الساعات */
.pk--edit .peek-badges .chipe--mail { grid-column: span 6; }
.pk--edit .peek-badges .chipe--office { grid-column: span 4; }
/* النص (i) داخل مستطيلات التقييم/الغياب يملأ المتاح ويلتفّ عند الحاجة (لا يتمدّد المستطيل) */
.pk--edit .peek-badges .chipe--rate > i, .pk--edit .peek-badges .chipe--abs > i {
  flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.1; font-size: 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;   /* سطران كحدّ أقصى فلا يطول الصف */
}
.chipe--hour { gap: 3px; padding: 0 6px; justify-content: space-between; }
.chipe--hour > * { min-width: 0; }   /* يسمح للمكوّنات بالتقلّص في العمود الضيّق بدل تجاوزه */
/* عدّاد وسهما التنقّل بين فترات الساعات في التحرير (داخل المستطيل الأصفر) */
.ehnav { flex: none; display: inline-flex; align-items: center; gap: 2px; }
/* عدّاد فترات التحرير: كعدّاد النشر — الجزء يمينًا ثم «/» ثم الكل يسارًا مع العربية، وينقلب مع الإنجليزية */
.ehnav-num { display: inline-flex; align-items: center; gap: 1px; direction: rtl; font-weight: 800; font-size: 9px; color: #14233f; }
.ehnav-num .hn-s { font-style: normal; opacity: .75; }
html[data-lang="en"] .ehnav-num { direction: ltr; }
.ehnav-arrows { display: inline-flex; flex-direction: column; gap: 1px; }
.ehnav-btn { border: 0; background: rgba(20, 35, 63, .14); cursor: pointer; padding: 0; width: 12px; height: 7px; font-size: 6px; line-height: 1; color: #14233f; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.ehnav-btn:hover { background: rgba(20, 35, 63, .26); }
.chipe--hour .mdrop-val { max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chipe--hour .dslot-sep { color: #14233f; opacity: .7; }
/* التصغير حسب عرض المستطيل (عدد الأوقات): ليس ٣ أعمدة = تصغير أوّلي · عمود واحد = تصغير أكبر —
   بلا overflow/containment كي لا تُقصّ القائمة المنبثقة داخل المستطيل */
.chipe--hour:not(.chipe--w3) .mdrop-btn, .chipe--hour:not(.chipe--w3) .mdrop-val,
.chipe--hour:not(.chipe--w3) .tin, .chipe--hour:not(.chipe--w3) .tcolon { font-size: 9.5px; font-weight: 700; }
.chipe--hour:not(.chipe--w3) .tin { width: 13px; height: 15px; line-height: 15px; }
.chipe--hour:not(.chipe--w3) .mdrop-arw { width: 6px; height: 6px; }
.chipe--hour:not(.chipe--w3) .hr-btn { width: 13px; height: 13px; font-size: 10px; }
.chipe--hour:not(.chipe--w3) .mdrop--day .mdrop-val { max-width: 40px; }
.chipe--hour:not(.chipe--w3):not(.chipe--wide) .mdrop-btn, .chipe--hour:not(.chipe--w3):not(.chipe--wide) .mdrop-val,
.chipe--hour:not(.chipe--w3):not(.chipe--wide) .tin, .chipe--hour:not(.chipe--w3):not(.chipe--wide) .tcolon { font-size: 8.5px; }
.chipe--hour:not(.chipe--w3):not(.chipe--wide) .tin { width: 11px; }
.chipe--hour:not(.chipe--w3):not(.chipe--wide) .dslot-sep { display: none; }
.chipe--hour:not(.chipe--w3):not(.chipe--wide) .mdrop--ap .mdrop-arw { display: none; }
.chipe--hour:not(.chipe--w3):not(.chipe--wide) .mdrop--day .mdrop-val { max-width: 30px; }
/* مستطيل مكتب الدكتور: نصفان — المبنى (يمين) · رقم المكتب (يسار) بينهما فاصل */
.chipe--office { gap: 0; padding: 0; overflow: hidden; }
.chipe--office .office-in { flex: 1 1 0; width: auto; min-width: 0; border: 0; background: transparent; outline: none; padding: 4px 10px; color: #14233f; font-family: inherit; font-weight: 800; font-size: 11.5px; text-align: center; }
.chipe--office .office-in::placeholder { color: rgba(20, 35, 63, .45); font-weight: 600; font-size: 10.5px; }
.chipe--office .office-in::selection { background: rgba(44, 94, 101, .22); }
.chipe--office .office-sep { flex: none; width: 1px; align-self: stretch; background: rgba(20, 35, 63, .25); }
/* زرّا الحذف (X يمين) والإضافة (+ يسار) داخل مستطيل الساعة */
.chipe--hour .hr-btn { flex: none; margin: 0; padding: 0; width: 15px; height: 15px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; color: rgba(20, 35, 63, .55); line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.chipe--hour .hr-btn:hover { background: rgba(20, 35, 63, .16); color: #14233f; }
.chipe--hour .hr-del { font-size: 11px; }
.chipe--hour .hr-add { font-size: 15px; font-weight: 800; }
/* ===== قائمة منسدلة مخصّصة (اليوم · ص/م): بثيم الموقع بدل قائمة المتصفّح ===== */
.mdrop { position: relative; display: inline-flex; }
.mdrop-btn { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; cursor: pointer; padding: 0; color: #14233f; font-family: inherit; font-weight: 800; font-size: 11.5px; }
html[data-lang="en"] .mdrop-btn { flex-direction: row-reverse; }   /* السهم يسار الاسم بالإنجليزي */
.mdrop-arw { width: 8px; height: 8px; flex: none; opacity: .65; }
.mdrop-list {
  position: absolute; top: calc(100% + 5px); inset-inline-start: 0; z-index: 60;
  min-width: 88px; display: flex; flex-direction: column; gap: 2px;
  padding: 5px; border-radius: 10px;
  background: #fff; border: 1px solid rgba(20, 35, 63, .12);
  box-shadow: 0 10px 28px rgba(13, 42, 72, .24);
}
html[data-theme="dark"] .mdrop-list { background: #17313a; border-color: rgba(255, 255, 255, .14); box-shadow: 0 10px 28px rgba(0, 0, 0, .55); }
.mdrop--ap .mdrop-list { min-width: 62px; }
.mdrop-opt {
  border: 0; background: transparent; cursor: pointer;
  text-align: start; padding: 6px 10px; border-radius: 7px;
  font-family: inherit; font-weight: 700; font-size: 12px; color: var(--u-tx);
  transition: background .12s, color .12s;
}
.mdrop-opt:hover { background: var(--u-hov); }
.mdrop-opt.on { background: var(--c-kfupm); color: #fff; }
/* ===== حقل وقت مخصّص: خانتا HH:MM (تلميح 00 باهت، بلا تظليل أزرق) + منسدلة ص/م ===== */
.tfield { display: inline-flex; align-items: center; gap: 4px; }
.thm { direction: ltr; display: inline-flex; align-items: center; }
.tin {
  width: 17px; height: 16px; line-height: 16px; border: 0; background: transparent; outline: none; padding: 0;
  color: #14233f; font-family: inherit; font-weight: 800; font-size: 11.5px; text-align: center;
}
.tin::placeholder { color: rgba(20, 35, 63, .4); font-weight: 700; }
.tin::selection { background: rgba(44, 94, 101, .22); }
.tcolon { color: #14233f; font-weight: 800; opacity: .8; }
/* زر «إضافة ساعات مكتبية»: مستطيل أصفر كبقية المستطيلات (لا مُنقّط) — أفرض الأصفر لتجاوز .doc-addtime */
.chipe.chipe--add { background: #e1c172; color: #14233f; border: 0; border-radius: 8px; cursor: pointer; margin: 0; padding: 5px 10px; font-family: inherit; font-weight: 700; font-size: 11.5px; justify-content: center; }
.chipe.chipe--add:hover { background: #d8b45e; }
.chipe--rate { gap: 3px; }
.chipe--abs b { direction: ltr; min-width: 12px; text-align: center; font-weight: 800; }
/* قيمة التقييم: «10 / الدرجة» بترتيب LTR ثابت — الدرجة يمين و«/» بالوسط بالعربي (والعكس بالإنجليزي) */
.rate-v { display: inline-flex; align-items: baseline; gap: 1px; font-weight: 800; direction: ltr; }
html[data-lang="en"] .rate-v { flex-direction: row-reverse; }
.rate-v .rv-num, .rate-v .rv-tot, .rate-v .rv-slash { opacity: 1; font-size: 1em; font-weight: 800; }   /* كل الأرقام بنفس اللون والحجم — لا شيء مميّز */
/* «%» يسار قيمة مقدار الخصم */
.chipe--abs .abs-pct { opacity: .7; font-size: 10px; font-weight: 700; margin-inline-start: 1px; }
/* صفّ أسفل المستطيلات: شريط الغياب (مستطيل أصفر، يمين) + الوصف (يملأ الباقي، يسار) */
.edit-botrow { display: flex; align-items: flex-start; gap: 6px; }
.chipe--absview {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  background: #e1c172; color: #14233f;
  padding: 5px 10px; border-radius: 8px; box-sizing: border-box;
}
.chipe--absview:empty { display: none; }
.chipe--absview .abs-strip, .chipe--absview .abs-leg { margin: 0; }
.chipe--absview .abs-leg { color: inherit; }   /* يرث لون البطاقة (بترولي داكن/فاتح حسب الثيم) */
.edit-botrow .chipe-in--desc { flex: 1 1 auto; width: auto; margin: 0; }
/* زرّا الإرسال/الحذف: تحت الخط في التذييل، أقصى اليسار */
.edit-acts { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.edit-acts .info-sharebtn { margin-inline-start: 0; }
/* صفّ أزرار التحرير أسفل البطاقة: يمينًا (بلا دفع لليسار)، الإرسال ثم الحذف يمينه */
.edit-acts--foot { margin-inline-start: 0; margin-top: 12px; justify-content: flex-start; }
/* زر المشاركة الصغير (مربّع، يسار الرأس مكان زر الطي) */
.info-sharebtn {
  flex: none; margin-inline-start: auto;
  width: 34px; height: 30px; border-radius: 8px;
  background: var(--c-kfupm); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter .15s;
}
.info-sharebtn svg { width: 16px; height: 16px; }
/* أيقونة الإرسال (طائرة ورقية) تشير للأمام: يسارًا مع العربي (انعكاس تناظري) · يمينًا مع الإنجليزي */
html[data-lang="ar"] .info-sharebtn svg { transform: scaleX(-1); }
/* مثلّث التشغيل (‎.ic-play‎) لا يُعكس مع اتجاه القراءة: «تشغيل» رمزٌ عالميّ يشير يمينًا
   في العربية والإنجليزية معًا كما في يوتيوب — بخلاف أسهم الإرسال والتنقّل أعلاه */
.info-sharebtn:hover { filter: brightness(1.12); }
/* زر الإلغاء (✕) يسار زر الإرسال — مربّع صغير محايد، أحمر عند المرور */
.infoedit-del {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: var(--u-hov); color: var(--u-mut); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.infoedit-del svg { width: 15px; height: 15px; }
.infoedit-del:hover { background: var(--u-del-bg); color: var(--u-del-tx); }

/* تذييل التحرير: أيقونتا الإرسال والحذف مباشرةً بلا مربّعات وأصغر حجمًا */
.edit-acts--foot { gap: 13px; }
.edit-acts--foot .infoedit-del {
  width: auto; height: auto; padding: 0; background: transparent; border-radius: 0; box-shadow: none;
}
/* «تمّ» كبسولةٌ شبحيّة: كتلةٌ خفيفة بلا حدّ — تكفي ليُعرف أنه زرّ ولا تكسر إيقاع الأيقونات العارية.
   ومقاسها مقاس الصفّ نفسه (‎11.5px‎ وحشوٌ ‎3×11‎) فترتفع بارتفاع جيرانها لا فوقهم */
.edit-acts--foot .info-sharebtn {
  width: auto; height: auto; box-shadow: none; border: 0;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 11.5px; font-weight: 700; line-height: 1;
  padding: 3px 11px; border-radius: 999px;
  background: var(--u-gold-hov); color: var(--u-gold);
  transition: background .15s;
}
.edit-acts--foot .info-sharebtn:hover {
  filter: none; opacity: 1;
  background: color-mix(in srgb, var(--u-gold) 22%, transparent);
}
/* الحذف مدفوع لأقصى اليسار (الطرف المقابل للدائرة والإرسال) */
.edit-acts--foot .infoedit-del { color: var(--u-fade); margin-inline-start: auto; }
/* السلّة أكثرُ تفصيلًا من الصليب (غطاءٌ ومقبضٌ وشرطتان)، فتحتاج بضعةَ بكسلاتٍ زيادة لتُقرأ */
.edit-acts--foot .infoedit-del svg { width: 15px; height: 15px; }
.edit-acts--foot .infoedit-del:hover { background: transparent; color: var(--u-del-tx); }

/* نافذة تفاصيل تعليق «المادة» (Popup): بطاقة فاتحة تُقرأ فيها التعليق كاملًا */
.cmt-modal { --u-av: #dfe9eb; --u-mut: #5d6b82; --u-tx-strong: #14233f; --u-ph: rgba(20, 35, 63, .5); }
.cmt-modal .mmodal__card--cmt {
  width: min(470px, 92vw); background: #fff; color: #35455c;
  border-radius: 18px; padding: 24px 22px 22px; position: relative;
  max-height: 82vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(13, 42, 72, .35);
}
.cmt-modal .mmodal__card--cmt .mmodal__close { position: absolute; top: 12px; inset-inline-start: 12px; background: #eef2f3; color: #46626b; }
.cmt-modal .mmodal__card--cmt .mmodal__close:hover { background: #e1e8ea; }
.cmt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.cmt-head .post-name { color: #14233f; }
.cmt-head .post-date { color: rgba(20, 35, 63, .5); }
.cmt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.cmt-desc { margin: 0; font-size: 14.5px; line-height: 1.95; color: #35455c; white-space: pre-wrap; word-break: break-word; }

.cname {
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700; font-size: 14.5px; color: var(--c-ink);
  line-height: 1.4; text-align: center;
  transition: color .15s;
}
.chours {
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: 11.5px; font-weight: 600; color: var(--c-ink-soft);
  text-align: center; margin-top: -10px;
}
/* وحدة الساعة (س/h): لاصقة بالرقم، أصغر وأبهت منه */
.chours .hu { font-size: .76em; font-weight: 600; opacity: .5; margin-inline-start: 3px; }

/* ============================================================
   دائرةُ إتقان المادّة — تُعلَّق على حافّة الغلاف لا على ركن البطاقة
   ============================================================
   ثيمُها ثيمُ دائرة اكتمال المساهمات (‎.cc-liquid‎): مسارٌ خافتٌ وحدٌّ ذهبيّ، ويرتفع
   فيها ماءُ «تقدمي الذاتي» (‎.x3-dot‎ في جوفها — الكتلةُ التالية).

   ===== وموضعُها بالبُعد عن الطرف لا بإحداثيّ =====
   كانت معلَّقةً على ركن **البطاقة** (‎top: 2px‎ و‎inset-inline-end: 2px‎). والبطاقةُ عرضُها
   ثابتٌ والغلافُ عرضُه يتبع نسبةَ صورته (‎img‎ بـ‎width: auto‎، والبديلُ ‎aspect-ratio: .7‎)
   — فالفجوةُ بين الدائرة والغلاف تضيق وتتّسع بتبدّل الصورة بلا قاعدة.
   فصارت ابنةَ ‎.bk‎، وهو ‎width: fit-content‎ يلبس الغلافَ أيًّا كان:
     · ‎right: 100%‎ تضع حافّتَها اليمنى على حافّة الغلاف اليسرى **مهما اتّسع أو ضاق**.
     · والفُرجةُ مشتقّةٌ من الكتاب نفسِه: كتلةُ الأوراق تبرز يسارَ الوجه، وحافّتُها
       الخارجيّة عند ‎--thk/2 − 1‎ بعينها (‎.bk::before { left: calc(var(--thk) / -2 + 1px) }‎).
       فالفُرجةُ **هي تلك الحافّة**: الدائرةُ تلامس ورقَ الكتاب ولا تركبه. (وكانت
       ‎+ 4px‎ ثمّ ‎+ 1px‎، فقُلّلت مرّتين حتى بلغت الحدّ — وما دونها دخولٌ في الورق.)
   ونظامٌ واحدٌ للكتاب المفرد ولكتابَي حزمة المعمل: ‎--thk‎ في الاثنين ‎12px‎ (من
   ‎.cimg--book .bk‎) فالفُرجةُ ‎7px‎ سواءً بسواء — لا رقمَ يُكتب مرّتين فيفترقا.

   ‏**والترتيبُ مقصود:** المنطقيّتان تُصفَّران أوّلًا ثمّ تُكتب ‎right‎ الماديّة — لأنّ
   ‎inset-inline-start‎ هي ‎right‎ في العربيّة، فلو تأخّرت لَمحت ما قبلها. والحافّةُ
   ماديّةٌ في اللغتين كما شريطُ النشاط سواءً بسواء.
   و‎.bk‎ حاوٍ موضَّعٌ و‎preserve-3d‎، فتميل الدائرةُ في مستوى الغلاف وتعتدل معه عند مرور
   الماوس — جزءٌ من الكتاب لا لوحٌ مسطّحٌ يعوم بجانبه */
.cstat {
  position: absolute; z-index: 5; margin: 0;
  top: 4px; bottom: auto;
  inset-inline-start: auto; inset-inline-end: auto; left: auto;
  right: 100%; margin-right: calc(var(--thk, 10px) / 2 - 1px);
  width: 19px; height: 19px; border-radius: 50%; overflow: hidden;
  border: 1.6px solid rgba(168, 132, 46, .45); background: rgba(44, 94, 101, .1);
}
.cstat__fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--c-gold); transition: height .3s ease;
}
.cstat__fill::before {   /* حافة مويهة أعلى السائل — مثل دائرة الاكتمال */
  content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 4px;
  border-radius: 50%; background: var(--c-gold);
}
/* ============================================================
   وجوفُ الدائرة: دائرةُ «تقدمي الذاتي» نفسُها تسكنها
   ============================================================
   ‏‎.cstat‎ تبقى **الحلقةَ والزجاج**: حدُّها الذهبيُّ ومسحتُها البتروليّة وقصُّها الدائريُّ
   مبنيّةٌ لسطح المكتبة، وثيمُها الليليُّ مكتوبٌ من قبل. وتدخلها ‎.x3-dot‎ لتُعطي **الماء**
   وحدَه — فلا حلقتان ولا أرضيّتان.
   وهي مبنيّةٌ لصفوف الشجرة: مُطلَقةٌ تتدلّى ‎30px‎ في جهة البدء بقدٍّ ثابتٍ ‎18‎. فتُردّ
   ههنا إلى ‎inset: 0‎ فتملأ مضيفَها مهما اختلف قدُّه (‎19‎ في البطاقة و‎16‎ في حزمة المعمل).

   ===== وحدُّها يُنزع ولا يُلوَّن =====
   حدُّ ‎.x3-dot‎ ‎1.5px‎ من ‎--u-in-line‎ — حلقةٌ ثانيةٌ داخل حلقة ‎.cstat‎. فيُصفَّر، ويبقى
   الجوفُ كلُّه ماءً.

   ===== وفخُّ نطاق التوكنات =====
   ‏‎--u-*‎ ليست على ‎:root‎؛ حاملوها ‎#cm-ui‎ و‎#nook‎ وإخوتُهما — والرفُّ ليس منهم، فلا
   يبلغه ‎--u-gold‎ ويصير سائلُ التقدُّم شفّافًا **بلا صياح**. فيُعرَّف على ‎.cstat‎ من
   ذهبِ الموقع العامّ (‎--c-gold‎ على ‎:root‎) — توكنٌ واحدٌ يُعار لا كتلةٌ تُنسخ.
   وأمّا سائلا الحكم (‎.x3-lqa‎ و‎.x3-lqa__g‎) فمكتوبان بقيمتيهما احتياطًا في أصلهما،
   فيبلغان كلَّ سطح.
   والأرضيّةُ (‎--x3-paper‎) لا تُعرَّف: بطاقةُ الرفّ شفّافةٌ على لوح المكتبة، ومسحةُ
   ‎.cstat‎ تحتها هي الأرضيّة — فلو صُبّ ورقٌ لَحجبها */
.cstat { --u-gold: var(--c-gold); }
.cstat > .x3-dot {
  position: absolute; inset: 0; width: auto; height: auto;
  border: 0; border-radius: 50%; transform: none; z-index: 0;
}
.cstat > .x3-dot:not(.on) { background: none; }

/* ---------- المكتبة: شريط اليوم (تاريخ ميلادي + ساعة السعودية) ---------- */
/* شريطا التاريخ والوقت في الشريط الجانبي (فوق زرّي المظهر): التاريخ فوق ثم الوقت تحته */
.sb-date, .sb-time {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; box-sizing: border-box;
  background: var(--surface); border-radius: 10px;
  box-shadow: 0 1px 3px rgba(13, 42, 72, .07);
  color: var(--c-ink);
}
.sb-date {
  padding: 7px 8px; font-size: 11.5px; font-weight: 600;
  text-align: center; line-height: 1.35;   /* التاريخ الطويل يلتف على أكثر من سطر في الشريط الضيّق */
}
.sb-time { padding: 6px 8px; }
.sb-time svg { width: 15px; height: 15px; color: var(--c-kfupm); flex: none; }
.sb-time span {
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700; font-size: 13px; color: var(--c-kfupm);
  /* اتجاه rtl: الأرقام تبقى بترتيبها (11:42:33) على اليمين و«ص/م» يسارها كما بالعربي */
  direction: rtl; unicode-bidi: embed;
  min-width: 84px; text-align: center;   /* ثبات العرض مع تغيّر الأرقام كل ثانية */
}

/* ---------- المكتبة: شريط الأترام ---------- */
/* بلا مستطيل حاوٍ: المربعات تجلس مباشرةً على خلفية الصفحة */
.termbar {
  position: relative;   /* مرجع الصندوق المنسدل تحت مربع الترم */
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  min-height: 50px;
  transition: padding-bottom .18s ease;
}
.termbar .term-input { align-self: center; }   /* زر الإضافة يتمدّد بطول المربعات (stretch) */
/* الترم قيد التسمية: الاسم حقل كتابة داخل المربّع نفسه — حدّ ذهبي خفيف ومؤشّر جاهز */
.tpill.is-naming { border-color: var(--c-gold); }
.tp-name[contenteditable] {
  outline: none; cursor: text; min-width: 40px;
  border-bottom: 1.5px dashed var(--c-gold);
  padding-bottom: 1px;
}

/* اللسان المنسدل: ابن صغير لمربع الترم — ينزل من تحت طبقته (z أدنى، أعلاه مدسوس خلفه)،
   بدرجة أغمق من بترولي المربع المحدد وزوايا سفلية مدوّرة فقط */
.tpill { position: relative; z-index: 1; }   /* المربع فوق اللسان دائمًا */
/* الشريط المنسدل: ⚙ إعدادات الترم يمينًا · خط فاصل خفيف · زر + يسارًا */
.term-drop {
  position: absolute; z-index: 0;
  width: 72px; height: 30px;
  background: #234c55;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 7px 14px -8px rgba(13, 42, 72, .5);
  display: flex; align-items: stretch;
  padding-top: 5px;   /* المحتوى في الجزء الظاهر أسفل حافة المربع */
}
.term-drop:not([hidden]) { animation: dropIn .2s ease; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.drop-sep { flex: none; width: 1px; align-self: center; height: 15px; background: rgba(255, 255, 255, .22); }
.drop-add, .drop-gear {
  flex: 1 1 0; min-width: 0;
  border: 0; cursor: pointer;
  background: transparent; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.drop-add { border-radius: 0 0 0 12px; font-size: 15px; font-weight: 800; line-height: 1; background: #e1c172; color: #14233f; }
.drop-gear { border-radius: 0 0 12px 0; color: rgba(255, 255, 255, .82); }
.drop-gear svg { width: 14px; height: 14px; display: block; }
.drop-gear:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.drop-add:hover { background: #d3ad57; color: #14233f; }
html[data-lang="en"] .drop-add { border-radius: 0 0 12px 0; }
html[data-lang="en"] .drop-gear { border-radius: 0 0 0 12px; }
.term-list { display: contents; }
.tpill {
  /* تتمدد بالتساوي لتملأ عرض الشريط دائمًا، وتتقلص كلما أُضيف ترم جديد */
  flex: 1 1 0; min-width: 0;
  container-type: inline-size;   /* مرجع cqw لاسم الترم */
  min-height: 43px;              /* ارتفاع مستطيل البحث في المكتبة — البِيل المحدَّد يتجاوزه بمحتواه */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700; font-size: 14.5px; color: var(--c-kfupm);
  background: #fff; border: 1.5px solid #d7dee8; border-radius: 9px;
  padding: 6px 12px 7px;
  overflow: hidden;              /* لا يخرج نصٌّ من المربع مهما ضاق (حذف ترم يعيد توزيع العروض) */
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tp-name {
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(10.5px, 7cqw, 14.5px);   /* يتصغر مع تقلص المربع */
}

/* ===== الأكورديون التلقائي: المفتوح واسع بكل معلوماته · البقيّة أسماء فقط =====
   بلا زرّ تحكّم — الحالة تتبع الترم المفتوح وحده */
.tpill.slim {
  flex: 0 1 auto;              /* عرضه من محتواه لا بالتساوي */
  container-type: normal;      /* يكسر دائرة cqw: العرض من المحتوى والخط من العرض */
  padding: 10px 18px;
}
.tpill.slim .tp-row { display: none; }
.tpill.slim .tp-name { font-size: 13.5px; }   /* حجم صريح بدل cqw */
/* التاريخ (مربع italic) + البار + «سيبدأ» في صفٍّ واحد
   (مُقيَّد بـ.tpill كي لا يغلبه .tp-row الخاصّ بمنبثقة المواضيع أسفل الملف) */
.tpill .tp-row { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 3px; min-width: 0; padding: 0; }
.tpill .tp-row .tp-prog { flex: 1 1 auto; width: auto; margin-top: 0; min-width: 34px; }
/* العناصر الجانبية تتقلّص وتُقصّ بدل أن تفيض خارج المربع */
.tpill .tp-dates, .tpill .tp-soon { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* مربّع ضيّق جدًّا (أترام كثيرة كلها واسعة): يبقى البار وحده تحت الاسم */
@container (max-width: 132px) {
  .tp-dates, .tp-cal, .tp-soon { display: none; }
}
/* التاريخ/الأيقونة صارا عرضًا فقط — لا مؤشّر نقر (التعديل عبر زر الإعدادات ⚙) */
.tp-cal { flex: none; width: 16px; height: 16px; opacity: .7; }
.tp-cal svg { display: block; width: 100%; height: 100%; }
.tp-dates {
  position: relative; z-index: 0;
  flex: none; white-space: nowrap;
  font-size: 9.5px; font-weight: 600;
  color: #5d6b82; padding: 2px 9px; line-height: 1.4;
  direction: ltr; unicode-bidi: embed;
}
/* المستطيل نفسه مائل لليمين (شكل italic) بحواف حادّة — الخلفية تُمال والنصّ يبقى مستقيمًا */
.tp-dates::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #eef2f5; transform: skewX(-11deg);
}
/* زر إعدادات الترم ⚙: أعلى-يسار المربع — يظهر فقط على الترم المحدد (.on) */

/* بالإنجليزي: النص داخل حقول الكتابة يتجه يسارًا */
html[data-lang="en"] .search,
html[data-lang="en"] .term-input,
html[data-lang="en"] .dm-field { direction: ltr; }

/* ---------- الأشرطة التي تتبع اتجاه اللغة بالإنجليزي (بطلب المستخدم) ----------
   ١) أدوات السوق: البحث يسارًا وزر Filters يمينه (في التاب والنافذة المنبثقة)
   ٢) شريط اليوم: التاريخ أولًا يسارًا ثم الوقت يمينه
   ٣) شريط الأترام: الأترام تبدأ من اليسار وزر الإضافة آخرها يمينًا */
html[data-lang="en"] .market-tools { direction: ltr; }
html[data-lang="en"] .fpanel { left: auto; right: 0; }   /* اللوحة تنسدل داخل الحاوية لا خارجها */
html[data-lang="en"] .termbar { direction: ltr; }
/* ٤) مواد مكتبة الترم: تصطف من اليسار إلى اليمين */
html[data-lang="en"] #lib-grid { direction: ltr; }
.tpill.on .tp-row { color: rgba(255, 255, 255, .78); }
.tpill.on .tp-dates { color: rgba(255, 255, 255, .92); }
.tpill.on .tp-dates::before { background: rgba(255, 255, 255, .16); }
/* البِيل المحدَّد بارتفاع البقية (43px): كل شيء في سطرٍ واحد — الاسم يمينًا ثم التاريخ/البار/سيبدأ */
.tpill.on { flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; }
.tpill.on .tp-name { flex: none; font-size: 13.5px; }
.tpill.on .tp-row { flex: 1 1 auto; width: auto; margin-top: 0; }
/* ⚙ الإعدادات (يمين الاسم) · + إضافة المواد (نهاية البار يسارًا): أيقونتان بلا مربّع، صغيرتان */
.tp-gear, .tp-add { flex: none; border: 0; background: transparent; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; }
.tp-gear { width: 18px; height: 18px; color: rgba(255, 255, 255, .7); }
.tp-gear:hover { color: #fff; }
.tp-gear svg { width: 14px; height: 14px; display: block; }
.tp-add { width: 20px; height: 20px; color: #e1c172; margin-inline-start: 1px; }
.tp-add:hover { color: #f0d68f; }
.tp-add svg { width: 17px; height: 17px; display: block; }

/* خط إكمال الترم (تحت الأيقونة/التاريخ):
   بلا تواريخ = رمادي بالكامل · لم يبدأ = مسار فارغ · جارٍ = تعبئة بترولية بنسبة اليوم · انتهى = أخضر كامل */
/* البار صار حاويًا: التعبئة طبقةٌ خلفية والكسر طبقةٌ فوقها في المنتصف */
.tp-prog {
  position: relative; width: 100%; height: 15px; margin-top: 2px;
  border-radius: 8px; background: #e6ebf0; overflow: hidden;
}
.tp-prog .tp-fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 8px; }
html[dir="rtl"] .tp-prog .tp-fill { inset: 0 0 0 auto; }
.tp-prog--none { background: #bfc9d2; }
.tp-prog--run .tp-fill { background: var(--c-kfupm); }
.tp-prog--done .tp-fill { background: #4e9d57; }
/* «9/180» طبقةً فوق البار — بالعربية: المُنجز يمينًا ثم «/» ثم الكل يسارًا */
.tp-frac {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  direction: rtl; font-size: 9.5px; font-weight: 800; line-height: 1;
  color: #46626b; text-shadow: 0 1px 2px rgba(255, 255, 255, .55);
}
html[data-lang="en"] .tp-frac { direction: ltr; }
.tp-frac .hn-s { font-style: normal; opacity: .65; }
.tpill.on .tp-frac { color: #fff; text-shadow: 0 1px 3px rgba(4, 20, 26, .6); }
/* «سيبدأ بعد 45 يومًا» يسار التاريخ داخل صفّه */
.tp-soon {
  flex: none; font-size: 9.5px; font-weight: 700; color: #8fa3ad;
  background: #eef2f5; border-radius: 20px; padding: 1px 7px; white-space: nowrap;
}
.tpill.on .tp-soon { color: #14233f; background: #e1c172; }

/* على الترم المحدد (خلفية بترولية) */
.tpill.on .tp-prog { background: rgba(255, 255, 255, .28); }
.tpill.on .tp-prog--none { background: rgba(255, 255, 255, .45); }
.tpill.on .tp-prog--run .tp-fill { background: #e1c172; }
.tpill.on .tp-prog--done .tp-fill { background: #9fd8ae; }
.tpill:hover { border-color: var(--c-kfupm); }
.tpill.on { background: var(--c-kfupm); border-color: var(--c-kfupm); color: #fff; box-shadow: 0 2px 7px rgba(4, 12, 28, .18); }

/* الإطار المرقّط تحت الشريط: مواد الترم المحدد (الإضافة من زر + المنسدل داخل الشريط) */
.term-frame {
  margin-top: 14px;
  min-height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 20px;
  border: 1.5px dashed #b9c8cf; border-radius: 16px;
}
.term-frame .cgrid { width: 100%; }
/* بِكرة مواد الترم: الإطار flex بمحاذاة وسطية، ومحتوى البِكرة مطلق التموضع فلا عرض ذاتيّ له
   — بلا width:100% ينكمش الحاوي إلى صفر فتختفي الكتب */
.term-frame #lib-grid { width: 100%; align-self: stretch; }
/* متى ما وُجدت مادة واحدة على الأقل: يختفي التنقيط ويبقى المحتوى */
.term-frame.has-items { border: 0; padding: 0; min-height: 0; }
.btn-addcourse {
  border: 0; cursor: pointer;
  background: var(--c-kfupm); color: #fff;
  border-radius: 11px; padding: 11px 24px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 14px -6px rgba(44, 94, 101, .55);
  transition: background .15s, transform .15s;
}
.btn-addcourse:hover { background: #24505a; transform: translateY(-1px); }

/* ---------- النافذة المنبثقة: سوق المواد بثيم بترولي الجامعة ---------- */
.mmodal {
  position: fixed; inset: 0; z-index: 85;
  background: rgba(4, 12, 20, .72);
  display: flex; align-items: center; justify-content: center;
}
.mmodal__card {
  width: min(960px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column;
  background: linear-gradient(155deg, #38707a 0%, #2c5e65 55%, #1f4850 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  padding: 18px 20px;
  color: #eef5f6;
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, .7);
}
/* نافذة إضافة المواد للترم وحدها: سطح هادئ بلا تدرّج فيروزي فاقع، وعتمة خلفية أخفّ —
   يماشي ورقة القُمرة (نفس قيم اللاب) بدل اللوح الصلب */
#market-modal { background: rgba(8, 20, 24, .58); }
#market-modal .mmodal__card {
  background: #16272b;
  border-color: #25403f;
  box-shadow: 0 20px 52px -24px rgba(0, 0, 0, .6);
}
/* الجلد الفاتح: ورقة بيضاء بحبر داكن — الأدوات والمعالج بداخلها مصمَّمة للداكن فتُقلَب هنا */
html[data-theme="light"] #market-modal { background: rgba(20, 35, 63, .3); }
html[data-theme="light"] #market-modal .mmodal__card {
  background: #ffffff; border-color: #dbe6e6; color: #35455c;
  box-shadow: 0 2px 10px rgba(20, 35, 63, .06), 0 22px 54px -26px rgba(20, 35, 63, .45);
}
html[data-theme="light"] #market-modal .mmodal__title { color: #2c5e65; }
html[data-theme="light"] #market-modal .mmodal__close { border-color: #dbe6e6; color: #5d6b82; }
html[data-theme="light"] #market-modal .mmodal__close:hover { background: rgba(44, 94, 101, .09); color: #2c5e65; }
/* أدوات البحث والتصنيفات */
html[data-theme="light"] #market-modal .search,
html[data-theme="light"] #market-modal .btn-filter {
  background: #fff; border-color: #dbe6e6; color: #35455c;
}
html[data-theme="light"] #market-modal .search::placeholder { color: rgba(20, 35, 63, .42); }
html[data-theme="light"] #market-modal .btn-filter:hover { background: rgba(44, 94, 101, .07); border-color: #c9dadb; }
html[data-theme="light"] #market-modal .m-none { color: #5d6b82; }
html[data-theme="light"] #market-modal .fact { background: rgba(44, 94, 101, .1); color: #35455c; }
html[data-theme="light"] #market-modal .fact:hover { background: #f6e3e3; color: #b3433c; }
/* أسماء الكتب في الشريط */
html[data-theme="light"] #market-modal .cname { color: #14233f; }
html[data-theme="light"] #market-modal .chours { color: #5d6b82; }
html[data-theme="light"] #market-modal .crow:hover .cname { color: #2c5e65; }
/* معالج «جهّز نسختك» داخل النافذة */
html[data-theme="light"] #market-modal .wiz__t b { color: #14233f; }
html[data-theme="light"] #market-modal .wiz__prog { color: #a8842e; }
html[data-theme="light"] #market-modal .wiz__secname { color: #5d6b82; }
html[data-theme="light"] #market-modal .wiz-empty { color: rgba(20, 35, 63, .55); }
html[data-theme="light"] #market-modal .wpick__dot { border-color: rgba(44, 94, 101, .45); }
html[data-theme="light"] #market-modal .wpick.on .wpick__dot {
  border-color: #a8842e; background: radial-gradient(circle, #a8842e 0 45%, transparent 50%);
}
html[data-theme="light"] #market-modal .wpick__card { background: rgba(44, 94, 101, .05); border-color: rgba(44, 94, 101, .16); }
html[data-theme="light"] #market-modal .wpick:hover .wpick__card { border-color: rgba(168, 132, 46, .55); }
html[data-theme="light"] #market-modal .wpick.on .wpick__card { border-color: #a8842e; background: rgba(168, 132, 46, .07); }
html[data-theme="light"] #market-modal .wlikes { color: #5d6b82; }
html[data-theme="light"] #market-modal .wiz-btn { border-color: rgba(44, 94, 101, .28); color: #35455c; }
html[data-theme="light"] #market-modal .wiz-btn:hover:not(:disabled) { background: rgba(44, 94, 101, .08); }
.mmodal__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mmodal__title {
  margin: 0;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: 21px; font-weight: 700; color: #fff;
}
.mmodal__close {
  margin-inline-start: auto;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28); background: transparent; cursor: pointer;
  color: #eef5f6; font-size: 15px; line-height: 1;
  transition: background .15s;
}
.mmodal__close:hover { background: rgba(255, 255, 255, .14); }

/* أدوات السوق داخل النافذة: نصف شفافة على البترولي */
.mmodal .search {
  background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); color: #eef5f6;
}
.mmodal .search:focus { border-color: var(--c-gold); }
.mmodal .search::placeholder { color: rgba(238, 245, 246, .55); }
.mmodal .btn-filter {
  background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); color: #eef5f6;
}
.mmodal .btn-filter:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); }

.mmodal__scroll { overflow-y: auto; overflow-x: hidden; padding: 2px; }
.mmodal .m-none { color: #cfe0e3; }
.mmodal .fact { background: rgba(255, 255, 255, .13); color: #eef5f6; }
.mmodal .fact:hover { background: rgba(199, 91, 91, .4); color: #fff; }

/* ============================================================
   شريط الكتب المتمركز — نفس بطاقات السوق (كتاب 3D بميله الطبيعي + الاسم + الساعات)
   لكن بتمرير يلتقط كتابًا في المنتصف. لا دوران ولا لوحة معلومات ولا تسطيح للكتاب.
   الإبراز (أسلوب ١): الكتاب المتمركز أكبر بوضوح والجيران أصغر — تدرّج حجمي بالبُعد (--ad).
   الموقع الأفقي (--x) من الـ JS.
   ============================================================ */
.book-reel { user-select: none; padding: 6px 0 2px; }
/* عدّاد الشريط: تحت منتصف الكتب — الجزء يمينًا ثم «/» ثم الكل يسارًا مع العربية، وينقلب مع الإنجليزية */
.reel-count {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  /* المسرح أطول من الكتب ليتّسع للمتمركز المكبَّر، فيُرفَع العدّاد بصريًّا ليقارب اسم الكتاب.
     الرفع بـtop لا بهامش سالب: الهامش السالب يقلّص ارتفاع الصندوق فيصعد معه الخطّ الفاصل تحته
     ويلتصق بالعدّاد — أما top فلا يمسّ التخطيط، فيبقى الخطّ مكانه ويبقى بينهما فراغ */
  direction: rtl; margin-top: 2px; position: relative; top: -14px; z-index: 1; min-height: 16px;
  font-size: 11.5px; font-weight: 800; color: var(--u-lab);
  font-variant-numeric: tabular-nums;
}
.reel-count .hn-s { font-style: normal; opacity: .6; margin: 0 1px; }
.reel-count .hn-t { opacity: .72; font-weight: 700; }
html[data-lang="en"] .reel-count { direction: ltr; }

.reel-stage {
  position: relative; height: 296px;   /* أطول ليتّسع للمتمركز المُكبَّر + تعويمه بلا قصّ */
  overflow: hidden;
  touch-action: none;
  -webkit-mask: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.reel-track { position: absolute; inset: 0; }
.reel-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* تكبير واضح: المتمركز (--ad=0) بمقياس ١٫٢، وكل خطوة ابتعاد تصغّره — فيبرز جليًّا */
.reel-slot {
  position: absolute; left: 50%; top: 50%;
  width: 132px;
  transform: translate(calc(-50% + var(--x, 0px)), -50%) scale(calc(1.2 - var(--ad, 0) * .22));
  transform-origin: center center;
  transition: none;
  cursor: pointer;   /* كل كتاب قابل للنقر — النقر يوجّه المسطرة إليه */
}
/* إبراز لطيف عند المرور فوق كتاب غير متمركز (الـtransform محجوز للتموضع، فنستخدم filter) */
.reel-slot:not(.is-center):hover { filter: brightness(1.08); }
.reel-slot .crow { width: 132px; }
.reel-slot.is-center .crow .bk { transform: rotateY(9deg); }   /* المتمركز يعتدل قليلًا نحو الناظر */
html[data-lang="en"] .reel-slot.is-center .crow .bk { transform: rotateY(-9deg); }

/* أسلوب ١٢ (Cover Flow): انعكاس أرضي باهت تحت غلاف الكتاب المتمركز (على غلاف الكتاب فقط، لا الاسم) */
.reel-slot.is-center .crow .cimg--book {
  -webkit-box-reflect: below 1px linear-gradient(rgba(255, 255, 255, .28), transparent 30%);
}
/* أسلوب ١٣: تعويم حيّ — البطاقة المتمركزة تطفو بلطف مستمر (2D على .crow حتى لا يتشوّه الكتاب 3D) */
.reel-slot.is-center .crow { animation: reel-bob 3.1s ease-in-out infinite; }
@keyframes reel-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .reel-slot.is-center .crow { animation: none; } }

/* ====== حزمة مادة اللاب في البار: «التفتّح» — مروحة مغلقة ← انقسام مفتوح (مُدار بـ --o من الـJS) ======
   المحاضرة (يمين) والمعمل (يسار)؛ كل مكوّن transform = قيمة‑الإغلاق + فرق×var(--o)،
   فينفصلان بسلاسة مع اقتراب الحزمة من المنتصف، والجيران يُدفَعون (بالـJS). */
.crow.bundle .bundle-books { position: relative; width: 132px; height: 150px; }
/* الشفافية/الفلتر يُنعّمان بانتقال (للتبديل بالنقر)؛ التحويل بلا انتقال (البلوم يُدار كل إطار) */
.crow.bundle .cimg--book { position: absolute; left: 50%; top: 0; cursor: pointer;
  transition: opacity .32s ease, filter .32s ease; }
.reel-slot.is-center .crow.bundle .cimg--book { -webkit-box-reflect: none; }   /* لا انعكاس مزدوج */
/* مؤشّر «المحدَّد» (أسلوب ١): الكتاب غير المحدَّد يبهت — والتعتيم مربوط بنسبة الفتح --o
   فلا تعتيم وهي مغلقة/بعيدة (o=0)، ويبدأ تدريجيًا وينساب مع فتحها للمنتصف (o→1) */
.crow.bundle .cimg--book:not(.sel) { opacity: calc(1 - .6 * var(--o, 0));
  filter: grayscale(calc(.5 * var(--o, 0))) brightness(calc(1 - .12 * var(--o, 0))); }
.crow.bundle .lec { z-index: 3; transform: translateX(calc(-50% + 10px + 64px * var(--o, 0))) translateY(calc(5px - 5px * var(--o, 0))) rotate(calc(7deg - 7deg * var(--o, 0))); }
.crow.bundle .lab { transform: translateX(calc(-50% - 6px - 68px * var(--o, 0))) translateY(calc(-2px + 2px * var(--o, 0))) rotate(calc(-4deg + 4deg * var(--o, 0))) scale(calc(.95 + .05 * var(--o, 0))); }

/* شارة النشاط: شريط ركني قطري «كلاسيكي» على غلاف كل كتاب — أعلى‑اليسار عربي / أعلى‑اليمين إنجليزي.
   داخل الغلاف (bkface) المقصوص، فيميل مع الكتاب؛ يعمل للغلاف الملوّن وللصورة الحقيقية. */
/* مرساةُ الشريط وقصُّه: القصُّ هو الذي يحبس الشريطَ القطريَّ في ركنه — وهو نفسُه
   الذي أخرج دائرةَ الاكتمال من ههنا إلى ‎.bk‎، فما خرج عن الوجه لا يُرى */
.crow.bundle .bkface { overflow: hidden; position: relative; }
.crow.bundle .bkface--img { display: inline-block; position: relative; height: 100%; vertical-align: top; border-radius: var(--r, 3px) 1px 1px var(--r, 3px); }
.crow.bundle .bkface--img img { height: 100%; width: auto; display: block; }
html[data-lang="en"] .crow.bundle .bkface--img { border-radius: 1px var(--r, 3px) var(--r, 3px) 1px; }

.crow.bundle .ribbon { position: absolute; z-index: 4; pointer-events: none;
  top: 9px; right: -24px; width: 78px; transform: rotate(45deg);
  background: var(--c-kfupm); color: #fff; text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .38);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 22%, transparent 78%, rgba(0, 0, 0, .3)); }
/* المعمل: تدرّج أسود بدل الأخضر */
.crow.bundle .cimg--book.lab .ribbon { background-color: #0f0f13;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 22%, transparent 78%, rgba(0, 0, 0, .35)), linear-gradient(160deg, #3a3a42, #131318 55%, #060608); }
/* والشريطُ صفٌّ لا كتلة: فيه الآن أيقونةُ النشاط وكلمتُه، فلو بقي ‎block‎ لَنزلت
   الأيقونةُ سطرًا فوق الكلمة وطال الشريطُ على المائل. والأيقونةُ تُغلَّظ في CSS
   (‎stroke-width‎ يغلب سمةَ الرسم) لأنّ ‎2‎ في قدّ ‎9px‎ خيطٌ لا يكاد يُرى */
.crow.bundle .ribbon .rtxt { display: flex; align-items: center; justify-content: center; gap: 3px;
  font-size: 8px; font-weight: 800; padding: 2px 0; line-height: 1.2; letter-spacing: .02em; }
.crow.bundle .ribbon .rtxt svg { width: 9px; height: 9px; flex: none; stroke-width: 2.4; }
/* ===== والشريطُ انتقل إلى الزاوية العلويّة اليمنى في اللغتين =====
   كان يسارًا بطلبٍ سابق، فلمّا طُلبت **دائرةُ الاكتمال** في ذلك الركن بعينه لم يسعهما
   معًا: الشريطُ يقطع الركنَ قطعًا قطريًّا لا يترك فيه موضعًا لدائرة (‎§٢٩‎ فيه القياس).
   والركنان في الغلاف اثنان، والدائرةُ أولى بيسارِه لأنّها أختُ دوائرِ الموقع كلِّها —
   والشريطُ خبرٌ عن جنس الكتاب يُقرأ في أيّ ركنٍ وقع.
   والانعكاسُ تامٌّ: ‎right‎ بدل ‎left‎ و‎rotate(45)‎ بدل ‎rotate(-45)‎ — فيبقى الشكلُ
   على حاله مرآةً، لا شريطًا مائلًا في اتّجاهٍ خاطئ */

/* ولا قاعدةَ خاصّةً بحزمة المعمل بعد اليوم: كانت تنقل الدائرةَ إلى ركنٍ آخر وتُلبسها
   جلدًا ثانيًا (حدٌّ أبيضُ وجوفٌ داكنٌ وظلّ) لأنّها كانت تقف **على وجه الغلاف** فتحتاج
   ما يفصلها عن الصورة تحتها. وقد خرجت من الوجه إلى جانبه، فسقط سببُ الجلد الثاني —
   وصارت على لوح المكتبة كأختها في الكتاب المفرد، فتلبس جلدَها الواحد.
   ويبقى المفترقُ الحقيقيُّ وحدَه: كتابان لا كتابٌ، ولكلٍّ دائرتُه من رحلة نشاطه */

/* ---------- نافذة تفاصيل المادة (ثيم الجامعة البترولي) ---------- */
.mmodal__card--course { width: min(1040px, 96vw); }   /* أوسع: عمودان جنب بعض */
html[data-lang="en"] .mmodal__card--course input,
html[data-lang="en"] .mmodal__card--course textarea { direction: ltr; }


/* ============================================================
   نافذةُ «استورد من المكتبة» — بابان ثمّ واجهةُ المكتبة نفسُها
   ============================================================
   شاشتان في بطاقةٍ واحدة: بابان (الشروح · البطائق والملخصات)، ثمّ ‎#cm-ui‎ تُعار
   إلى جوفها كما تُعار إلى رفّ الموارد. فما ههنا **جلدُ الصَّدَفة** لا جلدُ المحتوى:
   المحتوى يجيء بجلده معه، ولا تُنسخ له قاعدةٌ واحدة.

   ===== وجلدُها جلدُ النوافذ الهادئة لا التدرّجُ البتروليّ =====
   في الموقع جلدان للنوافذ: تدرّجٌ بترولـيٌّ فاقع (‎.mmodal__card‎ افتراضًا)، وسطحٌ
   هادئٌ مصمت تلبسه النوافذُ الطويلةُ المزدحمة — «أضف موادّ للترم» (‎#market-modal‎)
   و«إعدادات الترم» (‎#date-modal‎) ومنتقي بنود القُمرة (‎.nkw‎). وقِيَمُه واحدةٌ في
   الثلاثة حرفًا بحرف، وهذه رابعتُها:

   | | داكن | فاتح |
   |---|---|---|
   | العتمة | ‎rgba(8,20,24,.58)‎ | ‎rgba(20,35,63,.3)‎ |
   | السطح | ‎#16272b‎ | ‎#ffffff‎ |
   | الحدّ | ‎#25403f‎ | ‎#dbe6e6‎ |
   | الحبر | ‎var(--u-tx)‎ | ‎#35455c‎ |
   | العنوان | ‎#fff‎ (الافتراض) | ‎#2c5e65‎ |

   ولمَ الهادئُ لا الفاقع؟ لأنّ جوفها **واجهةُ المكتبة** — مساهماتٌ وصورٌ وأشجار،
   وهي مصمَّمةٌ لتقع على سطحٍ مصمت (‎.nkw‎ تُثبت ذلك: تعرض صفوفَ المكتبة نفسَها على
   ‎#16272b‎). والتدرّجُ تحت هذا القدر من المحتوى يُتعب العين ويسرق تباينَ الصفوف.

   ===== ولا توكنات ‎--u-*‎ لأبواب النافذة =====
   ‏‎--u-*‎ مقصورةٌ على حامليها، وكانت الأبوابُ تستعيرها بحاملٍ يذوب. وأُسقط ذلك:
   النوافذُ الهادئةُ الثلاثُ تكتب جلدَ أدواتها **صريحًا بلونين** (انظر ‎.btn-filter‎ و
   ‎.dm-field‎)، لا بتوكنٍ عامّ — فتتبع هذه أختَها. و‎#cm-ui‎ وحدَها تحتاج التوكنات،
   وهي حاملةٌ بنفسها في الكتلتين (والفاتحةُ ذُكرت فيها باسم جوف هذه النافذة).
   ============================================================ */
#jri-modal { background: rgba(8, 20, 24, .58); }
#jri-modal .mmodal__card {
  background: #16272b; border-color: #25403f;
  box-shadow: 0 20px 52px -24px rgba(0, 0, 0, .6);
}
/* ولا عرضَ يُصرَّح: ‎.mmodal__card--course‎ عليها، وهي الواسعةُ نفسُها التي تسع المكتبة.
   ===== وجوفُها كتلةٌ تُمرَّر لا عمودٌ مرن =====
   ‏‎min-height: 0‎ لازمٌ لأنّه بندٌ في عمودٍ مرن سقفُه ‎88vh‎ (وافتراضُ ‎min-height‎ في
   المرن ‎auto‎، فلا ينزل عن قامة محتواه فيفيض على البطاقة لا فيها).
   وكتلةٌ لا عمود: ‎#cm-ui‎ حين تُعار تكون ‎display: contents‎ في الداكن و‎block‎ في
   الفاتح (كلتاهما من كتلتَي التوكنات) — ولو كان الجوفُ عمودًا مرنًا لَاختلف تخطيطُه
   بين الجلدَين. وهو ما يفعله مضيفُ الرفّ (‎.nk-res__host‎) بعينه */
#jri-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* وترويستُها صفٌّ: بابُ الرجوع ثمّ العنوان ثمّ ✕ — و‎.mmodal__close‎ تدفع نفسَها يسارًا */
/* ===== وطرفا الترويسة أيقونتان عاريتان: الرجوعُ يمينًا و‎✕‎ يسارًا =====
   كان طوقُ ‎✕‎ باقيًا وطوقُ الرجوع منزوعًا، فقُرئا زوجًا غيرَ متكافئ — والحكمُ نُزعا
   معًا. ولا حدَّ ولا خلفيّةَ مرور: يظلم الزرُّ عند المرور وبس، كما صُنع بزرّ السلّة.
   وههنا يصحّ ما لا يصحّ في سائر النوافذ: ترويستُها **ثلاثةُ أجزاء** لا اثنان (رجوعٌ
   وعنوانٌ وإغلاق)، فطوقان فيها ازدحامٌ — وفي غيرها ‎✕‎ وحدَها فطوقُها يجمعها */
.jri-back {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px;
  padding: 0; border: 0; background: transparent; color: #bcd3d8; cursor: pointer;
  transition: color .15s;
}
.jri-back:hover { color: #fff; }
.jri-back svg { width: 20px; height: 20px; display: block; }
#jri-modal .mmodal__close {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; font-size: 17px;
  border: 0; border-radius: 0; background: transparent; color: #bcd3d8;
  transition: color .15s;
}
#jri-modal .mmodal__close:hover { background: transparent; color: #fff; }
.jri-lead {
  margin: 0 0 14px; font: 500 13.5px 'IBM Plex Sans Arabic', sans-serif;
  color: #bcd3d8;
}
.jri-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jri-door {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 11px; padding: 30px 16px; cursor: pointer;
  border: 1px solid #25403f; border-radius: 14px;
  background: rgba(255, 255, 255, .035); color: #d5e4e7;
  font: 600 14.5px 'IBM Plex Sans Arabic', sans-serif;
  transition: background .15s, border-color .15s, color .15s;
}
.jri-door:hover {
  background: rgba(201, 162, 92, .12); border-color: #c9a25c; color: #fff;
}
/* والأيقونةُ لها قدٌّ ههنا غيرُ قدِّها في الشريط — كما في رفّ الموارد */
.jri-door > i { display: block; }
.jri-door > i svg { width: 28px; height: 28px; display: block; }
.jri-door > b { font-weight: 600; }
@media (max-width: 620px) { .jri-doors { grid-template-columns: 1fr; } }

/* ===== وما يُخفى من الواجهة المُعارة =====
   ترويستُها (اسمُ المادّة و✕) وشريطُ أقسامها السبعة: القسمُ مُعلَنٌ في ترويسة النافذة،
   والتنقّلُ بين البابين ببابِ الرجوع لا بسبعةِ ألسنة. والإخفاءُ صنفٌ على الحاضن لا
   تبديلٌ فيها — فهي تعود إلى المكتبة كما كانت */
#jri-body #cm-ui > .mmodal__head { display: none; }
#jri-body #cm-ui .cm-panel > .cm-tabs { display: none; }
/* ===== ولا «ابدأ» على غلافٍ ههنا =====
   مفتاحُ «ابدأ» (‎.cx-pktest‎) يحدّد الرزمةَ كلَّها ثمّ يُنزل شريطَ التحديد لتذاكر أو
   تختبر — وهو فعلٌ **على رزمتك في المكتبة**. وفي نافذة الاستيراد أنت تنظر لتنتقي،
   والمقصدُ رحلتُك لا جلسةُ مذاكرةٍ تبدأ الآن؛ فزرُّ بدءٍ ههنا بابٌ يخرج بك من النافذة
   التي فتحتَها. فيُخفى — منتقًى على الحاضن، والغلافُ يعود إلى المكتبة بمفتاحه.
   و‎display: none‎ لا ‎visibility‎: الرأسُ صفٌّ مرنٌ بفُرجة، فالإخفاءُ يطوي الفُرجةَ معه */
#jri-body .x3-pkhd > .cx-pktest { display: none; }

/* ===== ولا صندوقَ وسيطًا: النافذةُ هي الصندوق =====
   ‏‎.cm-pane‎ في المكتبة **سطحٌ قائمٌ بنفسه**: خلفيّةٌ وحدٌّ وانحناءٌ وقامةٌ ثابتة وتمريرٌ
   داخليّ — لأنّها تقع في صفحةٍ أو في نافذةٍ فيها غيرُها، فتحتاج ما يحدُّها.
   وههنا **لا شيءَ معها في النافذة**، فحدُّها حدٌّ ثانٍ داخل حدّ، وتمريرُها شريطٌ ثانٍ
   داخل شريط. فيُنزع السطحُ كلُّه وتُعاد القامةُ إلى المحتوى، ويُترك التمريرُ للنافذة:
   شريطٌ واحدٌ على حافّتها اليسرى (‎rtl‎) لا شريطٌ في جوف مربّع.
   ولا تُعدَّل ‎.cm-pane‎ نفسُها: النزعُ منتقًى على الحاضن — فهي تعود إلى المكتبة بسطحها */
#jri-body #cm-ui .cm-pane {
  height: auto; min-height: 240px; max-height: none;
  overflow: visible;
  padding: 0;
  background: none; border: 0; border-radius: 0;
}
/* والتمريرُ صار تمريرَ النافذة، فيلبس جلدَ شريط المكتبة نفسَه — نحيفًا مدوّرًا ذهبيًّا */
#jri-body { scrollbar-width: thin; scrollbar-color: rgba(225, 193, 114, .65) transparent; }
#jri-body::-webkit-scrollbar { width: 9px; }
#jri-body::-webkit-scrollbar-track { background: transparent; }
#jri-body::-webkit-scrollbar-thumb {
  background: rgba(225, 193, 114, .65); border-radius: 99px;
  border: 2px solid transparent; background-clip: padding-box;
}
#jri-body::-webkit-scrollbar-thumb:hover { background: rgba(225, 193, 114, .82); background-clip: padding-box; }

/* ===== رصيفُ الأسفل: خبرٌ · وجهةٌ · فعل =====
   ثلاثةُ أجناسٍ في صفٍّ واحد، وترتيبُها ترتيبُ القراءة: **ما حدَّدتَ** أوّلًا (يمينًا)،
   ثمّ **إلى أين يذهب**، ثمّ **الفعلُ** في أقصى اليسار — حيث يقع الفعلُ في نوافذ الموقع.
   وهو قائمٌ من أوّل فتحةٍ وإن خلا: صفٌّ يظهر فجأةً بعد أوّل تحديدٍ يُقفز التخطيطَ،
   وخانةٌ تقول «حدِّد ما تريد» تُعرّف بالنافذة قبل الدخول.
   ===== وتوكنٌ واحدٌ يُعرَّف ههنا =====
   أصنافُ المسار (‎.cd-seg‎ · ‎.cd-sl‎ · ‎.cd-fic‎) تقرأ ‎--u-lab‎ بقيمةٍ احتياطيّة،
   والرصيفُ ليس حاملًا للتوكنات. فيُعرَّف عليه وحدَه بالجلدَين — تعريفٌ موضعيٌّ مقصود،
   لا استعمالٌ لتوكنٍ خارج حامله */
.jri-dock {
  --u-lab: #bcd3d8;
  flex: none; display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid #25403f;
}
/* ===== وعدّاداتُه أيقونةٌ ورقمٌ وبس =====
   ولا لفظَ ولا فاصلةَ بينها: **الفجوةُ تفصل**. والنقطةُ إنّما تلزم حين يلتصق لفظٌ بلفظ،
   وقد ذهب اللفظُ فذهبت معه. والقدُّ والحبرُ قدُّ شريط التحديد وحبرُه (‎.cx-selbar__c‎)
   فالعدّادُ عدّادٌ حيثما وقع — ولا رقمَ في الموقع يُكتب بخطٍّ ثالث */
.jri-sum {
  display: flex; align-items: center; gap: 13px; min-width: 0; flex-wrap: wrap;
  font: 600 12.5px 'IBM Plex Sans Arabic', sans-serif; color: #d5e4e7;
}
.jri-n { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.jri-n > i { display: block; flex: none; width: 17px; height: 17px; color: var(--u-lab); }
.jri-n > i svg { width: 100%; height: 100%; display: block; }
.jri-n > b {
  font-family: 'KFUPM Display', inherit; font-size: 16px; font-weight: 700;
  line-height: 1; color: inherit;
}
.jri-none2 { font-weight: 500; color: var(--u-lab); }
/* والمسارُ يُدفع إلى اليسار بما بينه وبين الخبر، فيلتصق بالفعل */
.jri-path { position: relative; display: flex; align-items: center; gap: 6px; margin-inline-start: auto; min-width: 0; }
.jri-dbtn {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  padding: 4px 8px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: #d5e4e7;
  font: 600 12.5px 'IBM Plex Sans Arabic', sans-serif;
  transition: background .15s, color .15s;
}
.jri-dbtn:hover, .jri-dbtn.is-open { background: rgba(255, 255, 255, .07); color: #fff; }
.jri-dbtn .cd-segl > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jri-drop { display: block; flex: none; color: var(--u-lab); transition: transform .16s; }
.jri-drop svg { width: 13px; height: 13px; display: block; }
.jri-dbtn.is-open .jri-drop { transform: rotate(180deg); }
/* ===== والقائمةُ تنسدل إلى **فوق** =====
   الرصيفُ في قاع البطاقة، فقائمةٌ تنزل منه تقع خارج النافذة. فمرساها ‎inset-block-end‎
   فوق زرّها — وهي في ‎.jri-path‎ وهو ‎relative‎، والبطاقةُ بلا ‎overflow‎ فلا تُقصّ */
.jri-dlist {
  position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 0;
  z-index: 6; display: flex; flex-direction: column; gap: 2px;
  min-width: 220px; max-height: 264px; overflow: auto;
  padding: 6px; border-radius: 12px;
  background: #1b2f33; border: 1px solid #25403f;
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .78);
}
.jri-dopt {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 9px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: #d5e4e7; text-align: start;
  font: 600 12.5px 'IBM Plex Sans Arabic', sans-serif;
  transition: background .13s, color .13s;
}
.jri-dopt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jri-dopt:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.jri-dopt.on { background: rgba(201, 162, 92, .14); color: #e1c172; }
/* والفعلُ وحدَه ملوَّن: هو الشيءُ الوحيدُ في الرصيف الذي يُغيّر شيئًا */
.jri-go {
  flex: none; padding: 8px 20px; border-radius: 10px; cursor: pointer;
  border: 1px solid #c9a25c; background: rgba(201, 162, 92, .14); color: #e1c172;
  font: 700 13px 'IBM Plex Sans Arabic', sans-serif;
  transition: background .15s, color .15s, border-color .15s;
}
.jri-go:hover:not(:disabled) { background: #c9a25c; color: #16272b; }
.jri-go:disabled { border-color: #25403f; background: transparent; color: #6f8a90; cursor: not-allowed; }
@media (max-width: 620px) {
  .jri-dock { flex-wrap: wrap; }
  .jri-path { margin-inline-start: 0; }
}

/* ===== الجلدُ الفاتح — ورقةٌ بيضاء، بقيم أخواتها الثلاث ===== */
html[data-theme="light"] #jri-modal { background: rgba(20, 35, 63, .3); }
html[data-theme="light"] #jri-modal .mmodal__card {
  background: #ffffff; border-color: #dbe6e6; color: #35455c;
  box-shadow: 0 2px 10px rgba(20, 35, 63, .06), 0 22px 54px -26px rgba(20, 35, 63, .45);
}
html[data-theme="light"] #jri-modal .mmodal__title { color: #2c5e65; }
html[data-theme="light"] #jri-modal .mmodal__close { color: #5d6b82; }
html[data-theme="light"] #jri-modal .mmodal__close:hover { background: transparent; color: #2c5e65; }
html[data-theme="light"] .jri-back { color: #5d6b82; }
html[data-theme="light"] .jri-back:hover { color: #2c5e65; }
html[data-theme="light"] .jri-lead { color: #5d6b82; }
html[data-theme="light"] .jri-door {
  background: #fff; border-color: #dbe6e6; color: #35455c;
}
html[data-theme="light"] .jri-door:hover {
  background: rgba(168, 132, 46, .07); border-color: #a8842e; color: #14233f;
}
html[data-theme="light"] .jri-dock { --u-lab: #5d6b82; border-top-color: #dbe6e6; }
html[data-theme="light"] .jri-sum { color: #35455c; }
html[data-theme="light"] .jri-dbtn { color: #35455c; }
html[data-theme="light"] .jri-dbtn:hover,
html[data-theme="light"] .jri-dbtn.is-open { background: rgba(44, 94, 101, .09); color: #14233f; }
html[data-theme="light"] .jri-dlist {
  background: #fff; border-color: #dbe6e6;
  box-shadow: 0 2px 10px rgba(20, 35, 63, .06), 0 18px 44px -20px rgba(20, 35, 63, .45);
}
html[data-theme="light"] .jri-dopt { color: #35455c; }
html[data-theme="light"] .jri-dopt:hover { background: rgba(44, 94, 101, .07); color: #14233f; }
html[data-theme="light"] .jri-dopt.on { background: rgba(168, 132, 46, .1); color: #8a6a20; }
html[data-theme="light"] .jri-go { border-color: #a8842e; background: rgba(168, 132, 46, .1); color: #8a6a20; }
html[data-theme="light"] .jri-go:hover:not(:disabled) { background: #a8842e; color: #fff; }
html[data-theme="light"] .jri-go:disabled { border-color: #dbe6e6; background: transparent; color: #9aa7b8; }

/* ---------- عرض المادة داخل صفحة المكتبة (ROADMAP-LIB) ----------
   واجهة #cm-ui واحدة بجلدين عبر التوكنات: القيم الداكنة افتراض (النافذة كما هي)،
   و.lib-course يبدّل قيم التوكنات فقط فتنزرع الواجهة على الأبيض بلا كتلة مجلوبة */
/* منتقي المساهمات يرث نفس جلد الواجهة ليُقرأ المحتوى بثيمه (مع إعادة display لأنه بطاقة نافذة) */
/* ‎#card-modal‎ نفسها في القائمة لا بطاقتُها وحدها: منتقي النوع ورصيف الوجهة سطحان
   شقيقان للبطاقة، فلو بقيت التوكنات فيها لَما ورثا الذهبيّ ولا التسميات — ويُستثنى ‎display‎ أدناه */
#cm-ui, #nook, .pick-modal .mmodal__card, .nkwork .nkw, #card-modal, #card-modal .mmodal__card,
.vw-tok,
.xt-skin {
  display: contents;
  /* الجلد الداكن (افتراض النافذة) — كل قيمة تطابق اللون الصلب السابق حرفيًا */
  --u-scheme: dark;
  --u-tx: #eef5f6;                       /* نص المحتوى */
  --u-tx-strong: #fff;                   /* القيم والأسماء */
  --u-lab: #bcd3d8;                      /* التسميات */
  --u-btntx: #d5e4e7;                    /* نص الأزرار والتابات */
  --u-mut: #cfe0e3;                      /* نص خافت (لايك/أيقونات) */
  --u-ph: rgba(238, 245, 246, .45);      /* placeholder + التاريخ */
  --u-ph2: rgba(238, 245, 246, .55);     /* «لا مشاركات بعد» */
  --u-fade: rgba(255, 255, 255, .5);     /* أيقونات/أزرار حذف هادئة */
  --u-gold: #e1c172;                     /* الذهبي النصّي والحدودي */
  --u-gold-dash: rgba(225, 193, 114, .55);
  --u-gold-hov: rgba(225, 193, 114, .15);
  --u-surf: rgba(255, 255, 255, .07);    /* سطوح البطاقات */
  --u-stub-bg: rgba(255, 255, 255, .03); /* كومنت البذرة */
  --u-in-bg: rgba(255, 255, 255, .09);   /* خلفية الحقول */
  --u-ctl: rgba(255, 255, 255, .1);      /* خلفية مجموعات الأزرار */
  --u-hov: rgba(255, 255, 255, .12);     /* خلفية hover */
  --u-line: rgba(255, 255, 255, .14);    /* حدود البطاقات والفواصل */
  --u-div: rgba(255, 255, 255, .09);     /* فاصل شريط الهوية */
  --u-in-line: rgba(255, 255, 255, .22); /* حدود الحقول */
  --u-dash: rgba(255, 255, 255, .35);    /* الحدود المرقّطة */
  --u-av: rgba(255, 255, 255, .16);      /* خلفية الأفاتار */
  --u-rb: rgba(255, 255, 255, .16);      /* مكعب تقييم مطفأ */
  --u-badge: rgba(255, 255, 255, .16);   /* شارة محايدة */
  --u-track: rgba(255, 255, 255, .12);   /* مسار الأشرطة */
  --u-stripe: rgba(255, 255, 255, .08);  /* تهشير المتبقي */
  --u-rest: rgba(255, 255, 255, .6);     /* نص المتبقي */
  --u-good: #8fd0a0;                     /* «اكتمل التوزيع» */
  --u-mid: rgba(255, 255, 255, .35);     /* غياب بين المجاني والخصم */
  --u-del-bg: rgba(199, 91, 91, .4);     /* hover الحذف */
  --u-del-tx: #fff;
  --u-like: #e88f8f;
  --u-like-on-bg: rgba(199, 91, 91, .35);
  --u-like-on-tx: #ffb3b3;
  --u-stypeon-bg: rgba(255, 255, 255, .9);
  --u-stypeon-tx: #14233f;
}
.lib-course {
  margin-top: 24px;                /* الهامش بين أسفل مواد الترم والخط */
  border-top: 2px solid #d5e2e6;   /* الخط الفاصل تحت مواد الترم */
  padding-top: 26px;
}
html[data-theme="light"] .lib-course #cm-ui, html[data-theme="light"] #market-course #cm-ui, html[data-theme="light"] #nook,
html[data-theme="light"] #jri-body #cm-ui, html[data-theme="light"] .vw-tok,
html[data-theme="light"] .pick-modal .mmodal__card, html[data-theme="light"] .nkwork .nkw,
html[data-theme="light"] #card-modal .mmodal__card,
html[data-theme="light"] .xt-skin {
  display: block;
  /* الجلد الأبيض: حبر داكن وسطوح بمسحة بترولية خفيفة وذهبي مُغمق (تباين AA) */
  --u-scheme: light;
  --u-tx: #35455c;
  --u-tx-strong: #14233f;
  --u-lab: #5d6b82;
  --u-btntx: #46626b;
  --u-mut: #5d6b82;
  --u-ph: rgba(20, 35, 63, .4);
  --u-ph2: rgba(20, 35, 63, .5);
  --u-fade: rgba(20, 35, 63, .42);
  --u-gold: #a8842e;
  --u-gold-dash: rgba(168, 132, 46, .5);
  --u-gold-hov: rgba(168, 132, 46, .1);
  --u-surf: rgba(44, 94, 101, .06);
  --u-stub-bg: rgba(44, 94, 101, .03);
  --u-in-bg: #fff;
  --u-ctl: rgba(44, 94, 101, .09);
  --u-hov: rgba(44, 94, 101, .12);
  --u-line: rgba(44, 94, 101, .18);
  --u-div: rgba(20, 35, 63, .1);
  --u-in-line: rgba(44, 94, 101, .3);
  --u-dash: rgba(44, 94, 101, .38);
  --u-av: #dfe9eb;
  --u-rb: rgba(44, 94, 101, .15);
  --u-badge: #e7eff0;
  --u-track: rgba(44, 94, 101, .12);
  --u-stripe: rgba(44, 94, 101, .08);
  --u-rest: rgba(20, 35, 63, .5);
  --u-good: #2f8a53;
  --u-mid: #c9d6da;
  --u-del-bg: rgba(199, 91, 91, .14);
  --u-del-tx: #a8433c;
  --u-like: #b8564f;
  --u-like-on-bg: rgba(199, 91, 91, .14);
  --u-like-on-tx: #a8433c;
  --u-stypeon-bg: #2c5e65;
  --u-stypeon-tx: #fff;
}


/* ============================================================
   نافذةُ الدورة — مُشغّلُ رزمة «الشروح»
   ============================================================
   جلدُها جلدُ النوافذ الهادئة: «أضف موادّ للترم» و«إعدادات الترم» ومنتقي بنود القُمرة
   و«استورد من المكتبة» — بقيمها حرفًا بحرف (انظر ‎#jri-modal‎). والقاعدةُ التي تضعها
   فيها: **ما جوفُه محتوًى يقع على سطحٍ مصمت**، وجوفُ هذه مُشغّلٌ وشجرة.
   ===== وحاملُ التوكنات يذوب =====
   الشجرةُ تقرأ ‎--u-*‎، والنافذةُ ليست حاملًا. فـ‎.vw-tok‎ في الكتلتين، ويُردّ إلى
   ‎contents‎ ههنا بـ‎html[data-theme]‎ — لأنّ الكتلة الفاتحة تفرض ‎block‎ على حامليها،
   وهذه الكتلةُ **بعدها في المصدر** فترجَح عند تساوي النوعيّة.
   ============================================================ */
html[data-theme] .vw-tok { display: contents; }
#vw-modal { background: rgba(8, 20, 24, .58); }
/* وأوسعُ من أخواتها: جوفُها عمودان — مُشغّلٌ ومسارٌ فيه لكلّ شرحٍ اسمٌ ومدّةٌ وثلاثةُ
   أخبار. و‎96vw‎ يبقى سقفًا فلا تخرج عن شاشةٍ ضيّقة */
#vw-modal .mmodal__card {
  width: min(1180px, 96vw);
  background: #16272b; border-color: #25403f;
  box-shadow: 0 20px 52px -24px rgba(0, 0, 0, .6);
}
/* والترويسةُ: الغلافُ ثمّ الاسمُ ثمّ ✕ — والغلافُ رسمُ ترويسة الرزمة نفسُه، فلا يُقاس ثانيةً.
   ===== و✕ عاريةٌ لا في دائرة =====
   حكمُ نافذة الاستيراد نفسُه، وعلّتُه ههنا أقوى: ترويستُها **ثلاثةُ أجسام** (غلافٌ
   وعنوانٌ و✕)، وطوقٌ حول أحدها يجعله أثقلَ الثلاثة وهو أهونُها. ولا خلفيّةَ مرورٍ
   كذلك: يظلم الحبرُ وبس — كما صُنع بزرّ السلّة وببابِ الرجوع */
.vw-head { gap: 10px; }
#vw-modal .mmodal__close {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; font-size: 17px;
  border: 0; border-radius: 0; background: transparent; color: #bcd3d8;
  transition: color .15s;
}
#vw-modal .mmodal__close:hover { background: transparent; color: #fff; }
#vw-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 18px;
}
/* ===== وجوفُها نصفان: المُشغّلُ ثمّ المسار =====
   والصفحةُ ‎rtl‎ فأوّلُ بندٍ في الشبكة يقع يمينًا — فالمستطيلُ الكبيرُ يمينًا والمسارُ
   يساره، كما طُلب. و‎min-height: 0‎ في الاثنين: بندٌ في شبكةٍ لا ينزل عن قامة محتواه
   إلّا بها، فلولاها لَفاض المسارُ على البطاقة بدل أن يُمرَّر في جوفه */
.vw-body {
  flex: 1 1 auto; min-height: 0;
  /* ===== والمُشغّلُ عمودٌ مقيسٌ والمسارُ هو الذي يتمدّد =====
     كان العكس: المُشغّلُ ‎1fr‎ والمسارُ رقمًا ثابتًا. ولمّا وُضع للمُشغّل سقفٌ في العرض
     (‎620‎) صار عمودُه يأخذ ما فضل ثمّ **لا يملؤه** — فينفتح بينه وبين المسار فراغٌ
     ميّتٌ يُقرأ هامشًا، وهو ليس هامشًا بل عمودٌ زائدٌ عن حاجته.
     فانقلب القسمُ: المُشغّلُ ‎minmax(0, 620px)‎ — يأخذ قدَّه ولا يزيد وينكمش إن ضاقت
     الشاشة — والمسارُ ‎1fr‎ يبتلع كلَّ ما بقي. فلا فراغَ يبقى بينهما أصلًا.
     والفجوةُ ‎16 ⇦ 10‎: هي فاصلٌ بين لوحين لا هامشُ صفحة */
  display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 10px;
}
.vw-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
/* المستطيلُ الكبير: نسبةُ الفيديو محجوزةٌ فلا يقفز التخطيطُ بين شرحٍ وشرح.
   وسقفُ عرضه في **عمود الشبكة** لا فيه: لو كان فيه لَبقي العمودُ أوسعَ منه ففاض
   بينهما فراغ (انظر ‎.vw-body‎) */
.vw-screen {
  flex: none; aspect-ratio: 16 / 9; width: 100%; overflow: hidden;
  border-radius: 12px; background: #0b1417; border: 1px solid var(--u-line);
  display: grid; place-items: center;
}
.vw-screen > * { width: 100%; height: 100%; }
.vw-screen .vp-video { display: block; object-fit: contain; background: #000; }
/* وإطارُ يوتيوب يملأ الشاشةَ كما يملؤها الملفّ: لا حدَّ له ولا خلفيّةَ — الإطارُ يرسم
   لنفسه. و‎display: block‎ لأنّه ‎inline‎ بأصله فيترك تحته فسحةَ سطرٍ تُقرأ خيطًا */
.vw-screen .vp-yt { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.vw-screen .vp-linkscreen {
  display: grid; place-items: center; align-content: center; gap: 8px;
  text-decoration: none; color: var(--u-gold); font: 600 13px 'IBM Plex Sans Arabic', sans-serif;
}
.vw-screen .vp-bigplay { font-size: 30px; line-height: 1; }
.vw-screen .vp-empty { display: grid; place-items: center; color: var(--u-ph); }
.vw-cap { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.vw-nm {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 14px 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; color: var(--u-tx-strong);
}
.vw-dur { flex: none; font: 700 11.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--u-gold);
  direction: ltr; font-variant-numeric: tabular-nums; }
/* والبابُ إلى يوتيوب في طرف السطر: خبرٌ ثانويٌّ لا يُزاحم الاسمَ، ويُدفع بما بينهما */
.vw-out {
  flex: none; margin-inline-start: auto; text-decoration: none;
  font: 600 11.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--u-lab);
  transition: color .15s;
}
.vw-out:hover { color: var(--u-gold); }
.vw-empty { margin: auto; padding: 40px 0; font-size: 12.5px; color: var(--u-ph); }
/* والمسارُ عمودٌ يُمرَّر في جوفه — ولا شريطَ أفقيّ: الشجرةُ تفيض بالعمق فتُقصّ */
.vw-side { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.vw-cap2 {
  flex: none; margin: 0; font: 600 11px 'IBM Plex Sans Arabic', sans-serif;
  color: var(--u-lab); letter-spacing: .02em;
}
.vw-tree {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
  padding: 10px 12px 12px; border-radius: 12px;
  background: var(--u-surf); border: 1px solid var(--u-line);
  scrollbar-width: thin; scrollbar-color: rgba(225, 193, 114, .65) transparent;
}
.vw-tree::-webkit-scrollbar { width: 9px; }
.vw-tree::-webkit-scrollbar-track { background: transparent; }
.vw-tree::-webkit-scrollbar-thumb {
  background: rgba(225, 193, 114, .65); border-radius: 99px;
  border: 2px solid transparent; background-clip: padding-box;
}
.vw-tree > .x3 { margin-top: 0; }
/* وصفُّ الشرح يُنقر: حوضٌ يُضاء بالمرور، والجاري مُعلَّمٌ يبقى مضاءً */
/* ولا حشوَ ولا هامشَ سالب: دائرةُ المحطّة ‎absolute‎ منسوبةٌ إلى صندوق هذا الصفّ
   (‎inset-inline-start: -30px‎)، فتزحزحُ حدِّه يزحزحها فتفارق عمودَ دوائر المجلّدات.
   والأرضيّةُ وحدَها تكفي خبرًا: تُرسم في الصندوق كما هو */
/* ===== وعدّاداتُ المجلّد تسقط في المسار =====
   صفُّ المجلّد في المكتبة: أيقونةٌ ثمّ اسمٌ ثمّ **عدّاداه** (عددُ الشروح ومجموعُ المدد)
   ثمّ المثلّث. والعدّادان ‎flex: none‎ والمثلّثُ ‎flex: none‎ — فالاسمُ وحدَه هو الذي
   ينكمش. وعمودُ المسار أضيقُ من صفحة المكتبة أضعافًا، فكان الاسمُ يُقصّ حتى يكاد يذهب،
   فيُقرأ الصفُّ رمزًا وأرقامًا لا مجلّدًا له اسم.
   وهما ههنا خبرٌ لا حاجةَ إليه: المسارُ يُتنقّل فيه، والعددُ والمدّةُ خبرٌ عن الرزمة
   يُقرأ في ترويستها وفي المكتبة. فيسقطان ويأخذ الاسمُ مكانَهما.
   ومعهما وُسّع العمودُ ‎288 ⇦ 340‎: أسماءُ الفصول أطولُ من أسماء الشروح غالبًا */
#vw-side .x3-trio { display: none; }
/* والمدّةُ لا تنكمش ولا تُقصّ: هي رقمٌ قصيرٌ يُقرأ كلُّه أو لا يُقرأ */
#vw-side .x3-vdur { flex: none; }
/* والاسمُ وحدَه ينكمش — فالمدّةُ والأخبارُ ثابتةُ القدّ */
#vw-side .x3-vnm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== وخبرُ الناس يُعرض ههنا ولا يُطلب =====
   في المكتبة يُطلب بالمرور لأنّه **سبعةُ** أرقامٍ تزاحم الأسماء. وفي المسار ثلاثةٌ
   منتقاةٌ (‎CX_NW_HAS.path‎: حفظوه · رأوه · علّقوا) — وهي التي يُختار بها الشرحُ
   التالي، فلا تُخبَّأ خلف مرور. والعمودُ وُسّع لها */
#vw-side .x3-ep > .cs { display: inline-flex; }
#vw-side .x3-hd { min-width: 0; }
#vw-side .x3-fnm { flex: 1 1 auto; }
/* ===== وصفُّ الشرح يُضغط في الموضعين =====
   في النافذة يُبدّل الجاري، وفي شجرة النشر يفتح النافذةَ عليه. فيلبس لغةَ الضغط
   نفسَها: مؤشّرُ يدٍ وحوضٌ يُضاء بالمرور — «الرسمُ واحدٌ والفرقُ في ما يَعِد به».
   ولا يُلبَس في المحرّر: صفُّه ‎.vid-row‎ لا ‎.x3-ep‎، وفيه حقولٌ تُكتب */
#vw-side .x3-ep,
.x3.cx-vo .x3-ep { cursor: pointer; border-radius: 7px; transition: background .13s; }
#vw-side .x3-ep:hover,
.x3.cx-vo .x3-ep:hover { background: var(--u-hov); }
/* ويُردّ في جوف نافذة الاستيراد: الصفُّ هناك يُنتقى لا يُشغَّل (المعالجُ يستثنيه)،
   فمؤشّرُ يدٍ وحوضٌ يُضيء وعدٌ لا يقع — وهو حكمُ ‎.cx-open--ro‎ نفسُه:
   «الرسمُ واحدٌ والفرقُ في ما يَعِد به، فيُرفع الوعدُ ويبقى الرسم» */
#jri-body .x3.cx-vo .x3-ep { cursor: default; }
#jri-body .x3.cx-vo .x3-ep:hover { background: none; }
#vw-side .x3-ep.is-play { background: var(--u-gold-hov); }
#vw-side .x3-ep.is-play .x3-vnm { color: var(--u-gold); font-weight: 700; }
/* ===== قواعدُ ‎.vcm‎ طُرحت مع جسمها =====
   كانت فقاعةَ الشرح القرائيّة، وقد حلّت الفقاعةُ الحرّةُ محلَّها (انظر ‎app.js‎).
   وتوكناتُها انتقلت إلى ‎.cd-cmta--free‎ حيث تُعلن الآن.
   ومعها طُرح وعدُ مؤشّر اليد المقصورُ على صفّين: الأيقونةُ صارت ‎<button>‎ في كلّ صفٍّ
   يُعرف هدفُه، فالمؤشّرُ يأتيها من ‎button.cs-i‎ ولا يُستثنى منه صفٌّ.
   وأمّا ردُّها في مسار نافذة الدورة (‎#vw-side‎) فقد رُفع كذلك: طُلب أن يُفتح الكلامُ
   من كلّ صفٍّ فيه أيقونة. والحجّةُ التي كُتبت يومَها — «منبثقةٌ فوق منبثقةٍ تحجب ما
   فُتحت له» — باقيةٌ تُقرأ، فإن صحّت رُدّ الاستثناءُ بسطر */

/* ===== وحالُ الشرح المفرد: شاشةٌ وحدَها =====
   لا مسارَ فلا عمودَ ثانٍ، والبطاقةُ تضيق إلى قدّ الشاشة: نافذةٌ عريضةٌ نصفُها خاوٍ
   تُقرأ عطبًا لا سعة. والسقفُ ‎620‎ هو سقفُ المُشغّل نفسُه زائدَ حشوة البطاقة */
#vw-modal.is-one .mmodal__card { width: min(680px, 96vw); }
/* وكتابُ المادّة يكبر عن قدّه في المسار: هناك رمزٌ في سطر، وههنا **غلافُ الترويسة** —
   يقابل غلافَ الرزمة (‎.x3-art‎ قدُّه ‎27‎) فيستوي الرأسان في الحالين */
#vw-modal.is-one .cd-bk, #vw-modal.is-one .cd-bk .bk { height: 27px; }
#vw-modal.is-one .vw-body { grid-template-columns: minmax(0, 1fr); }
#vw-modal.is-one .vw-side { display: none; }
@media (max-width: 780px) {
  .vw-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
}

/* ===== الجلدُ الفاتح — ورقةٌ بيضاء، بقيم أخواتها ===== */
html[data-theme="light"] #vw-modal { background: rgba(20, 35, 63, .3); }
html[data-theme="light"] #vw-modal .mmodal__card {
  background: #ffffff; border-color: #dbe6e6; color: #35455c;
  box-shadow: 0 2px 10px rgba(20, 35, 63, .06), 0 22px 54px -26px rgba(20, 35, 63, .45);
}
html[data-theme="light"] #vw-title { color: #2c5e65; }
html[data-theme="light"] #vw-modal .mmodal__close { color: #5d6b82; }
html[data-theme="light"] #vw-modal .mmodal__close:hover { background: transparent; color: #2c5e65; }
html[data-theme="light"] .vw-screen { background: #0b1417; border-color: #dbe6e6; }
/* الإظهار المدمج للواجهة/الداشبورد مستقل عن الثيم (فاتح أو داكن) */
.lib-course #cm-ui, #market-course #cm-ui, #nook { display: block; }
/* لا رأس في العرض المدمج للمكتبة: لا صورة ولا اسم ولا ✕ — «المساهمات عن» مباشرة تحت الخط */
.lib-course .mmodal__head { display: none; }
.lib-course .mmodal__scroll { overflow: visible; }   /* التصفح بتمرير الصفحة نفسها لا بصندوق داخلي */
html[data-lang="en"] .lib-course input,
html[data-lang="en"] .lib-course textarea { direction: ltr; }

/* ---------- عرض مساهمات المادة تحت مستطيل السوق (خط فاصل ثم واجهة #cm-ui) ---------- */
.market-course {
  margin-top: 0;   /* 0 + 5px (padding-bottom لبار الكتب) = 5px بين الكتب والخط */
  border-top: 2px solid #d5e2e6;
  padding-top: 24px;
}
.market-course .mmodal__scroll { overflow: visible; }   /* التمرير بالصفحة لا بصندوق داخلي */
/* لا رأس: الكتاب المتمركز فوق الشريط يوضّح المادة — فلا داعي لتكرار صورتها واسمها */
.market-course .mmodal__head { display: none; }
html[data-lang="en"] .market-course input,
html[data-lang="en"] .market-course textarea { direction: ltr; }

/* شريط واحد لكل الأقسام وتحته نافذة واحدة كتبويبات المتصفح: الزر المُحدَّد (الأصفر) يتّصل بالنافذة
   ويصير هو وإياها قطعة واحدة عبر «حاشية كروم» — رأس مدوّر + أكتاف سفلية مقعّرة تنساب إلى حافة النافذة */
.cm-panel { display: flex; flex-direction: column; gap: 0; margin-bottom: 4px; }
/* النافذة: سطح محايد بحجم ثابت لا يتغيّر بتغيّر الزر/كمية المساهمات + تمرير داخلي؛ الزر يجلس على حافتها */
.cm-pane {
  height: clamp(425px, 68.75vh, 800px);
  overflow-x: hidden; overflow-y: auto;
  padding: 14px 15px;
  background: var(--u-in-bg);
  border: 1px solid var(--u-line);
  border-radius: 13px;
  /* شريط التمرير: على اليسار مع العربية (حاوية rtl) — وعلى اليمين مع الإنجليزية (مطابقًا لشريط الصفحة) */
  direction: rtl;
  scrollbar-width: thin; scrollbar-color: rgba(225, 193, 114, .65) transparent;
}
.cm-pane > * { direction: rtl; }
html[data-lang="en"] .cm-pane { direction: ltr; }
/* شريط التمرير على ثيم الموقع: نحيف ومدوّر، بلون الأزرار الأصفر باهتًا (أوضح عند المرور) */
.cm-pane::-webkit-scrollbar { width: 9px; }
.cm-pane::-webkit-scrollbar-track { background: transparent; }
.cm-pane::-webkit-scrollbar-thumb {
  background: rgba(225, 193, 114, .65); border-radius: 99px;
  border: 2px solid transparent; background-clip: padding-box;
}
.cm-pane::-webkit-scrollbar-thumb:hover { background: rgba(225, 193, 114, .82); background-clip: padding-box; }

/* شريط تمرير الموقع الكبير: صار مخصّصًا (#xscroll) — نُلغي تنسيق شريط النافذة القديم و«حجز مكانه»
   (scrollbar-gutter) كي لا يبقى شريط فارغ محجوز بعد نقل التمرير للـbody */
html { scrollbar-width: none; scrollbar-gutter: auto; }
html[data-lang="en"] { direction: ltr; }
html[data-lang="en"] body { direction: rtl; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: rgba(44, 94, 101, .55); border-radius: 99px;
  border: 3px solid transparent; background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover { background: rgba(44, 94, 101, .78); background-clip: padding-box; }
/* الوضع الفاتح: بترولي صلب غير شفاف (يبان جيدًا على الخلفية الفاتحة) */
html[data-theme="light"] { scrollbar-color: #2c5e65 transparent; }
html[data-theme="light"]::-webkit-scrollbar-thumb { background: #2c5e65; }
html[data-theme="light"]::-webkit-scrollbar-thumb:hover { background: #234a50; }
/* يتغلّب على mmodal__scroll:visible لمضيفَي المكتبة/السوق ليبقى التمرير داخل النافذة نفسها */
.lib-course .cm-pane, .market-course .cm-pane { overflow-x: hidden; overflow-y: auto; }
@media (max-width: 660px) { .cm-pane { height: clamp(375px, 65vh, 700px); } }
/* جملة الاختيار فوق منطقة التمرير: [كل/أفضل] المساهمات عن [الأقسام] + زر الوضع */
.cm-tabsrow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.cm-about {
  flex: none; align-self: center;
  font-size: 13px; font-weight: 700; color: var(--u-lab);
  white-space: nowrap;
}
.cm-tabs {
  flex: 2.5;
  display: flex; gap: 4px; flex-wrap: wrap;
  background: var(--u-ctl); border-radius: 11px; padding: 4px;
}
.cm-tabs:empty { display: none; }
/* الشريط الواحد: يملأ العرض، بلا خلفية «حبّة» — الأزرار تجلس على حافة النافذة (كتبويبات المتصفح) */
.cm-panel .cm-tabs { flex: none; width: 100%; background: transparent; border-radius: 0; padding: 0 40px; gap: 10px; align-items: stretch; flex-wrap: nowrap; }
/* سبعة أزرار متطابقة: عرض متساوٍ (أساس 0) وارتفاع متساوٍ (stretch) — ثبات واستمرارية */
.cm-panel .cm-tabs button { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.2; font-size: 11.5px; padding: 6px 7px; justify-content: center; }
/* صفّ الدوائر يحجز ارتفاع دائرة «أنا/+» (24px) دائمًا فلا يكبر الزر النشط عند النقر */
.cm-panel .cm-tabs .cm-faces { min-height: 24px; }
.cm-tabs button {
  flex: 1;
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 10px; border-radius: 8px;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: 12.5px; font-weight: 700; color: var(--u-btntx);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.cm-tabs button:hover { background: var(--u-hov); }
.cm-tabs button.on { background: #e1c172; color: #14233f; }
/* حاشية كروم: رأس التبويب مدوّر، والزر المُحدَّد يجلس على حافة النافذة وله أكتاف مقعّرة تصله بها */
.cm-panel .cm-tabs button { border-radius: 8px 8px 0 0; }
.cm-panel .cm-tabs button.on { position: relative; z-index: 2; margin-bottom: -1px; }
.cm-panel .cm-tabs button.on::before,
.cm-panel .cm-tabs button.on::after { content: ''; position: absolute; bottom: 0; width: 10px; height: 10px; background: #e1c172; }
.cm-panel .cm-tabs button.on::before { right: -10px; background: radial-gradient(circle at top right, transparent 10px, #e1c172 10px); }
.cm-panel .cm-tabs button.on::after { left: -10px; background: radial-gradient(circle at top left, transparent 10px, #e1c172 10px); }

/* رفّ «الموارد»: يضمّ آخر أربعة تبويبات (فهم/ممارسة/شروح/بطائق) على سطحٍ مرفوعٍ بظلّ (بلا عنوان) */
.cm-panel .cm-tabs .cm-res {
  flex: 4 1 0; position: relative; display: flex; gap: 10px;
  padding: 6px 8px 0; margin-top: -6px;
  background: var(--u-surf); border-radius: 14px 14px 0 0;
  box-shadow: 0 -1px 0 var(--u-line), 0 10px 22px rgba(0, 0, 0, .3);
}
.cm-panel .cm-tabs .cm-res > button { flex: 1 1 0; }
/* الجلد الفاتح (المكتبة/السوق): ظلٌّ ناعم بدل ظلّ الداكن */
html[data-theme="light"] .lib-course .cm-res,
html[data-theme="light"] #market-course .cm-res {
  box-shadow: 0 -1px 0 var(--u-line), 0 10px 22px rgba(20, 35, 63, .12);
}

/* ---------- دوائر المساهمين تحت نص التبويب (ROADMAP-FACES) ----------
   النص يبقى كما هو فوق (خطه لا يتغيّر)، ويُضاف صفُّ دوائر تحته فقط */
.cm-tabs button { display: flex; flex-direction: column; align-items: center; gap: 5px; }
/* أيقونة التبويب: أول عنصر في العمود ⇐ فوق التسمية · ترث لون الزرّ فتنقلب مع التبويب المفعّل والثيم */
.cm-tabs .cm-tabic { flex: none; width: 17px; height: 17px; opacity: .9; }
.cm-tabs button.on .cm-tabic { opacity: 1; }
.cm-faces { display: flex; align-items: center; justify-content: center; min-height: 20px; direction: rtl; }
html[data-lang="en"] .cm-faces { direction: ltr; }   /* جهة العدّاد تتبع اللغة (يمين بالإنجليزي/يسار بالعربي) */
.cm-face {
  flex: none; width: 19px; height: 19px; border-radius: 999px;
  margin-inline-start: -6px; border: 1.5px solid var(--u-badge);
  background: var(--u-av); color: var(--u-mut);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;   /* الأفاتار فوق دائرة العدّاد الخلفية */
}
.cm-faces > .cm-face:first-child { margin-inline-start: 0; }
.cm-face img { width: 100%; height: 100%; object-fit: cover; }
.cm-face svg { width: 12px; height: 12px; }
.cm-face--empty { background: transparent; border: 1.5px dashed var(--u-dash); }
.cm-face--count {   /* دائرة العدّاد: بترولي واضح لا يندمج مع الخلفية — الطبقة الخلفية خلف الأفاتار */
  z-index: 0;
  background: var(--c-kfupm); color: #fff; border-color: var(--c-kfupm);
  font: 700 8.5px/1 'IBM Plex Sans Arabic'; direction: ltr;   /* «+21» لا «21+» */
}
.cm-face--count.is-zero {   /* +0: مرقّطة كبقية الدوائر الفارغة (نصّها وحدّها ظاهران على الخلفية) */
  background: transparent; color: var(--u-lab); border: 1.5px dashed var(--u-dash);
}
.cm-face--me {   /* دائرة «أنا/+» بيضاء بعلامة بترولية + ظل — تبرز على أي خلفية ولا تندمج مع الجيران */
  width: 24px; height: 24px; z-index: 3; position: relative;
  background: #fff; color: var(--c-kfupm); border-color: #fff;
  box-shadow: 0 1px 5px rgba(20, 35, 63, .32);
  font: 700 16px/1 'IBM Plex Sans Arabic';   /* «+» */
}
.cm-face--me svg { width: 14px; height: 14px; }
.cm-tabs button:not(.on) .cm-face--me { display: none; }   /* دائرة «أنا» تظهر عند اختيار التبويب فقط */
/* الدائرة صارت زر الإضافة (بديل كومنت البذرة): مؤشر يد + توهج ذهبي عند المرور */
.cm-face--me { cursor: pointer; transition: transform .12s, color .12s; }
.cm-face--me:hover { transform: scale(1.12); color: var(--c-gold); }

.cm-sec {
  background: var(--u-surf);
  border: 1px solid var(--u-line);
  border-radius: 12px; padding: 14px 15px;
}
.cm-sec__t {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: 15px; font-weight: 700; color: var(--u-gold);
}
.cm-row { display: flex; gap: 10px; margin-bottom: 8px; font-size: 13.5px; }
.cm-k { flex: none; font-weight: 700; color: var(--u-lab); font-size: 12.5px; }
.cm-v { color: var(--u-tx-strong); font-weight: 600; }

.cm-field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--u-lab); }
.cm-field input, .cm-field textarea {
  border: 1.5px solid var(--u-in-line); border-radius: 10px;
  background: var(--u-in-bg); color: var(--u-tx-strong);
  padding: 8px 11px;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  outline: none; resize: vertical;
  color-scheme: var(--u-scheme);
  transition: border-color .15s;
}
.cm-field input:focus, .cm-field textarea:focus { border-color: var(--c-gold); }
.cm-field ::placeholder { color: var(--u-ph); }

/* نسبة الترابط بالمنهج: سلايدر تفاعلي + النسبة */
.cm-rel { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cm-rel input[type="range"] { flex: 1; accent-color: var(--u-gold); cursor: pointer; }
.cm-rel__val {
  flex: none; min-width: 52px; text-align: center;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 18px; color: var(--u-gold);
  direction: ltr; unicode-bidi: embed;
}

/* زر إضافة دكتور */
.cm-adddoc {
  margin-inline-start: auto;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px dashed var(--u-dash); background: transparent; cursor: pointer;
  color: var(--u-tx-strong); font-size: 15px; font-weight: 700; line-height: 1;
  transition: background .15s, border-color .15s;
}
.cm-adddoc:hover { background: var(--u-hov); border-color: var(--u-gold); }

/* مربع صورة المادة يمين الاسم بالعنوان */
.cm-timg {
  flex: none; width: 36px; height: 36px;
  border-radius: 9px; overflow: hidden;
  border: 1px solid var(--u-in-line);
  background: var(--u-surf); color: var(--u-fade);
  display: flex; align-items: center; justify-content: center;
}
.cm-timg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-timg svg { width: 16px; height: 16px; }

/* صورة المادة داخل قسم «عام» */
.cm-cimg {
  width: 92px; height: 92px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--u-line);
  background: var(--u-surf); color: var(--u-fade);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10px; font-weight: 600;
  margin-bottom: 12px;
}
.cm-cimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-cimg--ph svg { width: 24px; height: 24px; }

/* بطاقة الدكتور */
.doc {
  position: relative;
  background: var(--u-surf);
  border: 1px solid var(--u-line);
  border-radius: 11px; padding: 12px 13px;
}
.doc + .doc { margin-top: 10px; }
.doc__del {
  position: absolute; top: 8px; inset-inline-end: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
  color: var(--u-fade); font-size: 12px; line-height: 1;
  transition: background .15s, color .15s;
}
.doc__del:hover { background: var(--u-del-bg); color: var(--u-del-tx); }
.doc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.doc__grid .cm-field { margin: 0; }
.doc-in--ltr { direction: ltr; }

/* أعلى بطاقة الدكتور: مربع صورته + الاسم والإيميل */
.doc__main { display: flex; align-items: flex-start; gap: 10px; }
.doc__main .doc__grid { flex: 1; min-width: 0; }
.doc-img {
  flex: none; width: 58px; height: 58px;
  border: 1.5px dashed var(--u-dash); border-radius: 12px;
  background: transparent; cursor: pointer; padding: 0;
  color: var(--u-fade);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: border-color .15s, color .15s;
}
.doc-img:hover { border-color: var(--u-gold); color: var(--u-gold); }
.doc-img.has-img { border-style: solid; }
.doc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-img svg { width: 24px; height: 24px; }

/* الساعات المكتبية: زر «+ إضافة وقت» ومربعات وقت (اليوم + من–إلى في مربع واحد) */
.doc__hours { margin-top: 10px; }
.doc__hours-head { display: flex; align-items: center; gap: 10px; }
.doc-addtime {
  margin-inline-start: auto;
  border: 1.5px dashed var(--u-dash); border-radius: 8px;
  background: transparent; cursor: pointer;
  padding: 4px 11px;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--u-btntx);
  transition: all .15s;
}
.doc-addtime:hover { border-color: var(--u-gold); color: var(--u-gold); }
.dslot {
  display: flex; align-items: center; gap: 7px;
  background: var(--u-stub-bg);
  border: 1px solid var(--u-div); border-radius: 9px;
  padding: 6px 8px; margin-top: 7px;
}
.dslot-day {
  border: 1.5px solid var(--u-in-line); border-radius: 8px;
  background: var(--u-in-bg); color: var(--u-tx-strong);
  padding: 5px 8px; font-family: inherit; font-size: 12px;
  outline: none; color-scheme: var(--u-scheme); cursor: pointer;
}
.dslot input[type="time"] {
  flex: 1 1 90px; min-width: 0;
  border: 1.5px solid var(--u-in-line); border-radius: 8px;
  background: var(--u-in-bg); color: var(--u-tx-strong);
  padding: 5px 8px; font-family: inherit; font-size: 12.5px;
  outline: none; color-scheme: var(--u-scheme);
}
.dslot input[type="time"]:focus { border-color: var(--c-gold); }
.dslot-sep { color: var(--u-lab); }
.dslot-del {
  margin-inline-start: auto;
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
  color: var(--u-fade); font-size: 11px; line-height: 1;
  transition: background .15s, color .15s;
}
.dslot-del:hover { background: var(--u-del-bg); color: var(--u-del-tx); }

/* التقييم من 10: عشرة مكعبات تفاعلية */
.doc__rates { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rate { display: flex; align-items: center; gap: 10px; }
.rate__k { flex: none; width: 88px; font-size: 12px; font-weight: 700; color: var(--u-lab); }
.rate__blocks { display: flex; gap: 3px; direction: ltr; }
.rb {
  width: 17px; height: 15px; border-radius: 4px;
  background: var(--u-rb); cursor: pointer;
  transition: transform .1s, background .15s;
}
.rb:hover { transform: scale(1.18); }
.rb.on { background: linear-gradient(180deg, #edc868, #cfa14c); }
.rate__v {
  flex: none; min-width: 38px; text-align: center;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 13px; color: var(--u-gold);
  direction: ltr; unicode-bidi: embed;
}

/* ----- منطقة التقييم: طريقة التقييم + شريط توزيع الدرجة 100% ----- */
.gmethod {
  margin-inline-start: auto;
  display: flex; gap: 4px;
  background: var(--u-ctl); border-radius: 9px; padding: 3px;
}
.gm-btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 4px 13px; border-radius: 7px;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--u-btntx);
  transition: background .15s, color .15s;
}
.gm-btn.on { background: #e1c172; color: #14233f; }

.gdist__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

/* الشريط المقسّم: شرائح ملونة بنِسَبها + المتبقي مهشّر */
.gbar {
  display: flex; height: 28px;
  border-radius: 9px; overflow: hidden;
  background: var(--u-surf);
  border: 1px solid var(--u-line);
}
.gseg {
  display: flex; align-items: center; justify-content: center;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 11px; font-weight: 700; color: #14233f;
  white-space: nowrap; overflow: hidden;
  transition: width .15s ease;
}
.gbar__rest {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--u-rest);
  background: repeating-linear-gradient(45deg, transparent 0 6px, var(--u-stripe) 6px 12px);
  white-space: nowrap; overflow: hidden;
  transition: width .15s ease;
}
.gfull { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--u-good); }

/* توزيع الدرجة: اسم كل بند عند لونه، متناوبًا فوق البار وتحته (يمين→يسار: الأول تحت، الثاني فوق) لمنع التداخل.
   صفّان (علوي/سفلي) يطابقان عرض الشرائح، وساق ملوّنة تصل الاسم بلونه على البار */
.glabels { display: flex; position: relative; height: 22px; overflow: visible; }
.glabel { flex: none; position: relative; min-width: 0; }
/* ===== دلالات شريط توزيع الدرجة تظهر كاملةً مهما طال الاسم =====
   لا قصّ ولا حاويًا يقصّ — وتبقى متوسّطة فوق شريحتها، فإن تجاوزت حدّ الشريط
   أزاحها fitGradeLabels() في JS بالقدر اللازم فقط (قياس فعليّ لا تخمين) */
.grade-chip, .grade-chip__bar, .gchip-labels { overflow: visible; }
.gchip-labels .glabel__t { max-width: none; overflow: visible; text-overflow: clip; }
.glabel__stem { position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 7px; border-radius: 2px; opacity: .85; }
.glabel__t { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10.5px; font-weight: 700; color: var(--u-tx); line-height: 1.2; }
/* الصف العلوي (فوق البار): الساق أسفله ملاصقةً للبار، والاسم فوقها */
.glabels--top .glabel__stem { bottom: 0; }
.glabels--top .glabel__t { bottom: 9px; }
/* الصف السفلي (تحت البار): الساق أعلاه ملاصقةً للبار، والاسم تحتها */
.glabels--bot .glabel__stem { top: 0; }
.glabels--bot .glabel__t { top: 9px; }
/* البار بين الصفّين */
.gbar--dist { margin: 2px 0; }

/* بند التقييم: نقطة لونه + اسمه + سلايدر نسبته + القيمة + حذف */
.gitem { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.gdot { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.gi-name {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--u-in-line); border-radius: 9px;
  background: var(--u-in-bg); color: var(--u-tx-strong);
  padding: 6px 10px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  outline: none;
  transition: border-color .15s;
}
.gi-name:focus { border-color: var(--c-gold); }
.gi-name::placeholder { color: var(--u-ph); }
.gi-pct { flex: 1.2; accent-color: var(--u-gold); cursor: pointer; }
.gi-val {
  flex: none; min-width: 42px; text-align: center;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 13px; color: var(--u-gold);
  direction: ltr; unicode-bidi: embed;
}
.gi-del {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
  color: var(--u-fade); font-size: 12px; line-height: 1;
  transition: background .15s, color .15s;
}
.gi-del:hover { background: var(--u-del-bg); color: var(--u-del-tx); }

/* ===== تحرير «المصادر» (فهم/ممارسة): صفٌّ واحد مسطّح لكل مصدر، بلا صناديق متداخلة =====
   [أساسي/فرعي] [نوعه منسدلًا] [الحقل] ✕ — يفصل بينها خطٌّ واحد خفيف فقط */
.pk--edit .fold-peek.sedit { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; min-width: 0; }
/* ‎.src-area‎ يحمل خطًّا علويًّا من صفحة المحرّر القديمة — لا داعي له داخل البطاقة */
.sedit .src-area { margin-top: 0; padding-top: 0; border-top: 0; }
.sedit #cm-src-srcU, .sedit #cm-src-srcP { min-width: 0; }
/* مساحة الكتابة: بلا إطار ولا خلفية — الكتابة مباشرةً تحت الاسم (الأدوات انتقلت للتذييل) */
.sedit .src {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; min-width: 0; margin: 0;
  background: transparent; border: 0; border-radius: 0; padding: 0;
}
/* شريط الأدوات — في تذييل البطاقة يمين زرّ الحذف ✕ (على طريقة معالجات النصوص) */
.pk--edit .src-tools { display: flex; align-items: center; gap: 2px; }
.edit-acts--foot .src-tools { margin-inline-start: auto; }
.edit-acts--foot .src-tools + .infoedit-del { margin-inline-start: 0; }
.pk--edit .src-tool {
  width: 24px; height: 24px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--u-mut);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.pk--edit .src-tool:hover { background: var(--u-hov); color: var(--u-gold); }
.pk--edit .src-tool svg { width: 15px; height: 15px; }
.sedit .src .src-in {
  width: 100%; min-width: 0; min-height: 24px;
  border: 0; background: transparent; color: var(--u-tx-strong);
  padding: 2px 0; outline: none;
  font-family: inherit; font-size: 12px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
/* contenteditable لا يدعم placeholder — يُحاكى */
.sedit .src .src-in:empty::before { content: attr(data-ph); color: var(--u-ph); pointer-events: none; }
.sedit .src .src-in b, .sedit .src .src-in strong { font-weight: 800; }
.sedit .src .src-in ul, .sedit .src .src-in ol { margin: 2px 0; padding-inline-start: 18px; }
.sedit .src .src-in li { margin: 1px 0; }
/* فاصل صغير بين مجموعتَي الأدوات + حالة الزر النشط */
.pk--edit .src-tools__sep { width: 1px; height: 14px; background: var(--u-line); margin: 0 3px; }
/* الفاصل خارج «المصادر» (شجرة الشروح والبطائق): يقف يمين ✕ مباشرةً بترتيبه في الصفّ.
   ولا يُعطى دفعًا تلقائيًّا (‎auto‎): حبّة الإضافة ‎.cx-add‎ تحمل دفعها أصلًا،
   ودفعان في صفٍّ واحد يقتسمان الفراغ فيهبط «+» إلى وسط الشريط */
.src-tools__sep--solo {
  width: 1px; min-width: 1px; height: 15px; background: var(--u-in-line);
  margin: 0 9px 0 3px; flex: 0 0 auto; align-self: center;
}
/* سلّةُ حذف المساهمة: حمراء دائمًا لا عند المرور وحده — الحذف يُعلن عن نفسه */
.edit-acts--foot .infoedit-del,
.vt-foot .infoedit-del { color: #c0455f; }
.edit-acts--foot .infoedit-del:hover,
.vt-foot .infoedit-del:hover { color: #a3364d; background: transparent; }
.pk--edit .src-tool.on { background: var(--u-gold-hov); color: var(--u-gold); }
.pk--edit .src-tool b, .pk--edit .src-tool i { font: 800 12px/1 'IBM Plex Sans Arabic', sans-serif; }

/* النصّ المنسَّق في العرض المنشور الموسّع */
.v-rich b, .v-rich strong { font-weight: 800; }
.v-rich ul, .v-rich ol { margin: 4px 0; padding-inline-start: 20px; }
.v-rich li { margin: 2px 0; }
/* خانة الملف داخل النصّ: مستطيل صغير بين الفقرات — فارغًا يُنقر لاختيار ملف */
/* شريحة الملف: عنصر **إنلاين داخل مجرى النصّ** — يجلس بين الكلمات ويلتفّ النصّ حوله */
.src-fchip {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline;
  max-width: 100%; margin: 0 2px; padding: 1px 6px; border-radius: 6px;
  background: var(--u-hov); cursor: pointer;
  font-size: 11px; font-weight: 700; color: var(--u-gold);
  user-select: none;
}
.src-fchip--empty { background: transparent; border: 1.5px dashed var(--u-dash); color: var(--u-mut); }
.src-fchip--empty:hover { border-color: var(--u-gold); color: var(--u-gold); }
.src-fchip.is-drop { outline: 1.5px dashed var(--u-gold); }
.src-fchip svg { flex: none; width: 13px; height: 13px; }
.src-fchip .fchip-n, .src-fchip .fchip-ph {
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-style: normal; font-weight: 700;
}
.src-fchip .fchip-del {
  flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
  color: var(--u-fade); font-size: 9px; line-height: 1;
}
.src-fchip .fchip-del:hover { background: var(--u-del-bg); color: var(--u-del-tx); }
/* ===== «المصادر» في الكومنت المنشور: الكتابة الحرّة نصٌّ متدفّق مثل وصف «المادة»/انطباع
   «الدكاترة»، والملفات وحدها مستطيلات ذهبية داخل مجرى النصّ ===== */
.post[data-sub="srcU"]:not(.pk--edit) .fold-peek,
.post[data-sub="srcP"]:not(.pk--edit) .fold-peek { display: block; overflow: visible; }
.post[data-sub="srcU"]:not(.pk--edit) .fold-peek .peek-tx,
.post[data-sub="srcP"]:not(.pk--edit) .fold-peek .peek-tx {
  display: inline; overflow: visible; white-space: normal;
}
/* مستطيل الملف: إنلاين مع النصّ (مطويًّا أو موسَّعًا) بمقاسات مستطيلات «المادة» نفسها
   — لونه بتروليّ يُضبط مع ثيم النشر أسفل الملف. اسم طويل يُقصّ بـ«…» */
.src-badge {
  display: inline-flex; align-items: center; vertical-align: middle; max-width: 100%;
  min-height: 23px; box-sizing: border-box;
  margin-inline-end: 6px; margin-bottom: 3px;
  padding: 3px 8px; border-radius: 7px;
  font-size: 10.5px; line-height: 1.3; text-decoration: none;
}
.src-badge .v-val { display: inline-block; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; vertical-align: bottom; }
.v-rich .src-fbadge { margin: 0 3px; }
/* المساهمة كما كُتبت داخل بطاقة الكومنت — بلا هامش علوي زائد */
.fold-peek > .v-desc.v-rich { margin-top: 0; }
/* القصّ يتمّ في JS (مثل «الدكاترة») لا بالارتفاع — فيبقى السهم ظاهرًا إنلاين بعد آخر كلمة */
.fold-peek > .v-rich .pk-toggle--inline { vertical-align: middle; }

/* ===== بطاقة تحرير «توزيع الدرجات» إنلاين: مستطيلان جنبًا لجنب داخل حدود الكومنت =====
   كتلة «توزيع الدرجة» يمينًا (تنمو) و«طريقة التقييم» يسارها، بارتفاع واحد */
.pk--edit .fold-peek.gedit { flex-direction: row; align-items: stretch; flex-wrap: wrap; gap: 8px; width: 100%; min-width: 0; }
.gedit .chipe--gmethod { flex: none; align-items: center; }
/* كتلة التوزيع: مستطيل بجلد شِبّات التحرير نفسه */
.gedit__dist {
  flex: 1 1 260px; min-width: 0;
  border-radius: 8px; padding: 9px 11px;
  background: #f1f4f5; color: #14233f; border: 1px solid #e6eaec;
}
html[data-theme="dark"] .gedit__dist { background: rgba(255, 255, 255, .055); color: #eaf1f2; border-color: rgba(255, 255, 255, .12); }
/* الحقول داخل الكتلة تتبع جلدها الفاتح بدل توكنات النافذة الداكنة */
.gedit__dist .cm-k { color: inherit; opacity: .78; }
/* زر «+»: توكناته بيضاء (جلد النافذة الداكن) فتختفي على الكتلة الفاتحة */
.gedit__dist .cm-adddoc { color: #a8842e; border-color: rgba(168, 132, 46, .55); }
.gedit__dist .cm-adddoc:hover { background: rgba(168, 132, 46, .12); border-color: #a8842e; }
html[data-theme="dark"] .gedit__dist .cm-adddoc { color: var(--u-gold); border-color: var(--u-gold-dash); }
html[data-theme="dark"] .gedit__dist .cm-adddoc:hover { background: var(--u-gold-hov); border-color: var(--u-gold); }
.gedit .gi-name { background: #fff; border-color: #dfe5e7; color: #14233f; }
.gedit .gi-name::placeholder { color: #a7b0bb; }
.gedit .gi-val { color: #a8842e; }
.gedit .gi-del { color: rgba(20, 35, 63, .45); }
.gedit .gbar { background: rgba(20, 35, 63, .08); border-color: rgba(20, 35, 63, .14); }
.gedit .gbar__rest { color: rgba(20, 35, 63, .55); }
html[data-theme="dark"] .gedit .gi-name { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); color: #eaf1f2; }
html[data-theme="dark"] .gedit .gi-name::placeholder { color: rgba(230, 240, 242, .4); }
html[data-theme="dark"] .gedit .gi-val { color: var(--u-gold); }
html[data-theme="dark"] .gedit .gi-del { color: var(--u-fade); }
html[data-theme="dark"] .gedit .gbar { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .gedit .gbar__rest { color: rgba(255, 255, 255, .6); }
.gedit .gdist__head { margin-bottom: 6px; }
/* بنود التوزيع: صفٌّ مرن ينكمش بدل أن يفيض — الاسم يأخذ المتاح والسلايدر ثابت النسبة */
.gedit .gitem { margin-top: 7px; gap: 7px; min-width: 0; }
.gedit .gi-name { flex: 1 1 90px; min-width: 0; font-size: 12px; padding: 5px 9px; }
.gedit .gi-pct { flex: 1 1 70px; min-width: 60px; }
.gedit .gi-val { min-width: 34px; font-size: 12px; }
.gedit .gbar { height: 20px; }
.gedit .gbar .gseg { font-size: 10px; }
.gedit .gfull { margin-top: 6px; font-size: 11.5px; }

/* ----- منطقة الغياب: عدّادات ± + شريط الغيابات الملوّن ----- */
.abs-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.abs-k { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--u-lab); }
.abs-step {
  flex: none; display: flex; align-items: center; gap: 2px;
  background: var(--u-ctl); border: 1px solid var(--u-line);
  border-radius: 9px; padding: 2px;
}
.abs-step button {
  width: 24px; height: 24px; border-radius: 7px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--u-gold); font-size: 15px; font-weight: 700; line-height: 1;
  transition: background .15s;
}
.abs-step button:hover { background: var(--u-hov); }
.abs-step b {
  min-width: 30px; text-align: center;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 14px; color: var(--u-tx-strong);
  direction: ltr; unicode-bidi: embed;
}
/* شريط الغيابات: دائرة مرقمة لكل غياب حتى DN */
.abs-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 6px; }
.abc {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 11px; font-weight: 700; color: #14233f;
  direction: ltr;
}
.abc--ok  { background: #8fd0a0; }
.abc--mid { background: var(--u-mid); }
.abc--ded { background: #d98181; }              /* الخصم: أحمر (لون الـDN السابق) */
.abc--dn  { background: #1f232b; color: #fff; } /* DN: أسود برقم أبيض */
.abs-leg { display: flex; gap: 14px; font-size: 11px; font-weight: 600; color: var(--u-lab); }
.abs-leg span { display: inline-flex; align-items: center; gap: 5px; }
.abs-leg i { width: 11px; height: 11px; border-radius: 50%; }
.abs-late { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--u-gold); }

/* ----- منطقة طريقة المذاكرة ----- */
.ctype-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.ctype {
  border: 1.5px solid var(--u-in-line); border-radius: 9px;
  background: transparent; cursor: pointer;
  padding: 6px 13px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--u-btntx);
  transition: all .15s;
}
.ctype:hover { border-color: var(--u-gold); }
.ctype.on { background: #e1c172; border-color: #e1c172; color: #14233f; }

.src-area { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--u-line); }
.src-head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.src-head .cm-k { margin-inline-end: auto; }
.src-add {
  border: 1.5px dashed var(--u-dash); border-radius: 8px;
  background: transparent; cursor: pointer;
  padding: 4px 11px;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--u-btntx);
  transition: all .15s;
}
.src-add:hover { border-color: var(--u-gold); color: var(--u-gold); }
.src-add--p { color: var(--u-gold); border-color: var(--u-gold-dash); }

/* بطاقة المصدر: شارة النوع + محتواه (ملف/رابط/نص) */
.src {
  background: var(--u-surf);
  border: 1px solid var(--u-line);
  border-radius: 10px; padding: 10px 11px;
}
.src + .src { margin-top: 8px; }
.src__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.src-kind { font-size: 10.5px; font-weight: 800; border-radius: 7px; padding: 3px 9px; }
.src-kind--p { background: #e1c172; color: #14233f; }
.src-kind--s { background: var(--u-badge); color: var(--u-tx); }
.src-types { display: flex; gap: 4px; margin-inline-start: auto; }
.stype {
  border: 1px solid var(--u-in-line); border-radius: 7px;
  background: transparent; cursor: pointer;
  padding: 3px 9px;
  font-family: inherit; font-size: 11px; font-weight: 700; color: var(--u-mut);
  transition: all .15s;
}
.stype.on { background: var(--u-stypeon-bg); border-color: transparent; color: var(--u-stypeon-tx); }
.src-del {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
  color: var(--u-fade); font-size: 11px; line-height: 1;
  transition: background .15s, color .15s;
}
.src-del:hover { background: var(--u-del-bg); color: var(--u-del-tx); }
.src__body { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.src__body .src-in {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--u-in-line); border-radius: 9px;
  background: var(--u-in-bg); color: var(--u-tx-strong);
  padding: 7px 10px;
  font-family: inherit; font-size: 12.5px;
  outline: none; resize: vertical;
  transition: border-color .15s;
}
.src__body .src-in:focus { border-color: var(--c-gold); }
.src__body ::placeholder { color: var(--u-ph); }
.src-ltr { direction: ltr; }
.src-filebtn {
  flex: 1; min-width: 0;
  border: 1.5px dashed var(--u-dash); border-radius: 9px;
  padding: 7px 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--u-btntx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .15s;
}
.src-filebtn:hover { border-color: var(--u-gold); }
/* ===== بابُ نقل الفيديو إلى القرص =====
   يقف ملاصقًا لزرّ الالتقاط لأنّه تتمّتُه: التقطتَ، فانقُل. وقدُّه قدُّ سلّة الصفّ
   (‎.cx-del‎) فيستوي معها في طرف السطر، وحبرُه ذهبيُّ الأفعال لا أحمرُ الإتلاف */
.vid-get {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  color: var(--u-fade); text-decoration: none; transition: color .15s;
}
.vid-get:hover { color: var(--u-gold); }
.vid-get svg { width: 15px; height: 15px; display: block; }
.src-open { flex: none; font-size: 12px; font-weight: 700; color: var(--u-gold); text-decoration: none; }
.src-open:hover { text-decoration: underline; }

/* ----- الواجهة المشتركة: المساهمات في كل قسم ----- */
.post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
/* زر + ملاصق لكلمة «المساهمات» واسم الدكتور (لا يُدفع لآخر الصف) */
.post-head .cm-adddoc, .dr__head .cm-adddoc { margin-inline-start: 0; }
.cm-share {
  margin-inline-start: auto;
  border: 1.5px dashed var(--u-gold-dash); border-radius: 9px;
  background: transparent; cursor: pointer;
  padding: 5px 13px;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--u-gold);
  transition: all .15s;
}
.cm-share:hover { background: var(--u-gold-hov); }

/* بطاقة المساهمة: رأس (صورة/اسم/تاريخ + الأزرار يسارًا) والمحتوى الكامل تحته مباشرة */
.post {
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--u-surf);
  border: 1px solid var(--u-line);
  border-radius: 12px; padding: 10px 12px;
}
.post + .post { margin-top: 8px; }
/* شريط الهوية أسفل المساهمة — مضغوط الارتفاع */
.post__top {
  display: flex; align-items: center; gap: 9px;
  margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--u-div);
}

/* (كومنت البذرة حُذف — الإضافة عبر دائرة «أنا/+» في زر البند) */
.post__body { margin: 0; }

/* صفوف «التسمية / القيمة» داخل الكومنت: التسمية في سطر والقيمة تحتها،
   وفراغ أوضح بين كل بند والذي يليه (لكل أقسام المساهمات) */
.pb-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  margin: 0 0 15px;
  font-size: 13px; line-height: 1.7; color: var(--u-tx);
}
.pb-row:last-child { margin-bottom: 0; }
.pb-v { align-self: stretch; min-width: 0; white-space: pre-wrap; }
/* شارات متعددة، كل واحدة في سطر خاص بها (مثل أوقات الساعات المكتبية) */
.pb-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
/* عرض الغياب في التعليق: سطر «الغياب:» + دلالاته الأصغر يسارًا، ثم الدوائر تحته */
.abs-block { margin: 0 0 15px; }
.abs-head { display: flex; align-items: center; gap: 10px; }
.abs-head .cm-k { flex: none; }
.abs-head .abs-leg { font-size: 10px; gap: 8px; }
.abs-head .abs-leg i { width: 9px; height: 9px; }
.abs-block .abs-strip { margin-top: 5px; }
.pb-b { color: var(--u-tx-strong); }
.post__body .v-rel { margin-top: 4px; }
.post__body .gbar { margin: 2px 0 4px; }
.post__body .rate--ro { margin-top: 6px; }

/* ---------- كومنت مطوي (المادة/الدكاترة) بنمط رزم الشروح/البطائق ----------
   يعيد استخدام .pk-head/.pk-toggle/.post__top: المحتوى (ملخّص أو كامل) فوق + الزر يسارًا، ثم الخط، ثم الهوية.
   ملخّص المطوي داخل .fold-peek (سطر واحد): «المادة» = الوصف فقط · «الدكتور» = شارتا التقييم ثم الوصف */
.fold-peek {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 1.55; color: var(--u-tx);
}
.fold-peek .peek-rate { flex: none; display: flex; gap: 5px; }
.fold-peek .peek-tx { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-peek .peek-none { color: var(--u-ph); }
/* «المادة» (pk--peek): الملخّص هو العرض دائمًا · الوصف سطران ثم «...» مطويًّا، وكامل عند التوسيع (لا بنود قديمة) */
.pk--peek .pk-head, .pk--peek .fold-peek { align-items: flex-start; }
/* «التقييم» بأسلوب يوتيوب: مستطيلان بتروليان — [توزيع الدرجة + بار خطّي] و[طريقة التقييم] */
/* stretch لا center: «طريقة التقييم» يتمدّد بارتفاع «توزيع الدرجة» فيتساويان (محتواه يبقى وسطيًّا) */
.pk--info .fold-peek.pk-gradebody { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
/* مستطيل «توزيع الدرجة»: صفٌّ كامل العرض (أطول ما يمكن) والتسمية فوق البار لا بجانبه،
   فيتّسع البار لعرض اسم كل بند ونسبته داخل شريحته */
/* تخصيص مرفوع: ‎.pk-gradebody .v-badge--g‎ بنفس التخصيص لكنها لاحقة في الملف وتغلبه */
/* يشارك الصفّ مع «طريقة التقييم» (تقع يساره) بدل احتلال الصفّ كاملًا */
.pk-gradebody .v-badge--g.grade-chip { flex: 1 1 auto; min-width: 0; gap: 10px; flex-direction: row; align-items: center; }
.pk-gradebody .grade-chip > .v-lab { flex: none; align-self: center; }
/* عمود: صفّ التوصيفات فوق، ثم البار تحته */
.pk-gradebody .grade-chip__bar { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
/* الدلالات نصًّا خارج البار بخط الهوية KFUPM — كلٌّ محصور بعرض شريحته فلا يتداخل (الاسم كاملًا في tooltip) */
.pk-gradebody .gchip-labels { height: 21px; }   /* متنفّس أعلى الدلالات العليا وأسفل السفلى */
.pk-gradebody .gchip-labels .glabel__t {
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 10px; font-weight: 700;
  color: #0f303a;   /* لا var(--u-tx): خلفية المستطيل فاتحة بينما التوكن أبيض */
}
html[data-theme="dark"] .pk-gradebody .gchip-labels .glabel__t { color: #eef7f8; }
.pk-gradebody .gchip-labels .glabel__stem { height: 6px; }
.pk-gradebody .glabels--top .glabel__t { bottom: 7px; }
.pk-gradebody .glabels--bot .glabel__t { top: 7px; }
/* داخل البار: الأرقام فقط، عريضة (Bold) — وارتفاع أقلّ */
.pk-gradebody .gbar--chip { width: 100%; height: 14px; border: 0; border-radius: 5px; background: rgba(20, 35, 63, .1); }
.pk-gradebody .gbar--chip .gseg { font-size: 10px; font-weight: 700; direction: ltr; }
.pk-gradebody .gbar--chip .gbar__rest { background: transparent; }
html[data-theme="dark"] .pk-gradebody .gbar--chip { background: rgba(255, 255, 255, .1); }
/* الشارات بترولية inline-flex كالمادة/الدكتور (الأساس محايد inline-block ومقصور التجاوز على .peek-badges) */
.pk-gradebody .v-badge--g {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; font-size: 10.5px; line-height: 1.3;
  background: #dbeaed; color: #123339; border: 1px solid #a9ccd1;
}
.pk-gradebody .v-lab { flex: none; font-style: normal; font-weight: 600; opacity: .78; color: #33606a; }
.pk-gradebody .v-val { font-weight: 800; color: #0f303a; }
html[data-theme="dark"] .pk-gradebody .v-badge--g { background: rgba(66, 134, 147, .19); color: #e7f3f4; border: 1px solid rgba(145, 205, 214, .24); }
html[data-theme="dark"] .pk-gradebody .v-lab { color: #9dc3ca; }
html[data-theme="dark"] .pk-gradebody .v-val { color: #eef7f8; }
.pk--peek .fold-peek .peek-tx {
  white-space: normal; text-overflow: clip; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pk--peek.pk--open .fold-peek .peek-tx { -webkit-line-clamp: unset; display: block; overflow: visible; }
/* ملخّص غني (الدكتور): شارات كل الحقول تلتفّ فوق، ثم شريط الغياب، ثم الوصف المقصوص — عمود لا سطر */
.pk--peek .fold-peek--rich { flex-direction: column; align-items: stretch; gap: 6px; }
/* شبكة التحرير: ١٤ عمودًا · صفّان يملآن العرض بلا بقايا (الأعرض في قواعد ‎.pk--edit‎ أعلاه) */
.fold-peek--rich .peek-badges { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: stretch; grid-auto-flow: row dense; }
/* العرض المنشور لا يستعمل الشبكة إطلاقًا — تخطيطه flex (انظر «شارات الدكتور» أدناه) */
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .v-badge {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  overflow: hidden; white-space: nowrap;
  font-size: 10.5px; padding: 2px 8px; min-height: 0; line-height: 1.3;   /* أقصر، مثل مستطيلات «المادة» */
}
/* التسمية الرفيعة الباهتة (يمين) + القيمة (يسار) — بنفس ستايل مستطيلات «المادة» (غير مائلة) */
.fold-peek--rich .peek-badges .v-lab { flex: none; font-style: normal; font-weight: 600; opacity: .78; }
.fold-peek--rich .peek-badges .v-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.fold-peek--rich .peek-badges .v-val--ltr { direction: ltr; }   /* الإيميل يُقرأ يسار‑لـ‑يمين، والتسمية تبقى يمينه */
/* مستطيل الساعات المنشور: «الساعات المكتبية» ثم صندوق التنقّل مباشرة يساره ثم القيمة */
.hnav { flex: none; display: inline-flex; align-items: center; gap: 3px; background: rgba(20, 35, 63, .12); border-radius: 6px; padding: 1px 5px; }
/* عدّاد الفترات: مع العربية يُقرأ الجزء أولًا (يمينًا) ثم «/» ثم الكل (يسارًا) — ترتيب العناصر
   يتكفّل به اتجاه الصندوق، فلا نلمس النصّ نفسه (عكس النصّ يقلب أرقام «12/10») */
.hnav-num { display: inline-flex; align-items: center; gap: 1px; direction: rtl; font-weight: 800; font-size: 10px; color: #14233f; }
.hnav-num .hn-s { font-style: normal; opacity: .75; }
html[data-lang="en"] .hnav-num { direction: ltr; }
.hnav-arrows { display: inline-flex; flex-direction: column; gap: 1px; }
.hnav-btn { border: 0; background: transparent; cursor: pointer; padding: 0; width: 13px; height: 7px; font-size: 6.5px; line-height: 1; color: #14233f; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.hnav-btn:hover { background: rgba(20, 35, 63, .22); }
.fold-peek--rich .peek-badges .chipe--absview .v-lab { font-weight: 600; opacity: .78; }
.fold-peek--rich .peek-badges .absview-body { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* دوائر الغياب أصغر في النشر لتناسب المستطيلات المصغّرة */
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .chipe--absview { padding: 2px 8px; }
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .chipe--absview .abc { width: 13px; height: 13px; font-size: 7.5px; }
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .chipe--absview .abs-strip { gap: 2px; }
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .chipe--absview { min-width: 0; overflow: hidden; font-size: 10.5px; justify-content: center; gap: 8px; }
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .chipe--absview .abs-strip { flex-wrap: nowrap; flex: none; }

/* ===== شارات الدكتور (نشر): flexbox — كل شارة بعرض محتواها، وتنمو بالتساوي لملء صفّها (justify).
   «الحشوة» ذات نموّ ضخم تمتصّ فراغ الصفّ الأخير وحده فلا تتمدّد شاراته، والوصف صفّ كامل العرض تحتها ===== */
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-flow { display: block; overflow: visible; direction: rtl; }
/* الشارة: أساس عرضها = محتواها (auto) + نموّ متساوٍ لملء الصفّ، بلا انكماش فيظهر كل المحتوى */
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-flow > .v-badge,
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-flow > .chipe--absview {
  display: inline-flex; vertical-align: middle; margin-inline-end: 6px; margin-bottom: 6px; min-height: 27px;
  cursor: pointer;   /* الضغط يفتح منبثقة بمحتوى الشارة كاملًا (مثل «المادة») */
}
/* الانطباع: صفٌّ مستقلّ كامل العرض دائمًا (أساس 100% يدفعه لسطر جديد). هكذا يبدأ كل سطر من أقصى
   اليمين ولا يلتفّ أبدًا تحت كلمته الأولى، ولا يتمدّد معه ارتفاع مستطيلات البنود لأنه خارج صفّها */
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-flow > .peek-descflow {
  display: inline; -webkit-line-clamp: unset; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.9;
}
/* «الغياب»: الدلالات في صندوق أغمق منفصل بأقصى اليسار — عرضه ديناميكي حسب محتواه،
   والدلالات مصفوفة عموديًّا (النقاط محاذاة على اليمين) بهوامش مريحة وتوزيع مريح للعين */
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .abs-legbox {
  align-self: stretch; display: inline-flex; align-items: center; flex: none;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(15, 48, 58, .13);   /* المجموعة كلها متمركزة (justify-content:center) بهامشين متساويين */
}
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .abs-legbox .abs-leg {
  gap: 8px; margin: 0; font-size: 9.5px; flex-wrap: nowrap;   /* جنب بعض في سطر واحد (يبقى المستطيل بارتفاعه القديم) */
}
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .abs-legbox .abs-leg span { gap: 4px; white-space: nowrap; }
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .abs-legbox .abs-leg i { width: 8px; height: 8px; }
html[data-theme="dark"] .pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .abs-legbox { background: rgba(0, 0, 0, .24); }
.fold-peek--rich .abs-block { margin: 0; }
/* «المادة» فقط (لا التحرير): تدفّق سطريّ مباشر — المستطيلات ثم الوصف ثم سهم التوسيع إنلاين
   بعد النص مباشرةً كأنه جزء منه. القصّ يتمّ في JS (لا CSS) فيبقى السهم ظاهرًا دائمًا */
.post[data-sub="info"]:not(.pk--edit) .fold-peek { display: block; overflow: visible; }
.post[data-sub="info"]:not(.pk--edit) .fold-peek .peek-chip {
  display: inline-flex; vertical-align: middle; margin-inline-end: 6px; margin-bottom: 3px;
  cursor: pointer;   /* الضغط على المستطيل الأصفر يفتح المنبثقة بالنص الكامل */
}
.post[data-sub="info"]:not(.pk--edit) .fold-peek .peek-tx {
  display: inline; -webkit-line-clamp: unset; overflow: visible; white-space: normal;
}
/* مستطيلات ملخّص «المادة» الصفراء: [صورة الكتاب+الاسم] · [نوعية المادة+النوعية] · [نسبة الترابط+النسبة] */
/* ارتفاع موحّد للمستطيلات (لا يكبّرها الكتاب مهما كان طوله) */
.peek-chip, .chipe, .chipe-in--desc { min-height: 23px; box-sizing: border-box; }
.peek-chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  background: #e1c172; color: #14233f;
  padding: 3px 8px; border-radius: 7px;
  font-size: 10.5px; line-height: 1.3; white-space: nowrap; max-width: 190px;
}
.peek-chip i { font-style: normal; font-weight: 600; opacity: .78; }
.peek-chip b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.peek-book b { max-width: 120px; }
/* غلاف الكتاب داخل المستطيل: كتاب 3D مائل صغير جدًا بارتفاع ثابت — لا يزيد طول المستطيل */
.pchip-bk { flex: none; width: 14px; height: 16px; display: flex; align-items: center; justify-content: center; perspective: 200px; overflow: visible; }
.pchip-bk .bk { height: 16px; --thk: 3px; --r: 1.5px; }
.pchip-bk .bk::after { box-shadow: 0 1px 3px rgba(13, 42, 72, .25); }
.peek-bookic { flex: none; width: 15px; height: 15px; }

/* منبثقة المستطيل الأصفر: نفس المستطيل مكبَّرًا بمحتواه الكامل (ذهبي، بلا قصّ، بلا صندوق أبيض ولا زر X) */
.cmt-modal .cmt-body { display: flex; align-items: center; justify-content: center; padding: 20px; }
/* تخصيص مرفوع: ‎.v-badge { display:inline-block }‎ معرّفة لاحقًا في الملف فتغلب ‎.cmt-chip‎ وحدها */
.cmt-modal .cmt-chip { display: inline-flex; }
.cmt-chip {
  max-width: min(440px, 90vw); align-items: flex-start;
  font-size: 15px; padding: 13px 18px; border-radius: 14px; gap: 10px;
  box-shadow: 0 16px 44px rgba(4, 12, 28, .42); cursor: default;
}
/* شارات «الدكاترة» داخل المنبثقة: التسمية باهتة والقيمة كاملة (الأنماط الأصلية مقصورة على .peek-badges) */
.cmt-chip .v-lab { flex: none; font-style: normal; font-weight: 600; opacity: .78; }
.cmt-chip .v-val { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; word-break: break-word; font-weight: 800; }
.cmt-chip .abs-strip { flex-wrap: wrap; }
.cmt-chip .hnav { display: none; }   /* أسهم تنقّل الفترات لا معنى لها داخل المنبثقة */
.cmt-chip i { font-size: 13px; margin-top: 2px; }
.cmt-chip b { overflow: visible; text-overflow: clip; max-width: none; white-space: normal; word-break: break-word; line-height: 1.55; }
/* ===== منبثقة «الكتاب» (أكبر): كتاب 3D كبير، وتحته اسمه في مستطيل ويساره زر نسخ ===== */
.cmt-book {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  max-width: min(560px, 92vw); padding: 30px 34px 26px;
  background: linear-gradient(155deg, #38707a 0%, #2c5e65 55%, #1f4850 100%);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px;
  box-shadow: 0 22px 60px rgba(4, 12, 28, .5);
}
/* حاوية block (لا flex) تمامًا كـ‎.cm-cimg--book‎: مع flex يختلف عرض ‎.bk (fit-content)‎ عن عرض
   الصورة المعروضة فيظهر الغلاف الخلفي الداكن فوق يسار الغلاف */
.cmt-book__cover { width: auto; perspective: 900px; overflow: visible; padding: 2px 10px 10px 18px; }
/* ارتفاع صريح للصورة (لا height:100%): يزيل التبعية الدائرية التي تجعل عرض ‎.bk (fit-content)‎
   يُحسب من العرض الأصلي للصورة، فيتّسع الغلاف الخلفي ‎::after‎ الداكن ويغطّي يسار الغلاف */
.cmt-book__cover .bk { --thk: 16px; --r: 5px; height: auto; margin-inline: auto; }
.cmt-book__cover .bk img { height: 205px; width: auto; }
.cmt-book__cover .bk--ph { height: 205px; }
.cmt-book__cover .bk::after { box-shadow: 0 18px 34px rgba(4, 12, 18, .55); }
.cmt-book__row { display: flex; align-items: stretch; gap: 8px; max-width: 100%; }
.cmt-book__name {
  flex: 0 1 auto; min-width: 0; display: flex; align-items: center;
  background: #e1c172; color: #14233f; border-radius: 11px; padding: 10px 16px;
  font-size: 14.5px; font-weight: 800; line-height: 1.5; word-break: break-word; text-align: center;
}
.cmt-copy {
  flex: none; width: 42px; border: 0; cursor: pointer; border-radius: 11px;
  background: rgba(255, 255, 255, .12); color: #eef5f6;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.cmt-copy:hover { background: rgba(255, 255, 255, .2); }
.cmt-copy .cc-ic { width: 18px; height: 18px; }
.cmt-copy .cc-ic--ok { display: none; }
.cmt-copy.is-copied { background: #e1c172; color: #14233f; }
.cmt-copy.is-copied .cc-ic--copy { display: none; }
.cmt-copy.is-copied .cc-ic--ok { display: block; }

.cmt-chip .pchip-bk { width: 40px; height: 52px; }
.cmt-chip .peek-bookic { width: 38px; height: 38px; }

/* محرر سياسة الغياب/التأخير داخل محرر الدكتور */
.doc__abs { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--u-div); }
.doc__abs-t { margin: 0 0 10px; }
.post-av {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  overflow: hidden;
  background: var(--u-av); color: var(--u-mut);
  display: flex; align-items: flex-end; justify-content: center;
}
.post-av svg { width: 26px; height: 26px; }
.post-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-av--sm { width: 28px; height: 28px; }
.post-av--sm svg { width: 18px; height: 18px; }
.post-meta { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
/* اللايك والتعديل والحذف: جنب بعض في أقصى يسار البطاقة */
.post-side {
  flex: none; margin-inline-start: auto;
  display: flex; align-items: center; gap: 5px;
}
.post-side .post-like { align-self: center; }
.post-name {
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 13px; color: var(--u-tx-strong);
}
.post-like {
  align-self: flex-start;
  border: 1px solid var(--u-in-line); border-radius: 8px;
  background: transparent; cursor: pointer;
  padding: 2px 9px;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--u-mut);
  transition: all .15s;
  direction: ltr; unicode-bidi: embed;
}
.post-like:hover { border-color: var(--u-like); color: var(--u-like); }
.post-like.on { background: var(--u-like-on-bg); border-color: transparent; color: var(--u-like-on-tx); }

/* لايك بلا مستطيل: قلب ثم عدد، بجانب التاريخ مباشرة (قلب يمينًا، العدد يساره) */
.post-like--bare {
  align-self: center; border: 0; background: transparent; padding: 0; border-radius: 0;
  display: inline-flex; align-items: center; gap: 4px; direction: rtl;
  color: var(--u-mut); font-size: 12px;
}
.post-like--bare:hover { background: transparent; color: var(--u-like); }
.post-like--bare.on { background: transparent; color: var(--u-like-on-tx); }
.post-like--bare .lk-h { font-size: 13px; line-height: 1; }
.post-like--bare .lk-n { font-weight: 700; direction: ltr; }

/* قائمة الثلاث نقاط (تعديل/حذف) أقصى اليسار */
.post-menu { position: relative; flex: none; margin-inline-start: auto; align-self: center; }
.post-menubtn {
  border: 0; background: transparent; cursor: pointer; color: var(--u-mut);
  width: 24px; height: 24px; border-radius: 7px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.post-menubtn svg { width: 16px; height: 16px; }
.post-menubtn:hover { background: var(--u-hov); color: var(--u-tx-strong); }
.post-menu__list {
  display: none; position: absolute; top: 100%; inset-inline-end: 0; margin-top: 5px; z-index: 30;
  background: #fff; border: 1px solid rgba(20, 35, 63, .12); border-radius: 11px;
  box-shadow: 0 10px 28px rgba(13, 42, 72, .24); padding: 5px; min-width: 132px;
}
html[data-theme="dark"] .post-menu__list { background: #17313a; border-color: rgba(255, 255, 255, .14); box-shadow: 0 10px 28px rgba(0, 0, 0, .55); }
.post-menu.open .post-menu__list { display: block; }
.post-menu__list button {
  display: block; width: 100%; text-align: start;
  border: 0; background: transparent; cursor: pointer;
  padding: 9px 13px; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--u-tx-strong);
}
.post-menu__list button:hover { background: var(--u-hov); }
.post-menu__list .post-del { color: #c0455f; }
.post-menu__list .post-del:hover { background: var(--u-del-bg); color: var(--u-del-tx); }

/* تاريخ المشاركة — حضور هادئ غير صارخ */
.post-date { font-size: 10px; font-weight: 500; color: var(--u-ph); white-space: nowrap; }

/* التاريخ نفسه هو الزرّ: نقطة مفتاح تسبقه — مجوّفة والزمن نسبيّ، وممتلئة
   والتاريخ رقميّ. الفرق بين الحالتين ملء لا لون: النقطة تأخذ لون النصّ الباهت
   (currentColor) في الحالتين، ولا يظهر الذهبيّ إلا تحت المؤشّر — فيبقى صفّ
   الهوية هادئًا · حاضرة دائمًا ومستقلّة عن سهم توسيع النصّ تمامًا */
.post-date--sw {
  font-family: inherit; line-height: 1.5;
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  background: none; border: 0; padding: 0 2px; border-radius: 5px; cursor: pointer;
  transition: color .16s;
}
.pd-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  border: 1.3px solid currentColor;   /* لون النصّ نفسه — باهت في الحالتين */
  transition: background .16s, box-shadow .16s;
}
.post-date--sw.on .pd-dot { background: currentColor; }
/* الألوان لا تظهر إلا تحت المؤشّر: النصّ والنقطة معًا (النقطة تتبع currentColor) */
.post-date--sw:hover { color: var(--u-gold); }
.post-date--sw:hover .pd-dot { box-shadow: 0 0 0 3px var(--u-gold-hov); }

/* شريط طريقة الإظهار (يسار شريط الأقسام): الأفضل / الكل */
.cm-disp {
  flex: none; display: flex; gap: 3px;
  background: var(--u-ctl); border-radius: 11px; padding: 4px;
}
.cm-disp button {
  border: 0; background: transparent; cursor: pointer;
  padding: 5px 11px; border-radius: 8px;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--u-btntx);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.cm-disp button:hover { background: var(--u-hov); }
.cm-disp button.on { background: #e1c172; color: #14233f; }

/* تعديل/حذف مشاركتي (على مشاركاتي فقط) */
.post-acts { display: flex; gap: 4px; }
.post-edit, .post-del {
  width: 22px; height: 22px; border-radius: 7px;
  border: 1px solid var(--u-in-line); background: transparent; cursor: pointer;
  color: var(--u-mut); font-size: 11px; line-height: 1;
  transition: all .15s;
}
.post-edit:hover { border-color: var(--u-gold); color: var(--u-gold); }
.post-del:hover { border-color: var(--u-like); color: var(--u-like); background: var(--u-like-on-bg); }

/* المعاينة داخل بطاقة الكومنت مباشرة — بلا صندوق داخلي (تسطيح بطاقة-داخل-بطاقة) */
.post-prev {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
}
.pv-img { flex: none; width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.pv-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv-tx b { font-size: 12.5px; color: var(--u-tx-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-tx span { font-size: 11px; color: var(--u-lab); }
.pv-clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.55;
}
.pv-bar {
  display: flex; height: 8px; border-radius: 5px; overflow: hidden;
  background: var(--u-track); margin-top: 3px;
}
.pv-bar span { display: block; height: 100%; }

/* كتلة الدكتور في القائمة: هويته (أدمن) + مشاركات المجتمع تحته */
.dr { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--u-line); }
.dr:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.dr__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; cursor: pointer; border-radius: 10px; padding: 4px 6px; transition: background .15s; }
.dr__head:hover { background: var(--u-surf); }

/* ---------- شبكة الدكاترة (٤ بالصف): صورة ← اسم ← متوسّط تقييم ← دوائر المساهمين ---------- */
.docgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.doccell {
  display: flex; flex-direction: column;
  background: var(--u-surf); border: 1px solid var(--u-line); border-radius: 14px;
  padding: 0 11px 8px;
  transition: border-color .15s, transform .12s;
}
.doccell:hover { border-color: var(--u-gold); transform: translateY(-2px); }
.doccell__main {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 100%; padding: 14px 0 4px; cursor: pointer;
  background: transparent; border: 0; font-family: inherit; text-align: center;
}
/* ذيل البطاقة: خط علوي (من .post__top) + بروفايل من أضاف الدكتور والتاريخ، والتعديل/الحذف يسارًا */
.doccell__foot { margin-top: 6px; gap: 7px; }
.doccell__foot .post-meta { flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.doccell__foot .post-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.doccell__foot .post-date { font-size: 10px; }

/* تصغير تذييل المساهمة تحت الخط (أفاتار + اسم + نقاط) ليقلّ ارتفاعه للنصف تقريبًا */
.post__top { margin-top: 5px; padding-top: 3px; gap: 6px; }
.post__top .post-av--sm { width: 18px; height: 18px; }
.post__top .post-av--sm svg { width: 12px; height: 12px; }
.post__top .post-name { font-size: 11px; }
.post__top .post-menubtn { width: 18px; height: 18px; border-radius: 6px; }
.post__top .post-menubtn svg { width: 12px; height: 12px; }

/* «المادة» بأسلوب يوتيوب: الصورة عمود جانبي يمين الكومنت كامل، وعمود على يسارها */
.post-yt { display: flex; align-items: flex-start; gap: 10px; }
.post-av--yt { flex: none; width: 32px; height: 32px; align-self: flex-start; }
.post-av--yt svg { width: 20px; height: 20px; }
.post-ytmain { flex: 1 1 auto; min-width: 0; }
.post-ytmeta { display: flex; align-items: baseline; gap: 7px; margin-bottom: 5px; }
.post-ytmeta .post-name { font-size: 12px; }
.post-ytmeta .post-date { font-size: 10px; }
/* الثلاث نقاط: عمود مستقل أقصى يسار الكومنت، في الوسط العمودي — والنص ينتهي قبله (لا يتجاوزه) */
.post-yt > .post-menu { flex: none; align-self: center; margin-inline-start: 0; }
.post-yt .post-menubtn { width: 32px; height: 32px; border-radius: 9px; }
.post-yt .post-menubtn svg { width: 24px; height: 24px; }

/* شريط ترتيب المساهمات: زر همبرغر صغير بلا نص أعلى القائمة، يفتح قائمة (الأفضل/الأحدث) */
/* الشريط: flex — العدّاد «X مساهمة» في البداية (يمين بالعربي) والأيقونة يساره بفراغ */
.cm-sortbar { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
html[data-lang="en"] .cm-sortbar { justify-content: flex-end; }      /* إنجليزي: الزاوية اليسرى (الحاوية تبقى rtl) */
.cm-sortbar .post-menu { margin: 0; }
.cm-count { font-size: 12.5px; font-weight: 600; color: var(--u-mut); white-space: nowrap; }
.cm-count b { font-weight: 800; color: var(--u-tx-strong); font-size: 13px; }
.cm-sortbtn { color: var(--u-mut); }
.cm-sortbtn svg { width: 18px; height: 18px; }
.cm-sortbtn:hover { background: var(--u-hov); color: var(--u-tx-strong); }
.cm-sort__list { min-width: 116px; inset-inline-start: 0; inset-inline-end: auto; }   /* عربي: يفتح لليسار من الزر اليمنى */
html[data-lang="en"] .cm-sort__list { inset-inline-start: auto; inset-inline-end: 0; } /* إنجليزي: يفتح لليمين من الزر اليسرى */
.cm-sortopt.on { font-weight: 800; }
/* «الأفضل» ذهبي دائمًا و«الأحدث» بلون النصّ القوي (أبيض في الداكن) — والمفعّل يُعرَف بخلفيّته لا بلونه */
.cm-sortopt[data-sort="best"] { color: var(--u-gold); }
.cm-sortopt[data-sort="newest"] { color: var(--u-tx-strong); }

/* تبويب الدكاترة: قائمة الهمبرغر = فرز (صفّ علوي) + جدول تصفية الدكاترة (صورة/اسم/تقييم) */
.cm-docmenu { min-width: 236px; max-height: 344px; overflow-y: auto; padding: 6px; }
.cm-sortgrp { display: flex; gap: 5px; padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid var(--u-div); }
.cm-sortgrp .cm-sortopt { flex: 1; text-align: center; border-radius: 7px; background: var(--u-hov); }
.cm-sortgrp .cm-sortopt.on { background: var(--u-ctl); }
.cm-docmenu__t { font-size: 10px; font-weight: 700; color: var(--u-lab); padding: 2px 6px 6px; }
/* ===== منتقي الدكاترة الأفقي: سهم يمين (السابق) · بطاقة الدكتور · سهم يسار (التالي) · ثم العدّاد =====
   الترتيب ثابت: «كل الدكاترة» أولًا ثم الدكاترة بحسب تقييمهم تنازليًّا (المنطق في drCarSlides) */
.drcar { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0 4px; }
.drcar__row { display: flex; align-items: center; gap: 4px; width: 100%; }
/* التخصيص مرفوع بـ‎.cm-docmenu‎ لأن ‎.post-menu__list button‎ يفرض display:block وحشوًا على كل زرّ في القائمة */
.cm-docmenu .drcar-nav {
  flex: none; width: 22px; height: 46px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 7px; cursor: pointer; color: var(--u-mut); padding: 0;
}
.cm-docmenu .drcar-nav:hover { background: var(--u-hov); color: var(--u-tx-strong); }
.cm-docmenu .drcar-nav svg { width: 15px; height: 15px; }
.drcar__body { flex: 1; min-width: 0; }
/* البطاقة: الصورة فوق، تحتها الاسم، تحته التقييم — كلّها زر واحد يطبّق التصفية */
.cm-docmenu .drcar__card {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%;
  background: transparent; border: 0; border-radius: 9px; cursor: pointer; padding: 7px 5px;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--u-tx); text-align: center;
}
.cm-docmenu .drcar__card:hover { background: var(--u-hov); }
.cm-docmenu .drcar__card.on { background: var(--u-ctl); color: var(--u-tx-strong); }
.drcar__av { flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: inline-flex; background: var(--u-av); }
.drcar__av img, .drcar__av svg { width: 100%; height: 100%; object-fit: cover; }
.drcar__av--all { align-items: center; justify-content: center; color: var(--u-mut); }
.drcar__av--all svg { width: 22px; height: 22px; object-fit: none; }
.drcar__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.drcar__rate { display: inline-flex; align-items: center; gap: 3px; direction: ltr; font-size: 11px; font-weight: 800; color: var(--u-gold); }
.drcar__rate--none { color: var(--u-lab); }
.drcar__rate .star { width: 12px; height: 12px; }
/* العدّاد: الجزء يمينًا ثم «/» ثم الكل يسارًا مع العربية، وينقلب مع الإنجليزية */
.drcar__num { display: inline-flex; align-items: center; gap: 1px; direction: rtl; font-size: 10px; font-weight: 800; color: var(--u-lab); }
.drcar__num .hn-s { font-style: normal; opacity: .75; }
html[data-lang="en"] .drcar__num { direction: ltr; }

/* بطاقة مساهمة الدكتور في التغذية المدمجة: عنوان الدكتور (صورة+اسم) فوق كل مساهمة */
.drfeed + .drfeed { margin-top: 14px; }
.drfeed__subj { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.drfeed__av { flex: none; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: inline-flex; background: var(--u-av); }
.drfeed__av img, .drfeed__av svg { width: 100%; height: 100%; object-fit: cover; }
.drfeed__name { font-size: 12.5px; font-weight: 800; color: var(--u-tx-strong); }

/* مستطيل منتقي الدكتور (تحرير): تسمية + قائمة منسدلة بأسماء الدكاترة وصورهم الدائرية */
.chipe--drpick { gap: 5px; }
/* القيمة = الاسم ثم تقييمه: الاسم وحده هو ما يُقصّ، والتقييم يبقى ظاهرًا كاملًا */
.chipe--drpick .mdrop-val { display: inline-flex; align-items: center; max-width: 190px; overflow: hidden; white-space: nowrap; }
.chipe--drpick .mdrop-val .dr-rate { flex: none; }
.chipe--drpick .mdrop-list { min-width: 168px; }
/* صورة الدكتور المختار كدائرة داخل زر المنتقي (يمين الاسم في rtl) — تباعد ألطف وحجم مضغوط */
.mdrop--drpick .mdrop-btn { gap: 5px; }
.mdrop--drpick .mdrop-btn .mdrop-av { width: 20px; height: 20px; }
/* خيار الدكتور: الصورة الدائرية يمين الاسم (الصورة أولًا في rtl) */
.mdrop--drpick .mdrop-opt { display: flex; align-items: center; gap: 8px; text-align: start; }
.mdrop--drpick .mdrop-optnm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdrop-av { flex: none; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: inline-flex; background: var(--u-av); }
.mdrop-av img, .mdrop-av svg { width: 100%; height: 100%; object-fit: cover; }

/* شارة الدكتور المنشورة: الصورة الدائرية الصغيرة يمين الاسم داخل المستطيل (نصف العرض) */
/* مستطيل الفلتر الفعّال في تاب الدكاترة: يسار زر الفلتر — صورة الدكتور واسمه */
.v-badge.cm-docactive {
  display: inline-flex; align-items: center; flex-wrap: nowrap; vertical-align: middle;
  margin-inline-start: 8px; max-width: 210px; padding: 3px 10px; font-size: 11.5px;
}
.v-badge.cm-docactive .dr-badge__nm { white-space: nowrap; flex: 0 1 auto; min-width: 0; }   /* اسم طويل يُقصّ بـ… في سطر واحد */
.dr-badge { gap: 5px; }
.dr-badge__av { flex: none; width: 17px; height: 17px; border-radius: 50%; overflow: hidden; display: inline-flex; background: var(--u-av); }
.dr-badge__av img, .dr-badge__av svg { width: 100%; height: 100%; object-fit: cover; }
.dr-badge__nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* الكومنت مباشرة بلا مستطيل محيط (أسلوب يوتيوب): الصورة والنص على خلفية اللوحة نفسها */
.post.pk--info { background: transparent; border: 0; border-radius: 0; padding: 6px 2px 2px; }
.post + .post.pk--info { margin-top: 12px; }

/* الإبهام أيقونة مباشرة بلا مربع — لايك يمينًا وديسلايك يسارًا (ترتيب RTL طبيعي) */
.post-react { display: flex; align-items: center; gap: 18px; margin-top: 9px; }
.post-thumb {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  color: var(--u-mut);
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1;
  transition: color .14s;
}
.post-thumb svg { width: 16px; height: 16px; }
.post-thumb .tb-n { direction: ltr; min-width: 7px; }
.post-thumb:hover { color: var(--u-tx-strong); }
.post-thumb--up.on { color: #2c5e65; }
.post-thumb--down.on { color: #c2596a; }
html[data-theme="dark"] .post-thumb--up.on { color: #9fd0d8; }
html[data-theme="dark"] .post-thumb--down.on { color: #eaa3ae; }

/* مؤشّر اكتمال مساهمة الدكتور: دائرة صغيرة تمتلئ ذهبًا سائلًا (يمين الإبهام، بلا رقم) */
.cc-liquid {
  position: relative; flex: none; align-self: center;
  width: 16px; height: 16px; border-radius: 50%; overflow: hidden;
  background: var(--u-track); border: 1.5px solid var(--u-in-line);
}
.cc-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--u-gold); transition: height .3s ease;
}
.cc-fill::before {
  content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 4px;
  border-radius: 50%; background: var(--u-gold);
}

.doccell__img {
  flex: none; width: 66px; height: 66px; border-radius: 50%;
  overflow: hidden; border: 2px solid var(--u-in-line);
  background: var(--u-av); color: var(--u-mut);
  display: flex; align-items: flex-end; justify-content: center;
}
.doccell__img svg { width: 42px; height: 42px; }
.doccell__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doccell__name { font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; font-size: 13.5px; color: var(--u-tx-strong); line-height: 1.35; }
.doccell__rate { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 13px; color: var(--u-gold); direction: ltr; }
.doccell__rate .star { width: 15px; height: 15px; }
.doccell__rate--none { color: var(--u-ph); font-weight: 600; }
.doccell__faces { min-height: 20px; margin-top: 1px; }
.cm-back--doc { justify-content: flex-start; }   /* زر الرجوع (دكاترة/مصادر) يمينًا (بداية السطر RTL) */
@media (max-width: 760px) { .docgrid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- تقسيم «المصادر» نصفين: يمين مصادر الفهم · يسار مصادر الممارسة ---------- */
.srcpick { display: flex; align-items: stretch; }
.srchalf {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
  min-height: 150px; padding: 30px 14px; cursor: pointer;
  background: transparent; border: 0; border-radius: 14px;
  font-family: inherit; text-align: center;
  transition: background .15s, transform .12s;
}
.srchalf:hover { background: var(--u-surf); transform: translateY(-2px); }
.srchalf:first-child { border-inline-end: 1px solid var(--u-line); border-radius: 14px 0 0 14px; }   /* الفاصل بين النصفين */
.srchalf:last-child { border-radius: 0 14px 14px 0; }
.srchalf__t { font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; font-size: 16px; font-weight: 800; color: var(--u-tx-strong); }
.srchalf__faces { min-height: 22px; }

/* هوية المادة الثابتة فوق مساهمات «المادة» — مسطّحة */
.ci-head { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--u-line); }
.ci-head .cm-cimg { margin-bottom: 0; flex: none; width: 72px; height: 72px; }
.ci-names { flex: 1; min-width: 0; }
.dr-av {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  overflow: hidden; border: 1.5px solid var(--u-in-line);
  background: var(--u-av); color: var(--u-mut);
  display: flex; align-items: flex-end; justify-content: center;
}
.dr-av svg { width: 30px; height: 30px; }
.dr-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-name {
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 16px; color: var(--u-tx-strong);
}
.dr .post { margin-inline-start: 22px; }

/* بطاقة دكتور في وضع الأدمن: صورة + اسم + حذف */
.adoc {
  display: flex; align-items: center; gap: 10px;
  background: var(--u-surf);
  border: 1px solid var(--u-line);
  border-radius: 11px; padding: 10px 12px;
}
.adoc + .adoc { margin-top: 8px; }
.adoc-field { flex: 1; margin: 0; }
.adoc-del {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
  color: var(--u-fade); font-size: 12px; line-height: 1;
  transition: background .15s, color .15s;
}
.adoc-del:hover { background: var(--u-del-bg); color: var(--u-del-tx); }

/* شريط الرجوع داخل عرض المشاركة/المحرر */
.cm-back { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.cm-backbtn {
  border: 1px solid var(--u-in-line); border-radius: 8px;
  background: transparent; cursor: pointer;
  padding: 4px 12px;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--u-btntx);
  transition: background .15s;
}
.cm-backbtn:hover { background: var(--u-hov); }
.cm-back .post-like { margin-inline-start: auto; align-self: center; }

/* ----- وضع الزوار: عرض استعراضي مختصر بلا أدوات إدخال ----- */
.v-desc { margin: 10px 0 0; font-size: 13px; line-height: 1.8; color: var(--u-tx); white-space: pre-wrap; }
.v-none { margin: 4px 0; font-size: 12.5px; color: var(--u-ph2); }
.v-rel { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.v-rel__bar { flex: 1; height: 10px; border-radius: 6px; background: var(--u-track); overflow: hidden; }
.v-rel__bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #cfa14c, #edc868); }
.v-badge { display: inline-block; border-radius: 8px; padding: 4px 13px; font-size: 12px; font-weight: 700; background: var(--u-badge); color: var(--u-tx); }
.v-badge--g { background: #e1c172; color: #14233f; }
.vdoc {
  background: var(--u-surf); border: 1px solid var(--u-line);
  border-radius: 11px; padding: 12px 13px;
}
.vdoc + .vdoc { margin-top: 10px; }
.vdoc__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vdoc-av {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  overflow: hidden; border: 1.5px solid var(--u-in-line);
}
.vdoc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vdoc__n { font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; font-size: 15px; color: var(--u-tx-strong); }
.v-line { display: flex; align-items: center; gap: 7px; margin: 9px 0 0; font-size: 12.5px; color: var(--u-tx); flex-wrap: wrap; }
.v-line i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.v-line b { color: var(--u-gold); }
.rate--ro { margin-top: 8px; }
.rate--ro .rb { cursor: default; }
.rate--ro .rb:hover { transform: none; }
.v-gitem { display: flex; align-items: center; gap: 9px; margin-top: 9px; font-size: 13px; }
.v-gname { flex: 1; min-width: 0; color: var(--u-tx); font-weight: 600; }
.v-sub { margin: 14px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--u-lab); }
.vsrc {
  display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap;
  background: var(--u-surf); border: 1px solid var(--u-line);
  border-radius: 10px; padding: 9px 11px; margin-top: 8px;
  font-size: 12.5px; color: var(--u-tx);
}
.vsrc .v-desc { margin: 0; flex: 1; min-width: 0; }
.vsrc .src-open { word-break: break-all; }

/* ----- الدروس: صف = ترتيب تلقائي + رقم الشابتر + اسمه ----- */
.lrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.lorder {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: #e1c172; color: #14233f;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  direction: ltr;
}
.l-in {
  border: 1.5px solid var(--u-in-line); border-radius: 9px;
  background: var(--u-in-bg); color: var(--u-tx-strong);
  padding: 7px 10px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  outline: none;
  transition: border-color .15s;
}
.l-in:focus { border-color: var(--c-gold); }
.l-in::placeholder { color: var(--u-ph); font-weight: 400; }
.l-num { flex: none; width: 90px; text-align: center; }
.l-name { flex: 1; min-width: 0; }
.l-del {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
  color: var(--u-fade); font-size: 11px; line-height: 1;
  transition: background .15s, color .15s;
}
.l-del:hover { background: var(--u-del-bg); color: var(--u-del-tx); }
/* صف الدرس داخل المساهمة (قراءة فقط) */
.lrow--ro { font-size: 13px; }
.l-numv { flex: none; min-width: 60px; text-align: center; color: var(--u-gold);
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; direction: ltr; unicode-bidi: embed; }
.l-namev { flex: 1; min-width: 0; color: var(--u-tx); font-weight: 600; }
/* مربع «فـ» ملصوق بمربع الرقم يمينَه (RTL: «فـ» يمين، الرقم يساره) */
.ch-group { flex: none; display: inline-flex; align-items: stretch; }
.ch-tag {
  flex: none; display: flex; align-items: center; padding: 0 8px;
  background: var(--u-ctl); color: var(--u-lab);
  border: 1.5px solid var(--u-in-line); border-inline-end: 0;
  border-radius: 0 10px 10px 0; font-size: 12px; font-weight: 800;
}
.ch-group .l-num { width: 56px; border-radius: 10px 0 0 10px; }
/* الإنجليزية: «Ch» يسار الرقم (المجموعة LTR) وقلب زوايا التدوير */
html[data-lang="en"] .ch-group { direction: ltr; }
html[data-lang="en"] .ch-tag { border-radius: 10px 0 0 10px; }
html[data-lang="en"] .ch-group .l-num { border-radius: 0 10px 10px 0; }
/* الموضوع كنص واحد متلاصق في العرض «Ch12. How to eat» */
.ltopic { flex: 1; min-width: 0; color: var(--u-tx); font-weight: 600; unicode-bidi: plaintext; }
/* رأس «الشروح»: العبارة ثم صورة صغيرة واسم صاحب القائمة يسارها */
.vid-from-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.vid-from-row .cm-k { flex: none; }
/* صاحب القائمة: صورة صغيرة + الاسم ملاصق لها */
.vid-who { display: inline-flex; align-items: center; gap: 5px; }
.post-av--xs { width: 20px; height: 20px; }
.post-av--xs svg { width: 13px; height: 13px; }

/* ----- محرّرا الرزم (الشروح والبطائق): صفوفٌ في شجرة «خ٣» -----
   (رقاقات القوائم ورؤوس الدروس ‎.vlist-chip‎ و‎.vlesson‎ و‎.vid-add‎ حُذفت مع نموذج
   «قائمة ← دروس» القديم — الرزمة اليوم شجرةٌ حرّة تُحرَّر بهيئة نشرها نفسها) */
.vid-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.vid-in {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--u-in-line); border-radius: 9px;
  background: var(--u-in-bg); color: var(--u-tx-strong);
  padding: 7px 10px; font-family: inherit; font-size: 13px; outline: none;
}
.vid-in:focus { border-color: var(--u-gold); }
/* ===== حذفُ البند في الشجرة: سلّةٌ حمراء لا ✕ =====
   الحمرةُ والسلّةُ هما لغةُ الحذف في هذا الموقع (زرُّ حذف المساهمة في شريط التحرير)،
   وكانت هنا ✕ رماديّةً — فيختلف رمزُ الفعل الواحد باختلاف موضعه.
   ولونُها لونُ ذاك بعينه (‎#c0455f‎) لا أحمرَ ثانيًا يُخترع */
.cx-del {
  flex: none; width: 22px; height: 22px;
  border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: #c0455f; line-height: 1;
  transition: color .15s;
}
.cx-del svg { width: 15px; height: 15px; display: block; }
/* ===== وقربُ اليد يُظلم الحبرَ ولا يُشعل قرصًا =====
   كان المرورُ يُشعل قرصًا أحمرَ تحته (‎--u-del-bg‎ على ‎border-radius: 50%‎). وذاك في صفٍّ
   من الشجرة صياحٌ لا خبر: القرصُ يقتحم السطرَ ويسحب النظرَ إلى الإتلاف قبل أن يُقصد،
   والمقصودُ من المرور إشعارٌ بأنّ الزرَّ حيّ لا إعلانُ فعلٍ لم يقع.
   فذهب القرصُ وذهب معه نصفُ قطره وانتقالُ الخلفيّة — ولم يبقَ إلّا **حبرٌ يظلم**:
   ‎#c0455f‎ ساكنًا و‎#a3364d‎ عند القرب. وهو أهدأُ ما يقول «يُضغط» في صفٍّ مزدحم.
   (‏و‎--u-del-bg‎ باقٍ لأهله: يقرؤه ‎.l-del‎ وسواه ممّن يليق به القرص) */
.cx-del:hover { color: #a3364d; }

/* ===== البطائق (ROADMAP-CARDS): محرر الشجرة =====
   الهيئة القديمة (صناديق ‎.cx-node‎ و‎.cx-frow‎ و‎.cx-ch‎ و‎.cx-cnt‎ ونصوصٌ متعددة الأسطر) حُذفت:
   المحرّر صار بشجرة «خ٣» نفسها التي يُنشر بها — تنسيقها في كتلة ‎.x3‎ و‎.vt‎ في آخر الملف */
.cx-add { display: flex; gap: 6px; margin-top: 8px; }
/* ===== عرض الشروح: مشغّل (يمين) + قائمة مواضيع أكورديون (يسار) — لوحة بيضاء ===== */
.vplayer {
  background: #fff; border: 1px solid rgba(44, 94, 101, .16); border-radius: 14px;
  padding: 14px; color: #14233f; direction: rtl;
}
.vp-from { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #5d6b82; margin-bottom: 12px; }
.vp-who { display: inline-flex; align-items: center; gap: 5px; }
.vp-av { flex: none; width: 20px; height: 20px; border-radius: 50%; overflow: hidden;
  background: #eef4f5; color: #2c5e65; display: flex; align-items: center; justify-content: center; }
.vp-av svg { width: 13px; height: 13px; } .vp-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-from b { color: #14233f; font-size: 13px; }
.vp-body { display: flex; gap: 14px; align-items: flex-start; }
.vp-main { flex: 1; min-width: 0; }
.vp-screen { aspect-ratio: 16/9; border-radius: 11px; overflow: hidden;
  background: linear-gradient(140deg, #2f636b, #1f4850); display: flex; align-items: center; justify-content: center; }
.vp-video { width: 100%; height: 100%; display: block; background: #000; }
.vp-linkscreen { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; }
.vp-bigplay { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .16);
  border: 2px solid rgba(255, 255, 255, .85); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.vp-empty { color: #cfe0e3; }
.vp-now { margin-top: 9px; font-size: 14px; }
.vp-topic { font-weight: 700; unicode-bidi: plaintext; } .vp-fx { color: #c9a25c; }
.vp-list { flex: none; width: 264px; border: 1px solid rgba(44, 94, 101, .16); border-radius: 11px; overflow: hidden; }
.vp-les + .vp-les { border-top: 1px solid rgba(44, 94, 101, .1); }
.vp-les-hd { display: flex; align-items: center; gap: 8px; padding: 9px 11px; cursor: pointer; }
.vp-les-hd:hover { background: #f4f7f8; }
.vp-les-hd .vp-topic { flex: 1; min-width: 0; font-size: 12.5px; }
.vp-cnt { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 20px; background: #eef4f5; color: #2c5e65;
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; }
.vp-chev { flex: none; color: #5d6b82; transition: transform .2s; }
.vp-les.open .vp-chev { transform: rotate(180deg); }
.vp-les-body { display: none; padding: 2px 8px 9px; }
.vp-les.open .vp-les-body { display: block; }
.vp-vid { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.vp-vid:hover { background: #f4f7f8; }
.vp-vid.on { background: rgba(44, 94, 101, .1); }
.vp-thumb { flex: none; width: 42px; aspect-ratio: 16/10; border-radius: 6px;
  background: linear-gradient(135deg, #3a6f78, #22505a); display: flex; align-items: center; justify-content: center; }
.vp-thumb svg { width: 14px; height: 14px; fill: #fff; }
.vp-vlabel { flex: 1; min-width: 0; font-size: 11.5px; color: #35455c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .vp-body { flex-direction: column; } .vp-list { width: 100%; } }

/* ===== «الشروح» المجمّعة: رقاقات القوائم ← عدسات ← مشغّل + عمود المواضيع ===== */
.vx-chips, .vx-lens { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vx-chips { margin-bottom: 10px; }
.vx-lens { margin-bottom: 12px; }
.vx-chip {
  border: 1.5px solid rgba(44, 94, 101, .18); border-radius: 11px; background: #fff; cursor: pointer;
  padding: 5px 11px; font-family: inherit; font-size: 12px; font-weight: 700; color: #35455c;
  display: inline-flex; align-items: center; gap: 6px;
}
.vx-chip:hover { border-color: #2c5e65; }
.vx-chip.on { border-color: #2c5e65; background: #eef4f5; }
.vx-chip--exp { border-radius: 20px; font-size: 11.5px; padding: 4px 10px; }
.vx-mbtn {
  border: 1.5px solid rgba(44, 94, 101, .18); border-radius: 9px; background: #fff; cursor: pointer;
  padding: 5px 11px; font-family: inherit; font-size: 12px; font-weight: 700; color: #35455c;
}
.vx-mbtn.on { background: #2c5e65; border-color: #2c5e65; color: #fff; }
.vx-spine { flex: none; width: 264px; border: 1px solid rgba(44, 94, 101, .16); border-radius: 11px; overflow: hidden auto; max-height: 380px; }
.vx-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid rgba(44, 94, 101, .1); }
.vx-row:last-child, .vx-empty:last-child { border-bottom: 0; }
.vx-row:hover { background: #f4f7f8; }
.vx-row.on { background: rgba(44, 94, 101, .1); }
.vx-row .lorder { width: 22px; height: 22px; font-size: 11px; }
.vx-rmeta { flex: 1; min-width: 0; }
.vx-rt { display: block; font-size: 12px; font-weight: 700; color: #14233f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.vx-rs { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #5d6b82; }
.vx-star { color: #c9a25c; }
.vx-empty { padding: 8px 10px; font-size: 11.5px; color: #5d6b82; border-bottom: 1px solid rgba(44, 94, 101, .1); }
.vx-now { margin-top: 9px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.vx-who { display: inline-flex; align-items: center; gap: 5px; }
/* عناصر المجتمع (لايك/اسم/صورة/تعديل) داخل اللوحة البيضاء: ألوان فاتحة بدل توكنات النافذة الداكنة */
.vplayer .post-name { color: #14233f; }
.vplayer .post-av { background: #eef4f5; color: #2c5e65; }
.vplayer .post-like { border-color: rgba(44, 94, 101, .25); color: #5d6b82; }
.vplayer .post-like.on { background: #e1c172; border-color: transparent; color: #14233f; }
.vplayer .post-edit, .vplayer .post-del { border-color: rgba(44, 94, 101, .25); color: #5d6b82; }
@media (max-width: 560px) { .vx-spine { width: 100%; } }

/* ===== كومنتات الرزم (الشروح والبطائق): بثيم مساهمات الموقع نفسه ===== */
/* الرأس: الشارات (رقم + أيقونة) يمينًا · زر التوسيع/التضييق الصريح أقصى اليسار */
.pk-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pk--open .pk-head { margin-bottom: 10px; }
.pk-badges { display: flex; gap: 6px; flex-wrap: wrap; }
/* عربي: الأيقونة أولًا (يمين) والرقم يسارها · إنجليزي: العكس (قلب الاتجاه) */
.pkb { display: inline-flex; align-items: center; gap: 5px; }
html[data-lang="en"] .pkb { direction: ltr; }
.pkb svg { width: 13px; height: 13px; flex: none; }
.pkb-n { direction: ltr; unicode-bidi: embed; font-weight: 800; }
.pk-toggle {
  flex: none; margin-inline-start: auto;
  width: 30px; height: 26px; border-radius: 8px;
  border: 1.5px solid var(--u-in-line); background: transparent; cursor: pointer;
  color: var(--u-btntx);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.pk-toggle svg { width: 15px; height: 15px; transition: transform .2s; }
.pk-toggle:hover { border-color: var(--u-gold); color: var(--u-gold); }
.pk--open .pk-toggle svg { transform: rotate(180deg); }
/* في كروت التعليقات (المادة/الدكاترة): زر التوسيع أيقونة بلا إطار/مربّع */
.pk--fold .pk-toggle { border: 0; background: transparent; width: 24px; height: 24px; }
.pk--fold .pk-toggle svg { width: 18px; height: 18px; }
.pk--fold .pk-toggle:hover { color: var(--u-gold); }
/* «المادة»: سهم التوسيع إنلاين ملتصق بنهاية النص كأنه جزء منه — بلا مربّع ولا هوامش */
.pk--info .pk-toggle--inline {
  display: inline; width: auto; height: auto; margin: 0; padding: 0 1px;
  border: 0; background: transparent; color: var(--u-mut); cursor: pointer;
  vertical-align: middle;
}
.pk--info .pk-toggle--inline svg { width: 14px; height: 14px; vertical-align: -2px; transition: transform .2s; }
.pk--info.pk--open .pk-toggle--inline svg { transform: rotate(180deg); }
.pk--info .pk-toggle--inline:hover { color: var(--u-gold); }
/* ===== «الشروح»: الرزمة كومنت كامل الهوية (post-yt) كبقيّة البنود =====
   المنشور: المجلد مجلدًا، والفيديو عنصر عائم في المجرى (كملفات «المصادر») لا مستطيلًا
   بعرض السطر. وخطّ الرزمة الرأسيّ (نفس خطّ المجلد المفتوح) يمتدّ من تحت اسم الكاتب
   إلى آخر بند فيها — فيدلّ على أنّ ما تحته كلّه رزمة صاحب الكومنت */
.pk--pack .pk-tree {
  margin-top: 2px; padding-inline-start: 12px;
  border-inline-start: 1.5px solid var(--u-line);
}
/* بندٌ واحد في كل صفّ: الفيديوهات تحت بعضها عموديًّا (لا فيديوان في صفّ) وتبقى عائمة بعرض محتواها */
.pk--pack .pk-tree, .pk--pack .pk-tree .cx-ch {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.pk--pack .pk-tree .cx-ch { margin-top: 2px; }
.pk--pack .pk-vbadge { gap: 6px; margin-bottom: 0; }
/* امتدادات أفقية تخرج من الخطّ الرأسيّ فترتبط بكل بند (فيديو أو مجلد) — في الخطّ
   الخارجيّ وفي كل خطّ داخل المجلدات، فتبدو الرزمة شجرةً موصولة لا خطًّا سائبًا */
.pk--pack .pk-tree .cx-ro-frow, .pk--pack .pk-tree .pk-vbadge { position: relative; }
.pk--pack .pk-tree .cx-ro-frow::before, .pk--pack .pk-tree .pk-vbadge::before {
  content: ''; position: absolute; top: 50%;
  inset-inline-start: -12px; width: 12px; height: 1.5px;
  background: var(--u-line);
}
.pk--pack .pk-vbadge .cx-ic { width: 14px; height: 14px; }
.pk--pack .pk-vdur {
  flex: none; font-style: normal; font-weight: 700; font-size: 10px;
  direction: ltr; unicode-bidi: embed; opacity: .72;
}
/* بطاقة التحرير: الشارات الحيّة فوق شجرة المحرر، والعمود كلّه بعرض البطاقة */
.pk--edit .fold-peek.vedit { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; min-width: 0; }
.pk--edit .fold-peek.vedit > .pk-badges { flex: none; }
.pk--edit .fold-peek.vedit .cx-add { flex-wrap: wrap; }
/* صفوف فيديوهات الرزمة المفتوحة */
.pk-screen { margin-bottom: 9px; }
.pk-vrow {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 9px; cursor: pointer;
  font-size: 12.5px; color: var(--u-tx); font-weight: 600;
}
.pk-vrow:hover { background: var(--u-hov); }
.pk-vrow.on { background: var(--u-ctl); color: var(--u-tx-strong); }
.pk-vrow--ro { cursor: default; }
.pk-play { flex: none; color: var(--u-gold); font-size: 10px; }
.pk-dur { margin-inline-start: auto; direction: ltr; unicode-bidi: embed; font-size: 11px; font-weight: 700; color: var(--u-lab); }
.pk-studyrow { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
/* متصفح شجرة الرزمة (قراءة) — بتوكنات الموقع */
.cx-browser { margin-top: 4px; }
.cx-ro-frow {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--u-tx-strong);
}
.cx-ro-frow:hover { background: var(--u-hov); }
/* الاسم لا يتمدد — عدّاد البطائق يلتصق بنهايته مباشرة (والطويل يُقتطع) */
.cx-ro-frow b { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* أيقونات الشجرة الصريحة: مجلد (يتبدل مفتوح/مغلق) · بطاقة · فيديو — على يمين الصف */
.cx-ic { flex: none; width: 15px; height: 15px; color: var(--u-lab); display: inline-flex; }
.cx-ic svg { width: 100%; height: 100%; }
.cx-ic--f { color: var(--u-gold); }
.cx-ro-c {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; margin-top: 6px;
  border: 1px solid var(--u-line); border-radius: 9px;
  background: var(--u-surf); font-size: 12.5px; color: var(--u-tx);
}
.cx-ro-tx { flex: 1; min-width: 0; white-space: pre-wrap; }
.cx-study {
  flex: none;
  border: 1.5px solid var(--u-in-line); border-radius: 9px; background: transparent;
  color: var(--u-btntx); padding: 4px 11px; font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.cx-study:hover { background: #e1c172; border-color: #e1c172; color: #14233f; }

/* ===== وضع المذاكرة (م3): بطاقة كبيرة تنقلب + تقييم مؤقت + ملخص ===== */
.cxs-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cxs-prog {
  flex: none; font-weight: 800; color: #2c5e65; font-size: 13px;
  direction: ltr; unicode-bidi: embed;
  background: #eef4f5; border-radius: 20px; padding: 2px 10px;
}
.cxs-bar .vp-topic { flex: 1; min-width: 0; font-size: 13.5px; }
.cxs-btn {
  flex: none; border: 1.5px solid rgba(44, 94, 101, .2); border-radius: 9px; background: #fff;
  color: #35455c; padding: 4px 11px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.cxs-btn:hover { background: #eef4f5; }
.cxs-card {
  border: 1.5px solid rgba(44, 94, 101, .2); border-radius: 14px; background: #fff;
  padding: 26px 22px; min-height: 180px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; box-shadow: 0 2px 10px rgba(20, 35, 63, .06);
}
.cxs-face { font-size: 16px; font-weight: 700; color: #14233f; white-space: pre-wrap; }
.cxs-divider { width: 64px; border-top: 2px dashed rgba(201, 162, 92, .55); }
.cxs-backtx { font-size: 14.5px; color: #35455c; white-space: pre-wrap; }
.cxs-show {
  border: 1.5px dashed #c9a25c; border-radius: 10px; background: transparent; cursor: pointer;
  color: #a8842e; padding: 7px 16px; font-family: inherit; font-size: 13px; font-weight: 700;
}
.cxs-show:hover { background: rgba(201, 162, 92, .1); }
/* أزرار أنكي الأربعة (يمين→يسار: مرة أخرى · صعب · جيد · سهل) مع معاينة الفاصل تحت كل زر */
.cxs-grade { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.cxs-g {
  flex: 1; max-width: 116px; border: 0; border-radius: 10px; cursor: pointer;
  padding: 7px 8px; font-family: inherit; font-size: 12.5px; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: all .15s;
}
.cxs-g small { font-size: 10px; font-weight: 700; opacity: .75; }
.cxs-g--again { background: #f6e5e3; color: #a5433c; }
.cxs-g--again:hover { background: #a5433c; color: #fff; }
.cxs-g--hard { background: #f6efe0; color: #a8842e; }
.cxs-g--hard:hover { background: #a8842e; color: #fff; }
.cxs-g--good { background: #e4f0e9; color: #2f7a53; }
.cxs-g--good:hover { background: #2f7a53; color: #fff; }
.cxs-g--easy { background: #e7eef6; color: #345e86; }
.cxs-g--easy:hover { background: #345e86; color: #fff; }
/* شارات الجدولة على عمود المواضيع: 🔵 جديدة · 🟢 مستحقة اليوم */
.cxb {
  min-width: 17px; height: 15px; padding: 0 5px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800;
}
.cxb--new { background: #e7eef6; color: #345e86; }
.cxb--due { background: #e4f0e9; color: #2f7a53; }
.cx-studyset { flex: none; margin-inline-start: auto; display: inline-flex; gap: 6px; }
.cx-studyset .cx-study { margin-inline-start: 0; }
.cx-study--due { border-color: var(--u-gold-dash); color: var(--u-gold); }
.cx-study--due:hover { background: #e1c172; border-color: #e1c172; color: #14233f; }
.cxs-sum { text-align: center; padding: 34px 10px 18px; font-size: 17px; font-weight: 800; color: #14233f; }
.cxs-sumbtns { display: flex; gap: 10px; justify-content: center; padding-bottom: 8px; }

/* بطاقات السوق الرئيسي قابلة للنقر لفتح التفاصيل */
#m-grid .crow[data-info] { cursor: pointer; }

/* ---------- نافذة تواريخ الترم (نفس ثيم النافذة البترولية) ---------- */
.mmodal__card--sm { width: min(430px, 92vw); }
.mmodal__card--md { width: min(720px, 94vw); }
/* النافذة ترث جلد واجهة المساهمات (توكنات ‎--u-*‎) لكنها تبقى صندوقًا حقيقيًّا لا display:contents،
   وسطحها أبيض في الثيم الفاتح كبقيّة أسطح الكتابة */
/* و‎.mmodal‎ في المنتقى قصدًا لرفع الترجيح: كتلةُ توكنات الجلد الفاتح تردّ ‎display‎ إلى
   ‎block‎ بترجيحٍ أعلى (‎html[data-theme] #card-modal .mmodal__card‎) لتنقض ‎contents‎ —
   وهو صوابٌ في ‎#cm-ui‎ وأخواتها، وخطأٌ هنا: النافذةُ عمودٌ مرن. ولذلك كانت المكبَّرة
   تُخلي جوفَها في الجلد الفاتح وحدَه: جسمُها لا يمتدّ، وحقولُها تنكمش إلى صفرٍ —
   إذ أساسُها ‎flex-basis:0‎ فلا تأخذ إلّا من فضاءٍ يُقسم، ولا فضاءَ في صندوقٍ كتليّ.
   فيُساوى الترجيحُ هنا ويُقدَّم بتأخّره في الملفّ. و‎html‎ و‎.mmodal‎ كلاهما لازمٌ للمساواة:
   المنافسُ ‎html[data-theme] #card-modal .mmodal__card‎ = معرّفٌ وصنفان وعنصر،
   فلا يكفي أحدُهما — جُرّب ‎.mmodal‎ وحدَه فسقط بفارق العنصر وبقي الجوفُ خاويًا */
html #card-modal.mmodal .mmodal__card {
  display: flex; flex-direction: column; position: relative;
  border-radius: var(--cd-r);
}
/* الجلد نفسه الذي لنافذة إعدادات الترم — لا التدرّج البترولي، فيتّسق مع الصفحة في الوضعين */
/* التوكنات على النافذة كلّها لا على البطاقة وحدها: منتقي النوع ورصيف الوجهة
   سطحان شقيقان لها لا ابنان، فلو بقيت التوكنات في البطاقة سقطا إلى قيمتهما الاحتياطيّة البيضاء */
/* ============================================================
   ورقُ البطائق — لونٌ واحدٌ في ثلاثة مواضع
   ============================================================
   مستطيلُ المدخلات · ورقةُ الملخّص · وأرضُ الصورة التي يخبزها «مُفصِّل».
   وكانت **ثلاثةَ إعلاناتٍ فافترقت**: ‎#1a2e34‎ للورقة و‎#1d3036‎ للصورة (وهو ‎--cd-pan‎
   أي لونُ الترويسة لا لونُ الورق). فبان الفرقُ حين نزلت صورةٌ مخبوزةٌ في مستطيلٍ:
   مستطيلٌ في مستطيلٍ وحافّةٌ بينهما لا معنى لها.
   ===== ولمَ على الجذر لا على بطاقة النافذة؟ =====
   الخبزُ يصنع **توأمَي الصورة معًا** مهما كان الجلدُ القائم (الفاتحةَ والداكنةَ في
   حسابٍ واحد)، فيلزم اللونان في وقتٍ واحد — ولا يُنالان من توكنٍ يتبدّل بالجلد.
   وستّةُ محارفَ لا ثلاثة (‎#ffffff‎ لا ‎#fff‎): الخبزُ يقرؤه بالقصّ (‎flHex‎) لا بمحلّل ألوان.
   ============================================================ */
:root { --cd-fld-l: #ffffff; --cd-fld-d: #1a2e34; }

/* العتمة تبقى عتمةً وسطًا: تستردّ ما سلبه ‎display:contents‎ من قاعدة التوكنات */
#card-modal {
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 20, 24, .58);
  /* سطح الحقول صلبًا: ‎--u-surf‎ شفّافة (‎rgba .07‎) فلا يحجب النتوءُ المبنيّ عليها ما تحته.
     هذه قيمتها نفسها بعد مزجها بسطح النافذة، لكن معتمة فتَحجب */
  --cd-surf: #26363a;
  /* ===== جوفُ النافذة: ورقةٌ على طاولة =====
     ما بين الترويسة والتذييل سطحان لا سطح: **الطاولةُ** (‎--cd-desk‎) وعليها
     **مستطيلاتُ المدخلات** (‎--cd-fld‎). وكانا واحدًا: الجوفُ يرث سطحَ النافذة
     (‎--cd-win‎) والمستطيلُ يأخذ ‎--cd-surf‎ — وهو سطحٌ عامٌّ يلبسه المسارُ وقائمةُ
     المجلدات ومروحةُ النسخ، فلا يُعاير لهذا الموضع وحدَه.
     والقيمتان **منقولتان من ورقة الملخّص بعينها**: ‎--shp-bg‎ الداكنةُ ورقًا،
     و‎.sh-body‎ الداكنةُ طاولةً. ومكسبُ ذلك أنّهما **معايَرتان من قبلُ**: ثلاثُ محاولاتٍ
     ضبطت الفرقَ بينهما (الورقةُ أضوأُ من طاولتها **بدرجةٍ واحدةٍ لا بأربع**) — ومكسبٌ
     ثانٍ أنّ ما تكتبه في البطاقة وما تقرؤه في ورقتها يصيران مادّةً واحدة */
  --cd-fld: var(--cd-fld-d);    /* المستطيل — ورقُ البطائق */
  --cd-desk: #0f2126;           /* ما خلفه — طاولةُ الورقة (‎.sh-body‎ الداكنة) */
  --cd-win: #16272b; --cd-winline: #25403f;   /* سطح النافذة وحدّها لنتوء الأزرار */
  --cd-tx: #e8f0f1; --cd-mut: #cfe0e3;
  /* سطح الترويستين: بين سطح النافذة وسطح الحقول — فتُقرآن شريطين لا خطّين */
  --cd-pan: #1d3036;
  /* سطح الدُّرج: ‎--cd-pan‎ نفسُه شفّافًا قليلًا — يُرى ما خلفه معتمًا فلا ينقطع المشهد */
  --cd-pan-a: rgba(29, 48, 54, .8);
  /* ===== لونا حال النشر — مصدرٌ واحد للحلقة وللختم =====
     كانا مكتوبين في موضعين فافترقا (صار الختم أزرق والحلقة خضراء في الحال نفسها).
     فمن كتبهما هنا مرّةً استحال أن يفترقا بعدُ */
  --cd-sync: #4e9d57;   /* استقرّت: ما عندك هو ما عند الناس */
  /* وأحمرُ الخطأ: هو أحمرُ الخيار الخاطئ في «المتعدّد» بعينه (‎#c0455f‎) لا ثانيًا يُخترع —
     فمربّعُ «أُجيبت خطأً» ودائرةُ الخيار الخاطئ يقولان الشيءَ نفسَه بلونٍ واحد */
  --cd-wrong: #c0455f;
  --cd-pend: #d1791f;   /* في يدك تعديلٌ لم يصل أحدًا */
  /* ===== كهرمانيُّ «الصَّيحة»: قيمةُ ‎--cd-pend‎ ومعنًى غيرُه =====
     اختاره صاحبُ الموقع في ‎warn-icon-lab‎، وهو اليومَ لونُ «مسوّدةٌ لم تُنشر» نفسُه —
     فلو قرأت الصيحةُ ‎--cd-pend‎ لَتبع أحدُهما الآخرَ يومَ يُعدَّل. فله توكنُه: قيمتان
     متساويتان اليومَ، مستقلّتان غدًا */
  --cd-warn: #d1791f;   /* قارئٌ يقول: هنا معلومةٌ قد تكون خاطئة */
  --cd-old: var(--u-lab, #7c8ba0);  /* نسخةٌ مضت — والشريطُ يأخذه كي لا يُخترع رصاصيٌّ ثانٍ */
  --cd-shade: rgba(0, 0, 0, .38);   /* ظلُّ ما وراء حافّة الانزلاق */
  /* ===== الحوضُ والمقبض: عمقٌ بالطرح ونتوءٌ بالإضافة =====
     الحوضُ غائرٌ فيه ظلٌّ **داخليّ**، والمقبضُ مرتفعٌ عليه ظلٌّ **ساقط** — وهما ضدّان
     يقولان معًا «هذا محبوسٌ في ذاك». ويعملان في الجلدين لأنّ الغائرَ لا يموت في الداكن
     كما يموت الساقطُ وحدَه (درسُ خارطة «الجَبْهة») */
  --cd-well: rgba(0, 0, 0, .22);
  --cd-well-in: inset 0 1px 2px rgba(0, 0, 0, .28);
  --cd-lift: 0 1px 2px rgba(0, 0, 0, .35);
}
#card-modal .mmodal__card {
  background: var(--cd-win); border-color: var(--cd-winline);
  box-shadow: 0 20px 52px -24px rgba(0, 0, 0, .6);
}
html[data-theme="light"] #card-modal {
  background: rgba(20, 35, 63, .3);
  --cd-surf: #f3f6f6; --cd-win: #fff; --cd-winline: #dbe6e6;
  /* والفاتحُ يقلب النسبةَ التي كانت: كان الجوفُ أبيضَ والمستطيلُ رماديًّا فاتحًا — فالورقُ
     أغمقُ من طاولته، وهو نقضٌ للمادّة. فصار **المستطيلُ أبيضَ** والطاولةُ رماديّةً.
     وقيمةُ الطاولة هي قيمةُ ‎.sh-body‎ حرفًا بحرف: شفّافةٌ تُركَّب على سطح النافذة
     (‎#fff‎) فتُخرج ‎#c8cbcd‎ — والشفافيّةُ مقصودةٌ لا مصادفة: تتبع ما تحتها إن تبدّل */
  --cd-fld: var(--cd-fld-l);
  --cd-desk: rgba(6, 20, 26, .22);
  --cd-tx: #35455c; --cd-mut: #5d6b82; --cd-pan: #f7fafa;
  --cd-pan-a: rgba(247, 250, 250, .82);
  --cd-shade: rgba(20, 35, 63, .22);   /* في البياض حبرُ الصفحة لا السواد: يُقرأ ولا يتّسخ */
  /* وفي البياض يُخفَّف الغور: السوادُ على الأبيض يتّسخ، فيُبنى الحوضُ بحبر الصفحة */
  --cd-well: rgba(44, 94, 101, .1);
  --cd-well-in: inset 0 1px 2px rgba(20, 35, 63, .12);
  --cd-lift: 0 1px 2px rgba(20, 35, 63, .18);
}
html[data-theme="light"] #card-modal .mmodal__card {
  color: #35455c;
  box-shadow: 0 2px 10px rgba(20, 35, 63, .06), 0 22px 54px -26px rgba(20, 35, 63, .45);
}
/* السطحان الشقيقان يرثان لون نصّ النافذة أيضًا، وإلّا ورثا لون الصفحة خلف العتمة */
.cd-types { color: var(--cd-tx); }
#card-modal .cd-foot .cd-path { color: var(--cd-mut); }
#card-modal .cd-foot .cd-fbtn { color: var(--cd-tx); }
/* ===== التكبير: المسرحُ كلُّه يملأ ما بقي من الشاشة =====
   كان المقاسُ يُفرض على البطاقة وحدها بـ‎vh/vw‎ مطلقة، فوقع خطآن:
     · العرضُ لا يتّسع أصلًا — المسرحُ محصورٌ بـ‎min(720px,100%)‎ وقاعدتُه تأتي بعده
       فتردّ البطاقة إلى ‎100%‎ منه، فيُرى الملءُ رأسيًّا وحده.
     · والارتفاعُ ‎94vh‎ لا يطرح ارتفاعَ الدُّرج (حَشْوُ النافذة ‎--tray-h‎) ولا رصيفَ المسار
       تحتها — وكلاهما من جسدها، فتتجاوز إلى الدُّرج ويُدفع الرصيفُ خارج الشاشة.
   فالمقاسُ الآن **بالتمدّد لا بالأرقام**: المسرح يمتدّ في الاتّجاهين داخل صندوق المحتوى
   (وهو أصلًا ما بقي بعد الدُّرج)، والبطاقةُ تأخذ ما فضل بعد الرصيف — فيظهران معًا أبدًا */
/* الهوامش قيمٌ مسمّاة لا أرقامٌ مبعثرة: الجانبان والأسفل يتنفّسان، والأعلى أوسعُ منهما
   لأنّ مِقبض الدُّرج ينزل تحت قاعه — فلو ساويناه لَتداخل رأسُ النافذة مع المِقبض.
   و‎--cd-top‎ ارتفاعُ ما يعلو المسرح: الدُّرجُ إن كان منسحبًا وإلّا صفر — مصدرٌ واحد
   يقرؤه الملءُ والإلصاقُ والشبح، فلا يُنسى في أحدها فتدخل النافذة تحت الدُّرج */
#card-modal { --mx-side: 30px; --mx-top: 52px; --mx-bot: 30px; --cd-top: 0px; --cd-r: 10px; }
/* ============================================================
   مقاساتُ الشريطين — كتلةٌ واحدة معايَرةٌ بيد صاحب الموقع (‎head-crowd-lab#n‎)
   ============================================================
   اللوحُ أخرجها كتلةً، فتُنقل كتلةً: الرقمُ المفرد الذي يُذاق هنا ينقض ما عُويرَ في أخيه
   (مركزُ الدرجين تحت مركز الأزرار · ومركزُ الحضور فوق مركز النازل · والأذنُ تخرج بقدر
   عرضها · والطوقُ الداخليُّ = الخارجيُّ ناقصَ إزاحته).
   وموضعُها ‎#card-modal‎ لا الشريطُ نفسُه: النافذتان (البطاقةُ والورقة) تسكنان الصدَفةَ
   نفسَها، والنوافذُ المتعدّدةُ كلُّهنّ تحته — فتُقرأ مرّةً وتصحّ في الجميع */
#card-modal {
  /* الترويسة (الحاوية) */
  --h-padx: 10px; --h-pady: 8px; --h-gap: 10px; --s-gap: 5px;
  /* كتلةُ أزرار النافذة تتحرّك كتلةً واحدة، ولكلّ زرٍّ قدُّ رمزه — والثلاثةُ
     متدرّجةٌ لا متساوية: ✕ أصغرُها لأنّ شكلَه أكثفُ حبرًا، والطيُّ أكبرُها لأنّه خطٌّ واحد */
  --bar-gap: 2px; --bar-off: 1.5px; --bar-dy: 0px;
  --x-w: 37px; --x-h: 29px; --x-ic: 19px;
  --mx-w: 37px; --mx-h: 29px; --mx-ic: 20.5px;
  --mn-w: 37px; --mn-h: 29px; --mn-ic: 21px;
  /* الختم وكعبُه */
  --sl-h: 22px; --sl-bw: 2px; --sl-r: 6.5px; --sl-ins: 3px; --sl-r2: 3.5px;
  --sl-arw: 13px; --sl-arp: 5.5px; --sl-aric: 8px; --sl-em: 7px; --sl-num: 9px;
  --sl-gap: 3.5px; --sl-ps: 4.5px; --sl-pe: 9.5px;
  --sl-dng: 7px; --stub-ps: 7px; --stub-pe: 8px; --stub-gap: 1px;
  /* «من» والاسم */
  --wh-lab: 7.5px; --wh-nm: 9.5px; --wh-max: 14ch; --wh-op: .75; --wh-lh: 1.1;
  /* الصَّيحةُ والوِردةُ في الكعب · والمشاهداتُ والتعليقاتُ في ركن التذييل */
  --wn-ic: 8px; --wn-num: 7px; --wn-gap: 3px;
  /* ونصُّ الصَّيحة أكبرُ من رقمها: الرقمُ رمزٌ يُلمح والنصُّ كلامٌ يُقرأ، وجوفُ الختم
     ‎22px‎ يسعه. و‎--wn-tx-d‎ زمنُ انفتاحه — بابٌ واحدٌ للحركة والمعايرة */
  --wn-tx: 8.5px; --wn-tx-d: .3s;
  --pr-ic: 8px; --pr-num: 7px; --pr-gap: 3px;
  /* ===== وصُغّرت المشاهداتُ والتعليقاتُ حين صار الركنُ صفّين =====
     كانتا ‎15/11‎ وحدهما في صفّ، ثمّ ‎13/10‎ يوم نزل معهما ثالثٌ ونزل تحتهما صفٌّ ثانٍ،
     ثمّ ‎11/9.5‎ في معايرة اللوح (‎news-corner-lab‎): الركنُ يحمل خمسةَ أخبارٍ بعد أن حمل
     اثنين، والحبرُ في الشريط ثمنٌ يُدفع من الجميع — فيخفّ كلٌّ ليبقى المجموعُ محتمَلًا */
  --ey-ic: 11px; --ey-num: 9.5px; --ey-gap: 1.5px;
  --ch-ic: 11px; --ch-num: 9.5px; --ch-gap: 1.5px;
  /* التنزيلاتُ بقدّهما سواءً: هي ثالثتُهما في الصفّ لا خبرٌ من جنسٍ آخر */
  --dl-ic: 11px; --dl-num: 9.5px; --dl-gap: 1.5px;
    /* ورقمُ الجواب وفجوتُه — بقيّةُ معايرة الركن بعد أن ذهب مربّعُه */
  --ans-num: 9.5px; --ans-gap: 3px;
  /* ===== ومقابضُ الركن جميعًا =====
     · الفجوةُ بين الصفّين **صفر**: الرقمان تحت الرقمين فيُقرأ السطران جسمًا واحدًا لا
       كتلتين — ويكفي في فصلهما أنّ أحدَهما رموزٌ والآخرَ مربّعان.
     · والرموزُ بحبرها كاملًا (‎--stat-op‎): الخفوتُ إلى ‎.75‎ حسنٌ عند ‎14px‎، فلمّا نزل
       الرمزُ إلى ‎11px‎ صار ضبابًا — خطُّه عند هذا القدّ أرقُّ من أن يُنقص منه. فالقدُّ
       يُصغَّر والحبرُ يُشدّ، لا الاثنان معًا.
     · ونَقْرُ الرمز (‎--ic-dy‎) نصفَ بكسلٍ صعودًا: صندوقُ ‎svg‎ مربّعٌ وحبرُه في وسطه،
       وسطرُ الرقم يجلس أخفضَ من وسط صندوقه — فيستوي الحبران بالنَّقْر */
  --news-rg: 0px; --stat-op: 1; --ic-dy: -.5px;
  /* الحضور */
  /* ===== الحضور — معايَرٌ في ‎here-place-lab‎ =====
     · التراكبُ **صفر**: الوجوهُ تصطفّ ولا يركب بعضُها بعضًا، وطوقُ الفصل وحدَه
       يفرّق بينها. وكان سبعةً فكانت الكومةُ لطخةً واحدةً عند الأعداد الصغيرة.
     · والرقمُ الخارجُ ذهب من الحاضرين (انظر ‎cdHereHTML‎)، فبقيت فجوتُه للصفر وحدَه
       فضاقت من ثمانيةٍ إلى ثلاث. */
  --cc-sz: 15px; --cc-lap: 0px; --cc-ring: 2.75px; --hr-gap: 3px; --hr-num: 10.5px;
  /* ===== وللخاويات مقاديرُها لا مقاديرُ الحاضرين =====
     الحاضرُ **وجهٌ** يُنظر إليه فيَطلب قدَّه، والخاويةُ **موضعٌ محجوزٌ** لا وجهَ فيه —
     فقد يصلح لها ما لا يصلح له. وقدُّها اليومَ كقدِّه وتراكبُها غيرُ تراكبه */
  --z-sz: 15px; --z-lap: 4.5px;
  /* ===== وحبرُ الانتظار لونٌ واحدٌ يقرؤه الطوقُ والرقمُ معًا =====
     الخاويةُ طوقٌ مرقّطٌ ورقمُها ‎0‎ إلى جنبه، وهما خبرٌ واحد: «لا أحدَ بعد». فلو
     أخذ الرقمُ حبرَ المتن (‎--cd-tx‎) لَقال شيئًا وقالت الأطواقُ غيرَه — رقمٌ حاضرٌ
     بجنب أشباحٍ غائبة. فيُكتب اللونُ مرّةً هنا ويقرآنه، فيستحيل أن يفترقا.
     ===== وهو لونٌ لا ‎opacity‎ =====
     كان الطوقُ يخفت بشفافيّة العنصر (‎.55‎)، وهي تجعله **جذرَ ضباب** بلا حاجة.
     فصار الخفوتُ في اللون نفسِه بالمقدار عينِه (‎.22 × .55‎)، فالمرسومُ واحدٌ والآلةُ أسلم */
  --ph-ink: color-mix(in srgb, var(--u-in-line) 55%, transparent);
  /* ===== وبُعدُ الكتلة عن الحافّة: أساسٌ ساكنٌ يصحّحه القياس =====
     كانت خمسةَ أرقامٍ مذوَّقةٍ بعددها (‎25 · 40 · 34 · 27‎)، وكلٌّ منها إنّما ضُبط
     ليقع مركزُ الحضور فوق مركز النازل في التذييل — **وذاك لا يُدرَك بالتذوّق**:
     عرضُ النازل يتبدّل بمنازل أرقامه (مئةٌ وألفٌ لا يستويان)، وعرضُ الحضور يتبدّل
     بعدد من حضر. فرقمٌ يصحّ اليومَ يكذب غدًا.
     فبقي **أساسٌ واحدٌ ساكن** لئلّا تُرى قفزةٌ لو لم تعمل الشِّفرة، و‎cdHereFit‎ يقيس
     المركزين ويكتب فرقَهما في ‎--here-fit‎ */
  --here-off: 27px;
  /* التذييل (الحاوية) — و‎--ctl‎ قدُّ الحلقة والمسار معًا، و‎--gapw‎ طولُ الوصلة */
  --f-padx: 12px; --f-pady: 0px; --news-off: 4px; --news-in: 11.5px;
  --ctl: 30px; --gapw: 11px;
  --ring-bw: 1.5px; --ring-r: 9px; --ring-ins: 3.25px; --ring-r2: 6px; --ring-ic: 13px;
  --pth-padx: 11px; --pth-r: 9px; --pth-fs: 11.5px; --pth-gap: 5.5px; --pth-ic: 18.5px;
  /* ===== أدنى ما تنزل إليه كتلةُ الوجهة =====
     الوسطُ يتقلّص إذا ضاق الشريطُ أو انبسط درجُ الركن، **ولا حدَّ لتقلّصه في الشبكة**:
     ينزل إلى الصفر فيخرج زرّاه ومستطيلُه من صندوقهما. فيُكتب له أدنًى **من أجزائه** لا
     رقمًا مذوّقًا: حلقةٌ وسلّةٌ (‎--ctl‎ مرّتين) · الوصلةُ · فجوةُ السلّة عن الأذن ·
     ومستطيلُ مسارٍ يسع رمزَ المجلّد وحشوَه. فإذا عايرتَ جزءًا تبعه الأدنى بلا صيانة */
  --mid-min: calc(var(--ctl) * 2 + var(--gapw) + var(--ear-w) + var(--del-gap)
    + var(--pth-ic) + var(--pth-padx) * 2);
  --ear-w: 14px; --ear-h: 20px; --ear-r: 10px; --ear-ic: 10.5px;
  --del-ic: 14px; --del-gap: 3px;
  /* درجا الركن: الترسُ ومقاسُه، و‎--gr-off‎ بُعدُ الوعاء عن حافّة النافذة، و‎--pk-gap‎
     فجوتُهما. وقد صارا عضوين في الصفّ فيحجزان لأنفسهما، فماتت أرقامُ الحجز */
  --gr-w: 37px; --gr-h: 29px; --gr-ic: 22px; --gr-off: 34px; --dock-dy: 0px;
  --set-fs: 10.5px; --set-gap: 7px;
  --pk-w: 37px; --pk-h: 29px; --pk-ic: 22px; --pk-gap: 6px; --clip-in: 5px;
  --cp-w: 22px; --cp-ic: 15px; --ps-w: 22px; --ps-ic: 15px; --dp-w: 22px; --dp-ic: 15px;
}
#card-modal.is-tray { --cd-top: var(--tray-h); }
/* ===== الهندسةُ بالإحداثيّات المطلقة =====
   المواضعُ الثلاثة (ملءٌ · نصفٌ أيمن · نصفٌ أيسر) تُكتب بأربع حوافّ لا بهوامشَ مرنة —
   لأنّ **الشبح** يجب أن يُرسم بالقواعد نفسِها، وهو ليس عنصرًا مرنًا في صفّ.
   فتصريحٌ واحدٌ يخدم الاثنين، فيستحيل أن يعد الشبحُ بموضعٍ وتستقرّ النافذةُ في غيره.
   والاتّجاهُ بصريٌّ لا منطقيّ (‎left/right‎ لا ‎inset-inline‎): «يمين» يمينُ الشاشة
   وإن كانت الصفحة RTL — فما يراه المستخدم هو الحكم */
/* ===== الإلصاقُ صفةُ نافذةٍ لا صفةُ مسرح =====
   كانت أصنافُه على ‎#card-modal‎ فتحكم كلَّ ما فيه — وذلك يستقيم ونافذةٌ واحدة، فلمّا
   صارت النوافذُ عدّةً لَكبّر إلصاقُ واحدةٍ أخواتِها معها. فانتقلت إلى المسرح نفسِه،
   وبقي على النافذة الأمّ ظِلٌّ منها (‎snap-full‎) لأجل الدُّرج وحده: هو شريطٌ للشاشة
   كلِّها لا لنافذةٍ بعينها، فيسأل عن **المركَّزة** أهي مالئةٌ للشاشة أم لا */
#card-modal .cd-stage.snap-full, #card-modal .cd-snap[data-zone="full"] {
  left: var(--mx-side); right: var(--mx-side);
}
#card-modal .cd-stage.snap-r, #card-modal .cd-snap[data-zone="r"] {
  right: var(--mx-side); left: calc(50% + var(--mx-side) / 2);
}
#card-modal .cd-stage.snap-l, #card-modal .cd-snap[data-zone="l"] {
  left: var(--mx-side); right: calc(50% + var(--mx-side) / 2);
}
#card-modal .cd-stage.is-maxed, #card-modal .cd-snap {
  position: absolute; margin: 0; width: auto; max-width: none;
  top: calc(var(--cd-top) + var(--mx-top)); bottom: var(--mx-bot);
}
/* ===== مقامُ الملء وحدَه: الشاشةُ كلُّها لا أكثرُها =====
   الهوامشُ الثلاثة تُلغى هنا فقط — والنصفُ الملصق يبقى بهوامشه، فهو ترتيبُ نافذتين
   جنبًا إلى جنب لا استيلاءُ واحدةٍ على الشاشة.
   ويُكتب على **المسرح والشبح معًا** كسائر المواضع، فما وعد به الشبحُ هو الذي يقع.
   وموضعُه بعد كتلة ‎is-maxed‎ لا قبلها: الترجيحُ متساوٍ بينهما فالمتأخّرُ هو الحاكم.
   و‎--cd-top‎ يسقط هنا: في سائر المقامات ينزل المسرحُ بمقدار الدُّرج المبسوط فلا يُغطّى به،
   أمّا في الملء فالدُّرجُ **طبقةٌ فوق** النافذة لا شيءٌ يزاحمها — ينسحب فتبلغ الحافّة،
   ويعود فيطفو عليها. ولولا ذلك لَما ملأتِ الشاشةَ إن بقي الدُّرجُ مبسوطًا،
   ولَاختلف وعدُ الشبح عن مستقرّها (الشبحُ يُرسم والإلصاقُ لم يقع، فـ‎--cd-top‎ عنده غيرُه بعده).
   وصفرٌ مكتوبٌ صراحةً أصدقُ من متغيّرٍ يُصفَّر في مقامٍ دون مقام */
#card-modal .cd-stage.snap-full, #card-modal .cd-snap[data-zone="full"] {
  left: 0; right: 0; top: 0; bottom: 0;
}
/* لا هامشَ علويّ بعد اليوم: النتوء زال وصارت الأزرار داخل النافذة، فيستوي رأسُها بالحافّة */
#card-modal .cd-stage.is-maxed > .mmodal__card.is-max {
  width: 100%; height: auto; max-height: none; margin-top: 0;
  flex: 1 1 auto; min-height: 0;
}
/* وحوافُّها تستوي في الملء: انحناءٌ على حافّة الشاشة يُقرأ ثقبًا في السطح لا نافذةً،
   وحدٌّ مضيءٌ ملتصقٌ بالحافّة يُقرأ خطأً في الرسم — فيُرفعان معًا */
#card-modal .cd-stage.snap-full > .mmodal__card.is-max { border-radius: 0; border: 0; }
/* ===== التكبيرُ والاستعادةُ يُريان: تتّسع النافذةُ وتنكمش أمام عينك =====
   الحالان مقاسان في **نظامَي تخطيطٍ** مختلفين: مستقرّةً هي ابنةٌ متمركزةٌ في صفٍّ مرن
   بارتفاعٍ من محتواها، ومكبَّرةً صندوقٌ مطلقٌ بأربع حوافّ — ولا ينتقل CSS بين نظامين.
   فيقيس ‎cdMorph‎ الأولى، ثمّ يُلبس الحالَ الثانية ويقيس غايتَها، ثمّ يُثبّت النافذةَ
   بأربعة أرقامٍ صريحة على الأولى ويسوقها إلى الثانية، ثمّ يُطلقها فتقع على ما وُعدت به
   تمامًا — إذ الغايةُ **مقيسةٌ من الحال نفسِها** لا مقدّرة بحساب.
   والمقاسُ الحقيقيُّ لا ‎scale‎: التحجيمُ يمطّ النصَّ والحدَّ ثمّ يفرقعهما في منتهاه،
   وهذا يُعيد التخطيط في كلّ إطارٍ كحافّةِ نافذةٍ تُسحب حقًّا.
   و‎right/bottom: auto‎ ضرورةٌ لا زينة: الملصقةُ تكتبهما صفرًا، فلو بقيا مع ‎left/width‎
   لَتقيّد الصندوقُ بثلاثة، والقاعدةُ تُهمل حينئذٍ ‎left‎ في الاتّجاه من اليمين — فيقفز */
#card-modal .cd-stage.is-morph {
  position: absolute; margin: 0; max-width: none; z-index: 2;
  right: auto; bottom: auto;
  transition: left .34s cubic-bezier(.22, 1, .36, 1), top .34s cubic-bezier(.22, 1, .36, 1),
              width .34s cubic-bezier(.22, 1, .36, 1), height .34s cubic-bezier(.22, 1, .36, 1);
}
/* والبطاقةُ تملأ الصندوقَ المتحرّك في الاتّجاهين — ولولا ذلك لَانكمش جوفُها دَفعةً
   في أوّل الاستعادة ثمّ تبعه الصندوقُ متمهّلًا، فقُرئا شيئين لا شيئًا واحدًا */
/* والمُوسَّعةُ مثلُها: مقاسٌ صريحٌ على المسرح لا تتبعه البطاقةُ إلّا إن أُمرت بملئه —
   ولولا ذلك لَبقيت على ارتفاع محتواها وظهر تحتها فراغُ المسرح */
#card-modal .cd-stage.is-morph > .mmodal__card, #card-modal .cd-stage.is-sized > .mmodal__card {
  width: 100%; height: auto; max-height: none; margin-top: 0; flex: 1 1 auto; min-height: 0;
}
#card-modal .cd-stage.is-morph > .mmodal__card {
  transition: border-radius .34s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  #card-modal .cd-stage.is-morph, #card-modal .cd-stage.is-morph > .mmodal__card { transition: none; }
}
/* ===== ترسُ «ما يقع عند الحفظ»: عائمٌ يسارَ المسار، وشريطُه ينبسط يسارًا =====
   الآليّةُ آليّةُ «＋» في المحرّر حرفًا بحرف: الحبّةُ عرضُها صفرٌ مطويّةً ثمّ تتمدّد،
   وأبناؤها يظهرون واحدًا بعد واحدٍ فتتبع العينُ مسارَ الانفتاح ولا تُفاجأ بالكلّ دَفعة.
   والتمدّدُ نحو **الفراغ** لا نحو المسار: المِقبضُ أوّلُ الحبّة (يمينُها في الكتابة من اليمين)
   فما بعده ينبسط يسارًا. ولا صندوقَ للترس مطويًّا — «عائمٌ» كما طُلب، وسطحُه لا يظهر
   إلّا مبسوطًا ليُقرأ ما انفتح كتلةً واحدة */
/* ===== ودرجا الركن: الترسُ والجيبُ عائمان في طرف التذييل (‎head-crowd-lab#n‎) =====
   كان الترسُ في **صفّ أزرار الترويسة** (ثالثَ الثلاثة يسارَ التكبير)، وكانت أزرارُ
   الحافظة الثلاثةُ مبسوطةً في الترويسة أبدًا. فنزلا إلى ركن التذييل الأيمن **درجين
   يُفتحان عند الحاجة**: الترسُ إعدادٌ يُضبط مرّةً ويُنسى لا خبرٌ يُقرأ في كلّ نظرة،
   والحافظةُ ثلاثةُ أفعالٍ تُطلب في النادر.
   ===== وهما **عضوان في الصفّ** لا لوحان يطفوان فوقه =====
   كانا مسمَّرين بالوضع المطلق (‎inset-inline-start‎ — وهو في العربيّة اليمين)، فينبسط
   شريطُهما **طبقةً فوق** ما تحته: سطحٌ وحدٌّ وظلّ، ووسطُ الشريط لا يتزحزح.
   وقد رُدَّ ذلك بطلب صاحب الموقع: **الانبساطُ ضمن الشريط لا عليه**. فصارا في وعاءٍ
   واحدٍ (‎.cd-dock‎) هو ساكنُ عمود الركن، وانبساطُ أحدهما يوسّع العمودَ فيدفع الوسطَ
   يسارًا **دفعًا منسابًا** — إذ يتمدّد الشريطُ بمنحنًى، فتتبعه أعمدةُ الشبكة إطارًا إطارًا.
   وإذا بلغ الوسطُ حدَّه وقع له ما يقع عند تضييق النافذة نفسِه: يتقلّص ويُقصّ مسارُه.
   **ولزمهما وعاءٌ واحد**: عمودُ الشبكة يسع ساكنًا واحدًا، فلو تُركا اثنين لَتراكبا فيه.
   ===== ولا سطحَ للمبسوط ولا ظلّ =====
   كانا لأنّه يمرّ فوق حبر المسار فيجب أن يُقرأ لوحةً تطفو. وقد زال المرورُ فزال سببُهما،
   ولو بقيا لكانا **صندوقًا في صندوق** — وذلك عينُ ما نُقض في «ن». فالمبسوطُ عارٍ،
   ومِقبضُه المذهَّب هو الذي يقول إنّه مفتوح.
   ===== وقاعدتان باقيتان =====
     · **الانبساطُ يسارًا حتمًا**: الوعاءُ مسمَّرٌ في مبدأ عموده، فما زاد من العرض لا يجد
       إلّا اليسار — بلا حساب.
     · **ولا يُفتح درجان معًا** (في ‎app.js‎): وكانت علّتُه أنّ لوحَ الترس يمرّ فوق الجيب،
       وقد زالت — وبقي الحكمُ لعلّةٍ أخرى: عرضُ الشريط لا يسعهما مبسوطين.
   ومركزُ الاثنين معًا تحت مركز أزرار الترويسة: تناظرٌ **مركزٌ بمركزٍ لا حدٌّ بحدّ** */
.cd-foot { position: relative; }
/* ===== والوعاءُ يقف حيث كان المسمار =====
   ‎--gr-off‎ كان يُقاس من **حافّة الحشو** (تلك قاعدةُ الوضع المطلق)، والعضوُ في الشبكة
   يبدأ من **حافّة الجوف** — وبينهما حشوُ الشريط. فيُطرح، فيبقى الدرجان في موضعهما
   المعايَر بالضبط ويبقى للمقبض معناه: بُعدُهما عن حافّة النافذة */
.cd-dock {
  grid-column: 1; justify-self: start;
  display: inline-flex; align-items: center; gap: var(--pk-gap);
  margin-inline-start: calc(var(--gr-off) - var(--f-padx));
  translate: 0 var(--dock-dy);
}
.cd-setw {
  display: inline-flex; align-items: center; flex: none;
  box-sizing: border-box; height: var(--gr-h); padding: 0;
  border-radius: 9px; background: none;
}
.cd-clipw { height: var(--pk-h); }
/* ===== حبرٌ مصمتٌ لا شفّاف =====
   الرسمُ أجسامٌ متراكبة (ستُّ أسنانٍ + حلقةٌ + سهم)، فالحبرُ الشفّاف يُظهر مواضعَ
   تراكبها أغمقَ من جوارها — فتُقرأ الأيقونةُ قطعًا مفكوكةً لا شيئًا واحدًا.
   والخفوتُ يبقى كما هو لكن **بمزجٍ** لا بشفافيّة: لونُ التسمية ممزوجًا بسطح الشريط
   يعطي العينَ اللونَ نفسَه ويحفظ الجسمَ واحدًا. والمزجُ يتبع الجلدين معًا */
/* ===== مِقبضُ الدرج: جلدٌ واحدٌ للترس وللجيب =====
   هما درجان في ركنٍ واحدٍ بآليّةٍ واحدة، فيلبسان ‎cd-dh‎ نفسَه — ولا يفترق منهما إلّا
   القدُّ ورمزُه. ولو أُفرد لكلٍّ جلدٌ لَافترقا عند أوّل تعديل */
.cd-dh {
  flex: none; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--u-mut);
  border-radius: 6px; transition: color .14s, background .14s;
}
/* ومرورُهما كمرور أزرار النافذة: سطحٌ خافتٌ يظهر تحتهما */
.cd-dh:hover { background: var(--u-hov); color: var(--u-tx-strong); }
/* ===== ورمزُه لا يكبر مبسوطًا بعد اليوم =====
   كان صغيرًا مطويًّا (‎13.5‎) يكبر مفتوحًا (‎19‎)، والكِبَرُ خبرٌ عن الانفتاح. وقد صار
   قدُّه **مقبضًا معايَرًا في يد صاحب الموقع** (‎--gr-ic: 22‎)، فلو كبُر بالحال لَنقض ما
   عُويرَ — وانبساطُ الشريط نفسِه يكفي خبرًا بأنّه فُتح.
   ومبسوطًا يُذهَّب وحسب: كان يلتفت ثُمنَ دورة، وفي قلبه سهمٌ ينزل — والسهمُ المائلُ
   يقول جهةً غير التي يقصد */
.cd-setw.on .cd-dh { color: var(--u-gold); }
.cd-gear { width: var(--gr-w); height: var(--gr-h); }
.cd-gear svg { width: var(--gr-ic); height: var(--gr-ic); display: block; }
.cd-pk { width: var(--pk-w); height: var(--pk-h); }
.cd-pk svg { width: var(--pk-ic); height: var(--pk-ic); display: block; }
/* ===== الانبساطُ والانطواءُ كلاهما منساب =====
   للفتح منحنًى فيه ارتدادةٌ خفيفة (يُكتب في حال ‎.on‎ فيسري عند الذهاب إليها)، وللطيّ
   منحنًى هادئٌ بلا ارتداد (يُكتب في القاعدة فيسري عند الرجوع منها) — فالارتدادُ في
   الانطواء يُقرأ ارتجاجًا لا انسيابًا. وطولُ الشريط ‎100%‎ فيستوي مع المِقبض والمسار */
.cd-setin {
  display: flex; align-items: center; gap: 0; max-width: 0; height: 100%; overflow: hidden;
  transition: max-width .3s cubic-bezier(.4, 0, .2, 1), gap .3s, margin .3s;
}
/* والسقفُ فوق أطول ما يُكتب في اللغتين (العربيّةُ ‎255px‎ مقيسةً، والإنجليزيّةُ أطول):
   ‎max-width‎ سقفٌ لا مقاس، فما زاد منه على المحتوى لا يُرى — لكنّ نقصانَه يقصّ الكلام.
   ===== ورُفع السقفُ المحسوب: الدرجُ ينبسط كاملًا ولو لم يبقَ لجاره مكان =====
   لمّا صار الدرجُ عضوًا في الصفّ حُسب له سقفٌ بما يبقى (‎--set-max‎)، لئلّا يسحق كتلةَ
   الوجهة. وقد رُدّ ذلك بطلب صاحب الموقع: **ما فُتح ليُقرأ يجب أن يُقرأ تامًّا**، وسقفٌ
   يقصّ نصفَ المفتاح يجعل الفتحَ بلا معنًى في النافذة الضيّقة.
   فصار ينبسط بقدر متنه أبدًا، ويدفع ما يساره — والمدفوعُ **يُقصّ عند حافّة النافذة**
   (‎overflow-x: clip‎ أدناه) فلا يطفو خارجها. والسقفُ الثابتُ باقٍ حارسًا فوق أطول
   ما يُكتب في اللغتين */
.cd-setw.on .cd-setin {
  max-width: 320px; gap: var(--set-gap); margin: 0 7px 0 4px;
  transition: max-width .34s cubic-bezier(.34, 1.25, .5, 1), gap .34s, margin .34s;
}
/* والأسطرُ تنزلق من جهة المِقبض وتذوب — لا تومض ظهورًا. وتأخيرُها عند الفتح متدرّجٌ
   فتتبع العينُ مسارَ الانفتاح، وصفرٌ عند الطيّ فتذهب مع صندوقها لا بعده */
.cd-setrow {
  display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--set-fs); color: var(--u-mut);
  opacity: 0; transform: translateX(8px);
  transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.cd-setw.on .cd-setrow {
  opacity: 1; transform: none;
  transition-delay: calc(110ms + var(--i, 0) * 45ms);
}
/* ولا خفوتَ لأحدهما بحال الآخر: صارا مستقلّين، فلا أصلَ فيهما ولا فرع */
/* المفتاح: مسلكٌ غائرٌ وقرصٌ خافت مطفأً — وإلّا قُرئ الوضعان واحدًا (قاعدة ‎card-chain-lab‎) */
.cd-sw {
  position: relative; width: 24px; height: 14px; flex: none; padding: 0; border: 0;
  border-radius: 999px; cursor: pointer; background: rgba(0, 0, 0, .28);
  box-shadow: inset 0 0 0 1px var(--u-line); transition: background .2s, box-shadow .2s;
}
html[data-theme="light"] .cd-sw { background: rgba(44, 94, 101, .16); }
.cd-sw::after {
  content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--u-lab); opacity: .7;
  transition: transform .2s, background .2s, opacity .2s;
}
.cd-sw.on { background: var(--u-gold); box-shadow: none; }
.cd-sw.on::after { opacity: 1; background: #16272b; transform: translateX(-10px); }
html[data-theme="light"] .cd-sw.on::after { background: #fff; }
.cd-sw:disabled { cursor: default; }
/* سلّةُ حذف البطاقة: يسارَ الترس، بحمرة الحذف نفسِها التي في الشجرة وشريط التحرير —
   ومقاسُها مقاسُ الترس، فيقرأهما الصفُّ زوجًا لا شيئين */
#card-modal .cd-foot .cd-del {
  flex: none; width: var(--ctl); height: var(--ctl); padding: 0; border: 0;
  background: none; cursor: pointer; display: grid; place-items: center;
  color: #c0455f;
  /* ملاصقةٌ للمسار من يساره: الفجوةُ على طرفها المواجه له.
     ووُسِّعت من ‎5‎ إلى ‎17‎ يوم نبتت أذنُ الورقة في تلك الحافّة: الأذنُ تبرز نحو السلّة،
     ومجاورةُ الإتلاف خطرٌ مقرَّرٌ في هذا الموقع — خطأُ إصبعٍ واحدةٍ يفصل بين فتحِ ورقةٍ
     وإتلافِ بطاقة. فالفجوةُ ثمنٌ يُدفع من العرض لا من الأمان.
     ثمّ ضاقت إلى ‎9‎ في معايرة اللوح، ثمّ إلى **‎3‎** بطلب صاحب الموقع (٢٠ أغسطس) —
     وهو يعلم ما دُفع من هذه الفجوة: صارت السلّةُ ملاصقةً للأذن تقريبًا.
     ===== والفجوةُ تُقاس **بالحبر لا بالصندوق** =====
     صندوقُ السلّة قدُّه ‎--ctl‎ (‎30‎) وحبرُها ‎--del-ic‎ (‎14‎)، فبينهما **هواءٌ مقدارُه
     نصفُ الفرق** (‎8px‎) من كلّ جهة. فكان المقبضُ يحرّك الصندوقَ والعينُ ترى الحبر:
     مقيسًا عند ‎--del-gap: 3‎ كانت الفجوةُ المرئيّةُ **‎11px‎** (‎3‎ صندوقًا + ‎8‎ هواءً)،
     فيُكتب الرقمُ ولا يُرى أثرُه — وهو عيبٌ في **معنى المقبض** لا في قيمته.
     فيُطرح الهواءُ من الهامش، فيصير ‎--del-gap‎ يقول ما تراه العين بالضبط.
     ولا خطرَ في تراكب الصندوقين حينئذٍ: المتراكبُ **هواءٌ لا حبر** — والأذنُ مطلقةٌ
     ذاتُ طبقةٍ فتغلب في موضع رسمها وحدَه، والسلّةُ تُصاب حيث تُرى.
     ===== والفجوةُ تُقاس **من الأذن** لا من مستطيل المسار =====
     الأذنُ تخرج عن المستطيل بقدر عرضها (‎--ear-w‎ من حافّة الحشو، أي ‎--ear-w − 1‎ من
     حافّة الحدّ)، فهامشٌ يُقاس من المستطيل يبتلعه خروجُها: ‎9‎ من المستطيل تعني **‎−4‎ من
     الأذن** — أي أنّ الأذنَ تركب السلّة. مقيسًا: تداخلُ ‎4px‎ في العروض كلِّها من ‎720‎
     إلى ‎380‎، لا في الضيق وحدَه.
     وذاك ينقض علّةَ الفجوة نفسِها: هي موضوعةٌ ليفصل خطأُ الإصبع بين فتحِ ورقةٍ وإتلافِ
     بطاقة. فصارت تُحسب من حافّة الأذن، ويبقى ‎--del-gap‎ على معايرته يقول ما يعنيه:
     كم بين آخرِ ما يُضغط وأخطرِ ما يُضغط */
  margin-inline-start: calc(var(--ear-w) - 1px + var(--del-gap)
    - (var(--ctl) - var(--del-ic)) / 2);
}
#card-modal .cd-foot .cd-del svg { width: var(--del-ic); height: var(--del-ic); display: block; }
/* ولا هالةَ عند المرور — لا سطحٌ ولا طوق: السلّةُ أيقونةٌ حمراءُ ساكنةٌ تُضغط فتحذف،
   وحمرتُها وحدَها كافيةٌ في التحذير. (وكذلك سلّةُ الخيار في «المتعدّد» — قاعدةٌ واحدة) */

/* ============================================================
   أذنُ الورقة: زرُّ «ورقة الملخّص» على حافّة مستطيل المسار
   ============================================================
   تفتح ورقةَ ملخّصِ **الملفّ الذي تسكنه البطاقة** — والمسارُ إلى جانبها يقول اسمَ ذلك
   الملفّ، فالخبرُ وزرُّه جسمٌ واحد. وهي في الأنواع الأربعة جميعًا: الشريطُ السفليُّ يُبنى
   في ‎cdFootHTML‎ قبل تفرّع الأنواع، فلا شرطَ يُكتب لها ولا تكرار.
   ===== قاعدةُ الأذن =====
   **الملاصقُ مستقيمٌ بلا حدّ، والخارجُ مستديرٌ بحدّ.** وكلُّ انحناءٍ بالخصائص المنطقيّة
   (‎border-start-end-radius‎ وأختِها) لا بالمختصر الفيزيائيّ — وإلّا انقلبت رأسًا على عقب
   في الإنجليزيّة: يُدوَّر الملاصقُ ويُقَصّ الخارج، فتُرى ملصوقةً مقلوبة.
   ===== وأرقامُها معايَرةٌ بيد صاحب الموقع =====
   في ‎Desktop\RE\ear-tab-lab‎ (منصّةُ معايرةٍ بمقابضَ ومولّدِ شِفرة)، لا مقدَّرةً هنا.
   والتداخلُ سالبٌ (‎-0.5px‎ في ‎inset-inline-end: -15.5‎ مع عرضٍ ‎15‎): بينها وبين الصندوق
   فُرجةٌ رفيعةٌ يبقى حدُّه ظاهرًا تحتها — فهي **ملصوقةٌ لا ملتحمة**، وذلك المقصود. */
.cd-where .cd-sum {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ===== وخروجُها **عرضُها** لا رقمًا ثانيًا =====
     كان لها رقمان: عرضٌ (‎15‎) وخروجٌ (‎15.5‎) — وأيُّ افتراقٍ بينهما فجوةٌ بينها وبين
     المسار، فتُقرأ جسمًا ملقًى إلى جنبه لا أذنًا في ورقته. وههنا يُقرأ الرقمُ مرّةً:
     تخرج بقدر عرضها فيلتقي حدُّها بحدّه حتمًا مهما عايرتَ العرض */
  inset-inline-end: calc(var(--ear-w) * -1);
  top: 50%;
  translate: 0 -50%;
  width: var(--ear-w);
  height: var(--ear-h);
  /* والحَشْوُ يزيح الأيقونةَ في الصندوق بنصفه — بكسلٌ في الجهة الخارجة ⇐ نصفٌ إلى الداخل.
     ومنطقيٌّ لا فيزيائيّ، فينقلب مع اللغة وحدَه */
  padding-inline-start: 0;
  padding-inline-end: 1px;
  cursor: pointer;
  background: color-mix(in srgb, var(--u-gold) 15%, var(--cd-surf));
  color: var(--u-gold);
  border: 1.5px solid var(--cd-winline);
  border-inline-start: 0;
  border-start-end-radius: var(--ear-r);
  border-end-end-radius: var(--ear-r);
  transition: background .15s, color .15s, transform .18s;
}
/* و‎flex: none‎ حارسٌ: لولاها لَانكمشت الأيقونةُ حين يضيق صندوقُ المحتوى بالحَشْو،
   فيُقرأ تصغيرًا لا إزاحة */
.cd-where .cd-sum svg { width: var(--ear-ic); height: var(--ear-ic); display: block; flex: none; }
.cd-where .cd-sum:hover { color: var(--u-gold); border-color: var(--u-gold); }

/* ===== مقابضُ التوسيع: ثمانيةُ أطرافٍ على حوافّ المسرح =====
   لا لونَ لها ولا جسم — حدُّ النافذة هو ما تراه، والمقبضُ مساحةُ إمساكٍ حوله.
   ويمتدّ قليلًا إلى خارج الحافّة (‎-5px‎) فتُمسك من قبل أن تصيبها بالضبط، وهو ما يجعل
   التوسيع سهلًا في نافذةٍ حدُّها بكسلٌ واحد. والزوايا فوق الأطراف (‎z‎ أعلى) ولها مؤشّرها
   القُطريّ، فالزاويةُ توسّع في محورين معًا.
   والجهاتُ مرئيّةٌ لا منطقيّة: مؤشّرُ التوسيع نفسُه مرئيّ، فـ«يمين» يمينُ الشاشة أبدًا */
.cd-rz { position: absolute; z-index: 5; }
.cd-rz--t { top: -5px; left: 12px; right: 12px; height: 10px; cursor: ns-resize; }
.cd-rz--b { bottom: -5px; left: 12px; right: 12px; height: 10px; cursor: ns-resize; }
.cd-rz--l { left: -5px; top: 12px; bottom: 12px; width: 10px; cursor: ew-resize; }
.cd-rz--r { right: -5px; top: 12px; bottom: 12px; width: 10px; cursor: ew-resize; }
.cd-rz--tl, .cd-rz--tr, .cd-rz--bl, .cd-rz--br { width: 18px; height: 18px; z-index: 6; }
.cd-rz--tl { top: -5px; left: -5px; cursor: nwse-resize; }
.cd-rz--br { bottom: -5px; right: -5px; cursor: nwse-resize; }
.cd-rz--tr { top: -5px; right: -5px; cursor: nesw-resize; }
.cd-rz--bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
/* والمقابضُ تبقى في الملصقة كذلك: شدُّها يفكّ الإلصاق ويُبقيها على مقاسها (‎app.js‎).
   وكانت تُخفى بحجّة أنّ «حدودَ الملصقة هي الشاشةُ أو نصفُها» — فكانت النافذةُ في نصف
   الشاشة لا تُمدّ البتّة، وذلك خلافُ ما تفعله نوافذُ المكاتب */
/* ===== التوسيعُ يقع في يدك لا بعدها =====
   تُقطع الانتقالاتُ في المسرح وما فيه مدّةَ الشدّ: كلُّ إطارٍ يجب أن يُظهر المقاسَ الذي
   بلغته اليدُ الآن، فلو نُعِّم لَتخلّف الحدُّ عن المؤشّر ولزم إحساسُ المطّاط.
   والمؤشّرُ يُثبَّت على الجسد كلِّه، وإلّا انقلب سهمًا عاديًّا متى فارقت اليدُ المقبضَ الرفيع */
body.cd-sizing, body.cd-sizing * { user-select: none !important; }
body.cd-sizing #card-modal .cd-stage, body.cd-sizing #card-modal .cd-stage * {
  transition: none !important;
}
/* ===== شبحُ الإلصاق: إطارٌ يسبق النافذة إلى موضعها =====
   خلفَها لا فوقها (‎z:1‎ تحت المسرح ‎z:2‎) فتبقى مرئيّةً وأنت تسحبها، ويُقرأ إطارًا ينتظرها.
   ويُنعَّم انتقالُه بين المناطق: عنصرٌ واحدٌ صغير لا تُذكر كلفةُ تحريك حوافّه،
   ومكسبُها أنّه ينزلق بين اليمين واليسار بدل أن يقفز */
.cd-snap {
  z-index: 1; pointer-events: none; border-radius: var(--cd-r);
  background: color-mix(in srgb, var(--u-gold, #c8a44a) 15%, transparent);
  border: 2px solid color-mix(in srgb, var(--u-gold, #c8a44a) 62%, transparent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18) inset;
  /* ===== ينبت من حيث جئتَ لا من وسطٍ لا شأنَ له =====
     كان يظهر بتحجيمٍ ‎.985‎ من مركزه — فرقٌ لا تكاد العينُ تمسكه، فيُقرأ ومضةَ ظهورٍ
     لا نموًّا. وأصلُه (‎transform-origin‎) يكتبه ‎cdShowZone‎ عند الدخول: الحافّةُ التي
     قصدتَها، ورأسُ الشاشة عند نقطة المؤشّر نفسِها — فينبسط الإطارُ من تحت إصبعك.
     والنسبةُ ‎.72‎ تُرى نموًّا، وانحناءُ الخروج يجعله يندفع ثمّ يستقرّ بلا ارتداد */
  opacity: 0; transform: scale(.72);
  transition: opacity .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1),
              left .17s cubic-bezier(.22, 1, .36, 1), right .17s cubic-bezier(.22, 1, .36, 1),
              top .17s cubic-bezier(.22, 1, .36, 1), bottom .17s cubic-bezier(.22, 1, .36, 1);
}
.cd-snap.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cd-snap { transition: opacity .12s ease; } }
/* الفائضُ يُمرَّر إلى الحقلين: الجسمُ يأخذه، ثمّ كلُّ حقلٍ يأخذ نصفَه، ثمّ مربّعُ الكتابة
   يملأ حقلَه. و‎min-height:0‎ في كلّ درجةٍ وإلّا منع المحتوى الانكماشَ فطفح الرصيفُ خارج الشاشة */
/* والحالُ المتحرّكة تُقرن بالمكبَّرة في كلّ درجةٍ منها (‎.is-morph‎): وإلّا استعادت الأولى
   تخطيطَها من محتواها بينما الصندوقُ لا يزال في طريقه، فيقع الجوفُ قبل جدرانه */
#card-modal .is-maxed .cd-body, #card-modal .is-morph .cd-body,
#card-modal .is-sized .cd-body { flex: 1 1 auto; min-height: 0; }
/* ===== المربّعان لا ينزلقان في أنفسهما =====
   كان لكلّ مربّعٍ فيضُه (‎overflow-y:auto‎) وأساسُه صفرٌ (‎flex: 1 1 0‎) — فإذا ضاقت النافذة
   انكمش المربّعان دون محتواهما فظهر في كلٍّ منهما شريطُ انزلاق، وصار على صاحب البطاقة أن
   ينزلق **داخل** الوجه ثمّ **داخل** الظهر ليقرأ ما كتب. وذلك يخالف أنكي: عنده يكبر الحقلُ
   بمحتواه، والانزلاقُ لمنطقة الحقول كلِّها — شريطٌ واحد.
   والفيضُ انتقل إلى الجسم: شريطٌ واحدٌ يقع في يسار منطقة المربّعين (والجهةُ من اتّجاه
   الكتابة، فهو يسارٌ في العربيّة).
   ثمّ ‎flex: 0 0 auto‎ — لا ينكمش ولا **ينمو**: قامةُ المربّع من محتواه وحده، لا من قامة
   النافذة. وهي سُنّةُ أنكي: حقلُه لا يتمطّى بالنافذة، وما بقي تحته فراغٌ بلون الجلد
   يُقرأ هامشًا سفليًّا. وكان عندنا ‎1 0 auto‎ فيتمطّى في الواسعة، ومعه ‎min-height: 26vh‎
   في المكبَّرة — كلاهما يجعل الصندوقَ تابعًا للنافذة، وذاك ما نفاه أنكي فرُفعا */
#card-modal .is-maxed .cd-field, #card-modal .is-morph .cd-field,
#card-modal .is-sized .cd-field {
  flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column;
}
#card-modal .is-maxed .cd-foot, #card-modal .is-morph .cd-foot,
#card-modal .is-sized .cd-foot { flex: 0 0 auto; }
#card-modal .is-maxed .cd-in, #card-modal .is-morph .cd-in,
#card-modal .is-sized .cd-in {
  flex: 1 1 auto; overflow: visible;   /* وأرضيّتُه ‎74px‎ من قاعدته: لا يصير خيطًا في الضيق */
}
/* ===== الشريطُ الواحد: للجسم لا للمربّعات =====
   وجلدُه من الموقع لا من النظام — وهي طريقةُ أنكي نفسِها: يصبغ شريطَه بمتغيّرات جلده
   (‎--scrollbar-bg‎ وأخواتها في ‎editable.css‎). وهنا حبرُ الحدود نفسُه، فيتبع الجلدين.
   والحدُّ الشفّاف مع ‎background-clip‎ يجعل المِقبض أنحفَ من مجراه بلا رسمِ مجرًى ثانٍ */
/* والجسمُ يمتدّ إلى حافّتي النافذة (لا هامشَ له) ليقع الشريطُ في أقصى اليسار، وتُردّ
   فسحةُ المربّعين حشوًا داخله. و‎scrollbar-gutter: stable‎ تحجز مجراه أبدًا، فلا ينزاح
   المربّعان يمنةً حين يظهر: ‎9px‎ حشوًا + ‎11px‎ مجرًى = ‎20px‎ كالجهة المقابلة، ظهر أو لم يظهر.
   والفسحةُ فوق وتحت باقيةٌ — لكنّها **من المنزلق** لا من النافذة: كانت هامشًا ميّتًا مطبوعًا
   في جسم النافذة يبقى شريطًا فارغًا مهما ضاق المكان، فصارت حشوًا يدخل في مسافة الانزلاق —
   يُنزِل مربّعَ الوجه قليلًا ويزيد قامةَ النافذة من أسفلها وهي على طبيعتها، فإذا ضاقت مضى
   مع الكلام وانزلق فلم يبقَ منه شيءٌ يأكل المكان */
/* ===== والطاولةُ تُستثنى منها ورقةُ الملخّص =====
   مسرحُ الورق ‎<div class="cd-body sh-body">‎ — يحمل الصنفين معًا. وقاعدةُ الطاولة بمعرّف
   (‎١ معرّف + صنف‎)، فتغلب ‎.sh-body‎ العارية وتغلب ‎.is-sheet[data-sh=dark] .sh-body‎ كذلك
   (أربعةُ أصنافٍ لا تبلغ معرّفًا) — فتُلبس ورقةُ الملخّص طاولةَ البطاقة.
   والشرطُ يقطع ذلك من أصله: هذه طاولةُ **البطاقة**، وللورقة طاولتُها المكتوبةُ لها */
#card-modal .cd-body:not(.sh-body) { background: var(--cd-desk); }
/* ===== وجوفُ «الإخفاء» وحدَه يُمرَّر أفقيًّا =====
   ‎overflow-x: hidden‎ حارسٌ عامّ: نصٌّ طويلٌ أو جدولٌ لا يُخرج الشريطَ عن جسم النافذة.
   وأمّا صورةُ الإخفاء فيُقصد فيضُها — تُقرَّب لتُقرأ تفصيلاتُها، فيلزم أن يُتنقَّل فيها.
   فيُستثنى جوفُها وحدَه (‎.is-io‎ يضعها ‎ioBody‎)، ويبقى الحارسُ على سائر الأنواع.
   والتنقّلُ بإصبعين يقع من نفسه: مستمعُ العجلة لا يعترض إلّا و‎ctrlKey‎ معه (ذاك للتقريب)،
   فالدحرجةُ الأفقيّةُ تمرّ إلى المتصفّح كما هي */
#card-modal .cd-body.is-io { overflow-x: auto; }
/* ===== وجوفُ «الإخفاء» وحدَه يُمرَّر أفقيًّا =====
   ‎overflow-x: hidden‎ حارسٌ عامّ: نصٌّ طويلٌ أو جدولٌ لا يُخرج الشريطَ عن جسم النافذة.
   وأمّا صورةُ الإخفاء فيُقصد فيضُها — تُقرَّب لتُقرأ تفصيلاتُها، فيلزم أن يُتنقَّل فيها.
   فيُستثنى جوفُها وحدَه (‎.is-io‎ يضعها ‎ioBody‎)، ويبقى الحارسُ على سائر الأنواع.
   والتنقّلُ بإصبعين يقع من نفسه: مستمعُ العجلة لا يعترض إلّا و‎ctrlKey‎ معه (ذاك للتقريب)،
   فالدحرجةُ الأفقيّةُ تمرّ إلى المتصفّح كما هي */
#card-modal .cd-body.is-io { overflow-x: auto; }
#card-modal .cd-body {
  overflow-y: auto; overflow-x: hidden;
  margin: 0; padding: 42px 20px 18px 9px; scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: var(--u-in-line) transparent;
  overscroll-behavior: contain;
}
#card-modal .cd-body::-webkit-scrollbar { width: 11px; height: 11px; }
#card-modal .cd-body::-webkit-scrollbar-track { background: transparent; }
#card-modal .cd-body::-webkit-scrollbar-thumb {
  background: var(--u-in-line); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
#card-modal .cd-body::-webkit-scrollbar-thumb:hover { background: var(--u-gold-dash); background-clip: padding-box; }
/* ===== ظلُّ ما وراء الحافّة =====
   يُعلَّق بالشريطين المُطبقين على الجسم لا بالجسم: ذاك ينزلق فيمضي الظلُّ مع الكلام،
   وهذان ثابتان — فيبقى الظلُّ حيث وقع القطعُ فعلًا.
   والحيلةُ الشائعة (تدرّجاتٌ في خلفيّة المنزلق بـ‎background-attachment: local‎) لا تصلح
   هنا: للمربّعين سطحٌ معتم يعلوها فتختفي تحتهما */
#card-modal .cd-meta { position: relative; }
#card-modal .cd-meta::after, #card-modal .cd-foot::before {
  content: ''; position: absolute; inset-inline: 0; height: 13px; pointer-events: none;
  opacity: 0; transition: opacity .18s ease;
}
#card-modal .cd-meta::after {
  top: 100%; background: linear-gradient(to bottom, var(--cd-shade), transparent);
}
#card-modal .cd-foot::before {
  bottom: 100%; background: linear-gradient(to top, var(--cd-shade), transparent);
}
#card-modal .mmodal__card.has-up .cd-meta::after,
#card-modal .mmodal__card.has-dn .cd-foot::before { opacity: 1; }

/* ===== وضع المساهمة: شارةٌ يمين زرّ الإرسال ونافذةُ سؤالٍ عند النشر ===== */
/* خاويةٌ بعد: لا وضعَ ولا نشر — والإخفاء بالصنف لا بإعادة البناء كي لا ينقطع التركيز */
.pst-badge.is-off, .info-sharebtn.is-off { display: none !important; }
/* أيقونةٌ عارية: اللون وحده يحمل الوضع — لا إطار ولا مربّع حولها */
.pst-badge {
  display: inline-grid; place-items: center; flex: none; padding: 4px 2px;
  background: none; border: 0; cursor: pointer; color: var(--u-mut); transition: color .15s;
}
.pst-badge svg { width: 14px; height: 14px; display: block; }
.pst-badge:hover { color: var(--u-gold); }
/* بين الاسم والتاريخ: خبرٌ يُقرأ لا زرٌّ يُضغط، فلا مؤشّر يد ولا تبدّل بالمرور.
   ومقاسها أصغر قليلًا لتجلس على سطر الهويّة لا فوقه */
/* توسيطها العموديّ مع الاسم والنقطة التي تليه: صفّ الرزم يحاذي بخطّ القاعدة (‎baseline‎)،
   فتجلس الأيقونة على السطر لا في وسطه — ‎align-self‎ يخرجها من ذلك المحاذاة وحدها */
.pst-badge--post { cursor: default; padding: 0 2px; align-self: center; }
.pst-badge--post svg { width: 12px; height: 12px; }
/* المسافة المقصودة بين حبر الأيقونة وأوّل حرفٍ من الاسم = ‎4.5px‎.
   وهي حاصلُ: فجوة الصفّ + حشو الأيقونة (‎2px‎) − ما نسحبه بالهامش السالب.
   وفجوة الصفّين مختلفة (‎7‎ في الرزم و‎8‎ في غيرها)، فالسحب مختلفٌ ليستوي الظاهر */
.post-ytmeta .pst-badge--post { margin-inline-end: -4.5px; }   /* 7 + 2 − 4.5 */
.post-meta .pst-badge--post { margin-inline-end: -5.5px; }     /* 8 + 2 − 4.5 */
.pst-badge--post:hover { color: inherit; }
.pst-badge--post.is-unlist:hover { color: #48a05e; }
.pst-badge--post.is-pub:hover { color: #3f8fb8; }
/* ألوان الأوضاع الثلاثة: أخضرُ لغير المدرجة · أزرقُ من أسرة البترولي للعامّة · رماديٌّ للخاصّة.
   والدرجتان متوسّطتان تُقرآن على الأبيض وعلى الداكن معًا، فلا تحتاجان مقلوبًا لكل جلد.
   وكلُّ حاملي الوضع يشتركون في هذه القاعدة — الشارة في التحرير وأيقونةُ المسار في نافذة
   البطاقة — فتستحيل أن تفترق ألوانُهم لأنّها مكتوبةٌ مرّةً لا مرّتين */
.pst-badge.is-unlist, .cd-pst.is-unlist { color: #48a05e; }
.pst-badge.is-pub, .cd-pst.is-pub { color: #3f8fb8; }
.pst-badge.is-priv, .cd-pst.is-priv { color: var(--u-mut); }
/* الجلد نفسه الذي لنافذة البطاقة: سطحٌ صلب وحدٌّ هادئ — لا التدرّج البترولي للنوافذ الكبيرة */
#pst-modal { background: rgba(8, 20, 24, .58); --pst-win: #16272b; --pst-line: #25403f; --pst-surf: #1d3036; }
html[data-theme="light"] #pst-modal { background: rgba(20, 35, 63, .3); --pst-win: #fff; --pst-line: #dbe6e6; --pst-surf: #f7fafa; }
#pst-modal .pst-card {
  width: min(376px, 92vw); padding: 18px 16px 14px; gap: 0;
  background: var(--pst-win); border: 1px solid var(--pst-line); border-radius: 16px;
  box-shadow: 0 20px 52px -24px rgba(0, 0, 0, .6);
}
.pst-q { margin: 0 0 13px; font-size: 14.5px; font-weight: 700; text-align: center; }
.pst-q--sm { font-size: 12px; font-weight: 600; opacity: .6; margin-bottom: 10px; }
/* ثلاثة أعمدة متساوية: اختيارٌ واحد من ثلاثة في مستوًى واحد، لا قائمةَ سطور */
.pst-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pst-opt {
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  background: var(--pst-surf); border: 1.5px solid var(--pst-line); border-radius: 13px;
  padding: 13px 6px 11px; color: inherit; font: inherit; transition: .15s;
}
.pst-opt b { font-size: 12.5px; font-weight: 700; }
.pst-opt__ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, currentColor 13%, transparent); }
.pst-opt__ic svg { width: 17px; height: 17px; }
/* لكلّ وضعٍ لونه: أخضرُ لغير المدرجة · أزرقُ للعامّة · رماديٌّ للخاصّة */
.pst-opt.is-unlist { color: #48a05e; }
.pst-opt.is-pub { color: #3f8fb8; }
.pst-opt.is-priv { color: var(--u-mut); }
.pst-opt b { color: var(--u-tx); }
.pst-opt:hover { border-color: currentColor; }
.pst-opt.on { border-color: currentColor; background: color-mix(in srgb, currentColor 10%, var(--pst-surf)); }
.pst-hint { margin: 11px 0 0; font-size: 11.5px; text-align: center; opacity: .62; min-height: 16px; }

/* ============================================================
   الشكل السياقيّ: ثلاثة أسطحٍ مستقلّة على مسرحٍ واحد
   منتقي النوع فوق · البطاقة · رصيف الوجهة تحت يصله خيطٌ مرقّط.
   لا شريطَ أدواتٍ ثابت — فقاعةُ التحديد تأتي إلى النصّ عند الحاجة.
   ============================================================ */
/* ===== الحجاب: أيُّ نافذةٍ حيّة =====
   النوافذُ تتراكب، وواحدةٌ منها وحدَها تتلقّى الحرفَ والاختصار — فيجب أن تُعرف بالعين
   قبل اليد. والمختار من ‎card-focus-lab‎ اتّجاهُ «الحجاب»: ستارةٌ من عتمة النافذة نفسِها
   تُسدل على المهجورة فتنزل درجةً إلى الخلف. ومزيّتُه أنّ الفرقَ يقع على النافذة **كلِّها**
   لا في زاويةٍ منها، فيُدرَك من طرف العين، ولا يمسّ الذهبَ فيزاحمَ لغةَ الأفعال.
   ويُرسم الحجابُ أبدًا وتتبدّل شفافيّتُه — لا يُخلق ويُهدم — وإلّا وقع الانتقالُ في
   عنصرٍ لا حالَ له سابقة، فظهر ظهورًا لا انسيابًا (وهو درسُ شريط الترس).
   و‎pointer-events:none‎ لازمة: الحجابُ فوق المحتوى، ولو التقط المؤشّرَ لَما وصلت إليه
   ضغطةُ التركيز التي تحته أصلًا */
/* ===== ورُدَّت الستارةُ إلى قدرها الأوّل (٢١ أغسطس) =====
   كانت ‎.55‎ و‎.5‎، ثمّ عُمّقتا إلى ‎.74‎ و‎.68‎ في «الإطفاء» (‎strip-focus-lab#b‎).
   وقد ردَّهما صاحبُ الموقع: **المهجورةُ لم تكن تُظلم بهذا القدر** — الحجابُ يقول
   «هذه ليست في يدك» ولا يُراد به أن يُغيّبها، والنوافذُ تُقرأ متجاورةً في السياق الواحد */
#card-modal { --cd-veil: rgba(8, 20, 24, .55); }
html[data-theme="light"] #card-modal { --cd-veil: rgba(190, 204, 206, .5); }
/* ===== وسطحُ اللسان الخافت له معتِمُه هو (‎--cd-dimmer‎) =====
   لا يُشتقّ من الحجاب: ذاك رُدَّ إلى قدره الأوّل، والألسنةُ عُويرَت على قدرٍ آخرَ
   ورُضي عنها — فلو تبعت الحجابَ لَخفّ إظلامُها بردّه. فلكلٍّ معتِمُه.
   والناتجُ **يبقى شفّافًا بقدره** فيبقى الضبابُ خلفه حيًّا (خلافَ ‎opacity‎ التي تُفقده
   الضبابَ والسطحَ معًا — انظر ‎.cd-mtab‎ أدناه) */
#card-modal { --cd-dimmer: rgba(8, 20, 24, .74); }
html[data-theme="light"] #card-modal { --cd-dimmer: rgba(190, 204, 206, .68); }
#card-modal { --cd-pan-dim: color-mix(in srgb, var(--cd-dimmer) 78%, var(--cd-pan-a)); }
/* وخفوتُ متن اللسان: مقبضٌ واحدٌ يقرؤه الرمزُ والرقمُ والاسمُ والخيط */
#card-modal { --tab-dim: .42; }
#card-modal .cd-stage > .mmodal__card::after {
  content: ''; position: absolute; inset: 0; z-index: 9;
  border-radius: inherit; background: var(--cd-veil);
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
#card-modal .cd-stage:not(.is-focus) > .mmodal__card::after { opacity: 1; }
/* ===== ورُفع نزعُ اللون — «الإطفاء» (٢١ أغسطس) =====
   كان هنا ‎#card-modal .cd-stage:not(.is-focus) { filter: saturate(.55) }‎، جاء من
   ‎strip-focus-lab#b‎ ليقول «هذه ليست في يدك» بلغةٍ ثانيةٍ بعد الحجاب.
   ورُفع بطلب صاحب الموقع: **قناتان تُعمّان النافذةَ كلَّها زيادةٌ في الإبعاد** — الحجابُ
   يكفي، والنوافذُ في هذا الموقع تُقرأ متجاورةً (أمٌّ ووجوهُها) فلا يُراد بها أن تُغيَّب
   ولا أن تُنزع ألوانُها.
   وإن عاد يومًا فالمكتوبُ في حجّته أنّه كان آمنًا وقد قِيس: لا ‎backdrop-filter‎ في
   المسرح ولا تحته (الضبابُ كلُّه في الدُّرج وألسنته، وهي إخوةٌ للمسرح لا أبناؤه) */
/* والأساسُ تحته: حبرُ أزرار النافذة يسطع في الحيّة — وهي وحدها التي تُغلق وتُكبَّر.
   ودرجا الركن منها: نزل الترسُ إلى التذييل ونزل معه الجيب، وكلاهما يُضغط في الحيّة
   وحدَها — فيسطعان ويخفتان معها (والوسمُ ‎cd-dh‎ يجمعهما فلا يُذكر كلٌّ باسمه) */
#card-modal .cd-stage.is-focus .cd-wb,
#card-modal .cd-stage.is-focus .cd-dh { color: var(--u-tx-strong); }
/* ===== والمبسوطُ يُذهَّب ولو كانت نافذتُه هي الحيّة =====
   قاعدةُ الحيّة أعلى نوعيّةً من قاعدة الحال (معرّفٌ وصنفان)، فكانت تغلب ذهبَ الانفتاح
   فلا يُرى المِقبضُ مذهَّبًا في النافذة التي بين يديك — وهي وحدَها التي يُفتح فيها درج.
   وحالُ الدرج **أخصُّ** من حال النافذة: تلك تقول «هذه الحيّة»، وهذه تقول «وهذا مفتوح» */
#card-modal .cd-stage.is-focus .cd-setw.on .cd-dh { color: var(--u-gold); }

/* ===== طبقةُ النافذة: صفيحةٌ تملأ الشاشة وتتوسّط ما فيها =====
   النوافذُ تتراكب في الموضع نفسِه، ولا سبيل إلى ذلك في صفٍّ مرنٍ واحد: يقسم الصفُّ
   عرضَه عليها فتصطفّ جنبًا إلى جنب. فلكلٍّ صفيحتُها المطلقة تتوسّطها وحدها.
   وحَشْوُها العلويّ ‎--cd-top‎: كان على النافذة الأمّ يدفع المسرحَ تحت الدُّرج، والصفيحةُ
   مطلقةٌ لا يبلغها حَشْوُ الأمّ، فانتقل إليها بمنحناه وزمنه ليبقى الانزياحُ منسابًا.
   ولا تلتقط المؤشّر: هي تغطّي العتمةَ كلَّها، ولو التقطته لَما أُغلقت النافذة بضغطةٍ خارجها */
.cd-layer {
  position: absolute; inset: 0; padding-top: var(--cd-top);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transition: padding-top .42s cubic-bezier(.3, 1, .4, 1);
}
.cd-layer > .cd-stage { pointer-events: auto; }
/* ============================================================
   الانصرافُ الأخير: تتصاغر وتتلاشى — والتلاشي أسرع
   ============================================================
   آخرُ نافذةٍ تُغلق تنصرف معها الصدَفةُ كلُّها، فالانصرافُ **مشهدٌ يُرى** لا نزعٌ صامت.
   ===== والشوطان لا يستويان (بحكم صاحب الموقع) =====
   «تتصغر وتتلاشى — بس تتلاشى بسرعة، يعني قبل ما تصغرها يروح لمدى بعيد».
   فالتصاغرُ يمشي ‎260‎ والتلاشي ينتهي في ‎130‎ — فتذهب من العين وهي بعدُ قريبةٌ من قدّها،
   ولا تُرى نقطةً صغيرةً في وسط الشاشة.
   والقدرُ ‎.94‎ لا ‎.7‎: انكماشٌ يُحَسّ ولا يُقرأ سفرًا — السفرُ للطيّ إلى اللسان،
   وهذا انصرافٌ في مكانه.
   ===== والمنشأُ المركز =====
   ‏‎transform-origin‎ الأصلُ وسطُ العنصر، وهو المطلوب: النافذةُ متوسّطةٌ في طبقتها،
   فتنكمش إلى مركزها لا إلى ركنها.
   ===== والتحويلُ لا يُكتب ههنا =====
   موضعُ النافذة سطريٌّ (‎cdPutPos‎ تكتب ‎style.transform‎ لتُنقل بترويستها)، والسطريُّ
   يغلب الجلدَ — فلو كُتب ‎scale‎ في القاعدة لَما بلغ النافذةَ أبدًا، ولَظهر التلاشي وحدَه.
   فيُكتب سطريًّا في ‎cdOutFly‎ **مضافًا** إلى ما هو قائم، فلا يُمحى موضعُها وهي تنصرف.
   ويُكتب في الإطار التالي: الصنفُ يُنشئ الانتقالَ والتلاشيَ في هذا الإطار، والتحويلُ
   يحتاج إطارًا يبدأ منه — والتلاشي أسرعُ فلا يُحَسّ تأخّرُ إطارٍ واحدٍ في التصاغر.
   ===== ولا تُلتقط في أثناء ذهابها =====
   ‏‎pointer-events: none‎ — نقرةٌ على شبحٍ منصرفٍ تفتح ما لا يُرى */
.cd-layer.is-out > .cd-stage {
  opacity: 0;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.4, 0, .6, 1), opacity .11s ease-out;
}
/* الطبقةُ الموقوفة: ‎hidden‎ وحدها لا تكفيها — قاعدةُ ‎display:flex‎ تغلبها فتبقى مرئيّة */
#card-modal .cd-layer[hidden], #card-modal .cd-stage[hidden] { display: none; }
/* ‎relative‎ لأجل المقابض: هي أبناءٌ مطلقون على حوافّه — والملءُ والحركةُ يكتبان ‎absolute‎ فوقه */
#card-modal .cd-stage { position: relative;
  display: flex; flex-direction: column; align-items: center; width: min(720px, 100%); }
#card-modal .cd-stage > .mmodal__card { width: 100%; }
/* ============================================================
   دُرج البطائق: طبقةٌ علويّة فوق الشاشة المعتمة
   ‎#card-modal‎ ثابتٌ ملءَ الشاشة بـ‎z:85‎ — أي فوق الشريط الجانبيّ (‎z:40‎) أصلًا،
   فالدُّرج ابنٌ له يمتدّ على العرض كلّه، ولا يتقيّد بعرض المسرح (‎720px‎)
   ============================================================ */
/* وطبقتُه فوق كلّ مسرح: المسارحُ تأخذ ‎z‎ متصاعدًا بعددها (‎2 + i‎ في ‎cdFocusWin‎)، فمع
   خمس نوافذَ يبلغ السادسةَ فيساوي الدُّرجَ ويسبقه في ترتيب الصفحة — فيغطّي حافّتَه
   وما عليها من ألسنة. والرقمُ الكبيرُ يقطع ذلك مهما تكاثرت النوافذ */
.cd-dw {
  position: absolute; top: 0; inset-inline: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;   /* الفراغ حول الدُّرج يبقى للنافذة: الضغط فيه يغلقها */
  /* الانتقالُ على القاعدة لا في مقام الملء: الخروجُ من الملء يحذف صنفَه فيحذف معه
     ما كُتب تحته، فتعود قفزةً لا انسيابًا */
  transition: transform .34s cubic-bezier(.3, 1, .4, 1);
}
/* الدُّرج والترويسة جسمٌ واحد: السطح نفسه شفّافًا، ولا حدَّ بينهما ولا خطّ —
   فتُقرأ الترويسة امتدادًا للدُّرج لا لسانًا مركّبًا عليه.
   والضباب خلف الشفافيّة يُبقي البطائق مقروءةً مهما ازدحمت الصفحة تحتها */
.cd-dw__tray {
  width: 100%; overflow: hidden; max-height: 0;
  background: var(--cd-pan-a); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  transition: max-height .42s cubic-bezier(.3, 1, .4, 1);
  pointer-events: auto;
}
/* ارتفاع الدُّرج قيمةٌ واحدة يقرؤها الجميع (السطح · البساط · حَشْو المسرح)، فلا تتفرّق ثلاثةً.
   وله مقامان: مقامُ البوّابة يبلغ منتصف الشاشة، ومقامُ العمل بعد اختيار النوع */
#card-modal { --tray-h: 130px; }
/* ===== قدُّ المِقبض: عرضًا ورمزًا — يقرؤه هو واللسانُ معًا =====
   اللسانُ ساكنًا مربّعٌ بقدّ المِقبض سواءً بسواء، فيُقرأ الصفُّ حبّاتٍ من أسرةٍ واحدة
   لا مِقبضًا وأشياءَ أصغرَ منه بجنبه. وكان عرضُ المِقبض ‎58‎ حاصلَ حَشْوه وأعرضِ ما فيه
   (‎18 + 22 + 18‎)، وعرضُ اللسان ‎38‎ حاصلَ حَشْوه وأيقونتِه — رقمان لا يعرف أحدُهما الآخر.
   فصارا هنا رقمًا واحدًا يقرؤه الاثنان: من بدّله بدّلهما معًا.
   والقيمةُ على المِقبض ‎width‎ لا حَشْوٌ يُعاد حسابُه (‎border-box‎ في الملفّ كلِّه)،
   فما تحته من حَشْوٍ باقٍ كما كان ولا يتزحزح شيءٌ في هيئته */
/* ===== والقامةُ رقمٌ كذلك، لا قامةُ أخٍ تُستعار =====
   كان الصفُّ ‎stretch‎ بلا قامةٍ له، فيأخذ قامةَ أطولِ أبنائه — وهو المِقبض (‎7+19+3+2+6‎).
   والمِقبضُ **يُخفى** في نافذة الوجه الفرعيّ وفي الورقة (‎display:none‎)، فيبقى الصفُّ بلا
   من يقيمه فتنكمش الألسنةُ إلى قامة أيقونتها وحدها: ترويساتٌ قصيرةٌ في حالٍ وطويلةٌ في حال.
   فصارت القامةُ على الصفّ نفسِه: يقوم بها ولو خلا من كلّ ابن، وينزل إليها المِقبضُ
   واللسانُ سواءً — فلا يُقاس أحدُهما بالآخر ولا يغيب أحدُهما فيسقط الآخر */
#card-modal { --dw-w: 58px; --dw-h: 37px; --dw-ic: 19px; }
/* ===== وقدُّ «+» مستقلٌّ عن قدّ اللسان — معايَرٌ في ‎strip-center-lab‎ =====
   كان يقرأ ‎--dw-w‎ نفسَه فيتبع اللسانَ، وقد افترقا: ضاق محتواه فصار «+» وحدَه.
   والفُرجةُ ‎22‎ منها ‎7‎ هامشُ اللسان نفسِه، فالمكتوبُ على «+» ‎15‎ */
#card-modal { --pl-w: 53px; --pl-gap: 22px; }
#card-modal.is-gate { --tray-h: min(48vh, 440px); }
.cd-dw.is-open .cd-dw__tray { max-height: var(--tray-h); }
/* زرُّ السحب: «+» وحدَه بلا لفظٍ ولا خطٍّ تحته.
   بلا حدٍّ البتّة: انحناءُ قاعه وحده يرسمه، وسطحُه سطحُ الدُّرج نفسه — فلا يفرّقه عن
   الألسنة لونٌ ولا مادّة، وإنّما **الرمزُ والقدُّ والفُرجة** */
.cd-dw__handle {
  pointer-events: auto; cursor: pointer; font: inherit;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0;
  background: var(--cd-pan-a); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  border-radius: 0 0 13px 13px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45);
  transition: color .2s, margin-inline-end .38s cubic-bezier(.34, 1.56, .64, 1);
  /* مطويًّا: ذهبيٌّ يدعوك — هو وحده ما يقول «من هنا تُضاف بطاقة» في شاشةٍ معتمة */
  color: var(--u-gold);
}
/* مبسوطًا: الدعوةُ قد أُجيبت، فيخفت الحبر ويترك الانتباه للبطائق المعروضة تحته */
.cd-dw.is-open .cd-dw__handle { color: var(--cd-mut); }
/* المرور يغيّر الحبر وحده — السطح يبقى سطحَ الدُّرج، وإلّا انفصلت الترويسة عنه لونًا */
.cd-dw.is-open .cd-dw__handle:hover { color: var(--u-gold); }
.cd-dw__handle svg { width: var(--dw-ic); height: var(--dw-ic); display: block; }

/* ============================================================
   ألسنةُ المطويّات: النافذةُ المُغلقةُ مؤقّتًا تسكن حافّةَ الشاشة
   ============================================================
   صفٌّ واحدٌ يجمع مِقبضَ الدُّرج وما طُوي من نوافذ، والصفُّ متوسّطٌ لا مُثبَّتٌ في الوسط:
   فكلّما نزل لسانٌ يسارَ المِقبض اقتسم معه الوسطَ فانزاح المِقبضُ يمينًا — يبقى في الوسط
   ولا يقف في نقطته. وهذا هو الفرقُ بين شريطٍ يُبنى وشريطٍ يُدفع.
   ولا يلتقط الصفُّ المؤشّرَ إلّا في ألسنته: الفراغُ حوله يبقى للعتمة، وضغطتُه تُنهي الجلسة */
/* ===== وقامةُ اللسان قامةُ المِقبض — بالبناء لا برقمٍ يُعاير =====
   كُتب أوّلَ الأمر ‎flex-start‎ فتدلّى كلٌّ بقامة حَشْوه: المِقبضُ ‎37‎ (أيقونةٌ وخيطٌ تحتها)
   واللسانُ ‎33‎، ففرقٌ يُحسّ ولا يُعلَّل — صفٌّ معلّقٌ من حافّةٍ واحدةٍ وقيعانُه مختلفة.
   والعلاجُ ‎stretch‎ لا رقمٌ يُكتب: الصفُّ يأخذ قامةَ أطولِهما وينزل الآخرُ إليها، فلو
   تبدّل حَشْوُ المِقبض يومًا تبعه اللسانُ بلا سطرٍ يُصحَّح. ولذلك رُفع الحَشْوُ الرأسيُّ
   من جوف اللسان وتوسّط ما فيه: القامةُ من فوق لا من داخل */
.cd-dwrow { display: flex; align-items: stretch; height: var(--dw-h); pointer-events: none; }
.cd-mins { display: flex; align-items: stretch; pointer-events: none; }
/* والمِقبضُ يتوسّط ما فيه إن طاله المدّ: قد يطول اللسانُ يومًا بلغةٍ أو بحَشْوٍ، فلا يبقى
   حبرُ المِقبض معلّقًا في رأسه وتحته فراغ */
.cd-dw__handle { justify-content: center; width: var(--pl-w); }
/* الفُرجةُ بينه وبين أوّل لسان: ‎7‎ هامشُ اللسان و‎15‎ هامشُه هو */
.cd-dw__handle { margin-inline-end: calc(var(--pl-gap) - 7px); }
/* ولا فُرجةَ يوم لا ألسنةَ: الهامشُ خبرٌ عن جارٍ، فإذا غاب الجارُ سقط الخبر —
   ولولا هذا لَوقع «+» عن مركز الشاشة بنصف فُرجةٍ وهو وحدَه في الحافّة */
/* ===== ===== متى يعود «+» إلى الوسط؟ ===== =====
   الشرطُ كان ‎:has(.cd-mtab)‎ مطلقًا — أي **وجودُ لسانٍ في الشجرة**. وذاك يكذب في حالين:
     · **المنصرف**: اللسانُ الذي أُغلقت نافذتُه يبقى في الشجرة يطوي عرضَه ‎380ms‎ ثمّ
       يُنزع. فيبقى الشرطُ صادقًا طوالَ الانطواء، فلا يبدأ «+» رجوعَه إلّا بعد أن يتمّ —
       ثمّ يقفز دفعةً واحدة. وهو الذي يُحسّ بطئًا وثِقلًا: انتظارٌ ثمّ وثبة.
     · **المخفيّ**: ألسنةُ الموادّ الأخرى تبقى في الشجرة مخفيّةً (‎hidden‎)، فيُحسب لها
       حسابٌ ولا تُرى — فيقف «+» عن الوسط بلا لسانٍ ظاهرٍ إلى جنبه.
   فصار الشرطُ **اللسانَ الحيَّ المرئيّ** وحدَه. فإذا انصرف آخرُهم بدأ الرجوعُ في اللحظة
   التي يبدأ فيها انطواؤه — حركةٌ واحدةٌ متّصلةٌ لا انتظارٌ ثمّ قفزة.
   ومقدارُ الحركة مقدارُ انطواء اللسان نفسِه (‎.38s‎ وانبعاثتُه)، فيمشيان معًا */
.cd-dwrow:not(:has(.cd-mtab:not([data-going]):not([hidden]))) .cd-dw__handle {
  margin-inline-end: 0;
}

/* ===== توسيطُ الكتلة: «الألسنةُ وحدَها» (‎strip-center-lab‎) =====
   الصفُّ يتوسّط كتلةً (‎[+][فُرجة][ألسنة]‎)، فمركزُ الألسنة يقع عن مركز الشاشة بمقدار
   ‎(عرض «+» + الفُرجة) / 2‎ — وترقص الألسنةُ كلّما فُتحت نافذةٌ أو طُويت.
   فيُوضع في ذيل الصفّ **موازنٌ خاوٍ** عرضُه ‎(عرض «+» + الفُرجة)‎: يقتسم الصفُّ وسطَه معه
   فينزاح، ويستقرّ مركزُ **الألسنة** على مركز الشاشة، ويقف «+» على طرفها.
   ===== والوسيلةُ فراغٌ لا ‎transform‎ =====
   المتحوَّلُ يصير **جذرَ خلفيّة**، فيموت ‎backdrop-filter‎ في أبنائه — وهو جلدُ الألسنة
   و«+» نفسُه. وهي علّةُ ‎will-change‎ المسجّلةُ أسفلَ هذا الملفّ بعينها.
   فالموازنُ يزيح **بالتخطيط**: لا جذرَ خلفيّةٍ يُصنع، ولا اتّجاهَ ينقلب، ولا مقدارَ يُقاس */
.cd-dwrow > .cd-bal { flex: none; width: 0; pointer-events: none;
  transition: width .38s cubic-bezier(.34, 1.56, .64, 1); }
.cd-dwrow:has(.cd-mtab:not([data-going]):not([hidden])) > .cd-bal {
  width: calc(var(--pl-w) + var(--pl-gap));
}
/* واللسانُ من جلد المِقبض نفسِه: السطحُ والضبابُ والانحناءُ والظلّ — فيُقرأ الصفُّ
   أسرةً واحدةً معلّقةً من الحافّة، لا مِقبضًا وأشياءَ غريبةً بجنبه */
.cd-mtab {
  pointer-events: auto; cursor: pointer; font: inherit; flex: none;
  margin-inline-start: 7px; border: 0; padding: 0;
  overflow: hidden; white-space: nowrap;
  /* ===== ولا بدّ من ‎relative‎ ليسكن الخيطُ في لسانه =====
     كان الخيطُ ‎absolute‎ واللسانُ بلا موضع، فيطلب أقربَ مَن له موضع: في العُصبة ‎.cd-grp‎
     فيمتدّ تحت العُصبة كلِّها، وفي المفرد ‎.cd-dw‎ (وهو مطلقٌ ملءَ العرض) فيمتدّ خيطًا
     ذهبيًّا من حافّة الشاشة إلى حافّتها. ولا يقصّه ‎overflow:hidden‎ في اللسان: المقصوصُ
     ما كان اللسانُ حاضنَه، لا ما جاوزه إلى جدٍّ أعلى.
     فبهذا السطر يصير الخيطُ خيطَ لسانٍ بعينه، ويقصّه حاضنُه */
  position: relative;
  background: var(--cd-pan-a); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  border-radius: 0 0 13px 13px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45);
  color: var(--cd-mut);
  /* ===== «التوأمة» — اتّجاه ي في ‎min-tab-lab‎ =====
     الحركةُ في النافذة والحياةُ في اللسان: النافذةُ تنكمش في ‎260ms‎ بخروجٍ حادّ، واللسانُ
     ينفتح في ‎380ms‎ بمنحنًى **متجاوز** (‎1.56‎ فوق الواحد) — يزيد على قدّه قليلًا ثمّ يستقرّ.
     فلا يلتقيان في اللحظة نفسِها عمدًا: النافذةُ تسبق فتصفو الشاشةُ، ثمّ يتمّ اللسانُ
     استقرارَه — وذلك ما يجعل الطيَّ يُقرأ خفيفًا وله ذيلٌ حيٌّ لا ثقيل */
  transition: width .38s cubic-bezier(.34, 1.56, .64, 1),
              margin-inline-start .38s cubic-bezier(.34, 1.56, .64, 1),
              background .2s, color .2s;
}
/* ===== وثلاثةُ أحوالٍ للسان =====
   الشريطُ قائمةُ النوافذ كلِّها، فيجب أن يُقرأ منه حالُ كلٍّ بلا ضغطة:
   · **مطويّة** — الأصلُ: حبرٌ خافت.
   · **قائمةٌ** — حبرٌ تامّ: هي على الشاشة الآن، فلسانُها أنبرُ من لسان الغائبة.
   · **مركَّزة** — ذهبٌ وخيطٌ ذهبيٌّ في قاعها: الذهبُ في هذه النافذة لغةُ «ههنا يقع حرفُك»،
     وهو المعنى نفسُه الذي يلبسه الحقلُ الحيُّ والمِقبضُ المطويّ.
   والخيطُ في القاع لا في الرأس: اللسانُ متدلٍّ من الحافّة، وقاعُه طرفُه الحرّ الذي يُرى */
/* ============================================================
   العُصبة: أمٌّ وأوجهُها في صدَفةٍ واحدة — «اللحمة» من ‎mom-mark-lab‎
   ============================================================
   بطاقةُ «الفراغ» و«الإخفاء» أصلٌ تتفرّع عنه أوجهٌ، ولكلّ وجهٍ نافذتُه ولسانُه. فلو
   وقفت ألسنتُهم في الصفّ متفرّقةً كسائر الألسنة لَضاع النسبُ ولم يُعرف أنّ هذه من تلك.
   فيُلَمّون في **صدَفةٍ واحدةٍ ملتحمة**: لا فُرجةَ بينهم، ويشقّهم خيطٌ رفيعٌ يُبقي حدَّ
   كلٍّ مقروءًا، والاستدارةُ للطرفين الخارجيّين وحدهما — فتُقرأ العُصبةُ جسمًا واحدًا مشقوقًا.
   والاستدارةُ على الطرفين أنفسِهما لا على الحاضن (فلا ‎overflow:hidden‎): الطيُّ يُنقص
   عرضَ اللسان إلى الصفر، ولو قُصَّ بالحاضن لَقُصَّ معه ظلُّ الحركة.
   ولا يُلَمّون إلّا اثنين فصاعدًا — والواحدُ لا عُصبةَ له، فيبقى لسانًا كسائر إخوته */
.cd-grp {
  display: flex; align-items: stretch; position: relative; margin-inline-start: 7px;
  border-radius: 0 0 13px 13px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45);
}
.cd-grp .cd-mtab { margin-inline-start: 0; border-radius: 0; box-shadow: none; }
.cd-grp .cd-mtab + .cd-mtab { border-inline-start: 1px solid var(--cd-winline); }
.cd-grp .cd-mtab:first-child { border-end-start-radius: 13px; }
.cd-grp .cd-mtab:last-child { border-end-end-radius: 13px; }
/* وعُصبةُ مادّةٍ غائبةٍ تُحجب بأسرها: لو حُجبت ألسنتُها وحدَها لَبقيت صدَفةٌ خاويةٌ لها
   ظلٌّ وهامشٌ معلّقةً في الحافّة تقول شيئًا وليس فيها شيء */
.cd-grp:not(:has(.cd-mtab:not([hidden]))) { display: none; }

/* ===== وَسْمُ الأمّ: «الحاجز» وحدَه — من ‎mom-mark-lab‎ =====
   فقارٌ ذهبيٌّ بسُمك ‎2‎ يفصلها عن أوّل أوجهها، وما بين الأوجه خيطٌ رفيعٌ كما هو.
   يقول **الرتبةَ**: «هذه ثمّ هؤلاء».
   ومكسبُه أنّه لا يزيد شيئًا: الحدُّ بين المتلاصقَين قائمٌ في اللحمة أصلًا، فما تبدّل
   إلّا سُمكُه ولونُه — لا عنصرَ يُولد ولا رمزَ يكبر ولا سطحَ يُصبغ.
   (وجُرّب معه «القُرص» — رمزُها على قرصٍ مطوَّق — فرُفع: خبران في موضعٍ واحدٍ أحدُهما
    يكفي، والقرصُ يُثقل الرمزَ ويُشبه أطواقَ الحال في النافذة. والحاجزُ كافٍ.
    وقبلهما جُرّب «السطح» فرُدّ: الصِّبغةُ على مساحةٍ كاملةٍ تُقرأ حالًا لا نسبًا،
    ولغةُ الحال في هذه النافذة محجوزةٌ للمركَّزة.)
   ولا يمسّ سطحَ اللسان: الصدَفةُ تبقى بجلدٍ واحدٍ من أوّلها إلى آخرها */
/* ===== وحاجزُ الأمّ ليس ذهبيًّا (٢١ أغسطس) =====
   كان ‎--u-gold‎، ورُدَّ بطلب صاحب الموقع — وهو الصوابُ في لغة الموقع قبل الذوق:
   **الذهبُ ههنا لغةُ «ههنا يقع حرفُك»** (اللسانُ المركَّز · الحقلُ الحيّ · المِقبضُ
   المفتوح)، وهذا الخطُّ يقول **رتبةً** لا موضعَ يد: «هذه ثمّ هؤلاء». فصرفُ الذهب فيه
   يُنفق لغةَ الفعل على خبرٍ ساكن، ويزاحم الخيطَ الذهبيَّ في قاع اللسان المركَّز —
   ذهبان في عُصبةٍ واحدةٍ يقولان معنيين.
   فصار من **لغة الخطوط نفسِها**: ‎--u-in-line‎ هو الخطُّ الأمتنُ في هذا الموقع (وأخوه
   ‎--cd-winline‎ يفصل الأوجهَ بعضَها عن بعض). فالحاجزُ والخيطُ من جنسٍ واحدٍ يفترقان
   بالسُّمك والمتانة لا باللون — وهو ما أراده الوَسْمُ أصلًا: «لا يزيد شيئًا، وإنّما
   يتبدّل سُمكُ الحدّ ولونُه».
   ===== ومن عائلة **النافذة** (‎--cd-*‎) لا عائلة الموقع (‎--u-*‎) =====
   جُرّب ‎--u-in-line‎ أوّلًا فأخفق في الجلد الفاتح: توكناتُ ‎--u-*‎ الداكنةُ مكتوبةٌ على
   ‎#card-modal‎، وقلبُها الفاتحُ مكتوبٌ على ‎#card-modal .mmodal__card‎ وحدَها — **والدُّرجُ
   وألسنتُه إخوةٌ للبطاقة لا أبناؤها**، فلا يبلغهم القلب: يبقون على قيم الداكن أبدًا.
   مقيسًا: الحاجزُ خرج ‎rgba(255,255,255,.22)‎ في الجلدين معًا — أبيضُ على أبيض.
   وعائلةُ ‎--cd-*‎ تنقلب على ‎#card-modal‎ نفسِه فتبلغ الدُّرج (وبها يعمل ‎--cd-winline‎
   في خيط الإخوة أصلًا). فالحاجزُ يُمزج من حبر النافذة المهموس وخيطِها: أمتنُ من الخيط
   وأخفتُ من الحبر — رماديٌّ مزرقٌّ في الداكن، رماديٌّ بترليٌّ في الفاتح */
.cd-grp .cd-mtab.is-mom + .cd-mtab {
  border-inline-start: 2px solid color-mix(in srgb, var(--cd-mut) 45%, var(--cd-winline));
}

/* ===== قناتان لا واحدة (‎strip-focus-lab#b-c‎) =====
   **الخيطُ** يقول «نافذتُها على الشاشة»، و**الضوءُ** يقول «وفيها يقع حرفُك».
   وكانتا قناةً واحدةً (ذهبٌ وخيطٌ للمركَّزة معًا) فلم تسعا ثلاثَ حالات — بل كانت
   ‎is-open‎ **لا أثرَ لها في العين البتّة**: حبرُها لا يبلغ شيئًا مرئيًّا، إذ الرمزُ
   ذهبيٌّ أبدًا (‎.cd-mtab__ic‎) والاسمُ معدومٌ ساكنًا (‎max-width: 0‎). فكانت «مطويّة»
   و«قائمة» سواءً في العين تمامًا */

/* ---------- الضوء: «الإطفاء» — ما ليس بمركَّزٍ يخفت ---------- */
/* ===== والإخفاتُ **بلونٍ أغمق** لا بشفافيّةٍ تُنقَص =====
   كان ‎opacity: .4‎، وهو يُفقد اللسانَ شيئين معًا:
     · **ضبابَه**: عنصرٌ شفافيّتُه دون الواحد يصير **جذرَ خلفيّة**، فلا يرى
       ‎backdrop-filter‎ ما تحته — فذهب الزجاجُ المصنفَر عن كلّ لسانٍ غير مركَّز ولم يبقَ
       إلّا في واحد. (وهي علّةُ ‎will-change: opacity‎ نفسُها التي رُفعت من الدُّرج أمس:
       **ما يُرفع أو يُشفّ لا يَرى ما تحته**.)
     · **وسطحَه**: الشفافيّةُ تُشِفّ ما وراءه فيُرى من خلاله — والمرادُ أن **يُظلم** لا أن يشفّ.
   فصار الإخفاتُ في اللون: سطحُه يُمزج بستارة الحجاب (‎--cd-veil‎) فيغمق ويبقى شفّافًا
   بقدره، فيبقى ضبابُه. والحبرُ يخفت بأحواله الثلاثة كما هو مكتوبٌ أعلاه، لا بشفافيّةٍ
   تعمّ اللسانَ كلَّه */
.cd-mtab:not(.is-focus) { background: var(--cd-pan-dim); }
/* ===== والمتنُ يخفت بشفافيّته هو =====
   نقلُ الإخفات من اللسان إلى سطحه أنقذ الضبابَ، لكنّه ترك **ما في اللسان** بكامل قوّته:
   رمزُه ذهبيٌّ أبدًا، ورقمُ الوجه في البطائق الفرعيّة، والخيطُ في قاعه — فلم يبقَ بين
   المركَّز وغيره فرقٌ يُقرأ.
   فتُردّ الشفافيّةُ إلى **الأبناء**: هم بلا ضبابٍ فلا يُفقدهم شيئًا، واللسانُ نفسُه
   يبقى بشفافيّةٍ تامّةٍ فيبقى زجاجُه.
   ومقبضٌ واحدٌ (‎--tab-dim‎) يجمعهم فلا يفترق خفوتُ الرمز عن خفوت الرقم عن خفوت الخيط */
.cd-mtab:not(.is-focus) .cd-mtab__in { opacity: var(--tab-dim); transition: opacity .2s; }
/* وبالمرور يعود تامًّا: من وقف عليه فقد قصده — وهو الذي يفتح اسمَه كذلك */
.cd-mtab:not(.is-focus):hover .cd-mtab__in { opacity: 1; }
.cd-mtab.is-open { color: var(--cd-tx); }
.cd-mtab.is-focus { color: var(--u-gold); }
.cd-mtab:hover { color: var(--u-gold); }

/* ---------- الخيط: «سُمكان» — رفيعٌ محسورٌ للقائمة، عريضٌ ممتدٌّ للمركَّزة ----------
   ويُرسم أبدًا وتتبدّل حالُه، لا يُخلق ويُهدم — وإلّا وقع الانتقالُ في عنصرٍ لا حالَ له
   سابقة فظهر ظهورًا لا انسيابًا (وهو درسُ الحجاب نفسُه).
   ولونُه ‎--u-gold‎ صريحًا لا ‎currentColor‎: حبرُ اللسان يتبدّل بأحواله الثلاثة، والخيطُ
   خبرٌ واحدٌ لا يتبدّل لونُه — وإنّما سُمكُه ومدُّه وشفافيّتُه */
.cd-mtab::after {
  content: ''; position: absolute; inset-inline: 7px; bottom: 0;
  height: 2px; border-radius: 2px 2px 0 0; background: var(--u-gold);
  opacity: 0;
  transition: opacity .2s, height .2s,
              inset-inline-start .2s, inset-inline-end .2s;
}
.cd-mtab.is-open::after { opacity: .5; }
/* وخيطُ القائمة غير المركَّزة يخفت كمتنه: كان يُضرب في شفافيّة اللسان كلِّه فيخفت معه،
   فلمّا رُفعت عن اللسان بقي الخيطُ في قوّته — فيُضرب ههنا صراحةً */
.cd-mtab.is-open:not(.is-focus)::after { opacity: calc(.5 * var(--tab-dim)); }
/* ===== ومدُّ المركَّزة ينتهي دون الحدّ =====
   كان ‎inset-inline: 0‎ فيبلغ حدَّ اللسان. وهو في المفرد يُقصّ بانحناء القاع (نصفُ قطره
   ‎13‎، وعلى ارتفاع ‎3‎ لا يسمح الانحناءُ بأقلَّ من ‎4.7‎ من الطرف فتُشذَّب نهايتاه)،
   وفي العُصبة أسوأ: أوساطُها مربّعةٌ بلا انحناء والفاصلُ بينها خيطٌ رأسيّ — فيلتقي
   الخيطان فيُقرآن زاويةً واحدة.
   فصار ‎5px‎: يخلُص من الانحناء ومن الفاصل معًا، ويبقى أمدَّ من خيط القائمة (‎7px‎).
   والفارقُ الأصليُّ بينهما السُّمكُ والشفافيّة، والمدُّ زيادةٌ تُقرأ ولا يُحمَّل وحدَه */
.cd-mtab.is-focus::after { opacity: 1; height: 3px; inset-inline: 5px; }
/* ===== «أيقونةٌ تتوسّع بالمرور» — اتّجاه د =====
   ساكنًا أيقونةٌ وحدَها، فإذا مررتَ انفتح الاسمُ إلى يسارها وانزاح المِقبضُ معه.
   والاسمُ يُقصّ بـ‎max-width‎ لا يُحذف بـ‎display‎: المحذوفُ لا يقرؤه قارئُ الشاشة ولا
   ينتقل، والمقصوصُ يبقى في الشجرة مقروءًا وينفتح انسيابًا.
   وهامشُه السالبُ يبتلع فجوةَ الصفّ حين ينطوي، وإلّا بقي فراغُ ‎7px‎ بجنب الأيقونة
   يقول إنّ ثَمّ شيئًا محذوفًا */
/* والقدُّ على **الجوف** لا على اللسان: اللسانُ عرضُه يُنتقل إليه (‎0 ⇄ مقيس‎)، و‎min-width‎
   عليه يمنع بلوغَ الصفر فتموت الطيّة. والجوفُ ثابتُ القدّ يُقصّ بـ‎overflow‎ فينكشف
   بانكشاف أبيه ولا يزاحمه في قياسه */
.cd-mtab__in {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-width: var(--dw-w); gap: 7px; padding: 0 11px;
}
.cd-mtab__ic { flex: none; position: relative; display: grid; place-items: center; color: var(--u-gold); }
.cd-mtab__ic svg { width: var(--dw-ic); height: var(--dw-ic); display: block; }
/* ===== رقمُ الوجه منقوشٌ على الرمز =====
   لكلّ وجهٍ من «الفراغ» و«الإخفاء» نافذتُه ولسانُه، وأوجهُ البطاقة الواحدة رمزُها واحد.
   واللسانُ ساكنًا رمزٌ وحدَه (هيئةُ «التي تتوسّع بالمرور»)، فلولا الرقمُ لَاستوت ألسنةُ
   الأخوات فلا يُقصد لسانٌ بعينه إلّا بالمرور عليها واحدًا واحدًا.
   وهو في الزاوية السفلى من جهة الابتداء، خارجَ حبر الرمز فلا يُلبّسه — ووزنُه أثقل
   من قدّه ليُقرأ في ‎9px‎، وحدُّه بسطح اللسان نفسِه ففصلٌ بلا لون */
.cd-mtab__k {
  position: absolute; inset-inline-start: -5px; bottom: -3px;
  min-width: 12px; height: 12px; padding: 0 2px; border-radius: 6px;
  display: grid; place-items: center;
  font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 9px; font-weight: 700; line-height: 1;
  background: var(--cd-win); color: var(--cd-tx); box-shadow: 0 0 0 2px var(--cd-pan);
}
.cd-mtab__tx {
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 11.5px; font-weight: 700; line-height: 1;
  max-width: 0; opacity: 0; margin-inline-start: -7px;
  overflow: hidden; text-overflow: ellipsis;
  transition: max-width .3s cubic-bezier(.32, .72, 0, 1), opacity .2s,
              margin-inline-start .3s cubic-bezier(.32, .72, 0, 1);
}
.cd-mtab:hover .cd-mtab__tx { max-width: 150px; opacity: 1; margin-inline-start: 0; }
/* ===== المطويُّ: عرضٌ صفريّ =====
   اللسانُ يُولد مطويًّا فينفتح، ويُطوى قبل أن يُنزع — فالمِقبضُ ينزاح انسيابًا لا قفزًا.
   و‎!important‎ لأنّ العرضَ المفتوحَ يُكتب في النمط (مقيسًا لا مقدَّرًا)، والمهمُّ
   في الملفّ يغلب العاديَّ في النمط */
.cd-mtab.is-fold { width: 0 !important; margin-inline-start: 0 !important; opacity: 0; }
/* ===== وطيُّ الانصراف الأخير أسرع: شوطٌ واحدٌ للنافذة واللسان =====
   الطيُّ المعتاد يتبع فتحَ اللسان (‎.38s‎ بمنحنًى متجاوز) — وهو صوابٌ حين تنطوي نافذةٌ
   ويبقى شريطُها. وأمّا الانصرافُ الأخير فالنافذةُ واللسانُ يذهبان **معًا**، فلو بقي
   اللسانُ على ‎380‎ والنافذةُ على ‎220‎ لَبدَوَا متتابعين: تذهب هذه ثمّ يبدأ ذاك.
   فيُقصَّر شوطُه ويُقوَّم منحناه (المتجاوزُ ههنا يزيد اللسانَ قبل أن ينكمش، وذاك في
   الفتح حياةٌ وفي الخروج تردّد) */
.cd-mtab.is-fold.is-quick {
  transition: width .22s cubic-bezier(.4, 0, .6, 1),
              margin-inline-start .22s cubic-bezier(.4, 0, .6, 1),
              opacity .12s ease-out;
}

/* ===== طيرانُ الطيّ: المسرحُ يتصاغر إلى لسانه =====
   المحمولُ **الطبقةُ** لا المسرح: المسرحُ ‎transform‎ محجوزٌ لموضعه المنقول (‎cdPutPos‎)،
   فلو كُتب فيه الانكماشُ لَمُحي الموضعُ ولم يعد بالنشر. والطبقةُ خاليةٌ منه فتحمله.
   والمنشأُ رأسُ المسرح (‎transform-origin‎ يُحسب في الشيفرة): الانكماشُ **إلى أعلى** —
   تنحسر النافذةُ عن قاعها صاعدةً إلى الحافّة حيث لسانُها، لا تتقلّص إلى مركزها.
   والعتمةُ تخبو متأخّرةً قليلًا: تبقى النافذةُ مرئيّةً وهي تتصاغر، ولا تغيب إلّا في آخره */
.cd-layer.is-mfly {
  transition: transform .26s cubic-bezier(.32, .72, 0, 1),
              opacity .18s cubic-bezier(.55, 0, 1, 1) .06s,
              padding-top .42s cubic-bezier(.3, 1, .4, 1);
}
.cd-layer.is-mfly > .cd-stage { pointer-events: none; }

/* ===== الدُّرج في مِلء الشاشة: يُخلي الحافّة، ثمّ يُطلّ إن قصدتَها =====
   الشاشةُ كلُّها صارت للنافذة، فينسحب الدُّرجُ بكامله إلى فوق ويغيب — ومِقبضُه معه،
   إذ لا معنى لمِقبضٍ متدلٍّ على نافذةٍ ملأت الشاشة.
   فإذا قاربتَ الحافّةَ العليا أطلّ بمِقبضه (‎is-peek‎ يضعه ‎cdPeekAt‎ في ‎app.js‎)، فتضغطه
   فينبسط. والمبسوطُ لا يُخفى البتّة: أنت تستعمله، والنافذةُ تنزل تحته بـ‎--cd-top‎ كعادتها.
   والإخفاءُ بـ‎-100%‎ من ارتفاعه هو لا ببكسلٍ مقدّر، فيصحّ مطويًّا (مِقبضٌ وحده) ومبسوطًا */
#card-modal:is(.snap-full, .is-away) .cd-dw:not(.is-open):not(.is-peek) { transform: translateY(-100%); }
/* وظلُّ المِقبض معه: الصندوقُ يخرج من الشاشة وظلُّه يمتدّ تحته ثمانيةَ بكسلاتٍ فيبقى
   لطخةً رماديّةً على الحافّة العليا تُقرأ خطأً في الرسم — والمنسحبُ يختفي بظلّه */
#card-modal:is(.snap-full, .is-away) .cd-dw:not(.is-open):not(.is-peek) .cd-dw__handle { box-shadow: none; }

/* ===== والصدَفةُ المنزوية: أثرٌ في الحافّة لا حاجزٌ على الشاشة =====
   لا عتمةَ ولا مسرح، ولا التقاطَ نقرٍ (‎pointer-events: none‎) — فالصفحةُ تحتها تعود
   لك كاملةً كأنّ الصدَفةَ أُغلقت. ويبقى صفُّ الألسنة وحدَه: مرفوعًا فوق الحافّة
   بالقاعدة أعلاه، ينزل حين يبلغه المؤشّر.
   وأزرارُه تلتقط النقرَ وإن كان أصلُها مرفوعًا عنه: ‎auto‎ في الابن يغلب ‎none‎ في الأب —
   وهي مكتوبةٌ لها أصلًا (‎.cd-dw__tray‎ و‎.cd-mtab‎)، فلا يُزاد شيء */
#card-modal.is-away { background: none; pointer-events: none; }
#card-modal.is-away .cd-layer { display: none; }

/* البطائق مصفوفةً جنبًا إلى جنب: جلد النافذة نفسه، وحدُّها يتذهّب عند المرور.
   ولا حركةَ لها في نفسها — هي منقوشةٌ في بساط الدُّرج تهبط بهبوطه وتصعد بصعوده */
/* البطاقة مستلقيةٌ لا قائمة: عرضُها طولُها القديم وطولُها عرضُه.
   وارتفاع الدُّرج ينقص بمقدار ما نقص طولُها، فيبقى الهواء حولها كما كان */
/* ===== لماذا ‎translateY‎ ولم يكفِ قصُّ ‎max-height‎ =====
   القصُّ وحده يُبقي البطائق ساكنةً في مكانها والدُّرجَ ينكشف عنها، فتُقرأ ستارةً
   تُرفع عن شيءٍ ثابت. والمطلوب عكسُه: أن تكون البطائق **جزءًا من البساط** المنسحب.
   فتُزاح بكامل ارتفاعها إلى فوق وهي مطويّة، وتنزل معه بالتوقيت نفسه والانسيابيّة نفسها
   (‎.42s‎ و‎cubic-bezier(.3,1,.4,1)‎) — فتبقى حافّتُها السفلى ملتصقةً بحافّة الدُّرج
   في كلّ لحظةٍ من الحركة، كنقشٍ على بساطٍ يُسحب.
   والنسبة المئويّة لا البكسل: ‎-100%‎ من ارتفاعها هي، فتظلّ مضبوطةً لو تبدّل الارتفاع
   في استعلام الشاشات القصيرة أو غيره */
.cd-types {
  height: var(--tray-h); display: flex; align-items: center; justify-content: center; gap: 12px;
  transform: translateY(-100%);
  transition: transform .42s cubic-bezier(.3, 1, .4, 1),
              height .42s cubic-bezier(.3, 1, .4, 1),
              gap .42s cubic-bezier(.3, 1, .4, 1);
}
.cd-dw.is-open .cd-types { transform: translateY(0); }
.cd-types .cd-kb {
  width: 100px; height: 88px; padding: 0; gap: 10px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--cd-win); border: 1px solid var(--cd-winline); border-radius: 12px;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5);
  transition: transform .2s cubic-bezier(.3, 1.2, .5, 1), border-color .2s, box-shadow .2s,
              width .42s cubic-bezier(.3, 1, .4, 1), height .42s cubic-bezier(.3, 1, .4, 1);
}
.cd-types .cd-kb svg { width: 32px; height: 32px; color: var(--u-mut);
  transition: color .2s, width .42s cubic-bezier(.3, 1, .4, 1), height .42s cubic-bezier(.3, 1, .4, 1); }
.cd-types .cd-kb b {
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 10.5px; font-weight: 700; color: var(--cd-tx);
  text-align: center; padding: 0 6px; line-height: 1.3;
}
.cd-types .cd-kb:hover {
  transform: translateY(-5px);
  border-color: var(--u-gold); box-shadow: 0 16px 28px -14px rgba(0, 0, 0, .55);
}
.cd-types .cd-kb:hover svg { color: var(--u-gold); }

/* ===== مقام البوّابة: بطاقةٌ جديدة لم يُختَر نوعُها بعد =====
   الدُّرج ينسحب وحده إلى منتصف الشاشة ببطائقَ كبيرة، **ولا نافذةَ تحته البتّة** —
   فالبطاقة لم تُخلق بعدُ، ونافذةٌ خاويةٌ تقول «اختر من فوق» تشغل مكانًا بلا خبر */
#card-modal.is-gate .cd-stage { display: none; }
#card-modal.is-gate .cd-types { gap: 20px; }
#card-modal.is-gate .cd-types .cd-kb { width: 176px; height: 150px; gap: 16px; }
#card-modal.is-gate .cd-types .cd-kb svg { width: 48px; height: 48px; }
#card-modal.is-gate .cd-types .cd-kb b { font-size: 13.5px; }
/* لحظةُ قياس موضع النافذة قبل إطلاق الحركة: تُقطع الانتقالات إطارًا واحدًا */
#card-modal.cd-nofx, #card-modal.cd-nofx * { transition: none !important; }

/* المسرح ينزاح للدُّرج ولا يُغطّى به */
#card-modal { transition: padding-top .42s cubic-bezier(.3, 1, .4, 1); }
#card-modal.is-tray { padding-top: var(--tray-h); }

/* ===== النسخة الهابطة: البطاقة المختارة تنزل من الدُّرج وتتوسّع فتصير النافذة =====
   ينتظر **المسرح كلّه** خافيًا لا البطاقةُ وحدها: الرصيف والخيط والمسار أبناؤه،
   ولو أُخفيت البطاقة وحدها لبرزوا وحدهم أوّلَ الهبوط ثمّ تحرّكوا مع انزياح الحَشْو —
   وهو الوميض الذي يُرى: ظهورٌ ثمّ اختفاءٌ ثمّ ظهور */
#card-modal .cd-stage { transition: opacity .26s; }
/* ===== المسرح يُحمل من ترويسة البطاقة =====
   ولا مؤشّرَ نقلٍ عند المرور: الترويسة تُقرأ خبرًا قبل أن تكون مقبضًا، فلو تبدّل المؤشّر
   بمجرّد المرور لَوعد بفعلٍ لم يُطلَب. يظهر عند **الإمساك** لا عند الاقتراب —
   ‎cd-grip‎ تُضاف لحظةَ الضغط على الترويسة (قبل عتبة الحركة)، فتقول «أمسكتَ، فحرّك».
   والنصّ لا يُحدَّد أثناء الحمل وحده (‎cd-moving‎) وإلّا ظُلِّل الشريطُ كلَّ سحبة */
body.cd-grip, body.cd-grip * { cursor: move !important; }
body.cd-moving { user-select: none; }
/* لا تأخيرَ بين اليد والنافذة: الانتقالُ يُقطع، والطبقةُ تُرفع إلى المُركِّب لحظةَ الإمساك
   (لا دائمًا — الطبقةُ المرفوعة تستهلك ذاكرةً وهي ساكنة) */
body.cd-grip #card-modal .cd-stage { will-change: transform; }
body.cd-moving #card-modal .cd-stage { transition: none; }
/* ===== ولا يُرفع الدُّرجُ إلى طبقةٍ أثناء الحمل — وقد جُرّب فأفسد =====
   كان هنا ‎body.cd-moving #cd-drawer { will-change: opacity }‎، وحجّتُه أنّ ضبابَ الدُّرج
   أثقلُ ما في المشهد فيُرفع لئلّا يُعاد رسمُه والنافذةُ تمرّ تحته.
   **وهو ينقض نفسَه**: ‎will-change‎ بخاصّةٍ تُنشئ سياقَ تراكبٍ (‎opacity‎ منها) يجعل
   العنصرَ **جذرَ خلفيّة** (backdrop root) — فلا يرى ‎backdrop-filter‎ في أبنائه إلّا ما
   رُسم **داخل** ذلك الجذر، ولا شيءَ فيه. فيذهب الضبابُ عن الدُّرج وألسنةِ المطويّات
   (‎.cd-mtab‎) لحظةَ الإمساك بالنافذة، ويعود عند الإفلات — وهو العطلُ الذي رآه صاحب الموقع.
   والقاعدةُ: **ما يُرفع لا يَرى ما تحته**. فالضبابُ الخلفيُّ يلزمه أن يُعاد أخذُه في كلّ
   إطار — وذاك عملُه لا عطلُه: أن ترى النافذةَ تنزلق تحت الزجاج المصنفَر.
   والمسرحُ وحدَه مرفوعٌ (أعلاه) وهو الكافي: المتحرّكُ هو الذي يُرفع، لا الساكنُ تحته */
#card-modal .cd-stage.is-arriving { opacity: 0; }
.cd-fly {
  position: fixed; z-index: 12; display: grid; place-items: center; overflow: hidden;
  border-radius: 12px; background: var(--cd-win); border: 1px solid var(--cd-winline);
  box-shadow: 0 22px 48px -16px rgba(0, 0, 0, .6);
  transition: top .5s cubic-bezier(.5, .02, .25, 1), left .5s cubic-bezier(.5, .02, .25, 1),
              width .5s cubic-bezier(.5, .02, .25, 1), height .5s cubic-bezier(.5, .02, .25, 1),
              border-radius .5s, opacity .22s;
}
.cd-fly.is-land { border-radius: 18px; }
/* التسليم: النسخة تخبو والمسرح يصفو في المكان نفسه — تعاقبٌ متداخل لا تبديلٌ مفاجئ */
.cd-fly.is-done { opacity: 0; }
.cd-fly__face {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: opacity .3s;
}
.cd-fly.is-land .cd-fly__face { opacity: 0; }
.cd-fly__face svg { width: 46px; height: 46px; color: var(--u-mut); display: block; }
.cd-fly__face b {
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 13.5px; font-weight: 700; color: var(--cd-tx);
}
/* التكوّن: البطاقة تصعد وتصفو عند اختيار نوعها — فيُقرأ تكوّنًا لا استبدالًا صامتًا */
@keyframes cdForm {
  from { opacity: .25; transform: translateY(14px) scale(.985) }
  to   { opacity: 1; transform: none }
}
#cd-card.is-form { animation: cdForm .42s cubic-bezier(.25, 1, .4, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .cd-dw__tray, .cd-types, #card-modal,
  .cd-mtab, .cd-layer.is-mfly { transition-duration: .01s !important; }
  #cd-card.is-form { animation: none !important; }
}
@media (max-height: 700px) {
  #card-modal { --tray-h: 108px; }
  .cd-types { gap: 9px; }
  .cd-types .cd-kb { width: 86px; height: 76px; gap: 7px; }
  .cd-types .cd-kb svg { width: 27px; height: 27px; }
  #card-modal.is-gate .cd-types .cd-kb { width: 142px; height: 118px; gap: 12px; }
  #card-modal.is-gate .cd-types .cd-kb svg { width: 38px; height: 38px; }
}
/* ===== ترويستان تحضنان البطاقة =====
   العليا تقول من صنعها وأيّ نسخة ومن عندها الآن، والسفلى تقول كيف استُقبلت */
/* الترويستان شريطان لهما سطحُهما، لا خطّان أفقيّان: تُطبقان على البطاقة من طرفيها
   وتأخذان انحناءها (‎18px‎ ناقصَ حدّها) فتصيران جزءًا من جسمها لا خطًّا مرسومًا عليه.
   ولذلك يُلغى حشو البطاقة ويُنقل إلى الجسم وحده، وإلّا انحسر الشريطان عن الحافّتين */
#card-modal .mmodal__card { padding: 0; }
/* وحشوُ الجسم مكتوبٌ في موضعه مع الفيض (فوق) — كان هنا هامشًا يرسم شريطًا من لون
   النافذة تحت الترويسة العليا وفوق السفلى، فيبدو فاصلًا لا معنى له، وينحسر به الشريطُ
   عن الحافّة. فصار حشوًا: يذهب الشريطُ الفارغ، ويبلغ شريطُ الانزلاق أقصى اليسار */
.cd-meta, .cd-foot {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; font-size: 11.5px; color: var(--cd-mut); padding: 10px 15px;
  background: var(--cd-pan);
}
/* الانحناءُ قيمةٌ واحدة (‎--cd-r‎) تقرؤها النافذةُ وشريطاها وشبحُ الإلصاق — والشريطان
   ينقصان حدَّها بكسلًا واحدًا، وإلّا نزّ لونُ الحدّ من تحتهما عند الزوايا */
.cd-meta { border-bottom: 1px solid var(--cd-winline);
  border-radius: calc(var(--cd-r) - 1px) calc(var(--cd-r) - 1px) 0 0; }
/* الشريطُ الأسفل فارغٌ ينتظر ما يُوضع فيه — ويبقى له ارتفاعُ ما كان يحمله،
   فلا يقفز طولُ النافذة يوم يُملأ */
.cd-foot { border-top: 1px solid var(--cd-winline);
  border-radius: 0 0 calc(var(--cd-r) - 1px) calc(var(--cd-r) - 1px); min-height: 40px; }
/* الزيارتان صعدتا إلى الشريط الأعلى: وعاءٌ واحدٌ يضمّهما فيُقرآن خبرًا واحدًا،
   وتفصله عمّا قبله فجوةٌ أوسع قليلًا — فلا يلتصق بالحضور فيُظنّ منه */
.cd-stats { display: inline-flex; align-items: center; gap: 11px; margin-inline-start: 2px; }
/* نسختها الأولى قيد الكتابة: الشريطان يبقيان بسطحهما وحدّهما **وارتفاعهما**، ويُخفى ما فيهما وحده.
   والإخفاء بـ‎visibility‎ لا ‎display‎ كي يبقى المحتوى في الحساب — فيستحيل أن يقفز طول النافذة
   حين تستقرّ البطاقة، مهما تبدّلت مقاسات ما بداخلهما لاحقًا */
.cd-meta.is-blank > *, .cd-foot.is-blank > * { visibility: hidden; }
/* إلّا أزرارَ النافذة: صارت من أبناء الشريط، ولو خبت معه لَبقيت البطاقةُ الخاوية بلا مخرج */
.cd-meta.is-blank > .cd-bar { visibility: visible; opacity: 1; transform: none; }
/* ===== دخولُ الترويسة العليا ينساب ولا يقفز =====
   أوّلُ حرفٍ يُظهرها، فلو ومضت ظهورًا لَقُرئت خطأً لا خبرًا. و‎visibility‎ لا تُنعَّم وحدها
   (قيمتها تنتقل قفزًا)، فتُصاحبها الشفافيّةُ والإزاحة وهما اللتان تُنعّمان.
   وتأخيرُها صفرٌ عند الظهور و‎.34s‎ عند الاختفاء — وإلّا قُطع الذبولُ من أوّله */
.cd-meta > *, .cd-foot > * {
  visibility: visible;
  transition: opacity .34s ease, transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
/* تتابعٌ لا دفعة: كلُّ عضوٍ يتلو الذي قبله بلمحة، فيُقرأ الدخولُ حكايةً قصيرة */
.cd-meta > *:nth-child(2), .cd-foot > *:nth-child(2) { transition-delay: .08s; }
.cd-meta > *:nth-child(3), .cd-foot > *:nth-child(3) { transition-delay: .15s; }
.cd-meta > *:nth-child(4) { transition-delay: .21s; }
.cd-meta.is-blank > *, .cd-foot.is-blank > * {
  opacity: 0; transform: translateY(-7px) scale(.93);
  transition: opacity .34s ease, transform .34s ease, visibility 0s linear .34s;
}
/* ===== انضمامُ خبرٍ جديد إلى الترويسة =====
   حين تنزل البطاقة ينضمّ «مَن عندها» إلى الشريط، فيُعاد توزيعُ المتوسِّط ويُدفع الختمُ
   وصاحبُه يمينًا. و‎flex‎ يعيد التوزيع **قفزًا** لا انتقالًا، فتُقاس المواضع قبل الرسم
   وبعده ويُردّ كلٌّ إلى موضعه الأوّل بالتحويل ثمّ يُطلق منه (FLIP) — فيُرى منزلقًا
   وهو في الحقيقة قد انتقل أصلًا. والداخلُ الجديد يذوب دخولًا بالصنف أدناه */
.cd-meta > *.cd-in-new, .cd-foot > *.cd-in-new { opacity: 0; transform: scale(.82); }
@media (prefers-reduced-motion: reduce) {
  .cd-meta > *, .cd-foot > *, .cd-meta.is-blank > *, .cd-foot.is-blank > * {
    transition: none; transform: none;
  }
}
/* لا سطحَ للأزرار: صارت داخل النافذة فوق شريط الأخبار، فتأخذ سطحه ولا تحمل سطحًا ثانيًا */
#card-modal .cd-bar { background: none; }
/* ===== أركانٌ مسمَّرةٌ ووسطٌ يتوسّط النافذةَ نفسَها — شبكةُ ثلاثة أعمدة (‎head-crowd-lab#n‎) =====
   كانت الترويسةُ صفًّا مرنًا من عضوين: صفُّ الأزرار ثمّ كتلةُ الخبر تملأ ما بقي وتتوسّط
   فيه. وعلّتُه أنّ الوسطَ يتوسّط **ما فضل** من الصفّ لا النافذةَ — فيزوغ كلّما تبدّل ما
   في الطرف: يطول اسمُ الصاحب فينزاح الختمُ، وتُنشر البطاقةُ فينضمّ الحضورُ فينزاح ثانيةً.
   فصارت **شبكةً من ثلاثة أعمدة**: طرفان متساويان أبدًا ووسطٌ بقدر متنه — فيتوسّط في
   النافذة نفسِها **بالبناء لا بحساب**، مهما طال الاسمُ وكثر الحاضرون.
   وينتظم بها تناظرُ الأركان الأربعة: فوق يمينًا أزرارُ النافذة وفوق يسارًا الحضور،
   وتحت يمينًا الترسُ والجيبُ وتحت يسارًا المشاهداتُ والتعليقات.
   ===== ورُدَّ الصفرُ إلى ‎auto‎: العمودُ لا ينزل تحت متنه =====
   كُتب أوّلًا ‎minmax(0,1fr)‎ ليبقى الوسطُ متمركزًا في **كلّ** عرض، ولو ضاقت النافذة.
   وثمنُه ظهر عند التضييق إلى أدناه: العمودُ ينكمش إلى الصفر **ولا ينكمش ما فيه** —
   والأزرارُ مسمَّرةٌ في طرفه (‎justify-self‎)، فتخرج من عمودها وتركب جارَها. تداخلٌ لا انزياح.
   والصوابُ أنّ العمودَ يأبى النزولَ تحت متنه (‎auto‎)، فيقع الانكماشُ حيث يُحتمل:
   في الوسط — والاسمُ فيه يُقصّ بنقاطه، والمسارُ في التذييل كذلك.
   **ولا يخسر التمركزُ شيئًا في السعة**: العمودان يقتسمان الفضلةَ بالسويّة ما دامت فضلةً،
   فالوسطُ في مركز النافذة كما كان. وإنّما يزيغ قليلًا عند أضيق عرضٍ وحدَه — وزيغةٌ
   تُحتمل خيرٌ من ركوبٍ لا يُحتمل.
   ===== وورقةُ الملخّص تتبعه =====
   الورقةُ تسكن الصدَفةَ نفسَها وترويستُها هذه بعينها: فيها ‎.cd-bar‎ و‎.cd-mid.sh-mid‎
   ولا ثالثَ لهما — فيقع عنوانُها في العمود الأوسط متوسّطًا في النافذة كهويّةِ البطاقة،
   ويبقى العمودُ الثالثُ خاويًا. وذاك المراد: النافذتان صدَفةٌ واحدةٌ فلا تُقرآن نظامين */
/* ===== والوسطُ ‎minmax(0, auto)‎ ويمتدّ في عموده =====
   ‎auto‎ وحدَها تجعل العمودَ يقف عند **أدنى متنه**، وأدنى متنِ نصٍّ لا يلتفّ هو النصُّ
   كلُّه — فلا ينكمش الوسطُ أبدًا مهما ضاقت النافذة، ويُدفع الجاران خارجَها. (مقيسًا:
   كتلةُ الهويّة ‎201px‎ في كلّ العروض من ‎720‎ إلى ‎380‎، والوجهةُ ‎205px‎ كذلك.)
   والصفرُ يأذن للعمود بالنزول. ثمّ **يمتدّ ساكنُه فيه** (‎justify-self: stretch‎) ليصير
   له عرضٌ صريحٌ ينكمش داخلَه — ولولا الامتداد لَبقي بمقاس متنه وفاض عن عموده:
   ‎min-width: 0‎ يأذن بالانكماش ولا يُحدثه، وإنّما يُحدثه **صندوقٌ معلومُ العرض**.
   وعندئذٍ يقع الانكماشُ حيث هُيّئ له: الاسمُ يُقصّ بنقاطه، والمسارُ كذلك.
   و‎safe center‎ لا ‎center‎: التوسيطُ عند الفيض يقصّ الطرفين معًا فيضيع صدرُ الخبر
   (الختمُ · الحلقة)، و‎safe‎ يردّه إلى المبدأ عند الضيق فيبقى الأهمُّ ويُقصّ الأدنى */
/* ===== والشبكةُ تبدأ من مبدئها لا من وسطها =====
   الشريطان ورثا ‎justify-content: center‎ من قاعدة الصفّ المرن. وهي في الشبكة لا أثرَ
   لها ما دامت الأعمدةُ تملأ الحاوي (‎1fr‎)، فإذا **فاضت** قسمت الفيضَ على الطرفين —
   فيخرج ما في الركن الأيمن يمينًا كما يخرج ما في الأيسر يسارًا (مقيسًا: الدرجُ المبسوطُ
   خرج ‎110px‎ عن يمين النافذة عند عرض ‎380‎).
   والصوابُ أن يبدأ الصفُّ من مبدئه فيبقى الركنُ الأوّلُ في موضعه أبدًا، ويذهب الفيضُ
   كلُّه إلى الطرف الآخر — حيث القصُّ يتلقّاه */
#card-modal .cd-meta {
  display: grid; grid-template-columns: minmax(auto, 1fr) minmax(0, auto) minmax(auto, 1fr);
  align-items: center; justify-content: start; column-gap: var(--h-gap);
  padding: var(--h-pady) var(--h-padx);
}
/* وكتلةُ الأزرار تتحرّك كتلةً واحدة: هامشُ طرفها يزحزحها، وإزاحةٌ رأسيّةٌ تنقُرها.
   ولا تنكمش بعد اليوم (‎flex: 0 1 auto‎ كان لصفٍّ يقتسم عرضَه)، فعمودُها مرنٌ بذاته */
#card-modal .cd-meta > .cd-bar {
  grid-column: 1; justify-self: start; flex: none; gap: var(--bar-gap);
  margin-inline-start: var(--bar-off); translate: 0 var(--bar-dy);
}
/* ===== ورُفع القصُّ عن الوسط =====
   كان فيه ‎overflow: hidden‎ لغرضٍ **أفقيّ** (يُقصّ الخبرُ الطويل فلا يخرج عن جسم النافذة)،
   وكان يقصّ الرأسيَّ معه بالضرورة فيبتلع المروحةَ والفقاعة — فعُولج بقاعدتين ترفعانه عند
   انفراجهما (‎:has(.cd-fan)‎ و‎:has(.cd-cmt)‎، وقد بقيتا فوق ولا عملَ لهما اليوم).
   وقد زال سببُه: العمودُ الأوسط بقدر متنه لا يزاحم أحدًا، والاسمُ نفسُه محدودٌ بـ‎--wh-max‎
   فلا يطول حتى يفيض. فلا قصَّ ولا حاجةَ إلى رفعه */
#card-modal .cd-meta .cd-mid {
  /* والأصلُ قبل الحال: كتلةُ الهويّة تُكتب عليها حالُ النسخة في كلّ رسم (‎cdPaintSeal‎)،
     فيُشتقّ منها ‎--id-c‎ أدناه. وههنا قيمتُه الأولى حارسًا، فلا يبقى الاسمُ والكعبُ
     بلا لونٍ لو وقع رسمٌ قبل أن تُكتب الحال */
  --id-c: var(--u-pet, #2c5e65);
  grid-column: 2; justify-self: stretch; overflow: visible;
  display: flex; align-items: center; justify-content: safe center; gap: var(--s-gap);
}
/* ===== ولا ‎min-width: 0‎ على كتلة الهويّة =====
   كانت مكتوبةً فيها من عهد الصفّ المرن، وهي في الشبكة **ضارّة**: عمودُ الوسط يقف عند
   أدنى متنِ ساكنِه، فإن رُفع ذلك الأدنى انكمش العمودُ دون الختم فخرج الختمُ من عموده
   وركب الركن. فالكتلةُ تقف عند متنها، والانكماشُ يقع **في جوفها** حيث يُحتمل: الاسم */
#card-modal .cd-meta .cd-mid > * { flex: none; }
/* والاسمُ وحدَه هو الذي يتقلّص ويُقصّ بنقاطه — والختمُ لا يُمَسّ: هو هويّةٌ ورقمٌ يُقرأ،
   وقصُّ رقمِ نسخةٍ خبرٌ مكذوب. والاسمُ يُقصّ بنقاطه فيبقى صدرُه مقروءًا ويُعلن نقصانَه */
#card-modal .cd-mid > .cd-who { flex: 0 1 auto; min-width: 0; }
/* ووسطُ الورقة يحفظ داخلَه: عنوانٌ وتحته وصفُه على **خطّ أساسٍ واحد** بفجوتهما — تلك
   لغةُ عنوانٍ ووصفِه، لا لغةُ مجموعةٍ من الأجسام. فالمكانُ من الشبكة، والداخلُ له.
   وله ‎min-width: 0‎ لأنّ وصفَه مقصوصٌ بنقاطه أصلًا (‎.sh-sub‎)، فيسع أن ينزل تحت متنه */
#card-modal .cd-meta .cd-mid.sh-mid { align-items: baseline; gap: 10px; min-width: 0; }
/* والحضورُ ركنٌ في العمود الثالث — ومركزُه فوق مركز النازل في التذييل (‎--here-off‎):
   المحاذاةُ **مركزٌ بمركزٍ لا حدٌّ بحدّ**، فالكتلتان مختلفتا العرض لا يستوي حدّاهما
   إلّا بأن تُمطَّ الأضيقُ من جوفها — فتصير الفجوةُ الداخليّةُ إعاقةً تفرّق ما جُمع */
/* ===== والتصحيحُ **إزاحةٌ نسبيّة** لا زيادةٌ في الهامش =====
   الهامشُ يدخل في حساب العمود (‎cdBarsFit‎ يعدّه، والعمودُ ‎auto‎ يقف عند متنه)، فلو
   كُتب فيه التصحيحُ لَبدّل عرضَ العمود فتبدّل موضعُ الكتلة فاحتاج تصحيحًا ثانيًا —
   حلقةٌ لا تنتهي. والإزاحةُ النسبيّةُ **لا تمسّ التخطيط**: الصندوقُ باقٍ في مكانه
   والمرسومُ وحدَه ينزلق. فيكفي قياسٌ واحد.
   و‎inset-inline-end‎ لا ‎transform‎: المتحوَّل يجعل العنصرَ جذرَ ضبابٍ (قاعدةٌ في هذا الملفّ) */
#card-modal .cd-meta > .cd-here {
  grid-column: 3; justify-self: end; margin-inline-end: var(--here-off);
  position: relative; inset-inline-end: var(--here-fit, 0px);
}
/* ===== والقصُّ يُرفع ما دامت المروحةُ منفرجة =====
   ‎overflow: hidden‎ هنا لغرضٍ **أفقيّ**: أن يُقصّ الخبرُ الطويل فلا يخرج عن جسم النافذة.
   لكنّه يقصّ الرأسيَّ معه بالضرورة، والمروحةُ تتدلّى **تحت** الشريط بكاملها (‎103px‎ تحت
   حدّه)، فكانت تُبتلع كلُّها ولا يظهر إلّا ما ينزّ من ظلّها — في الأنواع جميعًا لا في «الإخفاء» وحده.
   ولا يُفصل المحوران: ‎overflow-x: hidden‎ مع ‎overflow-y: visible‎ باطلٌ في المواصفة —
   يُرقّى الظاهرُ إلى ‎auto‎ فيصير الصندوقُ ممرَّرًا ويقصّ كما كان.
   فيُرفع القصُّ في حال الانفراج وحدَها: هي حالٌ عابرةٌ يقصدها صاحبُها، وما دامت مفتوحةً
   فالسجلُّ أولى بالظهور من قصِّ خبرٍ لن يطول في هذه اللحظة */
#card-modal .cd-meta .cd-mid:has(.cd-fan) { overflow: visible; }
.cd-meta .cd-st { margin: 0; transform: none; }
/* ===== ورُفعت رقاقةُ الصاحب: لا صندوقَ في صندوق (‎head-crowd-lab#n‎) =====
   كان اسمُه في رقاقةٍ لها سطحٌ وحدٌّ وانحناء، والريشةُ رمزًا يقول «هذا مَن كتبها» ولفظُ
   «من» يقوله بحرفين — فاجتمع في موضعٍ واحدٍ خبران أحدُهما يكفي، وعلبةٌ في علبة.
   فبقي اللفظُ والاسمُ عاريين ملاصقَين للختم، **بلونه** (‎--id-c‎): هما خبرٌ واحدٌ
   (مَن كتبها وأيُّ نسخةٍ هي)، فافتراقُهما في الحبر ينقض جمعَهما في المكان.
   والختمُ وحدَه يبقى بطوقيه: حدُّه **هويّةٌ** لا تجميع، وزرُّ التنزيل في التذييل يلبس
   جِلده — فلو نُزع لَانفرد الزرُّ بجِلدٍ لا شريكَ له في النافذة.
   وكتلتُه تمتدّ بقدّ الصفّ (‎stretch‎) لا برقمٍ يُكتب، فيستوي طولاها مع الختم في كلّ معايرة */
.cd-who {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none; border-radius: 0;
  align-self: stretch; height: auto; color: var(--id-c, var(--cd-tx));
}
.cd-who__txt { display: inline-flex; flex-direction: column; line-height: var(--wh-lh);
  min-width: 0; opacity: var(--wh-op); }
/* ويرثان اللونَ عن أبيهما: كان اللفظُ بحبر التسميات والاسمُ بحبر المتن، فافترقا */
.cd-who__lab { font-size: var(--wh-lab); color: inherit; }
.cd-who b {
  color: inherit; font-size: var(--wh-nm); font-weight: 700; max-width: var(--wh-max);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ===== ولونُ الهويّة توكنٌ واحدٌ يقرؤه الختمُ وصاحبُه =====
   الحالُ مكتوبةٌ على كتلة الوسط نفسِها (‎cdPaintSeal‎ تكتبها مع كلّ تبدُّل)، فيُشتقّ منها
   لونُ الاسم — ويومَ يتبدّل حالُ النسخة تتبدّل المجموعةُ كلُّها معًا.
   ولا يُكتب على الختم نفسِه: صفوفُ المروحة أختامٌ لكلٍّ حالُه، فلو ورثت اللونَ من جدّها
   لَقالت كلُّها خبرَ الترويسة لا خبرَ نسخها */
/* ===== ولونُ الهويّة يتبع الكتلةَ لا شريطَها =====
   كانت الأربعةُ مقصورةً على ‎.cd-meta‎ — شريطِ البطاقة. ثمّ سكنت هذه الكتلةُ ترويسةَ
   نافذة الاختبار بلا شريط، فسقط ‎--id-c‎ إلى قيمته الحارسة: فبقي الاسمُ بترولًا مهما
   كان حالُ الختم، وذهب لونُ خطّي الكعب معه (‎--sl-line‎ مشتقٌّ منه).
   فيُرفع شرطُ الشريط ويبقى شرطُ النافذة: ‎.cd-mid‎ لا تقع في هذا الموقع إلّا حاملةً
   لهويّةِ بطاقةٍ، فأينما وقعت تبعها لونُها */
#card-modal .cd-mid.is-sync { --id-c: var(--cd-sync); }
#card-modal .cd-mid.is-pend { --id-c: var(--cd-pend); }
#card-modal .cd-mid.is-old { --id-c: var(--cd-old); }
#card-modal .cd-mid.is-new { --id-c: var(--u-gold); }
/* مكان الصورة ريشةٌ ذهبيّة (اتجاه «ز»): النسبة تُقال بالدور — «هذا من كَتَبها» — لا بالوجه */
.cd-av {
  width: 15px; height: 15px; flex: none; display: grid; place-items: center;
  color: var(--u-gold); opacity: .9; margin-inline-start: 5px;
}
.cd-av svg { width: 100%; height: 100%; display: block; }
/* ===== «٣ هنا» — الاتجاه «هـ · الموجة» بمقاساته =====
   كومةُ دوائر متراكبة ثمّ الرقم وكلمةُ «هنا»، ويمرّ بالكومة طورٌ متدرّج فتُقرأ موجةً واحدة */
.cd-here { display: inline-flex; align-items: center; gap: var(--hr-gap); }
/* ===== والحالُ تُكتب على الكتلة (‎data-hn‎) والمقاديرُ تُقرأ من التوكنات =====
   ‎data-hn‎ = العددُ مقصورًا على ثلاثة: ‎0‎ خاويةٌ · ‎1‎ · ‎2‎ · ‎3‎ فأكثر.
   والأرقامُ في كتلة التوكنات لا ههنا — فتُعايَر من موضعٍ واحدٍ كسائر مقادير النافذة.
   ولمَ في الجِلد لا في الشِّفرة؟ لأنّ الشِّفرةَ تقول **أيُّ حالٍ هذه** وحدَها، والجِلدُ
   يقول **كم مقدارُها** — فلا يُبثّ رقمُ معايرةٍ في مولّد المرقاة */
/* والخاويةُ تنفرد بقدِّها وتراكبها — وأمّا موضعُها فيقيسه ‎cdHereFit‎ كما يقيس موضعَ غيرها */
.cd-here[data-hn="0"] { --cc-sz: var(--z-sz); --cc-lap: var(--z-lap); }
.cd-here__pile { display: inline-flex; align-items: center; padding: 1px 0; }
.cd-here__n { display: inline-flex; align-items: baseline; gap: 4px; }
.cd-here__n b {
  font-family: 'KFUPM Display', sans-serif; font-size: var(--hr-num); font-weight: 700;
  color: var(--cd-tx); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
/* ===== ورُفع لفظُ «الآن» =====
   الكومةُ وجوهٌ والرقمُ عددُها، والحضورُ لا يُقال إلّا عن الآن — فاللفظُ يقول ما يقوله
   الشكلُ نفسُه. وهو ركنٌ في طرف الترويسة، والطرفُ لا يحتمل كلامًا يُقرأ حرفًا حرفًا.
   ويبقى في ‎title‎ لمن وقف عليه («مَن عندها الآن») */
.cd-here__n span { display: none; }
/* ===== ورقمُ الصفر منهنّ: حبرًا وحركةً =====
   لا يُعرض الرقمُ الخارجُ إلّا في الصفر (الشارةُ تقوله فيما سواه)، فهو ههنا **الخامسُ
   في صفّ الأشباح** لا خبرٌ من جنسٍ آخر إلى جنبها. فيأخذ حبرَها، ويموج موجتَها بطورٍ
   يتلو أطوارَها — و‎--dly‎ تكتبه ‎cdHereHTML‎ من عدّاد الكومة نفسِه، فلو زِيدت خاويةٌ
   أو نُقصت تبعها الطورُ بلا رقمٍ يُصان ههنا */
.cd-here[data-hn="0"] .cd-here__n b { color: var(--ph-ink); }
.cd-here[data-hn="0"] .cd-here__n {
  animation: cdWave 3.4s ease-in-out infinite; animation-delay: var(--dly, 0s);
}
/* ===== وعند أضيق عرضٍ تُخلع الكومةُ نفسُها =====
   الوسمُ ‎is-tight‎ يضعه ‎cdBarsFit‎ حين تزيد حاجةُ المجموعات الثلاث على جوف الشريط —
   قياسًا من الصفحة لا عتبةَ عرضٍ مكتوبة (فطولُ الاسم واللغةُ والخطُّ تبدّل الحاجةَ في
   العرض الواحد). والكومةُ **صورةٌ للرقم الذي إلى جنبها** لا خبرٌ زائدٌ عليه،
   فهي أولى ما يُخلع: يذهب الرسمُ ويبقى العدد. وأخواتُها في الترويسة لا تُخلع — الأزرارُ
   مخرجُ النافذة، والختمُ رقمُ نسخةٍ لا يُقصّ، والاسمُ يُقصّ بنقاطه قبل ذلك كلِّه */
/* ===== وما يُخلع عند الضيق هو **الوجوه** لا الكومةُ كلُّها =====
   كان يُخلع الرسمُ ويبقى الرقمُ الخارج. ثمّ ذهب الرقمُ من الحاضرين وصار العددُ في
   **الشارة** داخلَ الكومة — فخلعُ الكومة كلِّها يُخرج الركنَ خاويًا لا خبرَ فيه.
   فتُخلع الوجوهُ وحدَها وتبقى الشارةُ بعددها. وفي الصفر لا شارةَ ولا وجوه، فتُخلع
   الخاوياتُ ويبقى الرقمُ ‎0‎ كما كان */
#card-modal .cd-meta.is-tight .cd-here__pile > .cd-cc:not(.cd-cc--more) { display: none; }
/* الطوق بلون الترويسة فتنفصل الدائرة عن جارتها بلا خطٍّ زائد */
/* ===== وحبّةُ صاحب الموقع: صورتُه لا لونُه =====
   أرضيّتُها بترولُ الهويّة لا لونٌ من دورة الألوان — فتُقرأ «أنا» قبل أن تُبصر الصورة.
   والصورةُ تملؤها قصًّا (‎cover‎) فلا تُشوَّه بنسبةٍ ليست نسبتَها، و‎.cd-cc‎ يقصّ أصلًا
   بانحنائه (‎overflow: hidden‎) فتستدير الصورةُ معه بلا انحناءٍ ثانٍ يُكتب */
/* ============================================================
   انكشاف المجيبين — «الظلُّ الواحد ينشقّ» (‎here-reveal-lab#ن‎)
   ============================================================
   كومةُ نافذة الاختبار تعدّ **المجيبين** لا الحاضرين (‎cdHereHTML‎ ووضعُ ‎ans‎).
   وهي خبرٌ يُميل يدَك لو قُرئ قبل أن تُجيب، فتُطوى في طور السؤال: لا تبقى إلّا حبّتُك
   تموج وحدَها بلا شارةٍ ولا جيران. فإذا خرج الجوابُ خرجوا **من خلف حبّتك** ظِلالًا
   في مواضعهم ثمّ تفتّح لونُهم، ثمّ لحقت بهم الشارةُ بعددها.
   · فمصدرُ الحركة أنت لا بابٌ من الخارج — والفرقُ بين «انكشف» و«وصل» في مصدر
     الحركة لا في شكلها. وذاك هو مطلبُ الاتّجاه «ن» بعينه.
   · وطوران متداخلان: سوادٌ يقول «ثَمّ ناس»، ثمّ لونٌ يقول «هؤلاء هم».
   ===== ولمَ الغلافُ ‎.cd-ccw‎؟ =====
   الموجةُ ‎cdWave‎ على ‎.cd-cc‎ لا نهايةَ لها فهي آخرُ قائمة ‎animation‎، وهي تحكم
   ‎transform‎. فلو وُضع الكشفُ على الحبّة نفسِها بطل في صمت. فالموجةُ على الحبّة
   والكشفُ على غلافها.
   ===== والطيُّ ‎visibility‎ لا ‎display: none‎ =====
   وهذا خلافُ القاعدة في هذا الملفّ (لا خانةَ تُحجز لخبرٍ ممنوع)، وحجّتُه هندسيّة:
   ‎cdHereFit‎ يقيس عرضَ الكومة فيحاذي وسطَها على وسط صفّ الأخبار في الذيل. فلو خُلعت
   الحبّاتُ خلعًا لَانكمش العرضُ فانتقل المحور، ولَقفزت **حبّتُك أنت** عرضًا لحظةَ
   الانكشاف. وحبّتُك هي المصدر الذي يخرجون من خلفه — فإن تحرّكت بطل المعنى كلُّه
   وصار «وصلوا» لا «انكشفوا».
   فيُحجز الصندوقُ ويُطفأ ما فيه: الهندسةُ ساكنةٌ في الطورين، ولا يُرى في مكان
   المحجوز شيءٌ يُسأل عنه (لا سطحَ ولا حدَّ ولا خاويةً مرقّطة) */
.cd-ccw { display: inline-flex; position: relative; }
.cd-cc + .cd-ccw > .cd-cc, .cd-ccw + .cd-ccw > .cd-cc, .cd-ccw + .cd-cc {
  margin-inline-start: calc(var(--cc-lap) * -1);
}
.cd-here--ans:not(.is-rev) :is(.cd-ccw, .cd-cc--more) { visibility: hidden; }
.cd-here--ans.is-rev .cd-ccw {
  animation: cdSplit .24s cubic-bezier(.22, .86, .26, 1) both,
             cdHue .22s ease-out calc(.1s + var(--dly2, 0s)) both;
}
/* والشارةُ تتلوهم: عددٌ لا معنى له قبل أن تُرى الوجوهُ التي يعدّها */
.cd-here--ans.is-rev .cd-cc--more { animation: cdHue2 .22s ease-out .24s both; }
@keyframes cdSplit {
  from { opacity: 0; transform: translateX(var(--back, 15px)) }
  to { opacity: 1; transform: none }
}
@keyframes cdHue { from { filter: brightness(0) } to { filter: brightness(1) } }
@keyframes cdHue2 {
  from { opacity: 0; filter: brightness(.12) }
  to { opacity: 1; filter: brightness(1) }
}
@media (prefers-reduced-motion: reduce) {
  .cd-here--ans.is-rev :is(.cd-ccw, .cd-cc--more) { animation: none !important; }
}
.cd-cc--me { background: var(--u-pet, #2c5e65); }
.cd-cc--me img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-cc {
  width: var(--cc-sz); height: var(--cc-sz); border-radius: 50%; flex: none;
  display: grid; place-items: center;
  box-shadow: 0 0 0 var(--cc-ring) var(--cd-pan); position: relative;
  color: #fff; font-size: 9.5px; font-weight: 700; overflow: hidden;
  animation: cdWave 3.4s ease-in-out infinite; animation-delay: var(--dly, 0s);
}
.cd-cc + .cd-cc { margin-inline-start: calc(var(--cc-lap) * -1); }
.cd-cc svg { width: 100%; height: 100%; display: block; }
/* الخاوية: طوقٌ مرقّطٌ بلا سطح — تموج كأخواتها فيبقى الصفّ حيًّا ولو خلا */
.cd-cc--ph {
  background: none; border: 1.5px dashed var(--ph-ink);
  box-shadow: none;
}
.cd-cc--more {
  background: var(--cd-surf); color: var(--u-mut);
  font-family: 'KFUPM Display', sans-serif; font-size: 8px;
  box-shadow: 0 0 0 var(--cc-ring) var(--cd-pan);
}
@keyframes cdWave {
  0%, 100% { transform: translateX(0) }
  30% { transform: translateX(3px) }
  65% { transform: translateX(-2px) }
}
/* تقليل الحركة شرطٌ لا تحسين */
@media (prefers-reduced-motion: reduce) {
  .cd-cc, .cd-here__n { animation: none !important; transform: none !important; }
}
/* الزيارات والتعليقات: أيقونةٌ ورقمها */
.cd-stat { display: inline-flex; align-items: center; gap: 5px; }
.cd-stat svg { width: 14px; height: 14px; flex: none; opacity: .75; }
.cd-stat b { color: var(--cd-tx); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* ولكلّ خبرٍ مقابضُه بعد أن تفرّقت مواضعُها: الصَّيحةُ والوِردةُ في كعب الختم (فتصغُران
   لأنّهما داخلَ جسمٍ صغير)، والمشاهداتُ والتعليقاتُ في ركن التذييل (فتبقيان بقدّهما) */
.cd-stat--warn { gap: var(--wn-gap); }
.cd-stat--warn svg { width: var(--wn-ic); height: var(--wn-ic); }
.cd-stat--warn b { font-size: var(--wn-num); }
.cd-stat--props { gap: var(--pr-gap); }
.cd-stat--props svg { width: var(--pr-ic); height: var(--pr-ic); }
.cd-stat--props b { font-size: var(--pr-num); }
.cd-stat--eye { gap: var(--ey-gap); }
.cd-stat--eye svg { width: var(--ey-ic); height: var(--ey-ic); }
.cd-stat--eye b { font-size: var(--ey-num); }
.cd-stat--cmt { gap: var(--ch-gap); }
.cd-stat--cmt svg { width: var(--ch-ic); height: var(--ch-ic); }
.cd-stat--cmt b { font-size: var(--ch-num); }
.cd-stat--dl { gap: var(--dl-gap); }
.cd-stat--dl svg { width: var(--dl-ic); height: var(--dl-ic); }
.cd-stat--dl b { font-size: var(--dl-num); }
/* ===== ورموزُ الركن وحدَها بحبرها كاملًا =====
   ‎.cd-stat svg‎ يخفت إلى ‎.75‎ حيثما وقع، وكعبُ الختم يبقى عليه (رموزُه ‎8px‎ في جسمٍ
   صغير فالخفوتُ يليق بها). وأمّا الركنُ فنزل رمزُه إلى ‎11px‎ فصار الخفوتُ ضبابًا —
   خطُّه عند هذا القدّ أرقُّ من أن يُنقص منه. فيُستثنى وحدَه ولا تُنقض القاعدةُ على الكلّ */
#card-modal :is(.cd-foot, .xt-info) .cd-stats .cd-stat svg { opacity: var(--stat-op); }
/* ونَقْرُ الحبر: الرمزُ والمربّعُ يرتفعان نصفَ بكسلٍ ليستويا مع سطر الرقم.
   و‎top‎ لا ‎translateY‎: المتحوَّل يجعل العنصرَ **جذرَ ضباب** فيقتل ما تحته من
   ‎backdrop-filter‎ — قاعدةٌ مقرَّرةٌ في هذا الملفّ لا تُنقض لنصف بكسل */
#card-modal :is(.cd-foot, .xt-info) .cd-stats .cd-stat svg { position: relative; top: var(--ic-dy); }
/* ===== وحكمُ الجواب صار بدنين، فذهب مربّعُه =====
   كان مربّعين ملوّنين معايَرين في ‎news-corner-lab#s3‎ (حدٌّ مصمتٌ وحشوٌ إلى الرُّبع).
   ثمّ وُحِّد الخبرُ مع الشجرة: خبرُ الناس بدنان وشارةٌ (‎CX_ANS_IC‎)، والمربّعُ محجوزٌ
   لحكمك أنت وحدَه (‎.cx-me__b‎). فذهب المربّعُ ههنا وذهبت معه توكناتُه الثلاثة
   (‎--ans-sq‎ و‎--ans-bw‎ و‎--ans-r‎)، وبقي رقمُه وفجوتُه.
   والرمزُ يرث الآن ما ترثه إخوتُه: مقاسَ ‎.cd-stat svg‎ وخفوتَ ‎--stat-op‎ ونُدبةَ ‎--ic-dy‎ */
/* ===== وبدَنا الحكم يُصبغان: الصوابُ أخضرُ والخطأُ أحمر =====
   الشارةُ في ثُلمة الكتف تفرّق بينهما شكلًا (صحٌّ ⇄ ضربٌ)، وزِيد اللونُ عليها بحكم
   صاحب الموقع: القارئُ يمسح صفًّا من الأرقام فيلتقط اللونَ قبل أن يقرأ الشكل.
   والصبغةُ على **الرمز وحدَه** لا على رقمه: العددُ يبقى بحبر الشريط كإخوته، فيُقرأ
   الصفُّ عمودًا واحدًا من الأرقام ولا يتلوّن سطرًا سطرًا.
   والتوكنان هما توكنا الموقع (‎--cd-sync‎ و‎--cd-wrong‎) لا صبغتان تُكتبان، ومعهما
   بديلٌ صريح: الشجرةُ تُرسم في مواضعَ لا يبلغها حاملُ توكنات البطاقة */
.cd-stat--ok { color: var(--cd-sync, #4e9d57); }
.cd-stat--no { color: var(--cd-wrong, #c0455f); }
/* ===== وأختاهما في الشجرة نزلتا إلى كتلة ‎.cs-i‎ في آخر الملفّ =====
   كانتا ههنا (‎.cs-i--ok‎ و‎.cs-i--no‎)، وقدرُهما قدرُ ‎.cs-i‎ نفسِه — صنفٌ واحدٌ بإزاء
   صنفٍ واحد. و‎.cs-i { color: var(--u-lab) }‎ بعدهما بأربعة آلاف سطر، فيغلبهما
   **الترتيبُ** لا القدر: تُطلى بدَنا الحكم في الشجرة بحبر التسمية فيبيضّان.
   ولا يقع هذا في التذييل: ‎.cd-stat‎ لا لونَ فيها أصلًا، فأختاهما فوق باقيتان.
   فتسكنان حيث تسكن ‎--warn‎ و‎--props‎: **بعد** الأصل لا قبله */
.cd-stat--ans { gap: var(--ans-gap); }
.cd-stat--ans b { font-size: var(--ans-num); }

/* ============================================================
   كعبُ الختم: «الصَّيحة» و«الوِردة» تسكنانه (‎seal-guest-lab#d‎)
   ============================================================
   كانتا في شريط الأخبار مع المشاهدات والتعليقات، فصارتا **حجرةً ثالثةً في طرف الختم**.
   والحجّةُ أنّ الثلاثةَ خبرٌ عن **هذه النسخة بعينها**: رقمُها، ومَن شكّ فيها، ومَن عرض
   عليك تعديلَها — فجمعُها في صندوقٍ واحدٍ جمعُ ما يجتمع في المعنى، وتخفّ الترويسةُ بهما.
   وجُرّب قبله «الطابقان» فرُدّ: يطول الختمُ رأسيًّا فيعلو صفَّ الترويسة وينكسر قدُّ
   الأزرار والحضور معه. وهذا يحفظ الصفَّ الواحد.
   ===== وحسابُه مشتقٌّ من الطوقين لا مكتوبٌ بيده =====
   ‎--stub-in‎: الطوقُ يُرسم عند ‎--sl-ins‎ من حدّ العلبة بسُمك ‎1‎، فجوفُه يبدأ عند
   ‎--sl-ins + 1‎، وجوفُ الحدّ يبدأ عند ‎--sl-bw‎ ⇐ فالفرقُ هو ما يلزم الكعبَ أن ينكمشه
   ليبقى **داخل الطوق** لا داخل الحدّ وحدَه. ويُقرأ في الجهات الثلاث.
   و‎--stub-r‎: انحناءُ الكعب يتبع انكماشَه، وإلّا خرج قوسُه عن قوس الطوق في الأركان.
   ===== وسطحُه وخطّاه من ‎--id-c‎ لا من ‎currentColor‎ =====
   الكعبُ داخلَ الختم، والختمُ يلبس حالَ النسخة (أخضرُ · برتقاليٌّ · ذهبيٌّ · رماديّ) —
   فحقُّ الصندوق أن يتبعه، فإذا تبدّل حالُ النسخة تبدّل كلُّه معًا.
   و‎currentColor‎ **لا تصلح ههنا**: التوكنُ يُورَّث، فيُستبدَل عند مَن يقرؤه لا عند مَن
   كتبه — وخطُّ الضيفين مكتوبٌ على الوِردة (وحبرُها ذهب)، فيأخذ ذهبَها بينما يأخذ جارُه
   (خطُّ الكعب) لونَ الختم: خطّان في صندوقٍ واحدٍ بلونين والعينُ تسأل عن الفرق فلا تجده.
   و‎--id-c‎ لونٌ صريحٌ يُحسب مرّةً على كتلة الهويّة، فيقوله الخطّان جميعًا.
   والخطُّ **ليس خبرًا**: الخبرُ الرمزُ والرقم، والخطُّ حدُّ خانةٍ من خانات الختم */
.cd-stub {
  --stub-in: calc(var(--sl-ins) - var(--sl-bw) + 1px + var(--stub-gap));
  --stub-r: calc(var(--sl-r2) - 1px - var(--stub-gap));
  --sl-line: color-mix(in srgb, var(--id-c) 40%, transparent);
  display: inline-flex; flex-direction: row; align-items: stretch; gap: 0;
  padding-inline: var(--stub-ps) var(--stub-pe);
  margin-block: var(--stub-in); margin-inline-end: var(--stub-in);
  /* والفاصلُ مصمتٌ لا مرقَّط: الصندوقُ واحدٌ في القراءة، فالخرمُ يقول انفصالًا لا يقع.
     والمصمتُ يقول «خانةٌ أخرى في الشيء نفسِه» — وهو الصواب */
  border-inline-start: 1px solid var(--sl-line);
  background: color-mix(in srgb, var(--id-c) 9%, transparent);
  /* وطرفُه الخارجُ يستدير بانحناء **جوف** الحدّ، وإلّا نتأت زاويتاه عن قوس الختم.
     ولم يُقصّ الختمُ بـ‎overflow‎: القصُّ يقطع ما قد يخرج عمدًا يومًا (شارةٌ أو ذيل) */
  border-start-end-radius: var(--stub-r);
  border-end-end-radius: var(--stub-r);
}
/* ولا انحناءَ في جوفه: حَشْوُ المرور في الخبر مستديرٌ ليُقرأ حبّةً، والحدُّ يتبع انحناءَ
   عنصره — فكان الخطُّ بينهما يخرج مقوَّسَ الطرفين لا مستقيمًا. وفي الكعب لا حبّةَ تُرسم */
.cd-stub .cd-stat {
  margin: 0; align-items: center; border-radius: 0;
  padding-inline: calc(var(--sl-dng) / 2);
}
.cd-stub .cd-stat:first-child { padding-inline-start: 0; }
.cd-stub .cd-stat:last-child { padding-inline-end: 0; }
.cd-stub .cd-stat + .cd-stat { border-inline-start: 1px solid var(--sl-line); }
/* والرقمُ يُقاس بما يُرسم لا بحجم خطّه، ويُزاح نزولًا ليلتقي مركزُ حبره بمركز رمزه:
   الرقمُ يجلس على خطّ الأساس ولا نزولَ له، فحبرُه يشغل أعلى الصندوق —
   ‎(الصعود − النزول)/2 − نصفُ ارتفاع الرقم ≈ 0.07em‎. وبالوحدة النسبيّة فتتبع الإزاحةُ خطَّه */
.cd-stub .cd-stat b { line-height: 1.35; translate: 0 .07em; }
/* وخفوتُ الخاليتين يُقرأ من داخل الكعب: لا حبرَ للشريط ههنا بل حبرُ الختم */
.cd-stub .cd-stat.is-none { color: inherit; }
.cd-stub .cd-stat.is-none b { color: inherit; }
/* ===== «الصَّيحة»: كهرمانيّةٌ حين تُرفع، وساكنةٌ حين لا شيء =====
   الكهرمانيُّ لونُ إنذار، ولونُ الإنذار على صفرٍ دائمٍ يكذب — فتلبسه حين يكون له سببٌ
   وحدَه. وحبرُها مصمتٌ لا ‎.75‎ كأختيها: هي وحدَها من الثلاث تطلب عينًا، والأختان خبرٌ
   يُقرأ عند الحاجة. فإذا خلت عادت إلى حبر الشريط وإلى شفافيّة أختيها سواءً بسواء،
   فلا يُرى في الشريط إنذارٌ ما لم يُنذر أحد */
.cd-stat--warn { color: var(--cd-warn, #d1791f); }
.cd-stat--warn svg { opacity: 1; }
.cd-stat--warn b { color: var(--cd-warn, #d1791f); }
.cd-stat--warn.is-none { color: inherit; opacity: .55; }
.cd-stat--warn.is-none svg { opacity: .75; }
.cd-stat--warn.is-none b { color: var(--cd-tx); }
/* ============================================================
   ونصُّ الصَّيحة ينفتح بمرور الماوس (‏‎cd-warnb‎)
   ============================================================
   الصَّيحةُ صارت زرًّا، فتُنزع عنها هيئةُ الأزرار ويبقى جسمُها كما كان — وهو صنيعُ
   «الوِردة» (‎.cd-stat--props‎) في هذا الكعب سواءً بسواء، فلا يفترق الجاران.

   ===== والانفتاحُ بـ‎0fr ⇐ 1fr‎ لا بسقفٍ يُكتب =====
   ‏‎max-width‎ يلزمه رقمٌ فوق عرض الكلمة، فتُقاس الحركةُ على السقف لا على الكلمة:
   تنفتح مسرعةً ثمّ تقف قبل نهاية الزمن، ويتبدّل إيقاعُها بتبدّل النصّ أو اللغة.
   وعمودُ الشبكة ‎1fr‎ يبلغ **عرضَ الكلمة نفسِه**، فالحركةُ تنتهي حين تنتهي الكلمة —
   والابنُ ‎overflow: hidden‎ فيُقَصّ ما لم يخرج بعد.

   ===== وتُلغى فجوةٌ واحدةٌ ما دام مطويًّا =====
   ‏‎.cd-stat--warn‎ صفٌّ فجوتُه ‎--wn-gap‎، والنصُّ عضوٌ ثالثٌ بينهما — فحين يُطوى إلى
   صفرٍ تبقى فجوتاه فيتباعد الرمزُ عن الرقم بضِعف ما كان. فيُلغى قدرُ فجوةٍ بهامشٍ سالبٍ
   يعود إلى الصفر عند الانفتاح، فيستوي المطويُّ بما كان قبل أن يوجد الزرُّ أصلًا.

   ===== وحبرُه كهرمانيٌّ ولو كان العدّادُ صفرًا =====
   الصَّيحةُ الخاليةُ تخفت (‎is-none‎) لأنّ إنذارًا على صفرٍ يكذب — والنصُّ ليس إنذارًا
   بل **دعوةٌ إلى فعل**، ولا تُدعى العينُ إلى ما لا تراه. فيُصرَّح بلونه، ويستيقظ الزرُّ
   كلُّه عند المرور */
/* والجلدُ يُعمَّم على الوِردة معها: كلتاهما زرٌّ في كعبٍ واحدٍ ونصُّه ينفتح بالمرور.
   ولو أُفرد لكلٍّ جلدٌ لَافترقا عند أوّل تعديل — وهي علّةُ توحيدهما من قبل */
:is(.cd-stat--warn, .cd-stat--props) {
  font: inherit; cursor: pointer; border: 0; background: none;
  transition: background .15s, opacity .15s;
}
.cd-wtx {
  display: grid; grid-template-columns: 0fr; opacity: 0;
  margin-inline-start: calc(var(--wn-gap) * -1);
  transition: grid-template-columns var(--wn-tx-d) cubic-bezier(.34, 1, .64, 1),
              opacity calc(var(--wn-tx-d) * .7) ease,
              margin-inline-start var(--wn-tx-d) cubic-bezier(.34, 1, .64, 1);
}
.cd-wtx > span {
  overflow: hidden; white-space: nowrap; min-width: 0;
  font-size: var(--wn-tx); font-weight: 700; line-height: 1.35;
  color: var(--cd-warn, #d1791f);
}
:is(.cd-stat--warn, .cd-stat--props):hover .cd-wtx,
:is(.cd-stat--warn, .cd-stat--props):focus-visible .cd-wtx { grid-template-columns: 1fr; opacity: 1; margin-inline-start: 0; }
.cd-stat--warn:hover { background: color-mix(in srgb, var(--cd-warn, #d1791f) 13%, transparent); }
.cd-stat--warn.is-none:hover { opacity: 1; }
/* ونصُّ الوِردة ذهبيٌّ لا كهرمانيّ: الذهبُ في هذا الموقع «هذا هو المقصود»، والوِردةُ
   دعوةٌ إلى فعلٍ نافعٍ لا إنذار. وفجوتُها ‎--pr-gap‎ لا ‎--wn-gap‎ فيُلغى قدرُها هي */
.cd-stat--props .cd-wtx { margin-inline-start: calc(var(--pr-gap) * -1); }
.cd-stat--props .cd-wtx > span { color: var(--u-gold); }
/* والمعطَّلةُ تبقى ساكنةً: زرٌّ في البنية لا بابَ له، فلا ينفتح نصُّه ولا يُدعى إليه */
.cd-stat--props:disabled { cursor: default; }
.cd-stat--props:disabled .cd-wtx { grid-template-columns: 0fr; opacity: 0; }
/* والحيَّةُ لا تخفت ولو كان عدّادُها صفرًا: «اقترح تحديث» بابٌ مفتوحٌ وإن لم يُقترح أحد */
.cd-stat--props.is-live.is-none { opacity: 1; }
.cd-stat--props.is-live.is-none svg { opacity: 1; color: var(--u-gold); }
/* ومن نبّه: رمزُه مصمتٌ وإن كان العدّادُ واحدًا — «هذا بلاغُك أنت» */
.cd-stat--warn.is-mine svg { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cd-wtx { transition: none; } }
/* ===== «الوِردة»: زرٌّ في صفّ أخبار — جلدُ زرّ التعليقات نفسُه =====
   هي وزرُّ التعليقات الاثنان الوحيدان اللذان يُضغطان في هذا الصفّ، فيلبسان جلدًا واحدًا
   (‎.cd-stat--cmt‎ في آخر الملفّ): تُنزع عنهما هيئةُ الأزرار ويبقى حوضُ المرور وحدَه.
   ولو أُفرد لكلٍّ جلدٌ لَافترقا بعدُ عند أوّل تعديل.
   والذهبيُّ لِما ينتظرك: ‎--cd-warn‎ صار للصَّيحة و‎--cd-sync‎ لـ«استقرّت»، فبقي ذهبُ
   الهويّة — وهو في هذا الموقع علامةُ «هذا هو المقصود» لا حالٌ من أحوال النشر.
   وخاويةً تخفت كالصَّيحة سواءً بسواء: لا يُرى في الشريط نداءٌ ما لم ينادِ أحد */
.cd-stat--props {
  font: inherit; cursor: pointer; border: 0; background: none; color: var(--u-gold);
  padding: 3px 7px; margin: -3px -4px; border-radius: 8px;
  transition: background .15s, color .15s;
}
.cd-stat--props svg { opacity: 1; }
.cd-stat--props b { color: var(--u-gold); }
.cd-stat--props:hover { background: var(--u-gold-hov, rgba(225, 193, 114, .14)); }
/* والمعطَّلُ لا مؤشّرَ له ولا حوضَ مرور: زرٌّ في البنية، ساكنٌ في اليد حتى يوجد ما يُفتح */
.cd-stat--props.is-none { color: inherit; opacity: .55; cursor: default; }
.cd-stat--props.is-none svg { opacity: .75; }
.cd-stat--props.is-none b { color: var(--cd-tx); }
.cd-stat--props.is-none:hover { background: none; }
/* ===== ختم النسخة — منقولٌ بمقاساته وألوانه عن «د · الختم» في version-signal-lab =====
   مربّعٌ مزدوج الطوق مائلٌ أربع درجات، كختم التملّك على المخطوط: «هذه نسختي» */
.cd-seal {
  width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center;
  border: 2px solid var(--u-pet, #2c5e65); position: relative; color: var(--u-pet, #2c5e65);
  font-family: 'KFUPM Display', sans-serif; line-height: 1; transform: rotate(-4deg);
}
html[data-theme="dark"] .cd-seal { border-color: #6fb0b6; color: #8fd0d6; }
.cd-seal::before {
  content: ''; position: absolute; inset: 3px; border: 1px solid currentColor;
  border-radius: 6px; opacity: .45;
}
/* المساحة داخل الطوق الداخليّ ‎22px‎ فقط (‎32‎ ناقصَ حدَّين ‎2px‎ وإزاحتَين ‎3px‎)،
   فالنصّان يُقاسان عليها لا على المربّع كلّه — وإلّا لامسا الطوق */
.cd-seal em { font-style: normal; font-size: 6px; opacity: .8; display: block; margin-bottom: 0; letter-spacing: -.2px; }
.cd-seal b { font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* صدرت نسخةٌ أحدث: يبهت الختم رماديًّا كورقةٍ قديمة — القِدَم يُرى قِدَمًا */
.cd-seal.is-old { filter: grayscale(1); opacity: .42; }

/* ══════ ختمٌ ذو مِفصَل + مروحةُ النسخ (الاتجاهان «ل» و«ب» من ‎version-pick-lab‎) ══════
   الرقم خبرٌ لا يُضغط، والمِقبض وحده يُضغط — فلا تنبسط المروحة بضغطةٍ عابرة على الرقم،
   ويبقى الرقم نصًّا يُحدَّد ويُنسخ. والميلُ يذهب: مربّعٌ صغير مائل يُقرأ ختمًا، ومستطيلٌ مائل يُقرأ خللًا */
.cd-vanch { position: relative; display: inline-flex; align-items: center; }
/* ===== والختمُ صار سطرًا واحدًا («نسخة ٣») لا طابقين (‎head-crowd-lab#n‎) =====
   الطابقان يطيلانه رأسيًّا فيعلو صفَّ الترويسة كلَّه ويكسر قدَّ الأزرار والحضور معه.
   والسطرُ الواحد يحفظ الصفَّ ‎22px‎، ويسع الكعبَ (الصَّيحةَ والوِردة) في طرفه بلا أن يطول.
   وأرقامُه معايَرةٌ لا مقارَبة، والقاعدةُ الحاكمة: **نصفُ قطر الطوق الداخليّ = نصفُ قطر
   الخارجيّ ناقصَ إزاحتَه** (‎6.5 − 3 = 3.5‎) — وأيُّ افتراقٍ يزيح الطوقَ فيُحسّ ولا يُعلَّل */
.cd-seal2 {
  display: inline-flex; align-items: stretch; position: relative;
  flex-direction: row; min-height: var(--sl-h);
  border: var(--sl-bw) solid var(--u-pet, #2c5e65); border-radius: var(--sl-r);
  color: var(--u-pet, #2c5e65);
  font-family: 'KFUPM Display', sans-serif; line-height: 1;
}
.cd-seal2::before {
  content: ''; position: absolute; inset: var(--sl-ins); border: 1px solid currentColor;
  border-radius: var(--sl-r2); opacity: .4; pointer-events: none;
}
/* ===== لون الختم = حال الحلقة =====
   الختم لا يحمل لونًا خاصًّا به: هو والحلقةُ يقولان الشيء نفسه، فيقولانه بلونٍ واحد.
   أخضرُ السحابة لِما استقرّ عند الناس · وبرتقاليُّ سهم النشر لِما في يدك ولم يصل أحدًا
   · ورصاصيٌّ لِما مضى. والحدُّ والحبرُ والطوقُ تتبع ‎currentColor‎ معًا */
.cd-seal2.is-sync { border-color: var(--cd-sync); color: var(--cd-sync); }
.cd-seal2.is-pend { border-color: var(--cd-pend); color: var(--cd-pend); }
.cd-seal2.is-old { border-color: var(--cd-old); color: var(--cd-old); }
/* لم تنزل بعدُ: ذهبيٌّ كحلقة الإنزال — الذهبُ في هذه النافذة معناه «فعلٌ لم يقع» */
.cd-seal2.is-new { border-color: var(--u-gold); color: var(--u-gold); }
/* «نسخة» ورقمُها يُتوسّطان بين المِفصَل والطوق كذلك — لا بين المِفصَل وحافّة المستطيل.
   فرقُ الحَشْوين ‎2.5px‎ يقابل ما يقتطعه الطوق من الطرف الخارجيّ، والمجموع كما كان */
/* والسهمُ صار في الصدر (يمينًا) والرقمُ بعده، فانقلب طرفاهما الخارجيّان:
   حَشْوُ الرقم المقابلُ للطوق انتقل إلى ‎inline-end‎ وحَشْوُ السهم إلى ‎inline-start‎ */
.cd-seal2__v {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: var(--sl-gap); padding: 0; padding-inline: var(--sl-ps) var(--sl-pe);
}
/* ===== وههنا كانت العلّةُ كلُّها: ‎line-height: 1‎ =====
   يضيق بها السطر، فيصير **صندوقُ السطر أصغرَ من الحرف المرسوم**: الخطُّ العربيُّ يرسم
   صعودًا ونزولًا يبلغان ‎≈1.35‎ من الحجم، والصندوقُ ‎1.0‎ — فالفائضُ يُرسم **خارج** ما
   يقيسه التخطيط، فيركب الحرفُ الطوقَ ولا يُجدي حشوٌ ولا حدٌّ أدنى (كلاهما يُحسب على
   صندوقٍ يكذب). فصار السطرُ يسع حرفَه، فيصير المقيسُ هو المرسوم */
.cd-seal2__v em { font-style: normal; font-size: var(--sl-em); line-height: 1.35;
  opacity: .85; letter-spacing: -.2px; }
.cd-seal2__v b { font-size: var(--sl-num); line-height: 1.35; font-weight: 700;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
/* ===== وحبرُ الاثنين يُردّ إلى مركز الختم =====
   ‎align-items: center‎ توسّط **الصناديق** لا الحبر. وصندوقُ السطر يسع صعودَ الخطّ ونزولَه
   جميعًا، والحبرُ المرسومُ فيه لا يملأه:
     · الرقمُ (‎1.0‎) أرقامٌ لا نزولَ لها، فحبرُه يشغل أعلى الصندوق — مقيسًا: **يعلو مركزَ
       الختم بـ‎1.00px‎** عند ‎9px‎، أي ‎0.11em‎.
     · و«نسخة» عربيّةٌ ذاتُ نزول، فحبرُها ينزل — مقيسًا: **دون المركز بـ‎0.51px‎** عند
       ‎7px‎، أي ‎0.07em‎.
   فبينهما ‎1.5px‎، وهو الذي يُرى: الرقمُ مرتفعٌ قريبٌ من الحافّة العليا.
   فيُزاح كلٌّ إلى المركز بمقداره — **ولا يُحاذى أحدُهما بالآخر**: تلك تُسوّيهما وتُبقيهما
   معًا زائغين عن جوف الطوق.
   وبالوحدة النسبيّة (‎em‎) لا بالبكسل: النسبةُ ثابتةٌ في الخطّ الواحد، فتتبع الإزاحةُ
   ‎--sl-num‎ و‎--sl-em‎ في كلّ معايرة — والمصغَّرُ في المروحة يرثها بخطّه نفسِه.
   (وهي القاعدةُ عينُها التي على رقم الكعب، وخطُّه غيرُ هذا فرقمُه غيرُ رقمه)
   ===== ولا تُزاح «نسخة»: حدُّ حبرها يكذب =====
   جُرّبت لها إزاحةٌ تردّ حدودَ حبرها إلى المركز (‎-0.07em‎) فرُدَّت — وحدودُ الحبر في
   العربيّة ليست مقياسًا للعين: تعلوها **نقاطُ الحروف** وينزل بها **قوسُ الخاء**، فهي
   تصف أقصى ما رُسم لا أين يقع ثقلُ الكلمة. والثقلُ في العربيّة عند خطّ الأساس وما فوقه
   بقليل، فمحاذاةُ الحدود ترفع الكلمةَ عن موضعها الذي تُقرأ فيه.
   ومقيسًا: بمحاذاة الحدود صار **خطُّ أساس الكلمة أعلى من خطّ أساس الرقم بـ‎2px‎** —
   فتطفو فوقه وإن تساوى مركزا صندوقيهما.
   ===== فالمحاذاةُ **خطُّ أساسٍ واحد** لا مركزٌ بمركز =====
   «نسخة ٣٫٠» عبارةٌ واحدةٌ تُقرأ في سطر، والسطرُ يقوم على خطّ أساسه. وتوسيطُ الصناديق
   (‎align-items: center‎) يُجلس كلَّ واحدٍ على خطٍّ غير خطّ أخيه — لأنّ قدَّيهما مختلفان
   (‎--sl-em‎ و‎--sl-num‎) **وخطّاهما مختلفان**: الرقمُ بخطّ الهويّة، والعربيّةُ تسقط إلى
   خطّ المتن إذ لا عربيّةَ في خطّ الهويّة. فيفترق الأساسان.
   ولا يُحلّ بـ‎align-items: baseline‎: تلك تُلصق الأساسين ثمّ تدفع الاثنين إلى رأس
   الصندوق، فيصعد النصُّ كلُّه عن وسط الختم.
   فيبقى **الرقمُ** هو المُتوسِّط (وهو الأثقلُ حبرًا فيُقرأ مرساةً)، وتنزل الكلمةُ إليه.
   ===== وموضعُها الأخير حكمُ عينٍ بين حدَّين مقيسين =====
   الحسابُ يعطي مقامين، وكلاهما **جُرّب فرُدّ** بعينِ صاحب الموقع:
     · ‎-0.07em‎ — محاذاةُ حدود الحبر (مركزُ ما رُسم على مركز الختم): رُئيت **مرتفعة**،
       إذ نقاطُ الحروف تشدّ الحدَّ الأعلى فيُرفع معه ثقلُ الكلمة.
     · ‎+0.21em‎ — محاذاةُ خطّ الأساس (تجلس الكلمةُ على سطر الرقم): رُئيت **نازلةً كثيرًا**،
       إذ قوسُ «الخاء» ينزل تحت السطر فيثقل أسفلَها.
   فالصوابُ بينهما، والمنتصفُ ‎0.07em‎ — نصفُ بكسلٍ نزولًا عن مقامها الطبيعيّ.
   وهو **رقمُ عينٍ لا رقمُ حساب**، والحدّان مكتوبان أعلاه ليُعرف إلى أين يُدار إن أُريد */
.cd-seal2__v b { translate: 0 .11em; }
.cd-seal2__v em { translate: 0 .07em; }
/* ===== وبلا سهمٍ يتوسّط النصُّ في جوفه =====
   حَشْوا النصّ غيرُ متساويين **عمدًا**: البادئُ (‎--sl-ps‎) فجوةٌ بينه وبين **السهم**،
   والمنتهي (‎--sl-pe‎) فجوةٌ بينه وبين جاره في الطرف الآخر (خيطُ الكعب أو الطوق).
   فإذا رُفع السهمُ — وذلك في نافذة الوجه، وفي بطاقةٍ لم تنزل بعدُ فلا سجلَّ لها — صار
   البادئُ فجوةً إلى **حافّة الطوق**: ‎0.5px‎ مقيسةً، فيلتصق الحرفُ بالطوق ويميل النصُّ
   كلُّه إلى المبدأ.
   والعلاجُ أن يُقاس الحَشْوُ إلى ما يجاوره حقًّا لا إلى حافّة الصندوق:
     · **جوفُ الطوق يبدأ داخلَ جوف الختم** بمقدار ‎--sl-ins + 1‎ (إزاحةُ الطوق وسُمكُه)،
       فيُزاد ذلك على الحَشْو حتى يستوي الفراغُ المرئيُّ مع أخيه — ‎9.5‎ ههنا و‎9.5‎ هناك.
     · فإن لم يكن ثَمّ كعبٌ فجارُ الطرفين واحدٌ (الطوقُ نفسُه)، فيستوي الحَشْوان بلا زيادة.
   والزيادةُ **محسوبةٌ من مقابض الختم** لا رقمًا يُذاق: من عايَر الطوقَ تبعه النصُّ.
   ولا يُمَسّ المصغَّرُ في المروحة: حدُّه وطوقُه وقدُّه أصغر، فله حسابُه */
.cd-seal2:not(.cd-seal2--mini):not(:has(.cd-seal2__b)) .cd-seal2__v {
  padding-inline-start: var(--sl-pe);
}
.cd-seal2:not(.cd-seal2--mini):not(:has(.cd-seal2__b)):has(.cd-stub) .cd-seal2__v {
  padding-inline-start: calc(var(--sl-pe) + var(--sl-ins) + 1px);
}
/* ===== ورُفع الخيطُ القائم بين السهم و«نسخة» =====
   صار في الختم كعبٌ يفصله خطٌّ، فلو بقي هذا لَاجتمع في صندوقٍ واحدٍ فاصلان لمعنيين
   مختلفين. والسهمُ لا يحتاج خيطًا يعزله: حشوُه وحشوُ الرقم بعده يفصلان بالفراغ،
   والفراغُ أخفُّ من خطّ. فبقي في الختم فاصلٌ واحدٌ له معنًى واحد */
.cd-seal2__h { display: none; }
/* السهم يُتوسَّط بين **المِفصَل والطوق الداخليّ** لا بين المِفصَل وحافّة المستطيل:
   الطوق يجلس ‎2.5px‎ داخل الحدّ، فلولا حَشْوٌ يقابله لَبدا السهم مائلًا إلى الخارج.
   والحَشْو على الطرف الخارجيّ وحده (‎inline-end‎ في العربيّة = اليسار) */
/* ولونُه لونُ الختم نفسِه: أخضرُ إن استقرّت · برتقاليٌّ إن كان عندك تعديل · أبيضُ لِما مضى
   · ذهبيٌّ قبل النزول. و‎inherit‎ لا قائمةُ ألوانٍ ثانية تُكتب له، وإلّا افترق العضوان
   في الحال الواحدة كما افترقا يومًا. والمرورُ يُخفت ولا يُذهّب: التذهيبُ لونٌ خامسٌ ينقض الخبر */
.cd-seal2__b {
  width: var(--sl-arw); padding: 0; padding-inline-start: var(--sl-arp);
  border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: inherit; transition: .18s;
}
.cd-seal2__b svg { width: var(--sl-aric); height: var(--sl-aric); display: block; transition: transform .18s; }
.cd-seal2__b:hover { opacity: .7; }
/* القلب على **الرسم** لا على الزرّ: الزرّ فيه حَشْوٌ من طرفٍ واحد،
   فدورانُه حول مركزه يقلب الإزاحة إلى الجهة الأخرى فيقفز السهم. والرسمُ متوسّطٌ في جوفه فيدور مكانه */
.cd-seal2.on .cd-seal2__b svg { transform: rotate(180deg); }

/* المروحة: صفوفُها أختامٌ مصغّرة — الشيء نفسه بمقاسٍ أصغر، فتُعرف بلا تعلّم */
.cd-fan {
  position: absolute; top: calc(100% + 9px); inset-inline-start: 50%; transform: translateX(50%);
  z-index: 30; min-width: 186px; padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
  /* بطاقةٌ عُدّلت عشرين مرّة لها عشرون صفًّا: بلا سقفٍ تخرج المروحةُ من الشاشة
     فلا يُبلَغ أقدمُها ولا يُطوى ما فوقه */
  max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--u-surf2, #fff); border: 1px solid var(--u-in-line); border-radius: 13px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}
html[data-theme="dark"] .cd-fan { background: #17313a; box-shadow: 0 12px 30px rgba(0, 0, 0, .55); }
.cd-fanr {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 9px;
  background: none; border: 0; cursor: pointer; text-align: start; font: inherit;
  color: var(--u-mut); font-size: 11.5px;
}
.cd-fanr:hover { background: var(--u-hov); }
.cd-fanr.on { background: var(--u-surf); }
/* ختمُ الصفّ مستطيلٌ كالكبير بلا مِقبضه — صورةٌ عنه لا شكلٌ آخر */
/* والمصغَّرُ يتبع الكبيرَ في هيئته: صار الكبيرُ سطرًا واحدًا فصار مثلَه — ولولا ذلك
   لَقُرئ الشيءُ الواحدُ نظامين في نافذةٍ واحدة. ويخصُّه أنّه بلا مِقبضٍ وبلا كعب،
   وأنّ قدَّه من متنه وحدَه (‎min-height: 0‎) فلا يُفرض عليه قدُّ الكبير */
.cd-seal2--mini { border-width: 1.5px; border-radius: 7px; flex: none; min-height: 0; }
.cd-seal2--mini::before { inset: 2px; border-radius: 5px; }
.cd-seal2--mini .cd-seal2__v { padding: 3px 5px; padding-inline-start: 7px; gap: 3px; }
.cd-seal2--mini .cd-seal2__v em { font-size: 6px; }
.cd-seal2--mini .cd-seal2__v b { font-size: 8.5px; }
/* نسخةٌ كانت ولم يُحفظ نصُّها: تُعرض ولا تُضغط — رقمُها خبرٌ، ولا شيءَ يُستعاد */
.cd-fanr.gone { cursor: default; opacity: .55; }
.cd-fanr.gone:hover { background: none; }
.cd-fanr.gone .cd-fanr__t i { font-weight: 400; font-size: 10.5px; color: var(--u-lab); }
/* «كم مضى» غليظًا فوق — هو ما تبحث عنه العين — والتاريخُ والساعة تحته خافتين */
.cd-fanr__t { min-width: 0; overflow: hidden; }
.cd-fanr__t i { font-style: normal; display: block; font-weight: 700; color: var(--cd-tx); }
.cd-fanr__t em { font-style: normal; display: block; font-size: 10px; color: var(--u-lab);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* مطالعةُ الماضي: شريطٌ فوق الحقلين، والحقلان مقفلان — فلا يُظنّ التحرير قائمًا */
/* ===== إنذارا التخزين =====
   الأحمر: لم يُحفظ ما كتبتَه — يبقى حتى ينجح حفظٌ بعده، فلا يُغلَق ولا يخبو.
   والذهبيّ: نسختك على الجهاز تنتظر ضغطةَ إذن. كلاهما فوق كل شيء لأنّ الخبر لا يحتمل التأجيل */
#sv-alarm, #mir-ask, #cat-new {
  position: fixed; inset-inline: 16px; bottom: 16px; z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-radius: 12px; font-size: 13.5px; line-height: 1.7;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .3); text-align: center;
}
#sv-alarm { background: #c0455f; color: #fff; border: 1px solid #a3364c; }
#sv-alarm a { color: #fff; font-weight: 700; }
/* والثالث: قائمةُ المواد تحدّثت على الخادم. وهو خبرٌ لا إنذار — فبتروليُّ الهويّة
   لا أحمرُ الخطر ولا ذهبيُّ الطلب، ولا يُقاطع عملًا: يُقال ويُنتظر ضغطتُك */
#cat-new { background: var(--c-kfupm, #2c5e65); color: #fff; border: 1px solid rgba(0, 0, 0, .2); }
#cat-new button {
  font: inherit; font-weight: 700; cursor: pointer; padding: 5px 14px; border-radius: 999px;
  border: 0; background: #fff; color: var(--c-kfupm, #2c5e65);
}
#mir-ask { background: var(--u-gold, #c8a44a); color: #14233f; border: 1px solid rgba(0, 0, 0, .18); }
#mir-ask button {
  font: inherit; font-weight: 700; cursor: pointer; padding: 5px 14px; border-radius: 999px;
  border: 0; background: #14233f; color: #fff;
}
/* بطاقةُ النسخة على الجهاز في صفحة الحساب — تخضرّ حين تُوصل، فالحال تُرى لا تُقرأ */
.acct-mir {
  border: 1px dashed var(--u-in-line); border-radius: 12px; padding: 14px 16px; margin-top: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.acct-mir.on { border-style: solid; border-color: #4e9d57;
  background: color-mix(in srgb, #4e9d57 8%, transparent); }
.acct-mir__t { min-width: 220px; flex: 1 1 260px; }
.acct-mir__t b { display: block; font-size: 14px; }
.acct-mir__t span { display: block; font-size: 12px; color: var(--u-mut); margin-top: 2px; }
.acct-mir__b { display: flex; gap: 8px; flex-wrap: wrap; }

/* مطالعةُ الماضي بلا شريطٍ ولا زرّ: الختمُ والحلقةُ يبيّضّان معًا فيُقرأ الحالُ من موضعه،
   والحقلان يخفتان قليلًا فيُحسّ أنّهما للقراءة. والعودةُ بضغطة النسخة الحاليّة في المروحة */
#cd-card.is-past .cd-in { opacity: .82; }

/* صندوق النسخة: سطران وأيقونةٌ مُطوَّقة — «الحالية» فوق و«الأحدث» تحتها */
.cd-vbox {
  display: inline-flex; align-items: center; gap: 9px; padding: 3px 7px 3px 4px;
  background: var(--cd-surf); border: 1px solid var(--cd-winline); border-radius: 8px;
}
.cd-g2 { display: inline-flex; flex-direction: column; gap: 1px; align-items: flex-start; line-height: 1.3; }
.cd-g2 span { font-size: 9.5px; color: var(--u-lab, #7c8ba0); white-space: nowrap; }
.cd-g2 span b { font-size: 10.5px; color: var(--cd-tx); font-weight: 700; }
.cd-g2 span.is-new b { color: var(--u-gold); }
.cd-vbox.off .cd-g2 span.is-new b { color: var(--cd-tx); }
.cd-aic {
  width: 20px; height: 20px; border-radius: 50%; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--u-pet, #2c5e65); color: var(--u-pet, #2c5e65);
  background: none; display: grid; place-items: center;
}
.cd-aic svg { width: 11px; height: 11px; }
.cd-aic.off { border-color: var(--u-line); color: var(--u-lab, #7c8ba0); cursor: default; opacity: .6; }
/* رصيف الوجهة: سطحٌ قائمٌ بذاته تحت البطاقة، والخيط بينهما يقول «هذه تنزل هنا» */
/* ═══════════════════════════════════════════════════════════
   الشريط السفليّ: الوجهةُ وزرُّها — جسمٌ واحدٌ داخل النافذة
   ═══════════════════════════════════════════════════════════
   ‎--ctl‎ ارتفاعُ ما في الشريط من أدوات: يقرؤه الزرُّ والمسارُ معًا فيتساويان **بالبناء**،
   لا برقمين يُضبطان اليوم ويفترقان غدًا إذا تبدّل خطٌّ أو حَشْو */
/* و‎--gapw‎ عرضُ الوصلة: المسارُ يجاور زرَّه ولا يُنفى إلى أقصى الشريط.
   وكانت الفجوةُ كلَّ ما بقي من العرض، فيصير الخيطُ مسافةً تفصل لا وصلةً تربط —
   والقربُ نفسُه رابط، فلا يُطلب من الخيط أن يعوّض بُعدًا صنعناه */
/* الكتلةُ تتوسّط الشريط: زرٌّ ووصلةٌ ومسار جسمٌ واحدٌ في وسط القاع، لا مصفوفةٌ على حافّته.
   والفجوةُ صفرٌ لأنّ الوصلةَ نفسَها هي الفاصل — فتلتصق بطرفيها ولا تطفو بينهما */
/* ===== والتذييلُ شبكةٌ كأخته: ركنان ووسطٌ (‎head-crowd-lab#n‎) =====
   يمينًا درجا الترس والجيب · وفي الوسط الوجهةُ كلُّها (تنزيلٌ · وصلةٌ · مسارٌ · سلّة)
   · ويسارًا المشاهداتُ والتعليقات. والوسطُ يتوسّط النافذةَ بالبناء لا ما فضل من الصفّ.
   والدرجان **عائمان لا عضوان في الصفّ** (مسمَّران بالوضع المطلق أدناه)، فانبساطُ
   أحدِهما لا يزحزح الوسطَ ولا ينقض توسيطَه المعايَر */
/* ===== وحُجزُ الركن مات: صار الدرجان عضوين فيحجزان لأنفسهما =====
   كان الركنُ عائمًا خارج الصفّ فلا يعرف به التخطيطُ ولا يُفسح له، فلزمه أدنًى مكتوبٌ
   بقدر موطئه (‎--dock-w‎ · ‎--gear-w‎). وقد صار عضوًا في الصفّ (‎.cd-dock‎)، فعمودُه يقف
   عند متنه بنفسه — مطويًّا كان أو مبسوطًا. فمات المقبضان ومعهما سؤالُ ‎:has()‎ عن الجيب */
#card-modal .cd-foot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(auto, 1fr) minmax(var(--mid-min), auto) minmax(auto, 1fr);
  align-items: center; justify-content: start; gap: var(--h-gap);
  padding: var(--f-pady) var(--f-padx); min-height: 52px;
}
/* ===== وما دفعه الدرجُ يُقصّ عند الحافّة ولا يطفو =====
   الدرجُ ينبسط كاملًا (بلا سقفٍ محسوب)، فإذا ضاقت النافذةُ دفع كتلةَ الوجهة والنازلَ
   خارجَ جسمها. وقد طُلب أن يقع الدفعُ ولا يُهمّ ألّا تُرى — **لكنّ الطفوَّ فوق العتمة
   ليس عدمَ رؤية**، بل عطلٌ يُرى. فيُقصّ ما خرج.
   ===== و‎clip‎ لا ‎hidden‎ =====
   ‎overflow-x: hidden‎ يجعل الصندوقَ ممرَّرًا فيُرقّى المحورُ الآخرُ إلى ‎auto‎ ويُقصّ
   الرأسيُّ معه — فتُبتلع قائمةُ الوجهات وفقاعةُ التعليقات وهما تتدلّيان.
   و‎clip‎ وحدَها تحفظ ‎visible‎ في المحور الآخر: قصٌّ بلا تمرير.
   ===== ولا يُقصّ إلّا ودرجٌ مفتوح =====
   حالٌ عابرةٌ يقصدها صاحبُها، فلا يُفرض القصُّ على الشريط في سكونه: القائمةُ والفقاعةُ
   تمتدّان أفقيًّا كذلك، فلا تُقيَّدان إلّا في اللحظة التي لا بدّ فيها.
   ===== والوسمُ من الشِّفرة لا بـ‎:has(.on)‎ — لأجل الانطواء =====
   جُرّب ‎:has(.cd-setw.on)‎ فأخفق في الرجعة: صنفُ الفتح يُنزع **بالضغطة**، فيزول القصُّ
   في الحال والشريطُ لم يزل ينطوي ثلاثةَ أعشار الثانية — فتعود الأجسامُ المدفوعةُ ظاهرةً
   **خارج الإطار** طوالَ الانطواء، عائمةً فوق العتمة.
   فصار الوسمُ يُكتب من الشِّفرة (‎cdSetFit‎) ويبقى حتى يتمّ الانطواء: يُوضع مع الفتح،
   ويُرفع بعد الطيّ بزمنه. **وموضعُه المسرحُ لا الشريط**: صنفُ الشريط يُعاد كتابته كاملًا
   في كلّ رسم (حالُ الحلقة)، فما زِيد عليه يُمحى */
#card-modal .cd-stage.is-dock .cd-foot { overflow-x: clip; }
/* وكتلةُ الوجهة في الوسط: صفٌّ واحدٌ لا يلتفّ — والسلّةُ منه لأنّها من فعل الوجهة.
   ولا ‎min-width: 0‎ عليها: بها يقف عمودُ الوسط عند أدنى متنه، فلا تخرج الحلقةُ ولا
   السلّةُ من عمودهما. والانكماشُ يقع في **مستطيل المسار** وحدَه (‎.cd-where‎) — وهو
   مهيَّأٌ له: نصُّه مقصوصٌ مُعلَنٌ قصُّه (‎cdPathFit‎) */
#card-modal .cd-foot .cd-fmid {
  grid-column: 2; justify-self: stretch; min-width: var(--mid-min);
  display: flex; align-items: center; justify-content: safe center; flex-wrap: nowrap;
}
/* والنازلُ ركنٌ في العمود الثالث: خبرٌ **لا يُطلب منك فيه شيء** — نظروا وقالوا —
   فلا يزاحم الهويّةَ في صدر النافذة. وفجوتُه الداخليّةُ أضيقُ ممّا بينه وبين الوسط */
/* ===== وركنُ الأخبار صار عمودًا فيه صفّان =====
   كان صفًّا واحدًا، فصار ‎.cd-stats‎ عمودًا و‎.cd-nrow‎ صفَّه.
   ===== والمحاذاةُ إلى الوسط (‎news-corner-lab‎) =====
   كانت إلى الطرف (‎flex-end‎) خشيةَ أن تتراقص حافّةُ الركن مع كلّ رقمٍ يتبدّل — وذاك
   وهمٌ بان في القياس: **الأوسعُ من الصفّين هو الذي يقيم عرضَ الكتلة**، والكتلةُ
   مسمَّرةٌ بطرفها (‎justify-self: end‎). فحافّتُها الخارجيّةُ ثابتةٌ في النموذجين
   سواءً، والتوسيطُ إنّما يحرّك الأقصرَ **داخلها**.
   ومكسبُه أنّ الصفّين يُقرآن جسمًا واحدًا معلَّقًا على محورٍ واحد لا رايةً على سارية.
   ويبقى شرطُه: أن يظلّ الأعلى أوسعَ — وهو كذلك ما دام ثلاثةَ أخبارٍ في مقابل اثنين */
/* و‎.xt-info‎ موضعٌ ثانٍ للركن (ذيلُ نافذة الاختبار): القسمةُ صفّان، فتُعطى القاعدةَ
   نفسَها لا نظيرةً لها — ولو أُفردت لَافترق الشكلان يومَ يُعايَر أحدُهما */
#card-modal :is(.cd-foot, .xt-info) .cd-stats {
  grid-column: 3; justify-self: end;
  display: inline-flex; flex-direction: column; align-items: center;
  gap: var(--news-rg); margin-inline-start: 0; margin-inline-end: var(--news-off);
}
#card-modal :is(.cd-foot, .xt-info) .cd-nrow {
  display: inline-flex; align-items: center; gap: var(--news-in);
}
/* ===== ورصيفُ الورقة يبقى صفًّا =====
   ورقةُ الملخّص تشارك البطاقةَ شريطَها الأسفل، ومتنُه فيها غيرُ متنه ههنا: عدّادُ أوراقٍ
   ثمّ فاصلٌ يمتدّ (‎.sh-grow‎) ثمّ زرُّ طباعة — وتلك آلةُ صفٍّ لا شبكةِ ثلاثة أعمدة.
   فالترويسةُ تتبع الشكلَ الجديد (وهو ما طُلب) والرصيفُ يُستثنى صراحةً */
#card-modal .cd-foot.sh-foot {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px;
}
/* حالُ الزرّ لونٌ واحدٌ يقرؤه الزرُّ والشَّرَطاتُ معًا — فلا يفترق خيطٌ عن زرِّه أبدًا */
#card-modal .cd-foot { --c: var(--u-gold); }
#card-modal .cd-foot.is-in { --c: var(--cd-sync); }
#card-modal .cd-foot.is-pend { --c: var(--cd-pend); }
#card-modal .cd-foot.is-past { --c: var(--cd-old); }
/* ===== الوصلة: شَرَطاتٌ تبدأ ملاصقةً للزرّ وتمرّ خلف مستطيل المسار =====
   الشَّرطةُ قطعةٌ من خطٍّ مقطوع فتُقرأ امتدادًا، والنقطةُ الدائريّة شكلٌ تامٌّ فتُقرأ حبّةً مستقلّة.
   وطبقتُها تمتدّ إلى أقصى الشريط والمسارُ فوقها بسطحه المعتم — فتختفي **تحته** لا **عنده** */
/* الوصلة: شَرَطاتٌ تلتصق بحافّة الزرّ وتمتدّ عشرين بكسلًا **تحت** المسار — يستُرها سطحُه
   المعتم، فيُقرأ الطريقُ ماضيًا تحته لا واقفًا عنده.
   والشَّرطةُ قطعةٌ من خطٍّ مقطوع فتُقرأ امتدادًا، والنقطةُ الدائريّة شكلٌ تامٌّ فتُقرأ حبّةً مستقلّة */
.cd-wire {
  flex: none; z-index: 0; align-self: center;
  width: calc(var(--gapw) + 20px); margin-inline-end: -20px;
  height: 2px; border-radius: 2px; color: var(--c);
  background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px);
}
/* المستقرّة وحدها تسري: الوصلُ فيها قائمٌ فالنقاطُ تجري في مجراها — والشَّرطةُ تُحسن الوصلَ
   والنقطةُ تُحسن الجريان. والدورةُ تُزاح بمقدار الوحدة بتمامها فتنتهي حيث بدأت بلا وثبة */
#card-modal .cd-foot.is-in .cd-wire {
  height: 6px; border-radius: 0; opacity: .8;
  background: radial-gradient(circle, currentColor 1.7px, transparent 1.8px) 0 50%/11px 6px repeat-x;
  animation: cdFlow 1.15s linear infinite;
}
@keyframes cdFlow { to { background-position-x: -11px } }
@media (prefers-reduced-motion: reduce) { #card-modal .cd-foot .cd-wire { animation: none } }
/* الزرّ: مربّعٌ ناعمُ الحواف · حلقةٌ بحشوةٍ خفيفة · بارتفاع مستطيل المسار.
   ومقاسُه واحدٌ في الأحوال كلِّها — الحالُ خبرٌ يتبدّل، أمّا الزرُّ فشيءٌ واحدٌ يبقى،
   فلا يقفز الشريطُ كلّما تبدّل حالُك. واللونُ والأيقونةُ وحدهما يتبدّلان */
.cd-lnkline { position: relative; z-index: 1; width: var(--ctl); height: var(--ctl); flex: none; }
/* ===== الزرُّ يلبس جِلدَ الختم: طوقان وبلا حشوة =====
   أرقامُ ‎.cd-seal2‎ منقولةً كما هي لا مقارَبةً لها — حدٌّ ‎2px‎ وانحناءُ ‎9px‎، وطوقٌ داخليٌّ
   عند ‎inset:2.5px‎ بحدٍّ ‎1px‎ وانحناءِ ‎6px‎ وشفافيّةِ ‎.4‎. وفرقُ نصفِ بكسلٍ في الحدّ أو
   بكسلٍ في الانحناء يزيح الطوقَ عن موضعه فيُحسّ ولا يُعلَّل.
   ولا حشوةَ باهتةً تحته: الختمُ شفّاف.
   وجُرّب الجِلدُ نفسُه على **المسار** معه فثقُل الصفّ — فالمسارُ وعاءُ خبرٍ لا خبرٌ بذاته،
   يبقى سطحًا هادئًا بحدٍّ واحد. والجِلدُ الحسن ليس حسنًا في كلّ موضع */
.cd-lnkplus {
  position: relative; box-sizing: border-box; width: 100%; height: 100%; padding: 0;
  border: var(--ring-bw) solid var(--c); border-radius: var(--ring-r);
  background: none; color: var(--c);
  font: inherit; line-height: 1; display: grid; place-items: center;
  cursor: pointer; transition: background .15s;
}
.cd-lnkplus::before {
  content: ''; position: absolute; inset: var(--ring-ins); border: 1px solid currentColor;
  border-radius: var(--ring-r2); opacity: .4; pointer-events: none;
}
/* ============================================================
   شارةُ عدد البطائق — «المروحة» (‎cz-count-lab‎ · الاتّجاه ل)
   ============================================================
   البطاقةُ الواحدة قد تُولّد أكثرَ من سؤال (فراغان برقمين ⇐ بطاقتان)، فيُقال العددُ
   عند **الزرّ الذي يُنزلها**: هناك يقع الفعل، فهناك يُعرف مقدارُه قبل وقوعه.
   وهي على الأنواع الأربعة لا على «الفراغ» وحدَه — وإن كان الوجهان والمتعدّدُ لا
   يجاوزان الواحدةَ أبدًا: **صيغةٌ واحدةٌ لا صيغتان**، فالعينُ تجد الخبرَ في موضعه
   دائمًا ولا تفتّش عن نوع البطاقة لتعرف أين تنظر.
   ===== ولمَ ثلاثُ طبقاتٍ لا رقمٌ وحدَه؟ =====
   الطبقاتُ تميل حول محورٍ **تحت** الشارة فتنفرج كأوراقٍ ممسوكةٍ من طرفها — لا تُزاح
   مستقيمةً ثمّ تُدار. والمحورُ الصحيح هو الذي يجعلها تُقرأ يدًا من ورق.
   وأدقُّ ما فيها **الفاصلُ بلون النافذة** (‎--cd-win‎) بين الطبقات: كرتان بلونٍ واحدٍ
   يتراكبان فيصيران لطخةً واحدة، وبهذا الفاصل تُقرأ الرزمةُ رزمةً. وهو توكنٌ يتبع
   الجلدين فينقلب معهما بلا نسخةٍ ثانية.
   والسقفُ ثلاثُ طبقاتٍ مرئيّة: العينُ لا تعدّ فوق ذلك، والرقمُ يقول الباقي. */
.cd-lnkline .cd-cnt {
  --b-sz: 13px;        /* حجم الشارة */
  --b-fs: 9px;         /* حجم خطّ الرقم */
  --b-w: 1.55;         /* عرضها نسبةً إلى حجمها */
  --b-dx: 8px;         /* إزاحتها أفقيًّا */
  --b-dy: -9px;        /* إزاحتها رأسيًّا */
  --b-op: 1;           /* ظهورها */
  --st-rot: 7deg;      /* ميل الطبقة */
  --st-fade: .2;       /* خفوت ما خلف */
  --st-sep: 1.4px;     /* فاصل الطبقات */
  position: absolute; z-index: 3; display: grid; place-items: center;
  inset-block-start: var(--b-dy); inset-inline-end: var(--b-dx);
  font-size: var(--b-fs); font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1; pointer-events: none; opacity: var(--b-op);
  /* واللونُ يتبع حالَ الزرّ: ذهبيٌّ لِما لم ينزل · برتقاليٌّ لِما فيه تعديل · أخضرُ
     لِما استقرّ. فالشارةُ من الزرّ لا شيءٌ عُلّق عليه */
  --bg: var(--c); --fg: #14233f;
}
.cd-cnt__f, .cd-cnt__l {
  box-sizing: border-box; height: var(--b-sz); min-width: calc(var(--b-sz) * var(--b-w));
  border-radius: calc(var(--b-sz) * .22); background: var(--bg);
  border: var(--st-sep) solid var(--cd-win);
}
.cd-cnt__l {
  position: absolute; inset: 0; opacity: calc(1 - var(--i) * var(--st-fade));
  transform-origin: 50% 150%; transform: rotate(calc(var(--st-rot) * var(--i)));
}
.cd-cnt__f {
  position: relative; z-index: 2; display: grid; place-items: center;
  padding: 0 4px; color: var(--fg);
}
/* والحشوةُ عند المرور وحدَه: إشارةُ تفاعلٍ لا حالُ سكون */
.cd-lnkplus:hover { background: color-mix(in srgb, var(--c) 14%, transparent); }
.cd-lnkplus svg { width: var(--ring-ic); height: var(--ring-ic); position: relative; }
/* وجهةُ نقلٍ مهيَّأة: تنبض ذهبيّةً — الفعلُ لم يقع بعدُ وينتظر ضغطتك.
   والنبضُ **تكبيرٌ خالص**: كان يحمل معه ‎translate(-50%,-50%)‎ من يوم كانت الحلقة معلَّقةً
   بالإحداثيّات في وسط الخيط الرأسيّ. وقد صارت عنصرًا في صفّ، فأوّلُ إطارٍ من النبض
   يزيحها نصفَ مقاسها فتطفو خارج موضعها — ولا يقع ذلك إلا عند تهيئة النقل، فيبدو عطلًا عارضًا.
   وهذا شأنُ الحركات: تحمل إحداثيّاتِ عهدها معها، فإذا نُقل العنصرُ بقيت تشدّه إلى ما كان */
.cd-foot.is-move .cd-lnkplus { animation: cdMoveBeat 1.5s ease-in-out infinite; }
@keyframes cdMoveBeat {
  0%, 100% { transform: scale(1) }
  50%      { transform: scale(1.1) }
}
/* «مساهمة [وضعها] في» قبل كتاب المادة: لفظان بينهما أيقونة، بحبر المسار الخافت.
   والفجوة أضيق من فجوة المقاطع كي تُقرأ عبارةً واحدة لا ثلاثة مقاطع */
.cd-seg--pst { gap: 4px; }
.cd-pst {
  width: 13px; height: 13px; flex: none; display: inline-flex;
  color: var(--u-lab, #7c8ba0);
}
.cd-pst svg { width: 100%; height: 100%; display: block; }
/* ولونُها من قاعدة الأوضاع المشتركة أعلاه (‎.pst-badge.is-*‎) — لا نسخةَ لها هنا */
/* المسار وقد صار يسمّي وجهةَ نقلٍ لم تقع بعد: يتذهّب ويصير تسطيرُه متّصلًا —
   ليُقرأ وعدًا لا واقعًا، ويتّفق مع الحلقة الذهبيّة تحته */
.cd-fbtn.is-move { color: var(--u-gold); }
.cd-fbtn.is-move .cd-segl { border-bottom-color: var(--u-gold); border-bottom-style: solid; }
/* «✓» على ملفّها الواحد: في صدر السطر يمينَ رمز المجلّد — كان في آخره مدفوعًا بهامشٍ
   تلقائيّ، فينفصل عن الرمز الذي يخصّه بعرض السطر كلّه. وهو خبرٌ لا زرّ.
   ومكانُه محجوزٌ في السطور كلّها (‎is-off‎ يُخفيه ولا يرفعه)، فتبقى الرموزُ على عمودٍ واحد */
.cd-tick { flex: none; width: 13px; height: 13px; display: inline-flex; color: #4e9d57; }
.cd-tick.is-off { visibility: hidden; }
.cd-tick svg { width: 100%; height: 100%; }
.cd-fopt.is-here { color: var(--u-tx); }

/* قائمةُ الوجهات تنفتح **إلى أعلى**: الشريطُ في قاع النافذة فلا مكان تحته */
/* ===== القائمةُ تنسدل من تحت السهم =====
   كانت مُسنَدةً إلى **مبدأ** المستطيل (‎inset-inline-start‎ = يمينُه في الكتابة من اليمين)
   وسهمُها في طرفه الآخر، فتفتح بعيدًا عمّا ضُغط. فأُسنِدت إلى منتهاه حيث الوجهةُ وسهمُها.
   وتنزل تحته لا فوقه — إلّا أن يضيق ما تحتها في الشاشة فتُقلب (‎is-up‎ يضعه ‎cdListFit‎):
   الشريطُ في قاع النافذة، فنافذةٌ عند حافّة الشاشة تُسقط قائمتَها خارجها ولا سبيل إلى بنودها */
#card-modal .cd-foot .cd-list {
  top: calc(100% + 6px); bottom: auto;
  inset-inline-start: auto; inset-inline-end: 0;
}
#card-modal .cd-foot .cd-list.is-up { top: auto; bottom: calc(100% + 6px); }
/* ===== فقاعة التنسيق: من جلد النافذة لا من لونٍ غريب =====
   كانت رصاصيّةً صمّاء (‎#35455c‎) مكتوبةً بيدها لا من التوكنات، فتبدو قطعةً من موقعٍ آخر
   طافيةً فوق البطاقة — وتظلّ رصاصيّةً في الجلد الفاتح والداكن معًا.
   فصارت سطحَ الشريطين نفسَه (‎--cd-pan‎) بحدّه (‎--cd-winline‎) وانحنائه (‎--cd-r‎)
   وحبرِه (‎--u-mut‎) وذهبِه عند المرور — فتُقرأ امتدادًا للنافذة لا زائرًا عليها.
   ===== ولا منقارَ لها =====
   كان لها منقارٌ مقلوبٌ ٤٥° أسفلَ وسطِها يشير إلى المحدَّد. ورُفع: هو يكسر الحدَّ
   المستدير بنتوءٍ مثلّثٍ يُقرأ «‎<‎» عالقةً في الإطار، ولا يقول شيئًا لا يقوله موضعُ
   الفقاعة نفسُه — فهي تقف فوق ما حدّدتَ فالإشارةُ فيها لا في زائدةٍ عليها. ثمّ إنّها
   تنزلق يمينًا وشمالًا لتتجنّب اللسان، فيصير المنقارُ كاذبًا إذ يشير إلى غير موضعه.
   والحدُّ الآن مستمرٌّ لا ينقطع.
   ===== وقياسُها ثلاثةُ أرباع ما كان =====
   طلبها صاحبُ الموقع: كانت تزاحم النصَّ الذي تحوم عليه. والتصغيرُ في **مقاييسها هي**
   لا بـ‎transform: scale‎: الثاني يصغّر الرسمَ ويُبقي صندوقَ التخطيط على حاله، فيكذب
   حسابُ الموضع (‎offsetWidth‎) وتقع الفقاعةُ في غير مكانها */
.cd-bub {
  position: absolute; z-index: 9; display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: var(--cd-r); background: var(--cd-pan);
  border: 1px solid var(--cd-winline);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45);
}
.cd-bub .cd-tool { color: var(--u-mut); width: 19px; height: 18px; border-radius: 5px; font-size: 10px; }
.cd-bub .cd-tool svg { width: 12px; height: 12px; }
.cd-bub .cd-tool:hover { background: var(--u-hov); color: var(--u-gold); }
.cd-bub .cd-sep { background: var(--cd-winline); height: 12px; margin: 0 2px; }
.cd-bub .cd-tool.on { background: var(--u-gold-hov); color: var(--u-gold); }
/* ===================================================================
   ألوانُ التظليل والحبر: **اسمٌ لا قيمة**
   ===================================================================
   البطاقةُ تُكتب مرّةً وتُقرأ في الجلدين. فلو حُفظ في نصّها لونٌ صريح (‎#e1c172‎) لَبقي
   على حاله وانقلب على صاحبه: أصفرُ التظليل الذي أضاء على الورقة يُعمي على السطح الداكن،
   وحبرٌ فاتحٌ كُتب في الظلام يختفي في الضياء.
   فالمحفوظُ في النصّ **صنفٌ** (‎cdh-y‎ · ‎cdi-pet‎)، وقيمتُه تُقرأ من متغيّرٍ له نسختان —
   واحدةٌ لكلّ جلد. فالاختيارُ واحدٌ والمظهرُ يتبع الصفحة.
   والمتغيّراتُ في ‎:root‎ لا في النافذة: نصُّ البطاقة يُعرض في الشجرة وفي وضع المذاكرة
   وفي المساهمات، فلو حُبست في ‎#card-modal‎ لَسقطت خارجها إلى لا شيء.

   ===== والنسختان **لونان مختلفان** لا لونٌ بشدّتين =====
   جُرّبت الشفافيّةُ أوّلًا: اللونُ واحدٌ و‎alpha‎ يتبدّل. وكان خطأً بيّنًا — القيمتان
   تخرجان من الحساب متقاربتين (‎rgba(255,214,92,.3)‎ و‎rgba(255,205,70,.58)‎)، فهو لونٌ
   واحدٌ في الجلدين لا اثنان. فصار لكلّ جلدٍ **قيمةٌ صريحة**:
     · التظليلُ في الظلام شريطٌ **فاتحٌ باهت**، وفي الضياء شريطٌ **مُشبَعٌ أغمق**.
     · والحبرُ عكسُه: فاتحٌ في الظلام، غامقٌ في الضياء.
   والتظليلُ يحمل **حبرَه معه** (‎color‎): شريطٌ فاتحٌ في جلدٍ داكنٍ يبتلع الحبرَ الفاتح،
   فيلزمه حبرٌ داكنٌ فوقه — وبهذا يُقرأ في الجلدين بلا استثناء */
/* ===================================================================
   الصورةُ في البطاقة — على قواعد أنكي
   ===================================================================
   قُرئت من ملفّاته على هذا الجهاز (‎editable.css‎ و‎reviewer.css‎):
     · ‎max-width: 100%‎ على كلّ ما في الحقل: لا شيءَ يخرج عن عرضه مهما كبُرت الصورة.
     · و‎vertical-align: middle‎: الصورةُ **سطريّةٌ** تجلس بجنب الكلام على سطره لا كتلةً
       تقطعه — وهو ما يجعل «صورةٌ بجانب نصّ» تعمل بلا تنسيقٍ خاصّ.
     · وحدٌّ للارتفاع كي لا تبتلع لقطةُ شاشةٍ طويلةٌ الحقلَ كلَّه. وأنكي يجعله اختياريًّا
       (وضعُ التصغير) بحدٍّ يضبطه صاحبُه؛ وهنا حدٌّ واحدٌ معتدلٌ في التحرير.
   ولا حدَّ ولا انحناءَ من عندنا: الصورةُ تُعرض كما هي — حوافُّها حوافُّها،
   وزواياها قائمةٌ كما صُوّرت، فما نضيفه إليها زيادةٌ على ما أراد صاحبُها */
.cd-in img {
  max-width: 100%; max-height: 220px; width: auto; height: auto;
  vertical-align: middle; border-radius: 0; border: 0;
}
/* ===== الصورةُ المحدَّدة: هالةٌ عليها وعتمةٌ حولها =====
   اجتمع الاثنان بعد ‎Desktop\RE\img-sel-frame-lab‎: الهالةُ تقول «هذه هي»، والعتمةُ
   تُخلي لها المشهد. وكلاهما **لا يشغل مكانًا** — الهالةُ ظلٌّ واللونُ لونٌ وشفافيّة.
   والصورةُ في مجرى السطر، فلو أخذ الإطارُ مساحةً لَأُعيد صفُّ الفقرة عند كلّ تحديدٍ
   ورقص النصُّ تحت الإصبع. (وذلك ما قاسه «برهانُ الثبات» في المختبر: صفرُ بكسل.)
   وصنفا التحديد يُمحيان عند الحفظ: ‎CD_CLS_OK‎ لا يُبقي إلّا ‎cdh-*‎ و‎cdi-*‎ —
   فالتحديدُ حالُ لحظةٍ لا صفةٌ تُخزَّن في البطاقة */
/* ===== القيمُ المعايَرة بيد صاحب الموقع في ‎Desktop\RE\img-sel-dash-lab‎ =====
   منقّطٌ · سُمك ١٫٧٥ · بلا فُرجة · بلا انحناء · شِدّة ٨٥٪ · عتمة ٦٤٪.
   وطولُ النقطة والفجوةُ بينهما **ليسا في يدنا**: ‎outline‎ نمطُه من المتصفّح، ولا
   ضبطَ لهما إلّا بغلافٍ حول الصورة — وذاك ثمنٌ رُفض في مختبر الأشكال.
   ===== ولونُ الطوق ليس واحدًا في الجلدين =====
   في الداكن ذهبيّ، وفي الفاتح **بتروليٌّ غامق**: الذهبيُّ الفاتح (‎#a8842e‎) لونٌ
   دافئٌ على ورقةٍ فاتحةٍ فيقلّ نفاذُه، والبتروليُّ الغامق حبرُ هوية الجامعة نفسُه
   (أغمقُ درجاته، وهو درجةُ ضغط شريط التمرير) فيقطع البياضَ قطعًا.
   فالتوكنُ يُقلب في الجلدين والقاعدةُ واحدةٌ لا تُكرَّر */
.cd-in { --imsel: #1c3f45; }
html[data-theme="dark"] .cd-in { --imsel: var(--u-gold); }
.cd-in img.is-imsel {
  outline: 1.75px dotted color-mix(in srgb, var(--imsel) 85%, transparent);
  outline-offset: 0; border-radius: 0;
}
.cd-in.is-imdim { color: color-mix(in oklab, var(--u-tx) 64%, transparent); }
/* و‎:has‎ تستثني الحاويةَ التي بداخلها المحدَّدة — وإلّا أعتمت العتمةُ ما تُبرزه */
.cd-in.is-imdim > *:not(.is-imsel):not(:has(img.is-imsel)) { opacity: .64; }
.cd-in.is-imdim img:not(.is-imsel) { opacity: .64; }
.cd-in, .cd-in > *, .cd-in img { transition: opacity .18s ease, color .18s ease, box-shadow .18s ease; }
@media (prefers-reduced-motion: reduce) {
  .cd-in, .cd-in > *, .cd-in img { transition: none; }
}
/* وفي العرض (المذاكرة والمساهمات) الحدُّ أوسع: لا تحرير، والشاشةُ للقراءة */
.cx-face img, .pb-body img, .cmt-body img {
  max-width: 100%; max-height: 60vh; vertical-align: middle; border-radius: 0; border: 0;
}

/* ============================================================
   لوحةُ الألوان — اثنتا عشرة نغمةً مولَّدة (‎RE\ink-pal-lab#d‎)
   ============================================================
   كانت اللوحةُ ستَّ حبرٍ وخمسَ تظليلٍ مكتوبةً بالعين لونًا لونًا، فتقاربت الأنغامُ
   في مواضعَ وتباعدت في أخرى. وقِيست بمسافة ‎OKLab‎ فخرج الحكم:

       التظليل الداكن:  وردي / أحمر = **2.3**  ← لونٌ واحدٌ في عينين
       التظليل الداكن:  أصفر / برتقالي = 4.7
       الحبر الداكن:    بترولي / رصاصي = 6.4 · أزرق / رصاصي = 8.0

   وما دون ‎10‎ يلتبس وما دون ‎5‎ لا يُفرَّق. فأُعيدت اللوحةُ **مولَّدةً لا مكتوبة**:
   ‏‎OKLCH‎ — اثنتا عشرةَ نغمةً على بعد ‎30°‎، بإضاءةٍ وإشباعٍ ثابتين. فتتساوى المسافاتُ
   بالبناء لا بالحظّ، ويستوي الوضوحُ عبر اللوحة كلِّها.

   ===== والدرجاتُ مقيسةٌ لا مقدَّرة =====
   جُرّبت الإضاءةُ على سُلَّمٍ كامل، فخرج أنّ مدى الشاشة أوسعُ ما يكون في وسط السُّلَّم،
   وأنّ رفعَ الإشباع فوق الحصر **لا يزيد شيئًا** — الفرقُ يُشترى بإنزال الإضاءة:
   الحبرُ الداكن ‎L=0.73‎ · الفاتح ‎L=0.52‎ · التظليلُ ‎L=0.77‎ · وإشباعُ الكلّ ‎C=0.22‎.
   وحارسان يمسكان الطرفَ الآخر: حبرٌ على الورق فوق ‎4.5:1‎، ونصٌّ على التظليل فوق ‎6.7:1‎.

   ===== والتظليلُ واحدٌ في الجلدين =====
   لا يُعاد في كتلة «الفاتح»: مقاسُه واحدٌ فيهما (‎L=0.77‎) لأنّه يحمل نصًّا داكنًا في
   الحالين، فقيمتان متطابقتان تُكتبان مرّتين بابُ افتراقٍ يومَ تُعدَّل إحداهما.
   وأمّا الحبرُ فيفترق: يقع على ورقٍ داكنٍ هناك وأبيضَ ههنا. */
:root {
  --cdh-red-bg: #ff8d9d;   --cdh-red-tx: #3a171d;
  --cdh-orn-bg: #ff9369;   --cdh-orn-tx: #3a1a0d;
  --cdh-amb-bg: #f4a000;   --cdh-amb-tx: #341f00;
  --cdh-gold-bg: #c9b700;  --cdh-gold-tx: #292500;
  --cdh-grn-bg: #7ece00;   --cdh-grn-tx: #1a290b;
  --cdh-emr-bg: #00d492;   --cdh-emr-tx: #022c1c;
  --cdh-teal-bg: #00ceca;  --cdh-teal-tx: #002b2a;
  --cdh-pet-bg: #00c7f5;   --cdh-pet-tx: #002935;
  --cdh-blu-bg: #79b9ff;   --cdh-blu-tx: #0e253e;
  --cdh-ind-bg: #a8aaff;   --cdh-ind-tx: #20203e;
  --cdh-viol-bg: #d793ff;  --cdh-viol-tx: #2d1b37;
  --cdh-pnk-bg: #ff81d4;   --cdh-pnk-tx: #36182b;
  --cdi-red: #ff748b;  --cdi-orn: #ff7c46;  --cdi-amb: #e39500;
  --cdi-gold: #bbaa00; --cdi-grn: #75c000;  --cdi-emr: #00c688;
  --cdi-teal: #00c0bc; --cdi-pet: #00bae4;  --cdi-blu: #5eacff;
  --cdi-ind: #9a9bff;  --cdi-viol: #d07dff; --cdi-pnk: #ff63ce;
}
html[data-theme="light"] {
  --cdi-red: #c30048;  --cdi-orn: #af4000;  --cdi-amb: #905c00;
  --cdi-gold: #766a00; --cdi-grn: #477900;  --cdi-emr: #007d54;
  --cdi-teal: #007976; --cdi-pet: #007590;  --cdi-blu: #0069bf;
  --cdi-ind: #5e48e1;  --cdi-viol: #922ec1; --cdi-pnk: #b4098b;
}
.cdh-red { background-color: var(--cdh-red-bg); color: var(--cdh-red-tx); }
.cdh-orn { background-color: var(--cdh-orn-bg); color: var(--cdh-orn-tx); }
.cdh-amb { background-color: var(--cdh-amb-bg); color: var(--cdh-amb-tx); }
.cdh-gold { background-color: var(--cdh-gold-bg); color: var(--cdh-gold-tx); }
.cdh-grn { background-color: var(--cdh-grn-bg); color: var(--cdh-grn-tx); }
.cdh-emr { background-color: var(--cdh-emr-bg); color: var(--cdh-emr-tx); }
.cdh-teal { background-color: var(--cdh-teal-bg); color: var(--cdh-teal-tx); }
.cdh-pet { background-color: var(--cdh-pet-bg); color: var(--cdh-pet-tx); }
.cdh-blu { background-color: var(--cdh-blu-bg); color: var(--cdh-blu-tx); }
.cdh-ind { background-color: var(--cdh-ind-bg); color: var(--cdh-ind-tx); }
.cdh-viol { background-color: var(--cdh-viol-bg); color: var(--cdh-viol-tx); }
.cdh-pnk { background-color: var(--cdh-pnk-bg); color: var(--cdh-pnk-tx); }
/* ===== وأصنافُ اللوحة القديمة تبقى حيّةً ولا تُعرض =====
   مفاتيحُ اللوحة الأولى مكتوبةٌ في **متون بطاقاتٍ قائمة** (‎cdh-y‎ · ‎cdh-s‎ …)، فلو
   حُذفت قواعدُها لَذهب تظليلُ كلّ ما لُوّن قبل اليوم بلا صياح — نصٌّ يعود عاديًّا
   ولا يُعرف لمَ. فتُترك مصروفةً إلى **أقرب** نغمةٍ في اللوحة الجديدة: تُقرأ كما كانت
   تقريبًا، وتُذهَب عنها الحاجةُ إلى مخزنٍ ثانٍ.
   وهي مرفوعةٌ من ‎CD_PAL‎ فلا تُعرض في اللوحة: تُقرأ ولا تُختار بعد اليوم.
   و‎cdi-gry‎ وحدَه يبقى بقيمته: رماديٌّ لا نغمةَ له في العجلة، فلا أقربَ يُصرف إليه */
.cdh-y { background-color: var(--cdh-gold-bg); color: var(--cdh-gold-tx); }
.cdh-s { background-color: var(--cdh-pet-bg); color: var(--cdh-pet-tx); }
.cdh-o { background-color: var(--cdh-orn-bg); color: var(--cdh-orn-tx); }
.cdh-p { background-color: var(--cdh-pnk-bg); color: var(--cdh-pnk-tx); }
.cdh-r { background-color: var(--cdh-red-bg); color: var(--cdh-red-tx); }
:root { --cdi-gry: #a9bcc9; }
html[data-theme="light"] { --cdi-gry: #4a5c6e; }
/* وأصنافُ الحبر بعدها في الملفّ قصدًا: إن اجتمع الاثنان على عنصرٍ واحد غلب الحبرُ
   المختارُ حبرَ التظليل — والمتأخّرُ في الملفّ هو الغالب عند تساوي الترجيح */
.cdi-red { color: var(--cdi-red); --cdo: var(--cdo-red); }
.cdi-orn { color: var(--cdi-orn); --cdo: var(--cdo-orn); }
.cdi-amb { color: var(--cdi-amb); --cdo: var(--cdo-amb); }
.cdi-gold { color: var(--cdi-gold); --cdo: var(--cdo-gold); }
.cdi-grn { color: var(--cdi-grn); --cdo: var(--cdo-grn); }
.cdi-emr { color: var(--cdi-emr); --cdo: var(--cdo-emr); }
.cdi-teal { color: var(--cdi-teal); --cdo: var(--cdo-teal); }
.cdi-pet { color: var(--cdi-pet); --cdo: var(--cdo-pet); }
.cdi-blu { color: var(--cdi-blu); --cdo: var(--cdo-blu); }
.cdi-ind { color: var(--cdi-ind); --cdo: var(--cdo-ind); }
.cdi-viol { color: var(--cdi-viol); --cdo: var(--cdo-viol); }
.cdi-pnk { color: var(--cdi-pnk); --cdo: var(--cdo-pnk); }
.cdi-gry { color: var(--cdi-gry); --cdo: var(--cdo-gry); }
/* ============================================================
/* ============================================================
   حبرٌ داخل تظليل: يُلبَس درجةً داكنة — **واللوحةُ تُريها قبل الضغط**
   ============================================================
   جُرّبت ثلاثةٌ، والثالثةُ هي التي استقرّت:

   ١ · **التبديلُ الصامت** — الحبرُ يلبس درجتَه الداكنة والحبّةُ تعرض لونَها الفاتح.
       فقرأ النصُّ ورُدّ: «كنت أبي أُمنع من أني آخذه». والحقُّ معه — الحبّةُ **تَعِد**
       بلون، فإن وقع غيرُه نُقض الوعدُ في صمت.
   ٢ · **المنعُ الشامل** — لا تبديلَ ويُقفل ما رسب. ورُدّ كذلك: «منعني من كل الألوان
       مو منطق». والحقُّ معه ثانيةً — بابٌ يُقفل كلُّه ليس بابًا.
   ٣ · **الدرجةُ معلَنة** — الحبرُ يلبس درجتَه الداكنة، **وحبّةُ اللوحة تعرض تلك الدرجة
       نفسَها** ما دام التحديدُ على تظليل. فما تراه هو ما يقع، والاثنتا عشرةَ متاحةٌ
       كلُّها، ولا وعدَ يُنقض ولا بابَ يُغلق. وموضعُ ذلك ‎cdPalHTML‎.

   ولمَ لزمت الدرجةُ أصلًا؟ حسابٌ لا رأي: في الجلد الداكن، ليقرأ الحبرُ على ورق البطاقة
   تلزم إضاءةٌ نسبيّةٌ ‎≥ 0.292‎، وليقرأ على التظليل تلزم ‎≤ 0.072‎ — والشرطان متناقضان.
   فلا لونَ واحدٌ يخدم السطحين، ولا بدّ للحبر من وجهين: وجهٍ على الورق ووجهٍ على التظليل.
   والوجهان **نغمةٌ واحدة**، فيُعرف أنّه أحمرُك أنت لا حبرًا مجهولًا.
   والقيمُ مقيسةٌ عند ‎L=0.34 · C=0.14‎: ١٤٤ خلطةً من ١٤٤ فوق ‎5.0:1‎، والنغماتُ تتفارق
   بـ‎5.9‎ فيُفرَّق أحمرُها من أزرقها.

   ===== وقاعدتان لا مئةٌ وأربعٌ وأربعون =====
   الخلطاتُ ١٤٤ في ترتيبين (الحبرُ في جوف التظليل، أو مجتمعين على عنصرٍ واحدٍ كما تفعل
   ‎cdPaint‎). فلا تُكتب واحدةً واحدة: كلُّ صنفِ حبرٍ يحمل درجتَه في ‎--cdo‎، وقاعدتان
   تقرآنها حيث يجتمع البابان. والقدرُ ‎(0,2,0)‎ يغلب ‎(0,1,0)‎ فتُطبَّق */
:root {
  --cdo-red: #6d0024;  --cdo-orn: #621f00;  --cdo-amb: #4f3000;
  --cdo-gold: #403900; --cdo-grn: #244100;  --cdo-emr: #00442c;
  --cdo-teal: #004140; --cdo-pet: #003f4f;  --cdo-blu: #00386b;
  --cdo-ind: #31267c;  --cdo-viol: #4f176b; --cdo-pnk: #63064c;
  --cdo-gry: #23323c;
}
[class*="cdh-"] [class*="cdi-"],
[class*="cdh-"][class*="cdi-"] { color: var(--cdo, inherit); }
/* ============================================================
   (السجلُّ الأوّل — تُرك للحجّة لا للعمل)
   ============================================================
   جُرّب التبديلُ أوّلًا: الحبرُ داخل التظليل يلبس درجةً داكنةً من نغمته (‎--cdo-*‎).
   فقرأ النصُّ وعبرت الخلطاتُ كلُّها — **ورُدّ بحكم صاحب الموقع**، وحجّتُه أنّ الحبّة
   في اللوحة تَعِد بلونٍ فيقع غيرُه: «كنت أبي أُمنع من أني آخذه، يكون عليه قفل».
   وهي حجّةٌ في محلّها: اللوحةُ تُقرأ وعدًا، والوعدُ لا يُنقض في صمت.

   ===== والمنعُ يعمّ، وذلك حسابٌ لا اختيار =====
   في الجلد الداكن: ورقُ البطاقة ‎#1a2e34‎ والتظليلُ عند ‎L=0.77‎. فليقرأ الحبرُ على
   الورق يلزم أن تبلغ إضاءتُه النسبيّةُ ‎0.292‎ فأكثر، وليقرأ على التظليل يلزم ألّا
   تجاوز ‎0.072‎ — **والشرطان متناقضان**. فلا لونَ واحدٌ يجمعهما، ولا لوحةَ تُصلح ذلك:
   ما يُرى على الورق يختفي على التظليل ولا بدّ.
   فالقاعدةُ التي بقيت: **تظليلٌ أو حبرٌ ملوّن، لا هما معًا**. ومن ظلّل كلمةً كُتبت
   بحبر التظليل الداكن (‎--cdh-*-tx‎)، وهو مقيسٌ فوق ‎6.7:1‎ في الجلدين.
   والقفلُ يقول ذلك في موضعه (‎cdPalLock‎) بحبّةٍ مشطوبةٍ معطَّلة، فلا يُكتشف بالتجربة.

   ولا قاعدةَ ههنا إذن: رُفعت ‎--cdo-*‎ ورُفع معها السطران اللذان يقرآنها. والمنعُ في
   الجافا لا في الجلد — الجلدُ يُخفي أثرًا، والمنعُ يمنع الفعل من أصله */

/* ===== لوحةُ الألوان: نافذةٌ صغيرةٌ من جلد النافذة =====
   كانت الألوانُ تُختار من نافذة النظام — سطحٌ غريبٌ لا يعرف الموقعَ ولا جلدَه، ويفتح
   طيفًا لا نهاية له فيُنتقى منه ما يُفسد الصفحة. فصارت لوحةً منّا: أعيانُ ألوان الهويّة
   جاهزةً، ولمن أراد **كودٌ يُكتب** أو **طيفٌ يُنتقى** — والثلاثةُ في سطحٍ واحدٍ من
   ‎--cd-pan‎ بحدّه وانحنائه.
   وتنسدل من تحت الفقاعة: هي منها لا نافذةٌ ثانيةٌ تطفو عليها */
.cd-pal {
  position: absolute; top: calc(100% + 7px); inset-inline-start: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 8px; padding: 9px;
  border-radius: var(--cd-r); background: var(--cd-pan);
  border: 1px solid var(--cd-winline); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45);
}
/* عددُ الأعمدة من عدد الألوان (‎--n‎ يكتبه ‎cdPalHTML‎): لوحةُ التظليل خمسةٌ ولوحةُ الحبر
   ستّة، فلا يُكتب رقمٌ ثابتٌ هنا يكسر إحداهما */
.cd-pal__grid { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 6px; }
.cd-pal__sw {
  width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 7px; display: grid; place-items: center;
}
/* ===== وضعيفُ التباين يُخفت ولا يُشطب =====
   كانت الحبّةُ تُشطب وتُعطَّل، والشطبةُ تقول «ممنوع». وقد قيس الأمرُ فتبيّن أنّ المنعَ
   يعمّ الاثنَي عشرَ جميعًا على كلّ تظليل (الشرحُ عند ‎cdPalLock‎ في ‎app.js‎)، فبابٌ
   يُغلق دائمًا ليس بابا. فسقطت الشطبةُ وسقط ‎disabled‎، وبقي الإخفاتُ خبرًا:
   «هذا أضعفُ تباينًا» لا «هذا محرَّم». ورُفع إخفاتُه من ‎.3‎ إلى ‎.5‎ ليُقرأ تنبيهًا
   لا إطفاءً، ويبقى لونُه بيّنًا يُختار عن علم */
.cd-pal__sw.is-lo i { opacity: .5; }
.cd-pal__sw { position: relative; }
/* ===== المربّعُ على سطح البطاقة في **جلدك أنت** =====
   كان نصفُه على أبيضَ ونصفُه على داكنٍ يفصلهما قطرٌ — ليُرى اللونُ في الجلدين معًا.
   وهو خبرٌ لا تحتاجه: أنت في جلدٍ واحدٍ الآن، والمربّعُ المشطورُ يُقرأ لونين لا لونًا.
   فصار على ‎--cd-win‎ — سطحِ البطاقة نفسِه — فما تراه في المربّع هو ما سيقع في النصّ */
.cd-pal__sw i {
  width: 100%; height: 100%; border-radius: 6px; display: block;
  border: 1px solid var(--cd-winline);
  background: linear-gradient(var(--sw), var(--sw)), var(--cd-win);
}
.cd-pal__sw:hover i { border-color: var(--u-gold); }

/* ===== حبّاتُك أنت: تُزاد من الطيف وتُحذف بضغطة =====
   الخليّةُ بقدِّ الحبّة تمامًا فتصطفّ مع المسمّاة في الشبكة، وهي **حاملُ** زرّ الحذف
   لا الحبّةُ نفسُها: زرٌّ داخل زرٍّ وسمٌ باطل. */
.cd-pal__cell { position: relative; width: 26px; height: 26px; }
/* و‎right‎ لا ‎inset-inline-end‎: الجهةُ بصريّةٌ لا منطقيّة — «فوق على اليمين» كما طُلبت،
   وهي في الإنجليزيّة ركنُ الحذف المألوف. فتثبت يمينًا في اللغتين، كأزرار النافذة.
   ونتوءُ ٤px والفجوةُ ٦px: يبقى بينه وبين جارته بكسلان فلا يركبها */
.cd-pal__del {
  position: absolute; top: -4px; right: -4px; z-index: 1;
  width: 13px; height: 13px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--cd-winline);
  background: var(--cd-pan); color: var(--u-mut);
  font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.cd-pal__del:hover { background: var(--u-del-bg); color: var(--u-del-tx); border-color: transparent; }
.cd-pal__del:focus-visible { outline: 2px solid var(--u-gold); outline-offset: 1px; }
.cd-pal__row { display: flex; align-items: center; gap: 6px; }
.cd-pal__none {
  flex: none; font: inherit; font-size: 10.5px; cursor: pointer;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  background: none; border: 1px solid var(--cd-winline); color: var(--u-mut);
  border-radius: 7px; padding: 4px 8px;
}
.cd-pal__none:hover { border-color: var(--u-gold); color: var(--u-gold); }
/* ===== دائرةُ الطيف: زرٌّ يفتح لوحًا، لا غطاءٌ على نافذة النظام =====
   كانت ‎<label>‎ يسكنها ‎<input type="color">‎ شفّافٌ يملؤها، فالضغطةُ تفتح منتقيَ
   النظام. وقد صارت زرًّا كسائر أزرار اللوحة، فتلزمها تعريةُ جلد الزرّ الأصليّ */
.cd-pal__spec {
  position: relative; width: 24px; height: 24px; flex: none; cursor: pointer;
  padding: 0; border: 0; background: none;
  -webkit-appearance: none; appearance: none;
}
.cd-pal__spec i {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--cd-winline);
  background: conic-gradient(#c0455f, #dc8a2e, #c9a44e, #5aab63, #3d97a3, #6b7fd7, #c0455f);
}
/* والمفتوحُ يُذهَّب كما يُذهَّب المشتعلُ في الشريط: خبرٌ عن «لوحُه مفتوح» */
.cd-pal__spec:hover i, .cd-pal__spec.on i { border-color: var(--u-gold); }
.cd-pal__spec.on { border-radius: 50%; box-shadow: 0 0 0 3px var(--u-gold-hov); }

/* ===== لوحُ الطيف: تحتَ اللوحة وبعرضها =====
   الصبغةُ يمينًا ويسارًا والإضاءةُ صعودًا ونزولًا.
   وموضعُه ههنا لا في الجافا: ‎top‎ من ‎100%‎ لأنّ اللوحةَ هي الكتلةُ الحاوية (وهي
   ‎position:absolute‎ أصلًا)، و‎inset-inline-start‎ منطقيّةٌ فتنقلب مع اللغة وحدَها.
   و‎width:100%‎ لا رقمٌ ثابت: اللوحتان ليستا سواءً — التظليلُ خمسُ حبّاتٍ والحبرُ ستّ،
   فلو ثُبِّت العرضُ لَوافق إحداهما وشذَّ عن الأخرى */
.cd-spec {
  position: absolute; inset-inline-start: 0; top: calc(100% + 8px); width: 100%; z-index: 3;
  padding: 6px; border-radius: var(--cd-r);
  background: var(--cd-pan); border: 1px solid var(--cd-winline);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45);
}
/* الصندوقُ بقدِّ القماس تمامًا: هو حاملُ الرقاقةِ فتُقاس إزاحتُها منه لا من اللوح بحشوه.
   وارتفاعُه وحدَه مكتوب — والعرضُ يملؤه، والجافا يقيس الاثنين ولا يفترضهما */
.cd-spec__box { position: relative; height: 90px; }
.cd-spec__c { display: block; width: 100%; height: 100%; border-radius: 7px; cursor: crosshair; }
/* رقاقةُ التحويم: لا تلتقط المؤشّرَ أبدًا، ولولا ذلك لسرقت منه نقرةَ اللوح */
/* وتصغر مع اللوح: هي فوقه، وما كان يجلس على ‎320×180‎ يبتلع نصفَ ‎نصفِه‎ */
.cd-spec__tip {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 6px;
  padding-block: 3px; padding-inline: 4px 7px;
  border-radius: 7px; background: var(--cd-pan); border: 1px solid var(--cd-winline);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .55);
  pointer-events: none;
  opacity: 0; transition: opacity .12s ease;
}
.cd-spec.is-tip .cd-spec__tip { opacity: 1; }
/* طوقٌ داخليّ: بلا هذا يذوب المربّعُ الفاتحُ في أرضيّة الرقاقة في الجلد الفاتح */
.cd-spec__tip i {
  flex: none; width: 13px; height: 13px; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--cd-winline);
}
/* والهكسُ جزيرةٌ لاتينيّةٌ في نصٍّ عربيّ: بلا عزلٍ تُقذف ‎#‎ إلى طرفه لأنّها محايدة */
.cd-spec__tip b {
  font-size: 10px; font-weight: 700; line-height: 1.5; color: var(--u-tx);
  direction: ltr; unicode-bidi: isolate;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) { .cd-spec__tip { transition: none; } }
.cd-pal__hex {
  flex: 1 1 auto; min-width: 0; width: 76px; font: inherit; font-size: 11px;
  direction: ltr; text-align: center; letter-spacing: .04em;
  background: var(--cd-in); border: 1px solid var(--u-in-line); color: var(--u-tx);
  border-radius: 7px; padding: 4px 6px;
}
.cd-pal__hex:focus { outline: none; border-color: var(--u-gold); }
.cd-pal__hex::placeholder { color: var(--u-ph); }

/* ===== أزرار النافذة داخلها لا في نتوءٍ فوقها =====
   كانت في نتوءٍ بارزٍ وسطَ الحافّة العليا — يكسر استقامةَ رأس النافذة ويزاحم مِقبضَ الدُّرج.
   فصارت **داخل** الزاوية العليا اليمنى: رأسُ البطاقة يستوي كسائر النوافذ،
   والأزرارُ حيث تعوّدت العينُ أن تجدها.
   و‎right‎ لا ‎inset-inline-end‎: الجهةُ بصريّةٌ لا منطقيّة، فتثبت يمينًا في اللغتين */
/* ===== محاذاةُ أزرار النافذة =====
   لا تُعلّق من أعلى الحافّة بحَشْوٍ مُخمَّن، بل تُمدّ على **ارتفاع الشريط كلِّه** ثمّ تتوسّط فيه —
   فتقع على خطّ الختم وصاحبِها والحضور مهما تبدّل ارتفاعُ الشريط أو ما فيه.
   وكان الحَشْوُ الثابت يضعها أعلى من إخوتها بضعةَ بكسلات، تُحسّ ولا تُعلَّل */
/* المِقبضُ ابنُ الشريط لا ابنُ البطاقة: يمتدّ من رأسه إلى قاعه (‎top:0;bottom:0‎)
   فيتوسّط فيه حتمًا — لا بحَشْوٍ مُخمَّن يوافق اليومَ ويخالف غدًا */
#card-modal .cd-meta { position: relative; }
/* ===== ورُفع ‎min-width: 0‎ عن صفّ الأزرار =====
   كُتب يوم كانت الترويسةُ صفًّا مرنًا وكان في الصفّ شريطُ ترسٍ ينبسط (‎overflow:hidden‎
   عليه)، فكان الانكماشُ يقع في الشريط والأزرارُ ‎flex:none‎ لا تُمسّ. ثمّ رحل الترسُ إلى
   التذييل وصارت الترويسةُ شبكةً — فصار السطرُ **علّةَ التداخل نفسَها**: العمودُ يقف عند
   أدنى ما فيه، و‎min-width: 0‎ يجعل ذلك الأدنى **صفرًا** فينكمش العمودُ ولا تنكمش الأزرار
   (هي ‎flex:none‎)، فتخرج من عموده وتركب الختمَ. مقيسًا: تداخلُ ‎13px‎ عند عرض ‎430‎ و‎41px‎
   عند ‎380‎. فبقي الأدنى على أصله (‎auto‎) فوقف العمودُ عند متنه */
.cd-bar {
  flex: 0 1 auto;
  z-index: 3; display: flex; align-items: center; gap: 2px;
  background: none; border: 0;
}
.cd-wb {
  flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; border-radius: 6px; color: var(--u-mut);
  line-height: 1; transition: background .14s, color .14s;
}
.cd-wb:hover { background: var(--u-hov); color: var(--u-tx-strong); }
.cd-wb--x:hover { background: #c0455f; color: #fff; }
/* ===== ولكلّ زرٍّ مقاسُه: تسويةٌ بصريّةٌ لا هندسيّة =====
   كانت الثلاثةُ تشترك في رقمٍ واحد (‎26×24‎ ورمزٌ ‎13.5‎)، فيُرى ✕ أثقلَ من أخويه لأنّ
   شكلَه أكثفُ حبرًا في المساحة نفسِها، ويُرى الطيُّ (خطٌّ واحد) أخفَّ منهما.
   فافترقت في المعايرة: ‎19 · 20.5 · 21‎ — والعينُ تسوّي ما تراه لا ما يقيسه الصندوق.
   والـ✕ حرفٌ لا رسمٌ، فمقاسُه ‎font-size‎ لا ‎svg‎ */
.cd-wb--x { width: var(--x-w); height: var(--x-h); font-size: var(--x-ic); }
.cd-wb--mx { width: var(--mx-w); height: var(--mx-h); }
.cd-wb--mx svg { width: var(--mx-ic); height: var(--mx-ic); }
.cd-wb--mn { width: var(--mn-w); height: var(--mn-h); }
.cd-wb--mn svg { width: var(--mn-ic); height: var(--mn-ic); }
/* وما سواها من أزرار الصدَفة (جلدُ الورق مثلًا) يبقى على القدّ الأوّل */
.cd-wb:not([class*="cd-wb--"]) { width: 26px; height: 24px; font-size: 12.5px; }
.cd-wb:not([class*="cd-wb--"]) svg { width: 13.5px; height: 13.5px; }

/* ============================================================
   متاعُ الجيب: انسخ · الصق · كرّر
   ============================================================
   كانت الثلاثةُ **صدَفةً ملتحمةً بحدٍّ** في صفّ أزرار الترويسة (‎.cd-clip‎)، مبسوطةً أبدًا.
   وقد طُويت في **جيبٍ** في ركن التذييل (‎head-crowd-lab#n‎): ثلاثةُ أجسامٍ تُرى في كلّ
   نظرةٍ وإنّما تُطلب في النادر. فصارت كلُّ واحدةٍ سطرًا من أسطر الدرج تنزلق واحدةً بعد
   واحدة كأسطر الترس سواءً بسواء — وذهبت الصدَفةُ وحدُّها وفواصلُها: **الدرجُ نفسُه هو
   الوعاء**، ولا علبةَ في علبة.
   ===== والمعطَّلُ يخبو ولا يغيب =====
   «الصق» بلا حافظةٍ لا تفعل شيئًا، وحذفُها يجعل الدرجَ يتبدّل عرضًا كلّما نسختَ شيئًا —
   فيبقى موضعُها ويخبو حبرُها: خبرٌ عن حالها لا فراغٌ يتحرّك. وهي القاعدةُ نفسُها التي
   عليها «الوِردة» في كعب الختم */
.cd-cb {
  width: 25px; height: 100%; display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; padding: 0; border-radius: 6px; color: var(--u-mut);
  transition: background .14s, color .14s;
}
.cd-cb svg { width: 13.5px; height: 13.5px; display: block; }
.cd-cb:hover:not(:disabled) { background: var(--u-hov); color: var(--u-tx-strong); }
.cd-cb:disabled { opacity: .35; cursor: default; }
/* ولكلٍّ قدُّها: الوسمُ ‎data-clip‎ مفتاحُها — وهو السمةُ نفسُها التي يمسك بها المستمعُ
   وتُوقَظ بها «الصق» في النوافذ كلِّها، فلا يُستحدث لها وسمٌ ثانٍ للشكل */
.cd-cb[data-clip="copy"] { width: var(--cp-w); }
.cd-cb[data-clip="copy"] svg { width: var(--cp-ic); height: var(--cp-ic); }
.cd-cb[data-clip="paste"] { width: var(--ps-w); }
.cd-cb[data-clip="paste"] svg { width: var(--ps-ic); height: var(--ps-ic); }
.cd-cb[data-clip="dup"] { width: var(--dp-w); }
.cd-cb[data-clip="dup"] svg { width: var(--dp-ic); height: var(--dp-ic); }
/* وأسطرُ الجيب تمتدّ بقدّه، فيقع مرورُ اليد على كامل الحبّة لا على الرمز وحدَه.
   وفجوتُه أضيقُ من فجوة الترس: ذاك كلامٌ يُقرأ، وهذا رموزٌ متجاورة */
.cd-clipw .cd-setrow { align-self: stretch; }
.cd-clipw.on .cd-setin { gap: var(--clip-in); }

/* ===== نافذة إضافة البطاقة (على غرار نافذة الإضافة في أنكي) =====
   شطر علويّ: لغة البطاقة · نوعها · مسار حفظها — يفصله خطٌّ عمّا تحته */
/* كل شيء في النافذة موسَّط: صفّ الإعدادات وشريط الأدوات والتسميات وزرّ الإضافة */
/* سطران: الوجهة وموضع البطاقة فوق، ثم اللغة والنوع والتنسيق تحت */
.cd-top {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 2px 11px; border-bottom: 1px solid var(--u-line);
}
.cd-trow { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cd-trow--dest { padding-bottom: 13px; }   /* يسع «+» المتدلّي تحت الموضع */
/* ‎6px‎ بين نصّ المسار والفاصل: فجوة الصفّ ‎12‎ زائدَ حِمل قوس العدد ⇐ تُقصّ بهامشٍ سالب */
.cd-trow--dest .cd-vsep { margin-inline-start: -8px; }
/* فاصلٌ عريض بين مجموعات الصفّ: الإعدادات ‖ التنسيق ‖ الوجهة — أثخنُ وأدكنُ من فواصل التنسيق الداخليّة */
.cd-vsep { flex: none; width: 3px; height: 22px; border-radius: 2px; background: var(--u-in-line); }
/* زرّا اللغة والنوع: كلٌّ يحمل حالته ويتبدّل بالضغط — عاريان بلا مربّع، اللون وحده يستجيب للمرور */
.cd-pick {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: none; border: 0; padding: 4px 6px; color: var(--u-tx-strong, inherit);
  transition: color .15s;
}
/* اللغة حرفٌ: «ع» أو «EN» — عرضٌ أدنى ثابت فلا يقفز الصفّ عند التبديل */
.cd-pick--lang { min-width: 34px; text-align: center; line-height: 1.5; }
.cd-pick--ic { display: inline-grid; place-items: center; }
.cd-pick--ic svg { width: 17px; height: 17px; display: block; }
.cd-pick:hover { color: var(--u-gold); }
/* ===== شريط النوع: أربعةٌ معًا والمختار وحده مضاء =====
   ريلٌ بلون سطح الحقول، والمختار قرصٌ بلون النافذة نفسها فيبدو طافيًا فوقه في الجلدين */
.cd-kbar {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: 9px; background: var(--cd-surf, var(--u-surf));
}
.cd-kb {
  font: inherit; cursor: pointer; width: 29px; height: 24px;
  display: inline-grid; place-items: center; color: var(--u-mut);
  background: none; border: 0; border-radius: 7px;
  transition: background .15s, color .15s;
}
/* الحبر لا الإطار هو ما يُقاس: أيقونة «إكمال الجملة» تملأ قياسها فتُصغَّر لتساوي أخواتها ارتفاعَ حبر */
.cd-kb svg { width: 17px; height: 17px; display: block; }
/* ===== ولمَ ‎.cd-kbar‎ في أوّل المُنتقي؟ لأنّ المعايرة تخصّ الشريطَ وحده =====
   كانت مكتوبةً ‎.cd-kb[data-ck="cloze"] svg‎ بلا حاضنٍ، فتسرّبت إلى **الدُّرج**:
   ووزنُها ‎(0,2,1)‎ يساوي وزنَ ‎.cd-types .cd-kb svg‎ تمامًا، وهي بعدَها في الملفّ
   فغلبتها — فبقيت «الفراغ» ‎14px‎ وأخواتُها ‎32‎ (و‎27‎ في الشاشات القصيرة).
   ولم يظهر ذلك في مقام البوّابة وحدَه لأنّ قاعدتَه تبدأ بمُعرّف ‎#card-modal.is-gate‎
   فوزنُها ‎(1,3,1)‎ يغلب هذه. فالخلل كان في الدُّرج المنكمش لا في البوّابة.
   والدُّرجُ لا يريد المعايرةَ أصلًا: أيقوناتُه كبيرةٌ ومعها أسماؤها، والبوّابةُ —
   وهي بلا معايرة — هي المقامُ الذي رضيه صاحبُ الموقع. فالحكمُ: تبقى للشريط ولا تتعدّاه.
   تنبيه: ‎.cd-kbar‎ غير مركّبٍ في الصفحة اليوم (‎cdKindsHTML‎ معرَّفةٌ ولا تُستدعى) —
   والقاعدةُ محفوظةٌ له إن عاد، ولا تمسّ الدُّرجَ ما دام غائبًا */
.cd-kbar .cd-kb[data-ck="cloze"] svg { width: 14px; height: 14px; }
.cd-kb:hover { color: var(--u-gold); }
.cd-kb.on {
  background: var(--cd-win, #fff); color: var(--u-gold);
  box-shadow: 0 1px 2px rgba(20, 35, 63, .12), inset 0 0 0 1px var(--u-gold-dash);
}
.cd-drop { position: relative; }
.cd-list {
  position: absolute; z-index: 5; inset-inline-start: 0; top: calc(100% + 5px);
  min-width: 130px; display: flex; flex-direction: column; padding: 4px;
  background: var(--u-surf2, #fff); border: 1px solid var(--u-in-line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
html[data-theme="dark"] .cd-list { background: #17313a; box-shadow: 0 10px 28px rgba(0, 0, 0, .55); }
.cd-opt {
  font: inherit; font-size: 12.5px; text-align: start; cursor: pointer;
  background: none; border: 0; border-radius: 7px; padding: 6px 10px;
  color: var(--u-tx);   /* لا وراثة: نصّ النافذة أبيض فيختفي على سطح القائمة */
}
.cd-opt:hover { background: var(--u-hov); }
.cd-opt.on { color: var(--u-gold); font-weight: 700; }
/* الوجهة: تأكيدٌ لا حقل — كل مقطع بأيقونته (المكتبة · الكتاب · المجلد)،
   وآخر مقطع هو الوجهة: يُضغط لاختيار مجلد وتحته «+1» ذهبيّة */
/* المسارُ مربّعٌ واحد يضمّ الطريق كلَّه، وما فيه نصٌّ مباشر تفصله شَرطة —
   وكان كلُّ مقطعٍ في مربّعٍ خاصٍّ به فيُقرأ أزرارًا متجاورة لا طريقًا واحدًا.
   ويُدفع إلى أقصى اليسار، والزرُّ في أقصى اليمين، والشَّرَطاتُ بينهما تمرّ تحته */
.cd-where { position: relative; display: inline-flex; align-items: center; min-width: 0; }
/* والمسارُ سطحٌ هادئٌ بحدٍّ واحد: هو **وعاءُ الخبر** لا خبرٌ بذاته، فلا يزاحم زرَّه
   بلونٍ ولا بطوقٍ ثانٍ. وجُرّب أن يلبس جِلد الختم فصار الصفُّ ثلاثةَ أختامٍ تتنازع النظر */
#card-modal .cd-foot .cd-where {
  z-index: 1; box-sizing: border-box; height: var(--ctl); padding: 0 var(--pth-padx);
  border-radius: var(--pth-r); background: var(--cd-surf); border: 1px solid var(--cd-winline);
}
.cd-path {
  display: inline-flex; align-items: center; gap: var(--pth-gap); min-width: 0;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;   /* خطّ الهوية لنصّ المسار */
  font-size: var(--pth-fs); color: var(--u-mut); white-space: nowrap;
  /* ===== حدُّ النصّ مستطيلُه =====
     المقاطعُ لا تنكمش دون أدنى محتواها، فكانت تفيض من المستطيل ثمّ من النافذة نفسِها
     متى ضاقت. والقصُّ هنا لا على ‎.cd-where‎: قائمةُ المجلّدات ابنتُه المطلقة تنسدل فوقه،
     فلو قُصّ الوعاءُ لَابتُلعت معها */
  overflow: hidden;
}
/* والقطعُ يُعلن عن نفسه: آخرُ ‎26px‎ من جهة الفيض يذوب — وهي اليسار في الكتابة من اليمين،
   إذ هناك ينتهي النصّ. ولا يُلبس القناعُ إلّا إن وقع القطعُ فعلًا (‎cdPathFit‎ يقيس)،
   وإلّا بدا آخرُ المسار باهتًا وهو كاملٌ لا شيءَ فيه محذوف */
.cd-path.is-cut {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent);
}
.cd-seg, .cd-segl { display: inline-flex; align-items: center; gap: 5px; }
.cd-seg > svg, .cd-segl > svg { width: 14px; height: 14px; flex: none; display: block; color: var(--u-lab, #7c8ba0); }
/* كتاب المادة في المسار: نفس كتاب الموقع ثلاثيّ الأبعاد بمقاسٍ يوازي سطر النصّ */
/* ‎translateY‎: دورانه ثلاثيّ الأبعاد يرفع كتلته المرئيّة عن مركز صندوقه، فيُنزَل ليجلس على سطر النصّ.
   والهامش السالب يعوّض فراغ الصندوق بعد الميل، فيقترب الاسم من الغلاف */
/* الإزاحة معايَرة على خطّ KFUPM: حروفه تجلس أعلى في سطرها من IBM Plex، فيصعد معها الكتاب */
.cd-bk { flex: none; display: inline-flex; height: 15px; margin-inline-end: -1px; transform: translateY(-1px); }
.cd-bk .bk { --thk: 3px; --r: 1.5px; --tilt: 22deg; height: 15px; }
.cd-bk .bk::after { box-shadow: 0 2px 4px rgba(13, 42, 72, .3); }
/* الغلاف البديل بهذا المقاس: لوحُ اللون وحده — كتابة الكود عليه تصير نقشًا غير مقروء، والاسم بجانبه */
.cd-bk .bk--ph .bkface { padding: 0; }
.cd-bk .bk--ph .bkface b, .cd-bk .bk--ph .bkface i { display: none; }
/* ‎inherit‎ لا لونًا ثابتًا: الاسم كتلةٌ واحدة، فيتذهّب الفاصل والعدد مع الاسم عند المرور والاختيار */
.cd-cnt { font-style: normal; font-size: 11px; color: inherit; opacity: .72; }
/* العدد ملاصقٌ لاسم الوجهة (‎1.5px‎ حبرًا) — في القائمة يبقى على فجوتها */
.cd-segl .cd-cnt { margin-inline-start: -2.5px; }
.cd-sl { font-style: normal; color: var(--u-lab, #7c8ba0); }
/* فاصل أنكي بين المادة ومجلداتها — معزول اتجاهيًّا فلا يقفز بين الاسمين، ولونه من الاسم نفسه */
.cd-dc { font-style: normal; color: inherit; opacity: .55; padding: 0 1px; direction: ltr; unicode-bidi: isolate; }
/* منتقي الوجهة: نصٌّ بتسطير منقّط — يبين أنه يُضغط بلا أن يصير زرًّا كامل الجسم.
   و«+1» معلّقة خارج المجرى تحت السطر، فلا ترفع المقطع عن بقيّة المسار */
.cd-fbtn {
  position: relative; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center;
  background: none; border: 0; padding: 1px 2px; color: var(--u-tx-strong, inherit);
}
/* سهمُ الانسدال: أفصحُ ما يقول «هنا قائمةٌ تُفتح». ولونُه لونُ التسطير الذي تحت اسم
   الملفّ — ‎--c‎ نفسُه المكتوب على الشريط، فالسهمُ والخطُّ عضوان في منتقي وجهةٍ واحد
   فلا يفترقان لونًا. ويدور نصفَ دورةٍ عند الانفتاح، فهو خبرٌ عن الحال لا زينةٌ ثابتة */
.cd-fdrop { display: inline-flex; flex: none; margin-inline-end: 3px;
  color: var(--c, var(--u-gold)); }
.cd-fdrop svg { width: 13px; height: 13px; display: block;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.cd-fbtn.is-open .cd-fdrop svg { transform: rotate(180deg); }
.cd-fbtn .cd-segl { border-bottom: 1px dotted var(--u-gold-dash); padding-bottom: 2px; }
.cd-fbtn:hover { color: var(--u-gold); }
.cd-fbtn:hover .cd-segl { border-bottom-color: var(--u-gold); }
/* ===== والمثبَّتةُ خبرٌ لا زرّ =====
   في المقفلة تُرسم الوجهةُ ‎<span>‎ بلا سهمٍ ولا معرّف (‎cdPathHTML‎)، فيبقى أن يُرفع
   عنها ما يَعِد باليد: المؤشّرُ والتسطيرُ الذي تحت الاسم — وهو الذي يقول «هذا يُبدَّل».
   والرسمُ يبقى: الوجهةُ خبرٌ يُقرأ في الحالين.
   وموضعُها **بعد** قواعد التسطير والمرور: نوعيّتُها مثلُها (‎0,2,0‎)، فلا يفصل بينهما
   إلّا ترتيبُ المصدر — ولو كُتبت قبلها لَغلبتها هي وبقي الخطُّ يقول «يُبدَّل» */
.cd-fbtn--fix { cursor: default; }
.cd-fbtn--fix:hover { color: var(--u-tx-strong, inherit); }
.cd-fbtn--fix .cd-segl,
.cd-fbtn--fix:hover .cd-segl { border-bottom-color: transparent; }
/* تسطيرُ الوجهة يتبع حالَ النشر كالزرّ والوصلة: خضراءُ إن استقرّت وبرتقاليّةٌ إن كان عندك
   تعديل — فيصير الشريطُ يقول حالًا واحدةً بثلاثة أعضاء، لا ثلاثةَ ألوانٍ في صفّ.
   و‎--c‎ مكتوبٌ على الشريط، فيرثه هذا ولا يُحسب مرّةً ثانية */
#card-modal .cd-foot .cd-fbtn .cd-segl { border-bottom-color: var(--c); }
#card-modal .cd-foot .cd-fbtn:hover .cd-segl { border-bottom-color: var(--c); opacity: .85; }
/* شريط التنقّل آخر الصفّ بعد الفاصل: [سهم] الموضع [سهم] وتحتهما زرّ بطاقة جديدة.
   الهامش السالب يُخرج «+» من حساب التوسيط، فيجلس سطر «١/١» على مستوى نصوص الصفّ
   و«+» يتدلّى تحته مباشرةً في حشو الصفّ السفليّ */
/* شارة الحفظ: سحابةٌ تحجز مكانها في كل الحالات فلا يقفز الموضع تحتها.
   ترتفع سهمًا أثناء الحفظ، ثم تصير صحًّا أخضر، ثم تخفت بعد ثانيتين فلا تصير ضجيجًا دائمًا */
/* الإزاحات هنا تضبط الفراغين حول الرقم بالحبر لا بالصناديق، ولا تُحرّك الرقم نفسه */
.cd-st { width: 16px; height: 16px; margin-bottom: 3px; transform: translateY(-1px);
  display: grid; place-items: center; color: var(--u-lab, #7c8ba0); }
.cd-st svg { width: 100%; height: 100%; display: block; }
.cd-st.is-draft { color: var(--u-mut); }
.cd-st.is-save { color: var(--u-gold); }
.cd-st.is-done { color: #4e9d57; }
.cd-st.is-quiet { opacity: .38; }
.cd-st, .cd-st.is-quiet { transition: opacity .5s, color .25s; }
.cd-st.is-save .cd-up { animation: cdUp .8s ease-in-out infinite; }
@keyframes cdUp { 0%, 100% { transform: translateY(.8px) } 50% { transform: translateY(-1.6px) } }
.cd-nav {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  /* الشارة فوق والزرّ تحت كلاهما خارج حساب التوسيط، فيبقى «١/١» على سطر النصّ */
  margin-top: -17px; margin-bottom: -15px;
  transform: translateY(-1px);   /* إزاحةٌ لا هامش: الهامش يتبدّد في تقريب التوسيط */
  margin-inline-start: -6px;   /* ‎12px‎ الصفّ ⇐ ‎6px‎ بين الفاصل والسهم */
  align-self: center;
}
/* المسافات هنا مقيسة حبرًا إلى حبر: صناديق السهمين والرقم تلتصق برسمها بلا هواء،
   فما تراه من فراغ هو ‎gap‎ لا غير — ٤px حول الرقم و٦px بين الفاصل والسهم */
/* رفعةُ بكسل: حبر الحروف العربيّة يعلو مركز صندوقها، فيجلس الرقم على سطر النصّ لا على مركز الصفّ */
.cd-navwrap { display: flex; flex-direction: column; align-items: center; gap: 0; }
.cd-navrow { display: flex; align-items: center; gap: 4px; transform: translateY(-1px); }
.cd-pos {
  /* خطّ المسار نفسه ومقاسه: رقمان متجاوران بخطّين مختلفين لا يجلسان على سطرٍ واحد */
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; text-align: center; color: var(--u-mut);
  direction: ltr; unicode-bidi: isolate;
}
.cd-arw {
  position: relative; display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--u-mut); transition: color .14s;
}
.cd-arw svg { width: 6px; height: auto; display: block; }
/* مساحة الضغط أوسع من الرسم دون أن تدخل في حساب المسافات */
.cd-arw::before { content: ''; position: absolute; inset: -7px -6px; }
.cd-arw:hover:not(:disabled) { color: var(--u-gold); }
.cd-arw:disabled { opacity: .3; cursor: default; }
/* بطاقة جديدة: «+» عارية صغيرة — بلا دائرة ولا إطار */
.cd-add {
  display: inline-grid; place-items: center; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 800; line-height: 1; padding: 1px 4px;
  margin-top: -5px; transform: translateY(3px);   /* «+» محرفٌ قصير: يُقصّ هواؤه ثم يُنزَل ليتساوى الفراغان */
  background: none; border: 0; color: var(--u-gold); opacity: .85;
  transition: opacity .15s, transform .15s;
}
.cd-add:hover { opacity: 1; transform: scale(1.15); }
/* كل وجهة في القائمة باسمها الكامل كما يظهر في المسار — بخطّ المسار نفسه */
/* كل سطرٍ أيقونةٌ واسمُ ملفّ — كمقاطع المسار. والمادةُ لا تتكرّر في الأسماء */
.cd-fopt {
  white-space: nowrap; display: flex; align-items: center; gap: 2.5px;   /* كفجوة العدد في المسار */
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; font-size: 13px;
}
/* رمز المجلد — قاعدةٌ واحدة لموضعيه: سطرِ القائمة ومقطعِ الوجهة في المسار.
   ولونُه يأتي سطرًا في العنصر من ‎folderColor()‎ نفسِها التي تلوّن شجرة التحرير،
   فمجلدٌ واحدٌ لونُه واحدٌ أينما ظهر. والافتراضُ هنا لمن لا لونَ له بعد */
.cd-fic {
  width: 14px; height: 14px; flex: none; display: inline-flex;
  color: var(--u-lab, #7c8ba0); margin-inline-end: 3px;
}
.cd-fic svg { width: 100%; height: 100%; display: block; }
/* ===== وفصلُ «رحلتي» يلبس دائرتَه في المسار =====
   رمزُ الفصل ‎.tp-order‎ — قرصٌ فيه ترتيبُه، وهو رمزُ الموضوع في مربّع «المادة» بعينه.
   وقدُّها ‎17‎ وخانةُ رمز المسار ‎14‎، فتُشدّ إلى الخانة ولا يُكتب لها قدٌّ ثالث:
   ‎width/height: 100%‎ كما تفعل أختُها ‎svg‎ سواءً بسواء، فمن عايَر الخانة عايَرهما معًا.
   والحرفُ يصغر معها لئلّا يفيض عن قرصه */
.cd-fic--tp .tp-order { width: 100%; height: 100%; font-size: 8px; }
.cd-fopt .cd-bk, .cd-segl .cd-bk { margin-inline-end: 3px; }

/* التنسيق: مجموعةٌ داخل الصفّ العلويّ نفسه، لا شريطًا مستقلًّا تحت الخطّ */
.cd-tools { display: flex; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap; }
.cd-tool {
  font: inherit; font-size: 13px; cursor: pointer; position: relative;
  width: 30px; height: 28px; display: inline-grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 7px; color: var(--u-mut);
}
.cd-tool:hover { background: var(--u-hov); color: var(--u-gold); }
.cd-tool svg { width: 16px; height: 16px; }
/* منتقي اللون: مربّع شفّاف فوق الأيقونة يفتح لوحة النظام */
.cd-tool--col input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; padding: 0; border: 0; background: none;
}
.cd-sep { width: 1px; height: 16px; background: var(--u-line); margin: 0 4px; }

/* حقلا الوجه والظهر — لكلٍّ نتوؤه: أيقونته لسانٌ بارز فوق مستطيله ملتحمٌ به،
   بجلد الحقل نفسه (سطحه وحدّه) وقاعُه يغطّي حدّه العلويّ فيصيرا جسمًا واحدًا */
/* بلا حدود أصلًا — لا على الغلاف ولا على النتوء: السطح وحده يرسم الشكل،
   فلا يبقى خطٌّ عند التقائهما ولا إطارٌ يلمع عند الكتابة */
/* الهامش العلويّ يتّسع لنتوء الحقل */
/* الفسحةُ فوق أوّل مربّعٍ حشوٌ لا هامش: لافتتُه معلَّقةٌ فوق حدّه (‎bottom:100%‎)، فلو بقيت
   الفسحةُ هامشًا وقعت اللافتةُ خارج صندوق الجسم وقصَّها فيضُه الجديد */
.cd-body { display: flex; flex-direction: column; gap: 32px; }
.cd-field {
  position: relative; background: var(--cd-fld, var(--cd-surf, var(--u-surf)));
  border: 0; border-radius: 10px;
}
.cd-flab {
  /* غوصُ اللسان في المربّع: بقدره يغطّي خيطَ المربّع العلويّ فلا ينقطع الإطارُ عند التقائهما.
     ورقمٌ واحدٌ يقرؤه الغوصُ والإطارُ معًا — فلو افترقا نزل جانبا اللسان في الجوف */
  --flab-dip: 2px;
  position: absolute; bottom: 100%; margin: 0 0 calc(-1 * var(--flab-dip)); left: 50%; transform: translateX(-50%);
  padding: 3px 11px;
  display: flex; align-items: center; justify-content: center; color: var(--u-lab, #7c8ba0);
  background: var(--cd-fld, var(--cd-surf, var(--u-surf))); border: 0;
  border-radius: 9px 9px 0 0;
}
.cd-flab svg { width: 18px; height: 18px; display: block; }
/* ===== الجدول: أيُّ مربّعٍ يستقبل حرفَك =====
   المربّعاتُ متطابقة — الوجهُ والظهر، أو السؤالُ وخياراتُه — وليس فيها ما يقول أيُّها
   تحت المؤشّر. والمختارُ من ‎field-focus-lab‎ (اثنا عشر اتّجاهًا) **الجدول**: تسطيرُ
   المخطوط الذي يحيط بمساحة الكتابة. خيطٌ ذهبيٌّ واحدٌ **داخليّ** (‎inset‎) فلا يزيد
   المربّعَ مقاسًا ولا يزحزح ما حوله بكسلًا واحدًا، ولسانُ المربّع يتذهّب معه فيُقرآن
   جسمًا واحدًا مؤطّرًا. وحشوُ اللسان السالب (‎margin-bottom:-2px‎) يغطّي ما تحته من
   الخيط، فلا ينقطع الإطارُ عند التقائهما ولا يظهر خطٌّ عارضٌ في جوفه.
   ولا يُمسح الجدولُ بمجرّد مغادرة التركيز — يبقى على آخر مربّعٍ كتبتَ فيه: فالسؤال
   «أين يقع حرفي؟» قائمٌ ولو رفعتَ يدك، ولأنّ فقاعةَ التنسيق والترسَ والمسارَ تسلب
   التركيزَ لحظةً ولا تعني انتقالَ الكتابة.
   وإنّما يُمسح بفعلٍ صريح: نقرةٌ على جلد البطاقة خارج المربّعات (‎cdDim‎ في ‎app.js‎)،
   فيُخلى الاختيارُ ويُرفع المؤشّرُ معه — لا شارةَ بلا مؤشّر، ولا مؤشّرَ بلا شارة.
   ولم يُختر الذهبُ زينةً: هو ذهبُ الهويّة نفسُه بشفافيّة ‎--u-gold-dash‎، فيُقرأ في
   الجلدين لأنّه لونُ هويّةٍ لا لونُ ضوء (والظلُّ يموت في الداكن — درسُ خارطة «الجَبْهة»).
   والخُضرةُ أقوى منه: لسانُ الخيار الصواب يبقى أخضر ولو كان هو الحيّ — ولذلك تأتي
   قاعدةُ ‎.cd-ch.is-ok‎ **بعد** هذه في الملفّ فتغلبها في اللون وحده، ويبقى الجدولُ حوله */
.cd-field { transition: box-shadow .18s ease; }
.cd-flab { transition: color .18s ease; }
/* ومربّعُ الصورة كإخوته: يلبس الإطارَ إذا حَيِيَ ويخلعه إذا خمد.
   وكان يلبسه **دائمًا** بحجّة أنّه لوحةٌ لا حقلُ كتابة — فبقي مُحدَّدًا أبدًا لا يُفكّ
   تحديدُه، وهو شذوذٌ عن الأنواع الثلاثة. وبابُه إلى الحياة الضغطةُ لا التركيز
   (‎cdLive‎ في ‎app.js‎)، فاستوى مع إخوته ولم يُكتب له إطارٌ ثانٍ */
.cd-field.is-live { box-shadow: inset 0 0 0 1px var(--u-gold-dash); }
.cd-field.is-live > .cd-flab { color: var(--u-gold); }
/* إطارُ اللسان طبقةٌ وحدَها لا ظلٌّ على اللسان نفسِه: اللسانُ يغوص في المربّع بمقدار
   ‎--flab-dip‎ ليغطّي خيطَه، ولو رُسم الإطارُ على حدوده لَنزل جانباه مع الغوص كلِّه
   فعبرا الخيطَ الأفقيّ ومضيا في جوف المربّع — طعنتان لا زاويتان.
   فتُرفع الطبقةُ عن قاع اللسان بمقدار الغوص **ناقصَ سُمك الخيط**: فينتهي الجانبُ
   الرأسيّ في صفّ الخيط الأفقيّ نفسِه لا تحته، فيلتقيان زاويةً مصمتةً بلا نتوء
   ولا فجوةٍ قطريّة. والقاعدةُ الجامعة: الخطُّ يقف على الملتقى ولا يعبره */
.cd-flab::after {
  content: ''; position: absolute; inset: 0 0 calc(var(--flab-dip) - 1px);
  border-radius: 9px 9px 0 0; pointer-events: none;
  transition: box-shadow .18s ease;
}
.cd-field.is-live > .cd-flab::after {
  box-shadow: inset 0 1px 0 var(--u-gold-dash),
              inset 1px 0 0 var(--u-gold-dash),
              inset -1px 0 0 var(--u-gold-dash);
}
/* مِسطرةُ التقريب: رقمٌ وإشارتاه عائمةً على الجلد مباشرةً — لا سطحَ تحتها ولا إطار،
   فلا يُقرأ نتوءًا ثانيًا ينافس لسانَ الحقل. وموضعُها فوق اللسان في الوسط، لا في
   طرف السطر: هي خبرٌ عن المربّع كلِّه فتقف على محوره.
   وارتفاعُها عنه بقدر اللسان (‎18‎ للأيقونة و‎6‎ لحشوها) فتستقرّ فوقه بلا تراكب.
   والأرقامُ بأعمدةٍ ثابتة العرض (‎tabular-nums‎) كي لا ترقص كلّما تبدّل الرقمُ من ‎9%‎ إلى ‎100%‎ */
/* ===== ورُفعت إلى ٢٨ بعد حاضن حالَي الإخفاء =====
   كان ‎24‎ معايَرًا على لسانٍ قامتُه ‎18‎ للأيقونة و‎6‎ لحشوها. ثمّ دخل الحاضنُ (‎.cd-iotrk‎)
   وله حدٌّ من فوقُ وحدٌّ من تحتُ، فطالت قامةُ اللسان بكسلين وابتلعتهما الفجوة.
   فرُدَّ البكسلان وزِيد مثلُهما راحةً — والزيادةُ تسري على أنواع البطائق كلِّها لا على
   «الإخفاء» وحدَه: المِسطرةُ واحدةٌ فيها جميعًا، وفجوةٌ أوسعُ بأربعةٍ لا تُرى في غيره. */
.cd-zbar {
  position: absolute; bottom: calc(100% + 28px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1px;
  background: none; border: 0; padding: 0;
  color: var(--u-lab, #7c8ba0); user-select: none;
}
.cd-zval {
  font-size: 8px; font-weight: 700; min-width: 22px; text-align: center;
  font-variant-numeric: tabular-nums; letter-spacing: .2px;
}
.cd-zb {
  font: inherit; font-size: 10px; line-height: 1; cursor: pointer;
  width: 12px; height: 12px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: 4px; color: inherit;
}
.cd-zb:hover { background: var(--u-hov); color: var(--u-gold); }

/* ===== «المتعدّد»: سؤالٌ وخياراتٌ تُزاد =====
   الخياراتُ في وعاءٍ واحدٍ داخل الجسم، وفجوتُه فجوةُ الجسم نفسُها — فيبدو الخيارُ
   أخًا للسؤال في الصفّ لا كتلةً ثانيةً منفصلة. والوعاءُ لا ينكمش: قامةُ المربّع
   من محتواه في هذا النوع كما في «الوجهين» */
#card-modal .cd-field[hidden] { display: none !important; }
.cd-chs { display: flex; flex-direction: column; gap: 32px; flex: 0 0 auto; }
/* ===== لسانُ الخيار: حلقةٌ تنطوي وشريطُ حكمٍ ينفرج =====
   اللسانُ وعاءٌ لا زرّ (الزرُّ داخل الزرِّ باطل)، وفيه ساكنان يتبادلان المكان:
   الحلقةُ ما دام المربّعُ خامدًا، والشريطُ إذا حَيِيَ.
   والعرضُ **من المحتوى** لا من رقمٍ محفوظ: العمودُ يُفتح من ‎0fr‎ إلى ‎1fr‎ فيقيس نفسَه
   بنفسه — فلو زاد زرٌّ يومًا أو طال تلميحٌ في لغةٍ أخرى لم يكذب القياسُ ولم يُقصّ شيء.
   ولولا ‎overflow:hidden‎ على الجوف لَبرزت الأزرارُ من العمود المطويّ */
.cd-chlab { cursor: default; font: inherit; }
/* والحلقةُ **خبرٌ لا زرّ**: لا تُضغط ولا تُلمس، إنّما تقول حالَ الخيار بلونها.
   والحكمُ كلُّه في الشريط وحدَه، فلا بابان إلى فعلٍ واحدٍ يفترقان يومًا */
.cd-chic {
  flex: none; width: 18px; height: 18px; overflow: hidden;
  display: grid; place-items: center; padding: 0; border: 0; background: none;
  color: inherit; cursor: inherit; font: inherit;
  transition: color .15s ease, width .24s cubic-bezier(.22,.61,.36,1), opacity .14s ease;
}
/* والخُضرة لونُ «استقرّت» نفسُه (‎--cd-sync‎): لونٌ واحدٌ للصواب في النافذة كلِّها */
.cd-ch.is-ok .cd-chic { color: var(--cd-sync); }
/* ===== والخطأُ يُستنبط ولا يُكتب =====
   السؤالُ صوابُه واحدٌ لا غير، فما إن يُختار حتى يصير كلُّ ما سواه خطأً **بالضرورة** —
   فلا يُطالَب المستخدمُ بأن يَسِمَ كلَّ خيارٍ على حدة.
   ولذلك تسأل القاعدةُ عن **الوعاء** (‎:has‎) لا عن الخيار: «أفي هذا السؤال صوابٌ مختار؟»
   فإن كان، احمرَّت حلقاتُ البقيّة كلِّها في اللحظة نفسِها بلا سطرٍ من جافاسكربت يزامنها،
   ويستحيل أن تفترق الحلقةُ عن الحال كما تفترق الحقولُ المحسوبةُ باليد.
   وما لم يُختر صوابٌ بعدُ فلا حمرةَ: سؤالٌ لم يُحسم، لا سؤالٌ كلُّ خياراته خاطئة */
.cd-chs:has(.cd-ch.is-ok) .cd-ch:not(.is-ok) .cd-chic { color: #c0455f; }
.cd-chbar {
  display: grid; grid-template-columns: 0fr; opacity: 0; pointer-events: none;
  transition: grid-template-columns .24s cubic-bezier(.22,.61,.36,1), opacity .16s ease;
}
.cd-chbar__in { min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 3px; }
/* الحيُّ وحدَه ينفرج: الحلقةُ تنطوي إلى صفرٍ والشريطُ يتّسع — والتبادلُ في زمنٍ واحد
   فيُقرأ حركةً واحدةً لا حركتين متعاقبتين */
/* والقاعدةُ على ‎.cd-field‎ لا على ‎.cd-ch‎ وحدَه: اللسانُ ينفرج في «الفراغ» كما ينفرج
   في «المتعدّد» — آليّةٌ واحدةٌ لا تُكتب مرّتين، ومن حمل ‎.cd-chic‎ و‎.cd-chbar‎ نالها */
/* ===== ومربّعُ الصورة رجع إلى القاعدة =====
   كان مستثنًى منها: أدواتُه منفرجةٌ **دائمًا** بحجّة أنّه لا يُكتب فيه فلن يحيا أبدًا،
   ولو عُلّق انفراجُه على الحياة لَما ظهرت أدواتُه قطّ. وقد بطلت الحجّةُ يوم صار له بابٌ
   إلى الحياة بالضغطة (‎cdLive‎)، فرجع إلى ما عليه إخوتُه: أيقونةُ نوعِه وحدَها ما دام
   خامدًا، فإذا ضُغط انطوت وانفرجت أدواتُه — الحركةُ نفسُها والزمنُ نفسُه، فلا يُتعلَّم
   لهذا النوع عرفٌ ثانٍ */
.cd-field.is-live .cd-chic { width: 0; opacity: 0; pointer-events: none; }
.cd-field.is-live .cd-chbar { grid-template-columns: 1fr; opacity: 1; pointer-events: auto; }
/* ===== «الفراغ»: زرّا اللفّ ورقاقتُه ===== */
/* وقامةُ الزرّ ‎18‎ لا ‎22‎: اللسانُ يقيس نفسَه بأطولِ ما فيه، ولسانُ سائر الحقول
   ‎24‎ (أيقونةٌ ‎18‎ وحشوٌ ‎3+3‎). فلو علا زرُّ الفراغ لَعلا اللسانُ معه وزاحم مِسطرةَ
   التقريب فوقه — وهي معلّقةٌ على مسافةٍ ثابتة من المربّع (‎bottom: 100% + 24px‎).
   فالقاعدة: ما يسكن اللسانَ لا يتجاوز قامةَ أيقونته */
/* ===== والزرّان قاعدةٌ واحدة لا قاعدتان =====
   هما فعلٌ واحدٌ في حالين (فراغٌ في السؤال نفسِه · فراغٌ في سؤالٍ جديد)، فلو أُفرد كلٌّ
   بقاعدةٍ لَافترقا يومًا بتعديلٍ في إحداهما. وقد وقع هذا فعلًا: أُضيف الثاني فبقي بلا
   تنسيق، فخرج زرًّا خامًا بحدٍّ وحشوٍ يفيضان عن قامة الشريط (‎18px‎) — والشريطُ مقصوصٌ
   (‎overflow:hidden‎) فابتلع نصفَه ولم تبلغه الضغطة. فالاسمان في ترجمةٍ واحدة */
.cd-czb, .cd-czn {
  flex: none; width: 22px; height: 18px; padding: 0; border: 0; border-radius: 6px;
  display: grid; place-items: center; background: none; cursor: pointer; font: inherit;
  color: var(--u-lab, #7c8ba0); transition: color .15s ease, background .15s ease;
}
.cd-czb svg, .cd-czn svg { width: 16px; height: 16px; display: block; }
.cd-czb:hover, .cd-czn:hover { color: var(--u-gold); background: var(--u-hov); }
/* ===== زرُّ التلميح ‎::‎ — حاضرٌ أبدًا، خافتٌ حتى يصير له معنًى =====
   كان ينزلق فيحضر ويغيب مع مؤشّرك، فكان في ذلك عيبان: الشريطُ يتبدّل عرضُه تحت اليد،
   ومن لم يقع في القوسين مصادفةً لم يعلم أنّ للنوع زرًّا ثانيًا أصلًا.
   فصار **مقامُه ثابتًا** بجنب أخيه، وحالُه هي التي تتبدّل: خافتٌ ما لا يعمل، ساطعٌ إذا عمل.
   والخفوتُ وحدَه لا يكفي خبرًا — يُضمّ إليه مؤشّرُ المنع (‎not-allowed‎) وسكونُ الزرّ عند
   المرور: لا يتذهّب ولا يستضيء تحت اليد. ثلاثةٌ تقول شيئًا واحدًا: «لا يُضغط الآن».
   ولا يُرفع عنه التقاطُ المؤشّر: تلميحُه يقول **لِمَ** لا يُضغط ومتى يُضغط، ولو صمت
   لَبقي المستخدمُ أمام زرٍّ خافتٍ لا يدري سببه. والضغطةُ نفسُها عقيمةٌ بحارسها في ‎app.js‎ */
.cd-czt {
  flex: none; width: 22px; height: 18px; margin-inline-start: 2px;
  padding: 0; border: 0; border-radius: 6px;
  display: grid; place-items: center; background: none;
  color: var(--u-lab, #7c8ba0); opacity: .34; cursor: not-allowed;
  transition: opacity .16s ease, color .15s ease, background .15s ease;
}
.cd-czt b { font-size: 13px; font-weight: 700; letter-spacing: .5px; line-height: 1; }
.cd-czt.is-on { opacity: 1; cursor: pointer; }
.cd-czt.is-on:hover { color: var(--u-gold); background: var(--u-hov); }

/* ===== «الإخفاء» ===== */
/* أدواتُ الأقنعة — بقامة أيقونة اللسان (‎18‎) كزرّي الفراغ، فلا يعلو اللسانُ عن إخوته */
.cd-iot {
  flex: none; width: 22px; height: 18px; padding: 0; border: 0; border-radius: 6px;
  display: grid; place-items: center; background: none; cursor: pointer; font: inherit;
  color: var(--u-lab, #7c8ba0); transition: color .15s ease, background .15s ease;
}
.cd-iot svg { width: 16px; height: 16px; display: block; }
.cd-iot:hover { color: var(--u-gold); background: var(--u-hov); }
.cd-iot + .cd-iot { margin-inline-start: 2px; }
.cd-iot.is-on { color: var(--u-gold); background: var(--u-gold-hov); }
/* ============================================================
   حاضنُ حالَي الإخفاء (io-mode-track-lab · الاتّجاه ج «الملتصقتان»)
   ============================================================
   زرّان متجاوران يُضيء أحدُهما قد يُقرآن مستقلّين يُضغط كلٌّ منهما على حدة — والإضاءةُ
   لا تقول «واحدٌ لا غير». فيُلَفّان بحدٍّ واحدٍ ويُفصلان بخيطٍ **بلا فرجة**: يُقرآن
   **جسمًا واحدًا مشقوقًا** لا زرّين متجاورين.
   وأثمنُ ما فيه أنّه يقول المعنى **بخطٍّ رفيعٍ لا بأرضٍ مصمتة** — واللسانُ كلُّ ما فيه
   شفّاف، فحوضٌ غائرٌ فيه يصير أظهرَ من «+» والسلّة وهو ليس أهمَّ منهما.
   وحوافُّه مستديرةٌ تمامًا (٢٠) كحبّة المفتاح: الاستدارةُ التامّةُ تقول «وحدةٌ مغلقة»،
   والانحناءُ الجزئيُّ يقول «صندوقٌ» فيلتبس بحقول الإدخال.
   والخيطُ الفاصلُ ‎border-inline-start‎ لا ‎border-left‎: يتبع اتّجاهَ الكتابة فلا ينقلب
   إلى الحافّة الخارجيّة في الإنجليزيّة. */
.cd-iotrk {
  --trk-w: 22px;
  position: relative; display: inline-flex; align-items: center; flex: none;
  border: 1px solid var(--u-line, rgba(44, 94, 101, .18));
  border-radius: 20px; overflow: hidden;
}
/* والحشوُ يُقصّ بالحاوية: الزرُّ مربّعُ الأركان، والاستدارةُ تأتيه من ‎overflow: hidden‎
   على الحاوية — فلو استدار هو لَبانت فرجةٌ بين حشوه وحدّها */
.cd-iotrk .cd-iot { width: var(--trk-w); border-radius: 0; background: none; }
.cd-iotrk .cd-iot + .cd-iot {
  margin-inline-start: 0; border-inline-start: 1px solid var(--u-line, rgba(44, 94, 101, .18));
}
.cd-iotrk .cd-iot:hover { background: var(--u-hov); color: var(--u-gold); }
.cd-iotrk .cd-iot.is-on { background: var(--u-gold-hov); color: var(--u-gold); }
/* اللوحُ الخالي: زرّان فوق بعضهما في وسط الحقل — أخو الحقل لا ابنُه، فلا يدخل المحفوظ */
/* الحالُ الخالية: لوحٌ بقامةٍ مفروضة يسع الزرّين */
.cd-field.is-io { min-height: 190px; }
.cd-field.is-io > .cd-in { min-height: 190px; padding: 0; }
/* ===== فإذا جاءت الصورةُ صار المربّعُ إطارَها =====
   يهجُر قامتَه المفروضة ويأخذ **مقاسَ الصورة**: عرضُه عرضُها وقامتُه قامتُها،
   ‎fit-content‎ لا ‎100%‎ — فلو مُدّ إلى عرض الجسم لَبقي حولَ الصورة فراغٌ داخل الإطار،
   والإطارُ يجب أن يمسّ الصورةَ لا أن يحيط بها وبفراغها.
   ويتوسّط الجسمَ فيبقى اللسانُ على محوره (اللسانُ معلّقٌ على ‎left:50%‎ من المربّع) */
/* ===== وزواياها قائمةٌ كما صُوّرت =====
   كانت تُستدار ‎10px‎ فتُقصّ أركانُها الأربع — تصرّفٌ في صورة صاحبها لم يطلبه. والقاعدةُ
   مكتوبةٌ في هذا الملفّ من قبل لصور الحقول: «الصورةُ تُعرض كما هي، حوافُّها حوافُّها،
   وزواياها قائمةٌ كما صُوّرت» — نُقضت هنا فرُدّت.
   والاستدارةُ تُنزع من الأربعة معًا: المربّعُ الحاوي · الصورةُ · إطارُها · حوضُ الأقنعة.
   فلو بقيت في واحدٍ منها لَلاح انحناءٌ من تحت زاويةٍ قائمة */
/* ===== ===== سقفُ الصورة يكبر مع التقريب ولا يقف عند حدّ الجوف ===== =====
   كان ‎max-width: 100%‎، فالصورةُ تُلائم عرضَ الجوف عند التقريب الأوّل — وذاك حسن.
   لكنّه سقفٌ **ثابتٌ لا يعرف التقريب**: فإذا قرّبتَ ظلّ الحدُّ عرضَ الجوف نفسَه،
   فتقف الصورةُ عن الكبر وإن بقي في التقريب مدى. وهو ما يُحسّ كأنّ العجلةَ عطلت.
   فصار السقفُ **مضروبًا في التقريب**: عند ‎1‎ هو عرضُ الجوف كما كان، وعند ‎2‎ ضِعفُه —
   فتكبر الصورةُ وتفيض، ويُمرَّر الجوفُ أفقيًّا لِيُتنقَّل فيها.
   والحسابُ ههنا **خارج التقريب**: الحقلُ لا ‎zoom‎ عليه (إنّما هو على ‎.cd-in‎ في جوفه)،
   فـ‎100%‎ عرضُ الجوف ببكسلٍ حقيقيّ لا مقيسٍ بالمكبَّر — ولو كُتب داخلَ المكبَّر لَالتبس
   المقياسان. ولا تُمَسّ الصورةُ نفسُها: سقفُها ‎100%‎ من حقلها، فتتبعه بلا حساب.
   ===== ولمَ لم يُرفع السقفُ رأسًا؟ =====
   لأنّ لوحَ الأقنعة (‎.cd-iolay‎) مسمَّرٌ على **الحقل** (‎inset: 0‎)، فما دام الحقلُ
   بقدر الصورة انطبق القناعُ على موضعه. ولو صار الحقلُ صندوقًا ممرَّرًا لَقُصّ اللوحُ
   إلى ما يُرى منه وحدَه فزاغت الأقنعةُ عن مواضعها متى انزلق. فالتمريرُ في الجوف
   والحقلُ يكبر كتلةً واحدة */
.cd-field.is-io.has-img {
  min-height: 0; width: max-content; max-width: calc(100% * var(--cd-z, 1));
  margin-inline: auto; cursor: default; border-radius: 0;
}
/* ===== ولمَ ‎max-content‎ لا ‎fit-content‎؟ =====
   ههنا كانت العلّةُ كلُّها، ورفعُ السقف وحدَه لم يكن يكفي:
   ‎fit-content‎ ليست «بقدر المتن» كما يُظنّ، بل هي بحدّها:
     ‎min( المتنُ الأقصى , max( المتنُ الأدنى , **الفراغُ المتاح** ) )‎
   فهي **مقصورةٌ على المتاح بتعريفها**. والمتاحُ عرضُ الجوف. فمهما رُفع ‎max-width‎
   بقي الحقلُ عند عرض الجوف — وهو الحدُّ الذي كان يُحسّ «كأنّه أبعادُ النافذة نفسِها»،
   وقد كان كذلك حقًّا.
   و‎max-content‎ لا تعرف المتاحَ أصلًا: هي متنُ الصورة بقدّه. فيصير الحاكمُ ‎max-width‎
   وحدَه — وهو الذي يعرف التقريب. وعند التقريب الأوّل تُلائم كما كانت، إذ سقفُها
   حينئذٍ عرضُ الجوف بعينه */
/* ===== ولسانُ الصورة يقيس نفسَه بمحتواه لا بنصف المربّع =====
   اللسانُ معلَّقٌ على ‎left:50%‎ ثمّ يُردّ بنصفه ليتوسّط — وهذه حيلةُ توسيطٍ في **الموضع**،
   لكنّ المتصفّح يقرأ منها أنّ **المتاح** له نصفُ المربّع لا كلُّه (المسافةُ من نصفه إلى
   حافّته)، فيقصُّ عرضَه عنده. فما دام لسانُ هذا النوع وحدَه هو الذي يطول — أربعُ أدواتٍ
   ثمّ حَكَمان وسلّة — كان هو وحدَه الذي يصطدم بالحدّ: يُقصّ جوفُ شريطه (‎overflow:hidden‎)
   فتختفي أداةٌ أو اثنتان بلا خبر.
   فيُفرض عليه أن يأخذ قدرَ محتواه (‎max-content‎) ويبقى التوسيطُ كما هو. وهو مقصورٌ على
   هذه الحال: ألسنةُ سائر الحقول قصيرةٌ لا تبلغ الحدَّ أصلًا، فلا يُبدَّل لها قياسٌ بلا سبب */
.cd-field.is-io.has-img > .cd-flab { width: max-content; }
/* ===== ولا يغوص هذا اللسانُ في مربّعه =====
   الغوصُ (‎--flab-dip‎) حيلةٌ لأجل الخيط: اللسانُ يهبط بمقداره فيغطّي خيطَ المربّع العلويّ
   فلا ينقطع الإطارُ عند التقائهما. وهو غير مرئيٍّ في سائر الحقول لأنّ سطحَ اللسان سطحُ
   المربّع نفسُه — يغوص في جلده هو فلا يُرى.
   وهنا ما تحته **صورةُ صاحبها**، لا سطحٌ من سطوحنا. فالغوصُ يقضم من أعلاها شريطًا
   ويحجبه، ويُقرأ لسانًا داخلًا على الصورة لا واقفًا فوقها — وقد بان ذلك عاريًا في الحال
   التي لا إطارَ فيها.
   فيُصفَّر الغوصُ هنا: يقف اللسانُ على حافّتها ولا يتجاوزها. والخيطُ لا يُفقد شيئًا —
   طبقتُه (‎::after‎) تمتدّ بمقدار ‎dip - 1‎، فتنزل بكسلًا واحدًا تحت قاع اللسان فتلتقي
   بخيط الصورة العلويّ التقاءَ الحدّ بالحدّ.
   والتصفيرُ في الحالين معًا لا في الخامدة وحدها: لو اختلف الغوضُ بينهما لَقفز اللسانُ
   بكسلين كلّما ضغطتَ الصورةَ أو تركتها */
.cd-field.is-io.has-img > .cd-flab { --flab-dip: 0px; }
/* ===== والخيطُ يقف عند اللسان لا يمرّ من تحته =====
   في سائر الحقول لا يُرى الخيطُ خلف اللسان لأنّ اللسانَ يغوص بكسلين فيغطّيه بسطحه —
   فيُقرأ الإطارُ منقطعًا عند الترويسة ومستأنَفًا بعدها، وهو المطلوب.
   وهنا صُفّر الغوصُ لئلّا يُقضم من الصورة شيء، فبقي الخيطُ يمرّ تحت اللسان من حدّه
   الأيمن إلى الأيسر ظاهرًا — وهو شذوذٌ عن إخوته.
   فيُوضع للّسان **قَدَمٌ** بكسلٍ واحدٍ بسطحه، تقع على صفّ الخيط نفسِه فتحجبه. ولا يُقضم
   من الصورة شيءٌ زائد: ذلك البكسلُ هو الذي يرسم عليه الخيطُ أصلًا (ظلٌّ داخليّ)، فما
   حُجب إلّا ما كان محجوبًا بالخيط.
   ولا تحضر إلّا مع الخيط: خامدًا فلا خيطَ فلا قدمَ فلا قضم — والّلسانُ لا يتزحزح
   في الحالين، إنّما يظهر تحته بكسلٌ ويختفي.
   ورفعُ اللسان (‎z-index:3‎) لازمٌ: طبقةُ الإطار مرفوعةٌ إلى ‎2‎ لتُرى فوق الصورة،
   فلولا رفعُه لَرُسم الخيطُ فوق القدم فبطل حجبُها */
.cd-field.is-io.has-img > .cd-flab { z-index: 3; }
.cd-field.is-io.has-img.is-live > .cd-flab::before {
  content: ''; position: absolute; top: 100%; inset-inline: 0; height: 1px;
  background: var(--cd-fld, var(--cd-surf, var(--u-surf)));   /* يتبع المستطيلَ لا السطحَ العامّ */
}
.cd-field.is-io.has-img > .cd-in { min-height: 0; }
/* وسقفُ القامة يتبع التقريبَ كسقف العرض، وإلّا وقفت الصورةُ الطوليّةُ عن الكبر
   وسقفُ عرضها لم يبلغ بعدُ. وهو آمنٌ على كلّ تأويلٍ لوحدات الشاشة تحت التقريب:
   إن تبعت التقريبَ فالسقفان ينموان معًا بنسبةٍ واحدة، وإن لم تتبعه صار سقفُ القامة
   فاضلًا فحكم العرضُ وحدَه — وهو المطلوب في الحالين، ولا يقف الكبرُ في واحدةٍ منهما */
.cd-field.is-io.has-img > .cd-in img {
  display: block; width: auto; height: auto; border-radius: 0;
  max-width: 100%; max-height: calc(62vh * var(--cd-z, 1));
}
/* ===== وإطارُ الصورة طبقةٌ **فوقها** لا خيطٌ في خلفيّة الحقل =====
   الخيطُ الداخليّ (‎inset box-shadow‎) يُرسم في خلفيّة الحقل، والصورةُ ابنٌ معتمٌ يملؤه
   إلى حافّته — فتغطّيه كلَّه فلا يُرى منه شيء. ولذلك يُرفع إلى طبقةٍ عليا لا تلتقط
   المؤشّر، فتمرّ الأقنعةُ والنقرُ من تحتها ويبقى الخيطُ مرئيًّا على الصورة.
   ولا يُرسم إلّا والمربّعُ حيّ: هو **جدولُ التحديد** لا حاشيةُ زينةٍ للصورة، فيحضر
   بالضغطة ويزول بنقرة الخلفيّة — كما يفعل في المربّعات الثلاثة الأخرى */
.cd-field.is-io.has-img.is-live::after {
  content: ''; position: absolute; inset: 0; border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--u-gold-dash);
  pointer-events: none; z-index: 2;
}
.cd-iopad {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; pointer-events: none;
}
.cd-iopad .cd-iob { pointer-events: auto; }
.cd-iob {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--u-lab, #7c8ba0); padding: 8px 16px; border-radius: 999px;
  background: none; border: 1px dashed var(--u-in-line);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cd-iob svg { width: 17px; height: 17px; display: block; }
.cd-iob:hover { color: var(--u-gold); border-color: var(--u-gold-dash); background: var(--u-hov); }

/* ===== لوحُ الأقنعة: طبقةٌ على الصورة تُمسك المؤشّر =====
   ‎inset:0‎ في المربّع — وحدودُ المربّع في هذا النوع حدودُ الصورة بالضبط: عرضُه
   ‎fit-content‎ وحشوُ جوفه صفرٌ ولسانُه خارجَ الجريان (‎position:absolute‎). فما من
   عددٍ يُخمَّن هنا ولا قياسٍ يُؤخذ بجافاسكربت: الطبقةُ تنطبق على الصورة بالبناء لا بالحساب.
   و‎direction: ltr‎ فرضًا: ‎left‎ فيزيائيٌّ لا منطقيّ، والبطاقةُ قد تكون عربيّةً فيُقلب
   ما تحتها من نصّ — والأقنعةُ محسوبةٌ من يسار الصورة كما يحسبها أنكي، لا من أوّل سطرها.
   وتحت طبقة الإطار (‎::after‎ بـ‎z-index:2‎) فيبقى خيطُ الحقل مرئيًّا فوق الأقنعة */
.cd-iolay {
  position: absolute; inset: 0; z-index: 1; direction: ltr;
  border-radius: 0; overflow: hidden;
  cursor: crosshair; touch-action: none;
}
/* ويدُ التحديد سهمٌ لا صليب: هي لا تُنشئ شيئًا */
.cd-iolay[data-tool="sel"] { cursor: default; }
/* ===== القناعُ نفسُه =====
   حشوٌ يختاره صاحبُه (‎--iom‎) وحدٌّ داكنٌ ثابت — حدُّ أنكي نفسُه (‎#212121‎) بشفافيّة:
   يفصل القناعَ عن الصورة تحته مهما كان لونُها، ولا ينافس الحشوَ في القراءة.
   و‎box-sizing: border-box‎ فالحدُّ داخلَ النسبة: قناعٌ عرضُه ‎.2‎ يبقى ‎.2‎ لا ‎.2‎ وثلاثة بكسلات */
.cd-iom {
  position: absolute; display: block; box-sizing: border-box; margin: 0;
  background: var(--iom, #ffeba2);
  border: 1.5px dashed rgba(33, 33, 33, .75);
}
.cd-iom.is-ell { border-radius: 50%; }
/* ===== الحدُّ هو الخبر =====
   منقّطٌ ⇐ قناعُ سؤالٍ يُرفع عند الجواب · مصمتٌ ⇐ قناعٌ ثابتٌ يبقى بعده.
   ولا لونَ في هذا الخبر: اللونُ مِلكُ صاحب البطاقة يختاره لما يُخفي، فلو حُمّل معنًى
   ثانيًا لَتنازع الاختيارُ والخبرُ على شيءٍ واحد */
.cd-iom.is-fix { border-style: solid; }
/* والمختارُ يُطوَّق بذهب الهويّة — طوقٌ **خارج** الشكل فلا يزحزح حدَّه ولا يبدّله */
.cd-iom.is-on { box-shadow: 0 0 0 2px var(--u-gold); }
.cd-iolay[data-tool="sel"] .cd-iom { cursor: move; }

/* ===== مقابضُ توسيع القناع =====
   ثمانيةٌ على أطرافه كمقابض النافذة: أربعةُ أضلاعٍ وأربعُ زوايا. والأضلاعُ **شرائطُ
   بلا حبر** تمتدّ على الحدّ كلِّه — المؤشّرُ وحده يقول إنّها تُشدّ، فلا نُثقل القناعَ
   الصغير بثمانية نتوءاتٍ تحجب ما تحته. والزوايا وحدَها تحمل نقطةً تُرى: هي المقصودةُ
   حين يُراد تغييرُ البعدين معًا، فتستحقّ دليلًا للعين.
   وتُزاح نصفَها إلى الخارج (‎translate‎ بالنصف) فتستقرّ **على** الحدّ لا داخله: نصفُها
   في جوف القناع ونصفُها خارجَه، فتُمسك من الحافّة كما تُمسك حافّةُ النافذة.
   والزوايا فوق الأضلاع (‎z-index‎) وإلّا ابتلعتها الشرائطُ الممتدّة عند الأركان */
.cd-iorz { position: absolute; z-index: 3; }
.cd-iorz--t { top: 0; left: 0; right: 0; height: 8px; transform: translateY(-50%); cursor: ns-resize; }
.cd-iorz--b { bottom: 0; left: 0; right: 0; height: 8px; transform: translateY(50%); cursor: ns-resize; }
.cd-iorz--l { left: 0; top: 0; bottom: 0; width: 8px; transform: translateX(-50%); cursor: ew-resize; }
.cd-iorz--r { right: 0; top: 0; bottom: 0; width: 8px; transform: translateX(50%); cursor: ew-resize; }
.cd-iorz--tl, .cd-iorz--tr, .cd-iorz--bl, .cd-iorz--br { width: 12px; height: 12px; z-index: 4; }
.cd-iorz--tl { left: 0; top: 0; transform: translate(-50%, -50%); cursor: nwse-resize; }
.cd-iorz--tr { right: 0; top: 0; transform: translate(50%, -50%); cursor: nesw-resize; }
.cd-iorz--bl { left: 0; bottom: 0; transform: translate(-50%, 50%); cursor: nesw-resize; }
.cd-iorz--br { right: 0; bottom: 0; transform: translate(50%, 50%); cursor: nwse-resize; }
/* ونقطةُ الزاوية بذهب الهويّة على حبرٍ داكن — تُقرأ على أيّ لونٍ اختاره صاحبُ القناع */
.cd-iorz--tl::after, .cd-iorz--tr::after, .cd-iorz--bl::after, .cd-iorz--br::after {
  content: ''; position: absolute; inset: 3px; border-radius: 2px;
  background: var(--u-gold); box-shadow: 0 0 0 1px rgba(33, 33, 33, .6);
}

/* ===== حَكَما القناع: ينفرجان بالاختيار =====
   عمودٌ صفريٌّ يقيس نفسَه بنفسه كشريط الخيار — والجوفُ مقصوصٌ وإلّا برزت الأزرارُ من المطويّ */
/* و‎flex: none‎ حتى لا يُنتقص منه إن ضاق اللسان: عرضُه من محتواه وحدَه، لا من الباقي.
   وهو أخو ‎.cd-chbar‎ في صفّ اللسان لا ابنُه — طيّةٌ داخل طيّةٍ لا تُقاس (‎app.js‎) */
.cd-iosel {
  flex: none;
  display: grid; grid-template-columns: 0fr; opacity: 0; pointer-events: none;
  transition: grid-template-columns .22s cubic-bezier(.22,.61,.36,1), opacity .15s ease;
}
.cd-iosel__in { min-width: 0; overflow: hidden; display: flex; align-items: center; }
.cd-iosel.is-on { grid-template-columns: 1fr; opacity: 1; pointer-events: auto; }
/* ===== ومربّعٌ خامدٌ لا حَكَمَ فيه ولا مختار =====
   الحَكَمان أخوا شريط الأدوات لا ابناه، فلا ينطويان بانطوائه من تلقاء نفسهما — ولولا
   هذه القاعدة لَبقيا مفتوحين بجنب الأيقونة وحدها بعد أن يخمد المربّع، فيُقرأ نصفَ منفرج.
   وطوقُ القناع يُطفأ معهما: «لا شيءَ محدَّد» تقال مرّةً واحدةً بكلّ ما يقولها —
   ولا يُنزع اختيارُ القناع من الحال، فمن عاد إلى الصورة وجده كما تركه */
.cd-field:not(.is-live) .cd-iosel {
  grid-template-columns: 0fr; opacity: 0; pointer-events: none;
}
.cd-field:not(.is-live) .cd-iom.is-on { box-shadow: none; }
/* ===== وحوضُ هذا اللسان أضيقُ من حوض الخيار =====
   حوضُ «المتعدّد» يسكن لسانَ خيارٍ لا مِسطرةَ تقريبٍ فوقه، فاحتمل قامةَ ‎22‎ (حشوٌ ‎2‎
   وقُرصان ‎18‎). وحوضُنا يسكن لسانَ **الحقل الأوّل**، وفوقه مِسطرةُ التقريب معلّقةٌ على
   مسافةٍ ثابتة من المربّع — فكلُّ بكسلٍ يعلوه اللسانُ يُقتطع من تلك المسافة. فعَلا اللسانُ
   إلى ‎28‎ فابتلع الفسحةَ كلَّها وزاد، حتى لامست المسطرةُ الترويسةَ.
   فرُدَّ إلى قامة إخوته (‎18‎ حبرًا و‎24‎ بحشوه): حشوُ الحوض ‎1‎ وقرصاه ‎16‎. وهي القاعدةُ
   المكتوبةُ في هذا الملفّ من قبل — ما يسكن اللسانَ لا يتجاوز قامةَ أيقونته — نُقضت هنا
   فظهر أثرُها في مكانٍ آخر بعيدٍ عن موضع النقض */
/* وبصنفين لا بصنف: قاعدةُ الحوض العامّ (‎.cd-chseg‎) مكتوبةٌ **بعد** هذه في الملفّ،
   فلو تساوى الوزنُ لَغلبها موضعُها. والوزنُ أوثق من الترتيب: لا يُنقض بنقل سطر */
.cd-chseg.cd-ioseg { padding: 1px; }
.cd-ioq, .cd-iof {
  flex: none; width: 21px; height: 16px; padding: 0; border: 0; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer; font: inherit;
  background: none; color: var(--u-lab, #7c8ba0);
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.cd-ioq svg, .cd-iof svg { width: 11px; height: 11px; display: block; }
.cd-ioseg:not(.is-fix) .cd-ioq,
.cd-ioseg.is-fix .cd-iof { background: var(--u-gold); color: #fff; box-shadow: var(--cd-lift); }
.cd-ioq:hover, .cd-iof:hover { color: var(--u-gold); }
.cd-ioseg:not(.is-fix) .cd-ioq:hover, .cd-ioseg.is-fix .cd-iof:hover { color: #fff; }
/* والسلّةُ كذلك ‎18‎ لا ‎22‎: هي في هذا اللسان لا في لسان الخيار */
.cd-iodel {
  flex: none; width: 20px; height: 18px; padding: 0; border: 0; border-radius: 0;
  display: grid; place-items: center; background: none; cursor: pointer; font: inherit;
  color: #c0455f;
}
.cd-iodel svg { width: 14px; height: 14px; display: block; }

/* ===== لوحةُ حشو القناع =====
   من جلد لوحة ألوان النصّ نفسِها (‎--cd-pan‎ وحدُّه وانحناؤه) — لوحتان في نافذةٍ واحدة
   لا يصحّ أن تفترقا سطحًا. وتنسدل من اللسان **على الصورة**: هي منه لا نافذةٌ ثانية.
   وهي ابنةُ اللسان لا ابنةُ جوفه المقصوص (‎.cd-chbar__in‎ عليه ‎overflow:hidden‎) وإلّا قُصّت.
   وألوانُها أكوادٌ صريحةٌ لا رموزُ جلد: تقع على صورةٍ لا على سطح النافذة، وتُكتب في ملفّ أنكي حرفًا */
.cd-iopal {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 7px; padding: 7px;
  border-radius: var(--cd-r); background: var(--cd-pan);
  border: 1px solid var(--cd-winline); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45);
}
.cd-iopal[hidden] { display: none; }
.cd-iopal__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.cd-iopal__sw {
  width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 6px; display: grid; place-items: center;
}
.cd-iopal__sw i {
  width: 100%; height: 100%; border-radius: 5px; display: block;
  border: 1px solid var(--cd-winline); background: var(--sw);
}
.cd-iopal__sw:hover i { border-color: var(--u-gold); }
.cd-iopal__spec { width: 20px; height: 20px; }
/* ولا شكلَ للفراغ في المتن: أقواسُه نصٌّ يُقرأ ويُحرَّر ويُحذف باليد — طريقةُ أنكي
   نفسُها. وكلُّ ما يُبدَّل حرفُه ورقمُه حسب اللغة (‎ف١‎ · ‎c1‎)، والمخزونُ ‎c1‎ أبدًا */
/* ===== الحَكَمان: مقبضٌ واحدٌ محبوسٌ في حوض =====
   المعتمدُ من مختبر ‎verdict-skin-lab‎ («د · المحبوس» بأطراف «هـ»).

   حوضٌ غائرٌ يسع خانتين، وفي إحداهما مقبضٌ مرتفعٌ ملوّن. والعمقُ يقوله ضدّان معًا:
   ظلٌّ **داخليّ** في الحوض وظلٌّ **ساقط** على المقبض — فيُقرأ «واحدٌ من اثنين» بلا كلمة،
   وهو ما عجز عنه القرصان المتجاوران قبلَه.
   وأطرافُه مستديرةٌ تمامًا (‎999px‎) حوضًا ومقبضًا معًا: الحوضُ يحضن المقبضَ بمنحنًى
   واحد، ولو خالف أحدُهما الآخرَ لَبقي بينهما فراغٌ هلاليٌّ عند الطرف.
   والخامدُ **بلا سطحٍ أصلًا** — حبرٌ خافتٌ في خانته لا قرصٌ باهت. فالمعبَّأ واحدٌ أبدًا
   وهو الجواب؛ ولو عُبّئ الاثنان لَعاد السؤالُ: أيُّهما القائم؟ */
.cd-chseg {
  flex: none; display: flex; align-items: center; gap: 0;
  padding: 2px; border-radius: 999px;
  background: var(--cd-well); box-shadow: var(--cd-well-in);
}
.cd-chok, .cd-chno {
  flex: none; width: 23px; height: 18px; padding: 0; border: 0; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer; font: inherit;
  background: none; color: var(--u-lab, #7c8ba0);
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
/* أصغرُ من الحلقة (‎18‎): العلامةُ حبرٌ في قرص، ولو ملأته تنازعا الرتبة */
.cd-chok svg, .cd-chno svg { width: 12px; height: 12px; display: block; }
.cd-ch.is-ok .cd-chok { background: var(--cd-sync); color: #fff; box-shadow: var(--cd-lift); }
.cd-ch:not(.is-ok) .cd-chno { background: #c0455f; color: #fff; box-shadow: var(--cd-lift); }
/* والمرورُ على الخامد يُلوّن حبرَه بلونه ولا يرفعه: وعدٌ بما سيصير لا خبرٌ عمّا هو */
.cd-chok:hover { color: var(--cd-sync); }
.cd-chno:hover { color: #c0455f; }
.cd-ch.is-ok .cd-chok:hover, .cd-ch:not(.is-ok) .cd-chno:hover { color: #fff; }
/* والسلّةُ حمراءُ ساكنةً بلا هالةٍ عند المرور: هي أيقونةٌ لا زرّ — ولأنّ ما وراء الخيط
   ليس من جنس ما قبله، فلا يُوحَّد شكلُهما بطوقٍ يجمعهما */
.cd-chdel {
  flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 0;
  display: grid; place-items: center; background: none; cursor: pointer; font: inherit;
  color: #c0455f;
}
.cd-chdel svg { width: 15px; height: 15px; display: block; }
/* الخيطُ الفاصل: ما قبله يبدّل صفةَ الخيار، وما بعده يمحوه — حدٌّ بين جنسين لا زينة */
.cd-chsep { flex: none; width: 1px; height: 13px; margin-inline: 3px; background: var(--u-in-line); }
/* ===== زرُّ الزيادة «الرصيف» (المختار من ‎opt-add-lab‎ — الاتّجاه د) =====
   كان حبّةً متقطّعةً صغيرةً في وسط الذيل، فبدا يتيمًا لا ينتمي لكتلة. والمطلوبُ أن يأخذ
   عرضَ المستطيلات — لكنّ صندوقًا مصمتًا بعرضها **يصير خيارًا سادسًا في العين**، وهو الفخّ.
   فالعرضُ هنا محقَّقٌ **بالخطّ لا بالصندوق**: خيطٌ يمتدّ بعرض الكتلة، والزيادةُ تجلس عليه
   في وسطه والخيطُ يمرّ خلفها — فيُغلق الكتلةَ ويقول «هنا تنتهي الخيارات وهنا تُزاد»
   بحبرٍ أقلَّ من حدٍّ محيط. ونسبُه من الموقع: الشَّرَطاتُ التي تمرّ خلف مستطيل المسار في الرصيف.
   وأيقونةٌ بلا كلمة: النتوءُ الجالسُ على خيطٍ لا يحتمل معنًى ثانيًا — والاسمُ في ‎title‎/‎aria-label‎.
   ولا ظلَّ ولا حدّ: العمقُ بالخطّ وحدَه، فيعمل في الجلدين (درسُ خارطة «الجَبْهة») */
.cd-chadd {
  position: relative; align-self: stretch;
  /* يبتلع نصفَ فجوة الوعاء (‎32px‎) فيقترب الرصيفُ من آخر خيارٍ ولا يسبح وحده في الذيل */
  margin: -16px 0 0; padding: 7px 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; color: var(--u-lab, #7c8ba0);
  background: none; border: 0; border-radius: 0;
  transition: color .15s ease;
}
.cd-chadd::before {
  content: ''; position: absolute; inset-inline: 0; top: 50%; height: 1px;
  background: var(--u-line); transition: background .15s ease;
}
/* غلافُ الأيقونة هو الذي يقطع الخيط: حشوٌ جانبيّ وأرضيّةٌ بلون سطح النافذة
   (‎--cd-win‎ هو خلفيّة ‎#card-modal .mmodal__card‎ نفسِها) — فلا يمرّ الخيطُ تحت الرمز */
.cd-chadd__ic { position: relative; display: flex; padding-inline: 7px; background: var(--cd-win); }
.cd-chadd svg { width: 13px; height: 13px; display: block; }
.cd-chadd:hover { color: var(--u-gold); }
.cd-chadd:hover::before { background: var(--u-gold-dash); }
/* والتقريبُ يقع هنا وحدَه (‎--cd-z‎ يكتبه إصبعاك في المسرح): الصندوقُ كلُّه يكبر —
   حرفُه وصورتُه وحشوُه بنسبةٍ واحدة، كما يفعل أنكي في ‎body‎. واللافتةُ ‎.cd-flab‎ أختُه
   لا ابنتُه، فتبقى على قدّها مهما قرّبتَ أو باعدت */
.cd-in {
  zoom: var(--cd-z, 1);
  min-height: 74px; padding: 10px 12px; font-size: 13.5px; line-height: 1.8;
  background: none; border: 0;   /* الجسم للغلاف ‎.cd-field‎ — هنا الكتابة وحدها */
  color: var(--u-tx);   /* لا يُترك للوراثة: نصّ النافذة أبيض (ثيمها البترولي) فيختفي على السطح الفاتح */
  outline: none; overflow-wrap: anywhere;
  /* ===== ولا يُقلب المكتوبُ بقلب اتّجاه البطاقة =====
     ‎dir‎ على الحقل يفرض اتّجاهَ **الفقرة**، والفقرةُ ترتّب مقاطعَها بهذا الاتّجاه لا
     بالقراءة. فنصٌّ عربيٌّ في فقرةٍ يساريّةٍ يتقطّع عند الأقواس والوسم إلى مقاطع،
     ثمّ تُصفّ من اليسار — فيصير «بسم الله ‎{{Ca1::الرحمن}}‎ الرحيم» على الشاشة:
     ‎الله ← بسم ← الرحمن ← الرحيم‎. وقِيس فوُجد الإنجليزيُّ في فقرةٍ يمينيّةٍ ينكسر
     مثلَه: ‎God ← name ← Bless ← the‎.
     و‎plaintext‎ يجعل اتّجاهَ كلّ فقرةٍ **من محتواها** لا من السمة: فالعربيُّ يُقرأ
     عربيًّا والإنجليزيُّ إنجليزيًّا في الحالين، وقِيس بعد العلاج فصحّ الترتيبان.
     ويبقى ‎dir‎ عاملًا حيث يعمل حقًّا: الحقلُ الخالي (لا محتوى يُستدلّ به) فيبدأ
     المؤشّرُ من الجهة المختارة، والمحاذاةُ تتبع الفقرةَ المستقرّة.
     وهو على الحقول كلِّها لا على «الفراغ» وحدَه: الكسرُ ليس من الوسم بل من الاتّجاه،
     فيصيب الوجهين والخيارات كما يصيبه */
  unicode-bidi: plaintext;
}
/* ===== والمحاذاةُ تبقى للزرّ وحدَه =====
   ‎plaintext‎ يردّ اتّجاهَ كلّ فقرةٍ إلى محتواها، ومحاذاةُ ‎start‎ تتبع ذلك الاتّجاهَ
   المستنبط — فيبقى العربيُّ يمينًا وإن قُلب الحقلُ يسارًا، ويُظنّ الزرُّ لا يعمل.
   وهما شيئان لا شيء: **ترتيبُ الحروف** من النصّ (ولا يجوز أن يُقلب)، و**موضعُ الكتلة**
   في الحقل من اختيارك (ويجوز). فتُكتب المحاذاةُ صراحةً بالجهات المرئيّة، معلَّقةً على
   السمة نفسِها التي يكتبها الزرّ — فينفصل ما يُقرأ عمّا يُوضَع.
   ومحاذاةُ اليد (زرُّ المحاذاة) تغلبها: تُكتب سطرًا في الفقرات فتعلو على الورقة */
.cd-in[dir="ltr"] { text-align: left; }
.cd-in[dir="rtl"] { text-align: right; }
.cd-in ul, .cd-in ol { margin: 4px 0; padding-inline-start: 22px; }

/* ===== منتقي مساهمة «المادة»: منبثقة بثيم نوافذ الموقع، بطاقتها نصفان عموديّان =====
   اليمين قائمة المساهمات · اليسار مستطيلات البنود تُسحب إليها ثم حفظ/إلغاء */
.pick-modal.nkwork {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vh, 40px);
  background: rgba(8, 20, 24, .58);
}
.nkwork[hidden] { display: none; }
/* html[data-theme] لترجيحه على كتلتَي التوكنات (تضبطان display لبقيّة مضيفي الجلد) */
html[data-theme] .nkwork .nkw {
  display: flex; flex-direction: column;
  width: min(1080px, 96vw); height: min(720px, 92vh);
  background: #16272b; color: var(--u-tx);
  border: 1px solid #25403f; border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .7);
}
.nkw__split {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr;
}
/* «الدكتور» قبل اختياره: لوحة التشكيل وحدها متوسّطة والقائمة مخفيّة */
.nkw__split.nkw--solo { grid-template-columns: minmax(0, 560px); justify-content: center; }
.nkw__split.nkw--solo .nkw__col--list { display: none; }
.nkw__col { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 16px clamp(14px, 2.4vw, 28px) 20px; }
/* الخط الفاصل بين النصفين: على الحافّة الداخلية للقائمة (يسارها في العربية) لا الخارجية */
.nkw__col--list { border-inline-end: 1px solid #25403f; }
.nkw__head { flex: none; margin-bottom: 8px; }
.nkw__col--side { gap: 14px; }
.nkw__pane { min-height: 0; display: flex; flex-direction: column; }
.nkw__pane--sel { flex: 1 1 auto; }
.nkw__cap {
  flex: none; margin: 0 0 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  color: var(--u-lab); text-transform: none;
}
/* لوحة التشكيل: بلا إطار — المستطيلات الخمسة وحدها، متوسّطةً في نصفها */
.nkw__paneb {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  border-radius: 14px;
  /* هامش يفصل شريط التمرير (يسارًا في العربية) عن حواف المستطيلات */
  padding-block: 10px; padding-inline: 0 12px;
  transition: background .15s;
}
.nkw__sel { padding: 0; }

/* ---------- «شكل بند المادة»: مستطيل مرقّط لكل بند، هدفٌ للإفلات ---------- */
/* صفّ الإجراءات تحت مستطيل الوصف: «حفظ» أقصى اليسار، ودائرة الاكتمال ملاصقةً ليمينه، ثم «إلغاء».
   row-reverse يجعل بداية المحور اليسار، وflex-start يرصّ الأزرار عليه */
.nkw__acts { flex: none; display: flex; align-items: center; justify-content: flex-start; flex-direction: row-reverse; gap: 10px; }
/* دائرة اكتمال التشكيل: تمتلئ بقدر ما مُلئ من البنود الخمسة */
.nkw__acts .cc-liquid { width: 22px; height: 22px; }
/* الدائرة وحدها في الطرف الآخر: هامش تلقائي يبتلع الفراغ بينها وبين الزرّين */
.nkw__acts .cc-liquid { margin-inline-end: auto; }

/* ---------- حالة النشر بجوار مفتاحه (بلا ترويسة عنوان — المستطيلات تبدأ مباشرةً) ---------- */
.nkw__pubs { font-size: 11.5px; font-weight: 800; color: var(--u-lab); }
/* مفتاح انزلاقي بثيم الموقع: بترولي مطفأ · ذهبي مشتغل */
.sw {
  flex: none; position: relative; width: 40px; height: 22px; padding: 0;
  border: 0; border-radius: 22px; cursor: pointer;
  background: var(--u-track); box-shadow: inset 0 0 0 1.5px var(--u-in-line);
  transition: background .2s, box-shadow .2s;
}
.sw__k {
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--u-btntx);
  transition: transform .2s, background .2s;
}
.sw.on { background: var(--u-gold); box-shadow: inset 0 0 0 1.5px transparent; }
.sw.on .sw__k { background: #fff; transform: translateX(-18px); }   /* عربي: المقبض ينزلق يسارًا */
html[data-lang="en"] .sw.on .sw__k { transform: translateX(18px); }
/* مقاس مصغَّر يتناسق مع أيقونتَي الحفظ والإلغاء في صفّ الإجراءات */
.sw--sm { width: 30px; height: 16px; }
.sw--sm .sw__k { top: 2px; inset-inline-start: 2px; width: 12px; height: 12px; }
.sw--sm.on .sw__k { transform: translateX(-14px); }
html[data-lang="en"] .sw--sm.on .sw__k { transform: translateX(14px); }
/* الحفظ والإلغاء أيقونتان مجرّدتان — بلا مربّع ولا حدّ ولا خلفية */
.nkw__ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--u-mut); line-height: 1;
  transition: color .15s, transform .15s;
}
.nkw__ic svg { width: 19px; height: 19px; }
.nkw__ic:hover { transform: scale(1.1); }
.nkw__ic--save { color: var(--u-gold); }
/* تشكيل ناقص = الحفظ معطَّل ورمادي */
.nkw__ic--save[disabled] { color: var(--u-fade); cursor: not-allowed; opacity: .55; }
.nkw__ic--save[disabled]:hover { transform: none; }
.nkw__ic--cancel { font-size: 16px; }
.nkw__ic--cancel:hover { color: var(--u-like); }
/* حقول التشكيل = حقول محرّر «المادة» في المكتبة نفسها (جلد ‎.pk--edit‎)، لكن واحدًا في كل صفّ */
.pkedit { margin-top: 2px; }
.pkedit .fold-peek--edit { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.pkedit .fold-peek--edit > * { width: 100%; }
.pkedit .chipe-in--book { flex: 1 1 auto; width: auto; }
/* تقييم الدكتور الكلّي بجانب اسمه: نجمة ذهبية ورقم — في مستطيل الفلتر وفي منسدلات الاختيار */
.dr-rate { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 6px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dr-rate .star { width: 11px; height: 11px; flex: none; color: #c9a25c; }
.dr-rate b { font-weight: 800; }
.mdrop-val .dr-rate, .mdrop-optnm .dr-rate { font-size: 11px; }
/* مثلّثات التقييم (الشرح/التصحيح) وعدّادات الغياب في التشكيل: مباشرةً بلا مربّعات — نهج «نسبة الترابط» */
.pkedit .chipe--rate .chipe__steps,
.pkedit .chipe--abs .chipe__steps { gap: 0; margin-inline-start: 2px; }
.pkedit .chipe--rate .chipe__steps button,
.pkedit .chipe--abs .chipe__steps button,
html[data-theme="dark"] .pkedit .chipe--rate .chipe__steps button,
html[data-theme="dark"] .pkedit .chipe--abs .chipe__steps button {
  background: transparent; border-radius: 0; width: auto; height: auto; padding: 0;
}
.pkedit .chipe--rate .chipe__steps button:hover,
.pkedit .chipe--abs .chipe__steps button:hover,
html[data-theme="dark"] .pkedit .chipe--rate .chipe__steps button:hover,
html[data-theme="dark"] .pkedit .chipe--abs .chipe__steps button:hover { background: transparent; color: var(--u-gold); }
.pkedit .chipe--rate .chipe__steps button svg,
.pkedit .chipe--abs .chipe__steps button svg { width: 12px; height: 12px; display: block; }
.pkedit .chipe--rate, .pkedit .chipe--abs { gap: 0.5px; }
/* الساعات المكتبية في التشكيل: صفٌّ لكل فترة (يكبر المستطيل بعددها) */
.pkedit .pkh-chip { flex-direction: column; align-items: stretch; gap: 7px; padding: 8px 10px; }
.pkedit .pkh-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pkedit .pkh-row .tfield { display: flex; align-items: center; gap: 4px; }
/* مواضيع المادة في التشكيل: مستطيل يكبر بعدد المواضيع — صفٌّ لكل موضوع بلا سهمَي تصفّح */
.pkedit .pkt-chip { flex-direction: column; align-items: stretch; gap: 7px; padding: 8px 10px; }
.pkedit .pkt-top { display: flex; align-items: center; gap: 6px; }
.pkedit .pkt-rows { display: flex; flex-direction: column; gap: 6px; }
.pkedit .pkt-row { display: flex; align-items: center; gap: 6px; }
.pkedit .pkt-row .tp-in--name { flex: 1 1 auto; min-width: 0; }
/* الوصف يتوسّع بحرّية بمحتواه — بلا سقف ولا تمرير داخليّ */
.pkedit .chipe-in--desc { min-height: 34px; overflow: hidden; resize: none; flex: none; }
/* استعداد الاستقبال أثناء السحب: كل الحقول مع المساهمة الكاملة · حقلٌ واحد مع بندٍ مفرد */
#pk-sel [data-slot].is-ready { outline: 2px dashed var(--u-gold); outline-offset: 3px; }

/* المسحوب يتبع المؤشّر: نسخة شبحية لا تلتقط النقر */
.nk-ghost {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  max-width: 320px; opacity: .92;
  transform: translate(-9999px, -9999px);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .35));
}
body.is-dragging { cursor: grabbing; user-select: none; }
/* المرور على منطقة «حيادية» من المساهمة (لا على بندٍ ولا على نصّها) يعني: السحب الآن يأخذها كلها،
   فتُضاء كل بنودها معًا. ‎:has‎ تكشف أن المؤشّر ليس فوق بندٍ بعينه */
.pick-modal .pkrow:hover:not(:has([data-drag="field"]:hover)) { cursor: grab; }
/* كل بنود المساهمة (مستطيلات «المادة» وشارات «الدكتور») تُضاء معًا */
.pick-modal .pkrow:hover:not(:has([data-drag="field"]:hover)) [data-drag="field"]:not(.peek-tx) {
  outline: 2px solid var(--u-gold); outline-offset: 1px;
}
.pick-modal .pkrow:hover:not(:has([data-drag="field"]:hover)) .peek-tx {
  background: var(--u-gold-hov); box-shadow: 0 0 0 3px var(--u-gold-hov); border-radius: 4px;
}
/* المرور على بندٍ بعينه (مستطيلًا/شارةً كان أو نصّ الوصف): يتوهّج وحده — السحب الآن يأخذه هو فقط */
.pick-modal .pkrow [data-drag="field"]:not(.peek-tx):hover { outline: 2px solid var(--u-gold); outline-offset: 1px; }
.pick-modal .pkrow .peek-tx[data-drag]:hover {
  background: var(--u-gold-hov); box-shadow: 0 0 0 3px var(--u-gold-hov); border-radius: 4px;
}
/* مصادر السحب: اللمس الرأسي يمرّر القائمة، والأفقي يبدأ السحب — والبنود تُسحب بأي اتجاه */
.pick-modal .pkrow { touch-action: pan-y; }
.pick-modal .pkrow [data-drag="field"] { touch-action: none; cursor: grab; }
.pick-modal .pkrow [data-drag="field"]:active { cursor: grabbing; }
html[data-theme="light"] .pick-modal.nkwork { background: rgba(20, 35, 63, .3); }
html[data-theme="light"] .nkwork .nkw { background: #fff; border-color: #d5e2e6; box-shadow: 0 26px 60px -26px rgba(20, 35, 63, .4); }
html[data-theme="light"] .nkw__col--list { border-color: #d5e2e6; }
@media (max-width: 860px) {   /* شاشة ضيّقة: النصفان يصيران صفّين */
  .nkw__split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .nkw__col--list { border-inline-start: 0; border-bottom: 1px solid #25403f; }
}
.pick-modal .cm-sortbar { margin: 0; }
.pick-modal .pk-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow: auto; }
/* المساهمة بلا صندوق: صفٌّ يضيء عند المرور بلون الموقع، وحدّ ذهبي رفيع للمختارة */
.pick-modal .pkrow {
  border-radius: 12px; padding: 8px 10px; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .15s, border-color .15s;
}
.pick-modal .pkrow:hover { background: var(--u-hov); }
.pick-modal .pkrow .post-yt { display: flex; align-items: flex-start; gap: 10px; }
.pick-modal .pkrow .fold-peek { display: block; }
/* المستطيلات داخل الصفّ: inline-flex بخطّ أساس مختلف يرفع مستطيل الكتاب عن جيرانه —
   vertical-align: middle يوحّد ارتفاعها كما في المكتبة */
.pick-modal .pkrow .fold-peek .peek-chip {
  display: inline-flex; vertical-align: middle; margin-inline-end: 6px; margin-bottom: 4px;
}
/* الوصف الطويل يُقصّ سطرين، وسهم التوسيع بعده يفكّه داخل الصفّ نفسه (بلا اختيار المساهمة) */
.pick-modal .pkrow .peek-tx {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; overflow: hidden; text-overflow: clip;
  margin-top: 6px; font-size: 12.5px; line-height: 1.85; color: var(--u-tx);
}
.pick-modal .pkrow.is-open .peek-tx { display: block; -webkit-line-clamp: unset; }
/* انطباع الدكتور داخل صفّ المنتقي: يُقصّ سطرين ويفكّه السهم نفسه */
.pick-modal .pkrow .peek-descflow {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pick-modal .pkrow.is-open .peek-descflow { display: block; -webkit-line-clamp: unset; }
/* شارات مساهمة الدكتور داخل المنتقي: تلتفّ بحرية بلا تمدّد صفّها */
.pick-modal .pkrow .peek-flow { display: flex; flex-wrap: wrap; gap: 6px; }
/* «الدرجة»: شارة التوزيع تأخذ الصفّ كاملًا كي تُقرأ دلالات البار — وطريقة التقييم تنزل تحتها.
   حاوي الشارات هنا block (لا flex) فالكسر يكون بالعرض الكامل لا بـflex-basis */
.pick-modal .pkrow .fold-peek--rich .peek-flow > .grade-chip {
  display: flex; width: 100%; box-sizing: border-box; margin-bottom: 6px;
}
.pick-modal .pkrow .grade-chip__bar { flex: 1 1 auto; min-width: 0; }
.pick-modal .pkrow .peek-flow > .v-badge, .pick-modal .pkrow .peek-flow > .chipe { flex: 0 1 auto; min-height: 27px; }
.pick-modal .pkrow__tog {
  margin-top: 2px; padding: 2px 6px; border: 0; border-radius: 7px;
  background: transparent; color: var(--u-mut); cursor: pointer;
  display: inline-flex; align-items: center;
}
.pick-modal .pkrow__tog svg { width: 14px; height: 14px; transition: transform .2s; }
.pick-modal .pkrow.is-open .pkrow__tog svg { transform: rotate(180deg); }
.pick-modal .pkrow__tog:hover { background: var(--u-hov); color: var(--u-tx-strong); }
/* صفّ التفاعل داخل المنتقي: عرضٌ فقط (دائرة الاكتمال والإبهامان بأعدادهما) —
   لا مؤشّر يد ولا تغيّر عند المرور، فالنقرة كلّها للصفّ = اختيار المساهمة */
.pick-modal .pk-react { margin-top: 7px; gap: 16px; }
.pick-modal .pk-react .post-thumb { cursor: inherit; }
.pick-modal .pk-react .post-thumb:hover { color: var(--u-mut); }
.pick-modal .pk-react .post-thumb--up.on:hover { color: #2c5e65; }
.pick-modal .pk-react .post-thumb--down.on:hover { color: #c2596a; }
html[data-theme="dark"] .pick-modal .pk-react .post-thumb--up.on:hover { color: #9fd0d8; }
html[data-theme="dark"] .pick-modal .pk-react .post-thumb--down.on:hover { color: #eaa3ae; }
.pick-modal .pk-none { margin: 0; color: var(--u-ph2); font-size: 13px; }
/* شريط تمرير القائمة ولوحة التشكيل (يقع يسارًا في العربية) بلون الموقع لا الافتراضي */
.pick-modal .pk-list,
.pick-modal .nkw__paneb { scrollbar-width: thin; scrollbar-color: var(--u-line) transparent; }
.pick-modal .pk-list::-webkit-scrollbar,
.pick-modal .nkw__paneb::-webkit-scrollbar { width: 8px; }
.pick-modal .pk-list::-webkit-scrollbar-thumb,
.pick-modal .nkw__paneb::-webkit-scrollbar-thumb { background: var(--u-line); border-radius: 8px; }
.pick-modal .pk-list::-webkit-scrollbar-thumb:hover,
.pick-modal .nkw__paneb::-webkit-scrollbar-thumb:hover { background: var(--u-in-line); }
.pick-modal .pk-list::-webkit-scrollbar-track,
.pick-modal .nkw__paneb::-webkit-scrollbar-track { background: transparent; }
/* الجلد الفاتح — ورقة بيضاء مثل بقيّة النوافذ */
html[data-theme="light"] .pick-modal { background: rgba(20, 35, 63, .3); }
html[data-theme="light"] .pick-modal .mmodal__card {
  display: flex;
  background: #ffffff; border-color: #dbe6e6; color: #35455c;
  box-shadow: 0 2px 10px rgba(20, 35, 63, .06), 0 22px 54px -26px rgba(20, 35, 63, .45);
}
html[data-theme="light"] .pick-modal .mmodal__title { color: #2c5e65; }
html[data-theme="light"] .pick-modal .mmodal__close {
  background: #fff; border-color: #dbe6e6; color: #5d6b82;
  box-shadow: 0 8px 20px -12px rgba(20, 35, 63, .5);
}
html[data-theme="light"] .pick-modal .mmodal__close:hover { background: #f4f8f8; color: #2c5e65; }

/* ===== نافذة إعدادات الترم: نفس معالجة نافذة إضافة المواد — سطح هادئ بلا تدرّج فاقع،
   وعتمة خلفية أخفّ، وورقة بيضاء في الجلد الفاتح ===== */
#date-modal { background: rgba(8, 20, 24, .58); }
#date-modal .mmodal__card {
  background: #16272b; border-color: #25403f;
  box-shadow: 0 20px 52px -24px rgba(0, 0, 0, .6);
}
html[data-theme="light"] #date-modal { background: rgba(20, 35, 63, .3); }
html[data-theme="light"] #date-modal .mmodal__card {
  background: #ffffff; border-color: #dbe6e6; color: #35455c;
  box-shadow: 0 2px 10px rgba(20, 35, 63, .06), 0 22px 54px -26px rgba(20, 35, 63, .45);
}
html[data-theme="light"] #date-modal .mmodal__title { color: #2c5e65; }
html[data-theme="light"] #date-modal .mmodal__close { border-color: #dbe6e6; color: #5d6b82; }
html[data-theme="light"] #date-modal .mmodal__close:hover { background: rgba(44, 94, 101, .09); color: #2c5e65; }
html[data-theme="light"] #date-modal .dm-field { color: #35455c; }
html[data-theme="light"] #date-modal .dm-field input[type="date"],
html[data-theme="light"] #date-modal .dm-field input[type="text"] {
  background: #fff; border-color: #dbe6e6; color: #14233f; color-scheme: light;
}
html[data-theme="light"] #date-modal .dm-field input:focus { border-color: #a8842e; }
html[data-theme="light"] #date-modal .dm-del { border-color: rgba(44, 94, 101, .35); color: #5d6b82; }
html[data-theme="light"] #date-modal .dm-courses__t { color: #35455c; }
html[data-theme="light"] #date-modal .dmc { background: rgba(44, 94, 101, .06); border-color: rgba(44, 94, 101, .16); }
html[data-theme="light"] #date-modal .dmc__n { color: #14233f; }
html[data-theme="light"] #date-modal .dmc__del { color: rgba(20, 35, 63, .45); }
.dm-body { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.dm-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: #dfeaec; }
.dm-field input[type="date"], .dm-field input[type="text"] {
  border: 1.5px solid rgba(255, 255, 255, .25); border-radius: 10px;
  background: rgba(255, 255, 255, .1); color: #fff;
  padding: 9px 12px;
  font-family: inherit; font-size: 14px;
  outline: none;
  color-scheme: dark;   /* أيقونة المنتقي الأصلية بلون فاتح */
  transition: border-color .15s;
}
.dm-field input[type="date"]:focus, .dm-field input[type="text"]:focus { border-color: var(--c-gold); }
/* صف الإجراءات: حذف (يسار، أحمر) + حفظ (يمين، ذهبي) */
.dm-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* ذهبي بحبر داكن — نفس لغة أزرار الموقع (كانت بنصّ أبيض ضعيف التباين) */
.dm-save {
  border: 0; cursor: pointer;
  background: #e1c172; color: #14233f;
  border-radius: 10px; padding: 10px 22px;
  font-family: inherit; font-size: 14px; font-weight: 800;
  transition: filter .15s;
}
.dm-save:hover { filter: brightness(1.08); }
/* الحذف: هادئ بحدّ مرقّط، يحمرّ عند المرور (نفس نهج بقية أزرار الحذف) */
.dm-del {
  border: 1.5px dashed rgba(255, 255, 255, .35); cursor: pointer;
  background: transparent; color: #d5e4e7;
  border-radius: 10px; padding: 9px 16px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  transition: background .15s, color .15s, border-color .15s;
}
.dm-del:hover { background: rgba(199, 91, 91, .4); color: #fff; border-color: transparent; }

/* ===== مواد الترم داخل نافذة الإعدادات ===== */
.dm-courses { display: flex; flex-direction: column; gap: 8px; }
.dm-courses__t {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-size: 13px; font-weight: 700; color: #dfeaec;
}
.dm-courses__t b {
  background: #e1c172; color: #14233f; border-radius: 20px;
  min-width: 22px; padding: 2px 7px; text-align: center;
  font: 800 11px/1.5 'IBM Plex Sans Arabic', sans-serif; direction: ltr;
}
.dm-courses__list {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 190px; overflow-y: auto;
}
.dmc {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px; padding: 7px 11px;
}
.dmc__n {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 13px; color: #fff;
}
.dmc__h {
  flex: none; background: #e1c172; color: #14233f; border-radius: 6px;
  padding: 2px 7px; font: 800 10.5px/1.5 'IBM Plex Sans Arabic', sans-serif;
}
.dmc__del {
  flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: transparent; color: rgba(255, 255, 255, .55); cursor: pointer;
  font-size: 12px; line-height: 1;
  transition: background .15s, color .15s;
}
.dmc__del:hover { background: rgba(199, 91, 91, .4); color: #fff; }
.dmc-none { margin: 2px 0; font-size: 12.5px; color: rgba(255, 255, 255, .55); }

/* بطاقات النافذة: النقر يضيف المادة (لا رفع صور هنا — مربّع الصورة عرض فقط) */
span.cimg { cursor: inherit; }
span.cimg:hover { border-color: #cfd9e0; color: #9fb2cc; }
.crow[data-add] { user-select: none; }
.crow[data-add]:hover .cname { color: var(--c-gold-deep); }
/* المادة المُضافة: اسمها ذهبيّ فقط — دائرة «✓» فوق البطاقة أُزيلت واستُبدلت بإشعار سفليّ */
.crow.is-added { cursor: default; }
.crow.is-added .cname { color: var(--c-gold-deep); }

/* ===== الإشعار السفليّ: يظهر أسفل الشاشة لحظة الإضافة ثم ينزوي ===== */
.toast {
  position: fixed; z-index: 120;
  inset-inline: 0; bottom: 26px; margin-inline: auto; width: max-content; max-width: 88vw;
  background: #16272b; color: #eef5f6;
  border: 1px solid #25403f; border-radius: 12px;
  padding: 11px 20px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.6;
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.toast.on { opacity: 1; transform: translateY(0); }
html[data-theme="light"] .toast {
  background: #ffffff; color: #14233f; border-color: #dbe6e6;
  box-shadow: 0 2px 10px rgba(20, 35, 63, .06), 0 16px 38px -18px rgba(20, 35, 63, .45);
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
/* داخل النافذة البترولية: نص الاسم والساعات فاتح ليُقرأ على الخلفية الداكنة */
.mmodal .cname { color: #eef5f6; }
.mmodal .chours { color: #bcd3d8; }
.mmodal .crow:hover .cname { color: #fff; }
.term-input {
  flex: none;
  width: 120px;
  border: 1.5px solid var(--c-gold); border-radius: 9px;
  padding: 7px 11px;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: 14px; font-weight: 700; color: var(--c-ink);
  outline: none; background: #fff;
}
.term-input::placeholder { color: #9fb2cc; font-weight: 400; }
/* بارتفاع مستطيل البحث في المكتبة (43px)، بلا تمطيط لطول البِيل المحدَّد */
.btn-addterm {
  flex: none; align-self: center; min-height: 43px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed #b9c8cf; background: transparent; cursor: pointer;
  border-radius: 12px; padding: 7px 18px;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--c-kfupm);
  transition: border-color .15s, background .15s;
}
.btn-addterm:hover { border-color: var(--c-kfupm); background: rgba(255, 255, 255, .7); }
/* ===== الحالة الأولى (لا ترم بعد): الزرّ يقف في موضع مستطيل البحث بالمكتبة تمامًا،
   ويمتدّ يسارًا حتى المحاذاة التي يقف عندها زرّ «تصنيفات» — إعداد أوّلي لا ارتباط دائم ===== */
.termbar--empty { min-height: 0; }
.termbar--empty .btn-addterm {
  flex: 1 1 auto; align-self: auto;
  /* بطول الخط الفاصل في المكتبة (حدّ #market-course) = كامل عرض المحتوى، بلا اقتطاع من اليسار */
  min-height: 43px;   /* ارتفاع مستطيل البحث نفسه */
  border-radius: 11px; font-size: 14px;
}

/* ============================================================
   معالج «جهّز نسختك» (ROADMAP-PICKS م1) — طبقة فوق منتقي السوق
   ============================================================ */
.wizmode > .mmodal__head, .wizmode > .market-tools, .wizmode > .mmodal__scroll { display: none; }
.wiz { display: flex; flex-direction: column; min-height: 0; }
.wiz__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.wiz__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wiz__t b {
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: 18px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wiz__prog { font-size: 11.5px; font-weight: 700; color: #e1c172; }
.wiz__secname {
  margin: 0 0 10px;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: 15px; font-weight: 700; color: #bcd3d8;
}
.wiz__body { flex: 1; min-height: 180px; max-height: 52vh; }
.wiz-empty { color: rgba(238, 245, 246, .6); font-size: 13.5px; line-height: 1.9; }

/* بطاقة الاختيار: دائرة انتقاء + الكومنت كاملًا (قراءة فقط) */
.wpick { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.wpick + .wpick, .wpick + .dr, .dr + .wpick { margin-top: 10px; }
.wpick input { position: absolute; opacity: 0; pointer-events: none; }
.wpick__dot {
  flex: none; width: 20px; height: 20px; margin-top: 14px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45);
  transition: all .15s;
}
.wpick.on .wpick__dot { border-color: #e1c172; background: radial-gradient(circle, #e1c172 0 45%, transparent 50%); }
.wpick__card {
  flex: 1; min-width: 0;
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .13);
  border-radius: 12px; padding: 10px 12px;
  transition: border-color .15s, background .15s;
}
.wpick:hover .wpick__card { border-color: rgba(225, 193, 114, .5); }
.wpick.on .wpick__card { border-color: #e1c172; background: rgba(225, 193, 114, .07); }
.wlikes { margin-inline-start: auto; font-size: 11.5px; font-weight: 700; color: #cfe0e3; direction: ltr; unicode-bidi: embed; }
.dr__head--ro { cursor: default; }
.dr__head--ro:hover { background: transparent; }

.wiz__foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.wiz-btn {
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px;
  background: transparent; cursor: pointer;
  padding: 9px 18px;
  font-family: inherit; font-size: 13px; font-weight: 700; color: #d5e4e7;
  transition: background .15s, color .15s, opacity .15s;
}
.wiz-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.wiz-btn:disabled { opacity: .35; cursor: default; }
.wiz-btn--ghost { border-style: dashed; margin-inline-start: auto; }
.wiz-btn--gold { background: var(--c-gold); border-color: transparent; color: #fff; }
.wiz-btn--gold:hover:not(:disabled) { background: var(--c-gold-deep); }

/* ============================================================
   قُمرة المادة في الرَّكن — هيكل «على ذوقي» (مربّعات فارغة بعناوينها، تُملأ لاحقًا)
   النِّسب منقولة كما هي من مختبر nook-cockpit-lab
   ============================================================ */
/* القيم منقولة حرفيًّا من مختبر nook-cockpit-lab بثيميه (لا من توكنات الواجهة —
   لأن سطح القُمرة ورقة مستقلّة بلون وحدّ وظلّ خاصّ بها) */
#nook {
  --nk-paper: #ffffff; --nk-line: #dbe6e6;
  --nk-title: #2c5e65; --nk-ink: #14233f; --nk-ink-soft: #5d6b82;
  --nk-shadow: 0 2px 10px rgba(20, 35, 63, .06), 0 8px 26px rgba(20, 35, 63, .05);
  /* سجلُّك في مربّع الدرجة: مقاسان لا يتبدّلان بالثوب، ولونان يتبدّلان */
  /* ===== ‎--gm-w‎: عرضُ مستطيل الإدخال في المواضع الثلاثة =====
     يقرؤه عمودُ خانات الدرجة وعدّادا الغياب والتأخير، فرقمٌ واحدٌ يحكم ثلاثتَها.
     ورحلتُه: ‎34‎ يومَ كان المدخلُ وحدَه، ثمّ ‎43‎ حين دخله المثلّثان، ثمّ ‎29‎ بحكم
     صاحب الموقع (ثُلثاه) — ويسعه لأنّ المدخلَ صار يهُشّ على رقمه (‎field-sizing‎)
     فلم يبقَ فيه فراغٌ يُقتطع. وأضيقُ منه يقُصّ «‎100‎»، والحاضنُ ‎overflow: hidden‎
     فيقُصّ صامتًا. والفائضُ يعود إلى عمود الأسماء في مربّع الدرجة */
  --gm-w: 29px; --gm-h: 17px; --gm-ic: 15px;
  /* وعرضُ البار توكنٌ لأنّ صفَّ الخصم تحته يحجز بقدره ليصطفّ الاسمان */
  --gm-bar: 20px;
  /* والفجوةُ بين المثلّثين والرقم مقبضٌ واحدٌ للموضعين (خانةُ الدرجة وعدّادا الغياب
     والتأخير)، فلا يُعايَر أحدُهما ويُنسى أخوه. والمرئيُّ أوسعُ من المكتوب بنحوِ
     بكسلين: بياضٌ داخلَ رقعة المثلّث وسعةُ زرّه، وهما مساحةُ النقر فلا تُلغى */
  --gm-gap: 1px;
  --nk-gm-line: #a9ccd1; --nk-gm-tx: #0f303a;
}
html[data-theme="dark"] #nook {
  --nk-paper: #16272b; --nk-line: #25403f;
  --nk-title: #34676f; --nk-ink: #e7f0f0; --nk-ink-soft: #93a9ab;
  --nk-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  --nk-gm-line: rgba(145, 205, 214, .24); --nk-gm-tx: #eef7f8;
}
/* لا ترويسة في القُمرة: الكتاب المتمركز في البِكرة هو هويّة المادة */

/* عنوان المربّع: أعلى اليمين بخطّ الهوية بلون البترولي، والمساحة تحته فارغة حتى نبنيها */
/* و‎zoom‎ على سطر العنوان وحدَه: معاملُ تصغيرٍ يُحسب في الجافا حين لا تسع حدودُ
   الأربعة عرضَ الصفّ (‎nkMinFit‎). و‎zoom‎ لا ‎transform‎: هذا يزوي الرسمَ ويترك
   المقاسَ فيبقى الفيضُ، وذاك يصغّر المقاسَ نفسَه فيدخل في الحساب.
   ولا ‎font-size‎: الخطُّ يصغر ولا تصغر حشواتُ المستطيل الذي في السطر ولا أيقونتُه */
#nook .nk-t {
  /* والاحتياطُ ‎.69‎ لا ‎1‎: هو الأصلُ المعتمَد، فيحكم اللحظةَ التي بين الرسم والقياس */
  zoom: var(--nkt-s, .69);
  margin: 0; padding: 14px 16px 0; text-align: right;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700; font-size: 15px; color: var(--nk-title);
}
#nook .nk-cal, #nook .nk-rect, #nook .nk-box, #nook .nk-sq {
  position: relative;
  background: var(--nk-paper); border: 1px solid var(--nk-line); border-radius: 16px;
  box-shadow: var(--nk-shadow);
}
/* دائرة إضافة المساهمة: مرقّطة ذهبية شفافة بعلامة + — في وسط المربّع الفارغ */
#nook .nk-pick {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px dashed rgba(201, 162, 92, .55); background: rgba(201, 162, 92, .1);
  color: #c9a25c; cursor: pointer;
  font: 300 24px/1 'IBM Plex Sans Arabic', sans-serif;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, transform .15s;
}
#nook .nk-pick:hover { background: rgba(201, 162, 92, .2); border-color: #c9a25c; transform: translate(-50%, -50%) scale(1.06); }
/* بعد الاختيار: تختفي الدائرة ويحلّ محلّها ترس ذهبي صغير مباشر (بلا دائرة) قبل عنوان البند */
#nook .nk-t { display: flex; align-items: center; gap: 5px; }
/* ===== الترسُ يغيب حتى يُقصد المربّع =====
   لا يُطلب في كلّ نظرة، فلا يُشغل صدرَ العنوان في كلّ نظرة. فيُطوى إلى **عرضٍ صفر**
   وتذهب عتمتُه، فإذا وقع الفأرُ على المربّع انفتح وانزاح العنوانُ بقدره.
   · والطيُّ بالعرض لا بـ‎display‎ ولا بـ‎visibility‎: هما وثبةٌ لا تُدرَّج، وهذان
     يتدرّجان — فينفتح الترسُ ويجرّ العنوانَ معه في حركةٍ واحدة، وهي المطلوبة.
   · و‎overflow: hidden‎ لأنّ مرسومَه ‎12‎ في صندوقٍ صار صفرًا: بدونها يبرز من جوفه
     ويُرى وهو مطويّ.
   · و‎pointer-events: none‎ وهو مطويّ: صندوقٌ عرضُه صفرٌ لا يكاد يُصاب، لكنّ حافّتَه
     تصيب — فلا تُترك نقرةٌ تقع على ما لا يُرى.
   · و‎:focus-visible‎ يفتحه أيضًا: من ساق إليه بالمفتاح لا فأرَ له يُوقعه على المربّع،
     فلولاها لَبُئِر على شيءٍ غائبٍ لا يعلم أين هو.
   والهامشُ يُدرَّج معه (‎0 → 5‎) فلا يقفز العنوانُ عند تمام الفتح */
/* وزرُّ الطيّ أخو الترس في الغياب والظهور: يُطوى إلى صفرٍ ويُفتح بقصد المربّع —
   فيُلحق بقواعده كلِّها ولا تُنسخ له نسخةٌ تفترق عنها. ويفترقان في اللون وحدَه
   (حبرٌ خافتٌ لا ذهب) وفي أنّه لا يدور عند المرور: الدورانُ إيماءةُ ترسٍ لا سهمين */
#nook .nk-gear, #nook .nk-fold {
  position: static; transform: none;
  width: 0; height: 12px; padding: 0; flex: none; overflow: hidden;
  opacity: 0; pointer-events: none; margin-inline-end: 0;
  border: 0; background: transparent; color: #c9a25c; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: width .2s ease, opacity .2s ease, margin .2s ease, color .15s, transform .15s;
}
#nook .nk-box:hover .nk-gear, #nook .nk-gear:focus-visible,
#nook .nk-box:hover .nk-fold, #nook .nk-fold:focus-visible {
  width: 12px; opacity: 1; pointer-events: auto; margin-inline-end: 5px;
}
#nook .nk-gear svg, #nook .nk-fold svg { width: 12px; height: 12px; flex: none; }
#nook .nk-fold { color: var(--nk-ink-soft); }
#nook .nk-fold:hover { background: transparent; color: #c9a25c; transform: none; }
#nook .nk-gear:hover { background: transparent; color: #b08f45; transform: rotate(35deg); }
/* عناصر المساهمة المختارة داخل المربّع — بلا هوية كاتبها */
#nook .nk-body { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 9px; }
#nook .nk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#nook .nk-desc {
  margin: 0; font-size: 12.5px; line-height: 1.85; color: var(--nk-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* شارات مساهمة الدكتور داخل مربّع ضيّق: كل شارة بسطرها بعرض العمود (لا صفّ عريض كما في المكتبة) */
#nook .nk-body .peek-flow { display: flex; flex-wrap: wrap; gap: 6px; }
#nook .nk-body .peek-flow > .v-badge,
#nook .nk-body .peek-flow > .chipe { flex: 0 1 100%; max-width: 100%; min-height: 27px; justify-content: flex-start; }
#nook .nk-body .peek-flow > .peek-flow-fill { display: none; }
#nook .nk-body .peek-flow .v-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#nook .nk-body .peek-descflow {
  flex: 1 1 100%; margin-top: 2px; font-size: 12.5px; line-height: 1.8;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* الغياب: الشريط ودلالاته في سطر واحد (الدلالات يسار كتلة الغيابات) لا سطرين */
#nook .nk-body .chipe--absview { flex-wrap: nowrap; }
/* ===== شاراتُ الغياب والدرجة على ثوب صناديق القُمرة =====
   كانت بتروليّةً مصمتةً بلونين مكتوبين لكلّ ثوبٍ حِدَة (‎#dbeaed‎ فاتحًا و
   ‎rgba(66,134,147,.19)‎ داكنًا) وحدٍّ تيّاليٍّ ولونَي نصٍّ لكلٍّ. وصارت من ثوب إخوتها:
   ورقٌ ‎--nk-paper‎ وخيطٌ ‎--nk-line‎ — تُرى بحدّها لا بأرضيّتها، كما «الحال» و«المكتب»
   وصندوقِ الهُويّة وسطرِ الكتاب وسلّةِ المواضيع وبنودِ المادة.
   وأربعُ شاراتٍ تلبسه: **الغيابُ** و**التأخيرُ** في مربّع الغياب، و**الدرجةُ**
   (التوزيع) و**طريقةُ التقييم** في مربّع الدرجة.
   ومعها ذهبت كتلةُ الوضع الداكن كلُّها: التوكناتُ تعرف الثوبين، فلا يُكتب لونٌ
   مرّتين ثمّ يُنسى أحدُهما يومَ يتبدّل الآخر. */
#nook .nk-body .v-badge--g,
#nook .nk-body .chipe--absview {
  background: var(--nk-paper); color: var(--nk-ink); border: 1px solid var(--nk-line);
}
/* والانحناءُ يتبع القامة كما في سائر الصناديق: الصغيرتان (التأخيرُ وطريقةُ التقييم)
   سبعةٌ كالشارات، والكبيرتان (عمودُ الغياب وشريطُ الدرجة) عشرةٌ كسطر الكتاب وسلّةِ
   المواضيع — ونوعيّتُهما أعلى (‎> .chipe--absview‎ و‎> .grade-chip--v‎) فتغلبان */
#nook .nk-body .peek-flow > .chipe--absview,
#nook .nk-body .peek-flow > .grade-chip--v { border-radius: 10px; }
/* شكل الشارة نفسه كمستطيلات «المادة» (نفس حجم الخط والحشوة والفراغ بين التسمية والقيمة) —
   قاعدة النشر في المكتبة لا تنطبق هنا فتسقط الشارة للأساس ‎inline-block‎ الكبير والملتصق */
#nook .nk-body .v-badge {
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; font-size: 10.5px; font-weight: 700; line-height: 1.3;
  overflow: hidden; white-space: nowrap; border-radius: 7px;
}
#nook .nk-body .v-lab { flex: none; font-style: normal; font-weight: 600; opacity: .78; color: var(--nk-ink-soft); }
#nook .nk-body .v-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 800; color: var(--nk-ink); }
#nook .nk-body .v-val--ltr { direction: ltr; }
/* نصّ الانطباع عن الدكتور بنفس لون وصف «المادة» (--nk-ink-soft) لا توكن النافذة */
#nook .nk-body .peek-descflow { color: var(--nk-ink-soft); }

/* ============================================================
   شارةُ حال الغياب — بابُ القاعة في سطر العنوان
   ============================================================
   المربّعُ كان يعرض سياسةَ المادّة وسجلَّك ولا يعرض الحكمَ بينهما. وهذه الشارةُ
   هي الحكم: **بابٌ يوارَب مع كلّ غياب**، لأنّ الحرمانَ في معناه أن يُغلق البابُ
   دونك — فالحركةُ هي المعنى نفسُه لا زينةٌ عليه.

   ===== وألوانُها ألوانُ الشريط تحتها =====
   الدوائرُ في المتن مصبوغةٌ بأربعةٍ (أخضرُ المجانيّ · أحمرُ الخصم · أسودُ الحرمان)،
   فلو صُبغت الشارةُ بلونٍ خامسٍ لَتكلّم المربّعُ لغتين. والحالاتُ ستٌّ تُردُّ إلى
   أربعةٍ، ويحمل **اللفظُ** ما لا يحمله اللون. وهي أغمقُ درجةً من الدوائر: ما يُملأ
   حبّةً يُرى، وما يُخطُّ نصًّا لا يُقرأ إلّا بحبرٍ أغمق.
   ============================================================ */
/* ولا حاويةَ مسمّاةً ههنا: كانت لتُحجب اللفظُ بشرطةٍ عند الضيق، وقد استقرّ الأمرُ
   على هيئةٍ واحدةٍ تُقصّ — فلا شرطةَ تسأل، ولا يُترك ‎container-type‎ معلّقًا:
   هو ‎contain‎ يجعل الصندوقَ كتلةً حاويةً وسياقَ تراكمٍ بلا سائلٍ يسأل */
#nook .nk-abs {
  --as-ok: #3f8a5b; --as-warn: #a8822f; --as-bad: #bf5555; --as-dead: #55606b;
}
html[data-theme="dark"] #nook .nk-abs {
  --as-ok: #74c48c; --as-warn: #d8b878; --as-bad: #e59a9a; --as-dead: #9fb0b2;
}
#nook .nk-abs__st[data-s="safe"] { --as-c: var(--as-ok); }
#nook .nk-abs__st[data-s="last"], #nook .nk-abs__st[data-s="spent"] { --as-c: var(--as-warn); }
#nook .nk-abs__st[data-s="ded"], #nook .nk-abs__st[data-s="edge"] { --as-c: var(--as-bad); }
#nook .nk-abs__st[data-s="dn"] { --as-c: var(--as-dead); }

/* ===== الشارةُ جنبَ العنوان، والعنوانُ هو الذي يهُشّ =====
   في مربّع الدكتور العنوانُ جامدٌ (‎.nk-doc__ttl { flex: none }‎) والشارةُ تنكمش،
   لأنّ «الدكتور» كلمةٌ والشارةَ جملة. وههنا الآيةُ مقلوبة: العنوانُ «الغياب
   والتأخير» خمسةَ عشرَ حرفًا والشارةُ بابٌ في خمسةَ عشرَ بكسلًا — فلو انكمشت هي
   لَذهبت، ولو جمد هو لَدفعها خارجَ الصندوق فقصّها ‎overflow‎.
   فالحكمُ: **الشارةُ جامدةٌ والعنوانُ يهُشّ** — ‎flex: none‎ لها فلا تصغر أبدًا
   مهما ضاق العمود، و‎0 1 auto‎ له فيهُشّ ويلتفّ سطرين ولا يزاحمها.
   ولا ‎min-width: 0‎ عليه: تلك تدعه ينهار إلى صفرٍ فيفيض نصُّه على الشارة نفسِها.
   فيُترك على أرضِه (‎min-width: auto‎) وقاعُه أطولُ كلماته — يهُشّ إليه ثمّ يقف،
   ويقع الفيضُ كلُّه على الشارة فتُقصّ هي وحدَها. والقصُّ مقصودٌ ههنا لا عطب.
   ولا ‎auto‎ في هامشها: تلك ترميها إلى طرف السطر بعيدةً عن عنوانها. */
/* ===== وهيئتُها واحدةٌ في كلّ عرض: ما فاض يُقصّ ولا يُبدَّل =====
   جُرّبت حبّةٌ تنكمش على البابِ وحدَه في الضيق ثمّ تنفرج عن لفظها في السَّعة، فرُدّت:
   شارةٌ تبدّل هيئتَها شارتان لا واحدة، ومن عرفها مستطيلًا لا يعرفها دائرة.
   فالحبّةُ بحشوتها ولفظها في كلّ عرض، وإن لم يسعها العمودُ خرجت من حافّته اليسرى
   وقصّها ‎overflow: hidden‎ المكتوبُ على أبناء الصفّ — فيُرى البابُ وصدرُ الجملة،
   والباقي مقصوصٌ لا محذوف. والمقصوصُ ناقصٌ يُقرأ، والمخفيُّ صفر.
   وترتيبُ جوفها هو الذي يجعل هذا مقبولًا: البابُ **أوّلُ** أبنائها فيقع في العربيّة
   أقصى اليمين — أي في الجهة الباقية — والقصُّ يأكل ذيلَ اللفظ لا العلامة. */
#nook .nk-abs__ttl { flex: 0 1 auto; }
#nook .nk-abs__st {
  flex: none; margin-inline-start: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  color: var(--as-c); background: color-mix(in srgb, var(--as-c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--as-c) 34%, transparent);
}
#nook .nk-abs__door { flex: none; display: inline-flex; }
#nook .nk-abs__door svg { width: 15px; height: 15px; display: block; }
/* ثلاثُ طبقاتٍ في البابِ الواحد: إطارُه خطٌّ، ودرفتُه مِلءٌ ينزلق، وضوءٌ يضمر معها */
#nook .nk-abs__door .fr { stroke: var(--as-c); fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
#nook .nk-abs__door .leaf {
  fill: var(--as-c); transform-origin: 3px 9px; transform: scaleX(var(--shut, .18));
  transition: transform .45s cubic-bezier(.4, 1.1, .6, 1);
}
#nook .nk-abs__door .beam {
  fill: var(--as-c); opacity: calc(.5 - var(--shut, .18) * .5);
  transform-origin: 13px 9px; transform: scaleX(calc(1 - var(--shut, .18)));
  transition: transform .45s cubic-bezier(.4, 1.1, .6, 1), opacity .45s;
}
/* واللفظُ لا يُلفّ ولا يُقصّ بنقاطٍ: القصُّ حدُّ الصندوق نفسِه، فالكلمةُ تُبتر حيث
   تنتهي الحافّة كما يُبتر ما بعدها — ولو قُصّ بثلاث نقاطٍ لَقيل «ثمّ ماذا؟» */
#nook .nk-abs__sw {
  white-space: nowrap;
  font: 700 10.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--as-c);
}
/* «الغياب» في مربّعات الركن: عموديّ ومحاذاته أقرب لليمين (لا الوسط) — العنوان فوق، الدوائر تحته، ثم الدلالات */
/* كتلة في المنطقة اليمنى: «الغياب» في الزاوية اليمنى العليا (كعنوان «توزيع الدرجة»)،
   ثم الدوائر تحتها ثم صندوق الدلالات — نوعية أعلى من قاعدة ‎.peek-flow > .chipe { flex: 0 1 100% }‎ */
#nook .nk-body .peek-flow > .chipe--absview {
  flex: 0 0 auto; max-width: none; width: min(150px, 100%);
  align-self: flex-start;   /* الكتلة كلها إلى اليمين */
  flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 12px; min-width: 0; font-size: 10.5px;
}
#nook .nk-body .chipe--absview .v-lab { align-self: flex-start; margin-bottom: 2px; }   /* العنوان يمينًا أعلى */
/* الدوائر تلي العنوان مباشرةً (يمينًا) لا متوسّطةً بعيدًا عنه */
#nook .nk-body .chipe--absview .abs-strip { align-self: flex-start; align-items: center; padding-inline-start: 8px; }
#nook .nk-body .chipe--absview .abc { width: 15px; height: 15px; font-size: 8px; }
/* الدوائر تحت بعض عموديًّا (١ فوق … DN تحت) لا في صفّ */
#nook .nk-body .chipe--absview .abs-strip { flex-direction: column; align-items: center; gap: 3px; flex: none; }
/* الدلالات: صندوق أغمق صغير متوسّط تحت الدوائر */
#nook .nk-body .abs-legbox {
  flex: none; display: flex; justify-content: center; padding: 0; background: transparent;
}
/* كل دلالة في صفّ مستقلّ: مجاني · تحتها خصم · تحتها DN */
#nook .nk-body .abs-legbox .abs-leg {
  flex: none; flex-direction: column; align-items: flex-start; gap: 4px;
  margin: 0; font-size: 8.5px; color: inherit;
  padding: 4px 8px; border-radius: 6px; background: rgba(15, 48, 58, .13);
}
#nook .nk-body .abs-legbox .abs-leg span { gap: 4px; white-space: nowrap; }
#nook .nk-body .abs-legbox .abs-leg i { width: 6px; height: 6px; }
html[data-theme="dark"] #nook .nk-body .abs-legbox { background: transparent; }
html[data-theme="dark"] #nook .nk-body .abs-legbox .abs-leg { background: rgba(0, 0, 0, .24); }

/* ============================================================
   مربّعُ الغياب بعد التضييق — من مختبر «abs-box-lab» بحكم صاحب الموقع
   ============================================================
   المقصدُ واحد: **يضيق المربّعُ الكلّيُّ وما فيه يتبعه ويتوسّط**. ولذلك اجتمعت ههنا
   خمسةٌ لا يصحّ فصلُ بعضها عن بعض:
   · العمودُ الأصفر يملأ المتاح (‎100%‎) بدل ‎150‎ ثابتة — وإلّا فاض عن مربّعٍ ضاق.
   · ويتوسّط هو وما فيه (اللسانُ والحبّاتُ والدلالات).
   · **وتذهب إزاحةُ الدلالات الثابتة** (كانت ‎translate(43px)‎): بكسلاتٌ لا تعرف كم
     ضاق المربّع، فهي وحدَها التي تكسر التوسيط مهما ضُبط غيرُها.
   · وتذهب معها إزاحةُ الحبّات عن الحافّة (كانت ‎10px‎) للعلّة عينِها.
   · ومستطيلُ التأخير يملأ ويصغر خطُّه، فلا يفيض ولا يلتفّ ثلاثةَ أسطر.
   والمُنتقيات تُطابق نظائرَها في الموقع أو تعلوها (‎> .chipe--absview‎ و‎> .v-badge--g‎):
   الأنقصُ نوعيّةً يُكتب ولا يُقرأ — وقد قِيس فوقع */
#nook .nk-body .peek-flow > .chipe--absview {
  width: 100%; align-self: stretch; align-items: center;
  padding: 8px 5px; gap: 6px;
}
#nook .nk-body .chipe--absview .v-lab { align-self: center; }
#nook .nk-body .chipe--absview .abs-strip {
  align-self: center; padding-inline-start: 0; gap: 2px;
}
/* و‎line-height: 1‎ ليتنصّف الرقمُ عموديًّا: ‎align-items: center‎ توسّط **صندوقَ
   السطر** لا الحرفَ، وصندوقُ السطر في ‎normal‎ يطول بمقدار صعود الخطّ ونزوله معًا —
   والرقمُ يجلس على خطّ القاعدة قريبًا من قاعه، فيهبط عن مركز القرص. فإذا صار صندوقُ
   السطر بقدّ الخطّ وحدَه استوى المركزان. (وهو صنيعُ حبّات المواضيع: ‎800 9px/1‎) */
#nook .nk-body .chipe--absview .abc {
  width: 13px; height: 13px; font-size: 9.5px; line-height: 1;
  border-radius: 6.5px;
}
/* ===== وحبّةُ ‎DN‎ يُطوّقها خيطٌ أبيضُ خفيف — ههنا وحدَها =====
   هي السوداءُ في عمودٍ حبّاتُه متلاصقةٌ بفجوةِ بكسلين، فتذوب حافّتُها في الحمراء
   فوقها. والطوقُ يُظهرها من غير أن يبدّل لونَها.
   و‎box-shadow‎ لا ‎border‎: الصندوقُ ‎border-box‎ في كلّ الموقع، فالحدُّ يُقتطع من
   القرص نفسِه — فيصغر السوادُ بدل أن يتبيّن، والرقمُ في جوفه يضيق. والظلُّ طوقٌ
   خارجَه لا يمسّ قدَّه ولا يدخل في تخطيطٍ أصلًا.
   وفي الثوب الداكن يكون أنفعَ ما يكون: القرصُ ‎#1f232b‎ وورقُ المربّع ‎#16272b‎ — لا
   يكاد يُفرَّق بينهما لولا هذا الخيط */
#nook .nk-body .chipe--absview .abc--dn {
  box-shadow: 0 0 0 .3px rgba(255, 255, 255, .72);
}
#nook .nk-body .abs-legbox { align-self: center; transform: none; }
/* وجسمُ الدلالات على ما عُوير أوّلًا (حشوٌ ‎1×3‎ واستدارةٌ ‎5‎ وعتمةٌ ‎.05‎): لم يُنقض،
   وإنّما سكت عنه النصُّ الأخير لأنّ مقابضَه رُفعت من اللوح بعد أن استقرّ */
#nook .nk-body .abs-legbox .abs-leg {
  font-size: 6px; gap: 0;
  padding: 1px 3px; border-radius: 5px;
  background: rgba(15, 48, 58, .05);
}
#nook .nk-body .abs-legbox .abs-leg i { width: 6px; height: 6px; }
#nook .nk-body .peek-flow > .v-badge--g {
  max-width: 100%; font-size: 6.5px; padding: 4px 5px;
}
/* ===== ومربّعُ التأخير سطران: عنوانٌ فوق ونصُّه تحته =====
   كانا في سطرٍ واحدٍ يتزاحمان في مربّعٍ ضيّق. فصار عمودًا: «التأخير» وحدَه أوّلًا
   ثمّ خبرُه. و**تُنقض ثلاثٌ** ورثها عن الشارة الصغيرة، وكلٌّ منها تُبطل السطرين لو
   بقيت: ‎align-items: center‎ (فيتوسّط العنوانُ فوق نصّه ولا يبتدئ)، و‎nowrap‎ (فلا
   يلتفّ الخبرُ الطويل)، و‎ellipsis‎ (فيُقصّ بالنقاط بدل أن ينزل سطرًا).
   والعنوانُ يكبر ‎6.5 → 10‎ وتُرفع عنه العتمةُ: هو ترويسةُ السطر الآن لا وسمًا يسبق
   قيمةً في صفّ — والخبرُ يبقى على صِغره المعاير، فالفرقُ بينهما هو الذي يجعله ترويسة */
#nook .nk-body .peek-flow > .late-badge {
  flex-direction: column; align-items: center; gap: 3px; white-space: normal;
}
/* ===== صفُّ العنوان وسجلِّك: عنوانٌ ثمّ سهمان ثمّ رقمُك =====
   المربّعان عمودان، فلولا هذا الصفُّ لَنزل السهمان سطرًا تحت العنوان ولم يكونا
   «يساره». وترتيبُ الدوم هو ترتيبُ منتقي «الترابط» عينُه: الوسمُ ثمّ المثلّثان ثمّ
   الرقم — فيُقرأ في العربيّة من اليمين: العنوانُ فالسهمان فالرقم.
   و‎align-self‎ و‎margin‎ يُبطَلان عن الوسم: كانا يزويانه ويُنزلانه حين كان ابنَ
   العمود مباشرةً، وقد صار ابنَ صفٍّ فلا معنى لهما */
/* والفجوتان لا فجوةٌ واحدة: ‎gap‎ يسوّي بين كلّ جارين في الصفّ، والمطلوبُ أن يلتصق
   الرقمُ بسهميه (فهما وهو شيءٌ واحد: مقبضٌ وقيمتُه) ويبقى العنوانُ منفصلًا عنهما.
   فتُصفَّر فجوةُ الصفّ ويُكتب لكلّ حدٍّ هامشُه: ‎4‎ بعد العنوان، و‎1‎ قبل الرقم */
#nook .nk-body .abs-hd { display: flex; align-items: center; gap: 0; }
#nook .nk-body .abs-hd > .v-lab { align-self: auto; margin: 0; margin-inline-end: 4px; }
#nook .nk-body .abs-hd .chipe__steps { gap: 0; margin-inline-start: 0; }
/* ===== والمثلّثان عاريان: لا صندوقَ تحتهما =====
   أصلُ ‎.chipe__steps button‎ زرٌّ بأرضيّةٍ واستدارة، مقيسٌ للشِبّة الذهبيّة الكبيرة.
   وههنا يُنزع الصندوقُ ويبقى المثلّثُ وحدَه — وهو صنيعُ منتقي «الترابط» عينُه
   (‏‎.pk--edit .chipe--rel‎): أرضيّةٌ شفّافةٌ واستدارةٌ صفرٌ، والإشارةُ لا تكون
   بالتظليل بل **بلون المثلّث** إذا مُرَّ عليه — ذهبيًّا كترس المربّع وأيقونةِ الموعد.
   والقدُّ يصغر (‎7‎ بدل ‎8‎، والزرُّ ‎11×7‎ بدل ‎14×9‎): ما لا صندوقَ له لا يحتاج حشوةً */
/* وعرضُ الزرّ يُردّ إلى عرض مثلّثه (‎11 → 7.5‎): الفائضُ فراغٌ لا يُرى فيُحسب فجوةً.
   فالمكتوبُ كان ‎1‎ والمرئيُّ نحوَ ‎3‎ — بكسلان منهما سعةُ زرٍّ خاوية */
#nook .nk-body .abs-hd .chipe__steps button {
  width: 7.5px; height: 7px; padding: 0; border-radius: 0;
  background: transparent; color: var(--nk-ink-soft);
}
#nook .nk-body .abs-hd .chipe__steps button:hover { background: transparent; color: #c9a25c; }
#nook .nk-body .abs-hd .chipe__steps button svg { width: 7px; height: 7px; display: block; }
/* ===== والمستطيلُ مستطيلُ خانة الدرجة =====
   ‏‎.gscw‎ نفسُها: حدُّها واستدارتُها وأرضيّتُها وقامتُها — فلا يُنسخ مستطيلٌ ثانٍ
   يُشبهه ثمّ يفترقان. ولا يُبدَّل منه إلّا ما يقتضيه الموضع: ثَمّ ينمو ليملأ عمودَ
   الخانات (‎flex: 1 1 auto‎)، وههنا يأخذ عرضَه صريحًا — و**هو عرضُه هناك بعينه**:
   ‏‎--gm-w‎ هي عرضُ عمود خانات الدرجة، فيُقرأ منها ولا يُكتب رقمٌ يُشبهه. فإن ضاق
   العمودُ يومًا أو اتّسع تبعه العدّادان بلا سطرٍ يُعدَّل.
   ورقمُك أكبرُ قليلًا من رقم الدرجة (‎11‎ لا ‎9.5‎): ذاك خانةٌ في عمودٍ من أخواتها،
   وهذا المتنُ الوحيدُ في صفّه. و‎-.5‎ مقاصّةُ بياضِ الرقعة كما في أختها */
#nook .nk-body .abs-hd .gscw { flex: none; width: var(--gm-w); }
#nook .nk-body .abs-me {
  font: 800 11px 'IBM Plex Sans Arabic', sans-serif; color: var(--nk-gm-tx);
  direction: ltr; min-width: 7px; text-align: center; margin-inline-start: var(--gm-gap);
  line-height: 1;
}
/* ===== وعناوينُ الشارات الثلاثِ بقدٍّ واحد =====
   «التأخير» و«توزيع الدرجة» و«طريقة التقييم» — كلُّها ترويسةُ شارةٍ لا وسمٌ صغير،
   فتُكتب مرّةً لثلاثتها.
   وكانت الثلاثةُ عند ‎6.5‎ لأنّ معايرةَ مربّع الغياب صغّرت **كلَّ** ‎.v-badge--g‎ في
   الرَّكن، ومربّعُ الدرجة داخلٌ في المُنتقي وإن لم يُقصد. فيُستثنى منها العنوانُ
   وحدَه ويبقى الخبرُ على صِغره — والفرقُ بينهما هو الذي يجعله ترويسة.
   والمُنتقي بالنَّسَب لا بالابن المباشر (‎ .v-lab‎ لا ‎> .v-lab‎): عنوانُ التأخير صار
   داخل صفِّ العدّاد (‎.abs-hd‎)، وعنوانا الدرجة ابنان مباشران — فيجمعهم النَّسَب */
#nook .nk-body .peek-flow > .v-badge--g .v-lab { font-size: 10px; font-weight: 700; opacity: 1; }
/* والتوسيطُ محورُه اثنان لا واحد: ‎align-items‎ توسّط الصندوقين في العمود، و‎text-align‎
   توسّط سطورَ الخبر داخل صندوقه — فلولاها لَجلست كتلةٌ متوسّطةٌ سطورُها متراصّةٌ يمينًا */
/* ===== وخبرُ الشارتين بقدّ عنوانهما =====
   «كل تأخير = …» و«‎Standard‎»: سطرٌ ثانٍ يُقرأ لا حاشيةٌ تُلمح، فيُرفعان من ‎6.5‎
   المعايَرة إلى ‎10‎ كعنوانيهما. ويُكتب لهما ثوبٌ واحد: صنيعُهما واحدٌ — سطرٌ يلتفّ
   ويتوسّط تحت ترويسته — فلا يُنسخ مرّتين ثمّ يُعدَّل أحدُهما ويُنسى الآخر */
#nook .nk-body .late-badge > .v-val,
#nook .nk-body .meth-badge > .v-val {
  font-size: 10px; line-height: 1.55;
  white-space: normal; overflow: visible; text-overflow: clip; text-align: center;
}
/* «الدرجة» في مربّعات الركن: العنوان فوق، ثم كتلة (بار عموديّ يمينًا · خطوط ملوّنة · أسماء) أقرب لليمين */
#nook .nk-body .peek-flow > .grade-chip { flex: 1 1 100%; max-width: 100%; }
/* ===== وجوفُ الدرجة يتوسّط أفقيًّا ككتلة =====
   كان مزويًّا إلى المبتدأ (‎flex-start‎) عنوانًا وبارًا. فصار العنوانُ فوقَ وسطِ
   البار، والبارُ في وسط المربّع — يتبعان عرضَه كلّما جُرّ.
   و‎align-self‎ على العنوان تُصرَّح: ‎align-items‎ حكمُ الأمّ، وله سطرٌ يخصّه كان
   يزويه — فلو تُرك لَغلب الخاصُّ العامَّ وبقي وحدَه في الزاوية */
#nook .nk-body .grade-chip--v { flex-direction: column; align-items: center; gap: 8px; }
#nook .nk-body .grade-chip--v > .v-lab { align-self: center; }
/* ===== ومستطيلُ «طريقة التقييم» سطران كالتأخير =====
   العنوانُ فوق و‎Standard‎ تحته، وكلاهما متوسّط. وتُنقض عنه الثلاثُ التي وُرثت عن
   الشارة الصغيرة كما نُقضت عن التأخير — ‎align-items: center‎ و‎nowrap‎ و‎ellipsis‎:
   كلٌّ منها وحدَها تُبطل السطرين لو بقيت.
   وصنفُه يُكتب في الترميز (‎meth-badge‎) لا يُنتقى بـ‎:not(:not())‎: سلسلةُ الاستثناء
   تصحّ اليومَ لأنّ الشارات ثلاثٌ، وتكذب يومَ تُزاد رابعة */
#nook .nk-body .peek-flow > .meth-badge {
  flex-direction: column; align-items: center; gap: 3px; white-space: normal;
}
/* (وثوبُ خبرِه مكتوبٌ مع أخيه التأخير أعلاه — سطرٌ واحدٌ للصنيع الواحد) */
/* والبارُ يتوسّط كعنوانه: كانت ‎align-self: flex-start‎ ههنا تغلب ‎align-items: center‎
   على الأمّ — وهو الفخُّ عينُه الذي في العنوان: **الخاصُّ يغلب العامَّ ولا يصيح**.
   فمن وسّط الأمَّ ولم يمسح زَوْيَ الابن رأى العنوانَ وحدَه ينتقل والكتلةَ ثابتة */
#nook .nk-body .grade-chip--v > .grade-chip__bar {
  align-self: center; flex: none; width: min(230px, 100%);
  display: flex; flex-direction: column; gap: 6px;
}
/* ===== صفُّ الخصم: بهندسة البار ليصطفّ معه =====
   خانةٌ بعرض ‎--gm-w‎ ثمّ فراغٌ بعرض ‎--gm-bar‎ ثمّ الاسم — والفجوةُ ‎8‎ كفجوة ‎.gvert‎.
   فاسمُه تحت أسماء البنود على استقامةٍ واحدة، وخانتُه تحت خاناتها.
   ومستطيلُه ‎.gscw‎ نفسُها بلا مدخل: الرقمُ محسوبٌ لا مكتوب، فلا مثلّثَ ولا بؤرة */
#nook .nk-body .gvded { display: flex; align-items: center; gap: 8px; }
#nook .nk-body .gvded .gscw { flex: none; width: var(--gm-w); }
#nook .nk-body .gvded__gap { flex: none; width: var(--gm-bar); }
/* ===== واسمُه على استقامة إخوته: يُعار صفُّ البند نفسُه =====
   كان الاسمُ ينمو من عند البار فيبتدئ يمينًا، وأسماءُ البنود تُدفع إلى المنتهى بخطٍّ
   نامٍ قبلها فتنتهي عن يسارٍ واحد. فبدل أن يُنسخ ذلك الصنيعُ يُعار: ‎.gvrow‎ بجسمها
   (خطٌّ نامٍ ثمّ اسمٌ لا ينمو، وفجوتُهما ‎6‎) — فيستوي الأربعةُ حتمًا لا اتّفاقًا،
   ولا يفترق اسمُ الخصم عن إخوته يومَ يُعدَّل مقاسُهم.
   وخطُّه محايدٌ لا ملوّن: ألوانُ الخطوط أوزانُ البنود، والخصمُ ليس منها. وهو حبرُ
   المربّع مخفَّفًا لا أبيضَ صريحًا — الأبيضُ على ورقٍ أبيضَ لا يُرى، وهذا يُقرأ في
   الثوبين ويقاربه بياضًا في الداكن */
#nook .nk-body .gvded__row { flex: 1 1 auto; min-width: 0; }
#nook .nk-body .gvded__line { background: color-mix(in srgb, var(--nk-ink) 32%, transparent); }
#nook .nk-body .gvded__v {
  font: 800 9.5px 'IBM Plex Sans Arabic', sans-serif; line-height: 1;
  color: var(--nk-gm-tx); direction: ltr;
}
/* ============================================================
   سُلَّمُ الحروف في سطر عنوان الدرجة (‎grade-ladder-lab‎: جسمُ «م» وتفصيلُ «ل»)
   ============================================================
   خطٌّ أفقيٌّ مطويٌّ قامتُه ‎8‎، يمينَه حرفُك وحدَه. فإذا قرُب المؤشّرُ اتّسع إلى ‎26‎
   وأبان ما فيه: حرفٌ فوق مداه في كلّ حزام.
   ===== ولا تُزاح الترويسةُ حين يتّسع =====
   الاتّساعُ في سطرٍ ارتفاعُه ‎20‎ يدفع المربّعَ كلَّه لأسفل، فيرقص ما تحته كلَّما مررتَ.
   فالمحورُ **مطلقٌ** في حاملٍ يحجز ‎8‎ ولا يزيد، وينمو من مركزه إلى فوقٍ وتحت —
   فالحاجزُ ثابتٌ والنموُّ خارج السَّيل.
   ===== وحيّزُ الاقتراب أوسعُ من الخطّ =====
   ‏‎8‎ بكسل هدفٌ لا يكاد يُصاد. فللحامل حشوةٌ رأسيّةٌ ‎9‎ وهامشٌ سالبٌ يعادلها: يتّسع
   ما يلتقط المؤشّرَ إلى ‎26‎ ولا يتبدّل ما يشغله في الصفّ. */
#nook .nk-gttl { flex: none; }
#nook .gld {
  --gld-c: var(--nk-ink-soft);
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
}
#nook .gld-let {
  flex: none; line-height: 1; direction: ltr; color: var(--gld-c);
  font: 800 14px 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
}
/* ورقمُك يظهر مع التفصيل: هو من «التفاصيل» لا من الشارة — والعنوانُ حرفٌ وحدَه */
#nook .gld-pct {
  flex: none; opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap;
  font: 700 10px 'KFUPM Display', monospace; direction: ltr; color: var(--nk-ink-soft);
  transition: opacity .15s ease, max-width .18s ease;
}
#nook .gld:hover .gld-pct { opacity: 1; max-width: 52px; }
#nook .gld-slot {
  position: relative; display: block; flex: 1 1 auto; min-width: 0;
  height: 8px; padding: 9px 0; margin: -9px 0;
}
/* ===== ومركزُ الحزام مركزُ الحرف =====
   كان يُزوى بـ‎top‎ مكتوبةً، وحاملُه صندوقٌ قامتُه ‎18‎ (الحشوةُ وحدَها: ‎box-sizing‎
   في الموقع ‎border-box‎، فحشوةُ ‎9+9‎ تبتلع قامةَ ‎8‎ المصرَّحة). فـ‎top: 9‎ تضع أعلاه
   في منتصف الحامل، فينزل مركزُه أربعةً تحت مركز الحرف. ثمّ ‎top: 0‎ عند الاتّساع
   تُنزله مركزًا آخر، فيهتزّ وهو يكبر.
   و‎top: 50%‎ مع ‎translateY(-50%)‎ تُلغي الحسابَ كلَّه: يتوسّط في كلّ قامةٍ يبلغها،
   فينمو من مركزه حقًّا لا تقريبًا — ولا يبقى في الجلد رقمٌ يُصان */
#nook .gld-ax {
  position: absolute; inset-inline: 0; top: 50%; height: 8px; z-index: 2;
  transform: translateY(-50%);
  display: flex; direction: ltr; border-radius: 4px; overflow: hidden;
  transition: height .18s ease, box-shadow .18s ease;
}
#nook .gld-slot:hover .gld-ax {
  height: 26px; z-index: 6; border-radius: 5px;
  box-shadow: 0 3px 12px rgba(20, 35, 63, .18);
}
html[data-theme="dark"] #nook .gld-slot:hover .gld-ax { box-shadow: 0 3px 12px rgba(0, 0, 0, .45); }
/* الأحزمةُ: كلُّها خافتةٌ بلونها وحزامُك مصمت — فيُعرف موضعُك قبل أن يُقرأ المؤشّر */
#nook .gld-b {
  flex: 1 1 0; min-width: 0; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bc) 26%, transparent);
}
#nook .gld-b.on { background: var(--bc); }
#nook .gld-b + .gld-b { border-inline-start: 1px solid var(--nk-paper); }
/* والقدُّ يُكتب أبدًا والشفافيّةُ وحدَها تتبدّل: لو كُتب القدُّ عند الاتّساع لَقفز
   الخطُّ قفزةً ثانيةً بعد قفزة القامة */
#nook .gld-b u, #nook .gld-b s {
  text-decoration: none; direction: ltr; white-space: nowrap; line-height: 1.15;
  opacity: 0; transition: opacity .14s ease;
}
#nook .gld-b u { font: 700 8.5px 'KFUPM Display', monospace; color: var(--nk-ink); }
#nook .gld-b s { font: 600 7px 'KFUPM Display', monospace; color: var(--nk-ink); }
#nook .gld-slot:hover .gld-b u { opacity: .5; }
#nook .gld-slot:hover .gld-b s { opacity: .34; }
#nook .gld-slot:hover .gld-b.on u { opacity: 1; color: #fff; }
#nook .gld-slot:hover .gld-b.on s { opacity: .92; color: #fff; }
/* والمؤشّرُ داخلَ المحور لا يبرز منه: المحورُ ‎overflow: hidden‎ ليستدير طرفاه،
   فما برز قُصّ. وطوقُه بلون الورق ليُرى على الحزام المصمت */
#nook .gld-me {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 3;
  background: var(--nk-ink); box-shadow: 0 0 0 1.5px var(--nk-paper);
  transition: left .4s cubic-bezier(.4, 1.3, .5, 1), opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  #nook .gld-ax, #nook .gld-me, #nook .gld-b u, #nook .gld-b s, #nook .gld-pct { transition: none; }
}

#nook .nk-body .gvert { display: flex; gap: 8px; height: 116px; width: 100%; }
#nook .nk-body .gvert__bar {
  flex: none; width: var(--gm-bar); display: flex; flex-direction: column;
  border-radius: 5px; overflow: hidden; background: rgba(20, 35, 63, .1);
}
html[data-theme="dark"] #nook .nk-body .gvert__bar { background: rgba(255, 255, 255, .1); }
#nook .nk-body .gvseg {
  display: flex; align-items: center; justify-content: center; min-height: 0;
  font-size: 8.5px; font-weight: 700; color: #14233f; direction: ltr; line-height: 1;
}
#nook .nk-body .gvseg--rest { background: transparent !important; }
/* البنود: كل صفّ = خطّ ملوّن (يمين، يمتدّ نحو البار) ثم الاسم (يسار) بمحاذاة عموده */
#nook .nk-body .gvert__rows { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#nook .nk-body .gvrow { display: flex; align-items: center; gap: 6px; min-height: 0; }
#nook .nk-body .gvrow__line { flex: 1 1 auto; height: 2px; border-radius: 2px; min-width: 10px; }
/* و‎0 1 auto‎ بدل ‎none‎: لمّا دخلت شارةُ الموعد الصفَّ صار فيه أربعةٌ لا ثلاثة، وأضيقُ
   المربّعات لا تسعها. والاسمُ هو الذي يُقصّ (له ‎ellipsis‎ من قبل) لا الذي يدفع غيرَه
   خارج المربّع — و‎none‎ تمنعه الانكماشَ فيفيض الصفُّ صامتًا. ولا يتبدّل شيءٌ ما دام
   في المربّع سعة: هو لا ينمو، وإنّما يقبل الانكماش عند الضيق */
#nook .nk-body .gvrow__name {
  flex: 0 1 auto; min-width: 0; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: var(--nk-ink);
}
/* ===== شارةُ الموعد: مستطيلٌ محفور («ج» من مختبر ‎RE\gm-date-lab‎) =====
   لا لونَ لها ولا خيط، وإنّما **غؤورٌ في الورق**: تلوينٌ رقيقٌ من حبر المربّع وظلٌّ
   داخليٌّ من أعلى. فتقول «هذا حقلٌ ملأتَه أنت» بلا أن تصير شارةً ثالثةً تزاحم
   الاسمَ والدرجة، وبلا أن تدّعيَ لونًا من ألوان البنود.
   والتلوينُ من ‎--nk-ink‎ لا لونٌ مكتوب، فيغور في الثوبين كليهما.
   و‎tabular-nums‎ لأنّها أرقامٌ في عمود: بلا تسويةٍ تهتزّ عروضُها من صفٍّ إلى صفّ */
#nook .nk-body .gmd {
  flex: none; direction: ltr; white-space: nowrap; font-variant-numeric: tabular-nums;
  font: 800 9px/1 'IBM Plex Sans Arabic', sans-serif; color: var(--nk-ink-soft);
  padding: 1px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--nk-ink) 7%, transparent);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--nk-ink) 16%, transparent);
}
#nook .nk-body .gvrow--rest { min-height: 0; }
/* ============================================================
   سجلُّك أنت في مربّع الدرجة — خانةُ درجةٍ وأيقونةُ موعد (‎grade-box-lab#a‎)
   ============================================================
   الخانةُ عمودٌ ثالثٌ **يمينَ البار وخارجَه**، وهو أوّلُ أبناء ‎.gvert‎ لأنّ أوّلَ
   الصفّ في العربيّة يمينُه. وارتفاعُ الخانة ثابتٌ وموضعُها بالنسبة — فبندٌ وزنُه
   ثلاثةٌ خانتُه أضيقُ منها، وهو ازدحامُ الأسماء بعينِه لا عطبٌ جديد.
   والأيقونةُ في الطرف الآخر: مرسومُنا ظاهرٌ وحقلُ ‎type="date"‎ شفّافٌ مبسوطٌ فوقه —
   فالتقويمُ تقويمُ المتصفّح، لا نبنيه ولا نصونه */
#nook .nk-body .gvert__ins { flex: none; width: var(--gm-w); display: flex; flex-direction: column; }
#nook .nk-body .gvin { display: flex; align-items: center; justify-content: center; min-height: 0; }
/* ===== مثلّثا الخانة: عاريان صغيران كمثلّثَي الغياب =====
   يُكتب لهما ما كُتب لأولئك حرفًا بحرف (لا صندوقَ ولا استدارةَ ولا حشوة، والإشارةُ
   بلون المثلّث ذهبيًّا عند المرور) — ولو نُسخ الثوبُ لَافترقا يومَ يُعدَّل أحدُهما.
   و‎flex: none‎ عليهما و‎min-width: 0‎ على المدخل: المدخلُ كان ‎width: 100%‎ وحدَه في
   الخليّة، فلو تُرك لَدفع المثلّثين خارجها.
   و‎tabindex="-1"‎ في الترميز: التنقّلُ بالمفتاح يقفز بين الخانات لا بين أزرارها */
#nook .nk-body .gsc-stp { flex: none; gap: 0; margin-inline-start: 0; }
#nook .nk-body .gstp {
  width: 7.5px; height: 7px; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--nk-ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#nook .nk-body .gstp:hover { color: #c9a25c; }
#nook .nk-body .gstp svg { width: 7px; height: 7px; display: block; }
/* ===== والصندوقُ صار للحاضن لا للمدخل =====
   ‏‎<input>‎ لا يقبل ولدًا، فلو أُريد المثلّثان داخله لَما أمكن. فنُقل عنه ما يجعله
   «مربّعًا» — الحدُّ والاستدارةُ والأرضيّة والقامة — إلى ‎.gscw‎ يضمّه ويضمّهما، وبقي
   المدخلُ نصًّا شفّافًا بلا حدٍّ في جوفه. فما تراه مربّعٌ واحدٌ فيه رقمٌ ومثلّثاه.
   ===== وحالاه تُقرآن من ابنه =====
   كان الحدُّ يُطلى بـ‎:focus‎ و‎.is-set‎ على المدخل نفسِه، وقد صار الحدُّ لغيره:
   ‏‎:focus-within‎ للبؤرة (فالمدخلُ ابنُه)، و‎:has(.gsc.is-set)‎ للمملوء — فلا يحتاج
   صنفًا ثانيًا يُوسم به من الجافا، ولا يفترق الوسمان يومَ يُعدَّل أحدُهما */
/* ===== والمثلّثان والرقمُ كتلةٌ واحدةٌ في وسط المربّع =====
   كانا يبدوان في أقصى اليمين، والعلّةُ ليست في هامشهما بل في المدخل: كان
   ‏‎flex: 1 1 auto‎ فيبتلع كلَّ ما بقي من عرض، ورقمُه يتوسّط **ما ابتلعه** لا المربّع —
   فيبتعد عنهما بقدر ما اتّسع المربّع، ويلتصقان بحافّته.
   فصار المدخلُ بعرضٍ يسع أطولَ درجةٍ ولا يزيد، والحاضنُ يوسّط ما فيه (‎justify‎):
   فالكتلةُ — مثلّثان ورقم — في الوسط، وبينهما بكسلٌ واحد.
   والتوسيطُ الرأسيُّ من ‎align-items: center‎: عمودُ المثلّثين ‎14‎ في جوفٍ ‎15‎، فمركزُه
   مركزُ المستطيل */
#nook .nk-body .gscw {
  flex: 1 1 auto; min-width: 0; height: var(--gm-h);
  display: flex; align-items: center; justify-content: center; gap: 0; padding: 0 2px;
  border: 1px solid var(--nk-gm-line); border-radius: 5px;
  background: var(--nk-paper); overflow: hidden;
}
#nook .nk-body .gscw:focus-within { border-color: #c9a25c; box-shadow: 0 0 0 2px rgba(201, 162, 92, .22); }
#nook .nk-body .gscw:has(.gsc.is-set) { border-color: #c9a25c; }
/* ===== وبقيّةُ الفجوة فراغٌ لا يُرى: يُقاصّ ولا يُلغى =====
   المكتوبُ كان بكسلًا، والمرئيُّ نحوَ عشرة. وهو مجموعُ ثلاثة فراغاتٍ خاوية:
   · **جوفُ الرقعة**: مسارُ المثلّث يشغل نصفَ عرض رقعته (‎6→18‎ من ‎24‎)، فعن يساره
     نحوُ بكسلٍ وثلاثةِ أرباع بياضٍ داخلَ الأيقونة نفسِها.
   · **سعةُ الزرّ**: ربعُ بكسلٍ فضلةً عن الرقعة.
   · **حِضنُ المدخل**: كان ‎24‎ عرضًا ورقمُه يتوسّطه، فبين حافّته ورقمِه نحوُ ثلاثة.
   والأوّلان **لا يُلغيان**: هما مساحةُ النقر — من ضيّق الزرَّ ضيّق ما يُصاب بالفأرة.
   فيُقاصّان بهامشٍ سالبٍ على المدخل (‎-2.5‎)، وهو إزاحةٌ لا تأكل شيئًا مرئيًّا.
   والحضنُ يضيق إلى ‎18‎: قدرُ «‎100‎» بخطّه وهو أطولُ درجة — ولا يُنقص عنه وإلّا قُصّ
   الرقمُ الثلاثيُّ (والحاضنُ ‎overflow: hidden‎ فلا يصيح، يقُصّ صامتًا) */
/* ===== ورقمُ المستطيل يتنصّف عموديًّا مع مثلّثيه =====
   ‏‎align-items: center‎ توسّط **صندوقَ السطر** لا الحرف. وصندوقُ السطر في ‎normal‎
   يطول بصعود الخطّ ونزوله معًا — والرقمُ يجلس على خطّ القاعدة قريبًا من قاعه، فيهبط
   عن مركز المستطيل بينما عمودُ المثلّثين متمركزٌ بحقّه (مسارُ كلٍّ منهما ‎7→17‎ من
   ‎24‎ فمركزُه مركزُ رقعته). فيُقصَر صندوقُ السطر على قدّ الخطّ في الرقمين معًا —
   خانةِ الدرجة وعدّادِ الغياب — فيستوي الثلاثةُ على محورٍ واحد.
   (وهي قاعدةُ حبّات الغياب عينُها: ‎line-height: 1‎ لكلّ رقمٍ في صندوقٍ يُوسَّط) */
#nook .nk-body .gsc {
  flex: 0 1 auto; min-width: 0; width: 18px; height: 100%; padding: 0; line-height: 1;
  /* وطريقُ الاحتياط يطرح بكسلين: حضنُه ثابتٌ ورقمُه يتوسّطه، فبينهما فراغٌ متبدّل */
  margin-inline-start: calc(var(--gm-gap) - 2px);
  border: 0; background: transparent; color: var(--nk-gm-tx);
  font: 800 9.5px 'IBM Plex Sans Arabic', sans-serif; text-align: center; direction: ltr;
}
/* ===== والنصفُ الباقي: يضيق الحضنُ بقدّ الرقم =====
   ما بقي من فجوةٍ بعد المقاصّة هو **حضنُ المدخل**: ‎18‎ عرضًا ورقمٌ يتوسّطه، فرقمٌ من
   خانتين يترك نحوَ ثلاثةٍ عن يمينه. وهو فراغٌ متبدّل: يضيق بثلاث خاناتٍ ويتّسع
   بواحدة — فلا يُضبط بهامشٍ ثابتٍ أبدًا.
   و‎field-sizing: content‎ تجعل المدخلَ يأخذ قدَّ ما فيه لا قدًّا مكتوبًا، فيذهب
   الفراغُ من أصله وتثبت الفجوةُ على حالٍ واحدةٍ مهما طال الرقم. ومعها يكفي نصفُ
   بكسلٍ مقاصّةً بدل بكسلين ونصف.
   وتُلفّ في ‎@supports‎ لأنّها حديثة: من لم يعرفها بقي على ‎width: 18px‎ وهامشِه —
   ولو تُركت ‎width: auto‎ عاريةً لَبلغ المدخلُ عشرين خانةً عند من لا يدعمها، فانهدم
   عمودُ الخانات كلُّه */
@supports (field-sizing: content) {
  #nook .nk-body .gsc {
    field-sizing: content; width: auto; min-width: 7px; max-width: 20px;
    margin-inline-start: var(--gm-gap);
  }
}
#nook .nk-body .gsc::placeholder { color: var(--nk-ink-soft); opacity: .5; font-weight: 600; }
#nook .nk-body .gsc:focus { outline: 0; }
#nook .nk-body .gcal {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--gm-ic); height: var(--gm-ic); padding: 0; border: 0; background: transparent;
  color: var(--nk-ink-soft); cursor: pointer; transition: color .15s;
}
#nook .nk-body .gcal svg { width: 100%; height: 100%; }
#nook .nk-body .gcal:hover,
#nook .nk-body .gcal.is-set { color: #c9a25c; }
#nook .nk-body .gcal input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; padding: 0; border: 0; cursor: pointer;
}
#nook .nk-body .hnav { background: rgba(15, 48, 58, .1); }
#nook .nk-body .hnav-num, #nook .nk-body .hnav-btn { color: #0f303a; }
/* (ولا كتلةَ داكنٍ ههنا للشارات: ‎--nk-paper‎ و‎--nk-line‎ و‎--nk-ink‎ تتبدّل بالثوب
   من نفسِها، فلا يبقى لونٌ مكتوبٌ مرّتين) */
html[data-theme="dark"] #nook .nk-body .hnav { background: rgba(255, 255, 255, .12); }
html[data-theme="dark"] #nook .nk-body .hnav-num, html[data-theme="dark"] #nook .nk-body .hnav-btn { color: #e7f3f4; }
/* دلالات شريط الدرجة داخل المربّع: النصّ داكن على الخلفية الفاتحة (كما في المكتبة) */
#nook .nk-body .gchip-labels .glabel__t { color: #0f303a; }
html[data-theme="dark"] #nook .nk-body .gchip-labels .glabel__t { color: #eef7f8; }
#nook .nk-cal, #nook .nk-rect { min-height: 64px; margin-bottom: 16px; }
/* ===== الصفُّ الرباعيّ: أربعُ نوافذَ مستقلّة =====
   كان شبكةً بأعمدةٍ كسريّة، وفيها يُربط الجيران ربطتين: القامةُ تُمدّ إلى أطولهم،
   والعرضُ يُقتسم فتوسيعُ واحدٍ تضييقٌ للبقيّة. فصار صفًّا مرنًا يلتفّ ورأسُه إلى
   الأعلى — فلا قامةٌ تُمَدّ ولا عرضٌ يُقتطع، وإن ضاق عن مجموعهم نزل آخرُهم سطرًا.
   والنِّسبُ الأربع هي كسورُ الشبكة القديمة نفسُها (‎.92 · .92 · 128px · 1.67‎) حتى
   يُجَرّ أوّلُ عرضٍ فتُثبَّت الأربعةُ بالبكسل (‎nkiDrag‎). و‎min-width: 0‎ ليقبل الابنُ
   الانكماشَ دون متنه، و‎max-width: 100%‎ لئلّا يفيض عرضٌ محفوظٌ عن شاشةٍ أضيقَ منه.
   و‎overflow: hidden‎ لأنّها صارت نوافذَ تُقصر: ما لا تسعه القامةُ يُقصّ ولا يتدلّى.
   ===== ولا التفافَ: سطرٌ واحدٌ أبدًا =====
   ‏‎nowrap‎ بحكم صاحب الموقع: نزولُ مربّعٍ إلى سطرٍ ثانٍ ممنوع. وحارسُه في الجافا لا
   ههنا — حدُّ التوسيع يمنع أن يتجاوز المجموعُ عرضَ الصفّ أصلًا (‎nkiDrag‎)، وهذه
   لئلّا يقع الالتفافُ في حالٍ لم تُحسب. والقامةُ لا تُقيَّد بشيءٍ من ذلك: العمودُ
   حرٌّ لأنّ الصفحةَ تطول ولا تضيق */
#nook .nk-four {
  display: flex; flex-wrap: nowrap; align-items: flex-start;
  gap: 16px; margin-bottom: 16px;
}
#nook .nk-four > * { min-width: 0; max-width: 100%; overflow: hidden; }
#nook .nk-four > :nth-child(1), #nook .nk-four > :nth-child(2) { flex: 92 1 0; }
#nook .nk-four > :nth-child(3) { flex: 0 0 128px; }
#nook .nk-four > :nth-child(4) { flex: 167 1 0; }
/* (وتضييقُ عمود الغياب إلى ‎128‎ صار في نِسَب الصفّ أعلاه، ومعه ‎--nki-w‎ التي كانت
   تقود عمودَ «المادة»: لم يبقَ عمودٌ يُقاد — كلُّ مربّعٍ يحمل عرضَه بنفسه) */
#nook .nk-box { min-height: 150px; }

/* ============================================================
   مربّع «المادة» نافذةٌ مرنة — والمقاسُ هو الذي يقرّر ما يظهر
   ============================================================
   (‏ROADMAP-NOOK-INFO-MINI.md §٧ · المختبر RE
ook-info-mini-lab)
   الطولُ مفروضٌ بالسحب (سطرٌ داخليٌّ تكتبه الجافا)، فيُرفع عنه الحدُّ الأدنى العامّ
   ‎min-height: 150px‎ وإلّا غلبه فلم يقصر أبدًا. والعرضُ يُكتب توكنًا على ‎#nook‎
   لأنّ عمودَ الشبكة هو الذي يتّسع لا المربّعُ وحدَه */
#nook .nk-box--mini { min-height: 0; overflow: hidden; }

/* ============================================================
   مربّع الدكتور المصغَّر (‎doc-mini-lab#k‎ «الجامع»)
   ============================================================
   سطرٌ يُقرأ بلمحة: صورةٌ واسمٌ وحال. وثلاثُ علاماتٍ للحال لا تتكرّر — كلٌّ تُقرأ
   على مسافةٍ غيرِ مسافة أختها: الطوقُ بلمحة، والنُّدبةُ بنظرة، واللفظُ بتدقيق.
   ============================================================ */
#nook .nk-doc {
  --dm-av: 34px; --dot: 11px; --ring: 2.5px; --cut: calc(var(--dot) / 2 + 2px);
  --dm-on: #3f8a52; --dm-off: #9aa8ad; --dm-soon: #c9902f;
  container-type: size; container-name: nkdoc;
  display: flex; flex-direction: column; align-items: stretch;
  /* والقامةُ تُكتب سطريًّا من ‎state.nkDoc.h‎، فلا ‎min-height‎ يزاحمها */
  min-height: 0;
}
html[data-theme="dark"] #nook .nk-doc { --dm-on: #5fbf7a; --dm-off: #6d7f86; --dm-soon: #e0b660; }
#nook .nk-doc[data-s="on"] { --dm-c: var(--dm-on); }
#nook .nk-doc[data-s="soon"] { --dm-c: var(--dm-soon); }
#nook .nk-doc[data-s="off"], #nook .nk-doc[data-s="none"] { --dm-c: var(--dm-off); }
/* ===== وسطرُ العنوان صفٌّ يحمل لفظَ الحال في منتهاه =====
   الترسُ ثمّ «الدكتور» ثمّ اللفظُ — وقد كان اللفظُ في صفّ الهُويّة تحته، فصار العنوانُ
   خاويًا ونصفُ عرضه معطَّل. والصفُّ مقصورٌ على مربّع الدكتور: ‎.nk-t‎ عنوانُ كلِّ
   مربّعات القُمرة، فلو بُلِّد ههنا لَبُلِّدت عناوينُها كلُّها.
   والترسُ لا يتأذّى: ‎display: inline-flex‎ و‎flex: none‎ مكتوبتان فيه أصلًا، فهو ابنٌ
   مرنٌ صالحٌ كما كان سطرًا نصّيًّا */
/* و‎gap‎ الصفِّ صفرٌ ههنا: الفجوةُ لو كانت في الصفّ لَبقيت تفصل العنوانَ عن حافّته
   والترسُ مطويٌّ — فتُكتب هوامشَ على الحدّين: هامشُ الترس يُدرَّج معه، وهامشُ اللفظ
   ثابتٌ يفصله عن العنوان */
#nook .nk-doc .nk-t { flex: none; padding: 10px 14px 0; display: flex; align-items: center; gap: 0; }
#nook .nk-doc__top {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 7px 14px 0; min-height: calc(var(--dm-av) + var(--ring) * 2);
}
/* ===== والهُويّةُ والاسمُ في مربّعٍ من ثياب إخوته =====
   ثيابُ «الحال» و«المكتب» و«البريد» واحدةٌ (‎.nk-doc__bg‎): ورقٌ **بلون ورق المربّع
   نفسِه** وخيطٌ بلون ‎--nk-line‎ — فهي تُرى بحدّها لا بأرضيّتها. ويُلبَسها ههنا الصفُّ
   الأعلى بالتوكنين عينِهما لا بلونٍ يُشبههما، فإن تبدّل الثوبُ تبدّلا معًا.
   · وهو **يهُشّ ولا يمتدّ** (‎flex‎ الافتراضيُّ ‎0 1 auto‎) كما تهُشّ إخوتُه على
     محتواها؛ و‎min-width: 0‎ ليقبل الانكماشَ فيعمل قصُّ الاسم.
   · واللفظُ (‎.nk-doc__pill‎) يبقى خارجه: شارةٌ قائمةٌ بنفسها لها ثوبُها الملوّن.
   · والاستدارةُ ‎12‎: بين ‎7‎ للشارات الصغيرة و‎16‎ للمربّع الكبير — الصندوقُ ههنا
     بينهما قامةً فليكن بينهما انحناءً.
   · والحشوةُ ‎4‎ نسبةَ حشوةِ الشارات إلى قاماتها (‎2‎ من ‎20‎)، فيهُشّ الطوقُ كما تهُشّ
     الحروف. وتُزاد في جهة الاسم وحدَها فلا يلتصق بالخيط.
   ولا يُطلى جوفُه شيئًا: ثُلمةُ الطوق تكشف ما تحتها، وما تحتها الآن ورقُ هذا
   الصندوق — وهو ورقُ المربّع عينُه، فاستوى المنظر */
#nook .nk-doc__idw {
  min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 4px; padding-inline-end: 10px;
  border-radius: 12px; background: var(--nk-paper); border: 1px solid var(--nk-line);
}
/* ===== الهُويّة: حاضنٌ لا يُقصّ · طوقٌ يُثلَم · نُدبةٌ كاملةٌ فوقهما =====
   والقصُّ يقع على الطوق وحدَه (‎mask‎)، والنُّدبةُ **أختٌ له لا بنتُه** فلا يبلغها —
   فتُرى دائرةً تامّةً تجلس في ثُلمتها. والثُلمةُ **تُترك ولا تُطلى**: لو رُسم حولها
   حدٌّ بلون الورق لَافترق عن أرضيّته يومَ تتبدّل. (قاعدةُ «ثُلمة الكتف» في أيقونة
   حكم الجواب — ثلاثُ أرضيّاتٍ ولا تُطلى.)
   ===== وإحداثيّاتُ القناع ماديّةٌ لا منطقيّة =====
   ‏‎radial-gradient(... at X Y)‎ يُقاس من اليسار أبدًا ولا ينقلب مع ‎dir‎. فالنُّدبةُ
   تُوضع بـ‎left‎ لا بـ‎inset-inline-start‎ — فيلتقي المركزان حتمًا لا اتّفاقًا. */
#nook .nk-doc__id {
  display: block; position: relative; flex: none;
  width: calc(var(--dm-av) + var(--ring) * 2); height: calc(var(--dm-av) + var(--ring) * 2);
}
/* و‎display‎ يُصرَّح: ‎<span>‎ لا يقبل قدًّا حتى يُبلَّد، والتبليدُ بحكم الصفّ المرن
   يسقط أوّلَ ما يُنقل العنصرُ إلى حاضنٍ غيرِ مرن */
#nook .nk-doc__avw {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  padding: var(--ring); box-sizing: border-box; background: var(--dm-c);
  -webkit-mask: radial-gradient(circle var(--cut) at calc(var(--dot) / 2) calc(100% - var(--dot) / 2),
    transparent 98%, #000 100%);
  mask: radial-gradient(circle var(--cut) at calc(var(--dot) / 2) calc(100% - var(--dot) / 2),
    transparent 98%, #000 100%);
}
#nook .nk-doc__av {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: var(--nk-line); display: grid; place-items: center; position: relative;
}
#nook .nk-doc__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
#nook .nk-doc__av span {
  font: 700 calc(var(--dm-av) * .38) 'IBM Plex Sans Arabic', sans-serif; color: var(--nk-title);
}
#nook .nk-doc__dot {
  position: absolute; left: 0; bottom: 0; width: var(--dot); height: var(--dot);
  border-radius: 50%; background: var(--dm-c);
}
/* ===== والاسمُ وتقييمُه عمودٌ في صفّ =====
   الصفُّ الأعلى ثلاثةٌ: الهُويّةُ ثمّ الاسمُ ثمّ لفظُ الحال. فلمّا نزل التقييمُ تحت الاسم
   لزم أن يجتمعا في عمودٍ واحدٍ يكون هو العضوَ الثاني — وإلّا صار الصفُّ أربعةً فانزاح
   اللفظُ ونزل الاسمُ عن مركزه.
   و‎min-width: 0‎ على العمود كما كانت على الاسم: بدونها لا ينكمش فيدفع اللفظَ خارج
   المربّع، فالقصُّ (‎ellipsis‎) لا يعمل إلّا في صندوقٍ يقبل الانكماش */
#nook .nk-doc__who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#nook .nk-doc__nm {
  min-width: 0; font: 700 13.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--nk-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* والتقييمُ سطرٌ تحته — وجسمُه ‎.dr-rate‎ القائمُ في الموقع (نجمةٌ ورقم)، لا رسمٌ
   ثانٍ يُشبهه: هو الذي يظهر في الفلتر والمنسدلات، فيستوي الموضعان شكلًا كما استويا
   رقمًا. ولا يُبدَّل منه إلّا ما يقتضيه موضعُه: هامشُه البادئُ يذهب لأنّه ههنا في
   أوّل سطرٍ لا ملحقٌ باسمٍ قبله */
#nook .nk-doc__all {
  display: inline-flex; align-items: center; min-width: 0;
  font: 800 11px 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--nk-ink); direction: ltr; align-self: flex-start;
}
#nook .nk-doc__all .dr-rate { margin-inline-start: 0; }
/* واللفظُ يلي العنوانَ ملاصقًا بفجوة الصفّ، ولا ينزوي إلى الزاوية:
   كانت ‎margin-inline-start: auto‎ تجمع الفضلةَ قبله فتدفعه إلى المنتهى — وذاك حسنٌ
   يومَ كان في صفّ الهُويّة يوازن الصورةَ والاسم، فلمّا صار في سطر العنوان صار نأيًا
   بلا معنى: اللفظُ خبرُ العنوان فيُقرأ معه في نظرةٍ واحدة */
/* ===== واللفظُ صار جملةً فيها رقم، فوجب أن يقبل الانكماش =====
   كان كلمةً واحدةً (‎flex: none‎) فلا يزيد على قدّها. وصار «يبدأ بعد ساعة و20 د»،
   والعمودُ يضيق ويتّسع — فإن لم ينكمش دفع نفسَه خارج المربّع فقصّه ‎overflow‎ في
   منتصف حرف. فيصير ‎0 1 auto‎ ويُقصّ بثلاث نقاط، ويُحفظ **العنوانُ** من الانكماش
   بحاملٍ ‎flex: none‎ (‏‎.nk-doc__ttl‎): كان نصًّا عاريًا فكان عضوًا مرنًا يقبل
   الانكماشَ ولا يقبل القصّ، فيُبتر «الدكتور» بترًا.
   و‎display‎ يُصرَّح: في جوفه الآن حبّةٌ ونصّ، ولولا الصفُّ لَجلست الحبّةُ على خطّ
   الأساس فارتفعت عن مركزها */
#nook .nk-doc__ttl { flex: none; }
#nook .nk-doc__pill {
  flex: 0 1 auto; min-width: 0; white-space: nowrap; margin-inline-start: 6px;
  display: inline-flex; align-items: center;
  font: 700 10.5px 'IBM Plex Sans Arabic', sans-serif; padding: 3px 10px; border-radius: 999px;
  color: var(--dm-c); background: color-mix(in srgb, var(--dm-c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--dm-c) 34%, transparent);
}
#nook .nk-doc__ptx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* ===== أيقونةُ الحال: مصباحٌ يُضاء (‎doc-status-lab#f‎) =====
   العلاماتُ الثلاثُ في المربّع ساكنةٌ كلُّها — الطوقُ والنُّدبةُ واللفظُ يقولون الحالَ
   ولا يقولون أنّها تُقاس الآن. والمصباحُ يقولها بلا لفظ: **مضاءٌ حين يكون على مكتبه**،
   مطفأٌ حين لا. وهي استعارةٌ لا زخرفة — الشعاعُ نفسُه هو الخبر.
   · الشعاعُ (‎.beam‎) مطليٌّ بـ‎currentColor‎، وحبرُ الشارة ‎--dm-c‎ — فيتبع لونَ الحال
     بلا قاعدةٍ ثانيةٍ تُصان.
   · ويتنفّس ‎3s‎ في «متاح» (‎.3‎ ⇄ ‎.85‎) فلا يقف الضوءُ ساكنًا كالمطبوع، ويثبت خافتًا
     في «قريبا» (‎.3‎) — أي: أُشعل ولم يُرفع بعدُ. ويُطفأ صفرًا في «غير متاح» و«لا
     ساعات»، فيبقى جسمُ المصباح وحدَه: مصباحٌ مطفأٌ صورةٌ مقروءةٌ لا نقصٌ في الرسم.
   · والقدُّ ‎14‎ والخيطُ ‎1.8‎ كما هما في المختبر بلا تبديل: ما رآه المستخدمُ هناك هو
     ما يراه ههنا — ولذلك لا يُغلَّظ الخيطُ في CSS كما غُلّظ في شريط النشاط. */
#nook .nk-doc__pic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  margin-inline-end: 5px;
}
#nook .nk-doc__pic svg { width: 14px; height: 14px; display: block; }
#nook .nk-doc__pic .beam { opacity: 0; }
#nook .nk-doc[data-s="on"] .nk-doc__pic .beam { animation: nkLamp 3s ease-in-out infinite; }
#nook .nk-doc[data-s="soon"] .nk-doc__pic .beam { opacity: .3; }
@keyframes nkLamp { 0%, 100% { opacity: .3; } 50% { opacity: .85; } }
/* ولمن كره الحركة: يُطفأ التنفّسُ ويبقى الضوءُ مشتعلًا — الإشعالُ خبرٌ لا حركة */
@media (prefers-reduced-motion: reduce) {
  #nook .nk-doc[data-s="on"] .nk-doc__pic .beam { animation: none; opacity: .7; }
}
/* ===== الطبقاتُ: مخفيّةٌ في الأصل وتُكشف بالقامة =====
   ‏‎container-type: size‎ يقطع أثرَ المحتوى في القدّ، فالمربّعُ **لا يطول بما فيه** —
   أنت تعطيه القامةَ وهو يختار ما يعرضه فيها. ولو بُنيت الطبقاتُ ظاهرةً وأُخفيت
   بالضيق لَظهرت كلُّها لحظةَ التحميل ثمّ اختفت. */
#nook .nk-doc__t { display: none; flex: none; padding: 6px 14px 0; }
#nook .nk-doc__row { display: flex; flex-wrap: wrap; gap: 5px; }
/* وثوبُ الشارة يُكتب مرّةً ويلبسه الاثنان: ‎.nk-doc__bg‎ في مربّع الدكتور («الحال»
   و«المكتب» و«البريد») و‎.nkm-bx‎ في مربّع المادة (اللغةُ والنوعُ والاعتماد) — فإن
   تبدّل تبدّلا معًا، ولا يُنسخ ثوبٌ لينفرد أحدُهما بتبدّلٍ لا يبلغ أخاه */
#nook .nk-doc__bg, #nook .nkm-bx {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px;
  border-radius: 7px; background: var(--nk-paper); border: 1px solid var(--nk-line);
}
#nook .nk-doc__bg i, #nook .nkm-bx i { font: 500 10.4px 'IBM Plex Sans Arabic', sans-serif; color: var(--nk-ink-soft); font-style: normal; }
#nook .nk-doc__bg b, #nook .nkm-bx b { font: 700 10.8px 'IBM Plex Sans Arabic', sans-serif; color: var(--nk-ink); }
/* ===== وصندوقُ الوصف: كبيرٌ فينحني كإخوته الكبار =====
   ‏‎display: block‎ يُصرَّح لأنّ الوصفَ في جوفه فقرةٌ مقصوصةٌ بـ‎-webkit-box‎، وأبناءُ
   المرن يُبلَّدون فيسقط القصُّ. والانحناءُ ‎10‎ كسطر الكتاب وسلّةِ المواضيع: قامتُه
   قامتُهما لا قامةَ الشارات الصغيرة */
#nook .nkm-bx--d {
  display: block; align-self: flex-start; max-width: 100%;
  padding: 5px 8px; border-radius: 10px;
}
#nook .nk-doc__ltr { direction: ltr; }
/* ===== والعتباتُ تُزاح ‎10‎ لأنّ الصفَّ طال ‎10‎ =====
   الصندوقُ زاد حشوةً وخيطًا في الطرفين: ‎(4+1) × 2 = 10‎. والمربّعُ ‎overflow: hidden‎
   لا ينمو بما فيه (‎container-type: size‎)، فلو تُركت العتباتُ لَكُشفت الطبقةُ في
   قامةٍ لم تعد تسعها فقُصّت. فتُزاح كلُّها بالمقدار عينِه: يُحفظ ما بين كلِّ طبقةٍ
   وقامتِها من نسبةٍ عُويرت في المختبر، ولا تتبدّل تجربةُ السحب */
/* ولمّا ذهبت «الحال» رُقّي مَن بعدها درجةً: لو تُركت العتباتُ لَبقي ما بين ‎74‎ و‎105‎
   قامةً لا تكشف شيئًا — رتبةٌ خاويةٌ في السلّم. فيأخذ كلُّ باقٍ درجةَ من قبله */
@container nkdoc (min-height: 74px) { #nook .nk-doc__t--where { display: block; } }
@container nkdoc (min-height: 106px) { #nook .nk-doc__t--mail { display: block; } }
@container nkdoc (min-height: 138px) { #nook .nk-doc__t--hrs { display: block; } }
@container nkdoc (min-height: 178px) { #nook .nk-doc__t--rate { display: block; } }
@container nkdoc (min-height: 224px) { #nook .nk-doc__t--desc { display: block; } }
/* ===== ووصفُ الدكتور: صندوقٌ من ثوب إخوته يقُصّ بالقامة =====
   ثوبُه ثوبُ «الحال» و«المكتب» (‎--nk-paper‎ و‎--nk-line‎) لأنّه أخوهما في السلّم،
   وانحناؤه ‎10‎ لا ‎7‎: قامتُه ثلاثةُ أسطرٍ لا سطر، والانحناءُ يتبع القامة.
   ويهُشّ كإخوته (‎align-self‎ لا يصلح ههنا: حاملُه ‎.nk-doc__row‎ صفٌّ يلتفّ، فالهشُّ
   بـ‎max-width‎ وبأنّه ابنٌ مرنٌ لا ينمو).
   والقصُّ ثلاثةُ أسطرٍ ثابتة: مربّعُ الدكتور لا يقيس في الجافا — طبقاتُه تُكشف
   بـ‎@container‎ في الجلد وحدَه — فلا سبيلَ إلى قصٍّ يتبع الفراغَ كما في «المادة» */
#nook .nk-doc__d {
  margin: 0; min-width: 0; max-width: 100%;
  padding: 4px 8px; border-radius: 10px;
  background: var(--nk-paper); border: 1px solid var(--nk-line);
  font: 500 10.5px/1.65 'IBM Plex Sans Arabic', sans-serif; color: var(--nk-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* ===== وعند الضيق تنكمش الشارةُ ولا تذهب =====
   كانت تُخفى دون ‎250‎ ويُترك الطوقُ والنُّدبة. وذاك حسنٌ يومَ كانت كلمةً تكرّر ما
   يقوله اللونُ أصلًا — فلمّا صارت تحمل **رقمًا لا يقوله غيرُها** («يبدأ بعد ساعة
   و20 د») صار إخفاؤها إخفاءَ خبر: يضيق العمودُ فيسقط الوقتُ كلُّه، ولا يبقى إلّا
   لونٌ يقول «ليس الآن» ولا يقول متى.
   فالحكمُ انقلب: لا تذهب أبدًا. تنكمش (‎flex: 0 1 auto‎) ويُقصّ لفظُها بثلاث نقاط،
   وتُشدّ ههنا حشوتُها وفجوةُ حبّتها وفجوةُ الصفّ فيتّسع للحروف ما كان يأخذه الفراغ —
   فالمقصوصُ ناقصٌ يُقرأ، والمخفيُّ صفر. وأدنى ما تبلغه: الحبّةُ وحرفٌ أو حرفان،
   وهي في قامتها لا تنزل ولا تزيح ما تحتها */
@container nkdoc (max-width: 250px) {
  #nook .nk-doc__pill { padding: 3px 6px; }
  #nook .nk-doc__pic { margin-inline-end: 4px; }
  #nook .nk-doc .nk-t { gap: 4px; }
}
#nook .nkm {
  height: 100%; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; padding: 11px 13px;
}
/* ===== عنوانُ «المادة» صفٌّ: اللفظُ ثمّ الكتاب =====
   حشوتُه صفرٌ لأنّه ساكنُ الجوف لا سابقٌ له. وخطُّه يصغر من ‎14‎ إلى ‎12‎: صار في السطر
   ضيفٌ ذو قامة (غلافٌ ‎22‎ واسمُه)، فيتنحّى اللفظُ قدرًا ليتّسق معه — وهو اللفظُ
   الذي لا يحمل خبرًا، والكتابُ هو الخبر.
   و‎flex: none‎ على اللفظ ليُقصّ الكتابُ دونه: اسمُ الكتاب له ‎ellipsis‎، و«المادة»
   كلمةٌ إن قُصّت لم يبقَ منها شيءٌ يُفهم */
#nook .nkm .nk-t {
  padding: 0; font-size: 12px;
  display: flex; align-items: center; gap: 0; min-width: 0;
}
/* ولفظُ «المادة» على قدّه الذي كان (‎14‎): المقصودُ بالتصغير اسمُ الكتاب لا هو.
   ويُكتب عليه لا على الصفّ لأنّ الصفَّ يورّث كلَّ ما يُلحق به يومًا */
#nook .nk-ittl { flex: none; margin-inline-end: 6px; font-size: 14px; }
/* والكتابُ في السطر: يهُشّ ويقبل الانكماشَ، ولا يزوي نفسَه كما كان في العمود */
#nook .nkm .nk-t .nkm-bk { flex: 0 1 auto; align-self: auto; }
/* واسمُه سطرٌ واحدٌ ههنا لا سطران: السطران يرفعان قامةَ العنوان إلى ضعفها، والعنوانُ
   سطرٌ في الأربعة كلِّها */
#nook .nkm .nk-t .nkm-bk__n { -webkit-line-clamp: 1; font-size: 7px; }
#nook .nkm .nk-chips { gap: 5px; }
/* بذرةٌ لا حكم: ‎nkInfoFill‎ يكتب العددَ سطريًّا بعد القياس فيغلب هذا. وتبقى ههنا
   لئلّا يُرى النصُّ كلُّه في اللحظة التي بين الرسم والقياس */
#nook .nkm-desc { -webkit-line-clamp: 3; }

/* ===== سطرُ الكتاب: غلافٌ صغير واسمُه — وهو الذي لا يسقط مهما قصر المربّع =====
   ويلبس ثوبَ إخوته في القُمرة: ورقٌ **بلون ورق المربّع نفسِه** وخيطٌ ‎--nk-line‎ —
   بالتوكنين عينِهما اللذين لـ‎.nk-doc__bg‎ («الحال» و«المكتب») ولـ‎.nk-doc__idw‎
   (صندوقُ الهُويّة)، فإن تبدّل الثوبُ تبدّلت كلُّها.
   · و‎align-self: flex-start‎ ليهُشّ كما تهُشّ إخوتُه: ‎.nkm‎ عمودٌ مرن، فبدونها يمتدّ
     الصندوقُ عرضَ المربّع فيصير شريطَ ترويسةٍ لا شارة. ومع ذلك **لا يخنق الاسمَ**:
     ‏‎fit-content‎ تعني «بقدر ما يحتاج، إلى حدّ المتاح» — فالقصيرُ يهُشّ والطويلُ يبلغ
     الحافّةَ ويلتفّ سطرين كما كان (‎line-clamp: 2‎ على حاله).
   · والاستدارةُ ‎10‎: بين ‎7‎ للشارات (قامتُها ‎~16‎) و‎12‎ لصندوق الهُويّة (‎~47‎)،
     وهذا بينهما (‎~30‎) — الصندوقُ يتبع قامتَه في انحنائه.
   · والحشوةُ تُزاد في جهة الاسم وحدَها فلا يلتصق بالخيط، والغلافُ لا يحتاجها.
   ولا تُمسّ عتبةٌ في الجافا: مربّعُ «المادة» يُملأ **بالقياس** لا بأرقامٍ مكتوبة
   (‏‎nkInfoFill‎ يضع ثمّ يسأل «هل فِضتَ؟»)، فطولُ السطرِ بحشوته وخيطه داخلٌ في الحكم
   من نفسِه — وتنقص المواضيعُ موضوعًا إن لزم، بلا سطرٍ يُعدَّل */
#nook .nkm-bk {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  align-self: flex-start; max-width: 100%;
  padding: 4px; padding-inline-end: 9px;
  border-radius: 10px; background: var(--nk-paper); border: 1px solid var(--nk-line);
}
#nook .nkm-bk__c { flex: none; height: 22px; width: 18px; display: flex; align-items: center; perspective: 220px; }
#nook .nkm-bk__c .bk { height: 22px; --thk: 3px; --r: 1.5px; }
#nook .nkm-bk__c .bk--xs { height: 22px; }
/* الغلافُ البديل (مادّةٌ بلا صورة): حرفُه مقيسٌ لخمسٍ وعشرين لا لثمانٍ وأربعين،
   وإلّا فاض القسمُ والرقمُ عن وجهٍ صار ثُلثَ ما كان */
#nook .nkm-bk__c .bk--ph .bkface { padding: 2px; gap: 0; }
#nook .nkm-bk__c .bk--ph .bkface b { font-size: 5px; line-height: 1.1; letter-spacing: normal; }
#nook .nkm-bk__c .bk--ph .bkface i { font-size: 8px; }
#nook .nkm-bk__n {
  min-width: 0; font-size: 12.5px; font-weight: 800; line-height: 1.35; color: var(--nk-ink);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* المواضيع: ثلاثُ هيئاتٍ يختار العرضُ بينها — صفوفٌ · عمودان · حبّاتٌ بلا أسماء.
   وألوانُها من ‎--nk-*‎ صراحةً: توكناتُ ‎--u-*‎ مقصورةٌ على ‎#cm-ui‎ فتسقط ههنا صامتة */
#nook .nkm-tps { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#nook .nkm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; min-width: 0; }
#nook .nkm-dots { display: flex; flex-wrap: wrap; gap: 4px; }
/* ===== والسلّةُ — أيَّ هيئةٍ لبست — صندوقٌ من ثوب إخوتها =====
   ورقٌ ‎--nk-paper‎ وخيطٌ ‎--nk-line‎: توكنا «الحال» و«المكتب» وصندوقِ الهُويّة وسطرِ
   الكتاب. والثلاثةُ تُجمع في قاعدةٍ واحدةٍ تلي تعريفاتِها: هيئتُها تختلف (عمودٌ ·
   شبكةٌ · حبّاتٌ ملتفّة) وثوبُها واحد.
   · ‎align-self: flex-start‎ ليهُشّ كسطر الكتاب لا يمتدّ شريطًا. و‎fit-content‎ لا
     تخنق شيئًا: القصيرُ يهُشّ، والطويلُ يبلغ الحافّة ويقُصّ اسمَه بالنقاط كما كان.
   · و«‎+N‎ موضوعًا» في ذيله من داخله — وتُعطى سطرًا كاملًا في كلّ هيئة، وإلّا أخذت
     خليّةً من خلايا الشبكة أو جرت مع الحبّات كأنّها إحداهنّ.
   ولا عتبةَ تُعدَّل: ‎nkInfoFill‎ يُلحق السلّةَ فارغةً ثمّ يسألها «هل فِضتِ؟» قبل أن
   يضع فيها موضوعًا — فحشوتُها وخيطُها داخلان في الحكم، وإن لم يسعها المربّعُ رُدّت
   ولم يبقَ صندوقٌ خاوٍ (‎if (!n) wrap.remove()‎) */
#nook .nkm-tps, #nook .nkm-cols, #nook .nkm-dots {
  align-self: flex-start; max-width: 100%;
  padding: 5px 7px;
  border-radius: 10px; background: var(--nk-paper); border: 1px solid var(--nk-line);
}
#nook .nkm-tp { display: flex; align-items: center; gap: 6px; min-width: 0; }
#nook .nkm-o {
  flex: none; width: 15px; height: 15px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e1c172; color: #14233f;
  font: 800 9px/1 'IBM Plex Sans Arabic', sans-serif; direction: ltr;
}
#nook .nkm-t {
  min-width: 0; font-size: 11px; line-height: 1.5; color: var(--nk-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#nook .nkm-cols .nkm-t { font-size: 10.5px; }
#nook .nkm-g { font-style: normal; font-weight: 800; color: #c9a25c; margin-inline-end: 4px; }
#nook .nkm-more {
  align-self: flex-start; border: 0; background: transparent; cursor: pointer; padding: 0;
  font-family: inherit; font-size: 10.5px; font-weight: 800; color: #c9a25c;
}
#nook .nkm-more:hover { text-decoration: underline; }
/* ===== و«‎+N‎» سطرٌ كامل، لا خليّةٌ ولا حبّة =====
   في العمود (‎.nkm-tps‎) هي كذلك من نفسها. وفي الشبكة تُمدّ على الأعمدة كلِّها
   (‎1 / -1‎) وتُزوى إلى المبتدأ فتهُشّ على نصّها. وفي الحبّات ‎flex-basis: 100%‎
   يكسر السطرَ حتمًا فتنزل وحدَها — ومعها ‎text-align: start‎ لأنّ ‎<button>‎ يوسّط
   نصَّه في الأصل، فلولاها لَجلست في وسط سطرٍ عرضُه عرضُ السلّة */
#nook .nkm-cols .nkm-more { grid-column: 1 / -1; justify-self: start; }
#nook .nkm-dots .nkm-more { flex: 0 0 100%; text-align: start; }

/* المقابض: على الحافّة اليسرى وعلى الذيل — تسكن حشوةَ المربّع فلا تحجب متنًا،
   وتغيب حتى يُقصد المربّع (تظهر بالمرور عليه) */
#nook .nki-rz {
  position: absolute; background: var(--nk-title); opacity: 0; border-radius: 5px;
  transition: opacity .14s; touch-action: none; z-index: 3;
}
/* والمقابضُ تُلمح على أيّ مربّعٍ من الأربعة، لا على المصغّرين وحدَهما */
#nook .nk-box:hover .nki-rz { opacity: .14; }
#nook .nki-rz:hover, #nook .nki-rz.on { opacity: .5; }
#nook .nki-rz--w { left: 0; top: 10px; bottom: 16px; width: 6px; cursor: ew-resize; }
#nook .nki-rz--h { bottom: 0; left: 16px; right: 10px; height: 6px; cursor: ns-resize; }
#nook .nki-rz--c { left: 0; bottom: 0; width: 12px; height: 12px; border-radius: 4px; cursor: nesw-resize; }
/* ===== وصفُّ الاثنين صار واحدًا =====
   كان عمودين لمربّعين، ثمّ لم يبقَ فيه إلّا «تقدمي الذاتي» — فكان يقف في العمود الأوّل
   ونصفُ العرض إلى جانبه خلاء. وشجرةُ الرحلة أحوجُ ما تكون إلى العرض: أسماءٌ تُقصّ
   بـ‎--cx-nm-w‎ وأخبارٌ سبعةٌ في طرف الصفّ ومحطّاتٌ تُزاح بعمقها.
   فصار عمودًا واحدًا يملأ المدى. والاسمُ باقٍ على حاله: تبديلُه يمسّ ثلاثةَ مواضعَ
   في الجافا والجلد بلا مقابل */
#nook .nk-two { display: grid; grid-template-columns: 1fr; gap: 16px; }
#nook .nk-sq { min-height: 260px; }
/* ============================================================
   «رحلتي» — شجرةُ المحرّر نفسُها، ومحطّاتُها دوائرُ المواضيع
   ============================================================
   المربّعُ يلبس ‎pk--edit‎ بحقٍّ لا بحيلة: هو **رزمةٌ تُحرَّر** — لكنّها رزمتُك أنت.
   فيرث اثنتين وعشرين قاعدةً في المثلّث والصفّ والجوف والمقبض بلا سطرٍ يُنسخ.
   ولا يُكتب ههنا إلّا ما يفترق فيه: الحاضنُ، والقضيبُ، والمحطّة، والذيل.
   ============================================================ */
#nook .nk-jr { display: flex; flex-direction: column; }
/* ===== ومضمارُ التمرير محجوزٌ ولو خلا =====
   الرحلةُ تطول والصندوقُ محدودُ القامة، فالتمريرُ لازمٌ ولا يُنزع. لكنّ شريطًا يظهر
   فجأةً يقتطع من عرض الشجرة فيقفز ما فيها، وفي ‎rtl‎ يظهر **على اليسار داخل المربّع**
   فيُقرأ شيئًا غريبًا لا مضمارَ تمرير.
   فيُحجز مضمارُه دائمًا: العرضُ ثابتٌ فاض المحتوى أو لم يفض */
/* ===== ولا تمريرَ أفقيًّا =====
   خبرُ الصفّ يظهر بالمرور فيطول الصفُّ فجأةً بمئةٍ ونصف — ولو كان ‎overflow-x: auto‎
   لَولد شريطٌ أفقيٌّ عند كلّ مرور. وهو الحكمُ نفسُه في المكتبة
   (‎.lib-course .cm-pane‎): يُقصّ الفائضُ ولا يُمرَّر. والقصُّ ههنا أهون: الخبرُ
   مُطالَبٌ لا معروض، والاسمُ عمودُه مقيسٌ فلا يُقصّ منه شيء */
#nook .nk-jr .jr-body {
  flex: 1 1 auto; min-height: 0;
  overflow-x: hidden; overflow-y: auto; padding: 2px 16px 8px;
  scrollbar-gutter: stable;
}
/* ===== والقضيبُ ثابتٌ ههنا لا لمحة =====
   في محرّر المساهمة يُطوى قضيبُ الرحلة إلى عرضٍ صفر ولا ينفتح إلّا بالمرور (‎.jr-peek‎):
   هناك أنت **ترتّب** رزمةً، والرحلةُ خبرٌ عارضٌ لا مقام. وههنا الرحلةُ **هي** الشيء —
   فالقضيبُ مقامٌ، ويُثبَّت بأن يُلبَس الصنفُ نفسُه دائمًا ويُقطع انتقالُه فلا يرتجف
   في أوّل رسمة */
#nook .nk-jr .x3 { margin-top: 4px; transition: none; }
/* ===== والمحطّةُ دائرةُ «المواضيع» بعينها =====
   ‏‎.tp-order‎ هي الدائرةُ التي تراها مع الموضوع في مربّع «المادة»: قرصٌ ‎17px‎ ذهبيٌّ
   بحبرٍ داكنٍ ووزنٍ ‎800‎. ويُلبَس صنفُها بعينه ولا يُنسخ مقاسُها — فالشيءُ واحدٌ في
   الموضعين لا شبيهان، ومن عايرها هناك عايرها ههنا.
   ولا يُكتب ههنا إلّا **موضعُها**: مقامُ ‎.x3-dot‎ في حاشية القضيب (‎-30px‎ من صدر
   الشجرة) — فما كان دائرةَ ماءٍ تقول «كم أُجيب» صار قرصًا يقول «أيُّ فصلٍ هذا».
   وقدُّها ‎17‎ في مدار ‎18‎، فتُنزَّل ‎.5‎ ليستوي مركزُها بمركز أختها */
/* ===== والدائرةُ في الصفّ لا في حاشية القضيب =====
   كانت محطّةً مُطلَقةً في مقام ‎.x3-dot‎، فصارت **أيقونةَ الصفّ**: تقوم مقامَ رمز المجلد
   في صدر ‎.x3-fwrap‎. فلا موضعَ يُكتب لها — ‎.tp-order‎ تحمل قدَّها ولونَها وحبرَها،
   ولا يُنسخ منها شيء. ويبقى ‎flex: none‎ لئلّا تنضغط في صفٍّ ضيّق (وهي ترثه من صنفها) */
#nook .nk-jr .jr-ord { margin-inline-end: 6px; }
/* ===== واسمُ الفصل حبرٌ لا حقل =====
   كان ‎<input class="jr-name">‎ في غلاف ‎.vt-grow‎ الذي ينمو بالحرف. وقد صار التحكّمُ
   بالفصول في مربّع «المادة» وحدَه، فصار الاسمُ نصًّا ساكنًا — ويلبس حبرَ اسم المجلد
   في المحرّر بعينه (‎.vt-grow--f‎) ليُقرأ الصفّان قراءةً واحدة.
   و‎min-width: 0‎ لأنّه في صندوقٍ مرن: بدونها لا ينكمش فلا يُقصّ، ويدفع ما بعده */
#nook .nk-jr .jr-nm {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 12.5px 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--u-tx-strong);
}
#nook .nk-jr .jr-nm.is-ph { color: var(--u-ph); font-weight: 400; }
/* ============================================================
   حبّةُ الإضافة في صدر المربّع — يسارًا فوق
   ============================================================
   جسمُها وانفراجُها وتأخّرُ رموزها كلُّها من ‎.pk--edit .cx-add‎ (ذيلُ محرّر البطائق)،
   والمربّعُ يلبس ‎pk--edit‎ فورثها بلا سطر. ولا يُكتب ههنا إلّا **موضعُها**.
   وهي مُطلَقةٌ لا في السَّيل: العنوانُ ‎.nk-t‎ مُصغَّرٌ بـ‎zoom‎، فصفٌّ يجمعهما يخضع
   لتصغيره فتصغر الحبّةُ معه. فتُرفع عنه إلى ركن الصندوق — والصندوقُ ‎position: relative‎
   بحكم ‎.nk-sq‎. و‎inset-inline-end‎ لا ‎left‎: «اليسار» في العربيّة منتهى السطر،
   وينقلب مع اللسان من نفسِه */
#nook .nk-jr > .cx-add { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; z-index: 2; }
/* ============================================================
   وسلّةُ البند لا تظهر إلّا على المحدَّد — والفصولُ بلا سلّة أصلًا
   ============================================================
   ‏‎.cx-tree .cx-del { visibility: hidden }‎ حكمُ محرّر البطائق، وحجّتُه: «الحذفُ فعلٌ
   على بندٍ بعينه، فسلّتُه تظهر حين يُقصد هو».
   وقد نُقض ههنا يومًا **لعلّةٍ زالت**: لم يكن في «رحلتي» تحديدٌ أصلًا (مقبضُها كان
   ‎VT_GRAB()‎ بلا ‎--sel‎)، فلو تُركت مخفيّةً لَبقيت مخفيّةً أبدًا — فصف يُضاف ولا يُحذف.
   ثمّ صار للشجرة مقبضُ المحرّر (‎VT_GRAB(true)‎) وتحديدٌ يعمل، فرجع الحكمُ إلى مورده.

   ===== والمفتاحُ ‎is-selroot‎ لا ‎is-sel‎ =====
   كان ‎is-sel‎ — أي **كلُّ** محدَّد. وتحديدُ مجلّدٍ يُحدِّد ما فيه كلَّه (‎cxKids‎)، فكانت
   السلالُ تنبت على كلّ بندٍ في جوفه — والمقصودُ رأسُها وحدَه.
   ومعه سقط ‎is-multi‎: كان يرفع السلّةَ عند تعدّد المحدَّدين، وحجّتُه «سلّةٌ على أحدهم
   والمحدَّدون ثلاثةٌ تكذب: لا يُدرى أتحذفه وحدَه أم تحذفهم». وتلك الحجّةُ تسقط متى وقعت
   السلّةُ على **رأس**: رأسٌ واحدٌ سلّتُه له ولجوفه، ورأسان سلّتان لكلٍّ مداه. فلا لبس.
   وكان أثرُها أنّ من حدَّد اثنين بقي بلا سلّةٍ في الصفّ أصلًا — وهو العطبُ المبلَّغ.
   وشريطُ الأسفل باقٍ لمن أراد «احذف كلَّ ما حدَّدتُه» دفعةً واحدة */
/* ============================================================
   شارةُ التحديث في المسار الذاتي
   ============================================================
   كهرمانيّةٌ كالصَّيحة: كلتاهما تقول «قِف عندها» ولا تقول «خطأ» — والأحمرُ حكمٌ
   والأخضرُ إنجاز، وهذه نداءٌ بينهما. ولا تُذهَّب: الذهبُ في هذا الموقع «هذا هو
   المقصود»، والشارةُ خبرٌ عارضٌ يزول بأخذها.
   وقدُّها قدُّ أيقونات الخبر في الصفّ (‎--cs-ic‎) فتقف في عمودها ولا تنتأ.
   ولا تلتقط المؤشّرَ: البابُ صفُّ البطاقة نفسُه — يُنقر فتُفتح نافذتُها وفيها الزرّ.
   وشارةٌ تُضغط ولا تفعل شيئًا أسوأُ من شارةٍ لا تُضغط */
#nook .nk-jr .jr-upd {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  color: var(--cd-warn, #d1791f); pointer-events: none;
  margin-inline-start: 6px;
}
#nook .nk-jr .jr-upd svg { width: var(--cs-ic, 12px); height: var(--cs-ic, 12px); display: block; }
#nook .nk-jr .jr-upd b {
  font-size: var(--cs-num, 9.5px); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* ===== وموضعُها واحدٌ في الصفّين: ملاصقةٌ للاسم =====
   جُرّبت على المجلّد مدفوعةً إلى طرف الصفّ (‎margin-inline-start: auto‎) بحجّة أنّ هناك
   يقع خبرُ الصفوف كلِّها. ورُدَّت: الشارةُ خبرٌ **عن هذا الاسم** لا عن الصفّ، فبُعدُها
   عنه يقطع الوصل — والمجلّدُ لا خبرَ آخرَ في طرفه يُصَفّ معه أصلًا.
   فصارت قاعدةً واحدةً في القاعدة الأمّ أعلاه، ولا استثناءَ لأحدهما */

/* ============================================================
   صندوقُ الوارد ونافذةُ الاقتراح («الوِردة»)
   ============================================================
   الصندوقُ يتدلّى من الكعب كما تتدلّى المروحةُ والفقاعة — والثلاثةُ لا يجتمعون
   (يُطوى اثنان عند فتح الثالث في الجافا). وجلدُه جلدُ المروحة: صفوفٌ في لوحٍ صغير،
   فيُعرف بلا تعلّم */
.pr-box {
  position: absolute; top: calc(100% + 9px); inset-inline-start: 50%;
  /* ===== وتحويلان لا واحد =====
     الأوّلُ توسيطٌ ثابت، والثاني إزاحةُ الجرّ في توكنين. ولو كُتبت الإزاحةُ ‎transform‎
     كاملًا لَمحت التوسيطَ فقفزت الفقاعةُ نصفَ عرضها أوّلَ ما تُجَرّ */
  transform: translateX(50%) translate(var(--prx, 0px), var(--pry, 0px));
  z-index: 6; min-width: 210px; max-width: 300px; padding: 0 6px 6px;
  display: flex; flex-direction: column; gap: 3px;
  border-radius: 12px; border: 1px solid var(--u-in-line);
  background: var(--cd-surf, #26363a); box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}
/* ولا انتقالَ في أثناء الجرّ: العنصرُ يتبع الإصبعَ لا يلحق به */
.pr-box.is-drag { user-select: none; }
/* ===== ومقبضُ الجرّ شَرَطةٌ في رأسها =====
   لا ترويسةَ فيها نصّ: الصندوقُ خفيفٌ ثلاثةُ صفوفٍ أو أربعة، وترويسةٌ مسمّاةٌ تُثقله
   وتقول ما تقوله الصفوفُ نفسُها. والشَّرَطةُ عُرفٌ مقروء: «هذا يُمسك» */
.pr-box__hd {
  flex: none; height: 14px; cursor: grab; display: grid; place-items: center;
}
.pr-box__hd::before {
  content: ''; width: 26px; height: 3px; border-radius: 3px;
  background: var(--u-in-line); transition: background .15s;
}
.pr-box__hd:hover::before { background: var(--u-gold); }
.pr-box.is-drag .pr-box__hd { cursor: grabbing; }
.pr-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; cursor: pointer; text-align: start;
  padding: 6px 8px; border-radius: 9px; border: 0; background: none; color: var(--cd-tx);
  transition: background .15s;
}
.pr-row:hover { background: var(--u-ctl, rgba(255, 255, 255, .1)); }
/* ووجهُ المقترِح حرفُ اسمه في قرص: لا صورةَ في المخزن، وحرفٌ أصدقُ من رمزٍ عامّ */
.pr-av {
  flex: none; width: 24px; height: 24px; border-radius: 50%; position: relative;
  display: grid; place-items: center; overflow: visible;
  background: var(--u-gold-hov, rgba(225, 193, 114, .15)); color: var(--u-gold);
  font-size: 11px; font-weight: 800;
}
.pr-row__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pr-row__t b { font-size: 11.5px; font-weight: 800; }
.pr-row__t i { font-size: 10px; font-style: normal; opacity: .6; }
/* وصورةُ صاحبه تملأ قرصَها: ‎object-fit: cover‎ فلا تنضغط نسبتُها */
.pr-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
/* والمعتمَدُ يُعرف من قرصه وحدَه: خضرةٌ خفيفةٌ تقول «هذا أُخذ» بلا كلمةٍ تُقرأ في كلّ سطر */
.pr-row.is-taken .pr-av { background: color-mix(in srgb, var(--cd-sync, #4e9d57) 18%, transparent); color: var(--cd-sync, #4e9d57); }
.pr-row.is-taken .pr-av::after {
  content: ''; position: absolute; inset-inline-end: -1px; bottom: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cd-sync, #4e9d57); border: 1.5px solid var(--cd-surf, #26363a);
}

/* وترويسةُ نافذة الاقتراح: عنوانٌ عارٍ لا ختمَ فيه ولا صاحب — النافذةُ ليست بطاقةً
   منشورةً بل عرضٌ عليها، فلا نسخةَ لها تُختم */
.pr-mid { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pr-ttl { font-size: 13px; font-weight: 800; color: var(--cd-tx); }
.pr-ttl__w { font-size: 11px; opacity: .6; }
/* ===== وذيلُه فعلٌ واحدٌ يتوسّط =====
   ورصيفُ البطاقة **شبكةُ ثلاثة أعمدة** (`1fr | auto | 1fr`): الحلقةُ في الأوّل والمسارُ
   في الثاني والخبرُ في الثالث. فزرٌّ واحدٌ يُلقى فيه ينزل في **العمود الأوّل** — أي
   يمينَ الشريط في العربيّة، وهو الميلُ الذي بُلِّغ. و`justify-content` لا يُصلحه:
   الشبكةُ وزّعت الأعمدةَ وملأت العرض، فلا فائضَ يُوزَّع.
   فيُردُّ إلى صفٍّ صراحةً — وهي حيلةُ رصيف ورقة الملخّص نفسُها (`.sh-foot` أعلاه):
   «متنُه غيرُ متنه ههنا… وتلك آلةُ صفٍّ لا شبكةِ ثلاثة أعمدة».
   والمُنتقي بـ`#card-modal` لأنّ الشبكةَ مُعلنةٌ به، ولا يُغلب المُعرَّفُ بالصنف وحدَه */
#card-modal .cd-foot.pr-foot {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.pr-act {
  font: inherit; cursor: pointer; font-size: 12px; font-weight: 800;
  padding: 7px 22px; border-radius: 999px; line-height: 1;
  border: 1.5px solid var(--u-gold); background: var(--u-gold-hov, rgba(225, 193, 114, .14));
  color: var(--u-gold); transition: background .15s, color .15s;
}
.pr-act:hover:not(:disabled) { background: var(--u-gold); color: #16272b; }
.pr-act:disabled { opacity: .45; cursor: default; border-color: var(--u-in-line); color: var(--cd-tx); background: none; }

/* ===== وصفُّ نسخةٍ في الأصل لم تأخذها بعد =====
   يلبس كهرمانَ الشارة في الشجرة (‎.jr-upd‎) فيُعرف أنّه هو المقصودُ بها — لا رصاصيَّ
   «نسخةٌ مضت» (‎cdRowSt‎ كانت تُلبسه إيّاه لأنّه ليس في سجلّك ولا هو الحاليّ).
   وحوضُ مرورٍ خفيفٌ من لونه: الصفُّ **يُضغط فيقع فعل**، وسائرُ صفوف المروحة ههنا كذلك */
.cd-seal2--mini.is-nw { border-color: var(--cd-warn, #d1791f); color: var(--cd-warn, #d1791f); }
.cd-fanr--nw:hover { background: color-mix(in srgb, var(--cd-warn, #d1791f) 12%, transparent); }

#nook .nk-jr .jr-del { visibility: hidden; }
#nook .nk-jr .x3-hd.is-selroot > .jr-del { visibility: visible; }
/* مربّعُ حكم المهمّة: أخو ‎.x3-done‎ — يمتلئ صحًّا حين تُنجَز */
#nook .nk-jr .jr-chk {
  flex: none; width: 14px; height: 14px; border-radius: 4px; cursor: pointer; padding: 0;
  border: 1.5px solid var(--u-in-line); background: none;
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
#nook .nk-jr .jr-chk:hover { border-color: var(--u-gold); }
#nook .nk-jr .jr-chk.on { background: var(--cd-sync, #4e9d57); border-color: var(--cd-sync, #4e9d57); }
#nook .nk-jr .jr-chk.on::after {
  content: ''; width: 7px; height: 4px; border: 1.6px solid #fff; border-top: 0; border-inline-end: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
/* والمُنجَزةُ تُشطب وتخفت: خبرٌ يُقرأ من نظرة، ولا تُنزع من الصفّ (فقد تُراجَع) */
#nook .nk-jr .jr-row--k.is-dn .jr-in { color: var(--u-ph); text-decoration: line-through; }
/* ===== واسمُ البطاقة زرٌّ لا حقل =====
   الاسمُ **مشتقٌّ من متنها** (‎ROADMAP-CARD-NAMES‎) فلا يُكتب فيه، والنقرُ يفتح نافذتَها.
   ===== وجلدُه صار جلدَ المكتبة =====
   كان زرًّا واحدًا بخطّ الهوية يقصّه ‎ellipsis‎. والآن هو ‎.cx-open‎ يحمل ‎.x3-vic‎
   و‎.cx-nm‎ — أي بنيةَ صفّ المكتبة بحروفها، فلا يُكتب له مقاسٌ ولا حبرٌ ههنا: يرثهما
   من قواعدهما هناك، فيتبعُهما إن عُدِّلت ولا يتخلّف.
   ولا يبقى إلّا ما هو **من هذا الموضع**: أنّ الصفَّ يُحدَّد فيُعلن حوضُه */
/* ===== ومثلّثُ الفصل الخاوي أخفتُ بدرجة =====
   هو وحدَه من بين الأشجار يبقى ولو خلا (فهو **دعوةٌ** لا إخبارٌ عن حال). فلو استوى
   بالعامر لَكان الخبرُ لا يُقرأ إلّا بضغطِ كلّ فصلٍ فصلًا.
   والخفوتُ **بدرجةٍ لا بدرجتين**: لو أُوغل فيه لَقُرئ الزرُّ معطَّلًا، وهو ليس معطَّلًا —
   يُضغط ويردّ (‎roadNope‎). فهو يقول «ههنا أقلُّ» لا «ههنا لا شيء».
   و‎opacity‎ لا لونٌ ثانٍ: حبرُ المثلّث ‎var(--u-mut)‎ يتبدّل بالجلدين وبالحال (مفتوحًا
   ومطويًّا وعند المرور)، فلونٌ صريحٌ يُجمّده على واحدةٍ منها */
#nook .nk-jr .cx-fold--tri.is-hollow { opacity: .55; }
#nook .nk-jr .cx-fold--tri.is-hollow:hover { opacity: .8; }
#nook .nk-jr .x3-hd.is-sel > .cx-open { background: var(--u-hov); }
/* ===== وخبرُ الصفّ يُطلب ولا يُعرض — حكمُ النشر بعينه =====
   «القارئُ إنّما جاء ليقرأ الأسماء؛ فسبعةُ أرقامٍ في كلّ صفٍّ تزاحم ما جاء له» — وهو
   ههنا أوجبُ: مربّعُ الرحلة أضيقُ من صفحة المكتبة.
   و‎display‎ لا ‎visibility‎: الخبرُ يقع بعد عمود الاسم (المقيسِ بـ‎--cx-nm-w‎)،
   فذهابُه لا يزحزح اسمًا — إنّما يُخلي ما بعده */
#nook .nk-jr .x3-hd > .cs { display: none; }
#nook .nk-jr .x3-hd:hover > .cs { display: inline-flex; }
/* ===== والاقتراحاتُ تسقط ههنا كما تسقط في النشر =====
   ‏‎props‎ خبرُ **مؤلّفٍ** يُعرض عليه تعديل. ودفترُك لا مؤلّفَ له ولا قارئ، فالخانةُ
   وعدٌ بشيءٍ لا يقع. والقاعدةُ في المكتبة معلّقةٌ بـ‎.pk--pack:not(.pk--edit)‎ ولا
   تبلغ هذا المربّع (هو ‎pk--edit‎ ولا ‎pk--pack‎)، فتُذكر له صراحةً */
#nook .nk-jr .cs-i--props { display: none; }
/* والتحذيرُ يُؤخَّر إلى طرف السطر كما في النشر: أنت لا تُصلح شيئًا في بطاقةٍ استوردتَها،
   فصدارتُه صراخٌ في غير محلّه — ويبقى لأنّه خبرٌ يعنيك */
#nook .nk-jr .cs > .cs-p:has(> .cs-i--warn) { order: 1; }
#nook .nk-jr .jr-none {
  margin: 0; padding: 22px 20px; text-align: center; max-width: 300px; align-self: center;
  font: 400 11px/1.9 'IBM Plex Sans Arabic', sans-serif; color: var(--nk-ink-soft);
}
/* وسلّةُ الفصل: جلدُ سلّة المحرّر نفسُه — الصنفُ ‎cx-del‎ يحملها، و‎jr-del‎ مفتاحُها */
@media (max-width: 820px) {
  /* وصفُّ الاثنين عمودٌ واحدٌ في العرضين معًا الآن (لم يبقَ فيه إلّا مربّعٌ واحد)،
     فسطرُ الشاشة الضيّقة يقول ما قالته القاعدةُ الأمّ — ويبقى حارسًا لو عاد إليه ثانٍ */
  #nook .nk-two { grid-template-columns: 1fr; }
  /* وفي الشاشة الضيّقة عمودٌ واحد — وههنا **يُؤذن بالالتفاف**: منعُه إنّما هو لصفّ
     الحاسوب، وأربعةُ مربّعاتٍ في عرض هاتفٍ لا تكون إلّا فوق بعضها.
     و‎!important‎ مقصودة: المقاسُ المحفوظ يُكتب سطريًّا على المربّع، ولا يُغلب
     السطريُّ إلّا بها — والمقاسُ يُعطَّل ولا يُمحى، فمن عاد إلى شاشته الواسعة وجد
     نوافذَه كما تركها */
  #nook .nk-four { flex-wrap: wrap; }
  #nook .nk-four > * { flex: 1 1 100% !important; }
}

/* شارة «جهّزها» على بطاقات المكتبة القديمة بلا اختيارات */
.prep {
  flex: none;
  font-size: 10.5px; font-weight: 800;
  background: var(--c-gold); color: #fff;
  border-radius: 7px; padding: 2px 9px;
}

/* ============================================================
   شريط الثيم (فوق اللغة) + الوضع الداكن للموقع — كتلة إضافية لا تمسّ الوضع الفاتح
   ============================================================ */

/* شريط الثيم: فاتح · داكن (نفس أسلوب شريط اللغة) */
.themebar {
  display: flex; gap: 4px;
  width: fit-content; margin: 14px auto 0;
  background: var(--c-kfupm-soft); border-radius: 10px; padding: 3px;
}
.themebar button {
  border: 0; background: transparent; cursor: pointer;
  padding: 5px 13px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-kfupm);
  transition: background .15s, color .15s;
}
.themebar button svg { width: 16px; height: 16px; display: block; }
.themebar button.is-active { background: var(--c-kfupm); color: #fff; box-shadow: 0 2px 6px rgba(4, 12, 28, .14); }

/* توكنات الأسطح (قيم فاتحة افتراضية — الوضع الفاتح يبقى كما هو تمامًا) */
:root {
  --bg: #fff; --surface: #fff; --border: #d7dee8;
  --border-dash: #b9c8cf; --placeholder: #9fb2cc; --brand-tx: var(--c-kfupm);
  /* ===== درجاتُ مربّعات السنة — خمسٌ لا أكثر =====
     وبذهب الهُويّة لا بأخضرِ غيرها: اللوحُ في هذا الموقع لا في سواه.
     والصفرُ ليس فراغًا بل **أثرٌ باهت**: شبكةٌ من فراغاتٍ لا تُقرأ شبكةً، ويومٌ خالٍ
     خبرٌ كيومٍ عامر. والأربعُ الباقيةُ صعودٌ متساوي الخطو فلا تلتبس اثنتان. */
  --sx-l0: #e7edf1;
  --sx-l1: #ecd9ab; --sx-l2: #dcbb72; --sx-l3: #c39c45; --sx-l4: #96742a;
  /* وقدُّ المربّع وفجوتُه على الجذر لا على اللوح: ثلاثةُ مواضعَ تقرؤهما (الشبكةُ
     وأسماءُ الشهور والمفتاحُ أسفلها)، وحارسُ ‎_xt-tokens.py‎ يطلب أصلًا يُحلّان منه —
     والوراثةُ من صنفٍ لا يراها. وهما مقاسان لا لون، فلا يُقلبان مع الثوب */
  --sx-d: 11px; --sx-g: 3px;
}

/* الوضع الداكن: إعادة تعريف التوكنات */
html[data-theme="dark"] {
  --c-ink:        #e6edf1;
  --c-ink-soft:   #93a7b6;
  --c-kfupm-soft: #17313a;   /* خلفية الأشرطة الداكنة */
  --c-gold:       #d0aa68;
  --bg:           #0e181c;   /* خلفية الصفحة */
  --surface:      #16252b;   /* البطاقات والحقول */
  --border:       #2a4249;
  --border-dash:  #35505a;
  --placeholder:  #62808d;
  --brand-tx:     #7fb3bb;   /* بترولي فاتح كنصّ على الداكن */
  /* والصفرُ في الداكن وشيٌ أبيضُ خافتٌ لا رماديٌّ مصمت: يجلس على أرضيّة اللوح
     فيتبعها إن تبدّلت، ولا يصير مستطيلًا يُرى قبل ما فوقه */
  --sx-l0: rgba(255, 255, 255, .07);
  --sx-l1: #4a3c1c; --sx-l2: #7a6229; --sx-l3: #ab8838; --sx-l4: #e0b660;
}
html[data-theme="dark"] body { background: var(--bg); }

/* أسطح فاتحة → داكنة (استثناء الحالات النشطة المملوءة) */
html[data-theme="dark"] :is(.fpanel, .btn-filter, .fchip:not(.on), .tpill:not(.on)) {
  background: var(--surface); border-color: var(--border);
}
html[data-theme="dark"] .search { background: var(--surface); border-color: var(--border); color: var(--c-ink); }
html[data-theme="dark"] .search::placeholder { color: var(--placeholder); }
/* دائرة الإتقان في الداكن: مسارها سطح داكن وحدّها ذهبي خافت (السائل ذهبي كما هو) */
html[data-theme="dark"] .cstat { background: rgba(255, 255, 255, .08); border-color: rgba(225, 193, 114, .4); }
html[data-theme="dark"] :is(.cimg, .term-frame) { border-color: var(--border-dash); }
html[data-theme="dark"] :is(.market-course, .lib-course) { border-top-color: var(--border); }

/* نصوص بترولية على أسطح داكنة → بترولي فاتح (استثناء الحالات النشطة بيضاء النص) */
html[data-theme="dark"] :is(.langbar, .tabs, .themebar) button:not(.is-active) { color: var(--brand-tx); }
html[data-theme="dark"] :is(.btn-filter, .btn-addterm, .fact, .fchip:not(.on), .tpill:not(.on)) { color: var(--brand-tx); }
html[data-theme="dark"] :is(.sb-time span, .sb-time svg) { color: var(--brand-tx); }
html[data-theme="dark"] :is(.crow:hover .cname, .tp-cal:hover, .tp-dates:hover, .fchip:hover) { color: var(--brand-tx); }

/* ============================================================
   ثيم مستطيلات المساهمات (المادة/الدكاترة):
   النشر = بترولي هادئ (توجّه ٤) · التحرير = أحادي رمادي بلمسة ذهبية للقيمة (توجّه ١٢)
   ============================================================ */
/* ---------- النشر: بترولي واضح على المحيط الأبيض (سطح متشبّع قليلًا + حدّ محدَّد + نص داكن) ---------- */
/* ‎.src-badge‎ = مستطيل ملف «المصادر» — نفس ثيم مستطيلات «المادة» تمامًا */
.peek-chip, .src-badge { background: #dbeaed; color: #123339; border: 1px solid #a9ccd1; }
.peek-chip i, .src-badge i { color: #33606a; opacity: 1; }
.peek-chip b, .src-badge b { color: #0f303a; }
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .v-badge--g,
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .chipe--absview {
  background: #dbeaed; color: #123339; border: 1px solid #a9ccd1;
}
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .v-lab { color: #33606a; }
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .v-val { color: #0f303a; }
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .hnav { background: rgba(15, 48, 58, .1); }
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .hnav-num,
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .hnav-btn { color: #0f303a; }
.pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .hnav-btn:hover { background: rgba(15, 48, 58, .2); }

/* ---------- التحرير: أحادي رمادي + تحديد ذهبي رفيع تحت القيمة ---------- */
.pk--edit .chipe,
.pk--edit .chipe-in--desc,
.pk--edit .chipe.chipe--add { background: #f1f4f5; color: #14233f; border: 1px solid #e6eaec; }
.pk--edit .chipe.chipe--add:hover { background: #e6eaec; }
.pk--edit .chipe i { color: #98a2af; opacity: 1; }
.pk--edit .chipe-in::placeholder,
.pk--edit .chipe-in--desc::placeholder,
.pk--edit .office-in::placeholder,
.pk--edit .tin::placeholder { color: #a7b0bb; }
.pk--edit .chipe__steps button { background: rgba(20, 35, 63, .1); }
/* لمسة ذهبية: تحديد رفيع تحت قيمة نسبة الترابط/التقييم/الغياب فقط */
.pk--edit .chipe--rel > b,
.pk--edit .chipe--rate .rate-v,
.pk--edit .chipe--abs > b { box-shadow: inset 0 -2px 0 rgba(225, 193, 114, .8); }

/* ---------- الوضع الداكن: نشر بترولي غامق متوهّج · تحرير سطح داكن هادئ ---------- */
html[data-theme="dark"] .peek-chip,
html[data-theme="dark"] .src-badge,
html[data-theme="dark"] .pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .v-badge--g,
html[data-theme="dark"] .pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .chipe--absview {
  background: rgba(66, 134, 147, .19); color: #e7f3f4; border: 1px solid rgba(145, 205, 214, .24);
}
html[data-theme="dark"] .peek-chip i,
html[data-theme="dark"] .src-badge i,
html[data-theme="dark"] .pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .v-lab { color: #9dc3ca; }
html[data-theme="dark"] .peek-chip b,
html[data-theme="dark"] .src-badge b,
html[data-theme="dark"] .pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .v-val { color: #eef7f8; }
html[data-theme="dark"] .pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .hnav { background: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .hnav-num,
html[data-theme="dark"] .pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .hnav-btn { color: #e7f3f4; }
html[data-theme="dark"] .pk--peek:not(.pk--edit) .fold-peek--rich .peek-badges .hnav-btn:hover { background: rgba(255, 255, 255, .22); }

html[data-theme="dark"] .pk--edit .chipe,
html[data-theme="dark"] .pk--edit .chipe-in--desc,
html[data-theme="dark"] .pk--edit .chipe.chipe--add { background: rgba(255, 255, 255, .055); color: #eaf1f2; border: 1px solid rgba(255, 255, 255, .12); }
html[data-theme="dark"] .pk--edit .chipe.chipe--add:hover { background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .pk--edit .chipe i { color: rgba(226, 238, 240, .5); }
html[data-theme="dark"] .pk--edit .chipe-in,
html[data-theme="dark"] .pk--edit .office-in,
html[data-theme="dark"] .pk--edit .tin,
html[data-theme="dark"] .pk--edit .tcolon,
html[data-theme="dark"] .pk--edit .dslot-sep,
html[data-theme="dark"] .pk--edit .abs-pct,
html[data-theme="dark"] .pk--edit .mdrop-btn,
html[data-theme="dark"] .pk--edit .mdrop-val,
html[data-theme="dark"] .pk--edit .dslot-day,
html[data-theme="dark"] .pk--edit .hr-btn,
html[data-theme="dark"] .pk--edit .ehnav-num { color: #eaf1f2; }
html[data-theme="dark"] .pk--edit .chipe__steps button,
html[data-theme="dark"] .pk--edit .ehnav-btn { background: rgba(255, 255, 255, .14); color: #eaf1f2; }
/* أزرار المثلّثين لنسبة الترابط (تحرير المادة): مثلّثات SVG أكبر بحواف مقوّسة، مباشرة بلا مربّع، وأقرب للرقم */
.pk--edit .chipe--rel .chipe__steps button,
html[data-theme="dark"] .pk--edit .chipe--rel .chipe__steps button { background: transparent; border-radius: 0; }
.pk--edit .chipe--rel .chipe__steps button:hover,
html[data-theme="dark"] .pk--edit .chipe--rel .chipe__steps button:hover { background: transparent; color: var(--u-gold); }
.pk--edit .chipe--rel .chipe__steps { gap: 0; margin-inline-start: 2px; }   /* المثلّثان متقاربان عموديًّا · +2px يجعل النص↔المثلّثين 2.5px */
.pk--edit .chipe--rel .rel-step { width: auto; height: auto; padding: 0; }   /* بلا أبعاد مربّع ثابتة */
.pk--edit .chipe--rel .rel-step svg { width: 12px; height: 12px; display: block; }   /* أكبر من الأصل، والمثلّثان معًا ~24px = ارتفاع موحّد مع بقية المستطيلات */
.pk--edit .chipe--rel { gap: 0.5px; }   /* المثلّثان أقرب لرقم النسبة */

/* ===== مستطيل «مواضيع المادة» في محرّر «المادة» ===== */
.pk--edit .chipe--topics { gap: 5px; }
/* المثلّثان بنفس ثيم «نسبة الترابط» */
.pk--edit .chipe--topics .tp-step { gap: 0; margin-inline-start: 2px; }
.pk--edit .chipe--topics .tp-step button { background: transparent; border-radius: 0; width: auto; height: auto; padding: 0; }
.pk--edit .chipe--topics .tp-step button:hover { background: transparent; color: var(--u-gold); }
.pk--edit .chipe--topics .tp-step button svg { width: 12px; height: 12px; display: block; }
html[data-theme="dark"] .pk--edit .chipe--topics .tp-step button { background: transparent; }
/* دائرة الترتيب — ذهبية (لون هوية الموقع) */
.tp-order {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e1c172; color: #14233f;
  font: 800 9.5px/1 'IBM Plex Sans Arabic', sans-serif; direction: ltr;
}
.pk--edit .chipe--topics .tp-tag { flex: none; font-style: normal; font-weight: 800; opacity: .75; }
/* الحقول بلا إطار — مساحة كتابة داخل المستطيل لا مربّع داخل مربّع */
.pk--edit .chipe--topics .tp-in {
  border: 0; background: transparent; outline: none; min-width: 0;
  color: #14233f; font-family: inherit; font-weight: 700; font-size: 11.5px;
  padding: 2px 3px; border-bottom: 1px dashed rgba(20, 35, 63, .28);
}
.pk--edit .chipe--topics .tp-in::placeholder { color: rgba(20, 35, 63, .38); }
.pk--edit .chipe--topics .tp-in:focus { border-bottom-color: var(--c-gold); }
.pk--edit .chipe--topics .tp-in--num { width: 34px; text-align: center; }
.pk--edit .chipe--topics .tp-in--name { flex: 1 1 96px; }
/* ✕ و + أيقونتان مباشرتان بلا دوائر */
.pk--edit .chipe--topics .tp-del,
.pk--edit .chipe--topics .tp-add,
.pkedit .pkh-chip .tp-del,
.pkedit .pkh-chip .tp-add {
  flex: none; border: 0; background: transparent; cursor: pointer; padding: 0 2px;
  font-family: 'IBM Plex Sans Arabic', sans-serif; line-height: 1;
  transition: color .15s;
}
.pk--edit .chipe--topics .tp-del, .pkedit .pkh-chip .tp-del { color: rgba(20, 35, 63, .45); font-size: 12px; font-weight: 700; }
.pk--edit .chipe--topics .tp-del:hover, .pkedit .pkh-chip .tp-del:hover { color: #a8433c; }
.pk--edit .chipe--topics .tp-add, .pkedit .pkh-chip .tp-add { color: #a8842e; font-size: 16px; font-weight: 800; }
.pk--edit .chipe--topics .tp-add:hover, .pkedit .pkh-chip .tp-add:hover { color: #14233f; }
html[data-theme="dark"] .pk--edit .chipe--topics .tp-del,
html[data-theme="dark"] .pkedit .pkh-chip .tp-del { color: rgba(230, 240, 242, .5); }
html[data-theme="dark"] .pk--edit .chipe--topics .tp-del:hover,
html[data-theme="dark"] .pkedit .pkh-chip .tp-del:hover { color: #eaa3ae; }
html[data-theme="dark"] .pk--edit .chipe--topics .tp-add,
html[data-theme="dark"] .pkedit .pkh-chip .tp-add { color: var(--u-gold); }
html[data-theme="dark"] .pk--edit .chipe--topics .tp-add:hover,
html[data-theme="dark"] .pkedit .pkh-chip .tp-add:hover { color: #fff; }
html[data-theme="dark"] .pk--edit .chipe--topics .tp-in { color: #eaf1f2; border-bottom-color: rgba(255, 255, 255, .3); }
html[data-theme="dark"] .pk--edit .chipe--topics .tp-in::placeholder { color: rgba(230, 240, 242, .4); }

/* صفوف المواضيع: في المنبثقة والعرض الموسّع */
.tp-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.tp-row + .tp-row { border-top: 1px solid var(--u-div); }
.tp-row .tp-txt { min-width: 0; font-size: 12.5px; color: var(--u-tx); }
/* وسمُ الفصل «فـ3» — صفُّ المواضيع في «المادة» وصفُّ الفصل في «رحلتي» سواء:
   منتقًى واحدٌ لهما، فلا يُعايَر أحدُهما ويُنسى أخوه */
.tp-row .tp-tag, #nook .nk-jr .tp-tag {
  font-style: normal; font-weight: 800; color: var(--u-gold); margin-inline-end: 5px;
}
#nook .nk-jr .tp-tag { flex: none; font-size: 11.5px; direction: ltr; unicode-bidi: embed; }
.tp-list { align-self: stretch; }
/* ===== منبثقة المواضيع: جسم «الشارة المكبَّرة» + ترويسة ذهبية صلبة — ألوان مصمتة بلا شفافية ===== */
.cmt-topics {
  max-width: min(400px, 92vw); width: 100%;
  background: #f4f7f8; border: 1px solid #c9d9dd;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 46px #0a1c22;
}
.cmt-topics__hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #e1c172; color: #14233f; padding: 10px 15px;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; font-size: 13.5px;
}
.cmt-topics__hd i {
  font-style: normal; font: 700 11px/1 'IBM Plex Sans Arabic', sans-serif;
  background: #14233f; color: #e1c172; padding: 4px 9px; border-radius: 20px; direction: ltr;
}
.cmt-topics__list { max-height: 58vh; overflow-y: auto; padding: 3px 15px 9px; }
.cmt-topics .tp-row { padding: 7px 0; gap: 9px; }
.cmt-topics .tp-row + .tp-row { border-top: 1px solid #dbe5e8; }
.cmt-topics .tp-row .tp-txt { flex: 1 1 auto; min-width: 0; color: #14233f; font-size: 12.5px; font-weight: 700; }
.cmt-topics .tp-row .tp-tag { color: #5d6b82; }
.cmt-topics .tp-order { background: #e1c172; color: #14233f; }
.cmt-topics .tp-none { margin: 8px 0; font-size: 12.5px; color: #5d6b82; }
/* زر نسخ صغير أقصى يسار كل صفّ */
.cmt-copy--sm {
  flex: none; width: 24px; height: 24px; border-radius: 7px;
  background: #e6eef0; color: #46626b;
}
.cmt-copy--sm .cc-ic { width: 13px; height: 13px; }

/* ============================================================
   «خ٣» — هيئة عرض رزمة الشروح في المكتبة (منقولة من مختبر shrooh-comment-lab)
   خيط رحلة للدرجة الأولى وحدها بدوائر للجميع، وما تحته مُزاح بلا خيط ولا علامات،
   ومربّع اكتمال صغير يسار مدة كل شرح. بلا مقبض سحب — الاستعراض فقط
   ============================================================ */
/* لون معتم تحت العلامات ليُحجب الخيط داخلها — يطابق سطح البطاقة فوق ورقة النافذة */
/* ترويسة الرزمة: غلاف حرفيّ ← الهوية ← العدّادات ← سهم التوسيع، ويفصلها خطٌّ عمّا تحتها حين تُفتح */
.x3-pkhd { display: flex; align-items: center; gap: 12px; }
.x3-pkhd.on { padding-bottom: 11px; border-bottom: 1px solid var(--u-line); }
/* غلاف الرزمة قسمان مشبوكان: مربّع صورة المساهم ٢٧×٢٧ ويمينه شريط الرزمة ٢١px،
   ومجموعهما ٤٨×٢٧ = نسبة فيديو يوتيوب تمامًا. ولا شيء يعلو الصورة إطلاقًا.
   ‏--g لون البروفايل (تدرّجًا كان أو لونًا مسطّحًا) يأتي من x3ArtHTML في JS */
.x3-art {
  flex: none; display: flex; overflow: hidden;
  width: 48px; height: 27px; border-radius: 7px;
  /* align-items صريحة: بدونها يرث القسمان توسيطًا رأسيًّا فلا يمتدّان ويبقى فراغ فوقهما وتحتهما */
  align-items: stretch;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 3px 7px -2px rgba(0, 0, 0, .5);
}
/* شريط الرزمة في جهة البداية: درجة أغمق من لون البروفايل، وفيه أيقونة الخطوط وحدها بلا رقم */
.x3-rail {
  flex: none; width: 21px; display: grid; place-items: center;
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), var(--g, var(--u-av));
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .16);   /* خطّ الشبك بين الشريط والصورة */
}
/* رمز الشريط اليوم رزمةٌ في البندين (شاشات للشروح · بطائق للبطائق) — أجسامٌ لا نصّ،
   فلا تُعكس مع اللغة (العكس التناظري كان لأيقونة الخطوط الثلاثة وقد استُبدلت) */
.x3-rail svg { width: 13.5px; height: 13.5px; color: rgba(255, 255, 255, .92); }
/* مربّع الصورة: نصيبه من العرض يساوي ارتفاعه فيخرج مربّعًا تمامًا */
.x3-thumb { flex: 1 1 auto; display: grid; place-items: center; overflow: hidden; background: var(--g, var(--u-av)); }
.x3-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x3-thumb b { font-size: 13px; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .95); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.x3-art--flat .x3-thumb b { color: var(--u-mut); text-shadow: none; }
/* ============================================================
   عنوان الرزمة الذي يكتبه صاحبها — بين زرّ الاختبار والعدّادات
   ============================================================
   ===== كان ذهبيًّا، وسقطت حجّتُه =====
   ذُهِّب يومَ كان زرُّ «اختبر هذه الرزمة» **مثلّثًا ذهبيًّا عاريًا** يلاصقه: حبرٌ إلى
   جانب حبر، فعنوانٌ أبيضُ بينهما يقطع الكتلةَ إلى لونين لا معنى لفرقهما.
   ثمّ صار الزرُّ **مفتاحًا** («الشبح» — انظر ‎.x3-pkhd > .cx-pktest‎): جسمٌ له تنّورةٌ
   وسطحٌ وظلّ، ينفصل عن جاره بحدّه لا بلونه. فذهب سببُ التذهيب وبقي أثرُه.

   ===== والأبيضُ يوحّد الشجرتين =====
   عنوانُ الرزمة في **المحرّر** (‎.x3-ttlwrap‎) ‎--u-tx-strong‎ منذ كُتب. فكان المنشورُ
   وحدَه شاذًّا: الشيءُ نفسُه بلونين بحسب مَن ينظر إليه. وقاعدةُ هذا الموقع أنّ الشجرتين
   تُقرآن قراءةً واحدة — فرجع المنشورُ إلى لون أخيه.

   ===== وليس بياضًا حرفيًّا =====
   ‏‎--u-tx-strong‎ لا ‎#fff‎: هو أبيضُ الحبر في الجلد الداكن، وينقلب ‎#14233f‎ في الفاتح.
   ولو كُتب البياضُ حرفيًّا لَاختفى العنوانُ على الورق الأبيض */
.x3-pkttl {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 800; color: var(--u-tx-strong);
}

/* ===== بطاقة تحرير «الشروح»: ترويسة كترويسة المساهمة النهائية حرفيًّا ===== */
/* الغلاف زرّ رفع: يكشف ＋ عند المرور، ولا يغيّر مقاسه فلا يقفز الشكل بين التحرير والنشر */
.x3-art--edit { cursor: pointer; }
.x3-art--edit .x3-thumb { position: relative; }
.x3-art--edit .x3-thumb::after {
  content: '＋'; position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .48); color: #fff; font: 800 15px/1 'IBM Plex Sans Arabic', sans-serif;
  opacity: 0; transition: opacity .15s;
}
.x3-art--edit:hover .x3-thumb::after, .x3-art--edit:focus-within .x3-thumb::after { opacity: 1; }
/* ===== غلاف لم يُرفع بعد: شطبٌ قطريّ و＋ ذهبية دائمتان =====
   حرف البروفايل كان يُوهم أن الغلاف جاهز، والنداء كان ينتظر مرور المؤشّر — ولا مؤشّر في الجوال.
   الشطب اصطلاح «فراغ»، ويقوم على طبقات شفّافة فوق قاعدة معتمة كي يخرج نظيفًا في الوضعين */
/* اللونان مثبتان صراحةً لا برموز الواجهة: الرموز الشفّافة تخفت فوق قاعدة الغلاف فلا يبين الشطب */
.x3-art--edit.x3-art--empty { --pap: #1b3640; --hatch: rgba(255, 255, 255, .16); }
html[data-theme="light"] .x3-art--edit.x3-art--empty { --pap: #eef3f4; --hatch: rgba(44, 94, 101, .22); }
.x3-art--edit.x3-art--empty .x3-thumb {
  background: repeating-linear-gradient(45deg, var(--hatch) 0 4.5px, rgba(0, 0, 0, 0) 4.5px 9px), var(--pap);
}
.x3-art--edit.x3-art--empty .x3-thumb b { display: none; }   /* لا حرف بروفايل قبل الرفع */
.x3-art--edit.x3-art--empty .x3-thumb::after {
  background: none; color: var(--u-gold); font-size: 14px; opacity: 1;
  transition: background .15s;
}
.x3-art--edit.x3-art--empty:hover .x3-thumb::after,
.x3-art--edit.x3-art--empty:focus-within .x3-thumb::after { background: var(--u-gold-hov); }
/* حقل ينمو بمقدار نصّه: نسخة خفيّة منه في ::after داخل شبكة هي التي تحدّد العرض، والحقل فوقها.
   وsize="1" على الحقل ضروريّ — بدونه يفرض عرضه الفطريّ (نحو ٢٠ حرفًا) على الشبكة فيبقى
   عريضًا مهما قصر النصّ، فتبتعد الأيقونات التي يساره بلا سبب */
/* الحقل مُسنَد فوق النسخة الخفيّة لا مصفوفًا معها في شبكة:
   لو بقي في تدفّق العرض لفرض عرضه الفطريّ (قِيس: ١٠٨px بينما النصّ ٣٤px) — و‏size="1"‎
   لا يكفي لإسقاطه. وبالإسناد يخرج من حساب العرض أصلًا، فيصير عرض الخانة = عرض نصّها تمامًا */
.vt-grow { position: relative; display: inline-block; flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; }
.vt-grow::after { content: attr(data-v); display: block; visibility: hidden; white-space: pre; }
/* الحقل الفارغ يُقاس بوزن النائب لا بوزن القيمة: النائب خفيف والقيمة ثقيلة */
.vt-grow.is-ph::after { font-weight: 400; }
/* الكتابة حرّة: لا صندوق ولا استدارة ولا خطّ تحت ولا إطار تركيز — نصٌّ على السطح فقط.
   وتُذكر ‎.vid-in‎ صراحةً لأنها تحمل صندوق حقول المحرر، و‎:focus‎ منها أقوى نوعيةً
   من قاعدة الصنف وحده فتغلبها بالحدّ الذهبي لولا هذا التخصيص */
.vt-grow > input,
.vt-grow > input.vid-in,
.vt-grow > input:focus,
.vt-grow > input.vid-in:focus {
  position: absolute; inset: 0; width: 100%; min-width: 0;
  font: inherit; color: inherit; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; outline: none; box-shadow: none;
}
.vt-grow > input::placeholder { color: var(--u-ph); font-weight: 400; }
.x3-ttlwrap { font: 800 13px 'IBM Plex Sans Arabic', sans-serif; color: var(--u-tx-strong); }
.vt-grow--f { font: 700 12.5px 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; color: var(--u-tx-strong); }
/* (وجُرّب أن يلبس الاسمُ لونَ مجلده — ‎color: var(--fc)‎ — فرُدّ إلى حبره:
   اللونُ في الصفّ وسمٌ للأيقونة وحدَها، والاسمُ يُقرأ فلا يُصبغ) */
/* استثناءٌ مقصورٌ على المجلد من قاعدة «لا خطّ تحت» أعلاه:
   المجلد عنوانٌ لما تحته لا بندٌ في صفّ، والخطّ يفصله عن أبنائه ويقول إنّه يجمعهم.
   وأسماءُ البطائق تبقى بلا خطّ كما استُقرّ عليه، فيُفرَّق النوعان بلمحة.
   والخطُّ على غلافٍ يضمّ الرمز والاسم معًا (‎.x3-fwrap‎) لا على الاسم وحده —
   وإلّا انقطع عند فجوة الصفّ فبدا خطّين.
   وفجوتُه الداخليّة أضيقُ من فجوة الصفّ (٥ لا ٩): الرمز والاسم شيءٌ واحد تحت خطٍّ واحد،
   فتقاربُهما يقولها — والفجوة الأوسع تبقى بين هذه الكتلة وما جاورها */
.x3-fwrap {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: 0 1 auto;
  border-bottom: 1px solid var(--u-line); padding-bottom: 1px;
}
/* ===== وفي البطائق يمتدّ الخطُّ تحت العدّادين =====
   العدّادان دخلا غلافَ الاسم (في ‎cxTreeEdit‎ وحدَها) فصارا تحت خطّه، فينتهي الخطُّ حيث
   ينتهيان: **بمحاذاة آخر رقمٍ** تمامًا لا بفسحةٍ بعده — فحرفُ الرقم حدُّ الخطّ.
   (جُرّبت حشوةُ ‎7px‎ تمدّه بعد الرقم فرُدّت إلى صفر.) ولا حاجة إلى تصريحٍ هنا: غلافُ
   الاسم يأخذ عرضَ محتواه، وآخرُ محتواه رقمُ العدّاد.
   و«الشروح» عدّاداتُها أخواتُ الغلاف لا بناتُه (‎.x3-hd > .x3-triobox‎) فلا يبلغها هذا.
   وفجوةُ الغلاف (‎5px‎) هي التي تفصل العدّادَ عن الاسم الآن، فيُلغى تعويضُ فجوة الصفّ
   السالبُ الذي على ‎.x3-trio‎ — هو لموضعٍ آخر (الغلافُ الكبير وشجرةُ الشروح) */
.x3-fwrap > .x3-triobox > .x3-trio { margin-inline-start: 0; }
.vt-grow--v { font: 700 12px 'IBM Plex Sans Arabic', sans-serif; color: var(--u-gold); }
/* شجرة الإضافة تبدأ تحت الخطّ الفاصل مباشرة — في البندين معًا */
.pk--edit #cm-videos, .pk--edit #cm-cards { margin-top: 10px; }
/* ===== مجموعة الإضافة: «الحبّة النامية» =====
   مغلقةً: مِقبضٌ واحد (＋) لا غير، فلا تُرمى الأنواع في الشريط بلا داعٍ.
   مفتوحةً: الحبّة نفسها تتمدّد يمينًا (نحو الفراغ لا نحو ✕ و✈) وتظهر الأنواع داخلها،
   ويصير المقبض (−) — لا (✕) كي لا يصير توأمًا لـ✕ حذف المساهمة الملاصق له. */
.pk--edit .cx-add {
  display: inline-flex; align-items: center; margin-top: 7px; padding: 2px;
  border: 0; border-radius: 999px; background: none;
  transition: background .28s, box-shadow .28s;
}
/* ===== وسطحُها المفتوح رماديٌّ كسطح المقسوم =====
   كان ‎--u-hov‎ بحدٍّ داخليّ، ثمّ صار ذهبيًّا شبحيًّا، فصار ‎--u-hov‎ بلا حدّ — وهو
   الطلاءُ الذي للمختارة في المقسوم حرفًا. والقاعدةُ التي استقرّ عليها الصفّ:
   **الطلاءُ الرماديُّ يقول «هذا مفتوحٌ أو مختار»، والذهبيُّ يقول «هذا فعلٌ يقع»**.
   فوعاءُ الأنواع طلاؤه رماديّ، ورمزا البطاقة والمجلد في جوفه يذهبان ذهبيَّين عند
   المرور لأنّهما هما الفعل. و«تمّ» تبقى ذهبيّةً وحدَها ساكنةً: هي فعلُ الصفّ الأكبر */
.pk--edit .cx-add.on { background: var(--u-hov); box-shadow: none; }
/* في شريط الأسفل: المجموعة تُدفع إلى أقصى اليسار فتلتصق بزرّ الحذف */
.vt-foot .cx-add { margin: 0 0 0 0; margin-inline-start: auto; }
.vt-foot .infoedit-del { margin-inline-start: 0; }
/* الأنواع: عرضها صفرٌ وهي مطويّة، ثم تنفتح بمنحنًى فيه ارتدادةٌ خفيفة */
.pk--edit .cx-items {
  display: flex; align-items: center; gap: 0; max-width: 0; overflow: hidden;
  transition: max-width .32s cubic-bezier(.34, 1.3, .5, 1), gap .32s, margin .32s;
}
.pk--edit .cx-add.on .cx-items { max-width: 170px; gap: 12px; margin: 0 8px 0 6px; }
.pk--edit .cx-add button {
  flex: none; display: inline-flex; align-items: center; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--u-fade); transition: color .15s, opacity .18s;
}
.pk--edit .cx-add button:hover { color: var(--u-gold); }
/* ===== والمعطَّلةُ لا تُضاء ولا تُغري =====
   ‏‎:hover‎ يقع على المعطَّل في CSS وإن لم يقع عليه حدث — فلولا نقضُه لَاشتعلت ذهبًا
   تحت الإصبع ثمّ لا تفعل شيئًا. فتخفت ويقول مؤشّرُها إنّها ليست بابًا */
.pk--edit .cx-add button:disabled,
.pk--edit .cx-add button:disabled:hover { color: var(--u-fade); opacity: .5; cursor: not-allowed; }
.pk--edit .cx-add button svg { width: 15px; height: 15px; display: block; }
/* كلٌّ يظهر بعد الذي قبله: تتبع العين مسار الانفتاح ولا تُفاجأ بالكلّ دفعة */
.pk--edit .cx-items > button { opacity: 0; }
.pk--edit .cx-add.on .cx-items > button { opacity: 1; transition-delay: calc(120ms + var(--i, 0) * 40ms); }
/* المِقبض: يحمل رمزيه معًا ويُظهر واحدًا بحسب الحال.
   ومقاسُه هو الذي يقرّر قامةَ الحبّة لا رسمُها (‎15‎): كان ‎20‎ فكانت ‎24‎ — أطولَ ما في
   الصفّ. فصار ‎17‎ فصارت ‎21‎، ولم يُمَسّ رسمُها ولا نقص صندوقُ ضغطها إلّا ثلاثة */
.pk--edit .cx-tg { width: 17px; height: 17px; justify-content: center; }
.pk--edit .cx-tg .g { display: none; }
.pk--edit .cx-tg .g-plus { display: block; }
.pk--edit .cx-add.on .cx-tg .g-plus { display: none; }
/* و«‎−‎» ليس فعلًا يُضاف بل قولٌ «هذه مفتوحة» — فحبرُه حبرُ الحال (‎--u-tx-strong‎)
   لا حبرُ الفعل، كما في المختارة من المقسوم سواءً */
.pk--edit .cx-add.on .cx-tg .g-min { display: block; color: var(--u-tx-strong); }
/* ============================================================
   مقسومُ الرحلة في تذييل محرّر «البطائق» — «قائمةٌ» أم «رحلة»
   ============================================================
   حبّةٌ بأرضيّة ‎--u-ctl‎ فيها خانتان، والمختارةُ على ذهبيٍّ مصمت. وهو الوحيدُ في هذا
   الشريط الذي يحمل نصًّا — عمدًا: حجّةُ المقسوم أنّه **يسمّي المطفأ**، فلا يرى صاحبُ
   الرزمة «رحلةً مغلقة» بل «قائمةً مختارة». ولو نُزع النصُّ سقطت حجّتُه.
   والأيقونةُ ‎18px‎ لا ‎15‎ كجيرانها: رسمُها محطّتان ووَصلٌ، وما دقّ منها ذاب في ‎15‎ —
   وهي في حبّةٍ لها أرضيّتُها فلا تُقاس على العاري الذي حولها.
   ============================================================ */
/* ===== وقد لبس لغةَ «تمّ» (‎foot-row-lab#f2‎ «شبحيٌّ كلُّه») =====
   شُحن أوّلًا بحاضنٍ مصمتٍ (‎--u-ctl‎) وخانةٍ ذهبيّةٍ صمّاء ورمزٍ ‎18‎ وخطّ ‎Plex 11‎،
   فنقض قاعدةَ الصفّ المكتوبةَ عند «تمّ» في أربعة مواضع: قامتُه ‎28‎ وأطولُ ما كان ‎24‎،
   ورمزُه أكبرُ من كلّ رمزٍ فيه (‎15‎)، وسطحاه المصمتان في صفٍّ لا سطحَ فيه، وخطُّه ثانٍ
   لحرفٍ لا يحمله إلّا هو و«تمّ». فصار **بمقاس «تمّ» ولغتها حرفًا**: خطُّ الهويّة ‎11.5‎،
   وحشوٌ ‎3×11‎، ورمزٌ ‎15‎، وحاضنٌ بلا حشوٍ ولا أرضيّة، والمختارةُ طلاءٌ شبحيٌّ ذهبيّ.
   وقامتُه ‎21‎ فينزل تحت حبّة الإضافة ولا يعلوها.
   والحبرُ توكنٌ لا رقمٌ صريح: الأرضيّةُ ‎--u-gold-hov‎ تنقلب مع الجلد، فالحبرُ ينقلب معها */
.pk--edit .cx-jrseg { flex: none; display: inline-flex; align-items: center; }
.pk--edit .cx-jrseg button {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 700 11.5px 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--u-lab); white-space: nowrap;
  transition: background .16s, color .16s;
}
.pk--edit .cx-jrseg button svg { flex: none; width: 15px; height: 15px; display: block; }
/* ===== والمقسومُ رماديٌّ كلُّه — الذهبيُّ للفعل لا للاختيار =====
   كان طلاؤه ذهبيًّا شبحيًّا كطلاء «تمّ» وحبّةِ الإضافة. وهما **فعلان** (أنهِ · أضِفْ)،
   وهذا **اختيارُ حال** لا فعل: لا شيءَ يقع بضغطه إلّا أن تُقرأ الرزمةُ على وجهٍ آخر.
   فلو تساوى بهما في الذهب لَنادى بما لا يفعل، ولَزاحمهما على لهجة الصفّ الوحيدة.
   فصار في الرماديّ: درجتان من توكنات الجلد نفسِها — ‎--u-hov‎ للمختارة و‎--u-line‎
   عند المرور عليها، وكلتاهما تنقلب مع الجلد. والحبرُ يتدرّج معها:
   المطفأةُ ‎--u-lab‎ · ما تمرّ عليه ‎--u-tx-strong‎ · والمختارةُ ‎--u-tx-strong‎ على طلائها.
   ولا مرورَ ذهبيٌّ ههنا (بخلاف سائر الصفّ) لئلّا تبدو المطفأةُ أنشطَ من المختارة */
.pk--edit .cx-jrseg button:hover { color: var(--u-tx-strong); }
.pk--edit .cx-jrseg button.on { background: var(--u-hov); color: var(--u-tx-strong); }
.pk--edit .cx-jrseg button.on:hover { background: var(--u-line); }

/* ===== وشجرةُ النشر حين تُطفأ الرحلة =====
   الدوائرُ لا تُرسم أصلًا (‎cxRoJr‎ في ‎cxTreeView‎)، والقضيبُ ينعدم من نفسِه لأنّ
   ‎cxRailFit‎ لا يجد محطّتين فيكتب ‎--jr-h: 0‎. فلم يبقَ إلّا الحاشيةُ: ثلاثون بكسلًا
   كانت مسكنَ الدوائر تُردّ إلى الأسماء. ولا تُلمس ‎.x3-sub‎: ‎has-rail‎ لم يُوضع،
   فحاشيتُها تعود إلى ‎--pad‎ من قاعدتها */
/* ===== «قائمة» في النشر: محطّاتٌ بلا طريق =====
   ليس معنى «قائمة» أن تذهب الدوائر — بل أن يذهب **ما يربط بينها**. فتبقى كلُّ علامةٍ
   على صفّها وخيطُها القصيرُ إليها (فهو يصلها بصفّها لا بأختها)، ويذهب القضيبُ وحدَه:
   علاماتٌ متجاورةٌ لا محطّاتُ سَفَر.
   ولا تُمَسّ الحاشيةُ ولا حَشْوةُ الجوف: الدوائرُ تسكنهما، فلو رُفعتا خرجت عن الشجرة.
   والقضيبُ ثلاثةُ أشكالٍ بحسب البند فيُطفَأ ثلاثتُها:
     · ‎::before‎ على الحاضن — خيطُ البطائق المقيس
     · ‎::before‎ على الجوف الحيّ — قضبانُ رحلاتها الفرعيّة
     · ‎::after‎ على الصفّ — قطعُ الشروح الملتحمة
   ===== وأمّا التحرير فلا دائرةَ فيه إلّا أن تكون رحلة =====
   ‎cx-nojr‎ لا يُوضع في التحرير أصلًا (‎packCard‎ وحدَه يضعه): المحرّرُ يُوسَم ‎cx-jr‎ حين
   تكون رحلةً ولا يُوسَم شيئًا حين لا تكون، فلا حاشيةَ ولا محطّات. وهو موضعُ البناء —
   والعلامةُ فيه بلا طريقٍ زينةٌ لا تقول شيئًا */
.x3.cx-nojr::before,
.x3.cx-nojr .x3-sub.has-rail::before,
/* ===== وما لم يدخلها القارئُ فلا قضيبَ كذلك — تتمّة المنتقيات =====
   ‎--jr-h‎ يصير صفرًا من نفسِه (‎cxRailFit‎ لا يجد محطّتين) فلا يُرسم شيء — لكنّه
   **قيمةٌ مقيسة** لا بنية: لو تأخّر القياسُ أو بقيت قيمةٌ سابقةٌ على عنصرٍ مُعادٍ
   لَظهر خيطٌ في رزمةٍ لا محطّاتِ فيها. والحاشيةُ مرفوعةٌ حينئذٍ (‎cx-nodot‎) فيقع
   الخيطُ **داخل** الأسماء لا في حاشيتها. فيُقطع بالصنف قطعًا، ولا يُترك لحسابٍ يصحّ غالبًا */
.x3.cx-nodot::before,
.x3.cx-nodot .x3-sub.has-rail::before { display: none; }

/* سهم طيّ المجلد في التحرير: أيقونة عارية تدور عند الفتح — كسهم وضع النشر */
:is(.pk--edit, .cx-ro) :is(.x3-hd, .x3-ep) > .cx-fold {
  flex: none; display: grid; place-items: center; padding: 0; width: 20px; height: 20px;
  border: 0; background: none; color: var(--u-gold); cursor: pointer; transition: transform .18s, color .15s;
}
:is(.pk--edit, .cx-ro) :is(.x3-hd, .x3-ep) > .cx-fold svg { width: 14px; height: 14px; }
:is(.pk--edit, .cx-ro) .x3-st.on > :is(.x3-hd, .x3-ep) > .cx-fold { transform: rotate(180deg); color: var(--u-mut); }
:is(.pk--edit, .cx-ro) :is(.x3-hd, .x3-ep) > .cx-fold:hover { color: var(--u-gold); }
/* ===== والخانةُ تُحجز ولا تُرسم =====
   ‎visibility‎ لا ‎display‎: تلك تُبقي الحيّزَ محجوزًا فتستوي رموزُ البطائق كلِّها في
   عمودٍ واحد — الوالدةُ وغيرُ الوالدة — وهذه تُسقطه فيعود الاضطراب */
:is(.pk--edit, .cx-ro) :is(.x3-hd, .x3-ep) > .cx-fold.is-void {
  visibility: hidden; pointer-events: none;
}
/* ===== وشيفرونُ نشر الشروح خارج المنتقي أعلاه =====
   شجرتُه (‎x3Tree‎) بلا ‎.cx-ro‎ — ذاك للبطائق وحدها — وزرُّه بلا ‎.cx-fold‎.
   فلو تُرك لِما فوقُ لَبقي مثلّثُ المجلد الخاوي في «الشروح» وحدَها ظاهرًا، والحكمُ واحد.
   فيُكتب على ‎.x3-tg‎ حكمٌ يسع المواضعَ الخمسة — و‎is-void‎ لا تُوضع إلّا قصدًا،
   فلا يُخشى أن يبلغ الحكمُ زرًّا لم يُرَد له */
.x3-tg.is-void { visibility: hidden; pointer-events: none; }
/* ===== مثلّث المجلد (البطائق): مِفصلٌ لا شيفرون =====
   المثلّثُ مرسومٌ **نازلًا** — وهي حالُ الفتح — والمطويُّ يُدار تسعين درجةً ليشير إلى مجلده.
   والجهةُ تتبع الكتابة لأنّ المجلدَ يقع في الجهة المقابلة للسهم في اللغتين: يسارَه في
   العربيّة (فيدور مع عقارب الساعة) ويمينَه في الإنجليزيّة (فيدور عكسَها).
   والدورانُ بالتنسيق لا برسمٍ ثانٍ: مسارٌ واحدٌ يُصان، وانتقالُ الحال يُرى دورةً لا قفزة.
   وهذه القواعد بعد قاعدة الشيفرون في الملفّ عمدًا: ترجيحُها واحد، فالمتأخّرُ يغلب —
   ولا تمسّ شجرةَ «الشروح» لأنّها معلَّقةٌ بـ‎--tri‎ وحدَها */
/* ===== رمزُ المجلد في عمود رموز إخوته — والخارجُ من الصفّ مِقبضُ السحب لا السهم =====
   في القائمة الواحدة بنودٌ ومجلدات. والبندُ صفُّه [مقبض][رمز النوع][الاسم]، والمجلدُ
   [مقبض][سهم][رمزه][اسمه] — فيتزحزح رمزُ المجلد ‎24px‎ عن عمود إخوته، والعينُ تمسح
   عمودًا فتجد فيه خرمًا.
   وأوّلُ علاجٍ جرّبتُه إخراجُ **السهم**، فبعُد عن مجلده وصار معلَّقًا وحدَه في الطرف —
   والسهمُ ورمزُ المجلد عُدّتان لشيءٍ واحد: تُفتح ويُوسم، فلا يُفرَّق بينهما.
   فالخارجُ إذن **مقبضُ السحب**: هو الأولى بالخروج لأنّه لا يُرى أصلًا حتى يُمَرَّ عليه،
   فغيابُه من الصفّ لا يترك فراغًا تراه العين.
   ويقع السهمُ حينئذٍ في مقام المقبض بالضبط: عرضُه ‎20‎ وفجوتُه ‎4‎ = ‎24‎، وهو عينُ ما
   يشغله المقبضُ في صفّ البطاقة (‎15‎ وفجوة ‎9‎) — فينزل الرمزان في عمودٍ واحدٍ بلا قسر.
   والمقبضُ يسكن الحشوةَ التي أُفسحت للشجرة على يمينها. والتوسيطُ بـ‎top/margin-top‎
   لا بـ‎translateY‎ لأنّ ‎transform‎ مشغولٌ بأحوالٍ أخرى في هذه الشجرة */
/* ===== ورُدَّت الحبّةُ إلى صفّها بعد أن زالت علّةُ إخراجها =====
   إخراجُها كان يومَ كان صفُّ البطاقة ‎[مقبض][رمز]‎ وصفُّ المجلّد ‎[مقبض][سهم][رمز]‎،
   فيتزحزح رمزُ المجلّد عن عمود إخوته بأربعةٍ وعشرين. ثمّ **حُجزت خانةُ المثلّث في
   كلّ صفّ بطاقة** (انظر ‎cxCardBlock‎)، فصار الصفّان ‎[مقبض][مثلّث][رمز]‎ سواءً —
   وبقي إخراجُ حبّةِ المجلّد وحدَها يزحزحها في الاتّجاه المعاكس.
   فرُدَّت إلى الصفّ وذهبت حاشيةُ الشجرة معها: صدرُ الصفّين واحدٌ (‎15+9‎ ثمّ ‎20+4‎)،
   وصارت شجرةُ التحرير وشجرةُ النشر على قياسٍ واحدٍ حرفًا بحرف */
:is(.pk--edit, .cx-ro) :is(.x3-hd, .x3-ep) > .cx-fold--tri { transform: rotate(90deg); }
html[data-lang="en"] :is(.pk--edit, .cx-ro) :is(.x3-hd, .x3-ep) > .cx-fold--tri { transform: rotate(-90deg); }
:is(.pk--edit, .cx-ro) .x3-st.on > :is(.x3-hd, .x3-ep) > .cx-fold--tri,
html[data-lang="en"] :is(.pk--edit, .cx-ro) .x3-st.on > :is(.x3-hd, .x3-ep) > .cx-fold--tri { transform: rotate(0deg); color: var(--u-mut); }
/* ===== ولونُ المثلّث واحدٌ لا يتبدّل =====
   ورث المثلّثُ من ‎.cx-fold‎ ذهبًا في حال الطيّ وعند المرور، وخفوتًا في حال الفتح — فكان
   يتلوّن بحاله فيُقرأ الذهبُ خبرًا، وليس بخبر: **الدورانُ** وحدَه يقول أمفتوحٌ هو أم مطويّ،
   ولونٌ ثانٍ يقول الشيءَ نفسَه تكرارٌ يشوّش. والذهبُ في هذا الموقع لغةُ **الفعل** (الأزرار
   والأسماء)، والمثلّثُ مِفصلٌ لا فعل.
   واللونُ توكنٌ (‎--u-mut‎) لا بياضٌ حرفيّ: هو أبيضُ الحبر في الجلد الداكن، وينقلب رماديًّا
   داكنًا في الفاتح — ولو كُتب ‎#fff‎ لَاختفى المثلّثُ على السطح الفاتح */
:is(.pk--edit, .cx-ro) :is(.x3-hd, .x3-ep) > .cx-fold--tri,
:is(.pk--edit, .cx-ro) :is(.x3-hd, .x3-ep) > .cx-fold--tri:hover { color: var(--u-mut); }
/* ===== ومثلّثُ **البطاقة** يُذهَّب — والمجلدُ على حاله =====
   القاعدةُ فوقُ عامّةٌ في المثلّثات، وحجّتُها أنّ المثلّثَ مِفصلٌ لا فعل. وتبقى على
   المجلدات: طيُّها عرفٌ مألوفٌ لا يحتاج دعوة.
   وأمّا الذي على بطاقةٍ فخبرٌ نادرٌ لا مِفصلًا معتادًا: **هذه البطاقةُ تلد أوجهًا** —
   وهو أمرٌ لا يعرفه القارئُ حتى يُقال له، ولا يقع إلّا في «الفراغ» و«الإخفاء».
   فالذهبُ ههنا دعوةٌ إلى ما لا يُتوقَّع، لا تكرارٌ لِما يقوله الدوران.
   والتمييزُ بـ‎[data-faces]‎ — وهي السمةُ التي يكتبها ‎cxRowEdit‎ على مثلّث البطاقة وحدَه،
   فلا يُحتاج إلى صنفٍ جديدٍ يُخترع (ونوعيّتُها تعلو على القاعدة العامّة بسمةٍ واحدة) */
:is(.pk--edit, .cx-ro) :is(.x3-hd, .x3-ep) > .cx-fold--tri[data-faces],
:is(.pk--edit, .cx-ro) :is(.x3-hd, .x3-ep) > .cx-fold--tri[data-faces]:hover,
:is(.pk--edit, .cx-ro) .x3-st.on > :is(.x3-hd, .x3-ep) > .cx-fold--tri[data-faces],
html[data-lang="en"] :is(.pk--edit, .cx-ro) .x3-st.on > :is(.x3-hd, .x3-ep) > .cx-fold--tri[data-faces] {
  color: var(--u-gold);
}
/* القياس ‎18px‎ (المختار في ‎tri-shape-lab‎): والمثلّثُ لا يملأ إطارَه — عرضُه ‎18‎ من ‎24‎ —
   فالمرسومُ منه نحو ‎13.5px‎، وهو ما يوازي أيقونةَ المجلد ‎16px‎ بجانبه ولا يطغى عليها.
   والزرُّ يتّسع له: ‎20px‎ ظرفٌ لـ‎18px‎ من غير قصّ */
:is(.pk--edit, .cx-ro) :is(.x3-hd, .x3-ep) > .cx-fold--tri svg { width: 18px; height: 18px; }
/* الرابط يبقى صندوقًا (بيانات طويلة)، والمدة تتحرّر: نصٌّ ذهبيّ بعرض قيمته كما في وضع النشر */
.x3-ep .vid-src { flex: 1 1 90px; min-width: 60px; }
/* ظهر البطاقة: كتابةٌ حرّة كوجهها — لكن بلون خافت ووزن خفيف، فيُقرأ الصفّ «سؤالٌ ثم جوابه» */
.vt-grow--b { font: 400 11.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--u-mut); }
/* ===== اسمُ البطاقة في المحرّر (ROADMAP-CARD-NAMES) =====
   نصٌّ يُقرأ ولا يُملأ — فلا صندوق ولا حدّ ولا نائبٌ عن حقل. والاسمُ كلُّه عريض،
   و‎##‎ **أعرضُ منه**: هي عَلَمُ الاسم فتتقدّم عليه في الثِّقل.
   ===== ولمَ حَدٌّ لا وزنٌ أثقل؟ =====
   العائلةُ (‎IBM Plex Sans Arabic‎) تنتهي عند ‎700‎ — لا ملفَّ فوقها، و‎800‎ يعيده المتصفّح
   إلى ‎700‎ نفسِه فلا يزيد شيئًا (ولا يصطنع وزنًا ما دام ‎700‎ موجودًا). فالزيادةُ تُطلب من
   **الحدّ**: ‎text-stroke‎ بلون الحبر نفسِه ينفخ حرفَ ‎#‎ من طرفيه فيثقل من غير أن يتغيّر
   شكلُه ولا مقاسُه — وهو حرفٌ مستقيمُ الخطوط فلا يشوّهه النفخ.
   والطولُ يُقصّ بنقاطٍ ثلاث فلا يزحم الصفّ */
/* ===== عمودُ الاسم: قدٌّ واحدٌ لا يُتجاوز ولا يُنقَص عنه =====
   معايَرٌ في ‎Desktop\RE\cx-name-lab‎ على الأسماء الحقيقيّة (‎#160px-rule-fade‎):
   ‎160px‎ ≈ ‎35‎ محرفًا — يُملأ ‎1535‎ اسمًا من ‎1777‎ ويُقصّ ‎241‎.
   والقدُّ **بالبكسل لا بالمحارف**: الحرفُ العربيُّ يختلف عرضُه، فـ‎ch‎ لا يُقيم عمودًا.
   وتوكنٌ لا رقمٌ مبثوث: يُعايَر من موضعٍ واحد */
/* ===== عمودُ الاسم وتوكناتُ الخبر: على ‎.pk--pack‎ لا على شجرةٍ بعينها =====
   شجرتان تعرضان الشيءَ نفسَه: شجرةُ التحرير (داخلَ ‎#cm-cards‎) وشجرةُ النشر (خارجَها)،
   ورأسُ المساهمة ثالثٌ لا يسكن أيًّا منهما. و‎.pk--pack‎ جدُّ الثلاثة في الوضعين —
   فمنه تُورَّث بلا استثناء، ولا يُنسى موضعٌ يومَ تُنقل القاعدةُ من وضعٍ إلى وضع */
.pk--pack, #nook .nk-jr { --cx-nm-w: 170px; }
/* ===== خبرُ البطاقة (‎cx-stats-lab#a‎ · «الصفُّ الراتق») =====
   سبعةُ أخبارٍ بترتيبٍ لا يتبدّل، وفجوتان لا فجوة: ضيّقةٌ داخل الثنائيّة وواسعةٌ بين
   المجموعات — والعينُ تقرأ القُربَ جنسًا والبُعدَ فصلًا.
   ===== وموضعُ التوكنات ‎.pk--edit‎ لا ‎#cm-cards‎ =====
   الخبرُ يقع في ثلاثة مواضع: صفوفُ الشجرة (داخلَ ‎#cm-cards‎)، وصفوفُ المجلّدات،
   و**رأسُ المساهمة** — وهو **خارج** الشجرة (‎.x3-pkhd‎ أختُها لا أمُّها). فلو سكنت
   التوكناتُ الشجرةَ لَما ورثها الرأسُ، فبطل كلُّ ‎var()‎ فيه وسقطت قواعدُه بجملتها.
   و‎.pk--edit‎ جدُّ الثلاثة، فمنه تُورَّث بلا استثناء */
.pk--pack, #nook .nk-jr, #vw-side {
  --cs-ic: 12px; --cs-num: 7px; --cs-sq: 9.5px;
  --cs-in: 1px; --cs-pair: 2.5px; --cs-gap: 18.5px; --cs-off: 0px;
  /* وحبرُ الصفر: يبقى ولا يُحذف — غيابُ الرمز يُقرأ «لا خبرَ ههنا» وهو غيرُ «صفر» */
  --cs-zero: .15;
}
.cx-nm {
  font: 700 12px 'IBM Plex Sans Arabic', sans-serif; color: var(--u-gold);
  width: var(--cx-nm-w); flex: none; max-width: 100%;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
}
/* ===== النصُّ أوّلًا، والحشوُ ما فضل =====
   والترتيبُ يقع بالأساس (‎flex-basis‎) لا بالنيّة:
   · النصُّ أساسُه **متنُه** (‎auto‎) — فيأخذ قدرَه ما وُجد له مكان.
   · والحشوُ أساسُه **صفر** — فيبدأ من العدم ويكبر في الفضلة وحدَها.
   ومكسبُ الصفر في **الانكماش** لا في التوسّع: الانكماشُ يُوزَّع بحاصل ‎معامل × أساس‎،
   فحصّةُ الحشو منه ‎1 × 0 = 0‎ — أي لا يُنقص النصَّ حرفًا مهما ضاق العمود، بل يذهب هو
   أوّلًا حتى يبلغ الصفر. ولو تُرك أساسُه ‎auto‎ لَحجز متنَه فقُصّ اسمٌ كان يسع كاملًا */
/* ===== والاسمُ الذي لا حرفَ قويًّا فيه يُكتب كما خُزِّن =====
   الأرقامُ الهنديّة (‎AN‎) لا تبلغها القاعدةُ W7 — هي في الأرقام الأوربيّة وحدها —
   فترفع مستواها في القاعدتين جميعًا وتنقلب مجموعاتُها: «‎١٣ - ٥‎» تُرى «‎٥ - ١٣‎»
   ولو حُكم على الاسم باللاتينيّة. فحكمُ الجهة وحده لا يكفي هذا الصنف.
   و‎bidi-override‎ يقول للمتصفّح: اكتبها بترتيبها ولا ترتّب. وهو قسرٌ لا يجوز على
   متنٍ فيه كلام — ولذلك عُلِّق بـ‎[data-num]‎ وحدَه، وهي سمةٌ لا يكتبها ‎cxRowEdit‎
   و‎cxRowView‎ إلّا حين يكون الاسمُ أرقامًا وفواصلَ لا غير (‎cxNumOnly‎) */
.cx-nm__t[data-num]{unicode-bidi:bidi-override}
/* و‎unicode-bidi: isolate‎: المتنُ جزيرةٌ يُحسب اتّجاهُها وحدَها. و‎dir‎ عليه (‎cxRowEdit‎
   و‎cxRowView‎) لا على صندوقه — فلو كُتب على الصندوق لَقلب ترتيبَ الخانتين معه فذهب
   الخيطُ إلى يمين المتن، والصفُّ يبدأ من اليمين */
.cx-nm__t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: clip; unicode-bidi: isolate; }
.cx-nm__f { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: center;
  overflow: hidden; }
/* والفجوةُ في الحشو لا في وعائه: وعاءٌ عرضُه صفرٌ لا يدفع بهامشٍ في جوفه — ولو كُتبت
   على الوعاء لَبقيت مقتطعةً من النصّ حتى حين لا حشوَ أصلًا */
.cx-nm__f::before {
  content: ''; flex: 1 1 0; min-width: 0; height: 1px;
  margin-inline-start: 6px; background: var(--u-gold); opacity: .3;
}
/* ===== وحكمُ القصّ لا يقع إلّا على المقصوص =====
   القناعُ لا يحرس نفسَه كما يحرس ‎text-overflow‎: لو كُتب مطلقًا لَخبا طرفُ كلّ اسمٍ
   ولو كان تامًّا، فيُقرأ «ثَمّ بقيّة» حيث لا بقيّة. و‎is-long‎ يكتبها ‎cxNameFit‎ بالقياس.
   ووسمٌ واحدٌ يكفي الحالين: الفائضُ هو بعينه من لا حشوَ لَه — فالخيطُ يظهر حيث يسع
   النصُّ، والتلاشي حيث لا يسع، ولا يجتمعان في صفٍّ أبدًا */
/* ===== والتلاشي يتبع جهةَ **المتن** لا لغةَ الموقع =====
   القصُّ يقع في طرف المتن المنتهي: العربيُّ يبدأ من اليمين فيُقصّ يسارُه، والإنجليزيُّ
   يبدأ من اليسار فيُقصّ يمينُه. وكان الحكمُ معلّقًا بـ‎html[data-lang]‎ — أي بلغة
   **الموقع** — فاسمٌ إنجليزيٌّ في موقعٍ عربيٍّ كان يُقصّ من يمينه ويُطلى التلاشي على
   يساره: يخبت أوّلُه التامّ ويُبتر آخرُه بحدٍّ حادّ، فيُقرأ الأمرُ كلُّه معكوسًا.
   و‎dir‎ اليومَ مكتوبٌ على المتن نفسِه (‎cxRowEdit‎ و‎cxRowView‎)، فيُسأل هو */
.cx-nm.is-long .cx-nm__t[dir="rtl"] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent);
}
.cx-nm.is-long .cx-nm__t[dir="ltr"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
/* ===== الرمزُ والاسمُ كتلةٌ واحدة تُفتح منها البطاقة =====
   زرٌّ واحدٌ يضمّهما (‎cxRowEdit‎)، فمدى الضغط مداهما معًا لا مدى الرمز وحدَه.
   وفجوتُه الداخليّة ‎4.5px‎ — نصفُ فجوة الصفّ (‎9‎): هما خبرٌ واحدٌ عن البطاقة (نوعُها
   ومتنُها) فيتقاربان، وتبقى الفجوةُ الأوسع تفصل الكتلةَ عمّا جاورها.
   والحشوةُ تُبطَّن بهامشٍ سالبٍ مساوٍ لها: أرضيّةُ المرور تحتاج فسحةً حول الحبر، ولو
   زِيدت بلا إبطالٍ لَزحفت الكتلةُ عن عمود الرموز الذي ضُبط عليه الصفُّ كلُّه.
   والأرضيّةُ لا تظهر إلّا بالمرور — فالصفُّ الساكن حبرٌ على ورق، والكتلةُ تُعلن نفسَها
   حين تُقصد لا قبلَه */
.cx-open {
  display: inline-flex; align-items: center; gap: 4.5px; min-width: 0; flex: 0 1 auto;
  padding: 2px 5px; margin-inline: -5px; border: 0; border-radius: 7px;
  background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
  transition: background .14s;
}
.cx-open:hover, .cx-open:focus-visible { background: var(--u-hov); }
/* ===== والمربّعُ نفسُه خبرُ التحديد =====
   ما يظهر عند التأشير يظهر عند التحديد: إشارةٌ واحدةٌ لحالين — «هذا الذي تقصده» و«هذا
   الذي اخترته» — فلا يتعلّم المستخدمُ لغتين لشيءٍ واحد. وكان خبرُ التحديد مقصورًا على
   صحٍّ صغيرٍ في المقبض وحدَه، والمقبضُ في صفّ المجلد خرج إلى الطرف — فبَعُد الخبرُ عن مخبَره.
   والمجلدُ يأخذه **هالةً** (‎box-shadow‎ بلا انتشارٍ في الحيّز) لا حشوةً: حشوتُه تمدّ خطَّه
   الذي ضُبط لينتهي بمحاذاة آخر رقم، والهالةُ تُوسّع اللونَ ولا تُوسّع الصندوق */
.cx-row.is-sel > .cx-open { background: var(--u-hov); }
.x3-hd.is-sel > .x3-fwrap {
  background: var(--u-hov); box-shadow: 0 0 0 4px var(--u-hov); border-radius: 3px; }
/* ============================================================
   أوجهُ بطاقة «الفراغ» تحت أمّها
   ============================================================
   الوجهُ ليس بطاقةً تُؤلَّف بل **أثرُ فراغٍ في متن أمّه**، ولذلك:
   · لا مقبضَ سحبٍ عليه ولا سلّة — يُحذف بحذف الفراغ من المحرّر لا من هنا.
   · وقامتُه أقصرُ من قامة الأمّ (‎24‎ دون ‎30‎) وحبرُه أخفت: تابعٌ لا نِدّ.
   والرقمُ بنقطته (‎1.‎) لا بحرفٍ ولا بنقطةٍ مجرّدة: هو **رقمُ الفراغ في المتن** يُقرأ
   ويُقاس عليه، فيصل المؤلّفُ بين ما رآه في المحرّر (‎بط1‎) وما يراه هنا بلا ترجمة */
/* ===== ومبدؤها مبدأُ الأيقونة لا إزاحةُ الشجرة =====
   إزاحةُ الدرجة (‎21‎) لغةُ المجلدات: «هذا **داخلَ** ذاك». والأوجهُ ليست داخل أمّها
   بل **منها**، فلا تُزاح إزاحةَ ابنٍ — بل تصطفّ تحت أوّلِ ما يقول ما هي: رمزُ النوع.
   وقُيس فوُجد على ‎49‎ من مبدأ الصفّ، وهي مجموعُ ما يسبقه:
   المقبضُ ‎16‎ + فجوةُ الصفّ ‎9‎ + المثلّثُ ‎20‎ − تقاربُه ‎5‎ + فجوةُ الصفّ ‎9‎.
   فإن تبدّل أحدُها فهذا موضعُ إعادة الجمع.
   و‎--pad‎ لا حشوةٌ صريحة: ‎.x3-sub‎ تقرؤها، فيبقى قرارُ الحشو في مكانٍ واحد.
   والهامشُ العلويُّ صفرٌ: الوجهُ ملتصقٌ بأمّه — تابعٌ لها لا جارٌ تحتها.
   والصنفان معًا في المِلاك (‎.x3-sub.cx-faces‎) لا ‎.cx-faces‎ وحدَه: هامشُ ‎.x3-sub‎
   متأخّرٌ في الملفّ، فيغلب بترجيحٍ متساوٍ — والمركَّبُ يعلو عليه أينما وقع */
.x3-sub.cx-faces { display: grid; gap: 1px; --pad: 49px; margin-top: 0; }
/* والوجهُ زرٌّ لا سطر: يُضغط فيُعرض سؤالُه. ولا سطحَ له ولا حدّ — نصٌّ يُضاء بالمرور،
   كصفّ البطاقة نفسِه، فلا يدخل الصفَّ جسمٌ رابع */
.cx-face { display: flex; align-items: center; gap: 7px; height: 24px; min-width: 0;
  width: 100%; padding: 0 3px; margin-inline-start: -3px; border: 0; background: none;
  font: inherit; text-align: start; cursor: pointer; border-radius: 5px;
  transition: background .13s ease; }
.cx-face:hover { background: var(--u-hov); }
/* ===== وعاءُ الرقم والمتن: صفٌّ في صفّ =====
   ‎gap‎ نفسُها (‎7px‎) فلا يتبدّل ما بين الرقم ومتنه، و‎flex: 0 1 auto‎ كما كان المتنُ
   وحدَه — فلا يتمدّد الوعاءُ ولا يدفع خبرَ الوجه إلى الحافّة، وإنّما يأخذ قدرَه وينكمش
   عنده. و‎min-width: 0‎ لازمةٌ ههنا وفي جوفها: النقاطُ الثلاث لا تعمل إن لم يجُز
   الانكماشُ إلى ما دون المحتوى في **كلّ** طبقةٍ بينهما.
   والجهةُ تُكتب على الوعاء في ‎cxFaceHTML‎ لا ههنا: هي خبرٌ عن متنٍ بعينه لا قاعدةُ شكل */
.cx-face__b { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 0 1 auto; }
.cx-face__n { flex: none; font-size: 10.5px; font-weight: 700; color: var(--u-lab);
  font-variant-numeric: tabular-nums; }
/* و‎isolate‎: المتنُ جزيرةٌ يُحسب اتّجاهُها وحدَها فلا يتسرّب حسابُه إلى رقمه */
.cx-face__t { font-size: 12px; font-weight: 600; color: var(--u-gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; unicode-bidi: isolate; }
/* ===== ومتنُ الوجه ذهبيّ ورقمُه لا =====
   الذهبُ في هذا الموقع لغةُ **ما يُقصد**، والوجهُ هو المقصود: ينفتح في نافذته ويُذاكَر
   وحدَه. والرقمُ (‎١.‎ ‎٢.‎) عدٌّ لا مقصد، فيبقى تسميةً خافتة (‎--u-lab‎) — ولو ذُهِّب معه
   لَاستوى العدُّ بالمعدود وضاع ما يُفرِّقهما.
   ومعه المثلّثُ الذي فوقَه: كلاهما يقول الشيءَ نفسَه — «ههنا أوجهٌ تُفتح» */
/* وكتلةُ البطاقة ذاتِ الأوجه لا خيطَ رحلةٍ لها ولا علامة — كسائر ما في التحرير */
.pk--edit .x3 > .x3-st.cx-mst::after { display: none; }
/* ===== وفسحتُها فسحةُ البطائق لا فسحةُ المجلدات =====
   الأمُّ الوالدةُ تسكن ‎.x3-st‎ لتُطوى كما يُطوى المجلد — فورثت معه فسحتَه (‎12px‎)،
   وأخواتُها البطائقُ إمّا ‎.x3-solo‎ بستّة في الدرجة الأولى، وإمّا صفٌّ عارٍ بلا فسحةٍ
   داخل مجلد. فكانت تُخلّف تحتها فراغًا لا يُخلّفه غيرُها — تُقرأ به مجلدًا وهي بطاقة.
   فتُردّ إلى فسحة إخوتها بحسب موضعها: ستٌّ في الدرجة الأولى، وصفرٌ في جوف مجلد */
:is(.pk--edit, .cx-ro) .cx-mst { margin-bottom: 0; }
:is(.pk--edit, .cx-ro) .x3 > .cx-mst,
.cx-ro.x3 > .cx-mst { margin-bottom: 6px; }
:is(.pk--edit, .cx-ro) .x3 > .cx-mst:last-child,
.cx-ro.x3 > .cx-mst:last-child { margin-bottom: 0; }
/* ولا تُلاصق أوجهُها ما بعدها حين تُفتح: هي حينئذٍ كتلةٌ لا سطر */
:is(.pk--edit, .cx-ro) .cx-mst.on { margin-bottom: 4px; }
/* (رُفعت ‎.cx-nm__h‎ — صدرُ ‎##‎ ذهب من الاسم، فلا جسمَ لها) */
.cx-nm__t { font-weight: 700; font-style: normal; }
.cx-nm.is-ph { color: var(--u-ph); }
.cx-nm.is-ph .cx-nm__t { font-weight: 400; }   /* النائبُ ليس اسمًا فلا يلبس ثِقلَه */
/* ============================================================
   سجلُّك أنت — يسارَ اسم البطاقة
   ============================================================
   المربّعُ مربّعُ الاكتمال في صفّ الشرح بعينه (‎.x3-done‎): قدُّه ‎9‎ وحدُّه ‎1.5‎، وأرضيّتُه
   **أرضيّةُ الصفّ مركَّبةً** (ورقٌ ثمّ ‎--u-surf‎ ثمّ ‎--u-ctl‎) لا لونًا مسطَّحًا — وإلّا
   بدا ثقبًا داكنًا في الصفّ. وهي حيلةُ ‎.x3-dot‎ نفسُها.
   والفجوةُ إلى خبر الناس ‎--cs-gap‎ تامّةً (فجوةُ الصفّ ‎9‎ وما بقي منها): سجلُّك ملاصقٌ
   لاسم البطاقة لأنّه منها، وخبرُ الناس جنسٌ آخرُ فيُبعَد بمقدار ما يفصل مجموعاتِه */
.cx-me {
  flex: none; display: inline-flex; align-items: center; gap: var(--cs-pair);
  margin-inline-end: calc(var(--cs-gap) - 9px); font-variant-numeric: tabular-nums;
}
.cx-me__i { display: inline-flex; align-items: center; gap: var(--cs-in); }
.cx-me__i b { font: 700 var(--cs-num)/1 'IBM Plex Sans Arabic', sans-serif; color: var(--u-tx); }
.cx-me__b {
  flex: none; width: 9px; height: 9px; border-radius: 2px;
  border: 1.5px solid var(--u-in-line);
  background: linear-gradient(var(--u-ctl), var(--u-ctl)),
    linear-gradient(var(--u-surf), var(--u-surf)), var(--x3-paper);
}
/* والممتلئُ مصمتٌ تامٌّ كـ‎.x3-done.on‎ — لا «ظِلالٌ» كمربّع الناس الذي كان:
   ذاك عمودٌ يُقارَن فيُخفَّف حبرُه، وهذا خبرٌ عنك فيُقال صريحًا */
.cx-me__i--ok .cx-me__b { background: var(--cd-sync, #4e9d57); border-color: var(--cd-sync, #4e9d57); }
.cx-me__i--no .cx-me__b { background: var(--cd-wrong, #c0455f); border-color: var(--cd-wrong, #c0455f); }
.cx-me__i { display: inline-flex; align-items: center; gap: var(--cs-in); }
.cx-me__i b { font: 700 var(--cs-num)/1 'IBM Plex Sans Arabic', sans-serif; color: var(--u-tx); }
/* والممتلئُ مصمتٌ تامٌّ كـ‎.x3-done.on‎ — لا «ظِلالٌ» كمربّع الناس الذي كان:
   ذاك عمودٌ يُقارَن فيُخفَّف حبرُه، وهذا خبرٌ عنك فيُقال صريحًا */
.cx-me__i--ok .cx-me__b { background: var(--cd-sync, #4e9d57); border-color: var(--cd-sync, #4e9d57); }
.cx-me__i--no .cx-me__b { background: var(--cd-wrong, #c0455f); border-color: var(--cd-wrong, #c0455f); }
/* والصفرُ يخبت ولا يذهب: ذهابُه يقول «لا خبرَ من هذا الباب» وهو غيرُ «لم يقع بعد» */
.cs-i.is-0 { opacity: var(--cs-zero); }
/* والساقطُ يُحذف حذفًا: الصفُّ راتقٌ لا جدوليّ */
.cs-i.is-off, .cs-p.is-off { display: none; }
/* ===== وفجوةُ الجنسين تبقى بعد سقوط السجلّ من التحرير =====
   كان الصفُّ ‎[اسم] ٩ [سجلُّك] ١٨٫٥ [خبر الناس]‎: تسعةٌ فجوةُ الصفّ، وثمانيةَ عشرَ ونصفٌ
   ما يفصل جنسًا عن جنس. فلمّا سقط السجلُّ من ‎cxRowEdit‎ صار خبرُ الناس يلي الاسمَ بفجوة
   الصفّ وحدَها، فانضمّ إليه وهو غيرُه.
   فتُردّ الفجوةُ إلى ما كانت: ‎--cs-gap − ٩‎ حاشيةً على الخبر، فيبقى بينهما ‎١٨٫٥‎ ولا
   ينزاح الخبرُ إلّا بعرض المربّع الذاهب وحدَه.
   و‎>‎ شرطٌ لا زينة: خبرُ **الوجه** يسكن جوف زرّه (‎.cx-face‎) لا صفَّ البطاقة، فلا تبلغه */
.pk--edit .cx-row > .cs { margin-inline-start: calc(var(--cs-gap) - 9px); }
/* ===== ولا خبرَ عن الاقتراحات في النشر =====
   الاقتراحُ عرضُ تعديلٍ يُرفع إلى **صاحب الرزمة** ليقبله أو يردّه — فهو خبرٌ عن بريده
   لا عن البطاقة. والقارئُ في وضع النشر ليس صاحبَها، فرقمٌ يقول «عليها ثلاثةُ اقتراحات»
   خبرٌ لا يعنيه ولا يملك تجاهه فعلًا. فيسقط الرمزُ والعددُ معًا.
   والنطاقُ ‎.pk--pack:not(.pk--edit)‎ لا ‎.cx-ro‎: الخبرُ يقع في شجرة الرزمة **وفي
   رأسها** معًا، والرأسُ خارجَ الشجرة — فيُؤخذ الأبُ الذي يسعهما.
   و‎display‎ لا ‎visibility‎: لا خانةَ تُحجز لشيءٍ لا يعود، والزوجُ الباقي (التحذير)
   لا تتخلّف عنه فجوةٌ إذ الفجوةُ بين اثنين لا حول الواحد */
.pk--pack:not(.pk--edit) .cs-i--props { display: none; }
/* ===== وخبرُ الصفّ في النشر يُطلب ولا يُعرض =====
   المجلّدُ كان كذلك من قبلُ (‎.x3-hd > .cs-fold‎)، والبطاقةُ ووجهُها كانا يعرضان أبدًا.
   والقارئُ إنّما جاء **ليقرأ الأسماء**؛ فسبعةُ أرقامٍ في كلّ صفٍّ تزاحم ما جاء له.
   فتُردّ إلى المرور: من أرادها وقف عليها. والمحرّرُ على حاله — تلك أرقامُه هو.
   و‎display‎ لا ‎visibility‎: الخبرُ يقع بعد عمود الاسم (وهو مقيسٌ بـ‎--cx-nm-w‎)،
   فذهابُه لا يزحزح اسمًا — إنّما يُخلي ما بعده */
/* ===== وشجرةُ نشر الشروح كأختها =====
   الحكمُ كان لـ‎.cx-ro‎ وحدَها، وشجرةُ الشروح ‎.cx-vo‎ — فكان خبرُها معروضًا أبدًا:
   سبعةُ أرقامٍ في كلّ صفّ تزاحم اسمَ الشرح الذي جاء له القارئ. والحجّةُ واحدةٌ فيهما */
.x3.cx-ro :is(.x3-ep, .cx-face) > .cs,
.x3.cx-vo .x3-ep > .cs { display: none; }
.x3.cx-ro :is(.x3-ep, .cx-face):hover > .cs,
.x3.cx-vo .x3-ep:hover > .cs { display: inline-flex; }
/* ===== والتحذيرُ يُؤخَّر إلى طرف السطر =====
   ترتيبُ الخبر في التحرير سُلَّمُ مالكٍ: ما يُصلَح أوّلًا (تحذيرٌ واقتراح) ثمّ ما يُقاس.
   والقارئُ لا يُصلح شيئًا، فصدارةُ التحذير عنده صراخٌ في غير محلّه — وإسقاطُه كذبٌ:
   بقاؤه خبرٌ يعنيه (قد تكون المعلومةُ خاطئة). فيُؤخَّر ولا يُحذف: يقف آخرَ السطر
   يسارًا، يجده من طلبه ولا يعترض من لم يطلبه.
   و‎order‎ لا إعادةُ بناءٍ في ‎cxNewsHTML‎: الرسمُ واحدٌ في الوضعين والترتيبُ وحدَه
   يفترق، فلا تُشقّ الدالّةُ فرعين يفترقان بعدُ في غير هذا.
   و‎:has(> .cs-i--warn)‎ لا ‎:first-child‎: يقول أيَّ زوجٍ يعني، فلو أُعيد ترتيب
   ‎CX_NW_G‎ يومًا لَتبِعه الحكمُ ولم يتخلّف عند خانةٍ صارت لغيره */
.pk--pack:not(.pk--edit) .cs > .cs-p:has(> .cs-i--warn) { order: 1; }
/* ===== وصفوفُ النشر تُقرأ ولا تُضغط =====
   الرسمُ واحدٌ في الوضعين حرفًا بحرف، والفرقُ في **ما يَعِد به**: حوضُ المرور ومؤشّرُ
   اليد يقولان «اضغطني»، وفي النشر لا شيءَ يقع — فيُرفعان وحدَهما ويبقى الرسمُ */
.cx-open--ro { cursor: default; }
.cx-open--ro:hover { background: none; }
.cx-face--ro { cursor: default; }
.cx-face--ro:hover { background: none; }
/* ===== وخبرُ المجلّد لا يُرى إلّا والمؤشّرُ عليه =====
   المجلّدُ وعاءٌ لا بطاقة، وخبرُه **مجموعُ ما فيه** — وهو مكرَّرٌ في أبنائه سطرًا سطرًا.
   فلو بقي معروضًا لَزاحم أسماءَ الأبناء بخبرٍ مقروءٍ تحته مفصَّلًا. فيُطلب ولا يُعرض.
   و‎display‎ لا ‎visibility‎: الحجزُ يقتطع من اسم المجلّد (وهو حقلٌ نامٍ) عرضًا واسعًا
   لشيءٍ لا يُرى في أكثر الوقت — والزحزحةُ عند المرور ردٌّ متوقَّعٌ لا عطب */
.x3-hd > .cs-fold { display: none; }
.x3-hd:hover > .cs-fold { display: inline-flex; }
/* ورأسُ المساهمة يُظهره أبدًا: لا شيءَ فوقه يُزاحمه، وهو خبرُ الرزمة كلِّها */
#cm-vnews { display: inline-flex; flex: none; }
#cm-vnews .cs { margin-inline-start: var(--cs-gap); }
/* ============================================================
   خبرُ البطاقة في الشجرة — يسارَ اسمها في المحرّر
   ============================================================
   الأخبارُ السبعةُ ليست سلسلةً واحدةً بل **أزواجٌ من جنسٍ واحد**:
     [تحذيرٌ · اقتراح] — ما يقوله القارئُ عن صحّتها
     [تنزيل]           — الأخذُ، وحدَه لا قرينَ له
     [صوابٌ · خطأ]     — حكمُ الجواب
     [نظرٌ · كلام]     — ما وقع عليها من نظرٍ وقول
   فالقُربُ يقول «هذان من بابٍ واحد» والبُعدُ يفصل — بلا خيطٍ ولا حدّ.
   ===== وما تحمله البطاقةُ يتبع ما هي =====
   الأمُّ الوالدةُ تحمل ما يقع على **البطاقة** (تحذيرٌ · اقتراحٌ · تنزيلٌ · نظر)،
   والوجهُ ما يقع على **السؤال** (صوابٌ · خطأٌ · كلام)، والمفردةُ الاثنين — وهي قسمةُ
   ركن التذييل في نافذة البطاقة بعينها، فلا يقول الموضعان شيئين.
   والساقطُ **يُحذف ولا تُحجز خانتُه**: الصفُّ راتقٌ يلتئم خلفه، والمجموعةُ التي لا
   يحمل منها شيئًا تُطوى بجملتها فلا تبقى فجوتُها يتيمة.
   ============================================================ */
.cs {
  flex: none; display: inline-flex; align-items: center; gap: var(--cs-gap);
  margin-inline-start: var(--cs-off); font-variant-numeric: tabular-nums;
}
.cs-p { display: inline-flex; align-items: center; gap: var(--cs-pair); }
.cs-i { display: inline-flex; align-items: center; gap: var(--cs-in); color: var(--u-lab); }
/* ===== وأيقونةُ الكلام صارت زرًّا، ولا تخرج بذلك عن صفّ أخواتها =====
   تلبس ‎.cs-i‎ نفسَه ويُنزع عنها جلدُ الأزرار وحدَه — كما فُعل بـ‎.cd-stat--cmt‎ في
   ذيل النافذة حرفًا بحرف، فلا يفترق البابان وهما بابٌ واحدٌ إلى شيءٍ واحد.
   والحشوُ سالبُ الحاشية: تكبر رقعةُ الإصبع ولا يتزحزح الصفُّ عمّا كان بكسلًا */
button.cs-i {
  font: inherit; cursor: pointer; border: 0; background: none;
  -webkit-appearance: none; appearance: none;
  padding: 3px 5px; margin: -3px -5px; border-radius: 7px;
  transition: background .15s;
}
button.cs-i:hover { background: var(--u-hov); }
/* والمفتوحةُ تتذهّب: الذهبُ في هذا الموقع علامةُ «هذا هو المفتوح» */
button.cs-i.on { background: var(--u-gold-hov); color: var(--u-gold); }
button.cs-i.on b { color: var(--u-gold); }
button.cs-i:focus-visible { outline: 2px solid var(--u-gold); outline-offset: 1px; }
/* والصفرُ يخبت — إلّا أن يكون بابًا: البابُ يُضغط ولو كان جوفُه خاويًا اليوم */
button.cs-i.is-0 { opacity: 1; }
button.cs-i.is-0 svg, button.cs-i.is-0 b { opacity: var(--cs-zero); }
button.cs-i.is-0:hover svg, button.cs-i.is-0:hover b { opacity: 1; }
.cs-i svg { width: var(--cs-ic); height: var(--cs-ic); flex: none; display: block; }
.cs-i b { font: 700 var(--cs-num)/1 'IBM Plex Sans Arabic', sans-serif; color: var(--u-tx); }
.cs-i--warn { color: var(--cd-warn, #d1791f); }
.cs-i--warn b { color: var(--cd-warn, #d1791f); }
.cs-i--props { color: var(--u-gold); }
.cs-i--props b { color: var(--u-gold); }
/* ===== وبدَنا الحكم يُصبغان: الصوابُ أخضرُ والخطأُ أحمر =====
   الشارةُ في ثُلمة الكتف تفرّق بينهما شكلًا (صحٌّ ⇄ ضربٌ)، وزِيد اللونُ عليها بحكم
   صاحب الموقع: القارئُ يمسح صفًّا من الأرقام فيلتقط اللونَ قبل أن يقرأ الشكل.
   ===== والصبغةُ على الرمز وحدَه لا على رقمه =====
   وهو موضعُ افتراقهما عن ‎--warn‎ و‎--props‎ فوقهما، وهما يصبغان الرقمَ معهما: أولئك
   واحدٌ واحد، وهذان **زوجٌ متقابل** يقع في صفّ الأرقام نفسِه — فلو تلوّن عدداهما
   لَتقطّع العمودُ بلونين متضادّين في موضعٍ واحد. فيبقى العددُ بحبر الشريط (‎.cs-i b‎)
   ويُقرأ الصفُّ عمودًا واحدًا.
   ===== واللونان بالاحتياط لا بالتوكن =====
   ‏‎--cd-sync‎ و‎--cd-wrong‎ مقصورتان على ‎#card-modal‎ ولا تبلغان الشجرةَ في ‎#cm-ui‎ */
.cs-i--ok { color: var(--cd-sync, #4e9d57); }
.cs-i--no { color: var(--cd-wrong, #c0455f); }
/* والصفرُ يخبت ولا يذهب: ذهابُه يقول «لا خبرَ من هذا الباب» وهو غيرُ «لم يقع بعد» */
.cs-i.is-0 { opacity: var(--cs-zero); }
/* والساقطُ يُحذف حذفًا: الصفُّ راتقٌ لا جدوليّ */
.cs-i.is-off, .cs-p.is-off { display: none; }
/* وخيطُ النائب أخفتُ: «بطاقةٌ فارغة» ليست اسمًا يُملأ ما بعده، فلا يُمدّ له خطٌّ كامل */
.cx-nm.is-ph .cx-nm__f::before { opacity: .1; }
/* ===== سلّةُ البند: للمحدَّد وحدَه =====
   تظهر على البند المحدَّد فقط — بطاقةً كان أو مجلدًا — فإذا صار المحدَّدون اثنين فأكثر
   رُفعت عن الجميع (سلّةٌ على أحدهم حينئذٍ تكذب: أتحذفه وحدَه أم تحذفهم كلَّهم؟).
   و‎visibility‎ لا ‎display‎: الحيّزُ يبقى محجوزًا فلا يقفز الصفُّ ولا يتمدّد الاسمُ
   مع كلّ تحديدٍ وإلغاء. والحكمُ مقصورٌ على شجرة البطائق (‎.cx-tree‎) — «الشروح» لا تحديدَ فيها */
.cx-tree .cx-del { visibility: hidden; }
.cx-tree .is-selroot > .cx-del { visibility: visible; }
/* ===== وسلّةُ «الشروح» تتبع الحكمَ نفسَه =====
   كانت ظاهرةً طولَ الوقت لأنّ شجرتَها ليست ‎.cx-tree‎ (ذاك صنفُ البطائق)، فلم يبلغها
   الحكم. والحجّةُ واحدةٌ في الشجرتين: «الحذفُ فعلٌ على **بندٍ بعينه**، فسلّتُه تظهر
   حين يُقصد هو» — وسلّةٌ في كلّ صفٍّ أبدًا تُغري بضغطةٍ لم تُقصد.
   ولا ‎is-multi‎ ههنا: ذاك يرفعها عند تعدّد الرؤوس لأنّ للجمع أداتَه في شريط الأسفل،
   ولا شريطَ للشروح — فتبقى على كلّ رأسٍ محدَّد، وهو أنفعُ من رفعها بلا بديل */
#cm-videos .cx-del { visibility: hidden; }
#cm-videos .is-selroot > .cx-del { visibility: visible; }
.cx-tree.is-multi .cx-del { visibility: hidden; }
.vt-grow--dur { font: 700 10.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--u-gold);
  direction: ltr; unicode-bidi: embed; font-variant-numeric: tabular-nums; }
/* زرّ اختيار الملف بعرض نصّه لا بعرض الصفّ، وبارتفاع أقصر — واسم الملف بعده يقصّره تلقائيًّا */
.pk--edit .x3-ep .src-filebtn {
  flex: 0 1 auto; max-width: 100%;
  padding: 1px 8px; border-width: 1px; border-radius: 7px;
  font-size: 11.5px; line-height: 1.5;
}
/* السهمُ صار قبل الأيقونة لا في ذيل الصفّ، فالفجوةُ السالبةُ تُقرّبه من **أيقونة المجلد**
   لا من سلّة الحذف: ٤px بدل فجوة الصفّ ٩px — عُدّتان لمجلدٍ واحدٍ فتُقرآن كتلةً */
:is(.pk--edit, .cx-ro) :is(.x3-hd, .x3-ep) > .cx-fold { margin-inline-end: -5px; }
/* ===== ولم يعد الوضعان يفترقان في الرحلة =====
   كانت حاشيةُ الشجرة تُرفع في التحرير («خيطُ الرحلة وعلاماتُه تعبيرٌ عن إنجاز القارئ
   لا عن بناء الرزمة»)، ثمّ صار لصاحبها أن يجعلها رحلةً فيرى أثرَه في مكانه — فصارت
   محطّاتُ التحرير ثابتةً كمحطّات النشر، رحلةً كانت الرزمةُ أو قائمة.
   فحاشيتُه حاشيتُها (‎.x3‎ وحدَها، بلا رفعٍ ولا ردّ)، وقضيبُه قضيبُها (‎.x3::before‎
   مقيسًا)، ولا صنفَ يفرّق بينهما: ‎cx-nojr‎ يُطفئ القضيبَ في أيّهما كان.
   وقواعدُ الرحلة وُسّعت بـ‎:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo)‎ فتشمل **الأشجارَ الثلاث**:
   محرّرَ البطائق وشجرةَ نشرها وشجرةَ نشر الشروح. فلا تُنسخ ولا تفترق.
   ===== وما لم يدخلها القارئُ فلا محطّاتِ لها =====
   ‎cx-nodot‎ يُوضع في **نشر البطائق وحدَه** حين لا يجد ‎packEntered‎ في سجلّ القارئ أثرًا
   من هذه الرزمة: دائرةُ الاكتمال خبرٌ عن سعيه هو، فلا تُعرض على من لم يبدأ.
   ونشرُ «الشروح» مستثنًى: لا سجلَّ مشاهدةٍ له بعدُ (‎x3Watch‎ ردٌّ ثابتٌ بصفر)، فالبابُ
   لا ينفتح أبدًا — فتُعرض دوائرُه بلا شرط، خبرًا عن **بنية الرزمة** حتى يجيء سجلُّه.
   والمحطّاتُ لا تُرسم أصلًا في القالب، فلم يبقَ ههنا إلّا ردُّ الحاشية: ثلاثون بكسلًا
   كانت مسكنَها تعود إلى الأسماء. والقضيبُ يَعدَم من نفسِه (‎--jr-h: 0‎ بلا محطّتين).
   ويبقى للأمّ الوالدة استثناؤها: خيطُها يُرسم في موضعٍ آخر */
.x3.cx-nodot { padding-inline-start: 0; }
/* ============================================================
   وفي المحرّر: الرحلةُ لمحةٌ لا مقام
   ============================================================
   الأصلُ ألّا تُرى — حاشيتُها ثلاثون بكسلًا تُقتطع من الأسماء، وصاحبُ الرزمة يكتب فيها
   لا يتأمّلها. فتُلمَح مرّتين لا غير (‎jrPeek‎ في ‎app.js‎): عند فتح المساهمة، وعند تبديل
   المفتاح. ثمّ تنسلّ بعد ثلاثٍ ونصفٍ في ذوبانٍ هادئ وترجع الحاشيةُ إلى الأسماء.
   والذوبانُ **حبرٌ وحاشيةٌ معًا**: لو ذاب الحبرُ وحدَه لَبقيت ثلاثون بكسلًا خاويةً
   إلى الأبد، ولو انطوت الحاشيةُ وحدَها لَقفزت الأسماءُ قفزةً والحبرُ عليها.
   وكلُّ ما يُذاب مشروطٌ بالدائرة (‎:has(> .x3-dot)‎) — فما لا محطّةَ له لا حبرَ له أصلًا.
   ‎--jr-op‎ مقبضٌ واحدٌ يحملها كلَّها: قضيبُ الحاضن وقضبانُ الجوف والدوائرُ وخيوطُها.
   وقضيبُ الجوف يُضرب في خفوته الأصليّ (‎--jd‎) فلا يفقد تدرُّجَه بالعمق.
   ============================================================ */
.pk--edit .x3 {
  --jr-op: 0;
  padding-inline-start: 0;
  transition: padding-inline-start .42s cubic-bezier(.4, 0, .2, 1);
}
.pk--edit .x3.jr-peek { --jr-op: 1; padding-inline-start: 30px; }
.pk--edit .x3 .x3-dot,
.pk--edit .x3::before,
.pk--edit .x3 .x3-st:has(> .x3-dot) > .x3-hd::before,
.pk--edit .x3 .x3-st:has(> .x3-dot) > .x3-hd::after,
.pk--edit .x3 .x3-ep:has(> .x3-dot)::before,
.pk--edit .x3 .x3-ep:has(> .x3-dot)::after {
  opacity: var(--jr-op);
  transition: opacity .42s cubic-bezier(.4, 0, .2, 1);
}
.pk--edit .x3 .x3-sub.has-rail::before {
  opacity: calc(var(--jr-op) * max(.45, 1 - .2 * var(--jd, 0)));
  transition: opacity .42s cubic-bezier(.4, 0, .2, 1);
}
/* ومن كره الحركةَ لم تُفرض عليه: تُبدَّل الحالُ بلا ذوبان */
@media (prefers-reduced-motion: reduce) {
  .pk--edit .x3,
  .pk--edit .x3 .x3-dot,
  .pk--edit .x3::before,
  .pk--edit .x3 .x3-sub.has-rail::before { transition: none; }
}
:is(.pk--edit, .cx-ro) .x3 > .cx-mst > .x3-ep::before { display: none; }
/* مقبض السحب: وحده يفعّل السحب فتبقى حقول الأسماء قابلة للتحديد بالمؤشّر */
/* ===== المقبض صار رسمين في غلاف =====
   الحرفُ ‎⠿‎ لا يُمسخ صحًّا، فحلّ محلَّه رسمان يتبادلان بالصنف. والقياسُ ‎15px‎ — قدُّ الحرف
   الذي كان — فلا يتزحزح صفٌّ واحد، والانحناءُ ‎4px‎ ينتظر أرضيّة التحديد */
.vt-grab {
  flex: none; cursor: grab; user-select: none; line-height: 1;
  width: 15px; height: 15px; border-radius: 4px;
  display: inline-grid; place-items: center;
  color: var(--u-fade); transition: color .15s, background .15s, opacity .14s;
}
.vt-grab svg { width: 15px; height: 15px; display: block; }
.vt-grab .vg-on { display: none; }   /* الصحُّ لا يظهر إلّا بالتحديد */
.vt-grab:hover { color: var(--u-gold); }
/* ===== تحديد البطائق: ضغطةٌ دون العتبة =====
   المقبضُ لا يظهر إلّا بالمرور على صفّه — فالصفُّ الساكن نظيفٌ لا نقاطَ في طرفه.
   والمحدَّدُ يبقى ظاهرًا مهما ذهب المؤشّر، وإلّا اختفى خبرُ التحديد مع اليد.
   ولا صدى في الصفّ: القرارُ أن يقتصر الخبرُ على المقبض وحدَه */
.pk--edit .vt-grab--sel { opacity: 0; }
.pk--edit .x3-hd:hover > .vt-grab--sel,
.pk--edit .x3-ep:hover > .vt-grab--sel,
.pk--edit .vt-grab--sel:focus-visible,
.pk--edit .is-sel > .vt-grab--sel { opacity: 1; }
/* المحدَّد: مربّعٌ مصمتٌ ببترول الهويّة وفيه صحٌّ أبيض.
   وفي الجلد الداكن يُرفع البترولُ إلى درجةٍ تُرى على سطحٍ داكن، ويُقلب الحبرُ إليها */
.pk--edit .is-sel > .vt-grab--sel { background: #2c5e65; color: #fff; }
html[data-theme="dark"] .pk--edit .is-sel > .vt-grab--sel { background: #5fa9b3; color: #0e1c21; }
.pk--edit .is-sel > .vt-grab--sel:hover { color: #fff; }
html[data-theme="dark"] .pk--edit .is-sel > .vt-grab--sel:hover { color: #0e1c21; }
.pk--edit .is-sel > .vt-grab--sel .vg-off { display: none; }
.pk--edit .is-sel > .vt-grab--sel .vg-on { display: block; }
/* مؤشّر واحد لا ثلاثة: خطٌّ موضعه يقول «أين يقع» وإزاحته تقول «في أي مستوى».
   ونقطته الطرفية تجعل بدايته مرئية فتُقرأ الإزاحة بلا عدّ */
.x3-hd, .x3-ep, .x3-st, .pk--edit .x3, .cx-ro { position: relative; }
.vt-line {
  position: absolute; inset-inline-end: 0; height: 2px; margin-top: -1px;
  background: var(--u-gold); border-radius: 2px; pointer-events: none; z-index: 4;
}
.vt-line::before {
  content: ''; position: absolute; inset-inline-start: -3px; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--u-gold);
}
/* البند المسحوب يخفت في مكانه، وشبحه يتبع المؤشّر */
.vt-dragging { opacity: .35; }
.vt-ghost {
  position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none;
  opacity: .9; border-radius: 9px; padding: 2px 6px;
  background: var(--u-surf); box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .6);
  backdrop-filter: blur(2px);
}
/* ===== وشارةُ العدد على الشبح =====
   شبحٌ واحدٌ وخمسةٌ تنتقل خبرٌ ناقص. فقرصٌ صغيرٌ في ركنه يقول كم — بذهب الهويّة،
   وهو في هذا الموقع «هذا هو المقصود».
   وموضعُه ماديٌّ (‎right‎) لا منطقيّ: الشبحُ يتبع المؤشّرَ لا جهةَ الكتابة */
.vt-ghost__n {
  position: absolute; top: -7px; right: -7px; z-index: 2;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center; font-style: normal;
  font-size: 10.5px; font-weight: 800; line-height: 1;
  background: var(--u-gold, #e1c172); color: #16272b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
/* ============================================================
   وشبحُ السحب في الرَّكن يلبس ورقَه
   ============================================================
   ‏‎.vt-ghost‎ مصمَّمٌ لجوف نافذة البطائق: سطحٌ **شفّاف** (‎--u-surf‎) وضبابٌ وظلٌّ ثقيل
   — وذاك يُقرأ على سطحٍ داكن. وشجرةُ «رحلتي» على **ورق الرَّكن**، فالشفّافُ يذوب فيه
   ويبقى الظلُّ الثقيلُ وحدَه: شريطٌ غريبٌ يطفو بلا جسمٍ يُرى.
   فيلبس ههنا ورقَ الرَّكن وحدَّه وظلَّه — توكناتُ ‎#nook‎ نفسُها التي تلبسها مربّعاتُه،
   فينقلب مع الجلدين بلا نسخةٍ ثانية.
   والضبابُ يُطفأ: لا معنى لتضبيب ما تحته وقد صار الشبحُ مصمتًا — وهو أثقلُ ما يُحسب
   في الرسم، ويقع في كلّ إطارٍ من إطارات السحب */
#nook .vt-ghost {
  background: var(--nk-paper);
  border: 1px solid var(--nk-line);
  box-shadow: var(--nk-shadow);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--nk-ink);
}
/* ============================================================
   وخيطُ الإسقاط على ورقٍ أبيضَ ليس كخيطٍ في جوفٍ داكن
   ============================================================
   ‏‎.vt-line‎ مؤشّرُ الإسقاط: موضعُه يقول «أين يقع» وطولُه يقول «في أيّ مستوى» — فهو
   مثبَّتٌ بحافّة السطر (‎inset-inline-end: 0‎) ويقصر كلّما عمق المستوى. وذلك في جوف
   النافذة الداكنة خيطٌ خافت، وعلى **ورق الرَّكن** شريحةٌ ذهبيّةٌ مصمتةٌ تصيح.
   فيُخفَّف ههنا ولا يُنزع — الخبرُ الذي يحمله لازمٌ لإسقاطٍ في جوف فصل:
     · جسمُه يخفت إلى ‎45٪‎ فيصير خيطَ إرشادٍ لا سطحًا مصمتًا.
     · ونقطتُه تبقى مصمتةً: هي **رأسُ الخيط** الذي يقول الإزاحةَ، وهي المعلومة.
     · وقدُّه ‎1.5‎ لا ‎2‎: الورقُ الأبيضُ يُظهر أكثرَ مما يُظهر الداكن */
#nook .vt-line {
  height: 1.5px;
  background: color-mix(in srgb, var(--u-gold) 45%, transparent);
}
#nook .vt-line::before {
  background: var(--u-gold);
  width: 7px; height: 7px; top: -2.75px;
}
/* أثناء السحب: لا تحديد نصّ ولا تغيّر مؤشّر داخل الحقول */
.vt-busy, .vt-busy * { user-select: none !important; cursor: grabbing !important; }
.vt-grab:active { cursor: grabbing; }
/* ===== سهمُ الرزمة رُدَّ إلى حاله الأوّل بتمامه =====
   رماديٌّ في الحالتين — والذهبيُّ محجوزٌ لأسهم المجلدات تحت الخطّ، وللمرور عليه وحدَه.
   وجُرّب قوسًا ثخينًا ذهبيًّا (‏‎chev-match-lab#p8‎) يومَ كانت حبّةُ الاختبار تلاصقه في
   ذيل الصفّ فيوازن كتلتَها المستديرة، ثمّ انتقلت الحبّةُ إلى صدر الصفّ فذهب سببُه:
   السهمُ ملاحةٌ بين أرقام، ولا جارَ له يُوازنه. فرُدَّ الرسمُ والوزنُ والقدُّ والحبر.
   والذهبيُّ في هذا الصفّ صار للفعل وحدَه (الحبّة) وللعنوان — والملاحةُ تخفت */
.x3-pkhd > .x3-pktg {
  flex: none; margin-inline-start: 0; display: grid; place-items: center; padding: 0;
  width: 22px; height: 22px; border: 0; border-radius: 0; background: transparent;
  color: var(--u-mut); cursor: pointer; transition: transform .18s, color .15s;
}
.x3-pkhd > .x3-pktg svg { width: 17px; height: 17px; }
.x3-pkhd.on > .x3-pktg { transform: rotate(180deg); }
.x3-pkhd > .x3-pktg:hover { color: var(--u-gold); border-color: transparent; }

/* ============================================================
   «اختبر هذه الرزمة» — كلمةٌ على مفتاح («الشبح» من ‎RE\keycap-lab‎)
   ============================================================
   ===== لِمَ ذهب المثلّث =====
   كان مثلّثَ تشغيلٍ ذهبيًّا ‎13px‎. وتحته في الشجرة نفسِها ‎CX_TRI‎: مثلّثٌ مصمتٌ مستديرُ
   الوصل، **ذهبيٌّ** على البطاقة ذات الأوجه، مرسومُه ‎13.5‎ — فالفرقُ **الجهةُ وحدَها**،
   وهي تنقلب مع اللسان (‎rotate(-90deg)‎ بالإنجليزيّة) فيلتقيان في جهةٍ واحدة.
   وقاعدةُ هذه الشجرة مكتوبةٌ عند ‎.cx-fold--tri‎ أعلاه: «**المثلّثُ مِفصلٌ لا فعل**».
   فزرُّ الاختبار فعلٌ، فلا يكون مثلّثًا ههنا. والحرفُ لا يُقرأ مِفصلًا أبدًا.

   ===== ولِمَ لُبِّس الحرفُ مفتاحًا =====
   الكلمةُ عاريةً تُقرأ في السكون عنوانًا صغيرًا لا شيئًا يُنقر. وصفُّ الترويسة معجمُ
   **مفاصلَ وعدّاداتٍ وحبر** — لا إطارَ فيه ولا أرضيّةَ ولا كتف. فأوّلُ جسمٍ له ثخانةٌ
   يدخله يُقرأ زرًّا من نظرة، لا لأنّه رُسم زرًّا بل لأنّه **وحدَه** كذلك.

   ===== والتشريحُ من ‎KeyMason‎ (مُصيِّرُ كيكاباتٍ بـ‎CSS‎ خالص) =====
   ثلاثُ حقائقَ تفرّق «مفتاحًا» عن «مستطيلٍ له ظلّ»:
   ‏(١) **القاعُ أثخنُ من الأعلى** (‎--k-bot‎ ‎2‎ في مقابل ‎--k-topb‎ ‎0.5‎): المفتاحُ يُرى من
       فوقَ قليلًا، فتنّورتُه تنكشف تحت سطحه ولا تكاد تُرى فوقه.
   ‏(٢) **نصفا قطرٍ لا واحد**: القاعدةُ ‎5‎ والسطحُ ‎4‎ — السطحُ يُصبّ في قالبٍ أنعمَ من جسمه.
   ‏(٣) **الحافّةُ القمريّةُ أعلى وجانبين ولا شيءَ منها أسفل**: الضوءُ من فوق، والحافّةُ
       السفليّةُ في الظلّ لا في اللمعة. ومن أحاطها الحلقةَ كلَّها صار قرصًا لا مفتاحًا.

   ===== و«الشبح»: سطحُه من ورق ما تحته =====
   لا لونَ للسطح: هو الورقةُ نفسُها، فلا يُرى المفتاحُ إلّا بحافّته وتنّورته وظلِّه.
   والذهبُ يبقى في **الحبر** وحدَه — فلا يُنفَق مرّتين في صفٍّ الذهبُ فيه لغةُ الفعل،
   ولا ينازع الزرُّ عنوانَ الرزمة على النظر.
   والورقةُ **مصمتةٌ لا شفّافة**: ‎.post‎ سطحُه ‎--u-surf‎ شفّافٌ فوق ورقٍ، ولو بُني عليه
   لَنفذ ما تحت المفتاح من خلاله فانهار الارتفاع. فيُركَّب المصمتُ بإدياُم الموقع نفسِه
   (انظر ‎.cx-me__b‎): ‎linear-gradient(var(--u-surf), var(--u-surf)), var(--kc-pap)‎.
   و‎--kc-pap‎ يُعرَّف ههنا ولا يُورَّث: ‎.x3-pkhd‎ **أختُ** ‎.x3‎ لا ابنتُها، فلا يبلغها
   ‎--x3-paper‎ (فخُّ نطاق التوكنات). وهو حرفيٌّ بلونين كما في ‎.x3‎ سواءً بسواء.

   ===== ولا حبيباتٍ ولا مزج =====
   جُرّب النسيجُ (‎feTurbulence‎) في المختبر ثمّ سقط: عند ‎20px‎ يُقرأ وسخًا لا نسيجًا.
   فلا ‎mix-blend-mode‎ ولا ‎isolation‎ ولا ‎data URI‎ — طبقتان ونظافة.

   ===== وما ورثه المفتاحُ من سلفه =====
   ‏(١) **لا يكبر بالقدّ**: التكبيرُ بالمرور ‎filter‎ لا ‎width/height‎، وإلّا دُفع جيرانُ
       الصفّ ثمّ رُدّوا في كلّ مرور (عُولج مرّتين). و‎filter/transform‎ يجعلانه جذرَ خلفيّةٍ
       ولا ضررَ: ابنُه ‎<span>‎ لا ضبابَ فيه ولا تحته.
   ‏(٢) **وسقط ‎:has(+ .x3-trio)‎**: كان يفرّق بين جارٍ نصٍّ وجارٍ رموز، لأنّ الزرَّ كان
       **حبرًا** يُسوّى بحبر العنوان (‎top: 1px‎) ويُقارَب مقاربتَه. وقد صار **جسمًا**،
       والجسمُ يستوي بصندوقه ويُفرَّج عن جيرانه فُرجةً واحدةً كيفما كانوا. فذهب الاستثناء.
   ============================================================ */
.x3-pkhd > .cx-pktest {
  /* المقاسات — «الشبح» من ‎keycap-lab‎ */
  --k-h: 20px; --k-px: 9px; --k-fs: 10.5px;
  --k-rb: 5px;      /* نصف قطر القاعدة */
  --k-rt: 4px;      /* نصف قطر السطح — أنعم */
  --k-bot: 2px;     /* القاع: أثخنُ ما في التنّورة */
  --k-side: 1px;
  --k-topb: .5px;   /* الأعلى: أرقُّها */
  --k-rim: 1px;     /* الحافّة القمريّة */
  --k-drop: 1.5px;
  --k-lift: 1px;    /* كم يهبط عند الضغط */
  /* الورقةُ التي تحته، مصمتةً — والقيمةُ حرفيّةٌ كـ‎--x3-paper‎ لأنّ الشفّافَ لا يُبنى عليه */
  --kc-pap: #16272b;
  --kc-skirt-1: rgba(0, 0, 0, .20);   /* أعلى التنّورة */
  --kc-skirt-2: rgba(0, 0, 0, .34);   /* قاعُها */
  --kc-rim: rgba(255, 255, 255, .26);
  --kc-drop: rgba(0, 0, 0, .45);
  --kc-light: rgba(255, 255, 255, .07);   /* الضوءُ من فوق على السطح */

  flex: none; position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--k-h); padding: 0 var(--k-px); border: 0; cursor: pointer;
  border-radius: var(--k-rb);
  /* التنّورة: ظِلٌّ متدرّجٌ فوق الورقة المصمتة */
  background: linear-gradient(var(--kc-skirt-1), var(--kc-skirt-2)),
              linear-gradient(var(--u-surf), var(--u-surf)), var(--kc-pap);
  box-shadow: 0 var(--k-drop) calc(var(--k-drop) * 1.7) calc(var(--k-drop) * -.7) var(--kc-drop);
  margin-inline-end: -4px;
  font: 700 var(--k-fs)/1 'IBM Plex Sans Arabic', sans-serif;
  color: var(--u-gold); white-space: nowrap;
  transition: transform .09s ease-out, box-shadow .09s ease-out, filter .15s;
}
/* السطحُ: حواشٍ **غيرُ متساوية** والقاعُ أثخنُها — وهو الذي يفرّق المفتاحَ عن المستطيل */
.x3-pkhd > .cx-pktest::before {
  content: ''; position: absolute; z-index: 0;
  inset: var(--k-topb) var(--k-side) var(--k-bot);
  border-radius: var(--k-rt);
  background: linear-gradient(var(--kc-light), rgba(255, 255, 255, 0) 46%),
              linear-gradient(var(--u-surf), var(--u-surf)), var(--kc-pap);
  /* الحافّةُ القمريّة: أعلى وجانبان ولا شيءَ أسفل */
  box-shadow: inset 0 var(--k-rim) 0 var(--kc-rim),
              inset var(--k-rim) 0 0 color-mix(in srgb, var(--kc-rim) 55%, transparent),
              inset calc(var(--k-rim) * -1) 0 0 color-mix(in srgb, var(--kc-rim) 55%, transparent);
  transition: inset .09s ease-out;
}
/* الحبرُ فوق الطبقتين، ويستوي على **السطح** لا على الصندوق: القاعُ أثخنُ فيُرفع بفرقه */
.x3-pkhd > .cx-pktest > span {
  position: relative; z-index: 1;
  margin-bottom: calc(var(--k-bot) - var(--k-topb));
}
.x3-pkhd > .cx-pktest:hover, .x3-pkhd > .cx-pktest:focus-visible { filter: brightness(1.07); }
/* الضغطة: ينزل وينكمش قاعُه ويذهب ظلُّه — فيُرى السطحُ داخلًا في تنّورته */
.x3-pkhd > .cx-pktest:active {
  transform: translateY(var(--k-lift));
  box-shadow: 0 0 0 0 var(--kc-drop);
}
.x3-pkhd > .cx-pktest:active::before {
  inset: calc(var(--k-topb) + var(--k-lift)) var(--k-side) calc(var(--k-bot) - var(--k-lift));
}
/* الجلدُ الأبيض: الورقةُ بيضاء، والتنّورةُ تُخفَّف (سوادُ الجلد الداكن يصير رمادًا ثقيلًا
   على الأبيض)، والحافّةُ القمريّةُ تكاد تختفي — فالتعريفُ يقع على التنّورة والظلّ.
   والانتقاءُ يتبع ‎html[data-theme]‎ كما في ‎.x3‎ سواءً بسواء، لا حاملَ التوكنات */
html[data-theme="light"] .x3-pkhd > .cx-pktest {
  --kc-pap: #fff;
  --kc-skirt-1: rgba(44, 94, 101, .10);
  --kc-skirt-2: rgba(44, 94, 101, .22);
  --kc-rim: rgba(255, 255, 255, .95);
  --kc-drop: rgba(44, 94, 101, .22);
  --kc-light: rgba(255, 255, 255, .55);
}

.x3 { --x3-paper: #16272b; margin-top: 10px; position: relative; padding-inline-start: 30px; }
html[data-theme="light"] .x3 { --x3-paper: #fff; }
.x3-st { position: relative; margin-bottom: 12px; }
.x3-st:last-child { margin-bottom: 0; }
.x3-solo { margin-bottom: 6px; }
/* ============================================================
   قضيبُ الرحلة: خيطٌ واحدٌ يُقاس طرفاه — للبندين معًا
   ============================================================
   كان في «الشروح» **قطعًا** على كلّ بند: كلُّ قطعةٍ تمتدّ تحت بندها بمقدارٍ مكتوبٍ رقمًا
   (‎-12‎ للمجلّد و‎-6‎ للمفرد) لتلتحم بالتي تليها، وتبدأ الأولى وتنتهي الأخيرة عند
   مركزَي دائرتيهما بمقدارين مكتوبين كذلك (‎10.5‎ و‎15‎).
   وذلك يصحّ ما دامت **الفجوةُ تساوي الامتداد** و**مركزُ الدائرة يساوي الرقم** — وهما
   يتبدّلان بنوع البند وبارتفاع صفّه: صفُّ «الشروح» في التحرير فيه حقولٌ ومنتقي ملفّ
   فيطول عن صفّ نشره، ومركزُ دائرة المفرد ‎50٪‎ من ارتفاع صفّه لا ‎15px‎ ثابتة.
   فكان الخيطُ ينقطع حينًا ويطول حينًا — وهو العطبُ بعينه.
   فصار خيطًا واحدًا يُقاس طرفاه بعد الرسم (‎cxRailFit‎): من مركز أوّل دائرةٍ إلى مركز
   آخرها. وهي آلةُ «البطائق» نفسُها لا آلةٌ تُخترع، مجرَّبةٌ فيها منذ شُحنت — وحجّةُ
   القطع القديمة («آخرُ بندٍ قد يكون مجلدًا مفتوحًا لا يُعرف ارتفاعُه إلّا بعد الرسم»)
   هي بعينها حجّةُ القياس بعد الرسم.
   والمحورُ لم يتزحزح: ‎8px‎ من حاشية الشجرة = ‎30 − 22‎ — موضعُ القطع القديم سواءً.
   ولا حاجةَ بعدها إلى ‎:first-child‎ ولا ‎:last-child‎ ولا ‎:only-child‎: الطرفان مركزا
   أوّل دائرةٍ وآخرها، والواحدةُ لا يجد لها ‎cxRailFit‎ ثانيةً فيكتب ‎--jr-h: 0‎ فتنعدم.
   ============================================================ */
.x3::before {
  content: ''; position: absolute; inset-inline-start: 8px;
  top: var(--jr-t, 0px); height: var(--jr-h, 0px);
  width: 2px; border-radius: 2px; background: var(--u-line);
}
/* العلامة: دائرة ١٨px على محور الخيط، خلفيتها معتمة فلا يظهر الخيط داخلها */
.x3-dot {
  position: absolute; z-index: 1; inset-inline-start: -30px; top: 1.5px;
  width: 18px; height: 18px; border-radius: 50%; overflow: hidden;
  border: 1.5px solid var(--u-in-line);
  background: linear-gradient(var(--u-ctl), var(--u-ctl)), linear-gradient(var(--u-surf), var(--u-surf)), var(--x3-paper);
}
.x3-ep > .x3-dot { top: 50%; transform: translateY(-50%); }
.x3-dot.on { background: var(--u-gold); border-color: var(--u-gold); }
/* وما لا سجلَّ له لا زجاجةَ له: المهمّةُ تُشطب ولا تُذاكَر. و‎visibility‎ لا ‎display‎
   لأنّ الدائرةَ مُطلَقةٌ في حاشية القضيب — فلا خانةَ تُفقد، وإنّما يُصان الحكمُ الواحد
   («‎is-void‎: يُحجز ولا يُملأ») في الملفّ كلِّه */
.x3-dot.is-void { visibility: hidden; }
/* التعبئة بالسائل: تمتلئ من الأسفل بحافّة مويهة — نفس .cc-liquid */
.x3-lq { position: absolute; left: 0; right: 0; bottom: 0; background: var(--u-gold); transition: height .3s ease; }
.x3-lq::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 4px; border-radius: 50%; background: var(--u-gold); }

/* ============================================================
   دائرةُ مجلد البطائق — سطحٌ موجيٌّ ولمعةٌ وعمق (‏dome-lab)
   ============================================================
   الدائرةُ هي ‎.x3-dot‎ نفسُها، وهذه زيادةٌ عليها: الفيديوهاتُ تبقى على السائل الذهبيّ.

   ===== السطحُ شكلٌ واحدٌ لا طبقتان =====
   كان شريطين مقنَّعين يعلوان كتلةً مسطّحة. وصار **مسارًا واحدًا** يُبنى في ‎x3Surf‎
   ويصير قناعًا على الأحمر والأخضر معًا — فيُقصّان بالسطح نفسِه، ولا يبقى خطٌّ مستقيمٌ
   تحت الموج يفضح أنّ الكتلةَ مسطّحة.

   ===== ونصيبُ الأخضر يُقاس على الدائرة =====
   ‏‎.x3-lqa‎ تملأ الدائرةَ (‏‎inset: 0‎) ويقصّها القناع، فابنُها يُقاس عليها. ولذلك
   يُكتب ‎lvl × rat‎ لا ‎rat‎ — وإلّا جاوز الأخضرُ سطحَ الماء وابتلع الأحمر.

   ===== واللونان بالاحتياط لا بالتوكن =====
   ‏‎--cd-sync‎ و‎--cd-wrong‎ مقصورتان على ‎#card-modal‎ ولا تبلغان الشجرةَ في ‎#cm-ui‎،
   فتُكتبان بقيمتيهما كما تفعل ‎.cs-i--ok‎ حرفًا بحرف
   ============================================================ */
.x3-dot--ans { border-width: 1.4px; }
/* ===== وفي الترويسة تقف في الصفّ لا معلَّقةً إلى جانبه =====
   ‏‎.x3-dot‎ مبنيّةٌ لصفوف الشجرة: مطلقةٌ تتدلّى ‎30px‎ في جهة البدء حيث قضيبُ الرحلة.
   وفي ترويسة الرزمة لا قضيبَ ولا حاشية — فتُردّ إلى السَّيل وتصير عنصرًا كإخوتها.

   ===== و‎relative‎ لا ‎static‎ — وهذا ليس تفصيلًا =====
   جوفُ الدائرة كلُّه أبناءٌ **مطلقون** بـ‎inset: 0‎ (الماءُ والعمقُ واللمعة)، والمطلقُ
   يُقاس على أقرب سلفٍ **موضَّع**. فـ‎static‎ تنزع عن الدائرة صفةَ الصندوق الحاوي،
   فيصعد أبناؤها يبحثون عن سلفٍ موضَّعٍ حتى يبلغوا الصفحة — فتتمدّد اللمعةُ بدائريّتها
   على الشاشة كلِّها. و‎relative‎ تُبقيها في السَّيل **وتُبقيها حاويةً** */
.x3-pkhd > .x3-dot--ans {
  position: relative; flex: none; inset: auto; transform: none; cursor: default;
  /* والفُرجةُ إلى العنوان نصفُ فُرجة الصفّ (‎12 − 6 = 6‎): الدائرةُ خبرٌ **عن** الرزمة
     التي يسمّيها العنوان، فتُقرأ معه كتلةً لا جارًا بعيدًا. ولا يُغيَّر ‎gap‎ الصفّ */
  margin-inline-start: -6px;
}
.x3-dot--ans > i { position: absolute; display: block; }
/* ===== طبقتان مقنَّعتان بالموجة نفسِها =====
   الأحمرُ يملأ الدائرةَ ويُقصّ عند **سطح الماء**، والأخضرُ فوقه يُقصّ عند **سطحٍ أخفضَ
   بالموجة عينِها**. فالحدُّ بينهما موازٍ للسطح في كلّ نقطة، ولا تظهر قمّةُ موجٍ حمراءُ
   فوق رأسٍ أخضرَ مسطَّح.
   وبلا ‎--mask‎ (الممتلئ) تصير القيمةُ غيرَ صالحةٍ فيرجع ‎mask-image‎ إلى أصله ‎none‎ */
.x3-lqa, .x3-lqa__g {
  inset: 0;
  -webkit-mask-image: var(--mask); mask-image: var(--mask);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* ولا يلتقط جوفُ الدائرة المؤشّرَ: كلُّه زينةٌ لا يُضغط منها شيء. وهو حارسٌ لا زينة —
   يومَ فقدت الدائرةُ صفةَ الصندوق الحاوي تمدّد جوفُها على الصفحة فابتلع كلَّ ضغطة */
.x3-lqa, .x3-lqa__g { pointer-events: none; }
.x3-lqa { background: var(--cd-wrong, #c0455f); }
.x3-lqa__g { background: var(--cd-sync, #4e9d57); }
/* عمقٌ يقتم في القاع — يعطي الحجمَ الذي يعوز الكتلةَ المسطّحة */
.x3-dep { inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .3) 0%, transparent 62%); }
/* لمعةُ الزجاج: قوسٌ في الكتف وحلقةٌ داخليّةٌ خافتة */
.x3-gls { inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 62% 46% at 30% 16%, rgba(255, 255, 255, .13) 0%, transparent 70%);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .065); }
/* وصلة أفقية من العلامة إلى صفّها — للدرجة الأولى وحدها.
   تبدأ عند حافّة الدائرة وتقف قبل الأيقونة بـ٥px فلا تلتصق بها */
/* ‎.cx-mst‎ زِيدت يومَ صارت الأمُّ الوالدةُ محطّةً في النشر: هي ‎.x3-st‎ ولا ‎.x3-hd‎
   لها (صفُّها ‎.x3-ep‎) ولا ‎.x3-solo‎ (لأنّ لها وجوهًا) — فكانت دائرتُها تقف بلا خيطٍ
   يصلها بالقضيب، وحدَها من بين المحطّات */
/* ===== والخيطُ لا يُرسم إلّا لمحطّةٍ قائمة =====
   كان يُرسم لكلّ صفٍّ في الدرجة الأولى بلا شرط، فإذا لم تُرسم المحطّاتُ (رزمةٌ لم
   يدخلها القارئُ بعد) بقيت شَرَطاتٌ أفقيّةٌ معلّقةٌ تشير إلى لا شيء — وموضعُها
   ‎-12px‎ خارجَ الشجرة، فحاشيتُها مرفوعةٌ حينئذٍ (‎cx-nodot‎).
   فيُشرَط بوجود الدائرة نفسِها كما شُرطت قاعدتا البطائق (‎:has(> .x3-dot)‎): شرطٌ
   يحرس نفسَه — لا صنفَ يُوضع ويُنسى، ولا حالَ تُقرأ في موضعين.
   وموضعُ الدائرة يفترق: في المجلّد ابنةُ ‎.x3-st‎، وفي المفرد ابنةُ ‎.x3-ep‎ */
.x3 > .x3-st:has(> .x3-dot) > .x3-hd::before,
.x3 > .x3-solo > .x3-ep:has(> .x3-dot)::before,
.x3 > .cx-mst > .x3-ep:has(> .x3-dot)::before {
  content: ''; position: absolute; inset-inline-start: -12px; top: 50%;
  width: 7px; height: 2px; background: var(--u-gold-hov);
}

/* ============================================================
   رحلةُ النشر في البطائق: قضيبٌ واحد ودوائرُ تصغر بالعمق
   ============================================================
   ما فوق هو الرسمُ الأوّل، وهو باقٍ لرحلة «الشروح» كما هو: قضيبٌ يُرسم **قطعًا**
   على بنود الدرجة الأولى، ودوائرُ لتلك الدرجة وحدَها. وعلّتُه في البطائق أنّ صاحبَ
   الرزمة قد يضع شجرتَه كلَّها تحت مجلّدٍ واحد، فلا تبقى إلّا دائرةٌ واحدةٌ ورحلةٌ
   باطلةٌ ورسمُها قائم. ولو أُعطيت كلُّ درجةٍ قضيبَها لَزحفت الدوائرُ يسارًا كلّما
   عمُقت الشجرةُ وتوازت قضبانٌ عدّة.
   فههنا — في ‎.cx-ro‎ وحدَها — قضيبٌ **واحدٌ للرزمة كلِّها** في حاشيتها، ومحطّاتُه:

     · **المستوى الحيّ كلُّه محطّات**: المستوى الأوّل، وكلُّ مستوًى فيه مجلّد —
       لا يُفرَّق فيه مجلّدٌ من بطاقة، فكلاهما صفٌّ في طريقٍ واحد.
     · وما ليس بحيٍّ (مستوًى كلُّه بطائقُ تحت مجلّد) فذاك **جوفُ فصل**:
       تفصيلُ محطّةٍ لا محطّاتٌ بعدها. والحكمُ يقع في ‎cxTreeView‎.

   ===== ولكلّ مستوًى حيٍّ رحلتُه =====
   القضيبُ ليس واحدًا للرزمة: المستوى الحيُّ يفتح في جوفه حاشيةً (‎--pad + 30px‎) يسكنها
   قضيبُه ودوائرُ صفوفه — فتُقرأ الشجرةُ رحلاتٍ متداخلةً، فصلٌ في جوفه فصول. وجوفُ
   الفصل (مستوًى كلُّه بطائق) يبقى إزاحةً محضةً بلا حاشيةٍ ولا قضيبٍ ولا دوائر.
   ولمّا صار لكلّ مستوًى حاشيتُه صارت دائرتُه تُنسب إليه هو، فأرقامُ الموضع واحدةٌ في
   كلّ درجة (‎-30‎ للدائرة و‎8‎ للقضيب) ولا حاجةَ إلى إزاحةٍ متراكمةٍ تردّها إلى محورٍ بعيد.
   والدرجةُ تُقرأ في **قدر الدائرة** و**حبر القضيب**:
     ‎--jd‎ عمقُ المستوى، ومنه ‎--dsz‎ قطرُ الدائرة (بقاعٍ ‎9px‎ فلا تضمحلّ)،
        ومنه خفوتُ القضيب الفرعيّ (بقاعٍ ‎.45‎) — درجةٌ أدنى فحبرٌ أدنى.
     ‎--dcy‎ مركزُ الدائرة من رأس صفِّها: صفُّ المجلّد ينمو بمحتواه (~‎21px‎) فمركزُه
        ‎10.5‎، وصفُّ البطاقة مقيسٌ ‎30px‎ فمركزُه ‎15‎ — ولو وُحِّد الرقمُ لَجاءت
        دائرةُ البطاقة فوق سطرها بأربعةٍ ونصف.
   ============================================================ */
/* ===== وثالثةُ الأشجار: شجرةُ نشر «الشروح» (‎cx-vo‎) =====
   قواعدُ الرحلة كلُّها كانت لشجرتَي البطائق. وشجرةُ نشر الشروح عاريةٌ منهما، فكانت
   رحلةً في التحرير وقائمةً مسطّحةً في النشر — والرزمةُ واحدة.
   ولا تُعار ‎cx-ro‎: تلك تحمل مع الهندسة **حكمَ التحديد** (‎cxSelSync‎ تبحث عنها لتعرف
   شجرةَ النشر)، فلو لبستها الشروحُ لَالتبست الشجرتان في آلةٍ لا تخصّ الهندسة.
   ونوعيّةُ ‎:is()‎ أعلى ما في جوفها، والثلاثةُ سواءٌ (‎.x3.cx-X‎) — فلا يزحف ترجيح */
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) { --jr-step: 2.5px; }
/* القطعُ تسقط: لم يعد القضيبُ قطعًا تلتحم، بل خيطًا واحدًا يقاس طرفاه */
/* (قطعُ الخيط ذهبت من الجذر — لم يعد ثَمّ ما يُطفأ) */
/* والخيطُ الواحد: من مركز أوّل محطّةٍ إلى مركز آخرها — و‎cxRailFit‎ يكتب طرفيه.
   ويُقاسان ولا يُحسبان: آخرُ محطّةٍ قد تكون في جوف مجلّدٍ مفتوحٍ لا يُعرف ارتفاعُه
   إلّا بعد التخطيط — وهي نفسُها العلّةُ التي جعلت الرسمَ الأوّلَ قطعًا */
/* ‎8px‎ = ‎30 − 22‎: الحاشيةُ ‎30‎ ودائرتُها تبدأ عند صفرها، والقضيبُ على محورها.
   و‎inset-inline-start‎ للمنسوب يُقاس من **صندوق الحَشْوة** — وأوّلُه أوّلُ صندوق
   الحدّ لا آخرُ الحَشْوة. فالمستوى الفرعيُّ حاشيتُه ‎--pad + 30‎، فقضيبُه عند
   ‎--pad + 8‎ لا عند ‎8‎: لولا الإزاحةُ لَوقف القضيبُ في أوّل الصفّ ودوائرُه بعيدةً عنه */
/* وقضبانُ الرحلات الفرعيّة (البطائقُ وحدَها): كقضيب الحاضن مقاسًا وحبرًا، ومحورُها من ‎--jr-col‎ */
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-sub.has-rail::before {
  content: ''; position: absolute;
  top: var(--jr-t, 0px); height: var(--jr-h, 0px);
  width: 2px; border-radius: 2px; background: var(--u-line);
}
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-sub.has-rail::before { inset-inline-start: calc(var(--jr-col) - 1px); }
/* حاشيةُ المستوى الحيّ: إزاحتُه ثمّ ‎30px‎ يسكنها قضيبُه ودوائرُه — كحاشية ‎.x3‎ سواءً.
   و‎relative‎ لأنّ القضيبَ ينتسب إليه؛ ولا خطرَ فيها على الدوائر: هي منسوبةٌ إلى
   صفوفها (‎.x3-st‎ و‎.x3-ep‎ موضوعان أصلًا) لا إلى أقرب منسوبٍ أعلى */
/* ===== وعمودُ الرحلة الفرعيّة تحت مثلّث أبيها =====
   ‎--jr-col‎ موضعُ محور الرحلة من صدر صفّ الأب: ‎15‎ (خانةُ الحبّة) + ‎9‎ (فجوةُ الصفّ)
   + ‎10‎ (نصفُ المثلّث) = ‎34‎ — فتنزل دائرةُ الابن تحت مثلّث أبيه في عمودٍ واحد.
   وحاشيةُ المستوى ‎--jr-col + 21‎: الدائرةُ تبدأ عند ‎حاشية − 30‎ ومركزُها بعدها بتسعة،
   فمركزُها ‎حاشية − 21‎ — وهو المطلوب أن يساوي ‎--jr-col‎. والقضيبُ ‎--jr-col − 1‎
   (عرضُه ‎2‎ فمركزُه على المحور) */
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) { --jr-col: 34px; }
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-sub.has-rail {
  position: relative; padding-inline-start: calc(var(--jr-col) + 21px);
}
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-sub.has-rail::before { opacity: max(.45, calc(1 - .2 * var(--jd, 0))); }
/* ===== وخانةُ حبّة التحديد تُحجز في النشر ولا تُملأ =====
   صفُّ التحرير يبدأ بحبّة التحديد (‎.vt-grab--sel‎ عرضُها ‎15px‎) ثمّ فجوةِ الصفّ (‎9px‎)
   ثمّ المثلّث؛ وهي مُخفاةٌ بـ‎opacity‎ لا بـ‎display‎ فحيّزُها محجوزٌ أبدًا ولا يظهر
   شاغلُه إلّا بالمرور. وليس في النشر تحديدٌ فلا حبّةَ فيه — فكان صفُّه يبدأ بالمثلّث،
   فيفترق عمودُ الأسماء بين الشجرتين بأربعةٍ وعشرين وهما تعرضان الشيءَ نفسَه.
   فتُحجز الخانةُ **خاويةً**: حَشْوةٌ لا عنصرٌ نائب.
   و‎padding‎ لا ‎margin‎: صندوقُ الحَشْوة يبدأ حيث يبدأ صندوقُ الحدّ (لا حدَّ للصفّ)،
   فلا تتزحزح الدائرةُ ولا وتدُها — وكلاهما ‎absolute‎ منسوبٌ إلى هذا الصندوق — وإنّما
   يزحف ما في الصفّ وحدَه، فيقع الفراغُ بين الوتد والمثلّث حيث تقع الحبّةُ في أختها */
/* وحلّت الحبّةُ محلَّ الفراغ: قدُّها ‎15px‎ وفجوةُ الصفّ ‎9‎ = ‎24‎ — وهي الخانةُ نفسُها
   التي كانت تُحجز حَشْوةً، فلم يتزحزح صفٌّ واحدٌ بحلولها.
   وهي ‎button‎ فتُردّ عنها زينةُ الأزرار، و‎cursor‎ مؤشّرٌ لا قبضة: ليس ههنا سحب */
/* ===== وشجرةُ «الشروح» تلبس الحبّةَ في نافذة الاستيراد وحدَها =====
   جلدُ الحبّة كان مقصورًا على ‎.x3.cx-ro‎ — وهي شجرةُ **البطائق** في النشر؛ وشجرةُ
   الشروح ‎.x3‎ عاريةٌ من ‎cx-ro‎ (انظر ‎packCard‎). فلو تُركت لَوُلدت الحبّةُ هناك بلا
   شفافيّةٍ ولا امتلاءٍ عند التحديد: قدُّها من ‎.vt-grab‎ العامّة وحدَها، فتقف ظاهرةً
   أبدًا لا تُخبر عن شيء.
   والمنتقيان يُضاعفان ولا يُجمعان في ‎:is()‎: تلك تأخذ أعلى نوعيّةٍ في جوفها، فيصير
   ‎#jri-body .x3‎ نوعيّةً لـ‎.x3.cx-ro‎ كذلك — فترجَح على قواعدَ بعدها كانت ترجحها.
   والمضاعفةُ تُبقي لكلّ منتقًى نوعيّتَه */
.x3.cx-ro .vt-grab--ro,
#jri-body .x3 .vt-grab--ro {
  padding: 0; border: 0; background: none; cursor: pointer;
  opacity: 0; transition: opacity .16s .07s, background .15s, color .15s;
}
/* «باهتًا»: يظهر بمرور المؤشّر على **الصفّ كلِّه** خفيفًا فلا يزاحم اسمَه،
   ويشتدّ إذا قُصد هو أو وقع عليه التركيز أو حُدِّد صفُّه.
   وتأخيرُ ‎.07s‎ متعمَّد: الوتدُ يبدأ تراجعَه أوّلًا ثمّ تحلّ الحبّةُ في الفراغ
   الذي فتحه — فيُقرأ الأمرُ تسليمًا لا ازدحامَ شيئين في مكانٍ واحد */
.x3.cx-ro :is(.x3-hd, .x3-ep):hover > .vt-grab--ro,
#jri-body .x3 :is(.x3-hd, .x3-ep):hover > .vt-grab--ro { opacity: .55; }
/* والصحُّ يشتدّ حين يُقصد الزرُّ نفسُه — فتقرأ اليدُ ثلاثَ درجات:
   مرورٌ بالصفّ (شبحٌ) ← قصدٌ للحبّة (جاهز) ← ضغطٌ (ممتلئ) */
.x3.cx-ro .vt-grab--ro .vg-tick,
#jri-body .x3 .vt-grab--ro .vg-tick { opacity: .7; transition: opacity .15s; }
.x3.cx-ro .vt-grab--ro:hover .vg-tick,
.x3.cx-ro .vt-grab--ro:focus-visible .vg-tick,
#jri-body .x3 .vt-grab--ro:hover .vg-tick,
#jri-body .x3 .vt-grab--ro:focus-visible .vg-tick { opacity: 1; }
.x3.cx-ro .vt-grab--ro:hover,
.x3.cx-ro .vt-grab--ro:focus-visible,
.x3.cx-ro .is-sel > .vt-grab--ro,
#jri-body .x3 .vt-grab--ro:hover,
#jri-body .x3 .vt-grab--ro:focus-visible,
#jri-body .x3 .is-sel > .vt-grab--ro { opacity: 1; }
/* والمحدَّدُ يمتلئ: المربّعُ الخاوي يذهب ويحلّ الصحُّ على أرضيّةٍ مصمتة — كأخته سواءً */
.x3.cx-ro .is-sel > .vt-grab--ro,
#jri-body .x3 .is-sel > .vt-grab--ro { background: #2c5e65; color: #fff; }
html[data-theme="dark"] .x3.cx-ro .is-sel > .vt-grab--ro,
html[data-theme="dark"] #jri-body .x3 .is-sel > .vt-grab--ro { background: #5fa9b3; color: #0e1c21; }
.x3.cx-ro .is-sel > .vt-grab--ro:hover,
#jri-body .x3 .is-sel > .vt-grab--ro:hover { color: #fff; }
html[data-theme="dark"] .x3.cx-ro .is-sel > .vt-grab--ro:hover,
html[data-theme="dark"] #jri-body .x3 .is-sel > .vt-grab--ro:hover { color: #0e1c21; }
.x3.cx-ro .is-sel > .vt-grab--ro .vg-off,
#jri-body .x3 .is-sel > .vt-grab--ro .vg-off { display: none; }
.x3.cx-ro .is-sel > .vt-grab--ro .vg-on,
#jri-body .x3 .is-sel > .vt-grab--ro .vg-on { display: block; }
/* ===== وخانةُ المثلّث المحجوزة لا تُبعد الحبّةَ عن بطاقتها =====
   البطاقةُ التي لا تلد أوجهًا يُحجز لها مقامُ المثلّث خاويًا (‎is-void‎) لتستوي الرموزُ
   في عمود. فكانت الحبّةُ تقع قبله فتبعد عن أيقونتها ‎24 + 9‎ — وهي إنّما تُحدِّد **هذه
   البطاقة**، فبُعدُها عنها يقطع الصلة.
   فيُقدَّم المقامُ الخاوي عليها (‎order: -1‎) فتلاصقها الحبّةُ كما تلاصق الأمَّ الوالدةَ
   مثلّثُها. والعمودُ لا يتزحزح: ‎20+4+15+9‎ = ‎15+9+20+4‎ — ترتيبٌ واحدٌ مقلوب.
   و‎order‎ لا إعادةُ ترتيبٍ في القالب: الفرقُ عرضٌ لا بنية، والمرتّبُ يبقى واحدًا.
   ===== وهي في الشجرتين لا في النشر وحدَه =====
   كانت هذه القاعدةُ مقصورةً على ‎.x3.cx-ro‎، فبقيت المفردةُ في **التحرير** يقف
   مِقبضُها على بُعد ثلاثةٍ وثلاثين من أيقونتها والخانةُ بينهما خاوية. وحجّةُ الوصل ههنا
   أقوى منها هناك: المِقبضُ في النشر حبّةُ تحديدٍ وحدَها، وهو في التحرير حبّةٌ **ومِقبضُ
   سحب** — واليدُ التي تمتدّ لتسحب بطاقةً تقصد جسمَها لا فراغًا قبله.
   والأمُّ الوالدةُ تبقى كما هي: مثلّثُها يملأ الخانةَ، فبُعدُ المِقبض عنها مُعلَّلٌ بما يُرى */
/* ===== وصفُّ «رحلتي» ثالثُهما =====
   بطاقتُه ‎.x3-hd‎ لا ‎.x3-ep‎ (بُنيت على صفّ المجلّد لا على صفّ البطاقة)، فلم تبلغها
   القاعدة. و‎:has(> .cx-open)‎ تُميّزها: البطاقةُ والفيديو وحدَهما يحملانه، والمجلّدُ
   والمهمّةُ يحملان ‎.x3-fwrap‎.
   و‎:has(> .cx-fold.is-void)‎ في الشطر الثاني تحرس الأمَّ الوالدة: مثلّثُها **يُرى**
   فيملأ خانتَه، فبُعدُ المِقبض عنها مُعلَّلٌ بما تراه العين — ولا يُقدَّم عليها شيء */
.x3.cx-ro .x3-ep > .cx-fold.is-void,
.pk--edit .x3-ep > .cx-fold.is-void,
#nook .nk-jr .x3-hd:has(> .cx-open) > .cx-fold.is-void { order: -1; }
/* ===== وموضعُ الحبّة في الصفّ ومنتهى الوتد عنده =====
   ‎--bead-x‎ صدرُ الحبّة من صدر الصفّ: صفرٌ في المجلّد والأمّ الوالدة، و‎24‎ في المفردة
   (خانةُ المثلّث الخاوية ‎20‎ وفجوتُها ‎4‎).
   ‎--rest-x‎ منتهى الوتد في السكون: ‎5px‎ قبل **أوّل ما يُرى** بعده — وهو المثلّثُ في
   الأولى (‎24 − 5‎) والأيقونةُ في المفردة (‎48 − 5‎)، إذ المثلّثُ الخاوي لا يُرى فلا
   يُوقَف عنده. والوتدُ يعبر الخانةَ الخاوية وخانةَ الحبّة كلتيهما، وليس فيهما ما يُرى */
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) :is(.x3-hd, .x3-ep) { --bead-x: 0px; --rest-x: 19px; }
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-ep:has(> .cx-fold.is-void) { --bead-x: 24px; --rest-x: 43px; }
/* والقيمتان تصلحان لصفّ «رحلتي» بلا حسابٍ ثانٍ: فجوةُ ‎.x3-hd‎ تسعةٌ كفجوة ‎.x3-ep‎،
   ومثلّثُهما يُقاس بقاعدةٍ واحدة (‎:is(.pk--edit, .cx-ro) :is(.x3-hd, .x3-ep) > .cx-fold‎) */
#nook .nk-jr .x3-hd:has(> .cx-open):has(> .cx-fold.is-void) { --bead-x: 24px; --rest-x: 43px; }
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-st { --dcy: 10.5px; }
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-ep { --dcy: 15px; }
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) :is(.x3-st, .x3-ep) { --dsz: max(9px, calc(18px - var(--jr-step) * var(--jd, 0))); }
/* ‎inset-inline-start‎ يضع **حافّةَ** الدائرة لا مركزَها، فيُزاد نصفُ ما نقص من قطرها
   حتى يبقى المركزُ على المحور، ويُقاصّ مثلُه في ‎top‎ حتى يبقى على مستوى صفِّه.
   و‎transform: none‎ لازمة: ‎.x3-ep > .x3-dot‎ تُنزلها بـ‎translateY(-50%)‎ بعد ‎top:50%‎،
   فلو بقيت لَهبطت دائرةُ البطاقة نصفَ قطرها عن موضعها المحسوب ههنا */
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) :is(.x3-st, .x3-ep) > .x3-dot {
  width: var(--dsz); height: var(--dsz); transform: none;
  inset-inline-start: calc(-30px + (18px - var(--dsz)) / 2);
  top: calc(var(--dcy) - var(--dsz) / 2);
}
/* ===== والوتدُ يبلغ المثلّثَ، فإذا مُرَّ على الصفّ تراجع عن خانة الحبّة =====
   ‎:has‎ تسأل الصفَّ عن دائرته فلا يحتاج صنفًا ثانيًا. ودائرةُ المجلّد تسكن ‎.x3-st‎
   ودائرةُ البطاقة تسكن ‎.x3-ep‎، فسؤالان لا واحد.
   والصفُّ الساكنُ لا حبّةَ فيه، فيمتدّ الوتدُ على خانتها ويقف عند ‎--rest-x‎ —
   خمسةٌ قبل أوّل ما يُرى بعده. فإذا مُرَّ عليه رجع إلى ‎--bead-x − 2‎: اثنان قبل
   الحبّة لا خمسة، فلا ينفتح بينهما فراغٌ يقطع الصلة. وتحلّ الحبّةُ في موضعه،
   وتتمّةُ الوتد بعدها (‎::after‎ أسفلَه) تصل ما بينها وبين جارها.
   و**طرفٌ واحدٌ يتحرّك**: ‎inset-inline-start‎ مسمَّرٌ عند حافّة الدائرة والعرضُ وحدَه
   يتغيّر، فلا يفارق الوتدُ محطّتَه أبدًا مهما طال أو قصر.
   والمنحنيان مختلفان بالقصد: الانبساطُ هادئٌ لا يتخطّى مقصدَه فيلامس الأيقونة،
   والانكماشُ وثبةٌ ترتدّ — الفراغُ يُفتح فتقع فيه الحبّة */
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-st:has(> .x3-dot) > .x3-hd::before,
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-ep:has(> .x3-dot)::before {
  content: ''; position: absolute; z-index: 0;
  inset-inline-start: calc(-30px + (18px + var(--dsz)) / 2);
  top: calc(var(--dcy) - 1px);
  width: calc(30px + var(--rest-x) - (18px + var(--dsz)) / 2);
  height: 2px; background: var(--u-gold-hov);
  transition: width .26s cubic-bezier(.22, .61, .36, 1);
}
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-st:has(> .x3-dot) > .x3-hd:hover::before,
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-ep:has(> .x3-dot):hover::before {
  width: calc(28px + var(--bead-x) - (18px + var(--dsz)) / 2);
  transition: width .3s cubic-bezier(.34, 1.56, .64, 1);
}
/* ===== وتتمّةُ الوتد يسارَ الحبّة =====
   الوتدُ لا ينقطع عند الحبّة بل **يُثقَب** بها: يقف ‎2px‎ قبلها، ثمّ تحلّ هي، ثمّ يعود
   بعدها بمثل ذلك ويمضي إلى ‎2px‎ قبل جارها. فيُقرأ خيطًا واحدًا مرّت به حبّةٌ، لا خيطًا
   بُتر. وطولُه ما بقي من فجوة الصفّ: ‎9 − 2 − 2‎ = ‎5‎.
   وهو ‎::after‎ الصفِّ — كان خاويًا — فلا عنصرَ يُزاد في كلّ صفّ لأجل خمسة بكسلات */
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-st:has(> .x3-dot) > .x3-hd::after,
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-ep:has(> .x3-dot)::after {
  content: ''; position: absolute; z-index: 0;
  inset-inline-start: calc(var(--bead-x) + 17px);
  top: calc(var(--dcy) - 1px);
  width: 5px; height: 2px; background: var(--u-gold-hov);
  opacity: 0; transition: opacity .16s .07s;
}
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-st:has(> .x3-dot) > .x3-hd:hover::after,
:is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-ep:has(> .x3-dot):hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  :is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-st:has(> .x3-dot) > .x3-hd::before,
  :is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-ep:has(> .x3-dot)::before,
  :is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-st:has(> .x3-dot) > .x3-hd:hover::before,
  :is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-ep:has(> .x3-dot):hover::before,
  :is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-st:has(> .x3-dot) > .x3-hd::after,
  :is(.x3.cx-ro, .x3.cx-tree, .x3.cx-vo) .x3-ep:has(> .x3-dot)::after { transition: none; }
}
/* سطر المجلد: أيقونة رمادية باهتة ← الاسم ← العدّادات ← سهم التوسيع */
.x3-hd { position: relative; display: flex; align-items: center; gap: 9px; }
/* مجلد الشجرة: ممتلئٌ ملوّن — ولونُه يأتي سطرًا في العنصر نفسه من ‎folderColor()‎،
   فيعلو على هذا الافتراض. والافتراضُ باقٍ لمن لا لونَ له بعد */
.x3-fic { flex: none; width: 16px; height: 16px; color: var(--u-fade); display: inline-flex; position: relative; }
.x3-fic svg { width: 100%; height: 100%; }
/* ===== وجه المجلد: الإيموجي يحلّ محلّ الرمز =====
   والحجم ‎18px‎ لا ‎16px‎: صورةُ الإيموجي محشوّةٌ بفراغٍ شفّافٍ حول رسمها، فلو ساوت الرمزَ
   في الإطار لَبدت أصغرَ منه في العين. والزيادةُ لا تزحزح الصفّ لأنّها على الصورة لا على الغلاف */
.x3-fem { width: 18px; height: 18px; margin: -1px; display: block; object-fit: contain; }
/* واللونُ ينتقل إلى خطّ الاسم حين تذهب الأيقونةُ الملوّنة — فقرارُ اللون يبقى مرئيًّا */
.x3-fwrap.has-em { border-bottom-color: var(--fc); }
/* ===== طَوقُ الأيقونة: على الأيقونة وحدَها، ويتبادل مع الخطّ لا يزاحمه =====
   كان يظهر بالمرور على الصفّ كلِّه — فيُوعَد بضغطةٍ وأنت على الاسم لا على الزرّ.
   فصار على الزرّ نفسِه: الوعدُ حيث الفعل.
   والطوقُ ينزل على موضع الخطّ الذي تحت الرمز والاسم، فلو التقيا لَتقاطع خطّان في مكانٍ واحد.
   فبينهما **تناوبٌ موقوت**: عند الدخول يخفت الخطُّ أوّلًا ثمّ يظهر الطوق بعده بـ‎.14s‎،
   وعند الخروج ينسحب الطوقُ أوّلًا ثمّ يعود الخطُّ بعده بـ‎.12s‎ — فلا يجتمعان لحظةً واحدة.
   والوالدُ يُختار من ابنه بـ‎:has()‎: الخطُّ على الغلاف والمرورُ على الزرّ، ولا سبيل غيرَه */
button.x3-fic { padding: 0; background: none; border: 0; cursor: pointer; }
button.x3-fic::after {
  content: ''; position: absolute; inset: -4px; border-radius: 6px;
  border: 1px dashed var(--u-in-line); opacity: 0; transition: opacity .14s ease;
}
button.x3-fic:hover::after, button.x3-fic:focus-visible::after { opacity: .9; transition-delay: .14s; }
/* الخطُّ يخفت بالمرور على الأيقونة، ويعود متمهّلًا بعد انسحاب الطوق */
.x3-fwrap { transition: border-bottom-color .16s ease .12s; }
.x3-fwrap:has(> button.x3-fic:hover),
.x3-fwrap:has(> button.x3-fic:focus-visible) { border-bottom-color: transparent; transition-delay: 0s; }
/* على الجلد الداكن تُرفع الإضاءة قليلًا: لوحةٌ واحدة تخدم الجلدين بلا نسخةٍ ثانية تُصان.
   والرفع يشمل مجلدات المسار والقائمة كذلك، وإلّا اختلف اللون الواحد باختلاف موضعه */
html[data-theme="dark"] .x3-fic, html[data-theme="dark"] .cd-fic { filter: brightness(1.14) saturate(1.05); }
/* اسم المجلد بخطّ الهوية في الوضعين — والوزن ٧٠٠ لا ٨٠٠ لأنّ ‎KFUPM Display‎
   لا يحمل إلا ٤٠٠ و٧٠٠، وما فوقهما يُصطنع اصطناعًا فيثخن الحرف بلا هيئة */
.x3-fnm {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 12.5px; font-weight: 700; color: var(--u-tx-strong);
}
/* العدّادات: الأيقونة مباشرة بلا دائرة، ملتصقة بالاسم لا مدفوعة إلى أقصى اليسار */
/* ===== والكتلةُ عند ‎77٪‎، وأقربُ إلى الاسم =====
   القياسُ بمقبضٍ واحد (‎zoom‎) لا بضرب كلّ قيمةٍ يدًا: القيمُ أدناه تبقى المرجعَ عند ‎100٪‎،
   والنسبةُ رقمٌ واحدٌ يُدار. و‎zoom‎ يصغّر الحيّزَ مع المرسوم (بخلاف ‎transform: scale‎).
   والقربُ من الاسم بهامشٍ سالبٍ على **جهة البداية** — وهي في العربيّة اليمين حيث الاسم،
   فيُشدّ إليه. ولا تُنقص فجوةُ الصفّ نفسُها (‎9px‎ في المجلد و‎12‎ في الغلاف): هي تفصل
   كلَّ إخوة الصفّ، ولو نقصت لَالتصق السهمُ والسلّةُ كذلك. والهامشُ يُقاس داخل التصغير
   فيُرسم ‎0.77‎ منه — والمطلوبُ أثرٌ يُرى لا رقمٌ يُحسب */
.x3-trio { flex: none; display: flex; align-items: center; gap: 11px; zoom: .77; margin-inline-start: -5px; }
/* والفجوةُ بين الأيقونة ورقمها ‎2px‎ لا ‎4‎: هما شيءٌ واحدٌ لا شيئان — الرمزُ وحدَه لا يقول
   عددًا والرقمُ وحدَه لا يقول ماذا يَعُدّ. فتقاربُهما يقول ذلك، والفجوةُ الأوسع (‎11px‎ في
   ‎.x3-trio‎) هي التي تفصل العدّادَ عن أخيه — فتُقرأ الكتلةُ عدّادَين لا أربعةَ أشياء */
/* ===== واللونُ واحدٌ للرمز ورقمِه =====
   كان الرمزُ خافتًا (‎--u-lab‎) والرقمُ قاتمًا (‎--u-tx-strong‎)، فانفصل الزوجُ الذي
   لا ينفصل: الرمزُ يقول ماذا يُعَدّ والرقمُ يقول كم — وهما خبرٌ واحد. وكان عدّادُ
   البطائق قد لبس الخافتَ وحدَه فاختلف الأخوان في الصفّ الواحد.
   فصار اللونُ يُكتب مرّةً على ‎.x3-stat‎ فيرثه الرمزُ ورقمُه معًا — في شجرة المجلدات
   وفي عدّاد الغلاف سواءً، فلا موضعَ يُنسى */
.x3-stat {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 800; color: var(--u-lab); font-variant-numeric: tabular-nums;
}
.x3-stat svg { width: 14px; height: 14px; }
/* (جُرّب طيُّ عدّادَي المجلد عمودًا — المجلداتُ فوق والأسئلةُ تحتها — بقياسٍ أصغر ثمّ بـ‎70٪‎
   منه، فرُدّا صفًّا واحدًا بقياسهما الأوّل. ولا قاعدةَ خاصّةً بالمجلد الآن: ‎.x3-trio‎ وحدها
   تحكم الغلافَ وصفَّ المجلد سواء — والترتيبُ (المجلداتُ أوّلًا في البطائق) باقٍ في ‎x3Trio‎) */
.x3-dur { direction: ltr; unicode-bidi: embed; }
/* سهم التوسيع: أيقونة عارية بلا إطار، ذهبيّ ما دام مغلقًا ويخفت بعد الفتح */
.x3-tg {
  flex: none; display: grid; place-items: center; padding: 0;
  width: 20px; height: 20px; border: 0; background: transparent; color: var(--u-gold);
  cursor: pointer; transition: transform .18s, color .15s;
}
.x3-tg svg { width: 14px; height: 14px; }
.x3-st.on > .x3-hd > .x3-tg { transform: rotate(180deg); color: var(--u-mut); }
.x3-tg:hover, .x3-st.on > .x3-hd > .x3-tg:hover { color: var(--u-gold); }
/* ما تحت الدرجة الأولى: إزاحة فقط — لا خيط ولا علامات */
.x3-sub { padding-inline-start: var(--pad, 28px); margin-top: 4px; }
/* صفّ الشرح: سطر واحد ذهبيّ — الاسم ومدّته ومربّع اكتماله */
.x3-ep { position: relative; display: flex; align-items: center; gap: 9px; height: 30px; }
.x3-vic { flex: none; width: 15px; height: 15px; color: var(--u-gold); display: inline-flex; }
.x3-vic svg { width: 100%; height: 100%; }
/* أيقونة النوع في صفّ المحرّر صارت زرًّا يفتح النافذة — تبقى بمقاسها وحبرها،
   ومساحةُ ضغطها تتّسع بالمطلق فلا تُزحزح جيرانها في صفٍّ مقيسٍ بالبكسل */
button.x3-vic {
  position: relative; padding: 0; border: 0; background: none;
  cursor: pointer; transition: transform .15s, opacity .15s;
}
button.x3-vic::before { content: ''; position: absolute; inset: -6px -5px; }
button.x3-vic:hover { transform: scale(1.18); }
button.x3-vic:active { transform: scale(1.02); }
.x3-vnm {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--u-gold);
  margin-inline-end: 6px;   /* فسحة بين الاسم ومدّته (تُضاف إلى فجوة الصفّ) */
}
/* لا هامش سالب على المدة: هي عنصر LTR، فـmargin-inline-end فيها ينقلب إلى جهة الاسم
   لا إلى جهة المربّع — لذلك يُسحب المربّع نفسه نحوها بدلًا من ذلك */
.x3-vdur {
  flex: none;
  font-size: 10.5px; font-weight: 700; color: var(--u-gold);
  direction: ltr; unicode-bidi: embed; font-variant-numeric: tabular-nums;
}
.x3-done {
  flex: none; position: relative; overflow: hidden; margin-inline-start: -7px;   /* ملاصق للمدة: ٢px */
  width: 9px; height: 9px; border-radius: 2px;
  border: 1.5px solid var(--u-in-line);
  background: linear-gradient(var(--u-ctl), var(--u-ctl)), linear-gradient(var(--u-surf), var(--u-surf)), var(--x3-paper);
}
.x3-done.on { background: var(--u-gold); border-color: var(--u-gold); }
.x3-done .x3-lq::before { top: -1px; height: 2.5px; }
/* صفّ البطاقة: بلا مدّة، فمربّع الاكتمال لا يُسحب نحو ما ليس موجودًا */
.x3-ep--c .x3-done { margin-inline-start: 0; }

.cmt-copy--sm:hover { background: #d8e4e7; color: #14233f; }
.cmt-copy--sm.is-copied { background: #e1c172; color: #14233f; }
/* الوضع الداكن: الجسم بترولي مصمت والترويسة تبقى ذهبية */
html[data-theme="dark"] .cmt-topics { background: #1f4850; border-color: #356169; }
html[data-theme="dark"] .cmt-topics .tp-row + .tp-row { border-top-color: #2f5b63; }
html[data-theme="dark"] .cmt-topics .tp-row .tp-txt { color: #eef5f6; }
html[data-theme="dark"] .cmt-topics .tp-row .tp-tag { color: #9dc3ca; }
html[data-theme="dark"] .cmt-topics .tp-none { color: #a9c6cc; }
html[data-theme="dark"] .cmt-copy--sm { background: #2c5e65; color: #cfe0e3; }
html[data-theme="dark"] .cmt-copy--sm:hover { background: #38707a; color: #fff; }
html[data-theme="dark"] .cmt-copy--sm.is-copied { background: #e1c172; color: #14233f; }
/* تحرير الدكتور: مثلّثا التقييم (drate) والغياب/التأخير (dabs) بنفس ثيم «نسبة الترابط» تمامًا */
.pk--edit .drate-step button,
.pk--edit .dabs-step button,
html[data-theme="dark"] .pk--edit .drate-step button,
html[data-theme="dark"] .pk--edit .dabs-step button {
  background: transparent; border-radius: 0; width: auto; height: auto; padding: 0;
}
.pk--edit .drate-step button:hover,
.pk--edit .dabs-step button:hover,
html[data-theme="dark"] .pk--edit .drate-step button:hover,
html[data-theme="dark"] .pk--edit .dabs-step button:hover { background: transparent; color: var(--u-gold); }
.pk--edit .drate-step, .pk--edit .dabs-step { gap: 0; margin-inline-start: 2px; }
.pk--edit .drate-step button svg,
.pk--edit .dabs-step button svg { width: 12px; height: 12px; display: block; }
.pk--edit .chipe--rate, .pk--edit .chipe--abs { gap: 0.5px; }   /* المثلّثان أقرب للرقم */
/* لغة/نوعية المادة (تحرير): التسمية بنمط تسمية الترابط (باهتة) + سهم لتحت يسار النص */
/* السهم يمين القيمة بالعربي (الترتيب الطبيعي) — وقاعدة html[data-lang="en"] تقلبه لليسار بالإنجليزي */
.pk--edit .chipe--lang .mdrop-btn, .pk--edit .chipe--type .mdrop-btn { gap: 4px; }
.pk--edit .chipe--lang .mdrop-val, .pk--edit .chipe--type .mdrop-val { font-weight: 600; opacity: .8; }
html[data-theme="dark"] .pk--edit .chipe--office .office-sep { background: rgba(255, 255, 255, .2); }
html[data-theme="dark"] .pk--edit .chipe-in::placeholder,
html[data-theme="dark"] .pk--edit .office-in::placeholder,
html[data-theme="dark"] .pk--edit .tin::placeholder,
html[data-theme="dark"] .pk--edit .chipe-in--desc::placeholder { color: rgba(230, 240, 242, .4); }

/* أشرطة تقدّم الترم + اللسان المنسدل + شريط التمرير */
html[data-theme="dark"] .tp-prog { background: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .tp-prog--none { background: rgba(255, 255, 255, .24); }
html[data-theme="dark"] .term-drop { background: #1d3d46; }
html[data-theme="dark"] #m-grid.m-strip::-webkit-scrollbar-thumb { background: #2a4249; }

/* ============================================================
   بروفايل الحساب: صورة + اسم أسفل الشريط الجانبي · نافذة الحساب على الجانب
   ============================================================ */
.side-profile {
  display: flex; align-items: center; gap: 9px;
  width: 100%; margin-top: 2px; padding: 8px 9px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.side-profile:hover { border-color: var(--c-kfupm); }
.side-profile.on { border-color: var(--c-kfupm); background: var(--c-kfupm-soft); }
.side-acct { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.side-acct .side-profile { width: 100%; margin-top: 0; }
.side-logout {
  width: 100%; padding: 9px 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--c-ink-soft);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: 12px; font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
.side-logout:hover { border-color: var(--c-kfupm); color: var(--c-kfupm); background: var(--c-kfupm-soft); }
.side-logout svg { flex: none; width: 16px; height: 16px; }

/* ============================================================
   قاعُ الشريط للزائر: بابا الدخول
   ============================================================
   الوجهان في الوسم معًا ويُبدَّل بينهما صنفٌ على ‎body‎ — فالمستمعان يبقيان
   معلَّقين على أزرارٍ لا تُهدم. و‎display:none‎ لا ‎[hidden]‎: الأخيرةُ يغلبها
   ‎display:flex‎ المصرَّح على الزرّ نفسِه.

   والزرّان ليسا سواءً: «إنشاء حساب» مصمَتٌ بلون الهويّة لأنّه الفعلُ المقصود،
   و«تسجيل الدخول» محدَّدٌ خفيفٌ تحته لمن له حسابٌ من قبل — فلا يقف الزائرُ
   الجديد أمام بابين متساويين لا يدري أيَّهما بابُه. */
.side-auth { display: flex; flex-direction: column; gap: 6px; }
body:not(.is-guest) .side-auth { display: none; }
body.is-guest .side-profile,
body.is-guest .side-logout { display: none; }

.side-join, .side-login {
  width: 100%; padding: 10px; cursor: pointer;
  border-radius: 12px; border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
.side-join svg, .side-login svg { flex: none; width: 16px; height: 16px; }

.side-join { background: var(--c-kfupm); color: #fff; }
.side-join:hover { filter: brightness(1.08); }

.side-login {
  background: transparent; color: var(--c-ink-soft);
  border-color: var(--border);
}
.side-login:hover { border-color: var(--c-kfupm); color: var(--c-kfupm); background: var(--c-kfupm-soft); }

/* طيّ الشريط: ينزلق خارج الشاشة + يختفي هامش الجسم */
.sidebar { transition: transform .25s ease; }
body { transition: padding .25s ease; }
body.side-closed .sidebar { transform: translateX(100%); }
body.side-closed { padding-right: 0; }
html[data-lang="en"] body.side-closed .sidebar { transform: translateX(-100%); }
html[data-lang="en"] body.side-closed { padding-left: 0; }

/* مقبض عمودي ملتصق بحافة الشريط (المنتصف): يطوي/يفتح — يتبع الحافة عند الطي */
.side-handle {
  position: fixed; z-index: 42; top: 50%; right: var(--side-w);
  transform: translateY(-50%);
  width: 21px; height: 62px; cursor: pointer; padding: 0;
  border: 1px solid var(--border); border-right: 0; border-radius: 11px 0 0 11px;
  background: var(--surface); color: var(--c-kfupm);
  display: flex; align-items: center; justify-content: center;
  box-shadow: -5px 0 14px rgba(20, 35, 63, .1);
  transition: right .25s ease;
}
.side-handle:hover { color: #fff; background: var(--c-kfupm); border-color: var(--c-kfupm); }
body.side-closed .side-handle { right: 0; }
.side-handle svg { width: 15px; height: 15px; transition: transform .25s ease; }
body.side-closed .side-handle svg { transform: rotate(180deg); }
html[data-lang="en"] .side-handle {
  right: auto; left: var(--side-w); border: 1px solid var(--border); border-left: 0;
  border-radius: 0 11px 11px 0; box-shadow: 5px 0 14px rgba(20, 35, 63, .1);
}
html[data-lang="en"] body.side-closed .side-handle { left: 0; }
html[data-lang="en"] .side-handle svg { transform: rotate(180deg); }
html[data-lang="en"] body.side-closed .side-handle svg { transform: rotate(0deg); }
.sp-av {
  flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: var(--c-kfupm-soft); color: var(--brand-tx);
  display: flex; align-items: center; justify-content: center;
}
.sp-av img { width: 100%; height: 100%; object-fit: cover; }
.sp-av svg { width: 19px; height: 19px; }
.sp-name {
  min-width: 0; font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: 13.5px; font-weight: 700; color: var(--c-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start;
}

.acct-page {
  max-width: 460px; margin: 20px auto 0;
  background: var(--surface); color: var(--c-ink);
  border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 12px 40px rgba(20, 35, 63, .07);
  padding: 30px 26px 26px; animation: acctIn .2s ease;
}
@keyframes acctIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.acct-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 16px; }
.acct-av {
  position: relative; width: 78px; height: 78px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: var(--c-kfupm-soft); color: var(--brand-tx);
  display: flex; align-items: center; justify-content: center;
}
.acct-av > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.acct-av > svg { width: 44px; height: 44px; }
.acct-cam {
  position: absolute; bottom: -1px; inset-inline-end: -1px;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--c-kfupm); color: #fff; border: 2px solid var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.acct-cam svg { width: 14px; height: 14px; }
.acct-title { font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; font-size: 17px; font-weight: 800; color: var(--c-ink); }
.acct-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.acct-field > span { font-size: 12px; font-weight: 700; color: var(--c-ink-soft); }
.acct-in {
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--c-ink);
  padding: 9px 12px; font-family: inherit; font-size: 13.5px; outline: none;
  transition: border-color .15s;
}
.acct-in:focus { border-color: var(--c-kfupm); }
.acct-in::placeholder { color: var(--placeholder); }
.acct-in[type="tel"], .acct-in[type="email"] { direction: ltr; text-align: start; }
.acct-btns { display: flex; gap: 10px; margin-top: 22px; }
.acct-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 12px; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--c-ink);
  transition: background .15s, border-color .15s, color .15s;
}
.acct-btn svg { width: 16px; height: 16px; }
.acct-btn--logout:hover { border-color: var(--c-kfupm); color: var(--c-kfupm); background: var(--c-kfupm-soft); }
.acct-btn--del { color: #c0453e; border-color: rgba(192, 69, 62, .4); }
.acct-btn--del:hover { background: rgba(192, 69, 62, .09); border-color: #c0453e; }

/* ============================================================
   بابُ الزائر: صفحةُ الإنشاء والدخول · ولوحُ الركن المقفل
   ============================================================
   ويسكنان لوحَي المحتوى نفسَيهما ويلبسان ‎.acct-page‎ — فالانتقال يقع في المكان
   الذي سيسكنه المستخدم، ولا يُبنى لهما جلدٌ ثانٍ يفترق عن جلد الموقع أوّلَ تعديل. */
.auth-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 20px; text-align: center; }
.auth-can { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--c-ink-soft); }

.acct-btn--go { background: var(--c-kfupm); color: #fff; border-color: transparent; }
.acct-btn--go:hover { filter: brightness(1.08); }

/* الخطأ يسكن الصفحة لا شريطًا يزول: النموذجُ أمامه ويريد أن يُصلحه */
.auth-err {
  margin: 4px 0 0; padding: 9px 11px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700; color: #c0453e;
  background: rgba(192, 69, 62, .09); border: 1px solid rgba(192, 69, 62, .3);
}
.auth-err[hidden] { display: none; }

.auth-swap {
  display: block; width: 100%; margin-top: 14px; padding: 6px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--c-kfupm); text-decoration: underline; text-underline-offset: 3px;
}
.auth-note { margin: 16px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--c-ink-soft); text-align: center; opacity: .85; }

/* ===== رمزُ الاسترجاع =====
   يُقرأ حرفًا حرفًا ويُنسخ بيدٍ إن أبى المتصفّحُ الحافظة. فخطٌّ ثابتُ العرض
   (فلا يلتبس ما يتشابه)، وفجوةٌ بين الحروف، واتّجاهٌ لاتينيٌّ صريحٌ في صفحةٍ
   عربيّة، و‎user-select:all‎ فتُلتقط الجملةُ كلُّها بنقرة. */
.rec-code {
  direction: ltr; unicode-bidi: embed; text-align: center;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 17px; font-weight: 700; letter-spacing: .12em; line-height: 1.9;
  padding: 16px 12px; border-radius: 12px; word-break: break-all;
  background: var(--c-kfupm-soft); color: var(--c-kfupm);
  border: 1px dashed var(--c-kfupm);
  user-select: all; -webkit-user-select: all; cursor: text;
}
/* وحقلُ إدخاله مثلُه: من ينسخه بيده يراه كما رآه */
.rec-in {
  direction: ltr; text-align: center;
  font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em;
  text-transform: uppercase;
}
/* ورابطُ «نسيت كلمة المرور» أخفتُ من رابط التبديل: هو البابُ الثاني لا الأوّل */
.auth-swap--q { margin-top: 2px; color: var(--c-ink-soft); font-weight: 600; }
.auth-swap--q:hover { color: var(--c-kfupm); }

.nook-lock {
  max-width: 460px; margin: 20px auto 0; text-align: center;
  background: var(--surface); color: var(--c-ink);
  border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 12px 40px rgba(20, 35, 63, .07);
  padding: 34px 26px 26px; animation: acctIn .2s ease;
}
.nook-lock__ic { width: 40px; height: 40px; color: var(--c-kfupm); opacity: .75; }
.nook-lock__t {
  display: block; margin-top: 12px;
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 17px; font-weight: 800;
}
.nook-lock__w   { margin: 10px 0 0; font-size: 13px; line-height: 1.8; color: var(--c-ink); }
.nook-lock__can { margin: 14px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--c-ink-soft); }
.nook-lock__b   { display: flex; gap: 10px; margin-top: 22px; }
.acct-btn--del.is-confirm { background: #c0453e; color: #fff; border-color: #c0453e; }

/* ============================================================
   منتقي وجه المجلد «المَجْمَع» — شريحتان: لون · وجه
   القائمة ابنة ‎body‎ (‎position:fixed‎) كي لا يقصّها فيضُ صندوق الشجرة — وبذلك خرجت من
   ‎#cm-ui‎ فلا تبلغها توكناتُ الجلد. فلها توكناتُها هنا، وقيمُها قيمُ ‎.mdrop-list‎ و‎--u-*‎
   حرفًا بحرف: لا لونَ جديدٌ يدخل الهويّة من هذا الباب.
   ============================================================ */
.fmn {
  --f-bg: #fff; --f-line: rgba(20, 35, 63, .12); --f-tx: #35455c; --f-lab: #5d6b82;
  --f-hov: rgba(44, 94, 101, .12); --f-ctl: rgba(44, 94, 101, .09);
  --f-gold: #a8842e; --f-goldh: rgba(168, 132, 46, .1); --f-golddash: rgba(168, 132, 46, .5);
  --f-in: #fff; --f-inline: rgba(44, 94, 101, .3);
  --f-sb: rgba(44, 94, 101, .38); --f-sbh: #2c5e65;   /* إبهام التمرير: بترول الهويّة */
  /* ===== القدّ: ٦٥٪ من الأوّل =====
     العرض ‎296⇦192‎ والشبكة ‎196⇦128‎ — والمربّعاتُ تتبعهما وحدها لأنّها ‎1fr‎ في ثمانية أعمدة.
     والحرفُ لم ينزل إلى ٦٥٪ معهما: ‎11.5px‎ منها ‎7.5px‎ ولا تُقرأ بها عربيّة — فللحرف
     أرضيّةٌ لا ينزل تحتها، ونزل بقدرٍ يليق (‎11.5⇦10.5‎). فالقياسُ ٦٥٪ والقراءةُ محفوظة */
  --fmn-w: 192px;
  position: fixed; z-index: 70; width: var(--fmn-w); max-width: calc(100vw - 16px); padding: 8px;
  display: flex; flex-direction: column; gap: 7px;
  /* والسقفُ يُكتب من الجافا (‎fmnPlace‎) — و‎overflow: hidden‎ هو الذي يجعله يقُصّ
     لا يفيض. والانحناءُ يقتضيه كذلك: جسمٌ يفيض عن صندوقٍ منحنٍ يقطع أركانَه */
  overflow: hidden;
  border-radius: 10px; background: var(--f-bg); border: 1px solid var(--f-line); color: var(--f-tx);
  font-family: 'IBM Plex Sans Arabic', sans-serif; line-height: 1.6;
  box-shadow: 0 12px 28px rgba(13, 42, 72, .24);
  animation: fmnIn .16s cubic-bezier(.2, 1.1, .4, 1);
}
html[data-theme="dark"] .fmn {
  --f-bg: #17313a; --f-line: rgba(255, 255, 255, .14); --f-tx: #eef5f6; --f-lab: #bcd3d8;
  --f-hov: rgba(255, 255, 255, .12); --f-ctl: rgba(255, 255, 255, .1);
  --f-gold: #e1c172; --f-goldh: rgba(225, 193, 114, .15); --f-golddash: rgba(225, 193, 114, .55);
  --f-in: rgba(255, 255, 255, .09); --f-inline: rgba(255, 255, 255, .22);
  --f-sb: #2a4249; --f-sbh: #3a5a63;   /* بترولٌ أفتحُ من الجلد — قاعدةُ ‎#m-grid.m-strip‎ نفسُها */
  box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
}
@keyframes fmnIn { from { opacity: 0; transform: scale(.94) translateY(-4px); } to { opacity: 1; transform: none; } }

.fmn-seg { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--f-ctl); }
.fmn-seg button {
  flex: 1; font: inherit; font-size: 10.5px; cursor: pointer; padding: 4px 0;
  border: 0; border-radius: 6px; background: none; color: var(--f-lab);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: background .14s ease, color .14s ease;
}
.fmn-seg button.on { background: var(--f-bg); color: var(--f-gold); font-weight: 700; box-shadow: 0 1px 3px rgba(13, 42, 72, .14); }
/* شريحةُ «مجلد» تحمل الرمزَ نفسَه الذي ستردّه إلى الصفّ — فالوعدُ مرئيٌّ لا مكتوبٌ وحده */
.fmn-sgf svg { width: 12px; height: 12px; display: block; }
/* والجسمُ يطوى إذا خلا: شريحةُ «مجلد» لا تفتح تحتها شيئًا، فلا تبقى فجوةٌ تقول إنّ ثمّة ما نقص */
.fmn-body:empty { display: none; }
/* ===== ذيلُ الصفحة: يُمدّ لتسع القائمةُ ما دون آخر صفّ =====
   عنصرٌ خاوٍ في قاع الـ‎body‎ (وهو حاوي التمرير ههنا) يُكتب ارتفاعُه من الجافا.
   و‎pointer-events: none‎: فراغٌ لا يُلتقط، فلا تسقط فيه ضغطةٌ تُغلق القائمة قبل أوانها */
.fmn-room { height: 0; pointer-events: none; }
/* ===== والجسمُ هو الذي ينكمش إذا ضاق السقف =====
   القائمةُ عمودٌ مرن: الألوانُ والشريحتان قدُّهما ثابتٌ ولا يُقتطع منهما، والجسمُ وحدَه
   ينمو ويضمر. و‎min-height: 0‎ لازمةٌ لأنّ افتراضَ المرن ‎auto‎ فلا ينزل عن قامة محتواه —
   فيفيض على القائمة لا فيها، ويقُصّه ‎overflow: hidden‎ بلا تمريرٍ يُدرِكه */
.fmn-body { min-height: 0; overflow-y: auto; }
.fmn-cols, .fmn-seg { flex: none; }

/* الألوان شبكةً لا صفًّا: الثمانيةُ تُرى دفعةً واحدةً بلا تمرير */
.fmn-cols { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.fmn-sw { width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.fmn-sw i {
  width: 100%; height: 100%; border-radius: 5px; display: block; background: var(--sw);
  border: 1px solid transparent; transition: transform .14s ease, border-color .14s ease;
}
.fmn-sw:hover i { transform: scale(1.12); }
.fmn-sw.on i { border-color: var(--f-gold); box-shadow: 0 0 0 2px var(--f-bg), 0 0 0 3px var(--f-gold); }

.fmn-search {
  width: 100%; font: inherit; font-size: 11px; padding: 5px 8px; border-radius: 7px;
  background: var(--f-in); border: 1px solid var(--f-inline); color: var(--f-tx); outline: none;
}
.fmn-search:focus { border-color: var(--f-golddash); }

/* رفُّ الأبواب أفقيًّا لا رأسيًّا: يوفّر العرضَ فتبقى القائمةُ ضيّقةً تنبت من أيقونةٍ ‎16px‎ */
/* عشرةُ أبوابٍ في ‎176px‎ لا تسع: فيفيض الرفُّ ويُمرَّر. والفيضُ الصامتُ يُخفي ثلاثةَ أبوابٍ
   بلا إشارة — فيتلاشى طرفاه ليُقرأ «ثمّة المزيد». والتلاشي في الطرفين معًا لا في طرفٍ واحد:
   جهةُ الفيض تنقلب بانقلاب الكتابة، وقناعٌ واحدٌ يخدم اللغتين */
.fmn-rail {
  display: flex; gap: 1px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 5px; border-bottom: 1px solid var(--f-line);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11px, #000 calc(100% - 11px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 11px, #000 calc(100% - 11px), transparent 100%);
}
.fmn-rail::-webkit-scrollbar { display: none; }
.fmn-cb {
  flex: none; width: 22px; height: 22px; padding: 2px; border: 0; background: none; cursor: pointer;
  border-radius: 6px; opacity: .55; transition: opacity .12s ease, background .12s ease;
}
/* الرمزُ خطٌّ لا صورة: يرث الحبرَ من زرّه فيتبدّل بالجلد وبالحال بلا نسخةٍ ثانية.
   والمفتوحُ **يتلوّن ولا يُؤطَّر**: الصفُّ رفٌّ من رموزٍ عارية، فمربّعٌ يحيط بواحدها
   يُقحم شكلًا ثانيًا في سطرٍ لا أشكالَ فيه — والذهبُ وحدَه يكفي دالًّا */
.fmn-cb { color: var(--f-lab); }
.fmn-cb:hover { opacity: 1; color: var(--f-tx); }
.fmn-cb svg { width: 100%; height: 100%; display: block; }
.fmn-cb.on { opacity: 1; color: var(--f-gold); }
/* و«الكلّ» كلمةٌ لا صورة: لو رُسم إيموجيًّا لَصار عاشرَ بابٍ لا مخرجًا من الأبواب */
/* و«الكل» كلمةٌ عاريةٌ كذلك: حدُّها كان المربّعَ الوحيد في الصفّ فنُزع، فصارت أختًا للرموز
   لا نتوءًا بينها — تتلوّن بالذهب مفتوحةً كما تتلوّن هي */
.fmn-cb.is-all {
  width: auto; padding: 0 5px; opacity: 1; color: var(--f-lab);
  font: 700 9.5px 'IBM Plex Sans Arabic', sans-serif; border: 0;
}
.fmn-cb.is-all.on { color: var(--f-gold); }

/* ===== شريطُ التمرير بثيم الموقع =====
   كان شريطَ المتصفّح الافتراضيّ — رماديًّا غريبًا على جلدٍ بتروليّ. وقيمُه هنا قيمُ
   الموقع نفسِه: إبهامُ الصفحة ‎#xthumb‎ بترولُ الهويّة ‎#2c5e65‎، وإبهامُ الأسطح الداكنة
   ‎#2a4249‎ (القاعدة القائمة في ‎#m-grid.m-strip‎). وجهتُه يسارًا مع العربيّة بحكم ‎dir‎ */
.fmn-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px;
  max-height: 128px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--f-sb) transparent;
}
.fmn-grid::-webkit-scrollbar { width: 6px; }
.fmn-grid::-webkit-scrollbar-track { background: transparent; }
.fmn-grid::-webkit-scrollbar-thumb { background: var(--f-sb); border-radius: 999px; }
.fmn-grid::-webkit-scrollbar-thumb:hover { background: var(--f-sbh); }
.fmn-em {
  padding: 1px; border: 0; background: none; cursor: pointer; border-radius: 5px; aspect-ratio: 1;
  display: grid; place-items: center; transition: background .12s ease, transform .12s ease;
}
.fmn-em img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fmn-em:hover { background: var(--f-hov); transform: scale(1.14); }
.fmn-em.on { background: var(--f-goldh); box-shadow: inset 0 0 0 1px var(--f-golddash); }
.fmn-cat { grid-column: 1 / -1; margin: 4px 0 1px; font-size: 9.5px; font-weight: 700; color: var(--f-lab); }

@media (prefers-reduced-motion: reduce) { .fmn { animation: none; } }

/* ============================================================
   قائمة القناع: الزرّ الأيمن على شكلٍ في بطاقة «الإخفاء»
   طبقتان: ثلاثُ أيقوناتٍ بلا كلمة، ثمّ منبثقةٌ فرعيّةٌ تحت الأيقونة المضغوطة.
   وهي ابنةُ ‎body‎ (‎fixed‎) لأنّ مسرح البطاقة يُزاح ويُقصّ — فلها توكناتُها كما
   لقائمة وجه المجلد، وبقيمها نفسِها: لا سطحَ ثالثٌ يدخل الموقع من هذا الباب.
   ============================================================ */
.iom-mn, .iom-sub {
  --i-bg: #fff; --i-line: rgba(20, 35, 63, .12); --i-tx: #35455c; --i-lab: #5d6b82;
  --i-hov: rgba(44, 94, 101, .12); --i-gold: #a8842e; --i-goldh: rgba(168, 132, 46, .1);
  --i-del: #b03a52;
  /* فوق نافذة البطاقة لا تحتها: ‎#card-modal‎ يجلس على ‎85‎، وقائمةُ وجه المجلد على ‎70‎
     لأنّها خارج المنبثقات. وهذه تُفتح **داخل** النافذة فلا بدّ أن تعلوها، وإلّا رُسمت
     خلفها فلم تُرَ أصلًا — وهو ما وقع أوّلَ تجربة */
  position: fixed; z-index: 90;
  background: var(--i-bg); border: 1px solid var(--i-line); color: var(--i-tx);
  border-radius: 10px; box-shadow: 0 12px 28px rgba(13, 42, 72, .24);
  font-family: 'IBM Plex Sans Arabic', sans-serif; line-height: 1.6;
  animation: iomIn .13s cubic-bezier(.2, 1.1, .4, 1);
}
html[data-theme="dark"] .iom-mn, html[data-theme="dark"] .iom-sub {
  --i-bg: #17313a; --i-line: rgba(255, 255, 255, .14); --i-tx: #eef5f6; --i-lab: #bcd3d8;
  --i-hov: rgba(255, 255, 255, .12); --i-gold: #e1c172; --i-goldh: rgba(225, 193, 114, .15);
  --i-del: #e0798c;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
}
@keyframes iomIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- الطبقة الأولى ---------- */
.iom-mn { display: flex; align-items: center; gap: 3px; padding: 4px; }
.iom-b {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 7px; display: grid; place-items: center; color: var(--i-lab);
  transition: background .13s ease, color .13s ease;
}
.iom-b:hover { background: var(--i-hov); color: var(--i-tx); }
.iom-b.on { background: var(--i-goldh); color: var(--i-gold); }
.iom-b svg { width: 18px; height: 18px; display: block; }
.iom-b--del { color: var(--i-del); }
.iom-b--del:hover { background: color-mix(in srgb, var(--i-del) 14%, transparent); color: var(--i-del); }
.iom-sep { width: 1px; height: 18px; background: var(--i-line); flex: none; margin: 0 2px; }

/* أيقونةُ اللون: قرصُ القناع الآن بين قرصين من اللوحة — «بداخلي ألوانٌ، وهذا لونُك» */
.iom-col { position: relative; width: 18px; height: 18px; display: block; }
.iom-col i { position: absolute; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .22); }
.iom-col i:nth-child(1) { inset-inline-start: 0; top: 0; background: var(--c2); }
.iom-col i:nth-child(2) { inset-inline-start: 7px; top: 0; background: var(--c3); }
.iom-col i:nth-child(3) { inset-inline-start: 3.5px; top: 7px; background: var(--c1); box-shadow: 0 0 0 1.5px var(--i-bg); }
/* ===== أيقونةُ الشكل: شكلان متراكبان، الحاليُّ مصمتٌ والآخرُ باهت =====
   على منطق أيقونة اللون نفسِه — «هذا شكلُك، وفيَّ الآخر». والقياساتُ قياساتُ أختِها
   (‎11×9‎ وإزاحةُ ‎6,7‎) فتقفان في الصفّ بثقلٍ واحد، ولا تُقرأ إحداهما أكبرَ من الأخرى.
   والفرقُ بينهما الانحناءُ وحدَه: زاويةٌ مقوَّسةٌ للمستطيل ودائرةٌ تامّةٌ للبيضويّ */
.iom-shape { position: relative; width: 18px; height: 18px; display: block; }
.iom-shape i { position: absolute; width: 11px; height: 9px; border: 1.5px solid currentColor; }
.iom-shape i:nth-child(1) { inset-inline-start: 0; top: 1px; border-radius: 2px; }
.iom-shape i:nth-child(2) { inset-inline-start: 6px; top: 7px; border-radius: 50%; background: var(--i-bg); }
.iom-shape.ell i:nth-child(1) { opacity: .42; }
.iom-shape.rect i:nth-child(2) { opacity: .42; }
/* أيقونةُ النوع: مربّعان منقّطٌ ومصمت — حالا القناع نفساهما لا رمزٌ يُتعلَّم */
.iom-kind { position: relative; width: 18px; height: 18px; display: block; }
.iom-kind i { position: absolute; width: 11px; height: 9px; border: 1.5px solid currentColor; border-radius: 2px; }
.iom-kind i:nth-child(1) { inset-inline-start: 0; top: 1px; border-style: dashed; }
.iom-kind i:nth-child(2) { inset-inline-start: 6px; top: 7px; border-style: solid; background: var(--i-bg); }

/* ---------- الطبقة الثانية: فرعيّةٌ تحت أيقونتها ---------- */
.iom-sub { padding: 5px; display: flex; flex-direction: column; gap: 3px; }
.iom-sub--col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.iom-sw { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.iom-sw i {
  display: block; width: 100%; height: 100%; border-radius: 5px; background: var(--sw);
  border: 1px solid rgba(0, 0, 0, .2); transition: transform .12s ease;
}
.iom-sw:hover i { transform: scale(1.14); }
.iom-sw.on i { box-shadow: 0 0 0 2px var(--i-bg), 0 0 0 3px var(--i-gold); }
/* الطيفُ يتمّ الصفَّ الثاني: ثمانيةٌ وطيفٌ = تسعةٌ في أربعة أعمدة، فيقع وحده في الخامس */
.iom-spec { position: relative; width: 22px; height: 22px; cursor: pointer; }
.iom-spec i {
  position: absolute; inset: 0; border-radius: 5px; border: 1px solid var(--i-line);
  background: conic-gradient(#c0455f, #dc8a2e, #c9a44e, #5aab63, #3d97a3, #6b7fd7, #c0455f);
}
.iom-spec input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* حالا القناع: مربّعُ الحدّ ثمّ اسمُه — والمربّعُ يريك الحدَّ الذي ستحصل عليه */
.iom-k {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: start;
  font: inherit; font-size: 11.5px; cursor: pointer; padding: 5px 8px;
  border: 0; border-radius: 7px; background: none; color: var(--i-tx); white-space: nowrap;
}
.iom-k:hover { background: var(--i-hov); }
.iom-k.on { color: var(--i-gold); font-weight: 700; }
.iom-k i { width: 15px; height: 12px; border: 1.5px solid currentColor; border-radius: 2px; flex: none; }
.iom-k i.dash { border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .iom-mn, .iom-sub { animation: none; } }

/* ===== قائمةُ فلتر الصورة: الطبقةُ الثانية =====
   عمودٌ لكلّ فلتر: معاينةٌ محدودةٌ فوق، وتحتها أيقونةٌ ظاهرةٌ أبدًا واسمٌ **مطويّ**.
   فالقائمةُ في أصلها قصيرةٌ لا يشغلها إلّا الصورةُ وأيقونتُها، فإذا أُشير إليها
   انبسطت **عموديًّا** وظهرت الأسماءُ كلُّها.
   · والانبساطُ عموديٌّ خالص: الاسمُ يلتفّ داخل عرض عموده ولا يتجاوزه إلى جارَيه —
     ولو تُرك بعرض محتواه لَتراكبت الخمسةُ حين تظهر جميعًا.
   · و‎max-height‎ لا ‎height‎: منها ما هو سطرٌ ومنها ما هو سطران، فلا مقياسَ واحد.
   · والاسمُ لا يلتقط المؤشّر، وإلّا صار خروجُه منه إلى العمود تذبذبًا.
   والحدُّ للصورة وحدَها (‎.f-box‎) والعمودُ زرٌّ شفّاف: فالرأسُ يعوم على لوح القائمة */
.imgm-fl { padding: 7px; }
.imgm-fl .fstrip { display: flex; gap: 5px; align-items: flex-start; }
.imgm-fl .fcol {
  width: 44px; flex: none; border: 0; background: none; padding: 0; font: inherit;
  cursor: pointer; display: flex; flex-direction: column; gap: 4px;
}
.imgm-fl .f-box {
  position: relative; height: 34px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--i-line); background: var(--i-bg); transition: border-color .13s ease, box-shadow .13s ease;
}
.imgm-fl .fcol:hover .f-box { border-color: var(--i-gold); }
.imgm-fl .fcol.on .f-box { border-color: var(--i-gold); box-shadow: 0 0 0 1px var(--i-gold); }
.imgm-fl .im { position: absolute; inset: 0; width: 100%; height: 34px; object-fit: cover; display: block; }
.imgm-fl .im.d { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.imgm-fl .diag {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom left, transparent calc(50% - .5px), var(--i-line) calc(50% - .5px),
              var(--i-line) calc(50% + .5px), transparent calc(50% + .5px));
}
.imgm-fl .f-head { display: block; }
.imgm-fl .f-head svg { width: 12px; height: 12px; display: block; margin: 0 auto 2px; color: var(--i-lab); }
.imgm-fl .fcol.on .f-head svg { color: var(--i-gold); }
.imgm-fl .nm {
  display: block; font-size: 8.5px; line-height: 11px; color: var(--i-lab); text-align: center;
  max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: max-height .22s cubic-bezier(.2, .9, .3, 1), opacity .16s ease,
              transform .2s cubic-bezier(.2, .9, .3, 1);
}
.imgm-fl:hover .nm, .imgm-fl .fcol:focus-visible .nm { max-height: 24px; opacity: 1; transform: none; }
.imgm-fl .fcol.on .nm { color: var(--i-gold); font-weight: 700; }
/* تعذّر خبزُ المعاينات: تبقى الأيقوناتُ والأسماءُ ويُقال السبب — ولا تُترك مربّعاتٌ
   فارغةٌ يظنّها المستخدمُ عطبًا. والأسماءُ هنا مبسوطةٌ أبدًا: لا حبّةَ تُغني عنها */
.imgm-fl.is-bare .nm { max-height: 24px; opacity: 1; transform: none; }
.imgm-fl .fl-warn {
  margin: 7px 2px 0; max-width: 246px; font-size: 10.5px; line-height: 1.7; color: var(--i-lab);
}
@media (prefers-reduced-motion: reduce) { .imgm-fl .nm { transition: none; } }

/* ===== سلّةُ الصورة: حمراءُ ساكنة =====
   الحذفُ له لونُه، فلا تُترك رماديّةً كأدوات اليد بجانبها — والحمرةُ نفسُها التي في
   سلّة قائمة القناع (‎--i-del‎)، فلا يجتمع في نافذةٍ واحدةٍ حمراوان لفعلٍ واحد.
   ولا مربّعَ يحيط بها عند المرور ولا لونَ يتبدّل: تبقى كما هي، والمؤشّرُ وحدَه يقول
   إنّها تُضغط — كأيقونات تذييل التحرير العارية (‎.edit-acts--foot .infoedit-del‎).
   والقاعدةُ بعد ‎.cd-iot:hover‎ في الملفّ: ترجيحُهما واحدٌ فالمتأخّرُ يغلب */
.cd-iot.cd-ioimgdel,
.cd-iot.cd-ioimgdel:hover { background: none; color: #b03a52; }
html[data-theme="dark"] .cd-iot.cd-ioimgdel,
html[data-theme="dark"] .cd-iot.cd-ioimgdel:hover { color: #e0798c; }

/* ============================================================
   شريط التحديد في محرّر «البطائق» (ROADMAP-SELBAR — اتّجاه أ «الحبّة»)
   ============================================================
   يظهر حين تُحدَّد بطائقُ أو مجلدات، فيه عددُها وزرّا الملخّص والحذف وإلغاء التحديد.
   والقيمُ السبع أدناه هي مخرَجُ لوح المعايرة في المختبر حرفًا بحرف — فمقبضُ التعديل
   واحدٌ ههنا لا متفرّقٌ في القواعد.

   وهو **ابنُ الشاشة** لا ابنُ اللوح: يبقى وأنت تمرّر. لكنّه يتوسّط **منطقة المحتوى**
   لا الشاشةَ كلَّها — فيُزاح بعرض الشريط الجانبيّ كما يُزاح جسمُ الصفحة تمامًا
   (‎body{padding-right:--side-w}‎). و‎dir‎ يبقى ‎rtl‎ في اللغتين والقلبُ بـ‎data-lang‎،
   فتُكتب الجهاتُ **مادّيّةً** لا منطقيّة وإلّا لم تنقلب مع الإنجليزيّة.
   والطبقةُ ‎44‎: فوق الشريط الجانبيّ (‎40‎) ومقبضِه (‎42‎)، ودون النوافذ (‎85‎). */
.cx-selbar {
  --bar-alpha: .43;
  --bar-blur:  16px;
  --bar-r:     999px;
  --bar-h:     48px;
  /* بُعدُه عن قاع الشاشة — رُفع من ‎16‎ بحكم صاحب الموقع: كان يلامس الحافّة فيُقرأ
     ملتصقًا بها لا عائمًا فوقها. وتوكنٌ في رأس الكتلة لا رقمٌ مبثوث، فمعايرتُه سطر */
  --bar-edge:  34px;
  --bar-ico:   44px;
  --bar-pad:   4px;

  position: fixed; z-index: 44; bottom: var(--bar-edge);
  left: 0; right: var(--side-w);
  display: flex; justify-content: center;
  pointer-events: none;   /* الصفيحةُ لا تلتقط المؤشّر — الجسمُ وحده يلتقطه */
}
html[data-lang="en"] .cx-selbar { left: var(--side-w); right: 0; }
body.side-closed .cx-selbar { right: 0; }
html[data-lang="en"] body.side-closed .cx-selbar { left: 0; }
.cx-selbar[hidden] { display: none; }

/* الجسم: أرضيّةٌ شفّافةٌ يفصلها الضبابُ عمّا تحتها لا اللون */
.cx-selbar__body {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--bar-pad);
  min-height: var(--bar-h); padding: 0 calc(var(--bar-pad) + 3px);
  border-radius: var(--bar-r);
  background: color-mix(in srgb, var(--surface) calc(var(--bar-alpha) * 100%), transparent);
  -webkit-backdrop-filter: blur(var(--bar-blur)) saturate(1.5);
  backdrop-filter: blur(var(--bar-blur)) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: 0 10px 30px -12px rgba(9, 26, 38, .4), 0 2px 6px -2px rgba(9, 26, 38, .18);
  animation: cxbar-in .2s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes cxbar-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .cx-selbar__body { animation: none; } }

/* ===== العدّادان: أيقونةٌ ثمّ رقمُها، بلا لفظ =====
   الأيقونةُ تقول ما هو والعددُ يقول كم — واللفظُ بينهما تكرارٌ لهما. واللفظُ يبقى في
   ‎title/aria-label‎ فلا يُحرَم قارئُ الشاشة خبرًا حُذف رسمُه لا معناه.
   والرقمُ والأيقونةُ بحبرٍ واحدٍ مهموس (‎--c-ink-soft‎): كان الرقمُ ذهبيًّا وأيقونتُه
   خافتة، فانفصل زوجٌ لا ينفصل — الرمزُ يقول ماذا يُعَدّ والرقمُ يقول كم، وهما خبرٌ واحد.
   والذهبُ في هذا الشريط صار **للفعلين وحدَهما** (ذاكر · اختبر)، فلا يُنازعهما خبر.
   والمقاساتُ معايَرةٌ على قامة ‎48‎: لو تُركت على قِيَم الشريط النحيف لَبدا الحبرُ ضائعًا */
.cx-selbar__c { display: flex; align-items: center; gap: 5px; white-space: nowrap; padding-inline: 5px; }
.cx-selbar__c i { display: block; width: 18px; height: 18px; color: var(--c-ink-soft); flex: none; }
.cx-selbar__c i svg { width: 100%; height: 100%; display: block; }
.cx-selbar__c b { font-family: 'KFUPM Display', inherit; font-size: 17px; font-weight: 700; color: var(--c-ink-soft); line-height: 1; }
.cx-selbar__sep { width: 1px; align-self: stretch; margin: 10px 1px; background: var(--border); flex: none; }

/* ===== «إلغاء التحديد» — كلمةٌ عاريةٌ مهموسة =====
   لا مستطيلَ يحويها ولا أرضيّةَ تحتها: هي بين الخبر والفعل، فلا تصير زرًّا ثالثًا
   يزاحم الأيقونتين. وكانت ذهبيّةً فرُدّت إلى حبر الشريط: الذهبُ للفعلين وحدَهما،
   و«إلغاء التحديد» رفعُ حالٍ لا فعلٌ يُقصد.
   والقامةُ قامةُ الأيقونات (‎--bar-ico‎) لا قامةَ الحرف: مدى الضغط يجب أن يبلغ حدَّ اللمس
   وإن لم يُرَ له جسم — فالحشوةُ شفّافةٌ والهدفُ كامل.
   وعند المرور لا تُلبَس أرضيّةً (ذلك يعيد المستطيل الذي رُفض)، بل يشتدّ حبرُها وحدَه */
.cx-selbar__clear {
  font: inherit; cursor: pointer; border: 0; background: transparent; padding: 0 9px;
  height: var(--bar-ico); display: flex; align-items: center; flex: none;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--c-ink-soft); opacity: .88;
}
.cx-selbar__clear:hover { opacity: 1; background: transparent; }
.cx-selbar__clear:focus-visible { outline: 2px solid var(--c-ink-soft); outline-offset: 2px; border-radius: 6px; }

.cx-selbar__b {
  font: inherit; cursor: pointer; border: 0; background: transparent; color: var(--c-ink-soft);
  width: var(--bar-ico); height: var(--bar-ico); border-radius: calc(var(--bar-r) / 2);
  display: grid; place-items: center; flex: none; padding: 0;
}
/* الحبرُ نصفُ الهدف تقريبًا — الهدفُ ‎44‎ للإصبع، والرسمُ ‎20‎ للعين */
.cx-selbar__b svg { width: 20px; height: 20px; display: block; }
.cx-selbar__b:hover { background: var(--u-hov, rgba(20, 35, 63, .08)); }
html[data-theme="dark"] .cx-selbar__b:hover { background: rgba(255, 255, 255, .1); }
.cx-selbar__b--del { color: #c0453f; }
.cx-selbar__b--del:hover { background: rgba(192, 69, 63, .14); }
html[data-theme="dark"] .cx-selbar__b--del { color: #e8736c; }
.cx-selbar__b--x { color: var(--c-ink-soft); }

/* ===== ثلاثةُ أجناسٍ وفواصلُها (‎selbar-action-lab#s4‎) =====
   كانت الأفعالُ أيقوناتٍ عاريةً بحبر «إلغاء التحديد» نفسِه وقدِّه — فلا يُعرف من نظرةٍ
   ما الفعلُ الذي يُراد بك. فلبس كلُّ فعلٍ اسمَه، **والبنيةُ صارت بالخيوط لا بالأوعية**:

       [عدّادان]  ǀ  [إلغاء التحديد]  ǀ  [ذاكر · اختبر]  ǀ  [شارك]  ǀ  [سلّة]
        خــبــر        رفـعُ الحـال        مـا  لــك         لغيرك      إتلاف

   والقسمةُ ليست زينةً: «ذاكر» و«اختبر» فعلان **عليك** تقع ثمرتُهما فيك، و«شارك
   الرابط» فعلٌ **لغيرك** يخرج من يدك إلى الناس — والسلّةُ جنسٌ ثالثٌ يُتلف. فالشريطُ
   يقول ما فيه من **أجناسٍ** قبل أن يقول ما فيه من أفعال.
   ولا ملءَ ولا طوق: **الذهبُ على «ذاكر الملخّص» و«اختبر نفسك» وحدَهما** — وهما
   عنقودُ «ما لك»، ما يقع عليك أنت. وسائرُ الشريط بحبرٍ واحدٍ مهموس: العدّادان وأرقامُهما
   و«إلغاء التحديد» و«شارك الرابط». فيُقرأ الشريطُ خبرًا هادئًا فيه فعلان مضيئان،
   لا صفَّ حبّاتٍ ملوّنةٍ يتنازعن النظر.
   وقامةُ الزرّ ‎38‎ في شريطٍ قامتُه ‎48‎: تبقى حاشيةُ خمسةٍ من كلّ طرفٍ فلا ينتفخ */
.cx-selbar__acts {
  flex: none; display: flex; align-items: center; gap: var(--bar-pad);
}
.cx-selbar__b--act {
  width: auto; height: 38px; padding: 0 12px; border-radius: var(--bar-r);
  display: inline-grid; grid-auto-flow: column; align-items: center; gap: 6px;
}
.cx-selbar__b--act svg { width: 18px; height: 18px; }
.cx-selbar__b em { font-style: normal; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
/* والسلّةُ أيقونةٌ عاريةٌ كما كانت: لفظُها في ‎title‎ ولا مدى لها في الشريط */
.cx-selbar__b--del em { display: none; }
/* وذهبيُّ الحبر لا ذهبيُّ الأرضيّة: **حبرٌ يقول الأوّليّة**، وأرضيّةٌ كانت ستقول
   «زرٌّ من نوعٍ آخر» — وهي في صفٍّ قسمتُه بالخيوط لا بالأسطح */
.cx-selbar__b--pri { color: var(--c-gold); }
/* والمعطَّلُ يُرى ولا يُضغط: بابٌ يُعلَن قبل أن يُفتح (كما فُعل بـ‎#inbox‎ يومَ لا مخزنَ له) */
.cx-selbar__b[disabled] { opacity: .42; cursor: not-allowed; }
.cx-selbar__b[disabled]:hover { background: transparent; }

/* ============================================================
   نافذةُ رابط الاختبار — تُنشئه وتفتحه
   ============================================================
   وجهان لنافذةٍ واحدة: **الإنشاءُ** (عنوانٌ ووصفٌ ثمّ الرابطُ يُنسخ) و**الفتحُ** (ما قاله
   صاحبُه ثمّ فعلان). وجسمُها واحدٌ لأنّهما لحظتان من شيءٍ واحد.
   والطبقةُ ‎80‎: فوق شريط التحديد (‎44‎) ودون نافذة البطاقة (‎85‎) — فورقةُ الملخّص تُفتح
   من هذه النافذة فتعلوها، وهو المطلوب.
   و‎fixed‎ على الشاشة كلِّها لا على منطقة المحتوى: هي حوارٌ يوقف ما سواه، بخلاف الشريط
   الذي يعيش مع الصفحة فيُزاح بعرض الشريط الجانبيّ */
#xl-modal[hidden] { display: none; }
.xl-veil { position: fixed; inset: 0; z-index: 80; background: rgba(9, 26, 38, .42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* ===== وتتوسّط الشاشةَ في المحورين =====
   ‎inset: 0‎ مع ‎margin: auto‎ وقدٍّ مقيسٍ في المحورين: توسيطٌ بلا ‎transform‎ — وذاك
   يجعل العنصرَ **جذرَ خلفيّة** فيقتل ضبابَ ما تحته لو احتاجه يومًا.
   و‎height: max-content‎ لازمةٌ للتوسيط الرأسيّ: بلا قدٍّ لا يعرف ‎margin: auto‎ ما
   يقسمه. والسقفُ ‎100dvh‎ لا ‎100vh‎: شريطُ المتصفّح في الجوّال يقتطع من الثاني */
.xl-box {
  position: fixed; z-index: 81; inset: 0; margin: auto;
  width: min(460px, calc(100vw - 32px));
  height: max-content; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(9, 26, 38, .5);
  padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 11px;
  animation: xlIn .18s cubic-bezier(.2, .9, .3, 1.05);
}
html[data-theme="dark"] .xl-box { box-shadow: 0 26px 66px -18px rgba(0, 0, 0, .8); }
@keyframes xlIn { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .xl-box { animation: none; } }
.xl-hd { display: flex; align-items: center; gap: 9px; }
.xl-hd > i { flex: none; width: 20px; height: 20px; color: var(--c-gold); display: block; }
.xl-hd > i svg { width: 100%; height: 100%; display: block; }
.xl-hd > b { font: 700 14px 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--c-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== بروفايلُ الاختبار: جنبًا إلى جنب مع الفعل (‎xl-profile-lab#h‎) =====
   من أنت وما جمعتَ في يمينٍ، وما تفعل به في يسارٍ، يفصلهما **خيطٌ لا وعاء** — فلا
   تصير النافذةُ صندوقًا في صندوق. وهي بنيةٌ واحدةٌ في الوجهين لأنّ السؤال واحد:
   في الإنشاء «أنا وما جمعتُ ǀ انسخ الرابط»، وفي الفتح «هو وما جمع ǀ ذاكر · اختبر».
   والالتفافُ مسموحٌ (‎flex-wrap‎ ومقاسٌ أدنى للفعل): في شاشةٍ ضيّقةٍ ينزل الفعلُ
   سطرًا ثانيًا ولا يُعصر — وذاك خيرٌ من زرٍّ يُقصّ اسمُه */
.xl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xl-who { flex: none; display: flex; align-items: center; gap: 7px;
  padding-inline-end: 10px; border-inline-end: 1px solid var(--border); }
.xl-av { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--u-surf); color: var(--c-ink-soft); }
.xl-av img, .xl-av svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.xl-who__b { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* والاسمُ مسقوفٌ بقدٍّ: اسمٌ طويلٌ يبتلع مدى الفعل إلى جانبه، والقصُّ أهونُ من عصره */
.xl-who__b > b { font: 700 11.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink);
  max-width: 124px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xl-row > .xl-url, .xl-row > .xl-acts { flex: 1 1 224px; min-width: 0; }
.xl-cnt { flex: none; display: flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums; color: var(--c-ink-soft); }
.xl-cnt svg { width: 14px; height: 14px; display: block; }
.xl-cnt b { font: 700 11.5px 'KFUPM Display', inherit; color: var(--c-gold); margin-inline-end: 5px; }
.xl-f { display: flex; flex-direction: column; gap: 4px; }
.xl-f > span { font: 600 10.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft); }
.xl-f input, .xl-f textarea {
  font: 500 12.5px/1.6 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink);
  background: var(--u-surf, rgba(44, 94, 101, .06)); border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 10px; resize: none; width: 100%;
}
.xl-f input:focus, .xl-f textarea:focus { outline: 0; border-color: var(--c-gold); }
/* ===== الرابطُ حقلٌ يُقرأ ولا يُكتب =====
   و‎direction: ltr‎ عليه وحدَه: العنوانُ لاتينيٌّ يبدأ بـ‎file:///‎، فلو تُرك لاتّجاه
   الصفحة لَقُلبت أجزاؤه في العين وبدا مبتورًا — والنصُّ المحفوظُ سليمٌ في الحالين */
.xl-url { display: flex; align-items: stretch; gap: 6px; }
.xl-url input {
  flex: 1 1 auto; min-width: 0; direction: ltr; text-align: left;
  font: 400 11px/1.5 ui-monospace, Consolas, monospace; color: var(--c-ink-soft);
  background: var(--u-surf, rgba(44, 94, 101, .06)); border: 1px dashed var(--border);
  border-radius: 9px; padding: 7px 9px;
}
.xl-copy { flex: none; display: inline-grid; grid-auto-flow: column; align-items: center; gap: 6px;
  border: 1px solid var(--c-gold); background: none; color: var(--c-gold); cursor: pointer;
  border-radius: 9px; padding: 0 12px; font: 700 12px 'IBM Plex Sans Arabic', sans-serif; }
.xl-copy svg { width: 16px; height: 16px; display: block; }
.xl-copy:hover { background: color-mix(in srgb, var(--c-gold) 14%, transparent); }
.xl-copy.is-ok { border-color: var(--cd-sync, #4e9d57); color: var(--cd-sync, #4e9d57); }
.xl-desc { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--c-ink-soft); }
.xl-hint { margin: 0; font-size: 10.5px; line-height: 1.7; color: var(--c-ink-soft); opacity: .8; }
/* والفعلان: «ذاكر الملخّص» أوّلًا و«اختبر نفسك» يسارَه — قسمةُ الشريط نفسُها */
.xl-acts { display: flex; gap: 7px; }
.xl-b { flex: 1 1 0; min-width: 0; height: 40px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--c-ink);
  display: inline-grid; grid-auto-flow: column; align-items: center; justify-content: center; gap: 7px;
  font: 700 12.5px 'IBM Plex Sans Arabic', sans-serif; }
.xl-b svg { width: 18px; height: 18px; display: block; flex: none; }
.xl-b em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xl-b:hover { background: var(--u-hov, rgba(20, 35, 63, .08)); }
.xl-b--pri { border-color: var(--c-gold); color: var(--c-gold); }
.xl-b--pri:hover { background: color-mix(in srgb, var(--c-gold) 14%, transparent); }

/* الداكن: الظلُّ أعمقُ وخيطٌ خفيفٌ يفصل الزجاجَ عن السواد */
html[data-theme="dark"] .cx-selbar__body {
  box-shadow: 0 14px 38px -14px rgba(0, 0, 0, .72), 0 0 0 1px rgba(255, 255, 255, .04);
}

/* ============================================================
   ورقة الملخّص داخل نافذة البطائق (ROADMAP-SUMMARY-SHEET)
   ============================================================
   الجسمُ جسمُ النافذة نفسِه ولم يُلمس منه شيء: السحبُ والإلصاقُ والتوسيعُ والتكبير
   تعمل على ‎.cd-stage‎ لا على ما فيه. وهذه الأصنافُ تسكن ‎#cd-card‎ فترث جلديه.
   والورقةُ مقاسٌ حقيقيّ (‎210×297mm‎) تُصغَّر بمعامل ‎--sh-sc‎ — فما تراه هو ما يُطبع. */
/* دُرجُ الأنواع بابُ إضافةِ بطاقة — ولا يُضاف من الورقة شيء، فيُطوى بمقبضه معها.
   وهو ابنُ ‎#card-modal‎ لا ابنُ المسرح، فلا يكفي أن يسكت عنه رسمُ الورقة */
/* والطيُّ على البابِ وحدَه لا على الصفّ: ألسنةُ المطويّات تبقى مهما كان المركَّزُ ورقةً —
   وإلّا طُويت بطاقةٌ ثمّ فُتحت الورقةُ فضاع لسانُها ولا سبيلَ إلى ردّها */
/* ===== ومِقبضُ الأنواع **لا يُخفى أبدًا** =====
   كان يُطوى مع الورقة ومع نافذة الوجه: «لا يُضاف من هذه شيءٌ فلا معنى لبابه». وذلك
   يقيس البابَ بالنافذة المركَّزة وحدَها، والصدَفةُ تحمل نوافذَ شتّى — فتُطوى نافذةٌ أمٌّ
   ثمّ يُفتح وجهٌ فيغيب البابُ عن الشاشة كلِّها.
   وهو أثاثُ **الحافّة** لا أثاثُ نافذة: يقول «من هنا تُضاف بطاقة» في كلّ حال، ومعه في
   صفّه ألسنةُ النوافذ. فبقاؤه شرطُ ثباتِ الصفّ — ولو غاب لَتزحزح ما بجنبه معه */

/* ============================================================
   جلدُ الورقة — يتبع جلدَ الموقع، ويُقطع بزرٍّ في ترويستها
   ============================================================
   ألوانُ الورقة كانت مكتوبةً في مواضعها (‎#fff‎ · ‎#14233f‎ · ‎#2c5e65‎ …) فلا سبيلَ إلى
   قلبها. فصارت توكناتٍ على بطاقة النافذة، ونسخةً داكنةً تحلّ محلَّها بسمةٍ واحدة —
   فلا قاعدةَ تُكرَّر ولا لونَ يُنسى.
   والجلدُ يتبع الموقعَ ما لم يُقطع: من قرأ في الليل يريد ورقتَه ليلًا كذلك. ولكنّ
   للورقة حالًا ثالثة لا للموقع — **الطباعة** — ولذلك جاز أن تُقطع عن الموقع بزرّها.
   وأمّا المسرحُ حول الورقة فداكنٌ في الحالين: هو ظلُّ الطاولة لا لونُ الورق، والورقةُ
   تُقرأ على سطحٍ يبرزها. */
.mmodal__card.is-sheet {
  --sh-sc: .58; --sh-w: 210mm; --sh-h: 297mm; --sh-pad: 14mm; padding: 0; overflow: hidden;
  /* ===== خيطٌ لا يومض: عرضُه معكوسُ التصغير =====
     الورقةُ تُصغَّر بـ‎--sh-sc‎، فخيطٌ عرضُه ‎1px‎ يُرسم على الشاشة ‎sc‎ من البكسل — وعند
     تصغيرٍ كـ‎.39‎ يقع تحت نصف بكسلٍ فيُقرَّب إلى صفرٍ فيختفي، ويعود مع أوّل درجةٍ ترفعه
     فوق النصف. فهو يومض مع كلّ قرصة، وليس عيبَ لونٍ ولا عرض.
     والعلاجُ أن يُكتب العرضُ **معكوسًا**: ‎1px ÷ sc‎ — فإذا ضربه التصغيرُ عاد بكسلًا تامًّا
     مهما بلغت النسبة. حاصلُ الضرب ثابتٌ أبدًا، فالخيطُ ثابتٌ أبدًا */
  --sh-hair: calc(1px / var(--sh-sc, 1));
  --shp-bg: var(--cd-fld-l);            /* ورقُها — وهو ورقُ البطائق بعينه */
  --shp-tx: #14233f;                    /* حبرُها */
  --shp-mut: #5d6b82;                   /* الخافتُ منه */
  --shp-pet: #2c5e65;                   /* بترولُ الهويّة: الخطُّ والحروفُ والأرقام */
  --shp-line: #dfe6ea;                  /* خطوطٌ خفيفةٌ (الغلاف) */
  --shp-rule: #7e9aa2;                  /* حدودُ الجدول — درجةٌ تُرى ولا تسوّد */
  --shp-head: #123037;                  /* ترويسةُ الجدول وعمودُ أرقامه — بترولٌ داكنٌ يكاد يكون حبرًا */
  /* زجاجةُ عمود السؤال: لونٌ مصمتٌ يمزج بـ‎darken‎ — فهو اللونُ الذي يظهر على الأبيض بعينه */
  --shp-tint: #d4e3e6;
  --shp-tint-mix: darken;
  --shp-dim: #93a3b4;                   /* أرقامُ الصفوف والفراغات */
  --shp-ok: #1d6b4f;                    /* علامةُ الصواب */
  --shp-fill: rgba(44, 94, 101, .16);   /* أرضيّةُ القسم في الغلاف */
}
.mmodal__card.is-sheet[data-sh="dark"] {
  /* ===== والورقةُ الداكنةُ أضوأُ من طاولتها بدرجةٍ واحدة لا بأربع =====
     ثلاثُ محاولاتٍ ضبطتها:
     · ‎#16272b‎ على المسرح البتروليّ — كانت **أغمقَ** من طاولتها، فانقلبت القاعدة
       (الورقُ أضوأُ ممّا تحته أبدًا) فلم تُقرأ ورقةً بل رقعةً محفورة.
     · ثمّ ‎#213840‎ على مسرحٍ شبه أسود — ففُتحت الفجوةُ حتى صار الورقُ يلمع في ليل،
       والتباينُ يُتعب العينَ في القراءة الطويلة، وهي ورقةُ مذاكرةٍ لا لافتة.
     · فاستقرّت على درجةٍ واحدةٍ بينهما: الورقةُ أضوأُ قليلًا، وما بينهما يُدركه
       **الطوقُ الشعرة** لا فرقُ الإضاءة. فالحافّةُ تفصل، والإضاءةُ ترتاح.
     والحبرُ خُفّض معها: بياضٌ صريحٌ على داكنٍ يهجُم، فرُدّ درجةً إلى ما دون البياض */
  --shp-bg: var(--cd-fld-d);
  --shp-tx: #dfeaec;
  --shp-mut: #9db4ba;
  --shp-pet: #7fbcc6;                   /* يُرفع البترولُ إلى درجةٍ تُرى على داكن */
  --shp-line: rgba(255, 255, 255, .13);
  --shp-rule: #6f9aa4;                  /* وعلى الداكن تُرفع الدرجةُ لتبقى مرئيّة */
  /* والترويسةُ على الداكن لا تُغمَّق: الغامقُ على ورقٍ داكنٍ يبتلع نفسَه — فتبقى على درجة الحدّ */
  --shp-head: #6f9aa4;
  /* وعلى الورق الداكن لا يصلح ‎darken‎: الورقُ أغمقُ من أيّ صبغةٍ فلا يتغيّر شيء.
     فتعود صفيحةً شفّافةً عاديّة — والصورةُ البيضاءُ تحتها تبقى بيضاء لأنّ الشفافيّة يسيرة */
  --shp-tint: rgba(127, 188, 198, .10);
  --shp-tint-mix: normal;
  --shp-dim: rgba(223, 234, 236, .45);
  --shp-ok: #6ec39a;
  --shp-fill: rgba(255, 255, 255, .07);
}
.mmodal__card.is-sheet[data-sh="dark"] .sh-body { background: #0f2126; }
.mmodal__card.is-sheet[data-sh="dark"] .sh-sheet {
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1); }
.mmodal__card.is-sheet .cd-meta { padding: 8px 10px 8px 12px; }
/* زرُّ جلد الورقة في ترويسة النافذة: أخو ✕ والتكبير في القدّ والسلوك، ويحمل رمزَ
   الحال التي ينقل إليها — شمسًا إن كانت داكنةً وهلالًا إن كانت فاتحة */
.sh-skin svg { width: 14px; height: 14px; display: block; }
.sh-mid { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sh-ttl { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.sh-ttl svg { width: 15px; height: 15px; opacity: .85; }
.sh-sub { font-size: 11.5px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* مسرحُ الورق: خلفيّةٌ هادئةٌ تُظهر حوافَّ الورقة البيضاء — كمعاينة الطباعة */
.sh-body { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 14px 0 18px;
  background: rgba(6, 20, 26, .22); display: block; }
/* ===== ونقضُ ما يرثه الجسمُ من جسم البطاقة يحتاج **مثلَ نوعيّته** =====
   ‎#card-modal .cd-body‎ قاعدةٌ بمعرّف، فلا يبلغها صنفٌ وحده مهما تأخّر. وفيها ثلاثةٌ
   لا تصلح لمسرح ورق:
   · حشوةٌ علويّة ‎42px‎ — فسحةُ ألسنة البطاقة (الوجه والظهر)، ولا ألسنةَ ههنا، فتبقى
     فجوةً كبيرةً بين الترويسة وأوّل ما في المسرح.
   · ‎overflow-x: hidden‎ — والتقريبُ يُفيض الورقةَ عرضًا، فبغير الإزاحة الأفقيّة يضيع
     نصفُها ولا سبيلَ إليه.
   · ‎scrollbar-gutter: stable‎ — يحجز فسحةَ الشريط في جهةٍ واحدة، فيصير جوفُ المسرح
     غيرَ متناظرٍ مع إطاره، فيبدو الورقُ والمِسطرةُ مزاحين عن الوسط وهما متوسّطان فيه.
   فتُنقض بقاعدةٍ بمعرّفٍ مثلها، متأخّرةٍ عنها في الملفّ */
#card-modal .sh-body { padding: 12px 0 18px; overflow: auto; scrollbar-gutter: auto; }
.sh-roll { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* المقياسُ الخفيّ: بعرض جوف الورقة الحقيقيّ، خارجَ الجريان فلا يُرى ولا يزحزح شيئًا */
.sh-gauge { position: absolute; visibility: hidden; pointer-events: none;
  width: calc(var(--sh-w) - var(--sh-pad) * 2); inset-inline-start: -99999px; top: 0; }

/* ===== مِسطرةُ التقريب فوق الورق =====
   ترث سلوكَها من مِسطرة البطاقة (‎.cd-zbar‎) ولا تغيّر إلّا **الموضع**: تلك نتوءٌ مطلقٌ
   فوق حقلٍ بعينه، وهذه لاصقةٌ في رأس المسرح — فالورقُ يمرّ تحتها ولا تغيب مع أوّل تمريرة،
   والقارئُ يجدها حيث تركها مهما نزل في الأوراق.
   وقرصُها من الشرط نفسِه: ‎.sh-body‎ تحمل ‎.cd-body‎ معها، فمستمعُ العجلة يبلغها بلا استثناء */
/* ===== نصٌّ عائمٌ لا لوحة، وفوق الورقة الأولى لا مع العين =====
   المِسطرةُ أداةٌ تُلمح عند الحاجة، ولوحةٌ تحتها تصير جسمًا ثالثًا فوق الورق يزاحمه.
   فلا خلفيّةَ ولا حدَّ ولا حشوة — حبرٌ وحده، وظلٌّ خفيفٌ يحمله فوق الورقة البيضاء
   حين تمرّ تحته كما يحمله فوق المسرح الداكن.
   وموضعُها **ساكنٌ في الجريان** (لا لاصقٌ): تقف فوق الورقة الأولى وتمضي مع الورق إذا نزلتَ —
   فالقارئُ نازلٌ في أوراقه لا في أدواته، ولوحةٌ تلاحقه في كلّ تمريرةٍ ضجيجٌ دائم.
   و‎position:static‎ يُبطل ‎left/right‎ الموروثتين من ‎.cd-zbar‎ (فلا يبقى ‎left:50%‎ الذي كان
   يدفعها يمينًا) — أمّا ‎transform‎ فيعمل على الساكن كما يعمل على المطلق، فلا يُبطله الموضع:
   ‎translateX(-50%)‎ يبقى فيسحبها نصفَ عرضها إلى اليسار بعد أن وسّطتها الهوامش. فيُنقض بنفسه */
.sh-zbar {
  position: static; transform: none; margin: 2px auto 12px; width: fit-content; gap: 3px;
  padding: 0; border-radius: 0; background: none;
  color: #dbe9ec; text-shadow: 0 1px 3px rgba(6, 20, 26, .8), 0 0 2px rgba(6, 20, 26, .6);
}
.sh-zbar .cd-zval { font-size: 10px; min-width: 32px; }
.sh-zbar .cd-zb { width: 16px; height: 16px; font-size: 13px; }
.sh-zbar .cd-zb:hover { background: none; color: var(--gold, #e1c172); }
/* وإذا قُرّبت الورقةُ فاضت عن المسرح، والتوسيطُ الصارم يدفع الفائضَ إلى الجهتين معًا
   فيصير ما في الجهة البادئة **غيرَ قابلٍ للوصول** بالتمرير (علّةُ التوسيط المعروفة في المرن).
   و‎safe‎ يتراجع إلى البداية عند الضيق ويبقى توسيطًا عند السعة — فالورقةُ تُتصفّح كلُّها */
.sh-roll { align-items: safe center; }

/* ===== الورقةُ تُصغَّر بـ‎transform‎ لا بـ‎zoom‎ =====
   كانت بـ‎zoom‎، و‎zoom‎ **يُعيد تخطيطَ ما تحته كلِّه** عند كلّ تغيّر: كلُّ صفٍّ وكلُّ صورةٍ
   في كلّ ورقة. فقرصةٌ واحدةٌ تبعث عشراتِ أحداث العجلة، وكلُّ حدثٍ تخطيطٌ كامل — فتثقل اليد.
   و‎transform‎ يجري على المُركِّب (GPU): لا تخطيطَ ولا إعادةَ بناءٍ للصفوف، إنّما مصفوفةٌ تُضرب.
   وعلّةُ ‎transform‎ المعروفة — أنّه يُبقي حجزَ المساحة على الأصل فتظهر فجواتٌ بيضاء —
   تُحلّ بغلافٍ يحمل **المقاسَ المصغَّر** والورقةُ مطلقةٌ فيه: فالحجزُ صحيحٌ والرسمُ مُركَّب.
   والقامةُ ثابتةٌ ‎297mm‎ لا ‎min-height‎: المُرقِّم يقطع الورقةَ على هذا الحدّ أصلًا (وفيه
   فسحةُ ‎34px‎)، وبثباتها يُحسب مقاسُ الغلاف حسابًا لا قياسًا — فلا مرقابَ ولا قراءةَ تخطيط.
   و‎overflow:hidden‎ حارسٌ أخير: ورقةٌ لا تتّسع لبندٍ شاذّ الطول تقصّه كما تقصّه الطابعة،
   ولا تتسلّق على أختها */
/* ===== وأثقلُ ما بقي: أنّ الورقَ كلَّه يُرسم وإن لم يُنظر إليه =====
   المقاسُ متغيّرٌ في الغلاف، فتبديلُه يمسّ **كلَّ** غلافٍ في السيل — وفي رزمةٍ كبيرةٍ عشراتُ
   الأوراق، في كلٍّ منها عشراتُ الصفوف وصورُها. فالقرصةُ الواحدة تُعيد رسمَ ما لا تراه العين.
   و‎content-visibility:auto‎ يقطع هذا من أصله: ما خرج عن النظر لا يُخطَّط ولا يُرسم أصلًا —
   فيصير ثمنُ التقريب بقدر **الورقة المنظورة** لا بقدر الرزمة كلِّها، وتستوي الصفحتان والخمسون.
   وشرطُه أن يُعرف مقاسُ الغائب سلفًا (‎contain-intrinsic-size‎) وإلّا قفز شريطُ التمرير كلَّما
   دخلت ورقةٌ في النظر — ومقاسُنا **محسوبٌ** لا مقيس، فيُعطى له حرفيًّا */
.sh-pwrap { display: block; flex: none; position: relative;
  width: calc(var(--sh-w) * var(--sh-sc)); height: calc(var(--sh-h) * var(--sh-sc));
  content-visibility: auto;
  contain-intrinsic-size: calc(var(--sh-w) * var(--sh-sc)) calc(var(--sh-h) * var(--sh-sc)); }
/* ===== وأثناء القرصة وحدَها تُرفع الورقةُ المنظورة إلى طبقتها =====
   ‎will-change‎ دائمًا يحجز ذاكرةَ طبقةٍ لكلّ ورقة — ثمنٌ يُدفع في السكون بلا فائدة.
   فيُعلَّق بصنفٍ يوضع مع أوّل قرصةٍ ويُرفع بعد سكونها، فتُركَّب الحركةُ ثمّ يُعاد الحبرُ حادًّا */
.mmodal__card.is-sheet.is-zooming .sh-sheet { will-change: transform; }
/* والركنُ الذي تُشدّ إليه هو ركنُ الغلاف نفسُه (‎top left‎ بالجهات المرئيّة لا المنطقيّة):
   فالمصغَّرةُ تملأ غلافَها تمامًا في أيّ اتّجاهِ كتابةٍ كان، ولا يُترك للجهة أثرٌ يُصان.
   والتوسيطُ يقع على **الغلاف** في السيل، فلا حاجة إلى ترجمةٍ في المصفوفة */
.sh-sheet { position: absolute; top: 0; left: 0;
  transform: scale(var(--sh-sc)); transform-origin: top left;
  width: var(--sh-w); height: var(--sh-h); overflow: hidden;
  background: var(--shp-bg); color: var(--shp-tx); padding: var(--sh-pad);
  box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
/* (‎.sh-head‎ رُفعت: لا ترويسةَ جاريةً على الورق — لا اسمَ مادّةٍ ولا عنوانَ ولا رقمَ صفحة.
   اسمُ المادة في ترويسة النافذة فوقها، وعددُ الأوراق في شريطها السفليّ) */

/* ============================================================
   غلافُ القسم — الشجرةُ المقصوصة (المعتمَد من ‎sheet-path-lab‎)
   ============================================================
   ورقةٌ بيضاءُ فيها مسارُ القسم صاعدًا ومعه إخوتُه وحدَهم. والقيمُ أدناه هي التي
   خرجت من لوح المعايرة، ولا يُعدَّل منها شيءٌ إلّا من هناك ثمّ يُنقل. */
.sh-cover {
  --shk-ind: 8mm;       /* مسافة الدرجة الواحدة */
  --shk-lh: 1.9;        /* تباعد الأسطر */
  --shk-ic: 8.5mm;      /* حجم رمز المجلد */
  --shk-fs: 14.5pt;     /* حجم خطّ الآباء */
  --shk-sfs: 17pt;      /* حجم خطّ الإخوة */
  --shk-cfs: 25pt;      /* حجم خطّ القسم نفسِه */
  --shk-gap: 3px;       /* مسافة الرمز عن الاسم */
  --shk-soff: 4mm;      /* إزاحة الإخوة أفقيًّا (موجبُها يسارًا) */
  --shk-cs: .64;        /* حجم العدّاد — نسبةً إلى حجم صفّه */
  --shk-cgap: .5em;     /* مسافة العدّاد عن الاسم */
  --shk-cop: .68;       /* خفوت العدّاد */
  position: absolute; inset: 0;
  font-size: var(--shk-fs); line-height: var(--shk-lh); color: var(--shp-mut);
}
/* والجوفُ يصير مسرحًا للمرساة: كتلةٌ لا صفٌّ مرن، فيملؤه الغلافُ ويُقاس فيه */
.sh-sheet--cover .sh-in { flex: 1; display: block; position: relative; }
/* ===== المرساة: الصفُّ الحاليُّ في مركز الورقة، والباقي معلَّقٌ حوله =====
   الكتلةُ إن توسّطت انزاح العنوانُ عن المركز كلَّما زاد الآباءُ فوقه أو الإخوةُ تحته —
   فيتحرّك الشيءُ الوحيد الذي يجب ألّا يتحرّك. فتُقلب القسمة: يُثبَّت الصفُّ الحاليُّ،
   ويُعلَّق الآباءُ فوقه والإخوةُ تحته. فلا يُقاس شيءٌ ولا يُحسب — الموضعُ يخرج من
   التخطيط نفسِه ويصحّ لأيّ عددٍ من الآباء والإخوة بلا سطرٍ يتغيّر.
   و‎left/translate‎ بالجهات المرئيّة لا المنطقيّة: التوسيطُ لا ينقلب بانقلاب الكتابة */
.sh-cov { position: absolute; top: 50%; left: 50%; width: max-content;
  transform: translate(-50%, -50%) scale(var(--fit, 1)); transform-origin: center center; }
.sh-cov__up { position: absolute; bottom: 100%; inset-inline-start: 0; width: max-content; }
.sh-cov__dn { position: absolute; top: 100%; inset-inline-start: 0; width: max-content; }
.sh-lv { display: flex; align-items: center; gap: var(--shk-gap); }
.sh-fic { flex: none; width: var(--shk-ic); height: var(--shk-ic);
  display: inline-flex; align-items: center; justify-content: center; }
.sh-fic i { display: inline-flex; width: 100%; height: 100%; }
.sh-fic svg { width: 100%; height: 100%; }
.sh-fic img { width: 100%; height: 100%; object-fit: contain; }
/* وكتابُ الجذر مصغَّرٌ بطبعه (‎bk--xs‎)، فيُكبَّر إلى قدّ الرمز بمنظورٍ يحفظ ميلَه */
.sh-fic .bk { height: var(--shk-ic); --thk: 4px; }
/* والإخوةُ لهم قياسُهم دون الآباء: هم وحدَهم يشاركون القسمَ درجتَه فتزاحمُهم عينُه */
.sh-lv.is-sib { font-size: var(--shk-sfs); }
/* وهم خافتون: حاضرون ليُعرف الموضع، لا ليُقرآ */
.sh-lv.is-sib:not(.is-on) { opacity: .45; }
/* ===== القسمُ نفسُه: حبرٌ وخطُّ هويّةٍ وأرضيّةٌ خافتة =====
   الأرضيّةُ تقول «هذا هو» بلا إطارٍ يحبسه ولا شريطٍ يشير إليه من طرف */
.sh-lv.is-on { color: var(--shp-tx); font-weight: 700; font-size: var(--shk-cfs);
  font-family: 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  background: var(--shp-fill); border-radius: 2mm; padding: 1mm 4mm; }
/* ===== عدّادُ الصفّ: كلُّ قياسٍ فيه نسبيٌّ إلى قامة صفّه =====
   القسمُ ضِعفا آبائه قامةً، فلو ثُبّتت أرقامُه بالنقاط لَبدا عدّادُه تابعًا صغيرًا على
   عنوانٍ كبير. وبالنسبة يكبر مع صاحبه ويصغر معه، فيُقرآن شيئًا واحدًا */
.sh-cnt { display: inline-flex; align-items: center; gap: 1em;
  margin-inline-start: var(--shk-cgap); flex: none; line-height: 1;
  font-size: calc(1em * var(--shk-cs)); font-weight: 600; color: var(--shp-mut);
  opacity: var(--shk-cop); font-variant-numeric: tabular-nums; }
.sh-ct { display: inline-flex; align-items: center; gap: .22em; }
.sh-ct .sh-ci { flex: none; width: 1.25em; height: 1.25em; display: inline-flex; }
.sh-ct .sh-ci svg { width: 100%; height: 100%; }
.sh-ct b { font-weight: 600; }
/* لفظُ الرقم ابنُه لا جارُه فيرث لونَه، وقامتُه ‎.76‎ منه — نسبةُ المحرّر نفسُها.
   ولا يلبسه إلّا الأبُ المباشر: هو وحدَه تجتمع عنده ثلاثةُ أرقامٍ يُفرَّق بينها */
.sh-ct em { font-style: normal; font-size: .76em; font-weight: 600;
  margin-inline-start: .28em; white-space: nowrap; }
/* الخيطُ الفاصل: عرضُه نسبيٌّ لا بكسلٌ مطلق — الورقةُ تُصغَّر بـ‎--sh-sc‎ وتُطبع بكثافةٍ
   أخرى، فبكسلٌ مكتوبٌ هنا يختفي هناك. وطرفاه مستديران فلا يبدو مقصوصًا */
.sh-ct i.sh-cb { flex: none; width: .14em; min-width: .7px; height: 1.15em;
  border-radius: 999px; background: currentColor; opacity: .5; }
/* والصفرُ يخفت ولا يغيب — كما في المحرّر: موضعُه خبر، وغيابُه يخلّ بالترتيب */
.sh-cnt .is-nil { opacity: .42; }

/* ===== الصفّ: ثلاثُ خانات — رقمُه ثمّ سؤالُه ثمّ جوابُه =====
   وكلُّ صفٍّ جدولُه، فالكسرُ يقع بينها.
   ===== ولونٌ واحدٌ للجدول كلِّه =====
   الحدُّ والترويسةُ وعمودُ الأرقام كلُّها ‎--shp-head‎: شبكةٌ وزاويةٌ وعمودٌ من حبرٍ واحد،
   فيُقرأ الجدولُ جسمًا مرسومًا لا قطعًا متجاورةً بدرجاتٍ مختلفة.
   وعمودُ الأرقام **مصبوغٌ لا ملوَّنُ الحبر**: يأخذ أرضيّةَ الترويسة نفسَها فيصيران معًا
   زاويةً مصمتةً ينزل منها عمود، فتُقرأ الأوراقُ من هذا العمود ولو قُلّبت من وسطها.
   والأرقامُ عليه بلون الورق، فتُقرأ نقشًا لا حبرًا.
   ===== ولا خيطَ مضاعف =====
   كلُّ صفٍّ جدولٌ مستقلّ، فلو أخذ كلُّ واحدٍ حدَّه العلويَّ والسفليَّ لَالتقى خيطان بين
   كلّ صفّين — يُرسمان أثخنَ من إخوتهما، ويتضاربان عند التصغير. فالحدُّ العلويُّ يُرفع عن
   الجميع ويُترك للترويسة وحدَها: خيطُ الصفّ السابق هو سقفُ التالي */
/* ‎table-layout: fixed‎ ضمانةٌ لا زينة: كلُّ صفٍّ جدولٌ مستقلّ، وبالتخطيط التلقائيّ يحسب
   كلُّ جدولٍ أعمدتَه من **محتواه هو** — فتختلف الخاناتُ من صفٍّ إلى صفّ ولا يستقيم عمود.
   وبالثابت تُقرأ العروضُ من ‎colgroup‎ وحدَه، فتتطابق الصفوفُ كلُّها والترويسةُ معها،
   ولا يتمدّد عمودُ الأرقام مهما بلغ الرقم */
.sh-tbl { width: 100%; table-layout: fixed; border-collapse: collapse;
  break-inside: avoid; page-break-inside: avoid; }
.sh-tbl col.n { width: 8mm; } .sh-tbl col.q { width: 50%; } .sh-tbl col.a { width: auto; }
.sh-tbl td, .sh-tbl th { border: var(--sh-hair) solid var(--shp-head); border-top: 0;
  padding: 5px 7px; vertical-align: top; font-size: 10.5pt; line-height: 1.75; }
.sh-tbl--h th { border-top: var(--sh-hair) solid var(--shp-head); }
/* والرقمُ يتوسّط خانتَه طولًا وعرضًا: خانتُه تطول بطول جارتيها (سطرٌ أو صورة)، فلو بقي
   في أعلاها لَبدا معلّقًا في رأس عمودٍ فارغٍ تحته. والمتنُ يبقى في الأعلى لأنّه يُقرأ
   من أوّله، والرقمُ يُلمح لمحًا فيُطلب في مركز ما يُشير إليه.
   ===== وقامتُه صغيرةٌ من أوّلها =====
   العمودُ ‎8mm‎، والرقمُ بقامة ‎9pt‎ وحشوةٍ ‎7px‎ يملؤه عند ثلاث خاناتٍ ثمّ يفيض، فيتمدّد
   العمودُ فجأةً وتنزاح الأعمدةُ كلُّها معه. فتُصغَّر القامةُ وتُضيَّق الحشوةُ حتى تسع
   **أربعَ خاناتٍ** في العرض نفسِه — والرقمُ خبرٌ يُلمح، لا يُقرأ في كلّ صفّ */
.sh-tbl td.n { background: var(--shp-head); color: var(--shp-bg); vertical-align: middle;
  font-size: 7.5pt; padding-inline: 2px; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums; }
/* ===== زجاجةُ عمود السؤال: طبقةٌ فوقه، تمزج ولا تحجب =====
   لو صُبغت الخانةُ خلفيّةً لَجلست الصبغةُ **تحت** المحتوى، فتحجبها كلُّ صورةٍ مصمتة —
   فيصير الشريطُ مقطّعًا: يظهر عند النصّ ويغيب عند الصور. فهي **صفيحةٌ فوق الخانة**
   (‎::after‎ مطلقةٌ تملؤها) فيبقى العمودُ شريطًا متّصلًا من أعلاه إلى أسفله.
   ===== ولمَ ‎mix-blend-mode: darken‎ ولم تكفِ الشفافيّة؟ =====
   الصفيحةُ الشفّافةُ العاديّة تُغطّي ما تحتها بنسبتها: فإن غمقت لتُرى، **سرقت من سواد
   الحرف** فباهت النصُّ في الصورة وضاع تباينُه — وهذا عينُ ما لا يُراد.
   و‎darken‎ يقارن نقطةً بنقطة ويُبقي **الأغمق منهما**:
     · الأبيضُ (ورقُ الصفحة وخلفيّةُ الصورة) أفتحُ من الصبغة ⇐ يأخذ الصبغة، فيظهر الشريط.
     · الحرفُ الأسود أغمقُ منها ⇐ **لا يتغيّر ذرّة**، ويبقى أسودَ على أبيضٍ مصبوغ.
   فتغمق الصبغةُ كما تشاء ولا ينقص تباينُ الصورة أبدًا — لأنّ المزجَ لا يُفتّح شيئًا قطّ.
   ولأنّ الناتجَ على الأبيض هو الصبغةُ بعينها، تُكتب **مصمتةً** لا بشفافيّة: ما تراه هو ما تختاره.
   و‎pointer-events:none‎ فلا تسرق ضغطةً ولا تحديدَ نصّ */
.sh-tbl td.q { position: relative; }
.sh-tbl td.q::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--shp-tint); mix-blend-mode: var(--shp-tint-mix, normal); }
.sh-tbl img { max-width: 100%; height: auto; vertical-align: middle; }
/* ترويسةُ الجدول: تتكرّر في رأس كلّ ورقةٍ فيها صفوف — فلا تُقرأ خانةٌ بلا اسمها ولو
   قُلّبت الأوراقُ من وسطها. وهي جدولٌ مستقلٌّ بالأعمدة نفسِها، فتنطبق حدودُها على ما تحتها */
/* وعناوينُ الأعمدة الثلاثةُ متوسّطةٌ كلُّها: الترويسةُ صفٌّ واحدٌ مصمت، فتوسيطُ خانةٍ
   وتصديرُ أختيها يكسر استواءه. أمّا متونُ الخانات فتبقى مصدَّرةً — السطرُ الطويلُ يُقرأ
   من حافّةٍ ثابتةٍ لا من وسطٍ يتحرّك بطوله */
.sh-tbl--h th { background: var(--shp-head); color: var(--shp-bg); font-size: 9.5pt;
  font-weight: 700; text-align: center; padding: 4px 7px; }

/* «المتعدّد»: خياراتُه مرقّمةٌ تحت سؤاله، والصوابُ حرفُه في الجواب */
.sh-opts { list-style: none; margin: 5px 0 0; padding: 0; display: grid; gap: 2px; }
.sh-opts li { font-size: 10pt; padding-inline-start: 2px; }
.sh-opts li b { display: inline-block; min-width: 15px; color: var(--shp-pet); font-weight: 700; }
.sh-ok { display: inline-block; min-width: 17px; color: var(--shp-ok); font-weight: 700; }

/* «الفراغ»: فراغٌ مسطَّرٌ مرقَّمٌ في السؤال، والكلماتُ بأرقامها في الجواب */
.sh-blank { display: inline-block; min-width: 22mm; border-bottom: 1.4px solid var(--shp-tx);
  margin: 0 3px; text-align: center; color: var(--shp-dim); font-size: 9pt; position: relative; }
.sh-blank i { font-style: normal; font-size: 7.5pt; color: var(--shp-pet); vertical-align: super; margin-inline-start: 3px; }
.sh-ans { display: block; }
.sh-ans i { font-style: normal; display: inline-block; min-width: 15px; color: var(--shp-pet); font-weight: 700; }

/* «الإخفاء»: الصورةُ وأقنعتُها — والإحداثيّاتُ منسوبةٌ فتصحّ في أيّ مقاس */
.sh-io { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.sh-io img { max-width: 100%; height: auto; display: block; }
.sh-msk { position: absolute; display: block; border: 1px solid rgba(33, 33, 33, .55); border-radius: 2px; }
.sh-msk.is-off { background: none !important; border-style: dashed; border-color: rgba(44, 94, 101, .5); }

/* الرصيف: عدّادُ الأوراق وزرُّ الطباعة */
.sh-foot { display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
.sh-grow { flex: 1; }
.sh-cnt { font-size: 11.5px; opacity: .75; }
.sh-btn { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; display: flex;
  align-items: center; gap: 6px; padding: 5px 12px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: inherit; }
.sh-btn:hover { background: rgba(255, 255, 255, .16); }
.sh-btn svg { width: 15px; height: 15px; }

/* ============================================================
   النافذةُ المقفلة: وضعُ التحرير بعينه، منزوعَ ما يَكتب
   ============================================================
   ليست نافذةً أخرى بل النافذةُ نفسُها: الترويستان والحقولُ والذيلُ كما هي، فيرى
   المؤلّفُ سؤالَه في السياق الذي يعرفه لا في لوحٍ غريب.
   ويُنزع منها ما **يكتب** لا ما يُخبر: ختمُ النسخة وقائمتُها وشارةُ الحفظ ودُرجُ
   الأنواع وأزرارُ لسان الفراغ. ويبقى الاسمُ واللغةُ والنوعُ: خبرٌ يُقرأ.
   والذيلُ يُفرَّغ **بالإخفاء لا بالمحو**: ما فيه أفعالٌ كلُّه (المسارُ يُضغط فيُنقل،
   والحلقةُ تُنزل وتنشر)، ويبقى شريطُه بقامته فتحفظ النافذةُ قدَّها — فارغٌ لا محذوف.
   ===== إلّا النازلَ: خبرٌ لا فعل =====
   كانت القاعدةُ صادقةً يوم كُتبت: كلُّ ما في الذيل أفعال. ثمّ نزل إليه في «ن»
   (‎head-crowd-lab‎) **ركنُ أخبار القرّاء** — المشاهداتُ والتعليقات — فصارت القاعدةُ
   تُخفي الخبرَ مع الفعل، وهي إنّما وُضعت لتنزع ما يكتب لا ما يُخبر.
   **والوجهُ أولى الناسِ بهذا الخبر**: الأمُّ الوالدةُ لا تحمله (‎cdMother‎)، فلو حُجب عن
   الوجه أيضًا لَما ظهر لأحد. فيُستثنى وحدَه.
   وكان يُمحى في الشيفرة (‎innerHTML = ''‎) فكان عطبًا: المسرحُ الأصليُّ يُعاد استعمالُه
   ولا يُعاد بناؤه عند الإيقاف (‎cdWinPark‎ يُخفيه ويجرّده من الأصناف لا غير)، فبقي
   ذيلُه ممحوًّا بعد إغلاق المقفلة فوَرِثته البطاقةُ التي بعدها.
   والقاعدة: **لا تكتب في مسرحٍ مشترك ما لا تستطيع ردَّه** — والإخفاءُ يُردّ بصنفٍ يُرفع.
   والقلمُ مرفوعٌ في الشيفرة (‎contenteditable=false‎)، وهذا هنا للشكل لا للمنع */
/* ===== ونوعيّةُ القاعدة تُرفع بالمعرّف =====
   كانت أصنافًا وحدَها، فلمّا صار تخطيطُ الذيل يُكتب بقواعدَ فيها معرّف
   (‎#card-modal .cd-foot .cd-dock‎ وأخواتُها — وهي شبكةُ «ن») غلبته في النوعيّة
   (‎١ معرّف‎ يغلب ‎٤ أصناف‎)، فبقي ما يجب منعُه ظاهرًا في المقفلة.
   مقيسًا: ‎display: flex‎ حيث يجب ‎none‎. فرُفعت بالمعرّف نفسِه لتغلب ما يُكتب للتخطيط —
   **وقاعدةُ المنع أولى بالعلوّ من قاعدة الشكل**: تلك تقول «كيف يُصفّ»، وهذه تقول
   «هل يُعرض أصلًا» */
/* ===== والمستثنى ثلاثةٌ: النازلُ وكتلةُ الوجهة =====
   ‎.cd-stats‎ (المشاهداتُ والتعليقات) استُثني يومَ نزل إليه ركنُ أخبار القرّاء: القاعدةُ
   وُضعت لتنزع ما **يَكتب** لا ما **يُخبر**، والوجهُ أولى الناسِ بالخبر إذ لا تحمله أمُّه.
   ثمّ استُثنيت ‎.cd-fmid‎ (٢١ أغسطس، بطلب صاحب الموقع): حجّتُها كانت «حلقةُ تنزيلٍ
   ومسارٌ في نافذةٍ لا يُكتب فيها حرف» — وهي حجّةٌ على **الكتابة** لا على هذين:
   · **المسارُ خبرٌ** كسائر ما في الشريطين: يقول أين تسكن البطاقة، وبجنبه الأذنُ تفتح
     ورقةَ ملفّها — وكلاهما قراءةٌ محضة. والوجهُ يقرأ خبرَ أمّه كما يقرأ اسمَ صاحبها.
   · **والحلقةُ تنزيلٌ لا كتابة**: القارئُ يرى وجهًا فيريد البطاقةَ، وهذا بابُها. ومنعُها
     عنه إغلاقُ الباب في وجه من دخل من نافذته — والسوقُ إنّما قام على أن تُؤخذ.
   والسلّةُ لا تظهر معهما: مرفوعةٌ من ‎cdFootHTML‎ نفسِها على الوجه (لا عقدةَ له تُحذف).
   ويبقى ‎.cd-dock‎ ممنوعًا — ترسُ «ما يقع عند الحفظ» وجيبُ الحافظة: فعلان لا خبران،
   ولا حفظَ في نافذةٍ مقفلة */
/* ===== ويبقى الختمُ في الوجه: خبرٌ يتبع أمَّه =====
   كان يُنزع مع ما يُنزع، وحجّتُه أنّه بابٌ يُفتح (المروحةُ واختيارُ النسخة). وقد بقي
   البابُ مرفوعًا (‎many‎ في ‎cdVerHTML‎ لا تصدُق على وجه) **وبقي الخبر**: رقمُ النسخة،
   ومعه كعبُها — التحذيرُ والاقتراح. فالوجهُ لا نسخةَ له ولا صيحةَ ولا وردةَ من دون أمّه،
   وإنّما يقرأ خبرَها كما يقرأ اسمَ صاحبها. ولو حُجب لَنظر القارئُ في وجهٍ لا يعرف من
   أيّ نسخةٍ هو ولا أنّ عليه تحذيرًا */
#card-modal .mmodal__card.is-ro .cd-st,
#card-modal .mmodal__card.is-ro .cd-chbar,
#card-modal .mmodal__card.is-ro .cd-foot > *:not(.cd-stats):not(.cd-fmid) { display: none; }
/* ===== ونافذةُ الوجه تحفظ **هندسةَ** الشريط وإن ذهبت أزرارُه =====
   ذهبت من وسط الشريط ثلاثةٌ: الحلقةُ ووصلتُها يمينًا، والسلّةُ وفجوتُها يسارًا. فانكمشت
   كتلةُ الوسط أربعةً وسبعين بكسلًا، وهي متوسّطةٌ في الشريط — فانزاح المسارُ يمينًا
   **سبعةً وثلاثين**، فاتّسعت فجوتُه عن ركن الأخبار بمقدارها. وتلك فجوةٌ معايَرةٌ في
   البطاقة المفردة، فلا يصحّ أن تتبدّل لأنّ زرًّا رُفع.
   فيُحجز موضعُ الذاهبَين حَجْزًا لا رسمًا — حشوةٌ بقدرهما في كلّ طرف:
     يمينًا  ‎--ctl + --gapw‎  (الحلقةُ ووصلتُها · والوصلةُ عرضُها الفعليُّ ‎--gapw‎
             لأنّ هامشَها السالبَ يبتلع العشرين التي تمرّ تحت المسار)
     يسارًا  ‎--ctl + --del-gap‎ (السلّةُ وفجوتُها عن المسار)
   فيقع المسارُ حيث كان بالبكسل، ولا يزحف الشريطُ حين تُفتح نافذةُ الوجه فوق أمّها.
   ولا رقمَ مذوَّقٌ ههنا: المقاديرُ هي مقاديرُ ما رُفع، تتبعه في كلّ معايرة */
#card-modal .mmodal__card.is-ro .cd-fmid {
  padding-inline-start: calc(var(--ctl) + var(--gapw));
  padding-inline-end: calc(var(--ctl) + var(--del-gap));
}
/* ===== ويُخفى الدُّرجُ لا الصفُّ كلُّه =====
   بابُ الإضافة لا معنى له على معاينةٍ مقفلة، فيُطوى. وكان الأمرُ على ‎.cd-dw‎ فيطوي معه
   ألسنةَ المطويّات — فتُغلق نافذةٌ مؤقّتًا ثمّ تُفتح معاينةٌ فيضيع لسانُها ولا سبيلَ
   إلى ردّها. فصار الطيُّ على البابِ وحده (البساطُ ومِقبضُه)، والصفُّ باقٍ بألسنته.
   والمقفلةُ المطويّةُ لا تُحسب: طبقتُها ‎hidden‎ فلا يقع عليها الاختيار */
/* (وطيُّ البابِ مع المعاينة المقفلة رُفع كذلك — الحُجّةُ نفسُها: البابُ للحافّة لا للنافذة) */
/* ============================================================
   وهيئةُ المربّع المقفل (‎cd-lock-lab‎: الإطار أ · الأرضيّة هـ · القفل ب)
   ============================================================
   ثلاثةُ أخبارٍ لا خبرٌ واحد، وكلٌّ يبلغ عينًا غيرَ التي يبلغها أخوه:
   · **الإطارُ يترك الذهب** — والذهبُ في هذه النافذة لغةُ الحياة: يلبسه المربّعُ الذي
     يستقبل حرفَك. فنزعُه خبرٌ يفهمه من يعرف النافذة، بلا رمزٍ ولا كلمة.
   · **والأرضيّةُ تُهشَّر** — عرفُ المساحات المعطّلة في الواجهات كلِّها، يُقرأ من بعيد
     ومن لا يعرف النافذة. وكثافتُه ‎.045‎: أثرٌ يُحسّ ولا يُزاحم الحبر.
   · **والقفلُ في الزاوية السفلى** — يقول الحالَ صراحةً لمن شكّ في الاثنين قبله.
   ولا يزيد شيءٌ منها قدَّ المربّع بكسلًا: الإطارُ داخليّ (‎inset‎) والأرضيّةُ طلاءٌ
   والقفلُ مطلقُ الموضع — فالمقفلةُ والمحرَّرُ يتبادلان في نافذةٍ واحدةٍ بلا قفزة */
/* ===== والقفلُ على المتن وحدَه لا على المربّعين =====
   «الإضافيّ» في هذه النافذة **يُكتب**: هو شرحُ هذا الوجه لا شرحُ أمّه. فلو لبس جِلدَ
   المقفل لَكذب على صاحبه — والجِلدُ خبرٌ لا زينة. فيبقى حيًّا بذهبه إذا كُتب فيه */
.mmodal__card.is-ro { --ro-ink: rgba(255, 255, 255, .62); --ro-hatch: .045; }
html[data-theme="light"] .mmodal__card.is-ro { --ro-ink: rgba(20, 35, 63, .45); }
.mmodal__card.is-ro .cd-field.is-locked {
  box-shadow: inset 0 0 0 1px var(--ro-ink);
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, var(--ro-hatch)) 0 6px, transparent 6px 13px);
}
html[data-theme="light"] .mmodal__card.is-ro .cd-field.is-locked {
  background-image: repeating-linear-gradient(135deg,
    rgba(20, 35, 63, var(--ro-hatch)) 0 6px, transparent 6px 13px);
}
.mmodal__card.is-ro .cd-field.is-locked > .cd-flab { color: var(--ro-ink); }
.mmodal__card.is-ro .cd-field.is-locked > .cd-flab::after {
  box-shadow: inset 0 1px 0 var(--ro-ink),
              inset 1px 0 0 var(--ro-ink),
              inset -1px 0 0 var(--ro-ink);
}
/* والقفلُ في الزاوية السفلى من جهة **نهاية** الكتابة (يسارًا في العربيّة): هناك
   ينتهي السطرُ وتفرغ الزاوية، ولو وُقف في جهة البداية لَجاور أوّلَ الحرف */
/* ===== وأدواتُ الخيارات تسقط في المقفلة =====
   «زيادةُ خيار» و«حذفُه» فعلان لا خبران، فلا موضعَ لهما فيما لا يُحرَّر — وزرٌّ يَعِد
   بفعلٍ لا يقع أسوأُ من زرٍّ لا يكون.
   وشريحةُ الصواب/الخطأ **تبقى تُرى ولا تُضغط**: هي **خبرٌ** يقول أيُّ الخيارات صواب،
   وهو أوّلُ ما جئتَ تقرؤه. فيُرفع عنها الفعلُ ويبقى الرسم — وهو حكمُ ‎.cx-open--ro‎ نفسُه */
.mmodal__card.is-ro .cd-chadd,
.mmodal__card.is-ro .cd-chdel,
.mmodal__card.is-ro .cd-chsep { display: none; }
.mmodal__card.is-ro .cd-chseg { pointer-events: none; }
/* ===== وشارةُ قفل الخيار في وسط حافّته لا في قاعها =====
   الوجهان صندوقان يطولان بالنصّ، فقاعُهما موضعٌ خالٍ أبدًا. والخيارُ سطرٌ واحدٌ
   غالبًا — فشارةٌ في قاعه تقع على حرفه. فتُوسَّط رأسيًّا، ويُحجز لها في طرف المتن
   قدرُها وفُرجتُها (‎13 + 9 + 4‎) فلا يجري النصُّ تحتها */
.mmodal__card.is-ro .cd-chs > .cd-field > .cd-rolock {
  width: 13px; height: 13px; bottom: auto; top: 50%; transform: translateY(-50%);
}
.mmodal__card.is-ro .cd-chs > .cd-field > .cd-in { padding-inline-end: 26px; }
.cd-rolock {
  position: absolute; inset-inline-end: 9px; bottom: 9px;
  width: 15px; height: 15px; color: var(--ro-ink); opacity: .75;
  pointer-events: none;
}
.cd-rolock svg { width: 100%; height: 100%; display: block; }
/* والحقلُ يقول إنّه مقروءٌ بسكونه: لا مؤشّرَ كتابةٍ ولا يدَ إدخال */
.mmodal__card.is-ro .cd-field.is-locked .cd-in { cursor: default; caret-color: transparent; }
/* ولوحُ الأقنعة لا يلتقط يدًا: حارسٌ ثانٍ إلى جانب ‎ioEdit‎ في الشيفرة — ذاك يمنع
   الفعلَ وهذا يمنع **الإيماءَ إليه**، فلا يتحرّك مؤشّرٌ ولا يُظنّ أنّ ثمّ ما يُسحب */
.mmodal__card.is-ro .cd-iolay { pointer-events: none; }
/* ===== و«الإضافيّ» يُرفع من «الفراغ» كلِّه — أمًّا ووجهًا =====
   مربّعٌ ثانٍ لا يُقرأ منه شيءٌ في السؤال ولا في جوابه: متنُ «الفراغ» جملةٌ واحدةٌ
   فيها ما يُخفى وما يُكشف، ولا موضعَ لظهرٍ يُضاف إليها.
   (وجُرّب أن يبقى في نوافذ الأوجه ولكلّ وجهٍ إضافيُّه في خزانةٍ خاصّة — فرُدّ.)
   ولا يمسّ هذا سائرَ الأنواع: الحدُّ ‎.cd-body.is-cz‎ — فالوجهان والمتعدّدُ والإخفاءُ
   على ما هي عليه */
.cd-body.is-cz > .cd-field + .cd-field { display: none !important; }
/* والسمةُ فوق القاعدة: ‎renderCardDlg‎ تضعها على العنصر نفسِه، فلا تسقط بسقوط صنفٍ على
   جسمٍ فوقه. و‎!important‎ لأنّ ‎.cd-field‎ يُعلن ‎display‎ فيغلب قاعدةَ المتصفّح لـ‎[hidden]‎ */
.cd-body > .cd-field[hidden] { display: none !important; }

/* ---------- الطباعة: الورقةُ وحدها، بمقاسها، بلا تصغير ---------- */
@media print {
  /* ===== والمطبوعُ فاتحٌ دائمًا مهما كان الجلدُ على الشاشة =====
     ليس تفضيلًا بل تصحيح: المتصفّحاتُ تُسقط خلفيّاتِ الطلاء عند الطباعة افتراضًا،
     فورقةٌ داكنةٌ تخرج بياضًا عليه حبرٌ فاتح — أي بيضاءَ خاويةً في العين. فتُردّ
     التوكناتُ إلى قيمها الفاتحة عند الطباعة وحدَها، والشاشةُ على حالها */
  body.sh-printing .mmodal__card.is-sheet {
    --shp-bg: #fff; --shp-tx: #14233f; --shp-mut: #5d6b82; --shp-pet: #2c5e65;
    --shp-line: #dfe6ea; --shp-dim: #93a3b4; --shp-ok: #1d6b4f;
    --shp-fill: rgba(44, 94, 101, .16);
  }
  body.sh-printing > * { display: none !important; }
  body.sh-printing #card-modal { display: block !important; position: static !important;
    background: none !important; inset: auto !important; }
  body.sh-printing .cd-stage:not(.sh-print) { display: none !important; }
  body.sh-printing .cd-stage.sh-print { position: static !important; transform: none !important;
    width: auto !important; height: auto !important; }
  body.sh-printing .cd-stage.sh-print .mmodal__card { box-shadow: none !important; border: 0 !important;
    width: auto !important; max-height: none !important; background: none !important; }
  body.sh-printing .cd-meta, body.sh-printing .cd-foot,
  body.sh-printing .cd-rz, body.sh-printing .cd-dw,
  body.sh-printing .sh-zbar { display: none !important; }   /* المِسطرةُ أداةُ شاشةٍ لا تُطبع */
  body.sh-printing .sh-body { overflow: visible !important; padding: 0 !important; background: none !important; }
  body.sh-printing .sh-roll { gap: 0 !important; }
  /* وعند الطباعة تعود الورقةُ إلى جريانها بمقاسها الحقيقيّ: لا تصغيرَ ولا غلافَ محسوب.
     و‎content-visibility‎ يُرفع صراحةً: ما يُطوى عن النظر على الشاشة يجب أن يخرج من الطابعة
     كاملًا — والاعتمادُ على أنّ المتصفّح يكشفه عند الطباعة رهانٌ لا يُراهَن عليه بورقة */
  body.sh-printing .sh-pwrap { width: auto !important; height: auto !important;
    content-visibility: visible !important; contain-intrinsic-size: auto !important; }
  /* و‎--sh-sc‎ يُردّ إلى الواحد عند الطباعة: لا تصغيرَ هنا، فمعكوسُه (‎--sh-hair‎) يجب أن
     يعود بكسلًا تامًّا — ولولا ردُّه لَخرج الخيطُ من الطابعة مضروبًا في مقلوب تصغير الشاشة */
  body.sh-printing .sh-sheet { position: static !important; transform: none !important;
    --sh-sc: 1 !important;
    overflow: visible !important; box-shadow: none !important; break-after: page; }
  /* ===== والأرضيّاتُ تُطبع =====
     المتصفّحُ يُسقط ألوانَ الخلفيّات في الطباعة توفيرًا للحبر — فيخرج عمودُ الأرقام أبيضَ
     بأرقامٍ بيضاء (أي فارغًا)، وتذهب ترويسةُ الجدول وزجاجةُ عمود السؤال. وهذه كلُّها
     **معنًى** لا زينة، فيُطلب إبقاؤها صراحةً */
  body.sh-printing .sh-sheet, body.sh-printing .sh-sheet * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.sh-printing .sh-sheet:last-child { break-after: auto; }
  @page { size: A4; margin: 0; }
}

/* ============================================================
   عدّادُ مجلد البطائق في المحرّر — ثلاثةُ أرقامٍ يفصلها خطّ
   ============================================================
   «كلّ» ثمّ «جذر» ثمّ «تبع»، لكلٍّ حرفُه، ويفصل بينها خيطٌ رأسيّ.
   **ولا مقاسَ موجودٌ يُنقض هنا**: القامةُ والوزنُ والفجوةُ بين الرمز ورقمه والتكبيرُ
   والأرقامُ الجدوليّة كلُّها موروثةٌ من ‎.x3-stat‎ و‎.x3-trio‎ كما عُوِّرت في الموقع.
   وما يُكتب هنا نسبيٌّ (‎em‎) أو جديدٌ لهذا المكوّن وحدَه (الخيطُ وفسحتُه).
   واللونُ واحدٌ للثلاثة ولرمزها معها: موروثٌ من ‎.x3-stat‎ (‎--u-lab‎) — فالتمييزُ
   بالحرف لا باللون، ويبقى الذهبُ في الصفّ لاسم المجلد وحدَه فلا يُزاحَم.
   (وجُرّب أن يلبس «جذر» لونَ مجلده وأن يلبسه الاسمُ معه، فرُدّا: صبغةٌ ثالثةٌ في
   الصفّ تزاحم ولا تُخبر.) */
/* و«كلّ» أكبرُ بمقدارٍ يسير: هو مجموعُ أخويه فيُقرأ رأسًا لهما لا نِدًّا */
.cx-eq__n--all { font-size: calc(1em + 1px); }
/* ============================================================
   الخيطُ الفاصل
   ============================================================
   ===== قامتُه: قدرُ ما يُرى من الحرف، لا قدرُ صندوقه =====
   يتوسّط الصفَّ فينزل تحت خطّ الكتابة بقدر ما يعلوه، فيبلغ رؤوسَ الأرقام ونازلَ
   ‎ج‎ في «جذر» جميعًا. وثلاثُ محاولاتٍ سبقته وقِيست:
   ‎1.05em‎ معلَّقًا بخطّ الكتابة وقف عنده والنازلُ تحته بلا فاصل · ‎1.35em‎ طال حتى
   نبا · و‎stretch‎ بلغ ‎13‎ لأنّه يأخذ **صندوقَ السطر** لا حبرَه، وسطرُ العربيّة
   فضفاضٌ حول حرفه. فالمكتوبُ هنا مقدارٌ مقصود: ‎1.15em‎ ≈ حبرُ السطر نفسُه.
   ===== وسُمكُه: عريضٌ ليّنٌ لا شعرةٌ حادّة =====
   شعرةٌ بعرض بكسلٍ واحدٍ لا تُطلى واحدًا: موضعُها يتبع طولَ اسم المجلد فيقع كسرُها
   مختلفًا، فيَقنِص المتصفّحُ حافّتيها إلى شبكة الجهاز فتصير عمودًا أو عمودين. قِيس
   في ثلاثة تحجيمات: عند ‎100٪‎ عمودٌ واحدٌ دائمًا، وعند ‎125٪‎ و‎150٪‎ يتناوب الواحدُ
   والاثنان — فيختلف الخيطان في الصفّ الواحد. فلا سبيلَ إلى شعرةٍ حادّةٍ متساويةٍ
   على كلّ تحجيم، والمخرجُ تركُ الحدّة: عرضٌ يزيد على البكسل واستدارةٌ تامّة. فالاستدارةُ
   تُخرج الطلاءَ من قنص المستطيلات إلى مسارٍ منعَّم، والمنعَّمُ حبرُه ثابتٌ أينما وقع —
   يتوزّع ولا ينقص. والحبرُ يخفّ بقدر ما زاد العرضُ (‎.24‎ ← ‎.16‎) فيبقى ثِقلُه كما كان.
   ===== والفسحةُ حولَه ثلاثٌ في المواضع الأربعة سواءً =====
   كانت هامشًا على الخيط نفسِه (‎margin: 0 1px‎) يوم كانت الخيوطُ بناتِ ‎.x3-stat‎
   مباشرةً، فيجتمع هامشُها إلى فجوة الصفّ (‎2px‎) فتصير الأزواجُ ثلاثًا. فلمّا أُدخلت
   الخيوطُ وعاءً ثانيًا ليُطوى التفصيلُ جملةً، لم تبلغ فجوةُ ‎.x3-stat‎ إلّا **مبدأ
   الوعاء** — فاتّسع الخيطُ الأوّل وحدَه بثلاثٍ وضاق إخوتُه بواحدة.
   فصارت الفسحةُ اليومَ من موضعين معًا: ‎gap: 3px‎ في صفّ التفصيل يفصل الخيطَ عن
   جارَيه، و‎1px‎ على مبدأ الوعاء تُضاف إلى فجوة ‎.x3-stat‎ فتبلغ الثلاثَ عند الخيط
   الأوّل كذلك. ولا تُمَسّ فجوةُ ‎.x3-stat‎ نفسُها (‎2px‎) كي لا يتباعد الرمزُ عن رقمه */
.cx-eq__bar { flex: none; width: 2px; height: 1.15em; border-radius: 999px;
  background: currentColor; opacity: .16; }
.cx-eq__row { display: flex; align-items: center; gap: 3px; }
.cx-eq__more { margin-inline-start: 1px; }
/* ===== والصفرُ يخفت ولا يغيب — في كلّ عدّادٍ وفي كلّ موضع =====
   موضعُ الطرف في الصفّ خبرٌ، وحذفُه يخلّ بالترتيب ويقفز الصفُّ حين يمتلئ. والقاعدةُ
   على ‎.x3-trio‎ كلِّها لا على ‎.cx-eq‎ وحدَها، فتبلغ العدّادَ في صفّ المجلد وفي عدّاد
   الغلاف سواءً — وتبلغ الغلافَ (‎.x3-stat‎) كما تبلغ الطرفَ (‎.cx-eq__n‎): فإن خلا
   العدّادُ خفَت رمزُه ورقمُه معًا، وإن خلا طرفٌ من ثلاثةٍ خفَت وحدَه */
.x3-trio .is-nil { opacity: .38; }
/* حرفُ الرقم: ابنُه لا جارُه — فيرث لونَه ويُقرأ الزوجُ لونًا واحدًا.
   وقامتُه **نسبيّةٌ** (‎em‎) لا مطلقة، فلا تُثبَّت هنا قيمةٌ تنقض معايرةَ ‎.x3-stat‎ */
/* والفسحةُ بين الرقم ولفظه **نسبيّةٌ** (‎.28em‎ — تُكتب في حال البسط أدناه): هما شيءٌ
   واحدٌ لا شيئان فتقاربُهما يقولها، ولكنّ التصاقَهما يجعلهما كلمةً واحدةً مشوَّهة.
   فبينهما فسحةُ نَفَسٍ لا فجوةُ فصل */
.cx-eq__l { font-style: normal; font-size: .76em; font-weight: 600; white-space: nowrap; }
/* ============================================================
   الساكنُ رقمان، والتفصيلُ ينبسط بقصد
   ============================================================
   الساكنُ كما كان أوّلًا: عدّادُ المجلدات وعددُ البطائق جملةً. فإذا مُرّ على الصفّ
   **أو فُتح المجلد** انبسط لفظُ «كلّ» ومعه «جذر» و«تبع». والفتحُ قصدٌ كالمرور: من
   فتح المجلد فقد سأل عمّا فيه، فيُجاب بلا أن يُبقي مؤشّرَه عليه — **ثلاثَ ثوانٍ ثمّ
   ينطوي** (انظر ‎.is-peek‎ في ذيل هذه الكتلة)، والمرورُ وحدَه يبقى ما بقيت اليد.
   والطيُّ **بالعرض** لا بالإخفاء: ‎.x3-fwrap‎ عرضُه من محتواه والخطُّ مرسومٌ عليه، فلو
   أُخفي المطويُّ وبقيت مساحتُه لَامتدّ الخطُّ تحت فراغ. وبالطيّ ينكمش الغلافُ إلى ما
   يُرى فينتهي الخطُّ بمحاذاته، ثمّ يمتدّ معه إطارًا إطارًا.
   ===== والمنتهى ‎auto‎ لا مقدارٌ مكتوب =====
   كان ‎max-width‎ ينتقل من صفرٍ إلى مقدارٍ مكتوبٍ يجاوز المحتوى كثيرًا: ‎5em‎ للفظٍ
   عرضُه ‎1.2em‎، و‎14em‎ لتفصيلٍ عرضُه ‎4.3em‎. فينتهي الانكشافُ في أوّل الرُبع وتبقى
   ثلاثةُ أرباع المدّة سكونًا — فيُرى قفزةً ثمّ وقفةً لا انبساطًا. وكان الحدُّ المكتوب
   خطرًا ثانيًا: لو طال اللفظُ يومًا (لغةٌ أو خطٌّ أو قياس) قُصّ في حال السكون.
   فالانتقالُ اليومَ ‎width: 0 ⇄ auto‎ بـ‎interpolate-size: allow-keywords‎ — ينتهي
   إلى **عرض المحتوى نفسِه**: فالمدّةُ كلُّها حركةٌ موزونة، ولا رقمَ يُعاير، ولا يُقصّ
   لفظٌ في حال السكون بحال. (وجُرّب عمودُ شبكةٍ ‎0fr ⇄ 1fr‎ فلم ينكمش: الوعاءُ عرضُه
   من محتواه فلا فضاءَ يقسمه ‎fr‎ — وإنّما تلك حيلةُ الارتفاع لا العرض.)
   والخاصّةُ موروثة، فتُكتب على ‎.cx-eq‎ وحدَها لا على الجذر.
   والحبرُ يتأخّر عن العرض (‎.05s‎): تُفتح المساحةُ أوّلًا ثمّ يحلّها اللفظُ — فيُقرأ
   ظهورًا لا وميضًا.
   والقصرُ على شجرتَي البطائق (‎.cx-tree‎ و‎.cx-ro‎): «الشروح» أختُهما في الشكل لا في
   هذا الحكم */
.cx-eq { interpolate-size: allow-keywords; }
.cx-eq__more, .cx-eq__l {
  display: inline-flex; width: 0; overflow: hidden; opacity: 0;
  transition: width .26s cubic-bezier(.2, .8, .3, 1), opacity .18s ease .05s;
}
/* ===== والمطويُّ يُقَصّ ولا يُعصَر =====
   الوعاءُ المطويّ يَعصِر بنيه قبل أن يقصّهم: ينكمشون (‎flex-shrink: 1‎ افتراضًا) تحت
   عرضهم الطبيعيّ. وكان الرقمُ يُعصَر حتى لا يسع لفظَه إلى جانبه — واللفظُ صندوقٌ
   ذرّيٌّ يجوز الكسرُ قبله بلا فراغ — فينزل سطرًا ثانيًا، فيصير العدّادُ ‎22px‎ بدل
   ‎11‎، فينتفخ صفُّ المجلد ويهبط الاسمُ نصفَ الفرق ثمّ يعود. وهو الذي كان يُرى
   **هبوطًا ثمّ رجوعًا** في أوّل الانتقال وحدَه، لأنّ حالَي السكون والبسط كلتيهما تسعان.
   فلكلّ مطويٍّ ابنٌ واحدٌ يحمل محتواه بقامته وقدّه (‎flex: none‎)، و‎overflow‎ يقصّ ما
   جاوز الحدّ: ستارٌ ينكشف عن نصٍّ تامّ لا نصٌّ يُعصر ثمّ يُفرَج عنه. وبهذا الابن يبقى
   العصرُ ممنوعًا في طبقةٍ واحدة، فلا تُلاحق كلُّ حفيدٍ بقاعدة.
   و‎nowrap‎ على الرقم حارسٌ ثانٍ: الرقمُ ولفظُه شيءٌ واحد */
.cx-eq__row, .cx-eq__lw { flex: none; }
.cx-eq__n { white-space: nowrap; }
/* ولفظُ «كلّ» يطوي فسحتَه معه، وإلّا بقي بعد الرقم فراغٌ لا شيءَ فيه */
.cx-eq__l { margin-inline-start: 0;
  transition: width .26s cubic-bezier(.2, .8, .3, 1),
    margin-inline-start .26s cubic-bezier(.2, .8, .3, 1), opacity .18s ease .05s; }
/* ‎.cx-ro‎ مع ‎.cx-tree‎: شجرتا البطائق كلتاهما. والانبساطُ خبرٌ عن المجلّد لا أداةَ
   تحرير — «كم فيه · كم في جذره · كم في تَبَعِه» سؤالُ القارئ كسؤال صاحبه. و«الشروح»
   خارجةٌ كما كانت: أختُها في الشكل لا في هذا الحكم */
/* ===== والفتحُ صار لحظةً لا حالًا =====
   كان الرابعُ ‎.x3-st.on > .x3-hd‎: ما دام المجلدُ مفتوحًا بقي تفصيلُه منبسطًا. وهو في
   التحرير حكمٌ على العمود كلِّه، إذ المجلداتُ تُولد مفتوحة — فلا يبقى للساكن ساكن.
   فحلّ محلَّه ‎.is-peek‎: صنفٌ يكتبه ‎cxHold‎ في **قالب** الرأس المضغوط فيُولد به،
   ويُنزع بعد ثلاثٍ في الفتح وعند أوّل حركةِ مؤشّرٍ في الطيّ. فيُجاب السائلُ ثمّ يُصمت.
   وميلادُه به لا لبسُه بعد الرسم: الوليدُ لا انتقالَ له، فلو لُبس بعدُ لَانبسط حركةً
   وهو منبسطٌ أصلًا تحت المؤشّر — فتُرى ومضةً بلا سبب. والنزعُ وحدَه انتقالٌ، إذ
   العنصرُ حينئذٍ قائمٌ لم يُعَد بناؤه.
   والمرورُ بالمؤشّر باقٍ على حاله بابًا مفتوحًا في كلّ وقت: يُظهر ما دامت اليدُ عليه
   وينطوي بذهابها. وهما بابان إلى مشهدٍ واحد، فالقاعدةُ واحدةٌ لا قاعدتان */
:is(.cx-tree, .cx-ro) .x3-hd:hover .cx-eq__more,
:is(.cx-tree, .cx-ro) .x3-hd:focus-within .cx-eq__more,
:is(.cx-tree, .cx-ro) .x3-hd.is-sel .cx-eq__more,
:is(.cx-tree, .cx-ro) .x3-hd.is-peek .cx-eq__more { width: auto; opacity: 1; }
:is(.cx-tree, .cx-ro) .x3-hd:hover .cx-eq__l,
:is(.cx-tree, .cx-ro) .x3-hd:focus-within .cx-eq__l,
:is(.cx-tree, .cx-ro) .x3-hd.is-sel .cx-eq__l,
:is(.cx-tree, .cx-ro) .x3-hd.is-peek .cx-eq__l {
  width: auto; opacity: .6; margin-inline-start: .28em; }
@media (prefers-reduced-motion: reduce) {
  .cx-eq__more, .cx-eq__l { transition: none; }
}

/* ============================================================
   فقاعةُ التعليقات — ما قاله القرّاء في هذه البطاقة
   ============================================================
   المرسى اختيرَ من ‎Desktop\RE\cmt-dock-lab‎ (عشرةُ مراسٍ): **الفقاعة**. وحجّتُها أنّ
   الترويسة خبرٌ عن البطاقة وهذا خبرٌ منها، فلا يُقتطع من قياس الكتابة شيءٌ أبدًا لأجل
   نظرةٍ عابرة — والشقُّ في نافذةٍ عرضُها ‎720‎ يترك للوجه ‎≈400‎، وذلك ثمنٌ يُدفع في كلّ
   بطاقةٍ لا في ساعة النظر وحدها.
   والجلدُ والهندسةُ جلدُ مروحة النسخ (‎.cd-fan‎) وهندستُها: هما لوحان يتدلّيان من الشريط
   نفسِه، فلو افترقا سطحًا أو انحناءً لَقُرئا نظامين في صفٍّ واحد. ============================================================ */
/* والقصُّ يُرفع ما دامت الفقاعةُ مفتوحة — كما يُرفع للمروحة سواءً بسواء
   (‎overflow: hidden‎ في ‎.cd-mid‎ أفقيٌّ في غرضه، ويقصّ الرأسيَّ معه بالضرورة) */
#card-modal .cd-meta .cd-mid:has(.cd-cmt) { overflow: visible; }
.cd-cmta { position: relative; display: inline-flex; align-items: center; }
/* ===== والصندوقُ الحرُّ: حاملٌ بقدِّ أيقونته يُثبَّت في الوثيقة =====
   لا يسكن الشجرةَ لأنّ صفوفَها في حاوياتٍ تُمرَّر ويُقصّ ما خرج عنها فتُبتر الفقاعة.
   ويُقَدُّ بقدِّ الأيقونة ويوضع مكانها، فتقرؤه الفقاعةُ مِرساةً كما تقرأ زرَّ النافذة —
   ‎cdCmtFit‎ واحدةٌ للبابين بلا حسابٍ ثانٍ.
   و‎pointer-events:none‎ على الحامل وحدَه: هو مستطيلٌ فوق الأيقونة، فلولا ذلك لَابتلع
   ضغطتَها فلا تنطوي أبدًا. والفقاعةُ في جوفه تردّها إلى نفسها */
.cd-cmta--free { position: fixed; z-index: 130; pointer-events: none; }
/* والنسبُ لا يُطلب ‎>‎ ههنا: بين الحامل والفقاعة غلافُ الجلد (‎.xt-skin‎)، وهو يذوب
   في **الصندوق** لا في الشجرة — فالبنوّةُ في الوسم باقيةٌ ولو ذاب رسمُه */
.cd-cmta--free .cd-cmt { pointer-events: auto; }
/* ===== وتوكناتُ النافذة تُعرَّف عليه: هو خارجَ حاملها =====
   ‎--cd-*‎ تسكن ‎#card-modal‎، والصندوقُ ابنُ ‎body‎. واستعمالُ توكنٍ خارج حامله يُحلّ
   إلى **لا شيء**: الأرضيّةُ لا تُرسم فتبدو الفقاعةُ شفّافة — خطأٌ صامتٌ لا يصيح به
   لا الجلدُ ولا النحو (وهو ما وقع، وله حارسٌ في ‎_xt-tokens.py‎).
   ولا يُلحق الصندوقُ بالحامل: ذاك يجرّ معه ‎display:flex‎ وأرضيّةَ العتمة وعشراتِ
   التوكنات لجسمٍ يحتاج خمسة. فتُعرَّف بالقيم نفسِها في الجلدين — وهو عينُ ما كانت
   تفعله ‎.vcm‎ قبل أن تُطرح، وقد نُقلت قيمُها كما هي.
   وأمّا ‎--u-*‎ فلا تُنسخ: تُلبَس من ‎.xt-skin‎ غلافًا في جوف الصندوق (‎app.js‎) */
.cd-cmta--free {
  --cd-pan: #1d3036; --cd-winline: #25403f; --cd-shade: rgba(0, 0, 0, .38);
  --cd-tx: #eef5f6; --cd-mut: #bcd3d8;
  /* و‎--cd-surf‎ سادستُها: أرضيّةُ حقل الردّ في جوف الصفّ (‎.cdc__rein‎). ولم تكن في
     ‎.vcm‎ لأنّ تلك قرائيّةٌ لا حقلَ فيها — وهذه تردّ، فتلزمها. وجدها حارسُ
     ‎_cmt-scope.py‎ ولم تجدها العين: حقلٌ شفّافٌ لا يُرى إلّا بعد ضغطة «ردّ» */
  --cd-surf: #26363a;
}
html[data-theme="light"] .cd-cmta--free {
  --cd-pan: #f7fafa; --cd-winline: #dbe6e6; --cd-shade: rgba(20, 35, 63, .22);
  --cd-tx: #35455c; --cd-mut: #5d6b82; --cd-surf: #f3f6f6;
}
/* واسمُ البطاقة فوق التعليق في القائمة المجموعة: هناك الكلامُ من بطائقَ شتّى */
.cdc__of {
  font-style: normal; font-size: 10px; font-weight: 700; color: var(--u-gold);
  max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* الأيقونةُ صارت زرًّا، ولا تخرج بذلك عن صفّ أخواتها: تلبس ‎.cd-stat‎ نفسَه
   ويُنزع عنها جلدُ الأزرار وحدَه */
.cd-stat--cmt {
  font: inherit; cursor: pointer; border: 0; background: none; color: inherit;
  padding: 3px 7px; margin: -3px -4px; border-radius: 8px; transition: background .15s, color .15s;
}
.cd-stat--cmt:hover { background: var(--u-hov); }
/* والمفتوحةُ تتذهّب: الذهبُ في هذا الموقع علامةُ «هذا هو المفتوح» — كما في التبويب
   الحيّ وجدولِ الحقل. ولا تُقلب إلى سطحٍ مصمتٍ ملوّن كي لا تصير زرَّ فعلٍ في شريط أخبار */
.cd-stat--cmt.on { color: var(--u-gold); background: var(--u-gold-hov, rgba(225, 193, 114, .14)); }
.cd-stat--cmt.on b { color: var(--u-gold); }

/* ===== اللوح: يتدلّى من الأيقونة وينفتح إلى **اليسار** =====
   كان طرفُه المبدئيُّ عند الزرّ فيمتدّ يمينًا — أي تحت الأيقونة وما بعدها في جهة القراءة،
   فيُقرأ معلَّقًا على الشريط كلِّه لا على زرٍّ بعينه. فقُلب: طرفُه **المنتهي** عند الزرّ
   (‎inset-inline-start‎، وهي في التخطيط اليمينيّ ‎right‎)، فتقع زاويتُه اليمنى العليا
   عند الأيقونة ويمتدّ جسمُه يسارًا ونازلًا — فيُعرف من أيّ زرٍّ خرج بلا سهمٍ يقوله.
   والعشرةُ الزائدةُ تُخرج طرفَه قليلًا عن الزرّ فلا يُقرأ ملتصقًا بحرفه */
/* ===== جلدُها جلدُ النافذة، لا جلدُ المروحة =====
   كانت تلبس سطح المروحة (‎#17313a‎) وحدَّها (‎--u-in-line‎)، وذاك رماديٌّ مزرقٌّ من عائلةٍ
   أخرى: النافذةُ في الداكن ‎#16272b‎ وشريطاها ‎#1d3036‎ وحقولُها ‎#26363a‎ — خُضرةٌ مسودّة.
   فكانت الفقاعةُ تُقرأ لوحًا غريبًا حطّ على النافذة لا جزءًا منها.
   فصارت تأخذ **توكناتِ النافذة نفسَها**: سطحُها ‎--cd-pan‎ (سطحُ الشريطين — وهي تتدلّى
   منهما فتُقرأ امتدادًا لهما)، وحدُّها ‎--cd-winline‎، وحقلُها ‎--cd-surf‎ كحقول البطاقة.
   وبهذا يصحّ الجلدان معًا بلا قاعدةٍ ثانيةٍ للداكن: التوكناتُ هي التي تنقلب */
.cd-cmt {
  position: absolute; top: calc(100% + 9px); inset-inline-start: -10px; inset-inline-end: auto;
  z-index: 30; width: min(340px, 74vw);
  display: flex; flex-direction: column; max-height: 46vh;
  background: var(--cd-pan); border: 1px solid var(--cd-winline); border-radius: 13px;
  /* ===== وظلٌّ أخفُّ ممّا كان =====
     كان ‎34px‎ ضبابًا: مساحةٌ واسعةٌ يُعاد حسابُها في كلّ إطارٍ وهي تُسحب، وحبرٌ ثقيلٌ
     على لوحٍ صغير. فرُدَّ إلى ‎22‎ وخُفّف حبرُه — يقول «فوق» ولا يصيح */
  box-shadow: 0 10px 22px -10px var(--cd-shade, rgba(0, 0, 0, .3));
  /* الجوفُ يُقصّ بالانحناء نفسِه، والسهمُ خارجَه — فيُعلَّق بالمِرساة لا باللوح */
  overflow: hidden;
}
/* ===== وتنقلب إلى أعلى إن ضاق ما تحتها =====
   كان زرُّها في الترويسة، فتتدلّى تحته على **جسم البطاقة** — وذاك موضعٌ لا يضيق.
   ثمّ نزل الزرُّ إلى ركن التذييل (‎head-crowd-lab#n‎)، فصار ما تحته حافّةَ النافذة ثمّ
   حافّةَ الشاشة: تخرج الفقاعةُ من النافذة وتقف على العتمة، وربّما خرج بعضُها عن الشاشة
   فلا يُبلَغ حقلُ الكتابة في قاعها.
   فصارت تنقلب إلى أعلى حين يضيق ما تحتها — وهي القاعدةُ القائمةُ أصلًا في **قائمة
   الوجهات** في هذا الشريط نفسِه (‎.cd-list.is-up‎)، فلا يُستحدث عرفٌ ثانٍ لشيءٍ واحد.
   والقلبُ يقيسه ‎cdCmtFit‎: لا يُقلب إلى ما هو أضيق، فإن لم يسعها ما فوقها بقيت مكانها */
.cd-cmt.is-up { top: auto; bottom: calc(100% + 9px); }
/* ===== وأثناء السحب وحدَه: لا ظلَّ ورفعٌ إلى طبقة =====
   الظلُّ ضبابٌ يُعاد رسمُه في كلّ إطار، ولا تُبصره العينُ وهي تتبع اللوح — فيُقطع
   ثمّ يعود برفع اليد. و‎will-change‎ **مقصورٌ على السحب** لا مكتوبٌ أبدًا: الدائمُ
   يرفع العنصرَ طبقةً تُحجز في الذاكرة ما دام، ويجعله **جذرَ ضباب** فيموت أيُّ
   ‎backdrop-filter‎ يولد في جوفه يومًا — وهي علّةٌ مقيسةٌ في هذا الملفّ */
.cd-cmt.is-drag { box-shadow: none; will-change: transform; }
/* ===== وترويسةُ الفقاعة: مِقبضُ نقلها =====
   شريطٌ في رأسها كترويسة النافذة: اسمٌ وزرُّ إغلاق، وما بينهما مِقبضٌ يُمسك.
   و‎flex: none‎ فلا تنكمش حين يطول الخيطُ تحتها، وحدُّها السفليُّ يفصلها عن قائمتها.
   و‎cursor: grab‎ يقول إنّها تُمسك قبل أن تُجرَّب — ثمّ ‎grabbing‎ على الجسم أثناء السحب،
   فلا يتبدّل المؤشّرُ إذا خرجت اليدُ عن الشريط وهي ممسكة.
   و‎user-select: none‎ وإلّا ظلّل السحبُ اسمَها بدل أن ينقلها */
.cd-cmt__hd {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 8px; border-bottom: 1px solid var(--cd-winline);
  cursor: grab; user-select: none;
}
.cd-cmt__hd b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font: 700 11px 'IBM Plex Sans Arabic', sans-serif; color: var(--cd-mut); }
.cd-cmt__x {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  border: 0; background: none; border-radius: 6px; cursor: pointer;
  color: var(--cd-mut); font-size: 12px; line-height: 1;
}
.cd-cmt__x:hover { background: var(--u-hov); color: var(--cd-tx); }
/* ===== ورُفع السهم: إطارٌ مصمتٌ لا غير =====
   كان مربَّعًا بحدَّين (‎top‎ و‎right‎) يدور ‎45°‎ فيصير مثلَّثًا يُلصق بحافّة اللوح العليا.
   وحسابُ اللفّ كان مقلوبًا: الزاويةُ المشتركةُ بين الحدَّين تشير أصلًا إلى أعلى-اليمين
   (‎+1,-1‎)، فلفٌّ ‎45°‎ **مع** عقارب الساعة يردّها إلى اليمين المستقيم — فيُقرأ اللوحُ
   وعلى حدّه «‎>‎» كأنّه شقٌّ في الإطار لا ذيلٌ يشير إلى صاحبه. (وصوابُه ‎-45deg‎.)
   ولم يُصحَّح بل رُفع: اللوحُ صار طرفُه عند الزرّ (فوقُ)، والقربُ يقول ما كان السهمُ
   يقوله — فبقي حدٌّ واحدٌ مصمتٌ حول الفقاعة، وهو ما طُلب */

/* ===== ولا ترويسةَ لها =====
   كان فوقها صفٌّ فيه رمزُ التعليقات ولفظُها وعددُها و«✕». وثلاثتُها تكرارٌ: الرمزُ والعددُ
   مكتوبان في الزرّ الذي تتدلّى منه على بُعد تسعة بكسلات، واللفظُ يقوله الرمز. و«✕» بابٌ
   ثانٍ لِما يقع بضغطةٍ في أيّ مكان. فرُفع الصفُّ كلُّه وصارت الفقاعةُ كلامًا لا صندوقًا
   عليه لافتة. وحشوُ رأس القائمة يزيد قليلًا: لا خطَّ فوقها يفصلها عن السهم */
.cd-cmt__list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 8px 8px; display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin; scrollbar-color: var(--u-in-line) transparent;
}
.cd-cmt__list::-webkit-scrollbar { width: 9px; }
.cd-cmt__list::-webkit-scrollbar-track { background: transparent; }
.cd-cmt__list::-webkit-scrollbar-thumb {
  background: var(--u-in-line); border-radius: 999px;
  border: 2.5px solid transparent; background-clip: padding-box;
}
.cd-cmt__none { margin: 0; padding: 26px 12px; text-align: center; font-size: 11.5px; color: var(--u-lab); }

/* الصفّ: صورةُ صاحبه عمودٌ يمينه واسمُه فوق متنه — تشريحُ كومنتات الموقع نفسُه
   (‎post-yt‎) مصغَّرًا لجوف الفقاعة، فلا يُتعلَّم شكلٌ ثانٍ للشيء الواحد */
.cdc { display: flex; gap: 9px; padding: 8px; border-radius: 9px; transition: background .15s; }
.cdc:hover { background: var(--u-hov); }
/* والأبُ لا يُضاء بمرورٍ على ابنه: الردُّ ابنُ صفِّ أبيه في الشجرة، فالمرورُ عليه مرورٌ
   على أبيه بالضرورة — فيُطفأ الأبُ ما دام المؤشّرُ في ردٍّ تحته، وإلّا أُضيء صفّان لموضعٍ واحد */
.cdc:has(.cdc:hover) { background: none; }
.cdc__av {
  width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden;
  background: var(--u-av); display: grid; place-items: center; color: var(--u-lab);
}
.cdc__av img, .cdc__av svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.cdc__main { flex: 1; min-width: 0; }
.cdc__top { margin: 0 0 2px; display: flex; align-items: baseline; gap: 6px; font-size: 10px; color: var(--u-lab); }
.cdc__top b { color: var(--u-tx-strong, var(--cd-tx)); font-size: 11.5px; font-weight: 700;
  max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdc__tx { margin: 0; font-size: 12px; line-height: 1.75; color: var(--u-tx); overflow-wrap: anywhere; }
/* ===== صفُّ الفعلين: «مفيد» ثمّ «ردّ» =====
   والإبهامُ إبهامُ المساهمات بجسمه (‎.post-thumb‎) لا رسمًا يُشبهه: يرث لونَ حالِه
   (‎--up.on‎ بتروليٌّ في الفاتح ومزرقٌّ في الداكن) وحشوَه وانتقالَه، فلا تفترق يدُ
   الموقع في شيءٍ واحد. وما يُكتب ههنا قدُّه وحدَه: الفقاعةُ أضيقُ من لوح المساهمات.
   و«الردّ» يسارَه — أي بعدَه في الكتابة، فهو في جهة القراءة على يساره */
.cdc__acts { margin-top: 4px; display: flex; align-items: center; gap: 13px; }
.cdc__lk.post-thumb { font-size: 10.5px; gap: 4px; }
.cdc__lk.post-thumb svg { width: 13.5px; height: 13.5px; }
.cdc__lk .tb-n { font-variant-numeric: tabular-nums; }
/* ===== و«ردّ» لفظٌ لا رمز =====
   كان سهمًا عاريًا، والرمزُ في هذا الموضع يحتاج تعلُّمًا: هو صغيرٌ بجنب إبهامٍ يشبهه
   في القدّ، وليس له عرفٌ واحدٌ في الشبكة. واللفظُ لا يحتاج تعلُّمًا ولا يزيد في القدّ
   إلّا خمسةَ حروف — وهو صنيعُ يوتيوب في الموضع نفسِه.
   وحبرُه حبرُ جاره لا لونٌ ثانٍ، وحشوُه رقاقةٌ تُضاء بالمرور فيُعرف أنّه يُضغط */
.cdc__rp {
  display: inline-flex; align-items: center; padding: 3px 9px; margin: -3px 0;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-family: inherit; font-size: 10.5px; font-weight: 700; line-height: 1;
  color: var(--u-mut); transition: color .14s, background .14s;
}
.cdc__rp:hover { color: var(--u-tx-strong); background: var(--u-hov); }
.cdc__rp.on { color: var(--u-gold); background: var(--u-gold-hov, rgba(225, 193, 114, .14)); }

/* ===== «ن ردود»: الخيطُ مطويٌّ خلف عدده =====
   والشيفرونُ قبل اللفظ يقول «يُبسط»، ولا يُقلب مع اللغة — الرأسيُّ لا جهةَ له.
   وحبرُه بترولِيٌّ لا رماديّ: هو خبرٌ **وفعلٌ**، فيُفرَّق من سطور الخبر الساكنة حوله */
.cdc__more {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; margin-inline-start: -9px; border: 0; border-radius: 999px;
  background: none; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--c-kfupm); transition: background .14s;
}
html[data-theme="dark"] .cdc__more { color: #8fc7cf; }
.cdc__more:hover { background: var(--u-hov); }
.cdc__more svg { width: 13px; height: 13px; display: block; }

/* ===== وصفٌّ له خيطٌ يُضغط كلُّه =====
   «ن ردود» بابٌ صغيرٌ في صفٍّ عريض، فالصفُّ كلُّه بابُه معه — والمؤشّرُ يقول ذلك.
   ولا يُوسم بالمؤشّر إلّا ذو الردود في القائمة: صفٌّ بلا خيطٍ ضغطُه لا يفعل شيئًا */
.cdc--open { cursor: pointer; }

/* ===== شريطُ الرجوع: فوق الخيط المبسوط =====
   لاصقٌ في رأس القائمة لا يمضي مع التمرير: الخروجُ من الخيط يجب أن يكون في متناول
   اليد حيث بلغت، لا في رأسٍ تركتَه فوق عشرين ردًّا.
   وسطحُه سطحُ الفقاعة **مصمتًا** (لا شفّافًا) وإلّا مرّ الكلامُ تحته فقُرئ سطرين متراكبين */
.cd-cmt__bk {
  position: sticky; top: 0; z-index: 2; margin: -10px -8px 4px; padding: 8px 10px 6px;
  background: var(--cd-pan); border-bottom: 1px solid var(--cd-winline);
}
.cd-cmt__bk button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; margin-inline-start: -9px; border: 0; border-radius: 999px;
  background: none; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--u-mut); transition: color .14s, background .14s;
}
.cd-cmt__bk button:hover { color: var(--u-gold); background: var(--u-hov); }
.cd-cmt__bk svg { width: 14px; height: 14px; display: block; }

/* ===== الردود: خيطٌ مزاحٌ عن أبيه بخطٍّ يجمعه =====
   الإزاحةُ من جهة البدء (يمينًا في العربيّة) والخيطُ في مبدئها: به يُعرف أين ينتهي
   الخيطُ وأين يعود الكلامُ إلى الجذر، بلا إطارٍ يُحيط ولا سطحٍ يُصبغ.
   ومستوًى واحدٌ لا غير — فلا إزاحةَ تتراكم حتى يصير المتنُ عمودًا من حرفين */
.cdc__kids {
  margin-top: 7px; padding-inline-start: 9px;
  border-inline-start: 1.5px solid var(--cd-winline);
  display: flex; flex-direction: column; gap: 2px;
}
.cdc--re { padding: 6px; }
.cdc--re .cdc__av { width: 22px; height: 22px; }
.cdc--re .cdc__tx { font-size: 11.5px; line-height: 1.7; }

/* حقلُ الردّ: في ذيل الخيط لا جنبَ الزرّ — فما يُكتب يقع حيث سيظهر.
   وزرُّه ذهبٌ عارٍ كزرّ الحقل الأسفل: هما فعلٌ واحد، فلا يفترق شكلُهما */
.cdc__re { display: flex; align-items: center; gap: 7px; padding: 6px 6px 2px; }
.cdc__rein {
  flex: 1; min-width: 0; font: inherit; font-size: 11.5px; color: var(--u-tx);
  background: var(--cd-surf); border: 1px solid var(--cd-winline); border-radius: 8px; padding: 6px 9px;
}
.cdc__rein::placeholder { color: var(--u-ph, var(--u-lab)); }
.cdc__rein:focus { outline: none; border-color: var(--u-gold-dash); }
.cdc__resend {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--u-gold);
  transition: opacity .15s;
}
.cdc__resend:hover { opacity: .75; }
.cdc__resend svg { width: 15px; height: 15px; display: block; }

/* الردّ: سطرٌ واحدٌ في قاع الفقاعة — صاحبُ البطاقة يجيب من حيث قرأ */
.cd-cmt__wr {
  flex: none; display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-top: 1px solid var(--u-line);
}
.cd-cmt__wr input {
  flex: 1; min-width: 0; font: inherit; font-size: 11.5px; color: var(--u-tx);
  background: var(--u-in-bg); border: 1px solid var(--u-in-line); border-radius: 8px; padding: 7px 10px;
}
.cd-cmt__wr input::placeholder { color: var(--u-ph, var(--u-lab)); }
.cd-cmt__wr input:focus { outline: none; border-color: var(--u-gold-dash); }
/* ===== وزرُّ الإنزال أيقونةٌ عاريةٌ لا مربَّع =====
   كان مربَّعًا بترولِيًّا ‎30×30‎ بحرفٍ أبيض. وهو في صفٍّ ليس فيه سطحٌ مصمتٌ غيرُه —
   لا في الفقاعة ولا في الشريط الذي تتدلّى منه — فكان يُقرأ زرَّ حفظٍ حطّ في آخر خيط.
   فرُفع سطحُه وبقيت الطائرةُ ذهبًا: الذهبُ في هذه النافذة لغةُ «ههنا يقع حرفُك»،
   وهي على الحقل الحيّ والمِقبضِ المطويّ سواء */
.cd-cmt__wr button {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  padding: 0; border: 0; background: none; color: var(--u-gold); cursor: pointer;
  transition: opacity .15s;
}
.cd-cmt__wr button:hover { opacity: .75; }
.cd-cmt__wr button svg { width: 17px; height: 17px; display: block; }
/* ===== والطائرةُ تُقلب مع لغة القراءة =====
   رُسمت متّجهةً إلى **جهة المنتهى في اللاتينيّة** (يمينًا)، وذاك خلفُ القارئ في العربيّة:
   الحرفُ يجري يمينًا-يسارًا، فالإرسالُ يمضي يسارًا. وسهمُ الردّ مثلُها — يعود إلى ما
   قبله، وما قبله في العربيّة يمين. فتُقلبان بقاعدةٍ واحدة.
   و‎:not([data-lang="en"])‎ لا ‎[data-lang="ar"]‎: السمةُ تُكتب بعد الإقلاع (‎applyLang‎)،
   فما بين رسم الصفحة وكتابتها لا سمةَ أصلًا — والعربيّةُ هي الأصل، فيُستثنى الطارئ */
html:not([data-lang="en"]) .cd-cmt__wr button svg,
html:not([data-lang="en"]) .cdc__resend svg,
html:not([data-lang="en"]) .cd-cmt__bk svg { scale: -1 1; }

/* ===== وتوكناتُ الاختبار انتقلت إلى حاملها =====
   كانت على ‎#xt-modal‎ — ستارِ النافذة — وقد ذهب الستارُ يومَ سكنت صدَفةَ البطائق.
   فتُكتب على ‎.xt-skin‎: هي الحاملُ الملحَقُ بكتلتَي توكنات الموقع أصلًا (‎السطر 1122‎)،
   فيجتمع لجوف الاختبار ‎--u-*‎ من هناك و‎--xt-*‎ من ههنا في عنصرٍ واحد.
   والمُنتقي ‎#card-modal .xt-skin‎ لا ‎.xt-skin‎ وحدَها: تلك اسمٌ في قائمة الحاملين
   (‎السطر 1122‎)، فلو تشابه المُنتقيان لَالتبس على الحارس أيُّهما كتلةُ الاختبار */
#card-modal .xt-skin {
  /* المقاسات المعايَرة في مختبر RE\exam-types-lab — تُقرأ من «القيم للشحن» حرفا بحرف */
  --xt-w: 760px; --xt-wh: 46px; --xt-wf: 50px; --xt-axh: 40px; --xt-tgar: 9px;
  --xt-colh: 168px; --xt-hdf: 17px; --xt-gap: 9px; --xt-pad: 10px; --xt-hd: 9px;
  --xt-num: 36px; --xt-nkd: 5; --xt-r: 12px;
  /* استدارةُ زرّ «ابدأ» — معايَرةٌ في ‎xt-go-lab‎، وعلى الحامل كأخواتها فتُعاير من موضعٍ واحد */
  --xt-gr: 20px;
  /* ===== هندسةُ النافذة: تُكتب من اليد لا من قاعدة =====
     ‎--xt-dx/--xt-dy‎ إزاحتُها عن مركز الستار، و‎--xt-uw/--xt-uh‎ مقاسُها حين تُوسَّع.
     وتُعلَن ههنا وإن كانت اليدُ هي التي تكتبها: عقدٌ مصرَّحٌ خيرٌ من قيمةٍ تظهر فجأةً
     في نمطٍ سطريّ، وحارسُ ‎_xt-tokens.py‎ يطلبها في الحامل — ومطلبُه في محلّه */
  --xt-dx: 0px; --xt-dy: 0px; --xt-uw: auto; --xt-uh: auto;
  /* ===== ألوانُ أعلام السؤال — ستٌّ من توكنات الموقع لا أرقامٌ تُخترع =====
     خمسٌ منها تنقلب مع الجلد من نفسِها لأنّها توكناتٌ قائمة. والبتروليُّ وحدَه صريحٌ:
     ‎--brand-tx‎ لا يُعرَّف في الجلد الفاتح (الموقعُ يستعمل ‎--c-kfupm‎ مكانه) */
  --xt-fl1: var(--xt-no); --xt-fl2: #d1791f; --xt-fl3: var(--xt-gold);
  --xt-fl4: var(--xt-ok); --xt-fl5: #7fb3bb; --xt-fl6: var(--u-like);
  /* والكهرمانيُّ صريحٌ كالبتروليّ: ‎--cd-warn‎ يُحلّ بالوراثة (الجوفُ داخل ‎#card-modal‎)
     لكنّه ليس على هذا الحامل، والحارسُ يطلبه فيه. وقيمتُه واحدةٌ في الجلدين فلا يُفقد شيء.
     ولونُ المعروض: ‎--xt-flc‎ يُكتب سطريًّا على كلّ زرّ، ويُعلَن ههنا عقدًا لا زينة */
  --xt-flc: var(--xt-fl1);
  /* ===== وورقُ الاختبار ورقُ الملخّص: توكنٌ يُشارَك لا قيمةٌ تُنسخ =====
     كان السطحان قيمتين منقولتين بحرفهما (‎#16272b‎ و‎#1d3036‎ داكنًا · ‎#fff‎ و‎#f7fafa‎
     ورقًا)، وحجّتُها يومئذٍ أنّ ‎--cd-*‎ لا تصل ههنا — وقد كانت النافذةُ يومئذٍ في
     ستارٍ مستقلّ (‎#xt-modal‎). ثمّ سكنت صدَفةَ البطائق، فصارت **داخل** ‎#card-modal‎
     ووَرِثت توكناتِه كلَّها: فسقطت الحجّةُ وبقيت القيمُ المنقولة.
     وأثرُها أنّ ورقَ الاختبار خالف ورقَ الملخّص — والفرقُ يُرى في الداكن خاصّة
     (‎#16272b‎ ورقةً و‎#1a2e34‎ ورقة). وهما موضعا قراءةٍ لشيءٍ واحد: نصُّ البطاقة.
     و‎--cd-fld‎ هو **ورقُ البطائق** بعينه — يُحلّ من نفسِه مع الثوب (‎--cd-fld-d‎
     داكنًا و‎--cd-fld-l‎ ورقًا)، وعليه بُنيت ورقةُ الملخّص (‎--shp-bg‎). وتعليقُه في
     موضعه يقول: «ما تكتبه في البطاقة وما تقرؤه في ورقتها يصيران مادّةً واحدة».
     فصار الاختبارُ ثالثَهما — ولو تبدّل الورقُ يومًا تبعته الثلاثةُ بلا سطرٍ يُلاحَق.
     والترويسةُ والذيلُ على الورق نفسِه: النافذةُ صحيفةٌ واحدة، وما يفصلهما خيطُ
     ‎--u-line‎ لا فرقُ سطح — كما تُفصل أقسامُ الورقة بخطوطها لا بألوانها */
  --xt-win-bg: var(--cd-fld);
  /* ===== والترويسةُ والذيلُ ليسا ورقًا: درجةٌ دونَه =====
     جُرّبا على الورق نفسِه (صحيفةً واحدةً يفصلها خيط) فلم تُقرأ: الخيطُ
     وحدَه لا يصنع طبقتَين، وأدواتُ النافذة ليست من متنها فلا تسكن ورقَه.
     والاتّجاهُ **إلى أسفل لا إلى أعلى**: كان اللوحُ أضوأَ من الجوف (‎#1d3036‎
     على ‎#16272b‎)، فلمّا صار الجوفُ ورقًا وجب أن يكون هو الأضوأَ — وهي قاعدةُ
     هذا الملفّ المكتوبة في ورقة الملخّص: «الورقُ أضوأُ ممّا تحته أبدًا».
     و‎#1d3036‎ القديم لا يصلح اليوم: هو الورقُ بعينه تقريبًا (‎#1a2e34‎)،
     فيُنزَل درجةً تقع بين الورق وطاولته (‎--cd-desk‎ الداكنة ‎#0f2126‎)،
     على نسبة اللون نفسِها فلا يدخل حبرٌ غريب */
  --xt-pan-bg: #132226;
  --xt-no: #c0455f; --xt-ok: #4e9d57;
  /* لون النوع: «أبيض خافت» — وفي الورق حبر بالشدة نفسها، إذ الأبيض على الأبيض لا يُرى */
  --xt-kc: rgba(255, 255, 255, .86);
  /* ===== وذهبي النافذة مثبَّت بقيمته لا موروثا =====
     ذهبي الموقع ثلاثة: --c-gold على الجذر (#c9a25c) و--u-gold في حاملي التوكنات
     (#e1c172 داكنا · #a8842e ورقا). والمختبر عُوير على الثاني، فيُثبَّت ههنا صراحة */
  --xt-gold: #e1c172;
  /* ===== والحبرُ الذي يقع على المُصمت ليس حبرَ الصفحة =====
     --c-ink حبرُ الصفحة، وهو ينقلب مع الثوب (#e6edf1 داكنًا · #14233f ورقًا)،
     والأرضيّةُ المصمتةُ تحته تنقلب معه (الذهبيّ ولونُ النوع) — فاجتمع في كلّ ثوبٍ
     فاتحٌ على فاتحٍ أو غامقٌ على غامق، وهو انقلابٌ يُرى في القاطعة وزرّ الابتداء
     وعلامة الصحّ ومفتاح التفعيل. فهذا حبرُ ما فوق المصمت، وهو عكسُ حبر الصفحة */
  --xt-on: #14233f;
  /* وظِلُّها أسودُ في الداكن وحبرُ الصفحة في الورق: السوادُ على البياض يتّسخ ولا يغور */
  --xt-sh: rgba(0, 0, 0, .75);
  /* ===== وثلاثةٌ للقبّعة: حدُّها ولمعتُها وغورُها =====
     قيمُ الداكن منقولةٌ من مرقاب بحرفها (‎home.css‎ §‎Physical Enter Key‎).
     وأمّا الورقُ فلا يُنقل إليه سوادُها: مرقاب لا يبدّلها مع الثوب، وثوبُنا الفاتحُ
     ذيلُه ‎#f7fafa‎ — وقاعدةُ هذا الملفّ مكتوبةٌ في ‎--xt-sh‎ فوق: «السوادُ على
     البياض يتّسخ ولا يغور». فيغور ببتروليّ الهُويّة ويلمع بالأبيض */
  --xt-kedge: rgba(0, 0, 0, .32);
  --xt-ktop: rgba(239, 234, 224, .07);
  --xt-kdeep: rgba(0, 0, 0, .42);
  /* ===== خامةُ المؤقّت — «المحفور» (‎flip-face-lab#carv‎) =====
     لا جسمَ بارزًا في الركن: الرقمُ **غَورٌ في سطح الذيل نفسِه**. فلا لمعةَ حافّةٍ ولا
     ظِلٌّ تحتها ولا حدٌّ حولها — وإنّما غورٌ داخليٌّ وخطٌّ في قاعه.
     ولذلك يتبع الثوبَ (بخلاف الورق الذي رُدّ): ما لا جسمَ له لا خامةَ له تثبت، وإنّما
     هو سطحُ الذيل وقد غار — فينقلب بانقلابه لا محالة.
     ولونُه **مُصمتٌ محسوبٌ لا شفّافٌ**: أرضيّةُ الذيل (‎--xt-pan-bg‎) وقد خُلطت بوَشْيِ
     الغَور — ‎#132226‎ + بياضٌ ‎7%‎ ⇐ ‎#233135‎، و‎#f7fafa‎ + بتروليٌّ ‎7%‎ ⇐ ‎#e8efef‎.
     وإنّما صُمّت ولم يُترك شفّافًا لأنّ الورقةَ **يجب أن تحجب ما تحتها**: وجهٌ شفّافٌ
     يُرى من ورائه الرقمُ القديمُ الساكن، فيجتمع رقمان لحظةَ الانبساط. */
  --xt-clkbg: #233135;
  --xt-clkink: #c3d3d8;
  --xt-clkcr: rgba(255, 255, 255, .16);
  --xt-clkline: rgba(255, 255, 255, .18);
  /* وظِلُّ الانطواء: حجابٌ يعتم فوق الورقة — لا شفافيّةٌ فيها */
  --xt-clksh: #000;
  /* وخيطُ الحافّة: أخفتُ من الحبر — يُحسّ ولا يُقرأ */
  --xt-clkbar: rgba(195, 211, 216, .45);
  /* وقدُّ الورقة ومدّةُ انطوائها ومنحناه — مقبضٌ واحدٌ لكلٍّ منها */
  --xt-clkh: 22px; --xt-clkd: 520ms; --xt-clke: cubic-bezier(.645, .045, .355, 1);
  /* وعرضُ زرّ العلم */
  --xt-flw: 22px;
}
html[data-theme="light"] #card-modal .xt-skin {
  /* ولا يُعاد الورقُ: ‎--cd-fld‎ ينقلب مع الثوب من نفسِه.
     وأمّا اللوحُ فيعود إلى ما كان: الورقُ ههنا بياضٌ صريح، و‎#f7fafa‎ درجةٌ
     دونَه — وهي لوحُ الموقع (‎--cd-pan‎) بعينه، فلا درجةَ رابعةٌ تُخترع */
  --xt-pan-bg: #f7fafa;
  --xt-no: #b03a52; --xt-ok: #3f8a52;
  --xt-kc: rgba(20, 35, 63, .84);
  --xt-gold: #a8842e;
  /* وفي الورق الذهبيُّ غامقٌ ولونُ النوع غامق، فالحبرُ فوقهما أبيض */
  --xt-on: #fff;
  --xt-sh: rgba(20, 35, 63, .4);
  --xt-kedge: rgba(44, 94, 101, .28);
  --xt-ktop: rgba(255, 255, 255, .9);
  --xt-kdeep: rgba(44, 94, 101, .3);
  /* ===== وغَورُ المؤقّت في الورق: السطحُ نفسُه وقد غار =====
     ‏‎#f7fafa‎ + بتروليٌّ ‎7%‎ ⇐ ‎#e8efef‎ — أرضيّةُ الذيل وقد خُلطت بوَشْيِ الغَور.
     وحبرُه حبرُ الحرف الخافت في الثوب الفاتح، وظِلُّ انطوائه بتروليٌّ داكنٌ لا أسود:
     السوادُ على البياض يتّسخ ولا يغور — وهي قاعدةُ هذا الملفّ المكتوبةُ في ‎--xt-sh‎ */
  --xt-clkbg: #e8efef;
  --xt-clkink: #5d6b82;
  --xt-clkcr: rgba(44, 94, 101, .22);
  --xt-clkline: rgba(44, 94, 101, .22);
  --xt-clksh: #3a4a55;
  --xt-clkbar: rgba(93, 107, 130, .38);
  /* والبتروليُّ في الورق أغمقُ: الفاتحُ لا يُقرأ على الأبيض */
  --xt-fl1: var(--xt-no); --xt-fl2: #d1791f; --xt-fl3: var(--xt-gold);
  --xt-fl4: var(--xt-ok); --xt-fl5: #2c5e65; --xt-fl6: var(--u-like);
  --xt-flc: var(--xt-fl1);
}









/* ===== والغلافُ يملأ الصدَفةَ ولا يرسم إطارًا =====
   ذهب عنه العرضُ المحدود والخلفيّةُ والحدُّ والانحناءُ والظلّ — كلُّها من مسرح البطائق
   الآن. وبقي أنّه عمودٌ من ثلاثة: ترويسةٌ وجوفٌ وتذييل، يملأ ما أُعطي */
/* ولا ‎overflow: hidden‎: فقاعةُ التعليقات ومروحةُ النسخ تنزلان من داخلها، والقصُّ
   الذي يجمّل الأطراف يبتلعهما — وهي قاعدةُ نافذة البطاقة نفسِها (‎.xt-win‎ لا تُقصّ).
   والأطرافُ تستدير بأبنائها أصلًا: ‎.xt-win > .xt-hd:first-child‎ وأختُها في التذييل */
.mmodal__card.is-exam { display: flex; flex-direction: column; }
/* ===== وسطحُ النافذة يُرسم بورقها =====
   ‎--xt-win-bg‎ كان مصرَّحًا ولا يُرسم به شيء: السطحُ يأتي من ‎#card-modal .mmodal__card‎
   وهو ‎--cd-win‎ (سطحُ النوافذ عامَّةً). فيُخصّ الاختبارُ بورقه.
   ===== ولا يُكتب ههنا ‎--xt-win-bg‎ وإن كان اسمًا له =====
   التوكنُ يُورَّث **نزولًا لا صعودًا**، و‎--xt-*‎ معلنةٌ على ‎.xt-skin‎ وهي
   **ابنةُ** ‎.mmodal__card.is-exam‎ لا سلفُها. فطلبُ الأمّ توكنًا من بنتِها لا يُحلّ،
   و‎background‎ بقيمةٍ غيرِ محلولةٍ يرجع إلى أصله الشّفّاف — **فتُرى النافذةُ بلا
   خلفيّةٍ ولا يصيح أحد**. (وقعت فعلًا في أوّل شحنةٍ لهذا الورق.)
   فيُطلب الورقُ من سلفٍ حقيقيّ: ‎--cd-fld‎ على ‎#card-modal‎ نفسِه — وهو التوكنُ
   الذي منه ‎--xt-win-bg‎ أصلًا، فلا قيمةَ ثانيةً تدخل.
   والمُنتقي بمعرّفٍ لا بصنفين: ‎.mmodal__card.is-exam‎ وحدَها أضعفُ من
   ‎#card-modal .mmodal__card‎ فلا تغلبها */
#card-modal .mmodal__card.is-exam { background: var(--cd-fld); }

/* ===== ولا مِقبضَ إضافةٍ على نافذة الاختبار =====
   يُخفى «+» وجَوفُ الأنواع تحته، ويبقى صفُّ الألسنة: المطويّاتُ أشياءُ الشاشة لا
   أشياءُ النافذة المركَّزة، فطيُّ بطاقةٍ ثمّ فتحُ اختبارٍ لا يُذهب لسانَها.
   و‎visibility‎ لا ‎display‎ على المِقبض: هو عضوٌ في صفٍّ متوسّطٍ معايَر (الموازنُ
   الخاوي يقابله)، فإسقاطُه من الصفّ يزحزح الألسنةَ عن وسطها */
/* ===== وأزرارُ النافذة في زاوية الصدر =====
   كانت عضوًا في صفٍّ متوسّط، فتوسّطت مع مِقبض «إعدادي» كأنّها محتوًى. وهي أدواتُ
   النافذة لا محتواها، فموضعُها زاويةُ الترويسة كما في كلّ نافذة.
   وتُنزع من الصفّ (‎absolute‎) لا تُدفع إلى طرفه بموازن: الدفعُ يقتطع من عرض الصفّ
   فيزيح المتوسّطَ عن وسطه، والنزعُ يتركه على وسط الترويسة حقًّا.
   و‎inset-inline-start‎ لا ‎right‎: الصدرُ يمينٌ في العربيّة ويسارٌ في الإنجليزيّة،
   والأدواتُ تتبع جهةَ الكتابة كما تتبعها الترويسةُ كلُّها.
   والحشوةُ ‎14/9‎ حشوةُ الترويسة نفسُها، فتقع الأزرارُ حيث كانت تقع لو بقيت في الصفّ */
.mmodal__card.is-exam .xt-hd { position: relative; }
.mmodal__card.is-exam .xt-hd > .cd-bar { position: absolute; inset-inline-start: 14px; top: 9px; }
/* ===== وكومةُ الحضور: متوسّطةُ القامة، ومركزُها فوق مركز كتلة الذيل =====
   تُشدّ من رأس الترويسة إلى قاعها ثمّ يُتوسَّط ما فيها — فتستوي عموديًّا في ركنها.
   وأمّا محورُها الأفقيُّ فيُقاس: ‎cdHereFit‎ تقرأ مركزَ الكومة ومركزَ أوّل صفٍّ في كتلة
   أخبار الذيل، وتكتب فرقَهما في ‎--here-fit‎ — فتقف الكومةُ فوق الكتلة على خطٍّ واحد.
   وهي آلةُ نافذة البطاقة بعينها، زِيد لها مُنتقيا هذه النافذة فحسب.
   والقاعدةُ ‎14px‎ حشوةُ الترويسة، والمقيسُ يُزاد عليها لا يحلّ محلَّها */
.mmodal__card.is-exam .xt-hd > .cd-here {
  position: absolute; inset-inline-end: calc(14px + var(--here-fit, 0px)); top: 0; bottom: 0;
  display: flex; align-items: center; pointer-events: none;
}
.mmodal__card.is-exam .xt-hd > .cd-here > * { pointer-events: auto; }
/* ويُحجز لها عرضُها في الصفّ المتوسّط فلا يزحف عليها مِقبضٌ طويل الاسم */
.mmodal__card.is-exam .xt-hdc { padding-inline-start: 84px; padding-inline-end: 84px; }
#card-modal.is-noadd .cd-dw__handle { visibility: hidden; pointer-events: none; }
#card-modal.is-noadd .cd-dw__tray { display: none; }
.mmodal__card.is-exam > .xt-skin { display: contents; }
.xt-win { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
/* ولا يُقصّ جوفها: قوائم الترويسة تنزل منها، والقصّ الذي يجمّل الأطراف يبتلعها */
.xt-win > .xt-hd:first-child { border-radius: 13px 13px 0 0; }
.xt-win > .xt-ft:last-child { border-radius: 0 0 13px 13px; }

/* وتوسيطُ ما فيها صار بالمحاذاة لا بموازنَين خاويَين: ذهب صفُّ الأزرار من الترويسة
   (توفّره الصدَفة)، فلم يبقَ ما يُوازَن — والفراغان اللذان كانا يقتسمان الوسط صارا
   بلا وظيفةٍ إلّا شغلُ العرض */
.xt-hd { flex: none; display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; row-gap: 6px;
  min-height: var(--xt-wh); padding: 9px 14px; background: var(--xt-pan-bg);
  border-bottom: 1px solid var(--u-line); }
/* ===== الطابق الثاني في الترويسة: شريط المحاور (‎xt-head-lab#c‎) =====
   الترويسة ‎flex-wrap‎ أصلًا، فابنٌ أساسُه ‎100%‎ ينزل سطرًا ثانيًا بلا حيلة.
   والهامش السالب ثلاثة أطراف:
   · الجانبان ‎-14‎ يردّان حشوة الترويسة فيبلغ الشريطُ حافّتيها، ثمّ تُعاد الحشوةُ
     إليه هو (‎padding: 0 14px‎) فيبقى متنُه في عمود العنوان فوقه ولا يزحف عنه.
   · والقاع ‎-9‎ يلغي حشوة الترويسة السفلى، فيجلس الشريطُ على حدّها لا فوقه بتسعة.
   وبهذا يصير حدُّ الترويسة السفليُّ هو خطَّ المحاور نفسَه — فيُرفع ‎border-bottom‎ عن
   ‎.xt-ax‎ وإلّا صار خطّان متجاوران يُقرآن سماكةً لا فصلًا. والخطُّ الذهبيُّ تحت
   المختار (‎.xt-ax__i.on::after‎ عند ‎bottom: -1‎) يقع على ذلك الحدّ بعينه فيقطعه.
   ولا ‎overflow‎ على الترويسة (عمدًا، لتنزل منها قائمةُ «إعدادي») فلا يُقصّ السالب */
.xt-hd2 { flex-basis: 100%; margin: 2px -14px -9px; padding: 0 14px; }
.xt-hd2 .xt-ax { border-bottom: 0; }
/* وأوّلُ ما في الجوف لا يُزاح: كان شريطُ المحاور يتصدّره فتُقاس الفسحةُ منه، فلمّا
   صعد بقيت فسحةُ أوّلِ لوحٍ مضافةً إلى حشوة الجوف — فسحتان مكان واحدة */
.xt-bd > :first-child { margin-top: 0; }
/* العنوان وشريطه كتلة واحدة تتوسط الترويسة، و✕ في صدرها (يمينا) */
.xt-hdc { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* ===== وقضيبُ جوفها قضيبُ الشريط الجانبيّ نفسُه =====
   القضيبُ الافتراضيّ رماديُّ النظام، فيقع في نافذةٍ بترول الهُويّة كأنّه ليس منها.
   والوصفةُ منقولةٌ من ‎.sidebar‎ حرفًا: رفيعٌ، ومجراه شفّاف، وحبّتُه بترولٌ شفيفٌ يشتدّ
   بالمرور. و‎background-clip: padding-box‎ مع حدٍّ شفّافٍ ‎2px‎: هو الذي يجعل الحبّةَ
   أنحفَ من مجراها بلا مقاسٍ ثانٍ يُكتب — فتُقرأ خيطًا لا عمودًا */
/* ===== وفخٌّ أبطل القاعدةَ بنفسها =====
   كُتبت أوّلًا ‎scrollbar-width: thin‎ ومعها ‎::-webkit-scrollbar-thumb‎ ملوّنًا.
   وكروم الحديث إذا رأى الخاصّةَ **القياسيّة** أسقط الزخارفَ القديمة كلَّها — فذهب
   اللونُ وبقي الرفيعُ بلون النظام، أي أنّ نصفَ القاعدة قتل نصفَها.
   فاللونُ يُقال بالقياسيّة كذلك (‎scrollbar-color: الحبّة المجرى‎)، وتبقى القديمةُ
   تحتها للمحرّكات التي لا تعرف القياسيّة — لا يجتمعان في محرّكٍ واحد فلا يتنازعان */
/* واللونُ توكنٌ لا صبغةٌ مكتوبة (‎--u-in-line‎): هو عُرفُ جوفِ النوافذ في هذا الموقع
   (‎.cd-cmt__list‎ و‎.nkw__paneb‎ وأخواتُها)، ويتبع الجلدين بنفسه فلا يُكتب له استثناء */
.xt-bd { scrollbar-width: thin; scrollbar-color: var(--u-in-line) transparent; }
.xt-bd::-webkit-scrollbar { width: 9px; }
.xt-bd::-webkit-scrollbar-track { background: transparent; }
.xt-bd::-webkit-scrollbar-thumb { background: var(--u-in-line); border-radius: 99px;
  border: 2px solid transparent; background-clip: padding-box; }
.xt-bd { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 14px;
  display: flex; flex-direction: column; }
/* والتذييل سطران متوسطان: الطريقة فوق و«ابدأ» تحتها — لا طرفان متقابلان */
.xt-ft { position: relative;
  flex: none; display: flex; justify-content: center; align-items: center;
  min-height: var(--xt-wf); padding: 8px 14px; background: var(--xt-pan-bg);
  border-top: 1px solid var(--u-line); }
/* ===== وذيلٌ خاوٍ يُطوى =====
   ورقةُ الإحصاءات بلا خطأ لا فعلَ فيها (ذهب «اخرج»، و«أعد الخطأ» لا يُبنى على خطأٍ
   لم يقع) — فيبقى شريطٌ فارغٌ قامتُه ‎--xt-wf‎ بحدٍّ فوقه، يُقرأ عطبًا لا فراغًا.
   و‎:empty‎ يكفي: ‎xtShell‎ تبني الوعاءَ أبدًا وجوفُه هو الذي يخلو، والجوفُ الخالي
   حالٌ تُرى في المُنتقي بلا سطرِ جافا يُزاد. و‎.xt-bd‎ بلا أرضيّةٍ فلا يُرى له ركنٌ
   مربَّعٌ إذ صار آخرَ الأبناء — الأرضيّةُ للبطاقة وحدَها وهي مستديرة */
.xt-ft:empty { display: none; }
/* ===== وعرض «ابدأ» عرض شريط الطريقة بلا رقم يُكتب =====
   العمود يضيق على أعرض ابنيه (وهو الشريط)، وابنه الآخر يمتد إليه بـstretch.
   فلو تبدل الشريط — لفظا أو رمزا أو حشوا — تبعه الزر من نفسه. ورقم مكتوب
   ينفصل عنه يوم يتبدل ولا يصيح */
.xt-ftc { display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px;
  max-width: 100%; }
/* ===== وخبرُ البطاقة في طرف الذيل =====
   ‎margin-inline-start: auto‎ لا ‎order‎ ولا موازنٌ خاوٍ: الفضلةُ كلُّها تُجمع قبله
   فينزاح إلى منتهى الصفّ — يسارًا في العربيّة ويمينًا في الإنجليزيّة، يتبع جهةَ
   الكتابة من نفسِه. والأفعالُ تبقى حيث هي في وسط الذيل لا تُدفع معه.
   و‎flex: none‎ فلا ينكمش على أرقامه إذا ضاق الذيل — الرقمُ المقصوصُ كذبٌ */
/* ===== وذيلُ الاختبار كترويسته: ركنٌ منزوعٌ ووسطٌ متوسّط =====
   كان خبرُ البطاقة عضوًا في الصفّ يُدفع إلى طرفه بـ‎margin-inline-start: auto‎ — والذيلُ
   ‎justify-content: center‎ من قبلُ، لكنّ العضوَ يقتطع من عرضه فيزيح المتوسّطَ عن وسطه:
   فيقف زرُّ الحكم في صدر الصفّ لا في منتصفه. وهي علّةُ الموازن الخاوي نفسُها التي
   عولجت في الترويسة.
   فيُنزع الركنُ من الصفّ (‎absolute‎) ويُشدّ من رأس الذيل إلى قاعه ثمّ يُتوسَّط ما فيه —
   فيستوي عموديًّا كما تستوي كومةُ الحضور في الترويسة، ويُطابق نافذةَ البطاقة حيث
   الخبرُ خليّةُ ركنٍ في شبكة لا عضوٌ في صفّ. ويبقى الصفُّ خاليًا لأفعاله فيتوسّطها حقًّا */
.xt-info {
  position: absolute; inset-inline-end: 14px; top: 0; bottom: 0;
  display: flex; align-items: center; pointer-events: none;
}
/* ============================================================
   أعلامُ السؤال — الطرفُ المقابلُ للإحصاءات (‎xt-flag-lab#bookmark‎)
   ============================================================
   القيمُ معايَرةٌ بيد صاحب الموقع: الرسمُ ‎18‎ والزرُّ ‎22‎ واستدارتُه ‎3‎ وسُمكُ الحدّ ‎2.6‎
   وبينها **صفر** — فتُقرأ شريطًا واحدًا لا ستّةَ أزرارٍ متفرّقة، وعرضُها ‎132‎.
   والمطفأُ **بلونه باهتًا** لا رماديًّا: صفٌّ رماديٌّ يبدو معطَّلًا، وباهتًا يُعلن ما
   سيصير إليه. والمشتعلُ مصمتٌ به — الرسمُ واحدٌ و‎fill‎ وحدَه يتبدّل.
   ============================================================ */
.xt-flags {
  position: absolute; inset-inline-start: 14px; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 0;
}
.xt-fl {
  flex: none; display: inline-grid; place-items: center; padding: 0;
  width: 22px; height: 22px; border: 0; border-radius: 3px; cursor: pointer;
  background: none; color: color-mix(in srgb, var(--xt-flc) 42%, transparent);
  transition: color .14s, background .14s;
}
.xt-fl svg { width: 18px; height: 18px; display: block; }
.xt-fl:hover { color: var(--xt-flc); background: var(--u-hov); }
.xt-fl.on { color: var(--xt-flc); }
.xt-info > * { pointer-events: auto; }

/* ============================================================
   زرُّ العلم الواحد ومروحتُه — الستّةُ انطوت فيه
   ============================================================
   مطفأً: رسمٌ مفرَّغٌ بلون الحرف الخافت — لا يدّعي لونًا لم يُختَر.
   ومشتعلًا: مصمتٌ بلون العلم، ويكتب ‎--xt-flc‎ سطريًّا فيرثه الرسمُ من نفسِه.
   والمروحةُ تنفرج **فوقه**: هو في ذيل النافذة وما تحته حافّتُها.
   ============================================================ */
/* ============================================================
   أزرارُ الركن الثلاثة — جسمٌ واحدٌ لا ثلاثةُ أشباه
   ============================================================
   الترسُ والملخّصُ والعلم: قدٌّ واحدٌ (‎--xt-flw‎) واستدارةٌ واحدةٌ وحبرٌ واحدٌ ومرورٌ
   واحد. وكُتبت أوّلًا ثلاثَ قواعدَ متطابقةٍ نُسخت واحدةً عن أخرى — وذلك يفترق يومَ
   يُعدَّل أحدُها فيبقى أخواه على القديم، ولا يصيح شيء. فمصدرٌ واحد.
   وما يخصُّ كلَّ واحدٍ يُكتب بعده وحدَه: العلمُ يشتعل بلون علمه، والترسُ بذهب الفتح.
   وقدُّ الرسم يفترق يسيرًا (‎17‎ للترس و‎18‎ لأخويه) لأنّ الترسَ دائريٌّ يملأ مربّعَه
   والآخرين مستطيلان — فيُقاس المرئيُّ لا الصندوق.
   ============================================================ */
.xt-cog, .xt-flb, .xt-sumb {
  flex: none; display: inline-grid; place-items: center; padding: 0;
  width: var(--xt-flw); height: var(--xt-flw); border: 0; border-radius: 3px;
  cursor: pointer; background: none; color: var(--u-lab);
  transition: color .14s, background .14s;
}
.xt-flb svg, .xt-sumb svg { width: 18px; height: 18px; display: block; }
.xt-cog svg { width: 17px; height: 17px; display: block; }
.xt-cog:hover, .xt-flb:hover, .xt-sumb:hover { background: var(--u-hov); }
.xt-cog:hover, .xt-sumb:hover { color: var(--u-tx-strong); }
.xt-flb.on { color: var(--xt-flc); }
.xt-cog.on { color: var(--u-gold); background: var(--u-hov); }
/* وحلقةُ التركيز للثلاثة لا لواحدٍ منهم: من ينتقل بـ‎Tab‎ يبلغهم جميعًا */
.xt-cog:focus-visible, .xt-flb:focus-visible, .xt-sumb:focus-visible {
  outline: 2px solid var(--u-gold); outline-offset: 2px; border-radius: 4px;
}
.xt-fan {
  position: absolute; inset-inline-start: 0; bottom: calc(100% + 7px);
  display: none; padding: 3px; border-radius: 8px;
  background: var(--xt-win-bg); border: 1px solid var(--u-line);
  box-shadow: 0 8px 22px var(--xt-sh); z-index: 6;
}
.xt-fan.on { display: flex; }

/* ============================================================
   ركنُ الذيل — زرُّ العلم على الحافّة والمؤقّتُ إلى يساره
   ============================================================
   الترتيبُ ترتيبُ الكتابة: الأوّلُ في أقصى اليمين. فزرُّ العلم أوّلًا ليقف على الحافّة،
   والمؤقّتُ بعده فيقع الزرُّ يمينَه — بحكم صاحب الموقع.
   ووعاءٌ واحدٌ يحملهما، ولا يُحسب لأحدهما إزاحةٌ من عرض الآخر: عرضُ المؤقّت يتبع
   خاناتِه (‎mm:ss‎ خمسةُ محارف اليوم، وقد تصير سبعةً يومَ تُزاد ساعة)، فرقمٌ مكتوبٌ
   ينفصل عنه يومَ يتبدّل ولا يصيح. والصفُّ يرتّب نفسَه.
   و‎.xt-flags‎ تبقى **هي** التي تخفت حتى يقترب المؤشّر (القاعدةُ تنتقيها بالاسم)،
   والمؤقّتُ أخوها في الوعاء لا ابنُها — فلا يخفت معها: ووقتٌ لا يُرى ليس مؤقّتًا.
   ============================================================ */
.xt-cnr {
  position: absolute; inset-inline-start: 14px; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 9px;
}
/* وحاملُ الأعلام صار عضوًا في الصفّ بعد أن كان مسمَّرًا وحدَه — و‎relative‎ تبقى
   لتنفرج منه المروحة */
.xt-cnr > .xt-flags { position: relative; inset: auto; }

/* ============================================================
   ترسُ الذيل ولوحُه — صوتٌ ورحلة
   ============================================================
   الترسُ أوّلُ الصفّ فأقصى اليمين، وقدُّه قدُّ زرّ العلم (‎--xt-flw‎) فيستويان.
   واللوحُ ينفرج فوقه كمروحة الأعلام، ومحاذاتُه إلى طرفه الأوّل فيمتدّ إلى داخل
   النافذة لا إلى خارجها.
   ============================================================ */
.xt-cogw { position: relative; display: inline-flex; align-items: center; flex: none; }
.xt-cogp {
  position: absolute; inset-inline-start: 0; bottom: calc(100% + 7px);
  display: none; flex-direction: column; gap: 7px; padding: 11px 12px;
  min-width: 218px; border-radius: 10px; z-index: 6;
  background: var(--xt-win-bg); border: 1px solid var(--u-line);
  box-shadow: 0 10px 28px var(--xt-sh);
}
.xt-cogp.on { display: flex; }
/* وترويسةُ المجموعة: لا خطَّ فاصلًا بل فُرجةٌ وحرفٌ أصغرُ — الفاصلُ في لوحٍ صغيرٍ ضجيج */
.xt-cogp__h {
  font: 700 11px 'IBM Plex Sans Arabic', sans-serif; color: var(--u-gold);
  letter-spacing: .2px;
}
.xt-cogp__h + .xt-cogp__r { margin-top: -2px; }
.xt-cogp__r + .xt-cogp__h { margin-top: 5px; }
.xt-cogp__r { display: flex; align-items: center; gap: 9px; }
.xt-cogp__t {
  font: 500 12.2px 'IBM Plex Sans Arabic', sans-serif; color: var(--u-tx);
  line-height: 1.5;
}
/* والمخمَدُ يُخفت **ويُقطع نقرُه** معًا — كسطر الوقت في شاشة الإعداد حرفًا */
.xt-cogp__r.is-inert { opacity: .45; }
.xt-cogp__r.is-inert .cd-sw { pointer-events: none; }

/* ============================================================
   رحلةُ الاختبار — أين أنت من الطابور
   ============================================================
   قضيبٌ تحت الترويسة: مساره كلُّ الطابور، ومملوؤه ما قطعتَه، ومحطّاتُه أسئلتُه إن
   كنّ يُرَين. والمحطّاتُ مسمَّرةٌ بالنسبة المئويّة (‎--p‎) لا بصفٍّ مرن: الصفُّ المرنُ
   يوزّع بالفراغ فتنزاح الأولى والأخيرة عن طرفَي القضيب، والمحطّةُ الأولى **هي**
   الطرف. فتُنصَّف إزاحتُها بـ‎translateX‎ فيقع مركزُها على النسبة تمامًا.
   ============================================================ */
.xt-jr {
  position: relative; flex: none; height: 14px; margin: 0 16px 3px;
  display: flex; align-items: center; justify-content: center;
}
.xt-jr__tr, .xt-jr__fl {
  position: absolute; inset-inline: 0; height: 2px; border-radius: 2px;
}
.xt-jr__tr { background: var(--u-line); }
/* والمملوءُ يبدأ من طرف البدء: ‎inset-inline-end: auto‎ ليقصر على عرضه هو */
.xt-jr__fl {
  inset-inline-end: auto; width: var(--f, 0%); background: var(--u-gold);
  transition: width .3s ease;
}
/* ===== وقبّةُ العدد: ‎9/18‎ في وسط الخيط =====
   ‏‎position: relative‎ فتعلو الخيطَ (المُطلقان قبلها في الترتيب، والمتموضعون
   يُرسمون بترتيب ورودهم). وأرضيّتُها أرضيّةُ الذيل فتقطع الخيطَ تحتها ولا يمرّ في
   بطن الحروف — قطعٌ بالطلاء لا بحسابٍ يُكتب لعرض النصّ.
   وأرضيّتُها ‎--xt-win-bg‎ لا ‎--xt-pan-bg‎: الرحلةُ تقع في **جوف** النافذة بين الترويسة
   والمِسطرة، وجوفُها مطليٌّ بـ‎--cd-fld‎ (وهو ‎--xt-win-bg‎ عينُه)، والترويسةُ والذيلُ
   وحدَهما هما اللوحان. فلو أُخذ لونُ اللوح لَبانت القبّةُ مستطيلًا بدرجةٍ أخرى.
   و‎direction: ltr‎ لأنّ ‎9/18‎ كسرٌ يُقرأ من اليسار: الجزءُ ثمّ الكلّ. ولو تُرك
   لاتّجاه الصفحة لَانقلب إلى ‎18/9‎ في العين وهو خبرٌ آخر */
.xt-jr__n {
  position: relative; padding: 0 7px; background: var(--xt-win-bg);
  font: 700 10.5px 'IBM Plex Sans Arabic', sans-serif;
  color: var(--u-lab); line-height: 1.4; letter-spacing: .3px;
  direction: ltr; font-variant-numeric: tabular-nums;
}

/* ============================================================
   مؤقّتُ السؤال — «المحفور» (‎flip-face-lab#carv‎)
   ============================================================
   لا جسمَ بارزًا: غَورٌ في سطح الذيل. فلا لمعةَ حافّةٍ عليا ولا ظِلَّ تحته ولا حدَّ
   حوله — وإنّما ‎inset‎ يغور وخطٌّ في قاعه. ونقيضُ الورق في كلّ شيءٍ إلّا الصنعة:
   الانطواءُ وحجابُه وثنيتُه واحدةٌ في الاثنين.
   ============================================================ */
.xt-clk {
  display: flex; align-items: center; gap: 3px;
  direction: ltr; user-select: none; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.xt-clk__s {
  color: var(--xt-clkink); font-weight: 700; opacity: .55;
  font-size: calc(var(--xt-clkh) * .56); padding: 0 1px;
}
.xt-clk.is-warn .xt-clk__s { color: var(--xt-no); opacity: .8; }
.xt-clk__c {
  position: relative; width: calc(var(--xt-clkh) * .72); height: var(--xt-clkh);
  border-radius: 3px; overflow: hidden;
  /* ‏‎perspective‎ على **البطاقة** لا على الصفّ: تُورَّث للأبناء المباشرين وحدَهم،
     والورقتان ابنتاها. ولو وُضعت على الصفّ لَاحتاجت البطاقةُ ‎preserve-3d‎ لتمرّرها،
     و‎overflow: hidden‎ عليها يُسطّح ذلك من نفسِه — فينطوي الورقُ مسطَّحًا بلا عمق */
  perspective: calc(var(--xt-clkh) * 7);
  font-weight: 700; font-size: calc(var(--xt-clkh) * .64); line-height: 1;
  color: var(--xt-clkink); background: var(--xt-clkbg);
  /* والغَورُ ظِلٌّ داخليٌّ من أعلى وخطٌّ في القاع — لا حدٌّ يحيط ولا ظِلٌّ يقع تحته */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22), inset 0 -1px 0 var(--xt-clkline);
}
.xt-clk.is-warn .xt-clk__c { color: var(--xt-no); }
/* النصفان الساكنان: الأعلى يحمل الجديد، والأسفل يحمل القديم حتى تصله الورقة.
   ولونُهما لونُ الغَور مصمتًا — وجهٌ شفّافٌ لا يحجب، فيجتمع رقمان لحظةَ الانبساط */
.xt-clk__h {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden;
  background: var(--xt-clkbg); display: block;
}
.xt-clk__h span, .xt-clk__lf span {
  position: absolute; left: 0; right: 0; text-align: center; display: block;
  height: var(--xt-clkh); line-height: var(--xt-clkh);
}
.xt-clk__h--t { top: 0; border-radius: 3px 3px 0 0; }
.xt-clk__h--t span { top: 0; }
.xt-clk__h--b { bottom: 0; border-radius: 0 0 3px 3px; }
.xt-clk__h--b span { bottom: 0; }
/* الورقتان المتحرّكتان */
.xt-clk__lf {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; z-index: 3;
  background: var(--xt-clkbg); backface-visibility: hidden;
}
.xt-clk__lf--t { top: 0; transform-origin: bottom center; border-radius: 3px 3px 0 0; }
.xt-clk__lf--t span { top: 0; }
.xt-clk__lf--b {
  bottom: 0; transform-origin: top center; transform: rotateX(90deg);
  border-radius: 0 0 3px 3px;
}
.xt-clk__lf--b span { bottom: 0; }
/* ===== والثنيةُ في المحفور خافتةٌ: لا ورقةَ لها حرفٌ يلمع، وإنّما فصلُ نصفَيها ===== */
.xt-clk__cr {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px; z-index: 4;
  transform: translateY(-50%); pointer-events: none;
  background: var(--xt-clkcr); opacity: .55;
}

/* ============================================================
   خيطُ الحافّة — الوقتُ قدرًا لا رقمًا (‎xt-timer-lab#edge‎)
   ============================================================
   حدُّ الذيل العلويُّ نفسُه ينحسر: تراه بطرف عينك ولا تصرف إليه انتباهًا. فيجتمع مع
   الورقة التدقيقُ والإحساس، ولا يزاحم أحدُهما الآخرَ لأنّهما في حاسّتين.
   وهو ابنُ الذيل لا ابنُ الركن، فيمتدّ على عرضه كلِّه. و‎top: -1px‎ ليقع **على** الحدّ
   القائم (‎border-top‎) لا تحته فيبدو خطّين.
   وانتقالُه ثانيةٌ خطّيّةٌ بقدر الدقّة: فينحسر جريانًا متّصلًا لا قفزًا كلَّ ثانية.
   ولا يخفت مع الأعلام: هو خارجَ ‎.xt-flags‎ فلا تبلغه قاعدةُ الإطفاء.
   ============================================================ */
.xt-clkedge {
  position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  transform-origin: right; transform: scaleX(var(--xt-clkf, 1));
  background: var(--xt-clkbar); pointer-events: none;
  transition: transform 1s linear, background .3s ease;
}
.xt-clkedge.is-warn { background: var(--xt-no); }

/* ============================================================
   الانطواء — والعتمةُ حجابٌ **فوق** الورقة لا شفافيّةٌ **فيها**
   ============================================================
   العتمةُ هي التي تُصدّق الانطواء: الورقةُ تدخل الظلَّ وهي تمرّ بمستوى النظر ثمّ تخرج
   منه. وجُرّب أن تكون ‎opacity‎ على الورقة نفسِها، وهو عطبٌ: ‎opacity‎ يُشفّ الجسمَ كلَّه
   بخلفيّته، فتصير الورقةُ زجاجًا يُرى من ورائه **الرقمُ القديمُ الساكنُ تحتها** —
   فيجتمع رقمان في مكانٍ واحدٍ لحظةَ الانبساط.
   فالورقةُ مصمتةٌ أبدًا وتحجب ما تحتها، وفوقها حجابٌ (‎::after‎) هو الذي يعتم وينقشع.
   والمدّةُ نصفان متعاقبان لا مدّتان متداخلتان: النازلةُ في الأوّل والطالعةُ في الثاني —
   فلا يُرى وجهان معًا لحظةً.
   ============================================================ */
.xt-clk__lf::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--xt-clksh); opacity: 0;
}
@keyframes xtClkT { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-90deg); } }
@keyframes xtClkB { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } }
@keyframes xtClkTs { 0% { opacity: 0; } 100% { opacity: .62; } }
@keyframes xtClkBs { 0% { opacity: .62; } 100% { opacity: 0; } }
.xt-clk__c.go .xt-clk__lf--t {
  animation: xtClkT calc(var(--xt-clkd) / 2) var(--xt-clke) forwards;
}
.xt-clk__c.go .xt-clk__lf--b {
  animation: xtClkB calc(var(--xt-clkd) / 2) var(--xt-clke) calc(var(--xt-clkd) / 2) forwards;
}
.xt-clk__c.go .xt-clk__lf--t::after {
  animation: xtClkTs calc(var(--xt-clkd) / 2) var(--xt-clke) forwards;
}
.xt-clk__c.go .xt-clk__lf--b::after {
  animation: xtClkBs calc(var(--xt-clkd) / 2) var(--xt-clke) calc(var(--xt-clkd) / 2) forwards;
}

/* ============================================================
   وأطرافُ النافذة تُطفأ حتى تُقصد
   ============================================================
   ‏‎opacity: 0‎ لا ‎visibility‎ ولا ‎display‎: المطلوبُ **غيرُ مرئيٍّ وهو موجود** — يحفظ
   مكانَه فلا يقفز شيءٌ حين يظهر، ويبقى في مرقاة القارئ الآليّ. و‎.is-near‎ تكتبها
   الجافا حين يقترب المؤشّر (نصفُ القطر ‎90‎ من الحافّة، مقيسٌ في ‎XT_NEAR‎).
   ومعها ثلاثةُ أبوابٍ أخرى لا تُغني عنها الجافا:
   · ‎:hover‎ — إن سبقت الإصبعُ القياسَ (وهو يقع في الإطار التالي لا في نفسه).
   · ‎:focus-within‎ — من تنقّل بـ‎Tab‎ يبلغ العلمَ ولا مؤشّرَ له أصلًا، فلولاه لَوقف
     التركيزُ على شيءٍ لا يُرى.
   · ‎:has(.cd-seal2.on)‎ — مروحةُ النسخ منفرجةٌ من الختم، فلا يصحّ أن يخفت أصلُها
     وفرعُها مفتوحٌ لأنّ المؤشّر نزل عنه إلى المروحة.
   · ‎:has(.xt-fan.on)‎ — ومروحةُ الأعلام مثلُها حرفًا، وحاجتُها إليه أشدّ: فتحُها
     يُعيد رسمَ الجوف (‎xtPaint‎)، والرسمُ يهدم العنصرَ فتذهب معه ‎.is-near‎ — وهي لا
     تُكتب إلّا على مرور المؤشّر. فتنفرج المروحةُ في اللحظة التي يخفت فيها حاملُها،
     فتقف مفتوحةً لا تُرى. وهذا حدٌّ لا يحتاج مرورًا ولا تركيزًا فيصمد للرسم.
   ولا ‎transition‎ على غير ‎opacity‎: الحركةُ إعلانٌ لا استعراض */
.mmodal__card.is-exam :is(.xt-hdc > .cd-mid, .xt-flags, .xt-info) {
  opacity: 0;
  transition: opacity .22s ease;
}
.mmodal__card.is-exam :is(.xt-hdc > .cd-mid, .xt-flags, .xt-info):is(
  .is-near, :hover, :focus-within, :has(.cd-seal2.on), :has(.xt-fan.on)) {
  opacity: 1;
}

/* ===== وبعد خروج الجواب تظهر الثلاثةُ بلا أن تُقصد =====
   ‏‎.is-open‎ تُكتب على ‎.xt-win‎ في الحال التي انتهى فيها امتحانُ البطاقة.
   و‎.is-fade‎ معها مرّةً واحدةً عند الانتقال — و**حركةٌ لا انتقال**: جوفُ النافذة
   يُبنى من جديد في كلّ رسمة (‎skin.innerHTML‎)، والعنصرُ المولودُ لتوّه لا ‎transition‎
   له إذ لا قيمةَ سابقةً يُنتقل منها — فيُولد بقيمته النهائيّة ويومض. والحركةُ تعمل
   على المولود كما تعمل على المقيم.
   والتأخيرُ اليسيرُ مقصود: الجوابُ يقع أوّلًا ثمّ تستيقظ الحِلْيةُ خلفه، فيُقرأ
   الترتيبُ خبرًا بعد خبر لا شيئين في لحظة */
.mmodal__card.is-exam .xt-win.is-open :is(.xt-hdc > .cd-mid, .xt-flags, .xt-info) {
  opacity: 1;
}
.mmodal__card.is-exam .xt-win.is-fade :is(.xt-hdc > .cd-mid, .xt-flags, .xt-info) {
  /* ===== ولا مِلءَ ولا تأخير: الحركةُ زينةٌ إن سقطت لم يسقط الخبر =====
     كان ‎both‎ ثمّ ‎backwards‎ ومعهما تأخيرٌ ‎.06s‎ — وكلاهما يجعل الحركةَ **حاكمةً على
     الخاصّة خارج مدّتها**: قبل أن تبدأ تُمسك ‎from‎ أي الإطفاء. فإن لم تُشغَّل يومًا
     (ساعةُ حركةٍ موقوفة، أو رسمٌ يقع في أثنائها، أو ‎prefers-reduced-motion‎ في متصفّحٍ
     يُلغيها) بقيت الحِلْيةُ مطفأةً **والجوابُ أمامك** — وقد قِيس هذا فوقع.
     فبلا مِلء: خارج مدّتها تحكم قاعدةُ ‎.is-open‎ الساكنة (‎opacity: 1‎). فأسوأُ الأحوال
     ظهورٌ بلا انسياب، لا غيابٌ بلا سبب. وبلا تأخيرٍ كذلك: التأخيرُ يصنع فجوةً
     تُرى فيها الحِلْيةُ ثمّ تختفي ثمّ تعود */
  animation: xtChromeIn .38s ease;
}
@keyframes xtChromeIn { from { opacity: 0; } to { opacity: 1; } }
/* وكتلةُ الترويسة (الختمُ وصاحبُها) تتوسّط كما تتوسّط في البطاقة: صفٌّ واحدٌ لا يلتفّ،
   والمروحةُ تنزل منه — و‎.xt-hd‎ بلا ‎overflow‎ فلا تُقصّ */
.mmodal__card.is-exam .xt-hdc > .cd-mid { display: flex; align-items: center; gap: 9px; min-width: 0; }

/* ===== شريط الإعدادات في الترويسة: مقبض واحد — سهم ثم اسم ===== */
.xt-hb { position: relative; display: flex; align-items: center; }
.xt-hb__btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; max-width: 260px;
  border: 1px solid var(--u-in-line); border-radius: 8px; background: var(--u-in-bg);
  color: var(--u-tx-strong); font: 600 11px 'IBM Plex Sans Arabic', sans-serif; padding: 5px 9px;
  /* وعرضه ثابت (‎preW=wide‎): لو تبع اسمه لرقص الشريط كلما بدلت الإعداد */
  width: 210px; }
.xt-hb__btn:hover { border-color: color-mix(in srgb, var(--xt-gold) 55%, transparent); }
.xt-hb__btn.is-soft { color: var(--u-lab); font-weight: 500; }
.xt-hb__nm { flex: 1 1 auto; min-width: 0; text-align: start; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.xt-ar { flex: none; display: inline-flex; width: 12px; height: 12px; color: var(--u-lab); transition: transform .15s; }
.xt-ar svg { width: 100%; height: 100%; display: block; }
.xt-ar.up { transform: rotate(180deg); }
.xt-pop { position: absolute; z-index: 9; top: calc(100% + 6px); inset-inline-start: 0; min-width: 272px;
  background: var(--xt-pan-bg); border: 1px solid var(--u-in-line); border-radius: 10px;
  box-shadow: 0 18px 50px -18px var(--xt-sh); padding: 6px; }
.xt-pop__h { margin: 4px 4px 3px; font: 700 9.5px 'IBM Plex Sans Arabic'; color: var(--u-lab); }
.xt-pop__r { display: flex; align-items: flex-start; gap: 6px; width: 100%; text-align: start;
  border: 0; background: none; color: var(--u-tx); cursor: pointer; padding: 6px 8px;
  border-radius: 7px; font: inherit; }
.xt-pop__r:hover { background: var(--u-hov); }
.xt-pop__r.on { background: color-mix(in srgb, var(--xt-gold) 15%, transparent); }
.xt-pop__t { flex: 1 1 auto; min-width: 0; font: 700 11px 'IBM Plex Sans Arabic'; line-height: 1.5; }
.xt-pop__r.on .xt-pop__t { color: var(--xt-gold); }
.xt-pop__del { flex: none; font-style: normal; font-size: 11px; color: var(--u-lab); padding: 1px 4px; border-radius: 5px; }
.xt-pop__del:hover { background: var(--u-hov); color: var(--xt-no); }
.xt-pop__none { margin: 2px 8px 6px; font: 400 10px 'IBM Plex Sans Arabic'; color: var(--u-lab); }
.xt-pop__ft { margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--u-line); display: flex; gap: 5px; }
.xt-pop__new { width: 100%; text-align: start; border: 0; background: none; color: var(--xt-gold);
  cursor: pointer; font: 700 10.5px 'IBM Plex Sans Arabic', sans-serif; padding: 6px 8px; border-radius: 7px; }
.xt-pop__new:hover { background: color-mix(in srgb, var(--xt-gold) 15%, transparent); }
.xt-in { flex: 1 1 auto; min-width: 0; background: var(--u-in-bg); color: var(--u-tx);
  border: 1px solid var(--u-in-line); border-radius: 7px; padding: 5px 8px; font: 500 11px 'IBM Plex Sans Arabic'; }
.xt-ok { flex: none; border: 0; border-radius: 7px; background: var(--xt-gold); color: var(--xt-on);
  cursor: pointer; font: 700 10.5px 'IBM Plex Sans Arabic', sans-serif; padding: 5px 11px; }

/* ===== شريط المحاور: خط تحت المختار (‎exam-types-lab: axSty=line‎) =====
   لا لسانا ولا حوضا: الخط الفاصل يمر تحت الشريط كله، والمختار يكتب بالذهبي
   ويُخط تحته وحدَه. فالشريط أخف حبرا من الألسنة، ولا يدعي أن تحته صندوقا */
.xt-ax { display: flex; align-items: stretch; gap: 4px; border-bottom: 1px solid var(--u-line); }
/* ===== والقسمةُ بالحاجة لا بالسواء =====
   كان الأساسُ صفرًا (‎flex: 1 1 0‎) فتقتسم المحاورُ الخمسةُ العرضَ بالسواء: كلٌّ خُمسُه
   سواءٌ احتاجه أم لا. و«البطائق المحددة» أطولُها متنًا ومعها عددُها بين قوسين، فإذا
   كبر العددُ فاض المتنُ عن خُمسِه فقُصّ بالنقاط — والشريطُ فيه فضلةٌ لا تُستعمل، إذ
   «المؤقت» و«السجل» لا يملآن خُمسَيهما.
   فالأساسُ صار **متنَ كلِّ محور** (‎auto‎)، والفضلةُ تُقسم عليها بالسواء بعد ذلك: يأخذ
   كلٌّ قدَّه أوّلًا ثمّ حصّتَه من الباقي — فلا يُقصُّ متنٌ وفي الشريط سعة، ويبقى الشريطُ
   مالئًا عرضَه كما كان.
   و‎min-width: 0‎ يبقى حارسًا أخيرًا: إن ضاقت النافذةُ عن الخمسة جميعًا عاد القصُّ
   بالنقاط ولم يفض الشريطُ عن ترويسته */
.xt-ax__i { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-height: var(--xt-axh); padding: 6px 11px; cursor: pointer; background: none;
  border: 0; position: relative;
  color: var(--u-lab); font: 600 11px 'IBM Plex Sans Arabic', sans-serif; white-space: nowrap; }
.xt-ax__i:hover { color: var(--u-tx-strong); }
.xt-ax__i.on { color: var(--xt-gold); }
/* والخط يقصر عن طرفي اللسان (‎8px‎) فيقع تحت اسمه لا تحت فُرجته */
.xt-ax__i.on::after { content: ''; position: absolute; inset-inline: 8px; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--xt-gold); }
.xt-ax__ic { flex: none; display: inline-flex; width: 15px; height: 15px; }
.xt-ax__ic svg { width: 100%; height: 100%; display: block; }
.xt-ax__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.xt-ax__n { flex: none; font-weight: 700; color: var(--u-lab); font-variant-numeric: tabular-nums;
  margin-inline-start: -2px; }
.xt-ax__i.on .xt-ax__n { color: var(--xt-gold); }
/* والمعطل يخبت لسانه كله، فتُقرأ الحال من الشريط بلا فتح محور */
.xt-ax__i.is-off { opacity: .45; }
.xt-ax__i.is-off:hover { opacity: .7; }
/* و«السجل» لا يُفتح: ليس تحته تفصيل يُذكر، ومفتاحه هو كل ما فيه */
.xt-ax__i.is-static { cursor: default; }
.xt-ax__i.is-static:hover { background: none; color: var(--u-lab); }
.xt-ax__i.is-static .xt-sw { cursor: pointer; }
.xt-sw { flex: none; width: 24px; height: 13px; border-radius: 999px; background: var(--u-ctl);
  border: 1px solid var(--u-in-line); position: relative; cursor: pointer; padding: 0; margin-inline-start: 2px; }
.xt-sw::after { content: ''; position: absolute; top: 1px; inset-inline-end: 1px; height: 9px;
  aspect-ratio: 1; border-radius: 50%; background: var(--u-lab); }
.xt-sw.on { background: var(--xt-gold); border-color: var(--xt-gold); }
.xt-sw.on::after { inset-inline-end: auto; inset-inline-start: 1px; background: var(--xt-on); }

/* ===== وسوم النطاق: رقاقات، والعدد بين قوسين ملتصقا باسمه ===== */
.xt-tg { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 12px; }
.xt-tg__w { position: relative; display: inline-flex; min-width: 0; }
.xt-tg__i { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1px solid var(--u-in-line); background: none; color: var(--u-mut);
  font: 600 10.5px 'IBM Plex Sans Arabic', sans-serif; padding: 5px 10px; border-radius: 999px; }
.xt-tg__i:hover { background: var(--u-hov); color: var(--u-tx-strong); }
.xt-tg__i.on { border-color: var(--xt-gold); color: var(--xt-gold);
  background: color-mix(in srgb, var(--xt-gold) 15%, transparent); }
/* والوسم الخاوي يخبت ولا يُخفى: أن ترى «ما أخطأت فيه (٠)» خبر يسرّك */
.xt-tg__i.is-empty { opacity: .45; }
.xt-tg__p { font-variant-numeric: tabular-nums; color: var(--u-lab); font-weight: 700; }
.xt-tg__i.on .xt-tg__p { color: var(--xt-gold); }
/* زر القيمة: سهم ورقم في مقبض داخل جسم الوسم — يُضغط وحده فيفتح قيمه */
.xt-tg__vb { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none;
  padding: 1px 3px; margin-inline: -1px; border-radius: 6px; cursor: pointer; color: inherit; font: inherit; }
.xt-tg__vb:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.xt-tg__ar { flex: none; display: inline-flex; width: var(--xt-tgar);
  height: calc(var(--xt-tgar) / 1.65); color: var(--u-lab); transition: transform .15s; }
.xt-tg__ar svg { width: 100%; height: 100%; display: block; }
.xt-tg__ar.up { transform: rotate(180deg); }
.xt-tg__i.on .xt-tg__ar { color: var(--xt-gold); }
.xt-tg__v { font-weight: 700; white-space: nowrap; }
/* منبثق القيم: صفوف تُقارَن عمودا واحدا، والعدد يلي نصه ملتصقا */
.xt-sb { position: absolute; z-index: 9; top: calc(100% + 5px); inset-inline-start: 0; min-width: 128px;
  background: var(--xt-pan-bg); border: 1px solid var(--u-in-line); border-radius: 9px;
  box-shadow: 0 18px 50px -18px var(--xt-sh); padding: 4px; text-align: start; }
.xt-sb__r { display: flex; align-items: center; justify-content: flex-start; gap: 5px; width: 100%;
  border: 0; background: none; color: var(--u-tx); cursor: pointer; padding: 4px 7px; border-radius: 6px;
  text-align: start; font: 600 10.5px 'IBM Plex Sans Arabic', sans-serif; }
.xt-sb__r:hover { background: var(--u-hov); }
.xt-sb__r.on { background: color-mix(in srgb, var(--xt-gold) 15%, transparent); color: var(--xt-gold); }
.xt-sb__r b { font-variant-numeric: tabular-nums; color: var(--u-lab); font-weight: 700; }
.xt-sb__r.on b { color: var(--xt-gold); }
.xt-sb__cu { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin-top: 3px;
  padding: 5px 7px 1px; border-top: 1px solid var(--u-line); font: 600 10px 'IBM Plex Sans Arabic'; color: var(--u-lab); }
.xt-sb__cu.on { color: var(--xt-gold); }
.xt-sb__cu input { width: 46px; background: var(--u-in-bg); color: var(--u-tx); border: 1px solid var(--u-in-line);
  border-radius: 7px; padding: 3px 6px; text-align: center; font: 700 10.5px 'IBM Plex Sans Arabic';
  font-variant-numeric: tabular-nums; }
.xt-sb__cu.on input { border-color: var(--xt-gold); color: var(--xt-gold); }

/* ===== بطائق الأنواع: شبكة ٢×٢ تملأ ما تحت الوسوم، والترويسة في الذيل ===== */
.xt-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--xt-gap);
  align-items: stretch; grid-auto-rows: 1fr; flex: 1 1 auto; min-height: var(--xt-colh); margin-top: 12px; }
/* ===== وحبّةُ التحديد ورقمُها يتوسّطان **مساحتَهما** لا البطاقةَ كلَّها =====
   جُرّب توسيطُهما على البطاقة بجملتها (خليّةٌ واحدةٌ تسكنها الترويسةُ والجوفُ معًا)،
   فنزلا إلى مركزها بالضبط — وذاك أدنى ممّا ينبغي: الترويسةُ ساكنةُ القاع، والمساحةُ
   التي يملكانها ما فوقها. فمركزُهما مركزُ تلك المساحة، وهو أعلى من مركز البطاقة
   بنصف قامة الترويسة، وذلك حكمُ صاحب الموقع.
   فالبطاقةُ صفٌّ مقلوب: الترويسةُ أوّلُ ولدٍ في القالب وآخرُ ما يُرى (‎column-reverse‎)،
   والجوفُ يأخذ ما بقي ويتوسّط نفسَه (‎.xt-nrow‎: ‎flex: 1 1 auto‎ و‎align-items: center‎)
   — وهي هيئتُها الأولى، رُدَّت إليها */
.xt-col { display: flex; flex-direction: column-reverse; min-width: 0; overflow: hidden;
  border: 1.5px solid var(--u-line); border-radius: var(--xt-r); }
.xt-col.on { border-color: color-mix(in srgb, var(--xt-kc) 60%, transparent); }
.xt-col.is-empty { opacity: .42; }
.xt-col.is-dim:not(.on) { opacity: .52; }
/* ===== ورصيفُ النوع يخفت ولا يذهب =====
   كانت أرضيّتُه ‎none‎ ولا تُرسم إلّا في حال الاختيار — فالمستطيلُ الذي تراه ليس
   جسمًا يُخفى بل **أرضيّةً لا تُصبغ**. فإذا لم يُختَر النوعُ أو خلا من بطائقَ ذهب
   الرصيفُ من أصله، فانفرط الصفُّ: بطاقتان لهما قاعدةٌ واثنتان بلا قاعدة، وتُقرأ
   الشبكةُ مكسورةً لا هادئة.
   فصارت له أرضيّةٌ أبدًا: خافتةٌ في السكون (‎4%‎) وتشتدّ بالاختيار (‎10%‎) — يبقى
   الرصيفُ رصيفًا، ويبقى الاختيارُ مقروءًا في شدّته لا في وجوده.
   والصبغةُ من ‎--xt-kc‎ (لون النوع) لا من رماديٍّ محايد، فيُقرأ كلُّ رصيفٍ بلون نوعه */
.xt-col__hd { display: flex; align-items: center; gap: 7px; width: 100%; cursor: pointer;
  padding: var(--xt-hd) calc(var(--xt-hd) + 1px); border: 0; text-align: start; font: inherit;
  color: var(--u-tx); background: color-mix(in srgb, var(--xt-kc) 4%, transparent); }
.xt-col.on .xt-col__hd { background: color-mix(in srgb, var(--xt-kc) 10%, transparent); }
.xt-col__hd:hover { background: var(--u-hov); }
.xt-col__ic { flex: none; display: inline-flex; width: calc(var(--xt-hdf) * 1.48);
  height: calc(var(--xt-hdf) * 1.48); color: var(--u-lab); }
.xt-col.on .xt-col__ic { color: var(--xt-kc); }
.xt-col__ic svg { width: 100%; height: 100%; display: block; }
/* الاسم وعدده كتلة واحدة تقف بمقدارها — فلا يُدفع العدد إلى الطرف فيُقرأ خبرا مستقلا */
.xt-col__t { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: baseline; gap: 4px; }
.xt-col__nm { min-width: 0; font: 700 var(--xt-hdf) 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--u-tx-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xt-col:not(.on) .xt-col__nm { color: var(--u-lab); }
.xt-col__all { flex: none; font: 700 calc(var(--xt-hdf) * .91) 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--u-lab); font-variant-numeric: tabular-nums; }
.xt-col__bd { flex: 1 1 auto; padding: var(--xt-pad); display: flex; flex-direction: column; gap: 8px; }
.xt-nrow { display: flex; align-items: center; gap: calc(var(--xt-num) * .26); flex: 1 1 auto;
  min-height: calc(var(--xt-num) * 1.2); }
.xt-mk { flex: none; display: inline-flex; border: 0; background: none; padding: 0; cursor: pointer; }
.xt-ck { flex: none; width: calc(var(--xt-num) * .7); height: calc(var(--xt-num) * .7);
  border-radius: calc(var(--xt-num) * .18); border: 1.5px solid var(--u-in-line);
  display: grid; place-items: center; color: var(--xt-on); }
.xt-ck.on { background: var(--xt-kc); border-color: var(--xt-kc); }
.xt-ck svg { width: 66%; height: 66%; opacity: 0; }
.xt-ck.on svg { opacity: 1; }
/* والرقم يُنزَل بنسبة من قدّه: مركز صندوقه ليس مركز رسمه، والمحاذاة تحاذي الصناديق */
.xt-n { font: 700 var(--xt-num)/1 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--xt-kc); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center;
  transform: translateY(calc(var(--xt-num) * var(--xt-nkd) / 100)); }
.xt-col:not(.on) .xt-n { color: var(--u-lab); }

/* ===== ألواح المحاور: شريط لكل سؤال، وفي صدره رأسه ===== */
.xt-qp { display: flex; flex-direction: column; margin-top: 12px; }
.xt-qp__h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px;
  font: 700 11.5px 'IBM Plex Sans Arabic'; color: var(--xt-gold); }
.xt-qp__h2 { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--u-line); }
.xt-qp__r { display: flex; align-items: center; padding: 4px 0; }
/* والخابت يقول نفسه: باهت لا يُضغط، ولا شرح معه — لوح الإعداد ليس موضع تعليم */
.xt-qp__r.is-inert { opacity: .45; }
.xt-qp__r.is-inert .xt-seg button { pointer-events: none; }
.xt-qp__soon { margin: 0; padding: 22px 4px; font: 500 11.5px 'IBM Plex Sans Arabic'; color: var(--u-lab); }

/* ===== القاطعة، ورأسها في صدرها ===== */
.xt-seg { display: inline-flex; background: var(--u-ctl); border-radius: 9px; padding: 2px; gap: 2px; }
.xt-seg button { border: 0; background: none; color: var(--u-mut); cursor: pointer; white-space: nowrap;
  font: 600 11px 'IBM Plex Sans Arabic', sans-serif; padding: 5px 10px; border-radius: 7px;
  display: inline-flex; align-items: center; gap: 6px; }
/* ورسمُ الزرّ بقدّ رسم رأسِه (--xt-seg__hi): الصفُّ واحدٌ فلا يكبر تابعٌ على متبوع */
.xt-seg__bi { flex: none; display: inline-flex; width: 15px; height: 15px; }
.xt-seg__bi svg { width: 100%; height: 100%; display: block; }
.xt-seg button:hover { color: var(--u-tx-strong); }
.xt-seg button.on { background: var(--xt-gold); color: var(--xt-on); }
.xt-seg--hd { align-items: stretch; }
.xt-seg__hd { flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding-inline: 9px 10px; border-inline-end: 1px solid var(--u-line); margin-inline-end: 3px; }
.xt-seg__hi { flex: none; display: inline-flex; width: 15px; height: 15px; color: var(--xt-kc); }
.xt-seg__hi svg { width: 100%; height: 100%; display: block; }
.xt-seg__ht { font: 700 10.5px 'IBM Plex Sans Arabic'; color: var(--u-mut); white-space: nowrap; }
.xt-seg__in { flex: none; display: inline-flex; align-items: center; gap: 5px; padding-inline: 8px;
  font: 600 10.5px 'IBM Plex Sans Arabic'; color: var(--u-lab); }
.xt-seg__in input { width: 52px; background: var(--u-in-bg); color: var(--u-tx); border: 1px solid var(--u-in-line);
  border-radius: 6px; padding: 3px 6px; text-align: center; font: 700 10.5px 'IBM Plex Sans Arabic';
  font-variant-numeric: tabular-nums; }

/* ===== زر الابتداء ===== */
/* ============================================================
   زرّ «ابدأ» — كتلةٌ واحدةٌ شطراها معدِّلٌ وفعل (‎xt-go-lab‎)
   ============================================================
   القيمُ معايَرةٌ بيد صاحب الموقع: استدارةٌ ‎20‎ · حشوُ الفعل ‎35‎ وحشوُ المعدِّل ‎9‎
   · رمزُ الطريقة ‎18‎ وشيفرونُها ‎20‎ · نصُّ الفعل ‎15.5‎ بوزن ‎800‎ وتباعدِ ‎.5‎ بخطّ الهويّة
   · لفظُ الطريقة ‎12‎ · وطلاؤه ذهبٌ بـ‎14٪‎.
   ===== والأركانُ منطقيّةٌ لا فيزيائيّة =====
   ‎border-radius‎ المختصرُ يعدّ الأركانَ بالجهات المرئيّة، والمعدِّلُ أوّلُ المرتَّب —
   وأوّلُ المرتَّب في ‎rtl‎ هو اليمين وفي الإنجليزيّة اليسار. فلو كُتبت بالأرقام لَصحّت في
   وجهٍ وانقلبت في الآخر. فتُكتب بـ‎start/end‎: المعدِّلُ يُقوَّس في **مبدأ** السطر ويُفتح
   إلى الفعل، والفعلُ يُفتح إليه ويُقوَّس في **منتهاه** — في الوجهين بلا قاعدةٍ ثانية.
   ============================================================ */
.xt-gbw { position: relative; display: inline-flex; }
/* ولا هالةَ حوله: كان ‎drop-shadow‎ ذهبيًّا يسيل من تحته فيبدو إنارةً تخرج منه لا ظلًّا
   يقع عليه — والنافذةُ كلُّها بلا هالات، فيشذّ. والذهبُ المصمتُ يكفيه إبرازًا */
.xt-gb { display: inline-flex; align-items: stretch; border-radius: var(--xt-gr); }
.xt-gb button { border: 0; cursor: pointer; display: inline-flex; align-items: center;
  white-space: nowrap; height: 34px; }
/* المعدِّل: ذهبٌ شفّافٌ بحبرٍ ذهبيّ — والفاصلُ شعرةٌ من حبره على حدّه الملاصق للفعل */
.xt-gb__mod {
  gap: 2px; padding-inline: 9px;
  background: color-mix(in srgb, var(--xt-gold) 14%, transparent); color: var(--xt-gold);
  font: 700 12px 'IBM Plex Sans Arabic', sans-serif;
  border-start-start-radius: var(--xt-gr); border-end-start-radius: var(--xt-gr);
  border-start-end-radius: 0; border-end-end-radius: 0;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--xt-gold) 34%, transparent);
}
.xt-gb__mod:hover { background: color-mix(in srgb, var(--xt-gold) 22%, transparent); }
/* ============================================================
   ولا طريقةَ بعدُ: الشِّقُّ ينادي
   ============================================================
   «ابدأ» مطفأٌ حتى تُختار الطريقة، فلا يبقى في الذيل فعلٌ يُستطاع إلّا فتحُ القائمة —
   فيجب أن يُرى أنّه هو المقصود. فيلبس المعدِّلُ حدًّا **مقطَّعًا** من حبره، وهو لغةُ
   «موضعٌ خالٍ يُملأ» في هذا الموقع (‎border: dashed var(--u-gold-dash)‎ — كما في مربّع
   الإضافة). و‎outline‎ لا ‎border‎: الحدُّ يزيد القدَّ فيدفع «ابدأ» ويكسر الكتلة، والمخطَّطُ
   يُرسم فوق التخطيط لا فيه. و‎outline-offset‎ سالبٌ ليقع **داخل** الشقّ لا حولَه،
   ويتبع ‎border-radius‎ فينحني مع ركنه.
   والشَّرَطةُ تُخفَّف: هي غيابٌ لا اسمٌ، فلا تُقرأ بوزن «ورقي» و«رقمي» */
.xt-gb__mod.is-empty {
  outline: 1.4px dashed var(--u-gold-dash);
  outline-offset: -4px;
}
.xt-gb__mod.is-empty .xt-gb__nm { opacity: .7; }
.xt-gb__ch { flex: none; width: 20px; height: 20px; display: inline-flex; transition: transform .18s; }
.xt-gb__ch.up { transform: rotate(180deg); }
.xt-gb__ic { flex: none; width: 18px; height: 18px; display: inline-flex; }
.xt-gb__ch svg, .xt-gb__ic svg { width: 100%; height: 100%; display: block; }
/* الفعل: ذهبٌ مصمتٌ بخطّ الهويّة — أثقلُ حبرًا وأوسعُ حشوًا فلا يُنازعه شطرُه */
.xt-go {
  border: 0; background: var(--xt-gold); color: var(--xt-on); cursor: pointer;
  font: 800 15.5px 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  letter-spacing: .5px; padding-inline: 35px;
  border-start-end-radius: var(--xt-gr); border-end-end-radius: var(--xt-gr);
  border-start-start-radius: 0; border-end-start-radius: 0;
}
.xt-go:hover { filter: brightness(1.07); }
/* وينخفض بالضغط كما تنخفض القبّعة — بأقلَّ منها سفرًا لأنّه لوحٌ لا مفتاح.
   و‎.is-kdown‎ معه: «التالي» يُبلغ بـ‎Enter‎، فلا يصحّ أن يستجيب للفأرة وحدها */
.xt-go:active, .xt-go.is-kdown { transform: translateY(1px); filter: brightness(.95); }
/* ومعطَّلًا يبقى المعدِّلُ حيًّا: تُبدّل الطريقةَ وأنت تُصلح النطاق */
.xt-go[disabled] { background: var(--u-ctl); color: var(--u-lab); cursor: not-allowed; filter: none; }
/* قائمةُ الطريقة: تصعد من الزرّ لا تنزل — الذيلُ في قاع النافذة */
.xt-pop--mode { top: auto; bottom: calc(100% + 8px); min-width: 100%; }
.xt-pop--mode .xt-pop__r { align-items: center; gap: 8px; }



/* ===== مِسطرةُ الاختبار: سطرٌ ساكنٌ لا نتوءٌ ولا لوح =====
   ترث سلوكَ مِسطرة البطاقة ولا تبدّل إلّا الموضع — كما فعلت مِسطرةُ الورقة قبلها.
   و‎position: static‎ يُبطل ‎left‎ الموروثة، وأمّا ‎transform‎ فيعمل على الساكن كما يعمل
   على المطلق فلا يُبطله الموضع — فيُنقض بنفسه (‎translateX(-50%)‎ كان يسحبها نصفَ
   عرضها بعد أن وسّطتها الهوامش) */
.xt-zbar {
  position: static; transform: none; margin: 5px auto 0; width: fit-content;
  flex: none; gap: 3px; color: var(--u-lab);
}
.xt-zbar .cd-zval { font-size: 9.5px; min-width: 30px; }
.xt-zbar .cd-zb { width: 15px; height: 15px; font-size: 12px; }

/* ===== والتقريبُ يقع على جوف السؤال وحدَه =====
   ‏‎--cd-z‎ يكتبه ‎cdZoom‎ على **المسرح** (‎w.el‎)، ونافذةُ الاختبار من نوافذ المكدَّس
   فلها مسرحُها — فالتوكنُ يصلها بلا سطرٍ يُزاد.
   و‎zoom‎ لا ‎transform: scale‎: الأوّلُ يُكبّر **صندوقَ التخطيط** فيفيض الجوفُ فيُمرَّر،
   والثاني يرسم على قدّه القديم فيُقصّ ما خرج ولا يُبلَغ. وهي حيلةُ ‎.cd-in‎ نفسُها
   في المحرّر — والحرفُ والصورةُ والحشوُ تكبر بنسبةٍ واحدة كما يفعل أنكي في ‎body‎.
   ===== و«الإخفاء» يستوي معها ولا يحتاج بابًا ثانيًا =====
   في المحرّر احتاج بابًا خاصًّا (سقفُ عرضٍ يتبع ‎--cd-z‎) لأنّ لوحَ الأقنعة مسمَّرٌ على
   **الحقل** بـ‎inset: 0‎، فلو كبرت الصورةُ في حقلٍ ثابتٍ زاغت الأقنعةُ عنها.
   وأمّا ههنا فالأقنعةُ (‎.xt-iom‎) مواضعُها **نِسَبٌ من ‎.xt-io‎** (‎inset-inline-start‎
   و‎top‎ و‎width‎ و‎height‎ كلُّها ‎%‎)، و‎.xt-io‎ صندوقٌ يلبس صورتَه. فإذا كبر الصندوقُ
   كبرت الصورةُ والنِّسَبُ معًا بنسبةٍ واحدة — فتبقى الأقنعةُ على مواضعها بلا حساب.
   والمِسطرةُ خارجَ المُقرَّب: لو دخلت فيه لَكبرت معه، والأداةُ لا تكبر بما تقيسه */
.xt-qz { zoom: var(--cd-z, 1); }

/* ===== السؤال: يتوسط جوفها ويكبر معها =====
   والجوف عمود يملأ ما بينهما، فالسؤال في وسطه رأسيا وأفقيا — ولو صف واحد */
/* ===== والتوسيطُ ‎safe‎: وإلّا ضاع أعلى المُقرَّب =====
   الجوفُ عمودٌ (‎flex-direction: column‎) فـ‎justify-content‎ محورُه الرأسيّ. والتوسيطُ
   الصارمُ إذا فاض المتنُ عن الصندوق **دفع الفائضَ إلى الطرفين معًا** — فيخرج أعلاه
   فوق مبدأ التمرير، و‎scrollTop‎ لا يكون سالبًا، فيصير الجزءُ العلويُّ **غيرَ قابلٍ
   للوصول**: ترى بقيّةً فوق ولا ترقى إليها. وهي علّةُ التوسيط المعروفة في المرن.
   و‎safe‎ يتراجع إلى البداية عند الضيق ويبقى توسيطًا عند السعة — فالسؤالُ يتوسّط ما
   دام يسع، فإذا كبر بالتقريب بدأ من رأسه وتُصفَّح كلُّه.
   وهي الحيلةُ التي عولجت بها ورقةُ الملخّص حرفًا (‎.sh-roll { align-items: safe center }‎)
   — والمحورُ يختلف لأنّ اتّجاه العمود يختلف، والمبدأُ واحد */
.xt-bd:has(> .xt-qz) { justify-content: safe center; }
.xt-qz { display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 620px; margin: 0 auto; text-align: center; }
.mmodal__card.is-exam.is-max .xt-qz { max-width: 860px; }
/* ولم يبقَ فوق السؤال شيء: ذهب رمزُ النوع واسمُه، ثمّ رقمُ الوجه، ثمّ «معادة».
   فرُفع الوعاءُ وما فيه — قواعدُ لا يبنيها شيءٌ زينةٌ في الملفّ */
.xt-qz__q { width: 100%; font: 500 16px/1.9 'IBM Plex Sans Arabic', sans-serif; color: var(--u-tx); }
.xt-qz__q img, .xt-qz__a img { max-width: 100%; height: auto; display: inline-block; }
.xt-qz__sep { width: 44px; height: 1px; background: var(--u-line); }
.xt-qz__a { width: 100%; font: 500 15px/1.9 'IBM Plex Sans Arabic', sans-serif; color: var(--u-tx-strong); }
/* والمتن الإضافي خبر ثان لا جواب: يخبت ويصغر */
.xt-qz__x { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--u-line);
  font: 400 12.5px/1.8 'IBM Plex Sans Arabic', sans-serif; color: var(--u-mut); }
.xt-qz__none { color: var(--u-lab); font: 500 12px 'IBM Plex Sans Arabic', sans-serif; }

/* ===== الفراغ: مكانه محجوز قبل أن يملأ =====
   الطمس حبر لا صندوق: لو رسم صندوقا لتبدل عرض السطر يوم يملأ، فترقص الجملة */
.xt-cz { color: var(--xt-gold); font-weight: 700;
  border-bottom: 2px solid color-mix(in srgb, var(--xt-gold) 55%, transparent); padding: 0 3px; }
.xt-cz.is-on { border-bottom-color: var(--xt-gold); }

/* ===== الإخفاء: القناع نسبة من الصورة لا بكسلات =====
   فيصح على أي قد لها — ومنه يصح التكبير بلا حساب يعاد */
.xt-io { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.xt-io img { max-width: 100%; height: auto; display: block; border-radius: 8px; }
.xt-iom { position: absolute; display: block; border-radius: 3px; }
.xt-iom.is-ell { border-radius: 50%; }

/* ===== خيارات المتعدد: صف لكل خيار ورقمه في صدره ===== */
.xt-ch { width: 100%; display: flex; flex-direction: column; gap: 7px; }
/* ===== وجوفُ الخيار ورقُ النافذة لا سطحٌ فوقه =====
   كان ‎--u-surf‎: بياضٌ شفيفٌ يُركَّب على الورق فيخرج أفتحَ منه — فتُقرأ الخياراتُ
   **مستطيلاتٍ مرفوعةً** على الصفحة، وهي ليست أسطحًا بل حدودٌ تحوي نصًّا.
   و‎transparent‎ لا ‎var(--cd-fld)‎ وإن استويا اليوم: الشفّافُ **يتبع ما تحته** فيصحّ
   لو تبدّل الورقُ أو نزلت الخياراتُ يومًا على سطحٍ آخر، والمكتوبُ حرفًا ينفصل ولا يصيح.
   ويبقى الحدُّ: هو الذي يرسم المستطيل، ولونُ الحكم يقع عليه لا في جوفه */
.xt-ch__i { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start;
  cursor: pointer; padding: 9px 12px; border-radius: 10px; font: 500 13.5px 'IBM Plex Sans Arabic', sans-serif;
  background: transparent; border: 1.5px solid var(--u-line); color: var(--u-tx); }
.xt-ch__i:hover { border-color: color-mix(in srgb, var(--xt-gold) 55%, transparent); }
.xt-ch__n { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px;
  background: var(--u-ctl); color: var(--u-lab); font: 700 10.5px 'IBM Plex Sans Arabic', sans-serif;
  font-variant-numeric: tabular-nums; }
.xt-ch__t { flex: 1 1 auto; min-width: 0; }
/* والحكم يصبغ الحد والرقم ولا يغرق الصف: النص يقرأ بعد الحكم كما قرئ قبله */
/* ===== والحكمُ يصبغ الحدَّ ولا يملأ الجوف =====
   كان مع الحدِّ **غَسلةٌ** في جوف المستطيل (‎color-mix … 14%‎) — فيعود الخيارُ سطحًا
   ملوّنًا مرفوعًا على الورق، وهو ما رُفع عنه قبل قليل حين صار جوفُه شفّافًا.
   ولا حاجةَ إليها: الحدُّ ‎1.5px‎ مصمتٌ بلونه، والرقمُ في صدره مصمتٌ به كذلك — علامتان
   تكفيان. والغَسلةُ فوقهما تُثقل صفًّا يُقرأ نصُّه بعد الحكم كما يُقرأ قبله. */
.xt-ch__i.is-ok { border-color: var(--xt-ok); }
.xt-ch__i.is-ok .xt-ch__n { background: var(--xt-ok); color: var(--xt-on); }
.xt-ch__i.is-no { border-color: var(--xt-no); }
.xt-ch__i.is-no .xt-ch__n { background: var(--xt-no); color: var(--xt-on); }
/* ============================================================
   نسبةُ من وقع جوابُه على هذا الخيار — في طرف مستطيله
   ============================================================
   ‏‎.xt-ch__t‎ مرنٌ يملأ ما بين الرقم والنسبة، فتُدفع النسبةُ إلى الطرف بلا
   ‎margin-inline-start: auto‎ ولا موازنٍ خاوٍ — الصفُّ يفعلها من نفسِه.
   و‎flex: none‎ فلا تنكمش على رقمها إذا طال متنُ الخيار؛ ورقمٌ مقصوصٌ كذب.
   و‎tabular-nums‎ فلا يرقص الصفُّ بتبدّل الأرقام (‎7%‎ و‎70%‎ عرضُهما واحد).
   و‎ltr‎ لأنّ ‎%‎ محرفٌ محايدٌ يتبع ما حوله فيقع يمينَ الرقم في صفحةٍ عربيّة.
   ولا لونَ لها من حكم الخيار: الصوابُ مخضَّرٌ بحدّه وحبّته، فلو خُضّرت النسبةُ معه
   لَقالت الشيءَ مرّتين. وهي **خبرُ القرّاء** لا حكمٌ عليك، فحبرُها حبرُ الخبر.
   ============================================================ */
.xt-ch__p {
  flex: none; font: 700 12px 'IBM Plex Sans Arabic', sans-serif;
  color: var(--u-lab); font-variant-numeric: tabular-nums; direction: ltr;
  padding-inline-start: 4px;
}

/* ===== ذيل الاختبار: حكمك، أو تقدمك ===== */
.xt-act { display: flex; align-items: center; justify-content: center; gap: 8px; }
.xt-jg { border: 1.5px solid var(--u-in-line); border-radius: 9px; background: none; cursor: pointer;
  color: var(--u-tx); font: 700 12px 'IBM Plex Sans Arabic', sans-serif; padding: 5px 18px; }
.xt-jg--ok { border-color: var(--xt-ok); color: var(--xt-ok); }
.xt-jg--ok:hover { background: color-mix(in srgb, var(--xt-ok) 14%, transparent); }
.xt-jg--no { border-color: var(--xt-no); color: var(--xt-no); }
.xt-jg--no:hover { background: color-mix(in srgb, var(--xt-no) 14%, transparent); }

/* ============================================================
   زرُّ الكشف: مفتاحٌ يُضغط وإلى جانبه قولُه
   ============================================================
   القبّعةُ مأخوذةٌ من مرقاب: ‎2-pages/home/home.css‎ §«Physical Enter Key»
   (‎.phys-enter-key‎ و‎.pek-en‎ و‎.pek-icon‎). والمنقولُ هيئتُها وحركتُها لا ألوانُها:
     · سطران في عمود (‎Enter‎ مونو فوق و‎↵‎ تحت) محاذيان إلى جهة البدء، وجسمٌ كاملُ الاستدارة
     · والحركةُ ظلٌّ صلبٌ لا انتقالُ لون: ‎0 3px 0‎ تحتها، فإذا ضُغطت نزلت ‎2px‎
       وقصُر الظلُّ إلى ‎0 1px 0‎ — فتنغرز كما ينغرز مفتاحٌ حقيقيّ. وهي منقولةٌ برقمَيها
   والقدُّ وحدَه معايَر: مرقاب يضعُها في شريطٍ قامتُه ‎119‎ فتسعُها ‎64‎؛ وذيلُنا ‎50‎
   (‎--xt-wf‎)، وهي قامةُ إطارٍ لا متن (‎box-sizing: border-box‎ على الكلّ): يُطرح
   منها حدٌّ ‎1‎ وحشوتان ‎8‎ فيبقى للمتن ‎33‎. فالقبّعةُ ‎31‎ دونَه — فيبقى الذيلُ على
   حدّه الأدنى لا يزداد بكسلا، ولا يقفز السؤالُ يوم يُكشف الجوابُ ويذهب الزرّ.
   والظلُّ لا يُحسب في ذلك: ‎box-shadow‎ لا يأخذ مكانًا في التخطيط، والثلاثةُ تقع
   في حشوة الذيل السفلى (وهي ‎8‎) فلا تُقصّ ولا تتجاوز حدَّ النافذة.
   والخطُّ لا يُقاس على القدّ: نسبةُ مرقاب (‎.68rem‎ من ‎64‎) تُعطي ‎6.5px‎ ههنا — وهو
   لطخةٌ لا حرف. فيُثبَّت عند ‎9.5‎ يقارب ‎.xt-ch__n‎ في النافذة نفسِها، والظلُّ يبقى
   ‎3px‎ والسَّفرُ ‎2px‎: مفتاحٌ صغيرٌ ينغرز بكسلَين كما ينغرز الكبير */
.xt-rv { display: inline-flex; align-items: center; gap: 11px;
  border: 0; background: none; padding: 0; cursor: pointer; }
.xt-rvw { display: inline-flex; align-items: center; }
/* ===== واسمُه ‎.xt-sumb‎ لا ‎.xt-sum‎ =====
   ‏‎.xt-sum‎ كانت يومَها ورقةَ النتيجة في آخر الاختبار (‎width: 100%‎ وعمودٌ متوسّط).
   فلمّا سُمّي الزرُّ باسمها ورث عرضَها فصار ‎133px‎ بدل ‎22‎ — قِيس فبان.
   (وقد صارت الورقةُ ‎.xt-st‎ في ٢٥ أغسطس، فالاسمُ حرٌّ اليومَ — والدرسُ باقٍ:
   ‏‎_cls-lint.py‎ يُسأل قبل التسمية.)
   ===== ونزل إلى ركن الذيل بحكم صاحب الموقع (٢٥ أغسطس) =====
   كان عائمًا على حافّة صفّ الكشف ثمّ صفّ الحكم، مسمَّرًا بإزاحةٍ مكتوبة (‎-34px‎)
   وذهبيًّا. فصار عضوًا في صفّ الركن بين الترس والعلم، وحبرُه حبرُهما — وهيئتُه في
   القاعدة المدمَجة فوق. فذهب معه: العَومُ وإزاحتُه وتوسيطُه بـ‎margin-top‎ وذهبُه،
   ومرجعُ العَوم (‎.xt-flo‎) إذ لم يبقَ ما يُعلَّق على صفّ */
/* ===== والقولُ بخطّ المفتاح لا بخطّ النافذة =====
   عائلتُه عائلةُ ‎.xt-key__en‎ حرفًا ووزنُه وزنُه (‎500‎)، فيُقرأ الاثنان جسمًا واحدًا.
   والعربيّةُ لا مونو لها في خطوط الموقع (المحمّلُ اثنان: ‎IBM Plex Sans Arabic‎
   و‎KFUPM Display‎)، ولا في ‎Consolas‎ ولا ‎Courier New‎ حرفٌ عربيّ — فتحطُّ الأحرفُ
   على خطّ النِّظام (‎Segoe UI‎ أو ‎Tahoma‎ في ويندوز). وذاك مقصودٌ ههنا: وجهٌ
   نِظاميٌّ محايدٌ يليق بقبّعة مفتاح. ولو أُلحق خطُّ الموقع بآخر القائمة لَعاد
   كما كان ولم يتغيّر شيءٌ — إذ لا حرفَ لاتينيًّا في «أظهر الجواب» أصلًا.
   ولا ‎letter-spacing‎ معه وإن كان على ‎Enter‎: التّفريجُ يقطع وصلَ الحروف العربيّة */
.xt-rv__t { font: 500 11px ui-monospace, Consolas, 'Courier New', monospace; color: var(--u-lab); }
.xt-rv:hover .xt-rv__t { color: var(--u-tx); }
/* وطوقُ التركيز مطلوبٌ ههنا وإن لم يكن في ‎.xt-go‎: ذاك ذهبٌ مصمتٌ يُرى،
   وهذا بلا خلفيّةٍ ولا حدٍّ — فمن تنقّل بـ‎Tab‎ لم يرَ أين هو */
.xt-rv:focus-visible { outline: 2px solid var(--xt-gold); outline-offset: 4px; border-radius: 999px; }
.xt-key { flex: none; display: inline-flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 2px;
  /* والنِّسبةُ عَرضًا إلى قامةٍ نسبةُ مرقاب عينُها: ‎102.5 ÷ 64‎ */
  width: 49.7px; height: 31px; padding: 0 7.75px;
  background: var(--u-ctl); border: 1px solid var(--xt-kedge); border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--xt-ktop), 0 3px 0 var(--xt-kdeep);
  color: var(--u-lab);
  transition: color .2s, background .2s, box-shadow .1s, transform .1s; }
.xt-rv:hover .xt-key { color: var(--u-tx-strong);
  background: color-mix(in srgb, var(--u-ctl) 78%, var(--u-tx) 22%); }
/* ===== والمغروزةُ تُوصف مرّةً للفأرة واللوحة معًا =====
   ‏‎:active‎ لا يعرف لوحةَ المفاتيح، و‎.is-kdown‎ تكتبها الجافا عند ‎keydown‎ وتنزعها عند
   ‎keyup‎. فيُجمعان في قاعدةٍ واحدة، إذ لا فرقَ بين إصبعٍ على الفأرة وإصبعٍ على المفتاح.
   ومعها البريقُ الذي يأتي من ‎:hover‎ في حال الفأرة: من ضغط باللوحة ليس فوق الزرّ
   مؤشِّرٌ، فلولا هذا لَبدت ضغطةُ اللوحة أخفتَ من ضغطة الفأرة على الشيء نفسِه */
.xt-rv:active .xt-key, .xt-jgk:active .xt-key, .xt-key.is-kdown {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 var(--xt-ktop), 0 1px 0 var(--xt-kdeep); }
.xt-key.is-kdown { color: var(--u-tx-strong);
  background: color-mix(in srgb, var(--u-ctl) 78%, var(--u-tx) 22%); }
.xt-key__en { font: 500 9.5px/1 ui-monospace, Consolas, 'Courier New', monospace; letter-spacing: .05em; }
.xt-key__ic { font-size: 15px; line-height: 1; }
/* والسَّهمُ ينعطف إلى جهة المبدأ: في العربيّة يسارًا كما رُسم، وفي اللاتينيّة يمينًا —
   وهي قاعدةُ مرقاب نفسُها (‎:root[dir="ltr"] .pek-icon‎). و‎scale‎ لا ‎transform‎:
   فلا يُزاحِم ‎translateY‎ الذي يقع على القبّعة عند الضغط */
html[data-lang="en"] .xt-key__ic { scale: -1 1; }

/* ===== وقبّعةٌ برمزٍ واحد: أختُ ‎.xt-key‎ لا نسخةٌ منها =====
   الفيزياءُ كلُّها موروثةٌ (الحدُّ والظلُّ والغَورُ والانتقال) فلا تُكتب مرّتين ولا
   تفترقان يوم يُعدَّل أحدُهما. ولا يُبدَّل إلّا ما يقتضيه رمزٌ واحدٌ مكان سطرين:
   يتوسّط بدل أن يُحاذي البدء، ويصير الجسمُ مربّعًا بدل ‎49.7‎.
   والاستدارةُ ‎9‎ لا ‎999‎: الحلقةُ تصلح لجسمٍ عريضٍ كـ‎Enter‎، وأمّا المربّعُ فتجعله
   قرصًا لا مفتاحًا — وعلى اللوحة الحقيقيّة ‎+‎ و‎−‎ مربّعان و‎Enter‎ عريض */
.xt-key--one { align-items: center; justify-content: center;
  width: 31px; padding: 0; border-radius: 9px; }
.xt-key__s { font: 400 16px/1 ui-monospace, Consolas, 'Courier New', monospace; }

/* ===== زرّا الحكم: توأما ‎.xt-rv‎ =====
   الجسمُ عارٍ (لا حدَّ ولا خلفيّة) والقبّعةُ وحدَها هي المرئيّة — كزرّ الكشف سواءً.
   واللونُ في القول لا في القبّعة: هو موضعُه اليومَ في ‎.xt-jg‎، فلا يُنقل */
.xt-jgk { display: inline-flex; align-items: center; gap: 9px;
  border: 0; background: none; padding: 0; cursor: pointer; }
.xt-jgk__t { font: 500 11px ui-monospace, Consolas, 'Courier New', monospace; }
.xt-jgk--ok .xt-jgk__t { color: var(--xt-ok); }
.xt-jgk--no .xt-jgk__t { color: var(--xt-no); }
.xt-jgk:hover .xt-key { color: var(--u-tx-strong);
  background: color-mix(in srgb, var(--u-ctl) 78%, var(--u-tx) 22%); }
.xt-jgk:focus-visible { outline: 2px solid var(--xt-gold); outline-offset: 4px; border-radius: 999px; }

/* ===== ورقة النتيجة ===== */
/* ============================================================
   ورقةُ الإحصاءات — رقمٌ كبيرٌ ثمّ زمنٌ ثمّ ثلاثةُ أعداد
   ============================================================
   عمودٌ متوسّطٌ ترتيبُه ترتيبُ القراءة: ما يُقرأ بلمحةٍ فوق، وما يُقرأ بتدقيقٍ تحت.
   والفُرَجُ بينها ليست سواءً: النسبةُ والزمنُ **جسمٌ واحد** (رقمٌ وتفسيرُه) فتلتصقان،
   وصفُّ الأعداد خبرٌ ثانٍ فيُفصل.
   ============================================================ */
.xt-st {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; padding: 6px 0;
}
/* ===== وترويسةٌ بلا عنوان: المقبضُ وحدَه فوق النسبة =====
   ذهب لفظُ «الإحصاءات» بحكم صاحب الموقع — والنافذةُ لا تُفتح إلّا على إحصاءات،
   فلفظٌ يقول ما تراه بعينك حشوٌ يصرف سطرًا. فبقي المقبضُ ملاصقًا لِما يقلبه */
.xt-st__hd { display: flex; justify-content: center; margin-bottom: 12px; }
.xt-st__seg {
  display: inline-flex; border: 1px solid var(--u-line); border-radius: 999px;
  overflow: hidden;
}
.xt-st__seg button {
  border: 0; background: none; cursor: pointer; padding: 4px 13px;
  font: 500 11px 'IBM Plex Sans Arabic', sans-serif; color: var(--u-lab);
  transition: background .15s, color .15s;
}
.xt-st__seg button:hover { color: var(--u-tx-strong); }
.xt-st__seg button.on { background: var(--u-gold); color: var(--xt-on); font-weight: 700; }
/* ===== النسبةُ وزمنُها جسمٌ واحد =====
   ‏‎fit-content‎ فيضيق الوعاءُ على أوسع ابنيه — وهو النسبةُ غالبًا. فيصير عرضُها هو
   العرضَ الذي يُبسط عليه الزمنُ تحتها */
.xt-st__big {
  display: flex; flex-direction: column; align-items: stretch;
  width: fit-content; margin: 0 auto;
}
.xt-st__pct {
  font: 700 74px/1 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--u-tx-strong); font-variant-numeric: tabular-nums; letter-spacing: -1px;
  text-align: center;
  /* و‎ltr‎ عليها: ‎%‎ محرفٌ محايدٌ يتبع ما حوله، فيقع يمينَ الرقم في صفحةٍ عربيّة
     (‎%100‎). والنسبةُ تُكتب رقمًا ثمّ علامةً في كلّ لغة */
  direction: ltr;
}
/* والزمنُ محرفًا محرفًا يبلغ طرفَي النسبة — بلا لفظٍ معه */
.xt-st__dur {
  display: flex; justify-content: space-between; width: 100%;
  margin-top: 6px; direction: ltr;
  font: 500 40px/1 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--u-lab); font-variant-numeric: tabular-nums;
}
.xt-st__dur i { font-style: normal; }
.xt-st__row {
  margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 30px;
}
.xt-st__row span {
  display: inline-flex; align-items: baseline; gap: 7px; color: var(--u-lab);
  font: 500 14.5px 'IBM Plex Sans Arabic', sans-serif;
}
.xt-st__row b {
  font: 700 32px 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--u-tx-strong); font-variant-numeric: tabular-nums;
}
.xt-st__row span.is-ok b { color: var(--xt-ok); }
.xt-st__row span.is-no b { color: var(--xt-no); }
/* ===== وجوفُ الورقة يتوسّط ما فيه =====
   ‏‎.xt-bd‎ عمودٌ مرنٌ أصلُه ‎flex-start‎، فتعلق الكتلةُ في رأسه ويبقى تحتها فراغُ
   النافذة كلِّه. و‎safe‎ تحرس الفيض: إن طالت الكتلةُ عن الجوف رجع التوسيطُ إلى
   البدء فلا يُقصّ رأسُها في منطقةٍ لا تُمرَّر إليها.
   وهو نظيرُ ‎:has(> .xt-qz)‎ القائم للسؤال — القاعدةُ نفسُها لجوفٍ آخر */
.xt-bd:has(> .xt-st) { justify-content: safe center; }

/* ============================================================
   لوحُ الاختبارات الماضية
   ============================================================
   بطاقاتٌ في عمودٍ واحد: ترويسةٌ (المادةُ وتاريخُها) ثمّ حصادٌ ثمّ أفعال.
   وألوانُها ألوانُ الموقع لا ألوانَ الاختبار: اللوحُ في الصفحة لا في نافذة البطائق،
   فلا تصله ‎--xt-*‎ ولا ‎--cd-*‎ — تلك مقصورةٌ على حامليها (عطبٌ مقيسٌ في هذا المشروع).
   ============================================================ */
#panel-past { padding: 22px clamp(12px, 3vw, 34px) 60px; }
.pex-list {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 760px; margin: 0 auto;
}
.pex-c {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 9px;
  transition: border-color .15s;
}
.pex-c:hover { border-color: color-mix(in srgb, var(--c-gold) 45%, transparent); }
/* والمكتملُ يُعلَّم بخيطٍ في حافّته لا بلونٍ يغمر البطاقة: خبرٌ في الطرف لا صياح */
.pex-c.is-done { border-inline-start: 3px solid color-mix(in srgb, var(--c-gold) 70%, transparent); }
.pex-c__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pex-c__nm {
  font: 700 14.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pex-c__ts {
  flex: none; font: 500 11.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft);
}
.pex-c__who { font: 500 11.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft); margin-top: -4px; }
/* وصفُّ الحصاد: النسبةُ أوّلًا ثمّ زمنُها ثمّ الأعداد — ترتيبُ ورقة الإحصاءات نفسُه */
.pex-c__st { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.pex-c__pct {
  font: 700 24px 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--c-ink); font-variant-numeric: tabular-nums; direction: ltr;
}
.pex-c__dur {
  font: 500 13px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums; direction: ltr;
}
.pex-c__q {
  display: inline-flex; align-items: baseline; gap: 4px;
  font: 500 11.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft);
}
.pex-c__q b {
  font: 700 14px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.pex-c__q.is-ok b { color: #3f8a52; }
.pex-c__q.is-no b { color: #b03a52; }
/* وموضعُك من الطابور في الطرف المقابل: خبرُ «أين وقفتَ» للذي لم يكتمل وحدَه */
.pex-c__at {
  margin-inline-start: auto; font: 700 12px 'IBM Plex Sans Arabic', sans-serif;
  color: var(--c-gold); font-variant-numeric: tabular-nums; direction: ltr;
}
.pex-c__act { display: flex; gap: 8px; align-items: center; }
.pex-b {
  font: 600 12px 'IBM Plex Sans Arabic', sans-serif; cursor: pointer;
  padding: 6px 15px; border-radius: 999px;
  border: 1px solid var(--border); background: none; color: var(--c-ink);
  transition: border-color .15s, background .15s, color .15s;
}
.pex-b:hover { border-color: var(--c-gold); color: var(--c-gold); }
.pex-b--gold { background: var(--c-gold); border-color: var(--c-gold); color: #16272b; }
.pex-b--gold:hover { color: #16272b; filter: brightness(1.06); }
/* والسلّةُ في منتهى الصفّ: فعلٌ لا يُقصد إلّا قصدًا، فلا يُجاور ما يُضغط كثيرًا */
.pex-b--del {
  margin-inline-start: auto; padding: 6px; width: 30px; height: 30px;
  display: inline-grid; place-items: center; border-color: transparent; color: var(--c-ink-soft);
}
.pex-b--del svg { width: 16px; height: 16px; display: block; }
.pex-b--del:hover { border-color: transparent; background: color-mix(in srgb, #b03a52 14%, transparent); color: #b03a52; }
.pex-empty {
  max-width: 520px; margin: 60px auto; text-align: center;
  display: flex; flex-direction: column; gap: 7px;
}
.pex-empty p { margin: 0; font: 700 15px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink); }
.pex-empty span { font: 500 12.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft); }

/* ============================================================
   لوحُ الإحصائيات — أرقامٌ ثمّ سنةٌ في مربّعات ثمّ أين وقع زمنُك
   ============================================================
   والشبكةُ **تُقرأ من اليمين**: أعمدةٌ في صفٍّ اتّجاهُه اتّجاهُ الصفحة، فالأقدمُ يمينًا
   واليومُ في الطرف الآخر. ولا يُقلب لها اتّجاهٌ ولا تُكتب لها ‎ltr‎ — الصفُّ يفعلها.
   والمربّعُ يُلوَّن بما **أجبتَ** لا بما جلستَ: الجلوسُ يقع بالقراءة، والجوابُ فعلٌ منك.
   ============================================================ */
#panel-stats { padding: 22px clamp(12px, 3vw, 34px) 60px; }
/* والمقاسُ يُعلَن على اللوح لا على الشبكة وحدَها: يبلغه المفتاحُ أسفلَها وقضبانُ
   المواد — مصدرٌ واحدٌ لثلاثة مواضع فلا تفترق مربّعاتُها */
.sx { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.sx-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sx-t {
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface);
  padding: 13px 15px; display: flex; flex-direction: column; gap: 2px;
}
.sx-t__k { font: 500 11.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft); }
.sx-t__v {
  font: 700 26px 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.sx-t__s { font: 500 11px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft); }

.sx-cal {
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface);
  padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 9px;
}
.sx-cal__hd { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.sx-cal__hd b {
  font: 700 20px 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.sx-cal__hd > span { font: 500 12px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft); }
/* والسلسلةُ في الطرف المقابل: خبرٌ ثانٍ لا تتمّةٌ للأوّل */
.sx-cal__st {
  margin-inline-start: auto; display: inline-flex; align-items: baseline; gap: 5px;
  font: 500 12px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft);
}
.sx-cal__st i {
  font-style: normal; font: 700 17px 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--c-gold); font-variant-numeric: tabular-nums;
}
.sx-cal__st em { font-style: normal; opacity: .75; font-size: 11px; }
/* ===== الشبكة: عمودٌ لكلّ أسبوع، سبعةُ مربّعاتٍ فيه =====
   و‎overflow-x: auto‎ لأنّ ثلاثةً وخمسين عمودًا لا تسع شاشةً ضيّقة — والسنةُ لا تُقصّ
   ولا تُصغَّر حتى تختفي، بل تُمرَّر. والمقاسُ توكنٌ واحدٌ يتبعه المربّعُ والفجوةُ معًا */
.sx-grid, .sx-mons { display: flex; gap: var(--sx-g); }
.sx-grid { overflow-x: auto; padding-bottom: 3px; }
.sx-mons { overflow: hidden; }
.sx-mo {
  flex: none; width: var(--sx-d); font: 500 9.5px 'IBM Plex Sans Arabic', sans-serif;
  color: var(--c-ink-soft); white-space: nowrap; overflow: visible;
}
.sx-wk { flex: none; display: flex; flex-direction: column; gap: var(--sx-g); }
.sx-d {
  width: var(--sx-d); height: var(--sx-d); border-radius: 3px; flex: none;
  background: var(--sx-l0); display: block;
}
.sx-d--x { background: none; }
.sx-d[data-l="1"] { background: var(--sx-l1); }
.sx-d[data-l="2"] { background: var(--sx-l2); }
.sx-d[data-l="3"] { background: var(--sx-l3); }
.sx-d[data-l="4"] { background: var(--sx-l4); }
.sx-key {
  display: flex; align-items: center; gap: 3px; margin-inline-start: auto;
  font: 500 10.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft);
}
.sx-key span { margin: 0 4px; }
.sx-key .sx-d { --sx-d: 10px; }

.sx-top {
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface);
  padding: 13px 16px; display: flex; flex-direction: column; gap: 8px;
}
.sx-top__t { margin: 0 0 2px; font: 700 12.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink); }
.sx-top__r { margin: 2px 0 0; font: 500 11px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft); }
/* وصفُّ المادة: اسمٌ بعرضٍ ثابتٍ ثمّ قضيبٌ يملأ ما بقي ثمّ رقمٌ لا ينكمش —
   فتستوي القضبانُ على خطٍّ واحدٍ مهما طالت الأسماء أو قصرت */
.sx-bar { display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: 10px; }
.sx-bar__n {
  font: 500 12px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sx-bar__t { height: 7px; border-radius: 99px; background: var(--sx-l0); overflow: hidden; }
.sx-bar__t i { display: block; height: 100%; background: var(--c-gold); border-radius: 99px; }
.sx-bar__v {
  font: 600 11.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sx-foot { margin: 0; text-align: center; font: 500 11.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--c-ink-soft); }

/* ============================================================
   رفُّ الموارد في القُمرة — أربعةُ أبواب
   ============================================================
   الصندوقُ ‎.nk-rect‎ نفسُه (فيرث ورقَه وحدَّه)، ويُزاد له صفٌّ تحت عنوانه.
   والأزرارُ تتقاسم العرضَ بالتساوي (‎1fr‎ لكلٍّ) لا بمقاسٍ يتبع اللفظ: أربعةٌ
   متساويةٌ تُقرأ رفًّا، ومختلفةٌ تُقرأ كومةً. وتنزل عمودًا في الشاشة الضيّقة.
   وألوانُها ألوانُ القُمرة (‎--nk-*‎) لا ألوانَ الصفحة: هي ابنتُها فترثها.
   ============================================================ */
#nook .nk-res { display: flex; flex-direction: column; }
#nook .nk-res__row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 10px 16px 14px;
}
#nook .nk-res__b {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 10px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--nk-line); background: transparent;
  color: var(--nk-title); font: 600 12.5px 'IBM Plex Sans Arabic', sans-serif;
  transition: background .15s, border-color .15s, color .15s;
}
#nook .nk-res__b:hover {
  background: rgba(201, 162, 92, .14); border-color: #c9a25c; color: var(--nk-ink);
}
/* والأيقونةُ لا تنكمش ولا تكبر: ‎.tab-ic‎ في الشريط لها قدُّها، وههنا قدٌّ آخر */
#nook .nk-res__b svg { width: 17px; height: 17px; flex: none; display: block; }
#nook .nk-res__b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  #nook .nk-res__row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   الرفُّ مفتوحًا — الصندوقُ يتوسّع وواجهةُ المادّة تسكن جوفَه
   ============================================================
   ‏‎#cm-ui‎ تُعار كما هي (هي المبنيّةُ لهذه الأقسام)، ويُخفى منها ما لا يخصّ الرفَّ:
   ترويستُها (اسمُ المادّة و✕) وشريطُ أقسامها السبعة — فالقسمُ مُعلَنٌ في ترويسة
   الصندوق، والخروجُ ببابه.
   ولا تُنسخ لها قاعدةٌ ولا يُبنى عارضٌ ثانٍ: الإخفاءُ صنفٌ على الحاضن لا تبديلٌ فيها.
   ============================================================ */
#nook .nk-res.is-open { min-height: 0; }
#nook .nk-res__host { display: none; }
#nook .nk-res.is-open .nk-res__host { display: block; padding: 0 16px 14px; }
/* والترويسةُ مفتوحةً صفٌّ: بابُ الرجوع ثمّ أيقونةُ القسم ثمّ اسمُه */
#nook .nk-t--res { gap: 8px; }
#nook .nk-res__bk {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px;
  padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--nk-title);
  transition: background .14s, color .14s;
}
#nook .nk-res__bk:hover { background: rgba(201, 162, 92, .18); color: var(--nk-ink); }
#nook .nk-res__bk svg { width: 17px; height: 17px; display: block; }
#nook .nk-res__ic { flex: none; display: inline-grid; place-items: center; }
#nook .nk-res__ic svg { width: 17px; height: 17px; display: block; opacity: .85; }
/* وما يُخفى من الواجهة المُعارة */
#nook .nk-res__host #cm-ui > .mmodal__head { display: none; }
#nook .nk-res__host #cm-ui .cm-panel > .cm-tabs { display: none; }
/* ===== وجوفُها يتنفّس داخل الصندوق =====
   قامتُها في المكتبة ‎clamp(375px, 65vh, 700px)‎ — وهي مقاسُ نافذةٍ لا مقاسُ صندوقٍ
   في قُمرة. فتُرخى إلى حدٍّ أدنى وسقفٍ أوسع: الصندوقُ يطول بما فيه، والمساهماتُ
   الكثيرةُ تُمرَّر في جوفها لا في الصفحة كلِّها */
#nook .nk-res__host #cm-ui .cm-pane {
  height: auto; min-height: 220px; max-height: min(72vh, 760px);
  padding-inline: 0;
}


/* ============================================================
   ثيمُ المربّعات الاربعة — الوضعُ الضيّق
   ============================================================
   منقولٌ من ‎RE/nook-four‎ (اتّجاه «ع المِلء») بحكم صاحب الموقع، ٢٧ اغسطس ٢٠٢٦.
   وخارطتُه ‎ROADMAP-NOOK-THEME.md‎.
   ===== وما قبله لم يكن ثيما بل قصًّا =====
   كان الضيّقُ في هذا الموقع **قصَّ الواسع** عند ‎34px‎: سطرُ العنوان وحدَه و‎overflow:
   hidden‎ على ما تحته. فلا ‎.fx‎ ولا ‎.fl‎ ولا مؤشّرَ — قِيس فما وُجد منها صنفٌ واحد.
   وهذا يضيف **وضعا ضيّقا مصمَّما**: صندوقٌ يوسّط لفظَه ورقمَه فوق ارضيّةٍ هي المقياس.
   ===== وما لا يُنقل =====
   متونُ الواسع (يبنيها الموقعُ من بياناته)، ومقابضُ الجرّ (‎.nki-rz‎ للموقع)،
   وزرُّ الاعدادات (‎data-nkpick‎) وزرُّ الطيّ — كلُّها تبقى كما هي.
   ============================================================ */

/* ============================================================
   قيمُ الثيم — معايَرةٌ ومجمَّدة، تُكتب مرّةً ولا تُحسب
   ============================================================
   في المختبر كانت الجافا تكتب هذه التوكناتِ في كلّ رسمة (‎render‎ يضع ‎--op‎ و‎--bh‎
   وأخواتِها على ‎#nook‎)، لأنّ للمختبر مقابضَ تُحرّكها. وقد استقرّت القيمُ فصارت
   **ثوابتَ ثيم** لا مقابض. فتُكتب ههنا مرّةً واحدة، ويسقط عن المنطق أن يكتبها.
   ومن أراد تبديلَ واحدةٍ بدّلها في سطرها ورآها في الأربعة معًا */
#nook {
  --op: 22%;          /* عتمةُ الارضيّة — حدُّ «بيانٌ لا زخرفة» المعايَر */
  --bh: 35%;          /* قامةُ الارضيّة من قامة الصندوق */
  --soft: 50%;        /* موضعُ ذوبان المتدرّج */
  --fgap: 0px;        /* فجوةُ الحبّات */
  --band: 10px;       /* سُمكُ شريط الحافّة */
  --nh: 44px;         /* قامةُ الضيّق */
  --dir: rtl;
  --big: 19px;        /* قدُّ الرقم */
  --cap: 9px;         /* قدُّ اللفظ */
  --sub: 8.5px;       /* قدُّ الحاشية */
  --unit: 11px;       /* قدُّ اسم الوحدة */
  --hdy: 2px; --hdy3: .5px; --cdy3: 1.5px;
  /* ‏‎--dmz‎ تقريبُ رقعة الدكتور وحدَها: رُفعت ‎.72 ← .85‎ بطلبه (§٢٦).
     وكانت تجرّ معها صفَّ كتاب المادّة، ثمّ صُرّح لذاك بارقامه في الذيل (§١٦) فانفكّ */
  --dmz: .85; --chz: .85;
  /* المؤشّر — الوتدُ العابر */
  --mk-len: 0px; --mk-w: 3px; --mk-ring: .5px; --mk-a: 10%;
  --mk-edge: 0px; --mk-ea: 20%; --mk-r: 12px;
  --mk-c: #006a80; --mk-rc: #2e2e2e;
  /* تايم لاين الدكتور */
  --dt-on: .22; --dt-off: .13; --dm-nof: var(--as-bad, #bf5555);
  --zdur: 700ms;
  /* ثيمُ ارضيّة المادّة */
  --it-a: .34;
}
html[data-theme="dark"] #nook { --mk-c: #ffffff; --mk-rc: #050505; }

@media (prefers-reduced-motion: reduce) {
  .fl--wk .wk-on, .fl--wk .wk-off, .nk-box.is-zooming .fl-me { transition: none; }
}
/* ===== والعمودُ صار حاملًا: شريطُ حالاتِه فوق ومربّعُه تحت =====
   العرضُ ينتقل من المربّع إلى العمود (‎flex‎ عليه)، والمربّعُ يملؤه. و‎stretch‎ مع
   ‎align-content: flex-end‎ في الشريط: تتساوى قاماتُ الأعمدة فتلتصق الشرائطُ بقاعها،
   فتقف المربّعاتُ الأربعةُ على خطٍّ واحدٍ ولو التفّ شريطٌ سطرين وبقي جارُه سطرًا */
/* ============================================================
   انتقالُ مربّع المادّة — أربعُ حركاتٍ مرتّبةٍ لا ذوبانٌ واحد
   ============================================================
   جُرّب الذوبانُ (صورةٌ قديمةٌ تخفت وأخرى تظهر) فرُدّ: هو حركةٌ واحدةٌ تُلبَس على
   أيّ تبديلٍ كان، لا تعرف ما تُبدّل ولا تقول شيئا عنه.
   ===== وهذا يعرف ما يُبدّل =====
   الحالُ الصفريّةُ فيها زرٌّ ممتلئٌ يدعو، والممتلئةُ فيها رقمٌ ووحدتُه وسطحٌ تحتهما.
   فتُرتَّب أربعُ حركاتٍ يقرأ بعضُها بعضا:
     ١ · الزرُّ ينكمش نحو **مبدئه** (يمينَ السطر) ويخفت — كأنّه انطوى بعد أن أُجيب.
     ٢ · الحبرُ يمسح الصندوقَ من اليمين إلى اليسار — السطحُ يُملأ لا يظهر فجأة.
     ٣ · الرقمُ يصعد من تحت مع تكبيرٍ يتجاوز قليلا ثمّ يستقرّ — له وزنٌ يحطّ.
     ٤ · الوحدةُ تتبعه بعد تسعين مِلّي منزلقةً من مبدئها — حاشيةٌ تلحق بصاحبها.
   والرجوعُ ينعكس بالترتيب نفسِه.
   ===== ولا يُعاد بناءُ الصندوق =====
   الجسمان (الزرُّ والسطر) مبنيّان معا أبدا، أحدُهما فوق الآخر في خليّةٍ واحدة،
   ويُبدَّل بصنفٍ على الصندوق. فالانتقالُ في الجلد يجد طرفيه — ولو هُدم وبُني
   لَما وجد شيئا يمسكه، وتلك عِلّةُ الذوبان الذي رُدّ */
#nook .nk-box[data-k="info"] .fx-swap {
  display: grid; align-items: center; justify-items: start; min-width: 0;
}
#nook .nk-box[data-k="info"] .fx-swap > * { grid-area: 1 / 1; min-width: 0; max-width: 100%; }

/* ١ · الزرّ — ومبدؤه يمينُ السطر لأنّ الصفَّ عربيّ */
#nook .nk-box[data-k="info"] .cta {
  transform-origin: 100% 50%;
  transition: opacity .24s ease, transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}
#nook .nk-box[data-k="info"]:not(.is-cta) .cta {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scaleX(.5) translateX(10px);
  transition: opacity .22s ease, transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s .22s;
}
/* ٢ · الحبرُ يمسح من اليمين */
#nook .nk-box[data-k="info"] .fl {
  transition: clip-path .46s cubic-bezier(.2, .7, .2, 1);
}
#nook .nk-box[data-k="info"].is-cta .fl { clip-path: inset(0 0 0 100%); }
#nook .nk-box[data-k="info"]:not(.is-cta) .fl { clip-path: inset(0); }
/* ٣ · والكتابُ يحضر أوّلا — هو أوّلُ ما تلقاه العينُ من اليمين، ومن حيث جاء المسحُ */
#nook .nk-box[data-k="info"] .fx-bk {
  transition: opacity .28s ease .02s, transform .4s cubic-bezier(.18, .92, .28, 1.22) .02s;
}
#nook .nk-box[data-k="info"].is-cta .fx-bk {
  opacity: 0; transform: translateY(6px) scale(.72);
  transition: opacity .16s ease, transform .22s cubic-bezier(.4, 0, .6, 1);
}
/* ٤ · الرقمُ يصعد ويتجاوز ثمّ يستقرّ */
#nook .nk-box[data-k="info"] .fx-val {
  transition: opacity .3s ease .06s, transform .42s cubic-bezier(.18, .92, .28, 1.22) .06s;
}
#nook .nk-box[data-k="info"].is-cta .fx-val {
  opacity: 0; transform: translateY(9px) scale(.78);
  transition: opacity .18s ease, transform .24s cubic-bezier(.4, 0, .6, 1);
}
/* ٥ · والوحدةُ تلحق به */
#nook .nk-box[data-k="info"] .fx-sub {
  transition: opacity .28s ease .15s, transform .34s cubic-bezier(.18, .92, .28, 1.22) .15s;
}
#nook .nk-box[data-k="info"].is-cta .fx-sub {
  opacity: 0; transform: translateX(9px);
  transition: opacity .14s ease, transform .2s cubic-bezier(.4, 0, .6, 1);
}
@media (prefers-reduced-motion: reduce) {
  #nook .nk-box[data-k="info"] .cta,
  #nook .nk-box[data-k="info"] .fl,
  #nook .nk-box[data-k="info"] .fx-bk,
  #nook .nk-box[data-k="info"] .fx-val,
  #nook .nk-box[data-k="info"] .fx-sub { transition: none; }
}
/* ============================================================
   انتقالُ مربّع الدكتور — الأسبوعُ ينفتح من موضع «الآن»
   ============================================================
   ولا يُنسخ انتقالُ المادّة عليه: ذاك مربّعُ عدٍّ (رقمٌ يصعد وحبرٌ يمسح من الحافّة)،
   وهذا **خطُّ أسبوعٍ عليه موضع**. فحركتُه تُشتقّ ممّا فيه:
     ١ · الشريطُ ينفتح من **خطّ «الآن»** إلى الجهتين — لا من حافّةٍ إلى حافّة. فالعينُ
         ترى الأسبوعَ يُبنى حول موضعك أنت، وهو معنى الصندوق كلِّه.
     ٢ · المؤشّرُ يهبط من فوق ويثبت — وهو وتدٌ عابرٌ، فمجيئُه من فوق أصدقُ من ظهوره.
     ٣ · الرقمُ ينزل من أعلى لا يصعد من أسفل: عدٌّ تنازليٌّ يسقط، وذاك يفرّقه عن
         رقم المادّة الذي يصعد — فلا يُقرأ المربّعان حركةً واحدة.
     ٤ · اللفظُ يدخل من **يساره** (جهتِه) بعد الرقم بربع ثانية — ذيلُ الجملة يلحق.
   والزرُّ يخفت متقلّصا من مركزه، لا منكمشا نحو مبدئه كزرّ المادّة: هذا يُخلي مكانا
   لخطٍّ يُبنى، وذاك يُخلي مكانا لرقمٍ يقوم مقامَه */
#nook .nk-box[data-k="doc"] .fx-swap {
  display: grid; align-items: center; justify-items: start; min-width: 0;
}
#nook .nk-box[data-k="doc"] .fx-swap > * { grid-area: 1 / 1; min-width: 0; max-width: 100%; }

/* ١ · الشريطُ ينفتح من خطّ «الآن» — و‎--mep‎ موضعُه كسرا من الحافّة اليسرى */
#nook .nk-box[data-k="doc"] .fl {
  transition: clip-path .5s cubic-bezier(.16, .84, .28, 1) .06s;
}
#nook .nk-box[data-k="doc"].is-cta .fl {
  clip-path: inset(0 calc(100% - var(--mep, 50%)) 0 var(--mep, 50%));
  transition: clip-path .26s cubic-bezier(.5, 0, .8, .4);
}
#nook .nk-box[data-k="doc"]:not(.is-cta) .fl { clip-path: inset(0); }
/* ===== ٢ · والقضيبُ يطلع من تحتُ إلى فوق — آخرَ الحركات =====
   وكان يهبط من فوق، فبُدّل: هو مقياسٌ يقوم على خطّ الأسبوع، فنبتُه منه أصدقُ من
   سقوطه عليه. ويأتي **آخرا** بعد أن يستقرّ ما يقوم عليه — فلا يقف على ما يتحرّك.
   ومبدأُ التكبير قاعُه (‎50% 100%‎)، فينمو صاعدا لا من وسطه */
#nook .nk-box[data-k="doc"] .fl-me,
#nook .nk-box[data-k="abs"] .fl-me,
#nook .nk-box[data-k="grade"] .fl-me {
  transform-origin: 50% 100%;
  transition: opacity .2s ease .42s, transform .42s cubic-bezier(.16, .9, .3, 1.14) .42s;
}
#nook .nk-box[data-k="doc"].is-cta .fl-me,
#nook .nk-box[data-k="abs"].is-cta .fl-me,
#nook .nk-box[data-k="grade"].is-cta .fl-me {
  opacity: 0; transform: scaleY(0);
  transition: opacity .12s ease, transform .18s cubic-bezier(.5, 0, .8, .4);
}
/* ٣ · والرقمُ ينزل من فوق */
#nook .nk-box[data-k="doc"] .fx-val {
  transition: opacity .3s ease .14s, transform .4s cubic-bezier(.18, .92, .28, 1.18) .14s;
}
#nook .nk-box[data-k="doc"].is-cta .fx-val {
  opacity: 0; transform: translateY(-11px) scale(.86);
  transition: opacity .16s ease, transform .22s cubic-bezier(.5, 0, .8, .4);
}
/* ٤ · واللفظُ يدخل من جهته */
#nook .nk-box[data-k="doc"] .fx-sub {
  transition: opacity .28s ease .25s, transform .34s cubic-bezier(.18, .92, .28, 1.18) .25s;
}
#nook .nk-box[data-k="doc"].is-cta .fx-sub {
  opacity: 0; transform: translateX(-10px);
  transition: opacity .12s ease, transform .18s cubic-bezier(.5, 0, .8, .4);
}
/* والزرّ — تقلّصٌ من المركز */
#nook .nk-box[data-k="doc"] .cta {
  transform-origin: 50% 50%;
  transition: opacity .24s ease .06s, transform .3s cubic-bezier(.16, .9, .3, 1.18) .06s, visibility 0s;
}
#nook .nk-box[data-k="doc"]:not(.is-cta) .cta {
  opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.86);
  transition: opacity .18s ease, transform .22s cubic-bezier(.5, 0, .8, .4), visibility 0s .18s;
}
@media (prefers-reduced-motion: reduce) {
  #nook .nk-box[data-k="doc"] .fl,
  #nook .nk-box[data-k="doc"] .fl-me,
  #nook .nk-box[data-k="doc"] .fx-val,
  #nook .nk-box[data-k="doc"] .fx-sub,
  #nook .nk-box[data-k="doc"] .cta { transition: none; }
}
/* ============================================================
   انتقالُ مربّع الغياب — سُلَّمٌ يُصَفّ ثمّ يُمشى عليه
   ============================================================
   المادّةُ حبرٌ يمسح، والدكتورُ خطٌّ ينفتح من موضعك، وهذا **سُلَّمُ مناطقَ منفصلة**:
   خليّةٌ لكلّ غيابٍ من المجانيّ إلى الحرمان. فحركتُه من جنسه:
     ١ · الخلايا **تقوم واحدةً بعد أخرى** من اليمين — كسُلَّمٍ يُصَفّ درجةً درجة،
         وكلُّ درجةٍ تنمو من قاعها لا تظهر مكانَها.
     ٢ · ثمّ المؤشّرُ **يمشي** من أوّل السُّلَّم إلى موضعك — وهو معنى المربّع كلِّه:
         كم قطعتَ من الطريق إلى الحرمان. ولذلك يأتي آخرا، بعد أن يستقرّ ما يمشي عليه.
     ٣ · والرقمُ ينزلق من مبدئه مع الموجة (لا يصعد كرقم المادّة ولا يسقط كرقم
         الدكتور) — فالثلاثةُ على ثلاثة محاور، ولا يُقرأ مربّعان حركةً واحدة.
   ===== ولمَ الخلايا حركةٌ لا انتقال =====
   عددُها يتبدّل بتبدّل السياسة (واحدةٌ في الصفريّة وتسعٌ في الممتلئة)، فتُبنى بناءً
   جديدا — والانتقالُ لا يمسك مولودا. والحركةُ تُلبَس عند الولادة، ولذلك تُقيَّد
   بصنفٍ يُنزع بعد انقضائها: لولاه لَأعادت الموجةُ نفسَها في كلّ حركةِ مقبض */
#nook .nk-box[data-k="abs"] .fx-swap {
  display: grid; align-items: center; justify-items: start; min-width: 0;
}
#nook .nk-box[data-k="abs"] .fx-swap > * { grid-area: 1 / 1; min-width: 0; max-width: 100%; }

/* ١ · السُّلَّمُ يُصَفّ درجةً درجة */
@keyframes absStep {
  from { transform: scaleY(.12) translateX(9px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
#nook .nk-box[data-k="abs"].is-wave .fl > i {
  transform-origin: 50% 100%;
  animation: absStep .4s cubic-bezier(.2, .9, .3, 1.16) backwards;
  animation-delay: calc(var(--i, 0) * 26ms);
}
/* ===== ولا تُكتب عتمةٌ على الشريط ههنا =====
   ‏‎.fl‎ عتمتُه ‎var(--op)‎ — حدُّ «بيانٌ لا زخرفة» كلُّه. فكتبتُ عليه ‎opacity: 1‎ لأُظهره
   في الدخول، فغلبتُ الحدَّ وصار المربّعُ ساطعا وحدَه بين إخوته. والدخولُ لا يحتاجه
   أصلا: خلاياه تقوم بحركتها، وفي الصفريّة سطحٌ واحدٌ محايد */

/* ===== ٢ · وقضيبُ الغياب ينبت كأخيه =====
   جُرّب أن يمشيَ من أوّل السُّلَّم إلى موضعك فرُدّ: المشيُ يقول «قطعتَ هذا» وهو خبرٌ
   يُقرأ مرّتين (الرقمُ يقوله)، ويجرّ العينَ في عرض الصندوق فيسرق النظرَ من السُّلَّم.
   فصار ينبت من قاعه في موضعه، كقضيب الدكتور سواءً — والحركةُ الواحدةُ لشيءٍ واحدٍ
   في المربّعين أصدقُ من حركتين لشيءٍ واحد.
   وموضعُه يبقى من ‎--mev‎ في الجلد: لا حاجةَ لردّه سطريّا، والتوكنُ أنظفُ */
#nook .nk-box[data-k="abs"] .fl-me { inset-inline-end: var(--mev, 0%); }
/* ٣ · والرقمُ ينزلق من مبدئه، واللفظُ يلحق */
#nook .nk-box[data-k="abs"] .fx-val {
  transition: opacity .3s ease .1s, transform .42s cubic-bezier(.18, .92, .28, 1.2) .1s;
}
#nook .nk-box[data-k="abs"].is-cta .fx-val {
  opacity: 0; transform: translateX(14px) scale(.9);
  transition: opacity .16s ease, transform .22s cubic-bezier(.5, 0, .8, .4);
}
#nook .nk-box[data-k="abs"] .fx-sub {
  transition: opacity .28s ease .22s, transform .34s cubic-bezier(.18, .92, .28, 1.2) .22s;
}
#nook .nk-box[data-k="abs"].is-cta .fx-sub {
  opacity: 0; transform: translateX(10px);
  transition: opacity .12s ease, transform .18s cubic-bezier(.5, 0, .8, .4);
}
/* والزرُّ ينزل خارجا: يُخلي سُلَّما يُصَفّ فوقه */
#nook .nk-box[data-k="abs"] .cta {
  transition: opacity .24s ease .04s, transform .3s cubic-bezier(.18, .92, .28, 1.2) .04s, visibility 0s;
}
#nook .nk-box[data-k="abs"]:not(.is-cta) .cta {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(9px) scale(.94);
  transition: opacity .18s ease, transform .22s cubic-bezier(.5, 0, .8, .4), visibility 0s .18s;
}
@media (prefers-reduced-motion: reduce) {
  #nook .nk-box[data-k="abs"].is-wave .fl > i { animation: none; }
  #nook .nk-box[data-k="abs"] .fl,
  #nook .nk-box[data-k="abs"] .fl-me,
  #nook .nk-box[data-k="abs"] .fx-val,
  #nook .nk-box[data-k="abs"] .fx-sub,
  #nook .nk-box[data-k="abs"] .cta { transition: none; }
}
/* ============================================================
   انتقالُ مربّع الدرجة — شريطٌ يُنشَر ثمّ حرفٌ يُختَم
   ============================================================
   ما في هذا المربّع لا يشبه إخوتَه: أحزمةٌ متدرّجةٌ من ‎F‎ إلى ‎A+‎ (مدًى متّصلٌ لا
   مناطقُ خطرٍ ولا خطُّ زمن)، ومتنُه **حرفٌ** لا رقم. فحركتُه من ذلك:
     ١ · الأحزمةُ **تُنشَر** واحدا بعد آخر — كلٌّ يتمدّد عرضا من مبدئه، كشريطٍ
         يُفرَد. ولا ترتفع كسُلَّم الغياب: ذاك درجاتٌ يُصعد فيها، وهذا مدًى يُبسط.
     ٢ · ثمّ الحرفُ **يُختَم**: يقع كبيرا ثمّ يستقرّ على قدّه. وهو ختمٌ لا مجيءٌ من
         جهة — والحرفُ يُختَم ولا يُعَدّ، فلا يصعد كرقم المادّة ولا يسقط كرقم الدكتور.
     ٣ · والنسبةُ تلحقه، والقضيبُ ينبت آخرا كإخوته */
#nook .nk-box[data-k="grade"] .fx-swap {
  display: grid; align-items: center; justify-items: start; min-width: 0;
}
#nook .nk-box[data-k="grade"] .fx-swap > * { grid-area: 1 / 1; min-width: 0; max-width: 100%; }

/* ١ · الأحزمةُ تُنشَر — ومبدأُ التمدّد مبدأُ السطر (يمينُه في العربيّة) */
@keyframes gldRoll {
  from { transform: scaleX(0); opacity: .2; }
  to   { transform: none; opacity: 1; }
}
#nook .nk-box[data-k="grade"].is-roll .fl > i {
  transform-origin: 100% 50%;
  animation: gldRoll .38s cubic-bezier(.2, .82, .28, 1) backwards;
  animation-delay: calc(.06s + var(--i, 0) * 22ms);
}
/* ٢ · والحرفُ يُختَم */
#nook .nk-box[data-k="grade"] .fx-val {
  transition: opacity .26s ease .26s, transform .38s cubic-bezier(.2, .86, .3, 1.06) .26s;
}
#nook .nk-box[data-k="grade"].is-cta .fx-val {
  opacity: 0; transform: scale(1.65);
  transition: opacity .16s ease, transform .22s cubic-bezier(.5, 0, .8, .4);
}
/* ٣ · والنسبةُ تلحقه */
#nook .nk-box[data-k="grade"] .fx-sub {
  transition: opacity .28s ease .4s, transform .32s cubic-bezier(.18, .92, .28, 1.18) .4s;
}
#nook .nk-box[data-k="grade"].is-cta .fx-sub {
  opacity: 0; transform: translateY(6px);
  transition: opacity .12s ease, transform .18s cubic-bezier(.5, 0, .8, .4);
}
/* والزرُّ يذوب في مكانه متمدّدا — كأنّ الختمَ حلّ محلَّه */
#nook .nk-box[data-k="grade"] .cta {
  transition: opacity .24s ease .06s, transform .3s cubic-bezier(.2, .86, .3, 1.06) .06s, visibility 0s;
}
#nook .nk-box[data-k="grade"]:not(.is-cta) .cta {
  opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.08);
  transition: opacity .18s ease, transform .22s cubic-bezier(.5, 0, .8, .4), visibility 0s .18s;
}
@media (prefers-reduced-motion: reduce) {
  #nook .nk-box[data-k="grade"].is-roll .fl > i { animation: none; }
  #nook .nk-box[data-k="grade"] .fx-val,
  #nook .nk-box[data-k="grade"] .fx-sub,
  #nook .nk-box[data-k="grade"] .cta { transition: none; }
}
@media (prefers-reduced-motion: reduce) { #nook .nk-box { transition: none; } }
#nook .nk-box[data-m="narrow"] { height: var(--nh, 44px); display: flex; flex-direction: column; justify-content: center; }
#nook .nk-box[data-m="wide"]   { height: var(--wh, 210px); }
/* ===== وإطارُ المادّة يمشي مع متنه لا قبلَه =====
   قامةُ الصندوق تنتقل في ‎.26s‎ لِمَورِ الوضعين، ومَورُ المادّة ‎.46s‎ — فلو تُركا
   لَاستقرّ الإطارُ وبقي المتنُ يمشي فيه، وذاك يُقرأ صندوقين لا صندوقا يتمدّد.
   فيُوحَّد الزمنُ والمنحنى في المادّة وحدَها: الإطارُ والمتنُ جسمٌ واحدٌ يتّسع */
#nook .nk-box[data-k="info"] { transition: height .46s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
  #nook .nk-box[data-k="info"] { transition: none; }
}

/* ============================================================
   أشكالُ المؤشّر — الخيطُ الأبيضُ داخلَ كلِّ مربّع
   ============================================================
   الأرضيّةُ تقول المدى، والمؤشّرُ يقول **أين أنت منه بالضبط**. وبياضُه ليس لونَه بل
   إطارَه: حبرٌ محاطٌ بالورق، فيُرى على أيّ لونٍ من ألوان الأرضيّة وقع.
   و«الفجوة» تقلب الحيلة: لا حبرَ فيها أصلًا — يُقَصّ من الأرضيّة عرضٌ بلون الورق،
   فالعلامةُ بياضٌ خالصٌ لا خطٌّ مطليّ. وهي أهدؤها لأنّها لا تُضيف بل تنزع */
/* ============================================================
   الطائفةُ الثانية: مؤشّراتٌ **قاطعةٌ** — تبدأ ملاصقةً لحافّتَي الصندوق
   ============================================================
   والطائفتان تقرآن ‎--mk-len‎ عينَها، فما يفرّقهما **الطرفان والمبدأ** لا المقبض:
   هذه تبدأ من الحدّ نفسِه ولها حبّاتٌ وشرطاتٌ ورؤوس، وتلك تبدأ منحسرةً عنه عاريةً *//* ===== الشقّ: حبرٌ عند الحافّتين وبياضٌ في عبوره =====
   فالنصُّ في الوسط لا يُقطع، والموضعُ مقولٌ بطرفيه — وقدُّهما من ‎--mk-cap‎ */
/* ============================================================
   الطائفةُ الثالثة: مؤشّراتٌ **عابرةٌ** — تتجاوز حافّةَ الصندوق
   ============================================================
   والمانعُ كان بنيويًّا لا شكليًّا: ‎.nk-box‎ عليه ‎overflow: hidden‎ — يُصان به انحناءُ
   الأرضيّة عند الأركان، فيقُصّ معه كلَّ ناتئٍ عن الحدّ.
   ===== فيُفكّ القيدُ ولا يُنقض =====
   الأرضيّةُ تُلَفّ في صفيحةٍ تقُصّ نفسَها (‎.fl-clip‎) فتحتفظ بانحنائها، ويُرفع القصُّ
   عن الصندوق حين يكون المؤشّرُ عابرًا (‎.is-thru‎ ولا يُرفع إلّا في الضيّق: في الواسع
   متنٌ قد يفيض). ومبدأُ هذه الطائفة تجاوزُ ‎4‎، ويزيد بـ‎--mk-len‎ */
.nk-box.is-thru[data-m="narrow"] { overflow: visible; }
#nook .nk-box[data-k="info"] .fx-swap { top: var(--hdy, 2px); }
#nook .nk-box[data-k="info"] .fx-cap { top: 0; }

#nook .nk-box[data-m="wide"] .fx { display: none; }
#nook .nk-box[data-m="wide"] .fl, #nook .nk-box[data-m="wide"] .fl-me { display: none; }
#nook .nk-cal,
#nook .nk-rect,
#nook .nk-box[data-m="wide"],
#nook .nk-sq {
  position: relative;
  background: var(--nk-paper); border: 1px solid var(--nk-line); border-radius: 16px;
  box-shadow: var(--nk-shadow);
}
#nook .nk-box[data-m="wide"] .nk-gear,
#nook .nk-box[data-m="wide"] .nk-fold {
  position: static; transform: none;
  width: 0; height: 12px; padding: 0; flex: none; overflow: hidden;
  opacity: 0; pointer-events: none; margin-inline-end: 0;
  border: 0; background: transparent; color: #c9a25c; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: width .2s ease, opacity .2s ease, margin .2s ease, color .15s, transform .15s;
}
#nook .nk-box[data-m="wide"]:hover .nk-gear,
#nook .nk-box[data-m="wide"] .nk-gear:focus-visible,
#nook .nk-box[data-m="wide"]:hover .nk-fold,
#nook .nk-box[data-m="wide"] .nk-fold:focus-visible {
  width: 12px; opacity: 1; pointer-events: auto; margin-inline-end: 5px;
}
#nook .nk-box[data-m="wide"] .nk-gear svg,
#nook .nk-box[data-m="wide"] .nk-fold svg { width: 12px; height: 12px; flex: none; }
#nook .nk-box[data-m="wide"] .nk-fold { color: var(--nk-ink-soft); }
#nook .nk-box[data-m="wide"] .nk-fold:hover { background: transparent; color: #c9a25c; transform: none; }
#nook .nk-box[data-m="wide"] .nk-gear:hover { background: transparent; color: #b08f45; transform: rotate(35deg); }
/* ============================================================
   وأداتا الواسع تلبسان جلدَ الضيّق
   ============================================================
   القواعدُ التي فوق (‎#nook .nk-box[data-m="wide"] .nk-gear‎ …) منقولةٌ من الموقع
   استخراجا آليّا، فحذفُها يدويّا يُنقض عند أوّل إعادةِ نقل. فتُعلى عليها قواعدُ
   مفتاحُها ‎.fx-tools.fx-tools--w‎ — والصنفُ يُكرَّر في المحدِّد قصدا: به تبلغ
   (١٬٥٬٠) في مقابل (١٬٣٬٠) و(١٬٤٬٠) للممسوسة منها، فتغلبها بالأخصّيّة لا بالترتيب
   (والغلبةُ بالترتيب رهنُ موضعِ الكتلة في الملفّ، وهو يتبدّل).
   وتبقى قواعدُ الموقع في مكانها لا يمسّها إعادةُ النقل.
   ===== والأداتان تخرجان من سطر العنوان =====
   جُرّب وضعُهما في ذيل السطر (‎‏.nk-t‎) فلم يُنقرا. والسببُ طبقيٌّ لا شكليّ: السطرُ
   مزويٌّ (‎zoom‎) فتُحسب مواضعُهما في إحداثيّاتٍ أخرى، وهما في **السَّيل** بلا طبقة،
   وعلى الحافّة اليسرى نفسِها ثلاثةُ مقابضِ جرٍّ مُطلَقةٍ بـ‎z-index: 3‎ — والمُطلَقُ
   ذو الطبقةِ يعلو ما في السَّيل وإن كان شفّافًا (‎opacity: 0‎ يستقبل النقر).
   فتُخرَجان من السطر إلى **الصندوق** ابنتين مباشرتين، مُطلَقتين كما في الضيّق
   تماما، بـ‎z-index: 4‎ فوق المقابض. وبهذا تسقط الزَواةُ عن كاهلهما فتعودان إلى
   قدّهما الأصليّ بلا قسمةٍ ولا مقلوب.
   ===== والعشرةُ محسوبةٌ لا مُقدَّرة =====
   الدكتورُ والغيابُ والدرجة: حشوةُ السطر ‎14px‎ مزويّةً ‎×.69 = 9.66‎، وسطرُ ‎15px‎
   يرتفع ‎18‎ مزويّةً ‎12.42‎ — فمركزُه ‎15.87‎، وأداةٌ قدُّها ‎12‎ تبدأ عند ‎9.87‎.
   والمادّةُ: جوفُها ‎.nkm‎ حشوتُه ‎11px‎ غيرَ مزويّة، وسطرُه ‎12px‎ يرتفع ‎14.4‎ مزويّةً
   ‎9.94‎ — فمركزُه ‎15.97‎ وتبدأ الأداةُ عند ‎9.97‎. فالعشرةُ تُنصّفهما جميعا
   بفارق عُشر بكسل. */
#nook .nk-box[data-m="wide"] > .fx-tools.fx-tools--w {
  position: absolute; inset-inline-end: 8px; top: 10px; z-index: 4;
  margin: 0; flex: none; display: inline-flex; align-items: center;
}
#nook .nk-box[data-m="wide"] .fx-tools.fx-tools--w .nk-gear,
#nook .nk-box[data-m="wide"] .fx-tools.fx-tools--w .nk-fold {
  position: static; transform: none; overflow: visible;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  margin-inline-end: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .18s, color .15s, transform .15s;
}
/* والترسُ لا يُرى إلّا عند المسّ، والسهمُ ظاهرٌ أبدا — سُلَّمُ الضيّق بعينه */
#nook .nk-box[data-m="wide"] .fx-tools.fx-tools--w .nk-gear {
  width: 10px; height: 10px; opacity: 0; pointer-events: none;
  color: color-mix(in srgb, var(--nk-ink-soft) 46%, transparent);
}
#nook .nk-box[data-m="wide"]:hover .fx-tools.fx-tools--w .nk-gear {
  opacity: 1; pointer-events: auto; color: var(--nk-ink-soft);
}
#nook .nk-box[data-m="wide"] .fx-tools.fx-tools--w .nk-fold {
  width: 7.5px; height: 7.5px; margin-inline-start: 4px; opacity: 1; pointer-events: auto;
  color: color-mix(in srgb, var(--nk-ink-soft) 46%, transparent);
}
#nook .nk-box[data-m="wide"]:hover .fx-tools.fx-tools--w .nk-fold { color: var(--nk-ink-soft); }
#nook .nk-box[data-m="wide"] .fx-tools.fx-tools--w .nk-gear:hover {
  background: transparent; color: var(--gold); transform: rotate(35deg);
}
#nook .nk-box[data-m="wide"] .fx-tools.fx-tools--w .nk-fold:hover {
  background: transparent; color: var(--gold); transform: none;
}
#nook .nk-box[data-m="wide"] .fx-tools.fx-tools--w .nk-gear svg,
#nook .nk-box[data-m="wide"] .fx-tools.fx-tools--w .nk-fold svg { width: 10px; height: 10px; flex: none; }#nook .nk-box[data-m="wide"] { min-height: 150px; }
/* ===== ويُحجز في طرف السطر موضعُ الأداتين =====
   الترسُ والسهمُ مُطلَقان على الصندوق: من حافّته اليسرى ‎8px‎ ثمّ ‎26px‎ قدُّهما —
   فهما يغطّيان أوّلَ ‎34px‎ منها. وسطرُ العنوان مزويٌّ بـ‎--nkt-s‎، فما يُحجز فيه
   يُقسَم عليها ليخرج بالقياس المرسوم.
   والحشوةُ تُكتب لا تُزاد (اللونجهاند يغلب المختصر): فالثلاثةُ سطرُها ابنٌ مباشرٌ
   للصندوق فتُحجز فيه الأربعةُ والثلاثون كلُّها. وأمّا المادّةُ فسطرُها في جوفٍ
   (‎.nkm‎) حشوتُه ‎13‎ غيرُ مزويّة، فيبقى على السطر ‎21‎ لا غير.
   ولولا هذا لَجرى المتنُ تحت الأداتين — والجملةُ الجديدةُ أوّلُ من يبلغهما */
#nook .nk-box[data-m="wide"] .nk-t { padding-inline-end: calc(34px / var(--nkt-s, .69)); }
#nook .nk-box[data-m="wide"] .nkm .nk-t { padding-inline-end: calc(21px / var(--nkt-s, .69)); }/* ونُزعت ‎.sh-fic .bk‎: غلافُ «الشروح» لا الركن، جاءت مع الكتاب
   ولا وسمَ لها ههنا — وتوكنُها ‎--shk-ic‎ يُعرَّف في مكانٍ لم يُنقل */

/* ============================================================
   قدُّ الرقاع النصّيّة في المربّعات الأربعة — معاملٌ واحد
   ============================================================
   الرقاعُ الصغيرةُ («لغة المادة» و«المكتب» و«الإيميل» والأيّامُ والتقييمان وصندوقُ
   المواضيع والوصفان ورقعتا الغياب والتأخير) ليست عائلةً واحدةً في الجلد: منها
   ‎nkm-bx/nk-doc__bg‎، ومنها ‎v-badge‎، ومنها ‎chipe--absview‎ بقياساتٍ خاصّةٍ به.
   فلا يكفي مقبضٌ على أصلٍ واحد — ويُضرب كلُّ رقمٍ في موضعه، فتحفظ كلُّ رقعةٍ نسبتَها
   إلى نفسها ولا تُسوّى بأختها قسرا.
   ===== والقيدُ ‎[data-m="wide"]‎ صحيحٌ ونافع =====
   صحيحٌ لأنّ هذه الرقاعَ لا وجودَ لها إلّا في الواسع، ونافعٌ لأنّه يرفع الأخصّيّةَ
   فوق قواعد الموقع المنقولة — فتغلب بالوزن لا بموقعها في الملفّ.
   وقد جُرّبت بلا قيدٍ أوّلا فتكافأت مع أصولها وخسرت بالترتيب، ولم يظهر أثرٌ.
   ===== ورقعةُ البروفايل مستثناة =====
   لا محدِّدَ ههنا يمسّ ‎nk-doc__idw‎ ولا ما فيه: قدُّها بمقبضها وحدَه (‎--dmz‎) */
#nook .nk-box[data-m="wide"] .nk-doc__bg, #nook .nk-box[data-m="wide"] .nkm-bx {
  padding: calc(2px * var(--chz, .85)) calc(8px * var(--chz, .85)); gap: calc(5px * var(--chz, .85)); border-radius: calc(7px * var(--chz, .85));
}
#nook .nk-box[data-m="wide"] .nk-doc__bg i, #nook .nk-box[data-m="wide"] .nkm-bx i { font-size: calc(10.4px * var(--chz, .85)); }
#nook .nk-box[data-m="wide"] .nk-doc__bg b, #nook .nk-box[data-m="wide"] .nkm-bx b { font-size: calc(10.8px * var(--chz, .85)); }
#nook .nk-box[data-m="wide"] .nkm-lab { font-size: calc(10.4px * var(--chz, .85)); }
/* صندوقُ المواضيع وسطورُه */
#nook .nk-box[data-m="wide"] .nkm-tps { padding: calc(5px * var(--chz, .85)) calc(7px * var(--chz, .85)); border-radius: calc(10px * var(--chz, .85)); }
#nook .nk-box[data-m="wide"] .nkm-o { width: calc(15px * var(--chz, .85)); height: calc(15px * var(--chz, .85)); font-size: calc(9px * var(--chz, .85)); }
#nook .nk-box[data-m="wide"] .nkm-t { font-size: calc(11px * var(--chz, .85)); }
/* الوصفان */
#nook .nk-box[data-m="wide"] .nk-desc { font-size: calc(12.5px * var(--chz, .85)); }
#nook .nk-box[data-m="wide"] .nk-doc__d { font-size: calc(10.5px * var(--chz, .85)); padding: calc(4px * var(--chz, .85)) calc(8px * var(--chz, .85)); border-radius: calc(10px * var(--chz, .85)); }
/* رقاعُ الغياب والدرجة */
#nook .nk-box[data-m="wide"] .nk-body .peek-flow .v-badge {
  font-size: calc(12px * var(--chz, .85)); padding: calc(4px * var(--chz, .85)) calc(13px * var(--chz, .85)); min-height: calc(27px * var(--chz, .85));
}
#nook .nk-box[data-m="wide"] .nk-body .peek-flow .chipe--absview {
  font-size: calc(10.5px * var(--chz, .85)); padding: calc(8px * var(--chz, .85)) calc(5px * var(--chz, .85)); gap: calc(6px * var(--chz, .85));
}
#nook .nk-box[data-m="wide"] .nk-body .chipe--absview .abc { width: calc(15px * var(--chz, .85)); height: calc(15px * var(--chz, .85)); font-size: calc(8px * var(--chz, .85)); }
#nook .nk-box[data-m="wide"] .nk-body .abs-legbox .abs-leg {
  font-size: calc(8.5px * var(--chz, .85)); padding: calc(4px * var(--chz, .85)) calc(8px * var(--chz, .85)); border-radius: calc(6px * var(--chz, .85));
}

/* ============================================================
   تنصيفُ «الغياب»: اللفظُ هو المنصَّف لا الكتلة
   ============================================================
   رقعةُ الغياب عمودٌ منصَّفٌ (‎flex-direction: column; align-items: center‎)، وسطرُها
   الأوّلُ ‎abs-hd‎ كتلةٌ واحدة: اللفظُ ثمّ خانةُ الإدخال. فتُنصَّف **الكتلةُ** فيقع
   اللفظُ منزاحا إلى اليمين بقدر نصف الخانة — والعينُ تنصّف اللفظَ لا الكتلة، فتراه
   مائلا وإن كان الحسابُ سليما.
   ===== فيُنصَّف اللفظُ ويُعلَّق ما سواه =====
   السطرُ يصير شبكةً بثلاثة أعمدة: ‎1fr‎ ثمّ اللفظُ بقدّه ثمّ ‎1fr‎. فالعمودان
   المرنان متساويان أبدا، واللفظُ بينهما في منتصف الرقعة تماما مهما كان قدُّ
   الخانة. وتُسكَن الخانةُ العمودَ الثالث (وهو الأيسرُ في العربيّة) محاذاةً إلى
   مبدئه — أي ملاصقةً للفظ من يساره.
   ولا يُستعمل ‎position: absolute‎ للخانة: تخرج من السَّيل فلا يحجز لها السطرُ
   قامةً، ولَاختلّ ارتفاعُ الرقعة.
   ===== والتأخيرُ لا يُمَسّ =====
   رقعتُه صفٌّ لا عمود، ومحاذاتُها ‎flex-start‎ ولها متنٌ ثانٍ بعد الخانة («كل ٣
   تاخيرات = غياب») — فلا تنصيفَ فيها أصلا حتّى يُصحَّح. وترتيبُ اللفظ والخانة فيها
   هو المطلوبُ نفسُه: الخانةُ يسارَ اللفظ بحكم السَّيل العربيّ */
#nook .nk-box[data-m="wide"] .nk-body .chipe--absview .abs-hd {
  display: grid; width: 100%;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
#nook .nk-box[data-m="wide"] .nk-body .chipe--absview .abs-hd > .v-lab {
  grid-column: 2; margin: 0; justify-self: center;
}
#nook .nk-box[data-m="wide"] .nk-body .chipe--absview .abs-hd > .gscw {
  grid-column: 3; justify-self: start; margin-inline-start: 4px;
}
#nook .nk-box[data-m="wide"] > .nk-t { flex: none; }
#nook .nk-box[data-m="wide"] > .nkm { flex: 1 1 auto; min-height: 0; height: auto; overflow: hidden; }
@media (max-width: 820px) {
  #nook .cbars { display: none; }
  #nook .nk-four { flex-wrap: wrap; }
  /* و‎!important‎ مقصودة: العرضُ المسحوبُ يُكتب سطريّا على العمود، ولا يُغلب
     السطريُّ إلّا بها. والمقاسُ يُعطَّل ولا يُمحى، فمن عاد إلى شاشته الواسعة
     وجد نوافذَه كما تركها — وهي حجّةُ الموقع نفسِها في هذه القاعدة */
  #nook .nk-four > .col { flex: 1 1 100% !important; }
  #nook .nk-four > .col > .cbar { display: flex; flex: none; margin-bottom: 7px; }
}

/* ============================================================
   الرقاعُ لا تفيض عن مربّعها — تنكمش ثمّ تُقصّ بنقاط
   ============================================================
   رقعةُ الإيميل متنُها كلمةٌ واحدةٌ لا تنقسم (‎aqahtani@kfupm.edu.sa‎)، وحدُّها
   الأدنى أعرضُ من مربّعٍ ضيّق. وصفُّها ‎flex-wrap: wrap‎ فيلتفّ ما زاد عن السطر —
   لكنّ الالتفافَ لا ينفع عضوا **واحدا** أعرضَ من السطر كلِّه: لا موضعَ يلتفّ إليه،
   فيبقى على عرضه ويخرج من الصندوق فيقصّه ‎overflow: hidden‎ قصّا حادّا.
   وهو حالُ الموقع نفسِه (القواعدُ منقولةٌ منه حرفا) — فهذا إصلاحٌ عليه لا نقلٌ عنه.
   ===== وأصلُ عضو الفلكس ألّا ينكمش دون محتواه =====
   ‏‎min-width: auto‎ هو الأصل، فلا يُطلَب من الرقعة أن تضيق ما لم تُكتب لها
   ‎min-width: 0‎. ومعها ‎max-width: 100%‎ تحدّها بعرض السطر مهما طال متنُها.
   ===== والقصُّ في المتن لا في الرقعة =====
   لو قُصَّت الرقعةُ نفسُها لَذهب حدُّها وانحناؤها مع النقاط. فتُترك الرقعةُ تامّةً
   وتُقصّ **قيمتُها** (‎b‎) بنقاطٍ ثلاث — واللفظُ (‎i‎) يبقى كاملا أبدا: هو الذي
   يقول ما هذا، والقيمةُ هي التي تحتمل الاختصار.
   ويعمّ ذلك رقاعَ المادّة (‎nkm-bx‎) كذلك: «نسبة الترابط بالمنهج» أطولُ من رقعةٍ
   في مربّعٍ مضيَّق */
#nook .nk-box[data-m="wide"] .nk-doc__bg,
#nook .nk-box[data-m="wide"] .nkm-bx {
  min-width: 0; max-width: 100%;
}
#nook .nk-box[data-m="wide"] .nk-doc__bg > i,
#nook .nk-box[data-m="wide"] .nkm-bx > i { flex: none; }
#nook .nk-box[data-m="wide"] .nk-doc__bg > b,
#nook .nk-box[data-m="wide"] .nkm-bx > b {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* وصفُّ الرقاع نفسُه لا يفيض: أعضاؤه قد تُصرّ على حدّها الأدنى فيُكتب لها الصفرُ */
#nook .nk-box[data-m="wide"] .nk-doc__row,
#nook .nk-box[data-m="wide"] .nk-chips { min-width: 0; }

/* ============================================================
   قاعدةُ الاحتواء — تُكتب مرّةً على الحاضن لا على كلّ ساكن
   ============================================================
   ثلاثُ جولاتٍ تعقّبت الحلقةَ المانعةَ للانكماش واحدةً واحدة، وكلُّ إصلاحٍ منها
   صحيحٌ في ذاته ولا واحدٌ منها كان العِلّة. والسببُ أنّ العِلّةَ من صنفٍ **عامّ**:
   أصلُ كلّ عضوٍ مرنٍ ‎min-width: auto‎، أي «لا تنكمش دون متنك». فأيُّ حلقةٍ لم
   يُكتب لها ‎min-width: 0‎ تُوقف الانكماشَ عند نفسها ويفيض ما تحتها.
   وتعقّبُ الحلقات لا ينتهي: كلُّ وسمٍ جديدٍ يضيف حلقةً، ويُنسى.
   ===== فتُكتب القاعدةُ على السلالة كلِّها =====
   و‎*‎ ههنا مقصودةٌ ومحسوبة، لا كسلا:
     · ‎min-width: 0‎ لا أثرَ لها في عنصرٍ غيرِ مرن (الأصلُ فيه صفرٌ أصلا).
     · وفي المرن تُسقط عنه ‎auto‎ المؤذية وحدَها، ولا تمسّ عرضا مصرَّحا:
       الخلايا والدوائرُ والأيقوناتُ لها ‎width‎ مكتوب، و‎min-width‎ لا تغلبه.
     · ومقصورةٌ على ‎[data-m="wide"]‎ فلا تبلغ الضيّقَ ولا سلّمَ العتمة.
   ===== وما لا ينقسم يُقصّ لا يفيض =====
   والانكماشُ وحدَه لا يكفي متنا كلمتُه واحدةٌ لا تنقسم (الإيميل): ينكمش الحاضنُ
   ويبقى المتنُ على عرضه. فيُقصّ بنقاطٍ في مواضعه المعروفة */
#nook .nk-box[data-m="wide"] * { min-width: 0; }

/* ============================================================
   القصُّ بالرتبة لا بالقدّ — رقاعُ المربّع تتبدّل ببنيتها لا بعرضها
   ============================================================
   المقياسُ حكم: لا عنصرَ يخرج من مربّعه (‎escape = 0‎ في كلّ عرضٍ قيس، من ‎1400‎
   إلى ‎826‎، ومع سحب الحافّة إلى أدناها). فالاحتواءُ تامٌّ — والقبحُ ليس فيضا،
   بل **انحطاطُ المتن**: تُضيَّق الرقعةُ فيصير متنُها نقاطا.
   وقِيس عند ‎120px‎: ‎د. عب…‎ · ‎مبنى …‎ · ‎aqah…‎ · ‎10:00 …‎ · ‎تقييم الشرح 0…‎
   (وهذه الأخيرةُ أسوأُ: «‎9/10‎» رقمٌ لاتينيٌّ في سطرٍ عربيّ، فالنقاطُ تأكل أوّلَه
   وتُبقي آخرَه فيُقرأ رقما آخر) — والتي تليها بلا قيمةٍ أصلا.
   ===== والقاعدةُ التي يعرفها هذا المشروع: قُصَّ بالرتبة لا بالقدّ =====
   الرقعةُ سطرٌ واحد: ‎[لفظٌ] [قيمة]‎ متجاوران. فإذا ضاق المربّعُ لم يبقَ للقيمة
   إلّا فُتاتُ ما فضل عن اللفظ. والرتبةُ التالية أن **ينزل أحدُهما تحت الآخر**:
   اللفظُ فوق والقيمةُ تحته بعرض الرقعة كلِّه — فتُقال تامّةً ولا تُقصّ.
   ومعها يصير الصفُّ عمودا: رقعةٌ في كلّ سطرٍ بعرضٍ تامّ.
   ===== ولِمَ ‎@container‎ لا ‎@media‎ =====
   الخبرُ خبرُ **المربّع** لا خبرُ الشاشة: مربّعٌ مسحوبٌ إلى ‎120‎ في شاشةٍ عريضةٍ
   حالُه حالُ مربّعٍ ضاقت به شاشة. و‎.nk-doc‎ حاويةٌ مسمّاةٌ أصلا (‎container-name:
   nkdoc‎) بُنيت لعتبات الطبقات ثمّ رُفعت العتباتُ وبقيت الحاوية — فتُستعمل.
   والمادّةُ تُعطى حاويتَها (‎inline-size‎ لا ‎size‎: قامتُها لا تُسأل).
   ===== والعتبةُ دون العرض الطبيعيّ قصدا =====
   عرضُ الدكتور المقيسُ في مسرحٍ تامّ ‎171‎، والمادّةِ ‎195‎. فلو كانت العتبةُ فوقهما
   لَتبدّل المنظرُ المعتمَدُ من غير أن يُسحب شيء. فهي دونهما: لا تقع إلّا إذا
   ضيَّق الناظرُ بيده أو ضاقت الشاشةُ عن الصفّ */
/* ===== ولا عتبةَ: كلُّ رقعةٍ تلتفّ وحدَها حين تضيق =====
   جُرّبت العتبةُ أوّلا (‎@container nkdoc (max-width: 165px)‎ تقلب الرقاعَ أعمدةً)
   فرُدّت: **الرقاعُ لا تلحق الحافّةَ**. والعِلّةُ في طبيعة العتبة لا في رقمها —
   هي حدٌّ قاطعٌ: ما دونه صورةٌ وما فوقه صورةٌ أخرى، فالسحبُ يعبره فينقلب المشهدُ
   كلُّه دفعةً. ولا يُصلحه رقمٌ آخرُ ولا انتقالٌ في الجلد: ‎flex-direction‎ لا
   يُنتقَل عليه أصلا، وحسابُ الحاوية يقع بعد التخطيط فيتأخّر إطارا عن الإصبع.
   ===== فيُستبدل بالالتفاف: قرارٌ في كلّ رقعةٍ على حدة =====
   الرقعةُ صفٌّ ملتفّ (‎flex-wrap: wrap‎) واللفظُ لا ينكمش والقيمةُ تنكمش. فما دامت
   القيمةُ تسع جنبَ لفظها بقيت سطرا واحدا، فإذا لم تسعْ **نزلت تحته** — وحدَها،
   في اللحظة التي تضيق فيها هي، لا في لحظةٍ يُملها رقمٌ عامّ.
   فالمشهدُ يتبدّل رقعةً رقعةً مع الإصبع: أطولُها أوّلا ثمّ ما يليها — وذاك هو
   «اللحاق» الذي طُلب. ولا قفزةَ لأنّه لا حدَّ يُعبَر.
   ===== والقيمةُ تُقال تامّةً لا نقاطا =====
   كانت تُقصّ بنقاط (‎text-overflow: ellipsis‎)، وذاك قصٌّ بالقدّ: يُذهب الخبرَ
   ويُبقي الرقعةَ. وقد قِيس أنّه يكذب أحيانا: «‎9/10‎» رقمٌ لاتينيٌّ في سطرٍ عربيّ
   فالنقاطُ تأكل أوّلَه وتُبقي آخرَه، فيُقرأ «‎0…‎» — رقمٌ آخر.
   و‎overflow-wrap: anywhere‎ لأنّ البريدَ كلمةٌ لا تنقسم بغيرها */
#nook .nk-box[data-m="wide"] .nk-doc__bg,
#nook .nk-box[data-m="wide"] .nkm-bx:not(.nkm-bx--d) { flex-wrap: wrap; }
/* واللفظُ ثابتٌ والقيمةُ هي التي تنزل: ‎flex: none‎ عليه مكتوبٌ من قبل */
#nook .nk-box[data-m="wide"] .nk-doc__bg > b,
#nook .nk-box[data-m="wide"] .nkm-bx > b {
  flex: 1 1 auto; white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; line-height: 1.45;
}
/* ============= انتهى ثيمُ المربّعات الاربعة ============= */

/* ===== وفي الضيّق لا يُرى الا جسدُه =====
   صندوقُ الموقع يحمل متنَ الواسع ابدا (يبنيه من بياناته)، ويحمل معه جسدَ الضيّق
   حين يكون مطويّا. فيُخفى ما سوى جسدِ الضيّق ومقابضِ الجرّ — ولا يُقصّ بالقامة
   كما كان، فالقصُّ يُبقي سطرَ العنوان ظاهرا فوق الجسد فيزدحمان */
/* ‏‎:not(.nk-box--empty)‎ لازمةٌ: الصندوقُ الفارغُ لا جسدَ ضيّقٍ له — فيه دائرةُ
   الاضافة وعنوانُه وحدَهما. فلو شمله الاخفاءُ لَخلا تماما، ولَما وجد الناظرُ
   بابا يُسجّل منه دكتورَه. وقد وقع، وقِيس: ‎display: none‎ على ‎.nk-pick‎ */
#nook .nk-box[data-m="narrow"]:not(.nk-box--empty)
  > :not(.fl-clip):not(.fl-me):not(.fx):not(.nki-rz) {
  display: none !important;
}


/* ============================================================
   ثيمُ المربّعات الاربعة — الطورُ الثاني: جلدُ الاطار والادوات والمتون
   ============================================================
   منقولٌ من ‎RE/nook-four‎ (اتّجاه «ع المِلء») بحكم صاحب الموقع، ٢٧ اغسطس ٢٠٢٦.
   وخارطتُه ‎ROADMAP-NOOK-THEME.md‎.
   ===== وما قبله لم يكن ثيما بل قصًّا =====
   كان الضيّقُ في هذا الموقع **قصَّ الواسع** عند ‎34px‎: سطرُ العنوان وحدَه و‎overflow:
   hidden‎ على ما تحته. فلا ‎.fx‎ ولا ‎.fl‎ ولا مؤشّرَ — قِيس فما وُجد منها صنفٌ واحد.
   وهذا يضيف **وضعا ضيّقا مصمَّما**: صندوقٌ يوسّط لفظَه ورقمَه فوق ارضيّةٍ هي المقياس.
   ===== وما لا يُنقل =====
   متونُ الواسع (يبنيها الموقعُ من بياناته)، ومقابضُ الجرّ (‎.nki-rz‎ للموقع)،
   وزرُّ الاعدادات (‎data-nkpick‎) وزرُّ الطيّ — كلُّها تبقى كما هي.
   ============================================================ */
/* ===== ونسائجُ ملوّنة: غلافُ الكتاب وألوانُ الهويّة =====
   نُقض «بلا لونٍ» في السطح وحدَه لا في البيان: النسيجُ زينةٌ معلنةٌ لا يدّعي خبرًا،
   فلا يلتبس بألوان الثلاثة التي **تقول**. وغلافُ الكتاب أصدقُ زينةٍ للمربّع: هو
   هويّةُ المادّة نفسِها، وقد كان في سطر العنوان فصار وشاحًا تحته.
   (وههنا الغلافُ متدرّجٌ مصنوعٌ كغلاف الموقع البديل — وفي الموقع يُوضع ‎url()‎ الصورة) */
#nook { --cov1: #3a6f76; --cov2: #22454b; --gold-s: #c9a25c; }
html[data-theme="dark"] #nook { --cov1: #2b545a; --cov2: #16323a; --gold-s: #d9b878; }
/* والخيطُ الفاصلُ بلون الورق: يُرى على الأخضر وعلى النقش سواءً */
/* وخيوطُ الأيّام تذوب وهو مقرَّب: المحورُ لم يعد خطّيّا، فحدُّ يومٍ عند العشرين
   في المئة لا يقابل شيئا */
.fl--wk.is-zoom .wk-sep { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .fl--wk .wk-on, .fl--wk .wk-off, .nk-box.is-zooming .fl-me { transition: none; }
}
.fl--wk .wk-sep {
  position: absolute; top: 0; bottom: 0; width: 1px; z-index: 2;
  background: var(--nk-paper); opacity: .9;
  transition: opacity var(--zdur, 700ms);
}
/* ===== د · الفارغ — فارغٌ من النقش لا من اللون =====
   كان ‎transparent‎ و‎opacity: 0‎: فارغا من كلّ شيء، فلا يبلغه مقبضُ اللون أصلا —
   ومقبضٌ لا يبلغ إلّا بعض حَمَلته يُقرأ معطّلا. والفراغُ المقصودُ فراغُ الشخطات
   لا فراغُ الخبر: سطحٌ مصمتٌ يقول «مغلق» بلونه وحدَه، لا ورقٌ يقول لا شيء */
.dt-d .wk-off { background: var(--dm-nof, var(--nk-ink)); opacity: var(--dt-off, .38); }

/* ============================================================
   جلدُ الموقع — منقولٌ من ‎academia2/css/styles.css‎ (‎#nook‎ ← ‎.nook‎)
   ============================================================ */
#nook {
  --nk-paper: #ffffff; --nk-line: #dbe6e6;
  --nk-title: #2c5e65; --nk-ink: #14233f; --nk-ink-soft: #5d6b82;
  --nk-shadow: 0 2px 10px rgba(20, 35, 63, .06), 0 8px 26px rgba(20, 35, 63, .05);
  --nk-gm-line: #a9ccd1; --nk-gm-tx: #0f303a;
  /* توكناتُ المؤشّر الأربعة — تُكتب من لوح المعايرة */
  --mk-len: 0px; --mk-w: 2px; --mk-ring: 1.5px; --mk-a: 72%; --mk-r: 2px;
  --dm-on: #3f8a52; --dm-off: #9aa8ad; --dm-soon: #c9902f;
  --as-ok: #3f8a5b; --as-warn: #a8822f; --as-bad: #bf5555; --as-dead: #55606b;
  --gold: #c9a25c;
}
html[data-theme="dark"] #nook {
  --nk-paper: #16272b; --nk-line: #25403f;
  --nk-title: #34676f; --nk-ink: #e7f0f0; --nk-ink-soft: #93a9ab;
  --nk-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  --nk-gm-line: rgba(145, 205, 214, .24); --nk-gm-tx: #eef7f8;
  --dm-on: #5fbf7a; --dm-off: #6d7f86; --dm-soon: #e0b660;
  --as-ok: #74c48c; --as-warn: #d8b878; --as-bad: #e59a9a; --as-dead: #9fb0b2;
  --gold: #d9b878;
}
@media (prefers-reduced-motion: reduce) {
  #nook .nk-box[data-k="info"] .cta,
  #nook .nk-box[data-k="info"] .fl,
  #nook .nk-box[data-k="info"] .fx-bk,
  #nook .nk-box[data-k="info"] .fx-val,
  #nook .nk-box[data-k="info"] .fx-sub { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  #nook .nk-box[data-k="doc"] .fl,
  #nook .nk-box[data-k="doc"] .fl-me,
  #nook .nk-box[data-k="doc"] .fx-val,
  #nook .nk-box[data-k="doc"] .fx-sub,
  #nook .nk-box[data-k="doc"] .cta { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  #nook .nk-box[data-k="abs"].is-wave .fl > i { animation: none; }
  #nook .nk-box[data-k="abs"] .fl,
  #nook .nk-box[data-k="abs"] .fl-me,
  #nook .nk-box[data-k="abs"] .fx-val,
  #nook .nk-box[data-k="abs"] .fx-sub,
  #nook .nk-box[data-k="abs"] .cta { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  #nook .nk-box[data-k="grade"].is-roll .fl > i { animation: none; }
  #nook .nk-box[data-k="grade"] .fx-val,
  #nook .nk-box[data-k="grade"] .fx-sub,
  #nook .nk-box[data-k="grade"] .cta { transition: none; }
}
/* ‏‎flex-start‎ لا ‎stretch‎: رأسُ الصندوق يثبت وذيلُه يمتدّ — ولو تُركت ‎stretch‎
   لَتساوت الأعمدةُ بأطولها ولَفضل في القصيرة فراغٌ يُدفع به صندوقُها */
#nook .nk-four { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 16px; }
/* ===== وللعمود قاعٌ لا ينزل تحته =====
   كان ‎min-width: 0‎ صرفا ليَقبل الانكماشَ تحت متنه، وهو لازم. لكنّه بلا قاعٍ يعني
   أنّ جارا واحدا لو طُلب له عرضٌ كبيرٌ لَسحق إخوتَه إلى الصفر — فيبقى في الصفّ
   خيطٌ لا صندوق. والقاعُ ‎96‎ دون أدنى ما يُسحب إليه المربّعُ بيده (‎120‎)، فلا
   يزاحم السحبَ ولا يمنع الانكماشَ، وإنّما يمنع الفناء.
   وأربعتُها ‎96 × 4 + 48‎ فجوةً = ‎432‎ — دون أضيق مسرحٍ قبل أن يلتفّ الصفُّ (‎820‎)،
   فلا يفيض الصفُّ بهذا القاع أبدا */
#nook .nk-four > .col { min-width: 96px; max-width: 100%; display: flex; flex-direction: column; }
#nook .nk-four > .col > .nk-box { width: 100%; flex: none; }
#nook .nk-box {
  position: relative; overflow: hidden;
  background: var(--nk-paper); border: 1px solid var(--nk-line); border-radius: 16px;
  box-shadow: var(--nk-shadow);
  transition: height .26s cubic-bezier(.4, 1, .5, 1);
}
@media (prefers-reduced-motion: reduce) { #nook .nk-box { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  #nook .nk-box[data-k="info"] { transition: none; }
}

/* ===== والسهمُ ظاهرٌ أبدا، والترسُ عند المسّ =====
   السهمُ فعلٌ يُطلب في كلّ حين («أرني ما تحت»)، فإخفاؤه حتّى يُمَسّ الصندوقُ يجعله
   سرّا لا يعرفه إلّا من عثر عليه — وفي الوضع الضيّق هو المخرجُ الوحيدُ إلى التفصيل.
   والترسُ إعدادٌ يُطلب نادرا، فيبقى مخفيّا حتّى يُقصَد */
/* ===== وقدُّ الأداتين نزل: ١٢ ← ١٠ للترس، و٩ ← ٧٫٥ للسهم =====
   والنسبةُ بينهما محفوظةٌ (٣:٤) — هي التي تقول «هذه أهمُّ وتلك أخفت»، فلو صُغّرت
   إحداهما وحدَها لَانقلب الخبر. ويُصغَّر الوضعان معا وإن كان النظرُ في الواسع:
   وُحّدا قصدا في جولةٍ سابقة، فتصغيرُ أحدهما يفكّ ما وُصل */
#nook .nk-gear, #nook .nk-fold {
  width: 10px; height: 10px; padding: 0; flex: none;
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .18s, color .15s, transform .15s;
}
/* ===== والترسُ بخفوت الزاوية ولونِها =====
   كان ذهبيّا (لونَ الفعل في الموقع)، والزاويةُ حبرٌ خافت — فيُقرآن أداتين من عائلتين
   وهما جارتان في ركنٍ واحد. فيُوحَّد السُّلَّمُ: خافتٌ ما لم يُقصَد، بيّنٌ إذا مُسّ
   الصندوقُ، ذهبيٌّ إذا مُسّ هو.
   ويبقى قدُّه اثنَي عشرَ وقدُّها تسعةً: هي ظاهرةٌ أبدا فتُخفَّف قدّا أيضا، وهو لا
   يُرى إلّا عند القصد فيحتمل قدَّه */
#nook .nk-gear {
  opacity: 0; pointer-events: none;
  color: color-mix(in srgb, var(--nk-ink-soft) 46%, transparent);
}
#nook .nk-box:hover .nk-gear { color: var(--nk-ink-soft); }
#nook .nk-box:hover .nk-gear { opacity: 1; pointer-events: auto; }
#nook .nk-gear svg, #nook .nk-fold svg { width: 10px; height: 10px; }
/* ===== والزاويةُ أصغرُ من أختها وأخفتُ =====
   هي ظاهرةٌ أبدا في أربعة صناديق، فوزنُها يُحسب أربع مرّات. والترسُ لا يُرى إلّا
   عند القصد فيحتمل قدَّه ولونَه.
   ===== والخفوتُ بمزجٍ لا بعتمة =====
   ‏‎opacity‎ على الزرّ تُخفّف مساحةَ لمسه في نظر العين لا في الواقع، وتتراكم مع أيّ
   عتمةٍ فوقه. والمزجُ يُخفّف **اللونَ** وحدَه ويبقى الزرُّ كاملا.
   ويشتدّ عند المسّ ليقول «أنا زرّ»: خافتٌ ما لم يُقصَد، بيّنٌ إذا قُصد */
#nook .nk-fold {
  width: 7.5px; height: 7.5px; margin-inline-start: 4px;
  color: color-mix(in srgb, var(--nk-ink-soft) 46%, transparent);
  transition: color .14s;
}
#nook .nk-box:hover .nk-fold { color: var(--nk-ink-soft); }
#nook .nk-fold:hover { color: var(--gold); }
#nook .nk-fold:hover { color: var(--gold); }
#nook .nk-gear:hover { color: var(--gold); transform: rotate(35deg); }

/* ============================================================
   تركيبُ «المِلء» (ع)
   ============================================================
   ‏‎.fl‎ صفيحةٌ مطلقةٌ تملأ الصندوق ولا تلتقط المؤشّر، ثمّ يطفو عليها السطر.
   وأربعةُ أوجهٍ لها: كاملةٌ · متدرّجةٌ إلى أعلى · قاعدةٌ بنسبة · حبّاتٌ بفجوة */
.fl {
  position: absolute; inset: 0; z-index: 0;
  display: flex; direction: var(--dir, rtl); gap: 0;
  opacity: var(--op, .22); pointer-events: none;
}
.fl > i { display: block; height: 100%; flex: none; }
/* ب · المتدرّج: تُقنَّع فتذوب صاعدةً، فيجلس النصُّ على أرضٍ أنظف */
.fl--soft {
  -webkit-mask: linear-gradient(to top, #000 var(--soft, 55%), transparent 100%);
  mask: linear-gradient(to top, #000 var(--soft, 55%), transparent 100%);
}
/* ج · القاعدة: لا تملأ الصندوقَ بل قاعَه بنسبة — بين «ع» و«م» */
.fl--base { top: auto; height: var(--bh, 40%); }
/* د · الحبّات: أعمدةٌ منفصلةٌ بفجوة — مسطرةٌ خلف النصّ لا لطخة.
   والفجوةُ عليه وحدَه لا على ‎.fl‎: مقبضُها موسومٌ «وجه د»، فلو كُتبت في الأصل
   لَتشقّقت الأوجهُ الثلاثةُ الأخرى معه وهي لا تريدها */
.fl--seg { gap: var(--fgap, 0px); }
.fl--seg > i { border-radius: 2px; }
/* ===== هـ · المخطّط: قناعٌ مشرشرٌ فتُقرأ **نقشًا** لا لطخة =====
   وهذه محاولةُ جوابٍ ثانيةٍ على خطر «ع»: اللطخةُ المصمتةُ تُشبه الزخرفة، والنقشُ
   المنتظمُ يُقرأ صنعةً مقصودة — فيصير الشكلُ نفسُه شاهدًا على أنّه بيان */
.fl--hatch {
  -webkit-mask: repeating-linear-gradient(115deg, #000 0 3px, transparent 3px 7px);
  mask: repeating-linear-gradient(115deg, #000 0 3px, transparent 3px 7px);
}
/* و · الحافّة: شريطٌ غليظٌ في القاع بقدٍّ **ثابتٍ بالبكسل** — لا بنسبةٍ كوجه ج،
   فقامتُه لا تتبدّل بتبدّل قامة المربّع فيبقى الخيطُ خيطًا */
.fl--band { top: auto; height: var(--band, 10px); }
/* ز · بلا أرضيّة: السؤالُ الذي لا بدّ منه — أيكفي الرقمُ وحدَه؟ */
.fl--off { display: none; }

/* ===== ومؤشّرُ الموضع لا يُعتم مع الأرضيّة =====
   هو أدقُّ ما في الخبر (أين أنت بالضبط)، والأرضيّةُ سياقُه. فلو نزل معها إلى العتمة
   نفسِها ضاع في لطختها — فيُرفع أخًا لها لا ابنًا، بعتمته الكاملة */
/* والطرفُ الذي يُقاس منه **طرفُ المحور لا طرفُ القراءة**: المحورُ بياناتٌ تُقاس،
   وقد يُقلب بمقبض ‎dir‎ والصفحةُ على حالها — فيُكتب ماديًّا (‎left‎/‎right‎) في الجافا */
/* ===== وطوقُه بلون الورق =====
   الأرضيّةُ تحته متبدّلةُ اللون (خضراءُ ثمّ حمراءُ ثمّ سوداء)، فخطٌّ عارٍ قد يقع على
   درجةٍ تقاربه فيذوب. فيُطوَّق بـ‎--nk-paper‎ — وهو **الطوقُ الأبيض** الذي يُرى قبل
   الخطّ نفسِه، ويتبع الثوبين معًا لأنّه توكنٌ لا لونٌ مكتوب.
   والعتمةُ في اللون لا في العنصر: ‎opacity‎ على الجسم تُخفّف الطوقَ معه فيذهب أثرُه */

/* ============================================================
   منتقي لون المؤشّر — طيفٌ كاملٌ لا تسعُ رُقَع
   ============================================================
   الرُّقَعُ المختارةُ سلفًا حَجْرٌ لا خيار: تسعةٌ من ستّةَ عشرَ مليونًا، ولا واحدةَ منها
   بالضبط ما في ذهنك. فيُعطى الطيفُ كلُّه في ثلاثة أشرطة: **الدرجة** (‎hue‎) ثمّ
   **الإشباع** ثمّ **الإضاءة** — وبها يُبلَغ كلُّ لونٍ ممكن، والغامقُ الغائرُ يُدرَك
   بإنزال الإضاءة لا باختيارٍ من قائمة.
   ===== وشريطُ الإشباع والإضاءة يتلوّنان بدرجتك =====
   شريطٌ رماديٌّ لا يقول شيئًا: أنت تختار من **لونك أنت** لا من مثالٍ عامّ. فيُبنى
   تدرّجُهما من الدرجة المختارة، فيُرى الأثرُ قبل الضغط.
   ===== وإضاءتان: واحدةٌ لكلّ ثوب =====
   الغائرُ يُرى على الورق الفاتح ويذوب في الداكن. فالدرجةُ والإشباعُ مشتركان (فجنسُ
   اللون واحد) والإضاءةُ لكلّ ثوبٍ إضاءتُه — فلا يختفي المؤشّرُ نصفَ الوقت */
#nook { --mk-c: hsl(var(--mkh, 190) var(--mks, 55%) var(--mkl, 11%)); }
html[data-theme="dark"] #nook { --mk-c: hsl(var(--mkh, 190) var(--mks, 55%) var(--mkld, 62%)); }
.nook.mkauto, html[data-theme="dark"] .nook.mkauto { --mk-c: var(--nk-ink); }
/* ===== ولونُ الإطار كذلك يُختار =====
   الطوقُ بلون **الورق** لأنّه ثُلمةٌ تفصل الخيطَ عمّا تحته — وهو حسنٌ ما دام تحته
   ورق. فإذا صار تحته أرضيّةٌ ملوّنةٌ أو نقشٌ صار الطوقُ خطًّا أبيضَ يصيح.
   فيُفتح: يبقى الورقُ أصلًا (‎mkrauto‎)، ومن أراد طوقًا داكنًا أو بلون الأرضيّة نفسِها
   أخذه من طيفٍ ثانٍ — والدرجةُ والإشباعُ مشتركان بين الثوبين والإضاءةُ لكلٍّ إضاءتُه،
   كما في طيف الحبر سواءً بسواء */
#nook { --mk-rc: hsl(var(--mkrh, 190) var(--mkrs, 20%) var(--mkrl, 96%)); }
html[data-theme="dark"] #nook { --mk-rc: hsl(var(--mkrh, 190) var(--mkrs, 20%) var(--mkrld, 14%)); }
.nook.mkrauto, html[data-theme="dark"] .nook.mkrauto { --mk-rc: var(--nk-paper); }/* ===== وشريطُ الطيف يُقصر على منتقيه =====
   ‏‎.cbar‎ اسمٌ مشغولٌ: به شريطُ «الحالات الجاهزة» فوق كلّ مربّع، وبه شريطُ الطيف
   في المنتقي. وهذا يقع بعده في الملفّ فيغلبه في المشترك — فيُسحق شريطُ الحالات
   في خمسةَ عشرَ بكسلا ويُرسم حوله إطارٌ غائرٌ ويصير مؤشّرُ الفأرة صليبا. وهما
   شيئان لا يجمعهما إلّا الاسمُ، فيُقصر الثاني على حاضنه ‎.cpick‎ ولا يُبدَّل اسمُه
   (لئلّا يفترق الجلدُ عن الجافا التي تسأل عن ‎.cbar[data-c]‎) *//* ============================================================
   توكناتُ المؤشّر الأربعة — طولٌ وسماكتان وشفافيّة
   ============================================================
   كان كلُّ شكلٍ يكتب أرقامَه بيده، فلا يُعايَر شيءٌ إلّا بتعديل ستٍّ وعشرين قاعدة.
   فصارت أربعةَ توكناتٍ يقرؤها الجميع:

     ‎--mk-len‎   الطولُ الرأسيّ. وههنا يُقاس بالصندوق لا بشريطٍ فيه، وكلَّما كبُر
                 **طال** المؤشّرُ في الاتّجاهين — لكلّ طائفةٍ مبدؤها وهو يزيد عليه:
                   الداخلةُ تبدأ منحسرةً ‎3‎ عن الحدّين · القاطعةُ تبدأ ملاصقةً لهما
                   · العابرةُ تبدأ متجاوزةً ‎4‎. فالمقبضُ واحدٌ ومنحاه واحدٌ في الثلاث.
     ‎--mk-w‎     السماكةُ الداخليّة (الحبر) — وكلُّ شكلٍ يشتقّ قدَّه منها، فتكبُر
                 الأشكالُ كلُّها معًا بمقبضٍ واحد.
     ‎--mk-ring‎  سماكةُ الإطار الورقيّ — وهو الذي يُرى «بياضًا» حول الخيط.
     ‎--mk-a‎     شفافيّةُ الحبر (نسبةً في ‎color-mix‎ لا ‎opacity‎ على الجسم: تلك تُخفّف
                 الإطارَ معه فيذهب أثرُه — والأرضيّةُ تحته ملوّنةٌ فيذوب).

   و‎--mk-cap‎ مشتقٌّ لا مقبض: قدُّ الأطراف (القوسان والشرطتان). يزيد بالطول ولا يبلغ
   الصفرَ عنده، وإلّا اختفت أطرافُ شكلٍ كاملٍ لأنّ الطولَ عند مبدئه.
   ===== والهامشُ يُحسب من العرض في موضعٍ واحد =====
   ‏‎margin: calc(var(--w) / -2)‎ للطرفين معًا — والمُهمَلُ منهما هو الذي لم يُصرَّح له
   ‎left/right‎، فيصحّ في الاتّجاهين. وكلُّ شكلٍ يُبدّل ‎--w‎ وحدَها */
.fl-me {
  --w: var(--mk-w, 2px);
  --ink: color-mix(in srgb, var(--mk-c, var(--nk-ink)) var(--mk-a, 72%), transparent);
  /* ===== ولا يُعرَّف توكنٌ بنفسه =====
     كُتب ههنا يوما ‎--paper: var(--paper)‎ — وقع من توحيدٍ شاملٍ بدّل سلسلةَ الاحتياط
     في كلّ موضعٍ ومنها **سطرُ التعريف**. وهو في CSS دَورٌ باطل: يصير التوكنُ قيمةً
     فاسدةً عند الحساب، فكلُّ ‎box-shadow‎ يقرؤه يسقط إلى ‎none‎ — فيذهب الطوقُ أصلا
     لا أنّه يخفى. ولا يصيح به فاحصٌ ولا يُرمى منه خطأ */
  --paper: var(--mk-rc, var(--nk-paper));
  /* ===== وحدٌّ خارجَ الطوق: البياضُ لا يُرى إلّا محدودا =====
     ورقُ الصندوق في الثوب الفاتح ‎#ffffff‎ بعينه، والطوقُ الأبيضُ عليه تباينُه
     ‎1.00 : 1‎. وليست العلّةُ في الطوق: وظيفتُه أن **يفصل** الحبرَ عن الأرضيّة، وهو
     على أرضيّةٍ من لونه لا شيءَ يفصله عنها. فيُبنى له حدٌّ رفيعٌ يقع خارجَه فيحدُّه:
       ورق │ حدٌّ باهت │ طوقٌ أبيض │ حبر │ طوقٌ أبيض │ حدٌّ باهت │ ورق
     ومزجُه بالورق لا بالشفافيّة **عمدا**: الشفّافُ يتراكم حيث تلتقي أربعُ ظلالٍ في
     الأركان فتُظلم، والممزوجُ لونٌ واحدٌ لا يتراكم. ومقبضاه ‎--mk-edge‎ للسماكة
     و‎--mk-ea‎ للمزج، وصفرٌ في الأوّل يُلغيه */
  --edge: color-mix(in srgb, var(--mk-c, var(--nk-ink)) var(--mk-ea, 24%), var(--paper));
  --ring2: calc(var(--mk-ring, 1.5px) + var(--mk-edge, 1px));
  /* ===== وطوقٌ للأشكال التي لا يمسكها box-shadow =====
     المثلّثُ حدودٌ لا جسم، والقوسُ ضلعان مفتوحان — و‎box-shadow‎ يتبع **صندوقَ**
     العنصر لا صورتَه، فيرسم مستطيلا حول الفراغ ويقطع الجهةَ المفتوحة. و‎drop-shadow‎
     يتبع الصورةَ المرسومةَ نفسَها، فأربعةٌ منه في الجهات الأربع تُخرج طوقا يلتفّ على
     الشكل كما هو. وسماكتُه ‎--mk-ring‎ عينُها فلا يفترق مقبضان */
  --mk-out:
    drop-shadow(var(--mk-ring, 1.5px) 0 0 var(--paper))
    drop-shadow(calc(-1 * var(--mk-ring, 1.5px)) 0 0 var(--paper))
    drop-shadow(0 var(--mk-ring, 1.5px) 0 var(--paper))
    drop-shadow(0 calc(-1 * var(--mk-ring, 1.5px)) 0 var(--paper))
    drop-shadow(var(--mk-edge, 1px) 0 0 var(--edge))
    drop-shadow(calc(-1 * var(--mk-edge, 1px)) 0 0 var(--edge))
    drop-shadow(0 var(--mk-edge, 1px) 0 var(--edge))
    drop-shadow(0 calc(-1 * var(--mk-edge, 1px)) 0 var(--edge));
  --mk-cap: calc(var(--mk-len, 0px) + 8px);
  position: absolute; z-index: 1; pointer-events: none;
  top: calc(3px - var(--mk-len, 0px)); bottom: calc(3px - var(--mk-len, 0px));
  width: var(--w); margin-left: calc(var(--w) / -2); margin-right: calc(var(--w) / -2);
  background: var(--ink); box-shadow: 0 0 0 var(--mk-ring, 1.5px) var(--paper),
    0 0 0 var(--ring2) var(--edge);
  border-radius: var(--mk-r, 2px);
}
.fl-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 0; }
.mk-tpin   .fl-me { --w: calc(var(--mk-w, 2px) * .9); }/* ===== والثلاثةُ الأخيرة **لا تدخل الصندوقَ أصلًا** =====
   تقف خارجَه من فوق ومن تحت وتُشير إليه، فلا تُغطّي أرضيّةً ولا تقطع نصًّا —
   وهي أنظفُ ما في الطائفة: الخبرُ كلُّه في الخارج والصندوقُ سليمٌ كما هو */
/* ============================================================
   والطوقُ يبلغ الأشكالَ كلَّها — لا الصندوقيَّ منها وحدَه
   ============================================================
   كان مقبضُ «لون الاطار» ميّتا في أحدَ عشرَ شكلا من ستّةٍ وعشرين، وعلّتُه علّتان:
   · شكلٌ يطلي «ورقا» بيده: الفجوةُ والحلقةُ والشقُّ كُتب فيها ‎var(--nk-paper)‎
     مصمتا — ورقُ الصندوق لا الطوقُ المعايَر. وقد صارت ‎var(--paper)‎.
   · وشكلٌ لا صندوقَ له: المثلّثاتُ والأقواسُ حدودٌ مرسومةٌ لا أجسام، فلا يمسكها
     ‎box-shadow‎. وقد صارت تلبس ‎--mk-out‎.
   والرمحُ يُنزع عنه الطوقُ الصندوقيُّ ويُعطى طوقَ الصورة: واحدٌ يلتفّ على القضيب
   ورأسِه معا، بدل مستطيلٍ يقطع الرأسَ في منتصفه.
   ويبقى «الناعم» بلا طوقٍ وحدَه — تدرّجٌ يذوب طرفاه، والطوقُ يُعطيه حدّا ينقض معناه */
.fx { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; min-width: 0; width: 100%; padding-inline: 14px; }
.fx-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
/* والرقمُ ووحدتُه على خطّ أساسٍ واحد: ‎baseline‎ لا ‎center‎ — فالوحدةُ حاشيةُ الرقم
   تجلس معه لا بجانبه. وهي طريقةُ ‎nook-num-lab‎ (‎.n2-hd‎) بعينها */
.fx-hd { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
/* ===== ونزولُ السطر على الخليّة لا على السطر =====
   المطلوبُ إنزالُ الغلاف، ولا يُنزَل وحدَه: هو والرقمُ والوحدةُ سطرٌ واحدٌ يُقرأ معا،
   فلو نزل أحدُهم انفكّ التنصيفُ الذي ضُبط قبلُ. فتنزل **الخليّة** بهم جميعا.
   والخليّةُ ‎.fx-swap‎ لا ‎.fx-hd‎: فيها السطرُ وزرُّ الحال الصفريّة أخوين في مربّعٍ
   واحد — فلو نزل السطرُ وحدَه لَتبدّل موضعُ المحتوى عند التبديل بينهما وقفزت الحركة.
   واللفظُ فوقهما لا ينزل: المطلوبُ فرجةٌ بينه وبين السطر، وهي عينُ ما يقع.
   ويُعمّ الأربعةَ: القاعدةُ بلا ‎data-k‎، فالمادّةُ والدكتورُ والغيابُ والدرجةُ سواء —
   وصفٌّ ينزل ثلاثةُ أرباعِه ويثبت رُبعُه أسوأُ من ألّا ينزل شيء */
/* ===== والمادّةُ ليست كالثلاثة =====
   سطرُها يحمل غلافا قامتُه ‎1.15‎ من الرقم، فالسطرُ عندها أطولُ وحاجتُه إلى النزول
   أكبر. والثلاثةُ سطرُها الرقمُ وحدَه، فما يصلح لها لا يصلح للمادّة.
   فالأصلُ للثلاثة (‎--hdy3‎)، والمادّةُ تُستثنى بمقبضها (‎--hdy‎).
   ===== وتقاربُهما بحركتين متقابلتين =====
   المطلوبُ «ارفع السطرَ وأنزل اللفظَ وقرّبهما» — وهو أمرٌ واحدٌ بوجهين: كلُّ بكسلٍ
   يُرفع من هذا ويُنزل على ذاك يُغلق بكسلين من الفرجة. ولا ثالثَ لهما (فجوةُ العمود
   تبقى كما هي): الإزاحةُ بـ‎top‎ لا تُعيد التخطيط، فلا يتزحزح شيءٌ سواهما */
.fx-swap { position: relative; top: var(--hdy3, .5px); }
/* ===== وقدُّ الغلاف يتبع قدَّ الرقم =====
   الوصفةُ وصفةُ الموقع لكتابه الصغير (‎#nook .nkm-bk__c‎): قامةٌ ‎22‎، وعرضُ حاضنٍ ‎18‎،
   ومنظورٌ ‎220‎، وسمكُ كعبٍ ‎3‎، ووجهٌ حشوتُه ‎2‎ بحرفَي ‎5‎ و‎8‎. فتُنسب كلُّها إلى قدٍّ
   واحدٍ (‎--bkn‎) بالنِّسَب نفسِها، ويُشتقّ هو من ‎--big‎ — فيقع على ‎21.85‎ عند الأصل
   (‎19‎) وهو ‎22‎ الموقع، ويكبر ويصغر مع الرقم الذي يجاوره بدل أن يجمد وحدَه.
   ===== ولا يُحاذى بخطّ القاعدة =====
   السطرُ ‎align-items: baseline‎، والغلافُ لا قاعدةَ له — فيُحاذى بخطّ قاعدةِ حافّته
   السفلى فيدفع السطرَ ويكبر. وهو عينُ ما وقع في سهمَي الغياب. فيُنصَّف بنفسه.
   ===== وتنصيفُ الصفّ ليس تنصيفَ الأرقام =====
   ‏‎align-self: center‎ يُنصّفه في **قامة الصفّ**، والأرقامُ لا تملأ صندوقَها: تجلس
   على الخطّ ولا تعلو عنه إلّا قدَّ الرقم. فمركزاهما لا يلتقيان، والفرقُ يُحسب من
   مقاييس الخطّ لا يُقدَّر:
     · الرقمُ ‎line-height: 1‎ وحروفُه من ‎Even Nums‎ بتجاوزٍ صريح (‎71.2٪‎ فوق و‎24.6٪‎
       تحت، ولا فجوة) — فالفضلةُ ‎(1 − .958) / 2 = .021‎، والخطُّ على ‎.733‎ من قمّة
       صندوقه (‎13.93px‎ عند ‎19‎).
     · وقامةُ الأرقام في ‎IBM Plex Arabic Bold‎: ‎yMax‎ ‎710‎ لخمسةٍ و‎698‎ لخمسة —
       فوسطُها ‎.704em‎، ومركزُها البصريُّ على ‎.733 − .352 = .381‎ من القمّة.
     · والغلافُ قامتُه ‎1.15‎، وهو أطولُ ما في الصفّ، فمركزُه على ‎.575‎.
   فالفرقُ ‎.381 − .575 = −.194‎ من ‎--big‎ (‎3.69px‎ عند ‎19‎) — يُرفع بها.
   وتفاوتُ قاماتِ الأرقام ‎.012em‎ = رُبعُ بكسلٍ عند الأصل، فأيُّ رقمٍ بينها سواء.
   والصيغةُ صحيحةٌ ما دام الرقمُ أعلى ما في الصفّ صعودًا — أي ‎--big > 1.14 × --sub‎،
   وهو الحاصلُ في المجال المستعمل (‎19‎ في مقابل ‎9.7‎).
   ويُزاح بـ‎top‎ لا بـ‎transform‎: التحويلُ محجوزٌ لحركة الحال الصفريّة */
.fx-hd .fx-bk {
  --bkn: calc(var(--big, 19px) * 1.15);
  flex: none; align-self: center;
  position: relative; top: calc(var(--big, 19px) * -.194);
  height: var(--bkn); width: calc(var(--bkn) * .82);
  display: flex; align-items: center; perspective: calc(var(--bkn) * 10);
}
.fx-hd .fx-bk .bk { height: var(--bkn); --thk: calc(var(--bkn) * .136); --r: calc(var(--bkn) * .068); }
.fx-hd .fx-bk .bk--ph .bkface { padding: calc(var(--bkn) * .091); gap: 0; }
.fx-hd .fx-bk .bk--ph .bkface b {
  font-size: calc(var(--bkn) * .227); line-height: 1.1; letter-spacing: normal;
}
.fx-hd .fx-bk .bk--ph .bkface i { font-size: calc(var(--bkn) * .364); }
/* ===== وخطُّ المربّعات الأربعة واحدٌ: خطُّ الهويّة =====
   كان الرقمُ بخطّ ‎KFUPM‎ واللفظُ والوحدةُ بـ‎IBM Plex‎، فالسطرُ الواحدُ بخطّين — وذاك
   يُقرأ «رقمٌ مستعارٌ وُضع في سطرٍ آخر» لا سطرًا واحدًا. فصار الأربعةُ كلُّها بخطّ
   الهويّة: اللفظُ والرقمُ والوحدةُ والعدّادُ ومتنُ الواسع.
   و‎IBM Plex‎ يبقى **احتياطًا** بعده: خطُّ الهويّة لا يحمل كلَّ محرفٍ عربيّ، فما سقط
   منه يقع على أخيه ولا يقع على خطّ النظام */
/* ============================================================
   زرُّ الإضافة في الحال الصفريّة — «المصمت»
   ============================================================
   الصندوقُ الفارغُ كان يقول «لا مواضيع» ويسكت: خبرٌ صحيحٌ بلا مخرج. والحالُ الصفريّةُ
   أوّلُ ما يراه الطالب، فهي موضعُ الدعوة إلى الفعل لا موضعُ الإخبار بالعدم.
   وعُرضت ستّةُ أوجه (مصمتٌ · منقّطٌ · حبّةٌ · نصٌّ · لوحٌ · هيكل) موزّعةً على محورِ
   «كم يأخذ من الصندوق، وهل يُقرأ زرّا أم دعوةً أم فراغا ينتظر» — فاختير أصرحُها
   وأثقلُها: **المصمت**. ونُزع ما سواه وشريطُ تبديله، فلا تبقى سقالةٌ لغرضٍ زال */
#nook .cta {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  border: 0; cursor: pointer; padding: 6px 10px; border-radius: 9px;
  background: var(--nk-title); color: var(--nk-paper);
  font: 800 var(--cta-fs, 10px)/1 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  transition: background .14s;
}
#nook .cta:hover { background: var(--gold); }
#nook .cta-ic { flex: none; display: inline-flex; width: 11px; height: 11px; }
#nook .cta-ic svg { width: 100%; height: 100%; display: block; }
#nook .cta-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-cap {
  flex: none; font: 700 var(--cap, 9px)/1 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--nk-ink-soft); opacity: .72; letter-spacing: .02em; white-space: nowrap;
  position: relative; top: var(--cdy3, 1.5px);
}
/* ===== واتّجاهُ الرقم صار ‎rtl‎ لا ‎ltr‎ =====
   كان ‎ltr‎ يومَ كان المتنُ **عددًا خالصًا** (‎A+‎ و‎28/9‎ و‎96.8%‎)، فصار في مربّع
   الدكتور **جملةً عربيّةً فيها أعداد**: «1 ساعة و29 دقيقة». والحاوي ‎ltr‎ يضع أوّلَ
   مقطعٍ منطقيٍّ أقصى **اليسار**، فيقع «1» يسارًا و«ساعة» يمينَه — والعينُ العربيّةُ
   تبدأ من اليمين فتقرأ «ساعة 1». وهو نصٌّ سليمٌ وترتيبٌ مقلوب.
   ===== ولا يُكسر العددُ بذلك =====
   الأعدادُ الخالصةُ مقطعٌ واحد (‎28/9‎ الشرطةُ فيه فاصلٌ مشترَكٌ يضمّ الطرفين، و‎−4%‎
   الإشارةُ فيه لاحقةٌ عدديّة)، والمقطعُ الواحدُ يُرسم يسارًا‑ليمين في الاتّجاهين معًا.
   وأمّا «11:30 ص» فمقطعان يستقيمان في ‎rtl‎: العددُ يمينًا و«ص» يسارَه — وهو المقروء */
.fx-val {
  flex: none; white-space: nowrap;
  font: 800 var(--big, 19px)/1 'Even Nums', 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--tone, var(--nk-ink)); direction: rtl;
}
/* ===== قدُّ اسم الوحدة =====
   ‏‎font-style: normal‎ لأنّ الحاضنَ ‎<i>‎ يميل بأصله، والمائلُ ههنا زخرفةٌ لا معنى.
   والوزنُ يبقى وزنَ الرقم فلا تُقرأ الوحدةُ لفظا آخرَ من سطرٍ آخر */
.fx-unit {
  font-size: var(--unit, 12px); font-style: normal; font-weight: inherit;
}
/* ===== وصندوقُ القصّ يُوسَّع لتنجوَ الهالة =====
   ‏‎overflow: hidden‎ ههنا حارسٌ من لفظٍ يطول (ومعه ‎text-overflow‎). لكنّه يقُصّ
   **ظلَّ النصّ** أيضا عند حدّ الصندوق — والهالةُ ظلٌّ نصفُ قطره ستّةُ بكسلات، فتُقطع
   دائرتُها عند الحدّ فتُرى مربّعا لا هالة. وهي في هذا العنصر وحدَه من الثلاثة التي
   تحمل الهالة، ولذلك ظهرت في اللفظ الأيسر ولم تظهر في الرقم ولا في العنوان.
   ===== والعلاجُ حشوةٌ يقابلها هامشٌ سالبٌ يساويها =====
   الحشوةُ توسّع صندوقَ القصّ ستّةً في الجهات الأربع فينجو الظلّ، والهامشُ السالبُ
   يردّ الخارجَ إلى ما كان — فلا يتحرّك حرفٌ ولا يتبدّل خطُّ الأساس، ويبقى الحارسُ
   عاملا: من طال لفظُه قُصّ بالنقاط كما كان، لكن بعد ستّةِ بكسلاتٍ لا قبلها */
.fx-sub {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 6px; margin: -6px;
  font: 700 var(--sub, 8.5px)/1.2 'KFUPM Display', 'IBM Plex Sans Arabic', sans-serif; color: var(--nk-ink-soft);
}
/* ===== الهالة: حرفٌ على أرضيّةٍ ملوّنة =====
   الأرضيّةُ تحت النصّ متبدّلةُ اللون، فقد يقع الحرفُ على درجةٍ تقاربه فيذوب. والهالةُ
   بلون **الورق** لا بلونٍ مكتوب: تتبع الثوبين معًا وتُبقي التبايُنَ حيثما وقع الحرف */
.fx.halo .fx-val, .fx.halo .fx-cap, .fx.halo .fx-sub {
  text-shadow: 0 0 3px var(--nk-paper), 0 0 6px var(--nk-paper);
}
/* ===== وأدواتُ البند لا تحجز عرضا وهي مخفيّة =====
   الترسُ والطيُّ ‎opacity: 0‎ حتّى تُمَسّ الصندوقُ، ومع ذلك يشغلان في السَّيل ستّةً
   وثلاثين بكسلا وفجوةً تسعةً. وعمودُ الدكتور أضيقُ الأربعة (‎187px‎)، فيبقى للصفّ
   ‎114px‎ والمطلوبُ ‎150.4px‎ — فيُقصّ اللفظُ بنقاطٍ **وأمامه فراغٌ لا يُرى فيه شيء**،
   وهو موضعُ أداتين مخفيّتين. والنقصُ ‎36.4px‎ = قدُّهما بعينه.
   فتُرفعان من السَّيل إلى ركن الصفّ: تظهران في موضعهما عند المسّ ولا تأخذان من
   عرضٍ لا يفضل منه شيء. و‎.wt‎ في الواسع يبقى على سَيله (المحدِّدُ ابنٌ مباشرٌ للصفّ) */
.fx-tools { flex: none; display: inline-flex; align-items: center; margin-inline-start: auto; }
/* ===== والأدواتُ في الطرف الأيسر لا الأيمن =====
   كانت تُدفَع بهامشٍ تلقائيٍّ إلى نهاية السطر (يسارِه في العربيّة)، فلمّا رُفعت من
   السَّيل كُتب لها ‎inset-inline-start‎ — وهي في الاتّجاه العربيّ **اليمين**، فانتقلت
   إلى الجهة الأخرى. والمقصودُ نهايةُ السطر، فتُكتب ‎inset-inline-end‎.
   وترتيبُ الاثنين يتبع سَيلَ السطر: الترسُ أوّلُ الأبناء فيقع يمينَ السهم، والسهمُ
   آخرُهما فيقع في الطرف — فيبقى موضعُه ثابتا سواءٌ ظهر الترسُ أم اختفى */
.fx > .fx-tools {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  z-index: 3; margin: 0;
}
#nook .nk-body .chipe--absview .abc.is-cut::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: var(--abs-cut-len, 132%); height: var(--abs-cut-w, 1.4px);
  background: currentColor; border-radius: 1px;
  transform: translate(-50%, -50%) rotate(var(--abs-cut-rot, -45deg));
  pointer-events: none;
}
#nook .nk-doc__all .dr-rate .star {
  width: calc(11px * var(--dmz, .72)); height: calc(11px * var(--dmz, .72));
}
/* ===== جملةُ الحال في سطر العنوان =====
   قدُّها قدُّ اللافتة التي كانت ههنا (‎nk-doc__pill‎ = ‎10.5px‎) فهو المعايَر لهذا
   السطر، ووزنُها ولونُها لونُ الألفاظ الصغيرة في هذه العائلة (‎--nk-ink-soft‎) —
   بلا رقعةٍ ولا مصباحٍ ولا تلوينٍ بالحال: المطلوبُ خبرٌ لا شارة.
   واسمُها ‎nk-hnow‎ لا ‎nk-doc__now‎: الدكتورُ والغيابُ يقولانها، ولعلّ غيرَهما.
   والاسمُ المنسوبُ إلى أوّل من لبسه يُغري بنسخِ جلده لمن يليه */
#nook .nk-hnow {
  flex: 0 1 auto; min-width: 0; margin-inline-start: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 10.5px 'IBM Plex Sans Arabic', sans-serif; color: var(--nk-ink-soft);
}
/* ============================================================
   عتباتُ طبقات الدكتور — منقولةٌ من الموقع يدا
   ============================================================
   طبقاتُ المكتب والبريد والساعات والتقييم والوصف كانت في الوسم كلَّها ولا تُرى
   واحدةٌ منها: أصلُها ‎display: none‎، والذي يكشفها في الموقع خمسُ قواعدِ
   ‎@container‎ تسأل عن قامة المربّع.
   ===== ولِمَ سقطت: المستخرِجُ يتخطّى ما بدأ بـ@ =====
   ‏‎css_pull.py‎ يجمع القواعدَ بحدّ ‎{}‎ ويتخطّى كلَّ كتلةٍ رأسُها ‎@‎ (وإلّا التبس
   عليه حدُّها الخارجيّ بحدّ ما فيها). فنُقل ‎display: none‎ ولم يُنقل ما يرفعه —
   وهذا أخبثُ من ألّا يُنقل شيء: الوسمُ حاضرٌ والجلدُ حاضرٌ والنتيجةُ خواء.
   فتُكتب ههنا يدا، وتبقى خارج الكتلة المستخرَجة فلا تمحوها إعادةُ النقل.
   ===== والقامةُ لا تنمو بما فيها =====
   ‏‎container-type: size‎ على ‎#nook .nk-doc‎ (وهو منقول) يقطع أثرَ المحتوى في
   القدّ، فالمربّعُ لا يطول بما يُكشف فيه — وإلّا لَكشفت الطبقةُ طبقةً بعدها في
   حلقةٍ لا تنتهي. فالقامةُ من ‎--wh‎ أو من سحب الحافّة، والعتباتُ تقرؤها */
/* ===== ثمّ رُفعت العتباتُ وحلّ محلَّها التمرير =====
   كانت الطبقاتُ تُكشف واحدةً بعد واحدةٍ بقامة المربّع، فما لم تبلغه العتبةُ **يُمحى**
   من الشاشة ولا سبيلَ إليه إلّا بإطالة المربّع. والقاعدةُ التي استقرّت: ما لا يسعه
   المربّعُ يُمرَّر إليه لا يُمحى — فيبقى الشريطُ شاهدا أنّ ثَمّ ما لم تره.
   فتُرفع الخمسُ ويُفتح ‎nk-doc__t‎ أبدا */
#nook .nk-doc__t { display: block; }
/* ===== والغلافُ خارج السطر أكبر =====
   القياساتُ فوق (‎22px‎ وما بُني عليها) مقدَّرةٌ لكتابٍ محشورٍ في سطر عنوان. فإذا
   نزل إلى صفّه اتّسع له المكان. والنِّسَبُ هي نِسَبُ الموقع بعينها منسوبةً إلى قدٍّ
   واحد (‎--bkc‎): العرضُ ‎.818‎ والمنظورُ عشرةُ أضعافٍ والكعبُ ‎.136‎ والانحناءُ ‎.068‎
   وحشوةُ الوجه ‎.091‎ وحرفاه ‎.227‎ و‎.364‎ — فتغييرُ القدّ كلِّه رقمٌ واحد.
   واسمُ الكتاب لا يُصرَّح له بشيء: سقوطُ ‎#nook .nkm .nk-t .nkm-bk__n‎ عنه يردّه
   إلى أصله (‎12.5px‎ في سطرين) وحدَه */
/* ===== ورقعةُ المادّة تُقاس برقعة الدكتور لا بنفسها =====
   المطلوبُ أن تكونا سواءً، فلا تُنسخ أرقامُها بل تُشتقّ من أرقامه ومن معامله
   (‎--dmz‎) — فتتبعه أبدا إن حُرّك مقبضُه، ولا يفترقان بعد اليوم.
   وقامةُ الغلاف تُساوي قامةَ الوجه **بطوقه**: ‎--dm-av + 2×--ring‎ = ‎34 + 5 = 39‎
   مضروبةً في المعامل. والغلافُ نسبتُه ‎.7‎ فيخرج أضيقَ من الوجه — وتلك صورةُ الكتاب
   لا خللٌ في القياس؛ المقصودُ تساوي القامتين لا تساوي العرضين */
#nook .nkm > .nkm-bk {
  --bkc: calc(39px * var(--dmz, .72));
  gap: calc(10px * var(--dmz, .72));
  padding: calc(4px * var(--dmz, .72));
  padding-inline-end: calc(10px * var(--dmz, .72));
  border-radius: calc(12px * var(--dmz, .72));
}
#nook .nkm > .nkm-bk .nkm-bk__n { font-size: calc(13.5px * var(--dmz, .72)); }
#nook .nkm > .nkm-bk .nkm-bk__c {
  height: var(--bkc); width: calc(var(--bkc) * .818); perspective: calc(var(--bkc) * 10);
}
#nook .nkm > .nkm-bk .nkm-bk__c .bk,
#nook .nkm > .nkm-bk .nkm-bk__c .bk--xs {
  height: var(--bkc); --thk: calc(var(--bkc) * .136); --r: calc(var(--bkc) * .068);
}
#nook .nkm > .nkm-bk .nkm-bk__c .bk--ph .bkface { padding: calc(var(--bkc) * .091); gap: 0; }
#nook .nkm > .nkm-bk .nkm-bk__c .bk--ph .bkface b { font-size: calc(var(--bkc) * .227); }
#nook .nkm > .nkm-bk .nkm-bk__c .bk--ph .bkface i { font-size: calc(var(--bkc) * .364); }
/* ===== ولفظُ «المواضيع» بثوب «لغة المادة» =====
   وهو ‎#nook .nkm-bx i‎ في الكتلة المنقولة (السطرُ ‎.nk-doc__bg i, .nkm-bx i‎).
   ولم يُضمّ إليه محدِّدا لأنّ تلك الكتلةَ تُستخرج آليّا من الموقع، فإضافةٌ فيها
   تُمحى عند أوّل إعادة نقل. فتُكتب القيمُ ههنا ويُسمّى مصدرُها — ومن غيّر هناك
   فليُغيّر ههنا */
#nook .nkm-lab {
  font: 500 10.4px 'IBM Plex Sans Arabic', sans-serif; color: var(--nk-ink-soft);
  font-style: normal; margin-bottom: 1px;
}

/* ============================================================
   الجوفُ محدودُ القامة، وحاضنتُه، وشريطُها
   ============================================================
   ===== أوّلا: الجوفُ لا يفيض على نفسه ما لم يُحَدّ =====
   الصندوقُ الواسعُ كان ‎display: block‎، فقامةُ جوفه قامةُ محتواه أبدا — يفيض على
   الصندوق فيقصّه ‎overflow: hidden‎ بلا شريط. فصار الصندوقُ عمودا مرنا: العنوانُ
   ‎flex: none‎ وحاضنةُ الجوف ‎flex: 1 1 auto‎ مع **‎min-height: 0‎** — وتلك هي
   المفتاح، فأصلُ عضو الفلكس ‎min-height: auto‎ فلا ينكمش دون محتواه.
   ===== وثانيا: حاضنةٌ نسبيّةٌ تجمع الجوفَ وشريطَه =====
   الشريطُ يحتاج أن يعرف أين يبدأ الجوفُ وأين ينتهي. ولو وُضع على الصندوق لَاحتاج
   قامةَ العنوان — وهي في المادّة غيرُها في إخوتها. فتُوضع حاضنةٌ (‎nk-sc‎) حدودُها
   حدودُ الجوف بعينها، ويُعلَّق الشريطُ عليها بلا رقمٍ مقيس.
   ===== وثالثا: يُخمَد الشريطُ الأصليُّ =====
   ‏‎scrollbar-width: none‎ ومعها ‎::-webkit-scrollbar { width: 0 }‎ — والجمعُ ههنا
   مقصودٌ وسليم: كلتاهما تُخفي، فلا يضرّ أن تُسقط إحداهما الأخرى.
   وحدٌّ شفّافٌ على الجهة يحجز مَجرى شريطنا فلا يجري المتنُ تحته، وآخرُ في القاع
   يحجز حرمَ مقبضَي القامة والزاوية */
#nook .nk-box[data-m="wide"] { display: flex; flex-direction: column; }
/* والقامةُ لا تُنتقل وهي تُسحب: الانتقالُ (‎.26s‎) لِمَورِ الضيّق⇄الواسع وحدَه */
#nook .nk-box.is-rz { transition: none; }
@media (max-width: 820px) {
  #nook .cbars { display: none; }
  #nook .nk-four { flex-wrap: wrap; }
  /* و‎!important‎ مقصودة: العرضُ المسحوبُ يُكتب سطريّا على العمود، ولا يُغلب
     السطريُّ إلّا بها. والمقاسُ يُعطَّل ولا يُمحى، فمن عاد إلى شاشته الواسعة
     وجد نوافذَه كما تركها — وهي حجّةُ الموقع نفسِها في هذه القاعدة */
  #nook .nk-four > .col { flex: 1 1 100% !important; }
  #nook .nk-four > .col > .cbar { display: flex; flex: none; margin-bottom: 7px; }
}
#nook .nk-doc .nk-t .nk-hnow, #nook .nkm .nk-t .nk-hnow {
  white-space: normal; overflow: visible; text-overflow: clip;
}
/* ============= انتهى ثيمُ المربّعات الاربعة ============= */

/* ===== والوضعان يتبادلان بالوسم لا بالبناء =====
   جسدُ الضيّق يُبنى ابدا (فالطيُّ لا يُعيد البناء)، فيُخفى في الواسع كما يُخفى
   متنُ الواسع في الضيّق. وهكذا يصير الطيُّ **قلبَ صفةٍ** لا هدمَ شجرة */
#nook .nk-box[data-m="wide"] > .fl-clip,
#nook .nk-box[data-m="wide"] > .fl-me,
#nook .nk-box[data-m="wide"] > .fx { display: none !important; }

/* ===== ما بقي من الثيم: خصائصُ محدِّداتُها في الموقع بقيمٍ اخرى =====
   الطوران السابقان نقلا **القواعدَ الغائبة**، وتركا كلَّ محدِّدٍ وُجد اسمُه في الموقع
   ولو اختلفت قيمُه. فسقطت ثمانيَ عشرةَ خاصّةً هي عملُ جولاتٍ متأخّرة:
     · ‎.abc { position: relative }‎ — مرساةُ خطّ الشطب. وبلا مرساةٍ تُحسب نسبتُه
       من الرقعة لا من الحبّة، فيصير خطًّا قُطريًّا يعبر المربّعَ كلَّه (قِيس ‎248px‎).
     · وتقريبُ رقعة الدكتور بمعامل ‎--dmz‎، والتفافُها المتدرّج (‎flex-wrap‎ وقاعُ
       الاسم ‎60px‎ وقدُّ الوجه بوحدة الحاوية) — وهي التي جعلت الرقاعَ «تلحق الحافّة». */

#nook .nk-body .chipe--absview .abc {
  position: relative;
}
#nook .nk-doc {
  --dm-av: calc(34px * var(--dmz, .72));
  --dot: calc(11px * var(--dmz, .72));
  --ring: calc(2.5px * var(--dmz, .72));
}
#nook .nk-doc__top {
  gap: calc(10px * var(--dmz, .72));
  --dm-av: clamp(26px, 22cqw, 34px);
}
#nook .nk-doc__idw {
  gap: calc(10px * var(--dmz, .72));
  padding: calc(4px * var(--dmz, .72));
  padding-inline-end: calc(10px * var(--dmz, .72));
  border-radius: calc(12px * var(--dmz, .72));
  flex-wrap: wrap;
}
#nook .nk-doc__who {
  flex: 1 1 60px;
}
#nook .nk-doc__nm {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-size: calc(13.5px * var(--dmz, .72));
  line-height: 1.35;
}
#nook .nk-doc__all {
  font-size: calc(11px * var(--dmz, .72));
}

/* ============================================================
   وأداتا الضيّق كأداتَي الواسع: السهمُ ظاهرٌ أبدا
   ============================================================
   ‏«الايقونة حقت التوسيع يفترض تكون ظاهرة طول الوقت، مو لما اقرب الماوس من المربع».

   ===== وسببُه أنّ الثيمَ كتب القدَّ ولم يكتب العتمة =====
   جلدُ المربّعات القديمُ في الموقع يطوي الأداتين معا:
     ‏`#nook .nk-gear, #nook .nk-fold { width: 0; opacity: 0; pointer-events: none;
                                        overflow: hidden }`
     ‏`#nook .nk-box:hover .nk-fold   { width: 12px; opacity: 1; margin-inline-end: 5px }`
   وثيمُ الضيّق المنقولُ من ‎RE/nook-four‎ كتب للسهم قدَّه (‎7.5‎) ولونَه وهامشَه، **ولم
   يكتب عتمتَه** — فالأخصّيّةُ متساويةٌ (‎1,1,0‎) والذيلُ يغلب فيما يُصرّح به وحدَه،
   فورث السهمُ ‎opacity: 0‎ من القاعدة القديمة. والوضعُ الواسعُ سلم لأنّ قواعده كُتبت
   بمفتاح ‎.fx-tools.fx-tools--w‎ فبلغت ‎(1,5,0)‎ وصرّحت بالعتمة صراحةً.

   ===== وعطبٌ ثانٍ ظهر في القياس ولم يُشتكَ منه =====
   القاعدةُ الممسوسةُ لا تُظهر السهمَ فحسبُ، بل **تُكبّره**: قِيس عند مرور الفأر
   ‏`12×7.5 · mEnd 5px` بعد أن كان `7.5×7.5 · mEnd 0`. فالسهمُ والترسُ يقفزان قدًّا
   وهامشا كلّما اقترب الفأر — وهو أسوأُ من الاختفاء: شيءٌ يتحرّك تحت اليد وأنت تقصده.

   ===== ولا تُحذف القواعدُ القديمة =====
   هي منقولةٌ من الموقع استخراجا آليّا، فحذفُها يدويّا يُنقض عند أوّل إعادة نقل
   (وهو الحكمُ نفسُه المتّبَع في أداتَي الواسع فوق). فيُعلى عليها بمحدِّدٍ يبلغ
   ‏‎(1,3,0)‎ — وهو يغلب الممسوسةَ ‎(1,2,0)‎ **بالأخصّيّة لا بالترتيب**، فلا يُنقض
   بتبدّل مواضع الكتل.
   و‎.fx > .fx-tools‎ تخصّ الضيّقَ وحدَه: أداتا الواسع ابنتان مباشرتان للصندوق لا لـ‎.fx‎.

   ===== والسهمُ يشتقّ قدَّه من صندوقه =====
   ‏‎flex: 0 1 auto‎ ردٌّ للأصل: الموقعُ يكتب على المرسوم ‎flex: none‎ فيبقى عشرةً في
   صندوقٍ قدُّه ‎7.5‎ فيُقصّ طرفاه (‎overflow: hidden‎ كان يُخفي القصّ بأن يُخفيه كلَّه).
   وفي المختبر لا ‎flex‎ عليه فينكمش إلى ‎7.5‎ — وهو المقيسُ هناك (‎svg 7.5×10‎).
   والواسعُ يبقى على عشرته: قواعدُه أخصُّ ولا تُمَسّ */
#nook .fx > .fx-tools .nk-fold {
  width: 7.5px; height: 7.5px; margin-inline-end: 0;
  overflow: visible; opacity: 1; pointer-events: auto;
}
#nook .fx > .fx-tools .nk-gear {
  width: 10px; height: 10px; margin-inline-end: 0; overflow: visible;
}
#nook .fx > .fx-tools .nk-fold svg { flex: 0 1 auto; }

/* ============================================================
   صفُّ الكتاب يُردّ الى قدّ المختبر
   ============================================================
   الكتابُ نزل من سطر العنوان الى صفٍّ خاصٍّ به (§١٦)، فسقط عنه تقييدُ السطر
   (`#nook .nkm .nk-t .nkm-bk__n` بسبعةِ بكسلات) — **ووقع في كتلةٍ اخرى**:
   `#nook .nkm > .nkm-bk` تشترط ان يكون ابنا مباشرا لـ`.nkm`، وهو الآنَ كذلك.
   وتلك الكتلةُ تُكبّر الصفَّ كلَّه بمعامل `--dmz`: غلافٌ `39 × .72 = 28` واسمٌ
   `13.5 × .72 = 9.7` وفجوةٌ وحشوةٌ وانحناءٌ مضروبةٌ كلُّها.

   ===== وهي ميتةٌ في المختبر لا حيّة =====
   في `RE/nook-four` الكتابُ في جوفٍ داخليّ (`.nkm__scroll`) فليس ابنا مباشرا،
   فلا تُصيبه الكتلةُ اصلا — والمقيسُ هناك هو **الاصل**: غلافٌ `18×22` واسمٌ
   `12.5px`. فالكتلةُ وتعليقُها («والغلافُ خارج السطر أكبر») وصفُ ترتيبٍ سابقٍ
   نُسخ مع الورقة ولم يعد يُرسم. والمرجعُ ما **يُرى** في المختبر لا ما يُقرأ فيه.

   ===== ويُردّ القدُّ بتوكنٍ واحد =====
   نِسَبُ الكتلة كلُّها مشتقّةٌ من `--bkc`، ونِسَبُ الاصل هي هي: العرضُ `.818×22=18`
   والكعبُ `.136×22=3` والانحناءُ `.068×22=1.5` وحشوةُ الوجه `.091×22=2` وحرفاه
   `.227×22=5` و`.364×22=8`. فردُّ `--bkc` الى `22px` يردّ الغلافَ كلَّه بلا سطرٍ
   ثانٍ — ومن اراد الغلافَ الاكبرَ يوما ردَّ الرقمَ وحدَه.
   والاسمُ وحدَه يُصرَّح له لانّه مشتقٌّ من `--dmz` لا من `--bkc`.
   ولا تُحذف الكتلةُ الاصليّة: تُستخرج آليّا، والحذفُ يُنقض عند اوّل اعادة نقل */
#nook .nkm > .nkm-bk {
  --bkc: 22px;
  gap: 7px; padding: 4px; padding-inline-end: 9px; border-radius: 10px;
}
#nook .nkm > .nkm-bk .nkm-bk__n { font-size: 12.5px; }

/* ============================================================
   مقابضُ التوسيع لا تُرى — والمؤشّرُ وحدَه يدلّ
   ============================================================
   في الموقع كانت تُطلى: `background: var(--nk-title)` تلمع بـ`.14` اذا مُسّ
   المربّعُ وبـ`.5` اذا مُسّت هي — فيظهر شريطان رماديّان على الحافّة اليسرى والذيل
   كلّما مرّ الفأرُ بمربّع.

   ===== وقد رُدّ هذا الشكلُ في المختبر بعد شكلين قبله =====
   نصُّ الحكم في `RE/nook-four`: «جُرّب لها شكلان فرُدّا: شريطان ملوّنان على الحافّة
   (لا يقولان ما هما)، ثمّ حبّاتٌ مستديرةٌ في وسط الحافّتين (تُقرأ، لكنّها زينةٌ داخل
   النافذة لا خبرَ فيها). والحكمُ الذي استقرّ: **لا أيقونةَ أصلا** — يكفي أن يتبدّل
   شكلُ المؤشّر اذا قاربتَ الحافّةَ أو الزاوية. وهو عُرفُ النوافذ في كلّ نظام».

   ===== ولا يُلغى السحبُ، انّما يُلغى شكلُه =====
   المساحاتُ الثلاثُ باقيةٌ تلتقط الاصبعَ كما كانت، و`cursor` باقٍ على حاله
   (`ew-resize` و`ns-resize` و`nesw-resize`) — وهو الدالُّ الوحيد.
   ويتّسع حرمُها الى مقاس المختبر (`11` و`11` و`14` بدل `6` و`6` و`12`): ما لا يُرى
   يُمسَك بالحرم لا بالعين، ونوافذُ النظام نفسُها تُمسَك بأربعةٍ الى ستّة.
   وفي الضيّق تمتدّ الحافّةُ قامةَ الصندوق كلَّها الّا قليلا: أربعةٌ وأربعون لا تحتمل
   حجزا كحجز الواسع */
#nook .nki-rz { background: transparent; border-radius: 0; }
#nook .nki-rz--w { left: 0; top: 12px; bottom: 22px; width: 11px; }
#nook .nki-rz--h { bottom: 0; left: 22px; right: 14px; height: 11px; }
#nook .nki-rz--c { left: 0; bottom: 0; width: 14px; height: 14px; z-index: 7; }
#nook .nk-box[data-m="narrow"] .nki-rz--w { left: 0; top: 3px; bottom: 3px; width: 8px; }

/* ============================================================
   شريطُ التمرير — منقولٌ من RE/nook-four كما هو
   ============================================================
   (ROADMAP-NOOK-THEME.md §١٨ · وخارطتُه هناك ROADMAP-NOOK-SCROLL.md)
   وهو النصفُ الثاني لِما رُفع في §١٧: رُدَّ شكلُ مقابض التوسيع، وحلّ محلَّه هذا —
   خيطٌ نحيلٌ على الحافّة يقول «ثَمّ ما لم تره»، ويُنقل اليه.
   والقاعدةُ التي استقرّت: **ما لا يسعه المربّعُ يُمرَّر اليه لا يُمحى**.
   والكتلتان دون تبديل حرف: حاضنةُ التمرير (.nk-sc) ثمّ الشريطُ نفسُه (.nk-sb) */
#nook .nk-box[data-m="wide"] > .nk-sc,
#nook .nk-box[data-m="wide"] .nkm > .nk-sc {
  position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex;
}
#nook .nk-sc > .nkm__scroll,
#nook .nk-sc > .nk-doc__scroll,
#nook .nk-sc > .nk-body {
  flex: 1 1 auto; min-width: 0; min-height: 0; height: auto;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  border-inline-end: 14px solid transparent;
  border-bottom: 13px solid transparent;
}
#nook .nk-sc > .nkm__scroll::-webkit-scrollbar,
#nook .nk-sc > .nk-doc__scroll::-webkit-scrollbar,
#nook .nk-sc > .nk-body::-webkit-scrollbar { width: 0; height: 0; }
/* وجوفُ المادّة الداخليُّ يرث فجوةَ ‎.nkm‎ وسَيلَها: هو بديلُها لا زائدٌ عليها */
#nook .nk-sc > .nkm__scroll { display: flex; flex-direction: column; gap: 8px; }
#nook .nk-sc > .nk-doc__scroll { display: flex; flex-direction: column; }

/* ============================================================
   الشريطُ من صنعنا — لا من صنع المحرّك
   ============================================================
   جُرّب الشريطُ الأصليُّ أربعَ جولاتٍ فلم يُمسَك، وخمسةُ ألغامٍ فيه مقيسةٌ في
   ‎ROADMAP-NOOK-SCROLL.md‎ §٤. وأخطرُها أنّه **ليس عنصرا في الشجرة**: لا يراه
   ‎_dom-probe‎ ولا ‎_cascade‎ — وفي مشروعٍ يُفحص بالقراءة، اختيارُ ما لا يُقرأ خطأٌ
   في المنهج قبل التنفيذ. فيُبنى عنصرا: مَجرًى وإبهامٌ، قامتُه وموضعُه من الجافا.
   ===== ولا يُرى إلّا حين يبقى متنٌ =====
   بصنف ‎is-more‎ يُكتب على الصندوق بعد قياس ‎scrollHeight‎ — وهو عينُ ما طُلب.
   ومع الإخفاء ‎pointer-events: none‎ لئلّا يبتلع نقرا وهو غيرُ مرئيّ */
/* ===== ولا انتقالَ على ظهوره =====
   كان ‎transition: opacity .18s‎ فكان يومض عند كلّ رسمة: ‎render()‎ يبني الشريطَ
   جديدا فتُحسب له عتمةُ الصفر، ثمّ يقرأ ‎sbSync‎ قاماتِ الأجواف — والقراءةُ تُجبر
   حسابَ الأنماط بتلك الصفر — ثمّ يُكتب ‎is-more‎ فتصير واحدا. فيجد المحرّكُ طرفَي
   انتقالٍ صحيحين (٠ ← ١) فيُشغّله: يختفي الشريطُ ثمّ يعود في خُمس ثانية.
   ولا حيلةَ في ترتيب القراءة والكتابة — القياسُ **يجب** أن يسبق الحكم. فيُرفع
   الانتقال: الشريطُ يظهر ويغيب فورا كما تفعل أشرطةُ النظام، ولا طرفَي انتقالٍ
   أصلا فلا وميض. والانتقالُ الباقي على الإبهام لونٌ لا عتمة، ولا يُبنى معه شيء */
#nook .nk-sb {
  /* ===== يمتدّ من الأعلى إلى الأسفل كأنّه من الإطار =====
     لا حشوةَ في طرفيه ولا انحناءَ له: انحناءُ الصندوق نفسِه (‎16px‎) مع ‎overflow:
     hidden‎ يقصّ طرفيه فيستديران بقدر الإطار لا بقدرٍ من عندنا.
     ===== وحرمُ الحافّة أربعةَ عشرَ يُقسَم بينه وبين مقبض العرض =====
     الجوفُ يحجز على جهته حدّا شفّافا (‎14px‎) فلا يجري متنُه تحت شيء. فالستّةُ
     الأولى للشريط ملاصقةً للحافّة، وما تليها للمقبض.
     ===== ثلاثةٌ أبدا، ولا انتفاخ =====
     جُرّب أن ينتفخ إلى سبعةٍ إذا دخل المؤشّرُ الصندوقَ ليصير مقبضا، فرُدّ: القدُّ
     المتبدّل يُقرأ اضطرابا في الإطار، والإطارُ لا يتنفّس. والقرارُ صريحٌ من صاحب
     الموقع: يبقى خيطا وإن لم تُلتقط به الفأرة.
     وليس ذلك حبسا للمتن: النقرُ على المجرى يقفز صفحةً نحو النقرة، والعجلةُ
     واللمسُ يمرّان — والإبهامُ خبرٌ يقول «أين أنت من المتن» قبل أن يكون مقبضا */
  position: absolute; inset-inline-end: 0; top: 0; bottom: 0; width: 3px;
  z-index: 6; opacity: 0; pointer-events: none;
  /* ===== والخفوتُ بالمزج لا بالعتمة =====
     ‏‎opacity‎ محجوزةٌ ههنا للظهور والغياب (‎is-more‎)، فلو خُفّف بها لَتعارض
     الخبران على مقبضٍ واحد. والمزجُ يُخفّف اللونَ وحدَه ويبقى العنصرُ كاملا */
  background: color-mix(in srgb, var(--nk-line) 30%, transparent);
}
#nook .nk-box[data-m="wide"].is-more .nk-sb { opacity: 1; pointer-events: auto; }
/* والإبهامُ يملأ عرضَ مجراه: لا فرقَ بينهما إلّا اللون، فيُقرأ خيطا في الإطار */
#nook .nk-sb__th {
  position: absolute; inset-inline: 0; top: 0; height: 24px;
  border-radius: 99px; cursor: grab; touch-action: none;
  background: color-mix(in srgb, var(--nk-title) 30%, transparent);
  transition: background .16s;
}
#nook .nk-sb__th:hover { background: color-mix(in srgb, var(--nk-title) 55%, transparent); }
#nook .nk-sb.on .nk-sb__th { background: var(--gold); cursor: grabbing; }
html[data-theme="dark"] #nook .nk-sb { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] #nook .nk-sb__th { background: rgba(200, 224, 228, .28); }
html[data-theme="dark"] #nook .nk-sb__th:hover { background: rgba(200, 224, 228, .55); }

/* ============================================================
   حشوةُ الذيل تسكن **داخل** الممرَّر لا خارجَه
   ============================================================
   الجولةُ الاولى قاست الفراغَ ولم تقس **موضعَه**، فسوّت بين الاربعة وهي مفترقة:

     الغياب والدرجة: `padding-bottom: 16px` على `.nk-body` — وهو **الممرَّر نفسُه**،
       والحشوةُ السفلى داخلةٌ في مساحة التمرير. فالمتنُ يبلغ حافّةَ الصندوق ما دام
       فيه بقيّة، ولا تُرى الحشوةُ الّا عند منتهى التمرير.
     المادة: `padding-bottom: 11px` على `.nkm` — وهي **خارج** `.nk-sc`، فشريطٌ
       بلون الورق ثابتٌ لا يبلغه متنٌ ابدا.
     الدكتور: `border-bottom` على الممرَّر — والحدُّ خارج مساحة التمرير كذلك.

   فالاثنان يقولان «ثَمّ فراغٌ لا أبلغه» والاثنان الآخران لا يقولانه — وهو عينُ ما
   وصفه صاحبُ الموقع: «لا زال في المادة والدكتور، وفي الغياب والتأخير ما فيه».

   ===== والعلاجُ نقلُ الحشوة لا تصغيرُها =====
   تُرفع من خارج الممرَّر وتُكتب داخلَه، فتصير جزءا من المتن يجري معه: يبلغ المتنُ
   الحافّةَ وهو يجري، وتظهر الحشوةُ عند منتهاه. وهو سلوكُ الغياب والدرجة بعينه.
   ===== ولا يُخشى المقبضُ =====
   مقبضُ القامة يجري على ذيل الصندوق (`11px`)، وقد كان الحجزُ لاجله. والغيابُ والدرجةُ
   يمرّ متنُهما تحته منذ اليوم الاوّل ولم يُشتكَ منه: المقبضُ شفّافٌ، والمتنُ الذي
   يمرّ تحته **عابرٌ** لا مستقرّ — يقف عند منتهى التمرير فوقه بحشوته */
#nook .nk-box[data-m="wide"] > .nkm { padding-bottom: 0; }
#nook .nk-sc > .nkm__scroll,
#nook .nk-sc > .nk-doc__scroll,
#nook .nk-sc > .nk-body { border-bottom-width: 0; }
#nook .nk-sc > .nkm__scroll { padding-bottom: 11px; }
#nook .nk-sc > .nk-doc__scroll { padding-bottom: 12px; }

/* ===== ولا يُقصّ وصفٌ بعددِ اسطرٍ مكتوب =====
   وصفُ الدكتور مقصوصٌ بـ`-webkit-line-clamp: 3` ووصفُ المادّة بثلاثةٍ مثلِه. وهو
   قصٌّ كان **بديلا عن التمرير**: لا سبيلَ الى ما وراء السطر الثالث الّا باطالة
   المربّع، فيُخفى بلا اثرٍ يقول انّ ثَمّ بقيّة.
   ولمّا صار الجوفُ يُمرَّر (§١٨) سقط سببُه: **ما لا يسعه المربّعُ يُمرَّر اليه لا
   يُمحى**. فيُعرض النصُّ كاملا ويُبلغ آخرُه بالشريط.
   (ووصفُ المادّة يُرفع قصُّه من الجافا كذلك — ‎nkInfoFill‎ — فيُوحَّد الحكمُ ههنا
   ولا يُنقض ذاك: كلاهما يقول `unset`) */
#nook .nk-doc__d, #nook .nkm-desc { -webkit-line-clamp: unset; }

/* ===== وصفُ المادّة يُقاس بوصف الدكتور =====
   الوصفان بندٌ واحدٌ في مربّعين، فلا معنى لافتراقهما. وكانا يفترقان في خمسة:
     الحشوة `1.7` في مقابل `3.4` · الانحناء `5.95` في مقابل `8.5`
     قدُّ الخط `10.625` في مقابل `8.925` · ارتفاعُ السطر `1.85` في مقابل `1.65`
     والوزن `400` في مقابل `500` · والعرضُ منكمشٌ في مقابل كامل.
   وسببُه انّ وصفَ المادّة كان يرث ثوبَ **الرقاقات الصغيرة** (`.nkm-bx`) وقدَّ
   `.nk-desc`، ووصفَ الدكتور ثوبٌ خاصٌّ به.
   ===== والارقامُ تُشتقّ ولا تُنسخ =====
   تُكتب بصيغة الدكتور نفسِها (`10.5` و`4/8` و`10` مضروبةً في `--chz`) — فمن حرّك
   المعامل يوما تحرّكا معا، ولا يفترقان بعد اليوم. */
#nook .nk-box[data-m="wide"] .nkm-bx--d {
  align-self: stretch;
  padding: calc(4px * var(--chz, .85)) calc(8px * var(--chz, .85));
  border-radius: calc(10px * var(--chz, .85));
}
#nook .nk-box[data-m="wide"] .nkm-desc {
  font: 500 calc(10.5px * var(--chz, .85))/1.65 'IBM Plex Sans Arabic', sans-serif;
  color: var(--nk-ink-soft);
}

/* ===== ووجهُ الدكتور يكبر مع رقعته =====
   قدُّه ليس من ‎--dmz‎ بل من حاويته: `clamp(26px, 22cqw, 34px)` — يتبع عرضَ المربّع
   بين حدّين. وقد بلغ سقفَه (`34`) في العرض المعتاد، فلو رُفع المعاملُ وحدَه لَكبرت
   الرقعةُ ووقف الوجهُ فيها فاختلّت النسبةُ التي عُويرت.
   فيُرفع السقفُ والقاعُ والنسبةُ معا بقدر ما رُفع المعامل (‎+18٪‎ تقريبا) */
#nook .nk-doc__top { --dm-av: clamp(30px, 25cqw, 40px); }