/*
 * DzCustomsLaw — نظام التصميم.
 *
 * ملف واحد، لا CSS مضمَّن في القوالب: CSP صارم بلا unsafe-inline (REQ-032).
 *
 * البنية (بهذا الترتيب، لا تُخلَط الطبقات):
 *   1. الخطوط        @font-face — مستضافة ذاتيًّا
 *   2. الرموز        :root — لون، خطّ، مسافة، نصف قطر، ظلّ، حركة، طبقات
 *   3. الأساس        تصفير + عناصر HTML الخامّة
 *   4. الأدوات       .wrap .measure .sr-only .skip …
 *   5. المكوّنات     كل مكوّن في كتلة واحدة، بلا تكرار بين الصفحات
 *   6. الاستجابة     نقاط التوقّف الحقيقية
 *   7. الطباعة       الورق منتَج نهائي في منصّة قانونية، لا أثر جانبي
 *
 * مبدأ حاكم: **المحتوى هو المنتج.** لا عنصر واجهة يزاحم النصّ القانوني
 * بصريًّا. الحدود والظلال أدوات ترتيب لا زخرفة، والمسافة البيضاء هي
 * الوسيلة الأولى لبناء التسلسل.
 *
 * ألوان الحالة القانونية ليست تزيينًا — هي المعلومة الأهمّ على الصفحة،
 * ولا تُنقَل باللون وحده أبدًا (نصّ + شكل + لون معًا، WCAG 1.4.1).
 */

/* ==========================================================================
   1. الخطوط — مستضافة ذاتيًّا. لا @import من مزوّد خارجي: الـ CSP هنا
   `style-src 'self'` و`font-src 'self'` بلا استثناء (SEC-14)، واستيراد
   خارجي كان سيُسقَط صامتًا فتسقط الخطوط كلّها إلى الاحتياطي بلا أي خطأ
   ظاهر. الملفّات متغيّرة الوزن، أربعة تغطّي كل الأوزان المستعملة.
   ========================================================================== */

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/cairo-arabic.4d90a59cb181.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/cairo-latin.3c9597566d23.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/noto-naskh-arabic-arabic.b5523c994f90.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/noto-naskh-arabic-latin.3a9384de8e29.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}

/* ==========================================================================
   2. الرموز
   ========================================================================== */

:root {
  color-scheme: light;

  /* -- السطوح: ورقيّة دافئة قليلًا، لا رماديّ أزرق باهت. النصّ القانوني
        يُقرأ لدقائق متّصلة، والورق الدافئ أرحم من الأبيض المزرقّ. ------ */
  --paper:        #F7F6F3;
  --surface:      #FFFFFF;
  --surface-2:    #FBFAF8;
  --surface-sunk: #F1EFEA;

  /* -- الحبر: تدرّج واحد محايد الميل. لا خلط رماديّ دافئ ببارد. ------- */
  --ink:      #17191C;
  --ink-2:    #464C54;
  --ink-3:    #5F666E;   /* 5.4:1 على الورق — مقروء لا باهت */
  --ink-4:    #858C94;   /* زخرفي فقط: فواصل، لا معلومة يحملها وحده */

  /* -- الخطوط الفاصلة -------------------------------------------------- */
  --line:        #E4E2DC;
  --line-strong: #CFCCC4;

  /* -- اللون المميِّز: أزرق أردوازي مؤسّسي واحد. لا ثانٍ. -------------- */
  --accent:        #2E3E4E;
  --accent-strong: #1D2933;
  --accent-ink:    #FFFFFF;
  --accent-tint:   #EDF0F3;
  --accent-tint-2: #DCE3E9;

  /* -- الختم: لمسة معدنية واحدة، للمرجع الرسمي وحده. ------------------ */
  --seal: #8A6E3E;

  /* -- الحالة القانونية: لون + نصّ + شكل معًا، لا لون وحده. ----------- */
  /* 5.2:1 على خلفية الشارة — القيمة السابقة (#157F3D) كانت 4.49:1،
     أي دون حدّ WCAG AA بهامش لا يُرى بالعين ويُقاس بالحساب وحده. */
  --in-force:     #137437;
  --in-force-bg:  #E7F4EC;
  --in-force-ln:  #A9D8BC;
  --amended:      #8F5405;
  --amended-bg:   #FBF1E1;
  --amended-ln:   #E7CB99;
  --repealed:     #B3231E;
  --repealed-bg:  #FBEAE9;
  --repealed-ln:  #EFB9B6;
  --suspended:    #4F5B67;
  --suspended-bg: #EDEFF1;
  --suspended-ln: #CBD1D7;

  /* -- ألوان مصادر المقاطع (لون لكل وثيقة في المسار الزمني). متعاقبة بين
        دافئ وبارد كي لا يتشابه مصدران متتاليان؛ داكنة بما يكفي لنصّ المرجع
        الصغير (≥4.5:1 على الأبيض)، والتظليل نفسه صبغة خفيفة منها. ------ */
  --src-1: #0B7A70;  /* فيروزي */
  --src-2: #9A6614;  /* كهرماني */
  --src-3: #5454C8;  /* نيلي */
  --src-4: #C0325F;  /* وردي */
  --src-5: #357A31;  /* أخضر */
  --src-6: #1570B0;  /* سماوي */
  --src-7: #B4491A;  /* برتقالي */
  --src-8: #8038BA;  /* بنفسجي */
  --seg-tint: 16%;

  /* -- الخطوط ---------------------------------------------------------- */
  --font-ui:   'Cairo', 'Segoe UI', system-ui, sans-serif;
  --font-read: 'Noto Naskh Arabic', 'Cairo', Georgia, serif;

  /* سلّم مقاسات سائل — rem لا px: تكبير خطّ المتصفّح يجب أن يعمل. */
  --fs-2xs:  0.75rem;    /* 12 — شارات فقط، لا نصّ متّصل */
  --fs-xs:   0.8125rem;  /* 13 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 0.9375rem;  /* 15 */
  --fs-md:   1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 */
  --fs-xl:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-2xl:  clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-3xl:  clamp(1.625rem, 1.3rem + 1.6vw, 2.375rem);

  /* متن القانون: أكبر قليلًا من واجهة التطبيق عمدًا — هو المنتج. */
  --fs-read: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --lh-read: 1.95;

  /* -- عرض السطر المريح. النسخي العربي أعرض من اللاتيني لكل محرف،
        فالوحدة em لا ch — ‏~65-75 محرفًا فعليًّا. --------------------- */
  --measure: 38em;
  --wrap:    72rem;

  /* -- المسافة: سلّم واحد بأساس 4px ------------------------------------ */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 2.5rem;  --s8: 3rem;
  --s9: 4rem;    --s10: 5rem;   --s11: 6rem;

  /* -- نصف القطر: متدرّج لا موحَّد. الداخل أضيق من الحاوية. ---------- */
  --r-xs:   4px;
  --r-sm:   7px;
  --r-md:   11px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* -- الظلّ: مصبوغ بلون الأردواز لا أسود خامّ، ومصدر ضوء واحد أعلى. - */
  --sh-1: 0 1px 2px rgba(23, 32, 43, .05);
  --sh-2: 0 1px 2px rgba(23, 32, 43, .05), 0 6px 16px -8px rgba(23, 32, 43, .16);
  --sh-3: 0 2px 4px rgba(23, 32, 43, .06), 0 16px 40px -16px rgba(23, 32, 43, .24);

  /* -- الحركة: قصيرة وهادفة ------------------------------------------- */
  --dur-1: 110ms;
  --dur-2: 190ms;
  --ease:  cubic-bezier(.2, .6, .3, 1);

  /* -- التركيز + سلّم طبقات صريح، لا 9999 ----------------------------- */
  --focus: #1B4B7A;
  --z-sticky:  20;
  --z-nav:     50;
  --z-drawer:  60;
  --z-overlay: 80;
  --z-skip:    100;
}

/* السمة الداكنة — كاملة لا نصف مطبَّقة. القراءة الطويلة على شاشة مضيئة
   ليلًا سبب حقيقي لا موضة: الخلفية ليست #000 (التباين الأقصى يُتعب)
   والنصّ ليس #FFF بل أبيض مكسور. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:        #14161A;
    --surface:      #1B1E23;
    --surface-2:    #20242A;
    --surface-sunk: #101216;
    --ink:          #E9EAEC;
    --ink-2:        #C3C8CE;
    --ink-3:        #969DA6;
    --ink-4:        #757C85;
    --line:         #2C313A;
    --line-strong:  #3C434E;
    --accent:        #A9C3D8;
    --accent-strong: #C6DAEA;
    --accent-ink:    #12181E;
    --accent-tint:   #232B34;
    --accent-tint-2: #2E3945;
    --seal:          #CDAF7B;
    --in-force:     #5FCF8B;  --in-force-bg:  #16281E;  --in-force-ln:  #2C5B3E;
    --amended:      #E5AC4E;  --amended-bg:   #2A2115;  --amended-ln:   #5C4726;
    --repealed:     #F0817C;  --repealed-bg:  #2C1918;  --repealed-ln:  #5E322F;
    --suspended:    #A3ADB8;  --suspended-bg: #21252B;  --suspended-ln: #3B424D;
    --src-1: #4FD1C5;  --src-2: #F2B84B;  --src-3: #A5A5F7;  --src-4: #F484A6;
    --src-5: #86CF7F;  --src-6: #6CB8F0;  --src-7: #F59A6E;  --src-8: #C79FF2;
    --seg-tint: 22%;
    --focus:     #9CC7F0;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px -8px rgba(0, 0, 0, .6);
    --sh-3: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 40px -16px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:        #14161A;
  --surface:      #1B1E23;
  --surface-2:    #20242A;
  --surface-sunk: #101216;
  --ink:          #E9EAEC;
  --ink-2:        #C3C8CE;
  --ink-3:        #969DA6;
  --ink-4:        #757C85;
  --line:         #2C313A;
  --line-strong:  #3C434E;
  --accent:        #A9C3D8;
  --accent-strong: #C6DAEA;
  --accent-ink:    #12181E;
  --accent-tint:   #232B34;
  --accent-tint-2: #2E3945;
  --seal:          #CDAF7B;
  --in-force:     #5FCF8B;  --in-force-bg:  #16281E;  --in-force-ln:  #2C5B3E;
  --amended:      #E5AC4E;  --amended-bg:   #2A2115;  --amended-ln:   #5C4726;
  --repealed:     #F0817C;  --repealed-bg:  #2C1918;  --repealed-ln:  #5E322F;
  --suspended:    #A3ADB8;  --suspended-bg: #21252B;  --suspended-ln: #3B424D;
  --src-1: #4FD1C5;  --src-2: #F2B84B;  --src-3: #A5A5F7;  --src-4: #F484A6;
  --src-5: #86CF7F;  --src-6: #6CB8F0;  --src-7: #F59A6E;  --src-8: #C79FF2;
  --seg-tint: 22%;
  --focus:     #9CC7F0;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px -8px rgba(0, 0, 0, .6);
  --sh-3: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 40px -16px rgba(0, 0, 0, .7);
}

/* ==========================================================================
   3. الأساس
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* الرأس اللاصق لا يحجب هدف الرابط الوسمي */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}

/* متن المادة القانونية وحده بخطّ نسخي — لا كل نصّ في الموقع. */
.article-body, .row-text, .answer-text, .term-def {
  font-family: var(--font-read);
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.3;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }

/* حلقة تركيز واحدة لكل الموقع — مرئية على كل سطح، بلا استثناء يُنسى.
   داخل الأسطح الداكنة يُعاد تعريف --focus (راجع .on-dark أدناه). */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

img, svg, video { max-width: 100%; }
img { height: auto; }
svg { flex-shrink: 0; }

/* الرمز يقيس نفسه بحجم الخطّ المحيط ما لم يُحدَّد غيره — فلا رمز عملاق
   نُسي داخل زرّ صغير، ولا نقطة مجهرية داخل عنوان. */
.ico { width: 1.25em; height: 1.25em; display: block; }
/* غلاف الرمز داخل زرّ متعدّد الحالات (قائمة/سمة): محاذاة بصرية فقط. */
.i-open, .i-close, .i-light, .i-dark { display: inline-flex; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

::selection { background: var(--accent-tint-2); color: var(--ink); }

/* حقول النموذج ترث الخطّ دائمًا — لا Arial افتراضي داخل موقع عربي. */
input, textarea, select, button { font: inherit; color: inherit; }

/* أهداف اللمس: 44×44 حدًّا أدنى (WCAG 2.5.8) لكل ما يُنقَر. */
button, [type="submit"], [type="button"] { touch-action: manipulation; }

/* ==========================================================================
   4. الأدوات
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s5);
}
@media (max-width: 30rem) { .wrap { padding-inline: var(--s4); } }

/* عروض إضافية تُختار من القالب (block wrap_class):
   `reading` لصفحة نصّ واحد متّصل — العمود بمقاسة السطر المريحة نفسها،
   فلا يبقى ثلث الشاشة فارغًا بجانب بطاقة نصفها بياض.
   `listing` لقائمة نتائج أو مصطلحات — أوسع قليلًا لأن الصفّ يحمل رقمًا
   ومسارًا ومقتطفًا معًا، وأضيق من العرض الكامل لنفس السبب.
   `full` للكنّاش وحده (طلب صريح) — شبكته الثلاثية أعمدة جانبية بعرض
   ثابت + عمود نصّ يتمدّد، فلا حاجة لسقف هنا: `.article-text` نفسه يبقى
   محدودًا بـ`--measure` مهما اتّسعت الشاشة، فسطر القراءة لا يطول أبدًا. */
.wrap.reading { max-width: 47rem; }
.wrap.listing { max-width: 51rem; }
.wrap.full { max-width: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; inset-inline-start: var(--s4); top: 0;
  transform: translateY(-140%);
  z-index: var(--z-skip);
  background: var(--accent); color: var(--accent-ink);
  padding: var(--s3) var(--s5);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 700; font-size: var(--fs-sm);
  box-shadow: var(--sh-3);
  transition: transform var(--dur-2) var(--ease);
}
.skip:focus { transform: translateY(0); text-decoration: none; }

.muted { color: var(--ink-3); }
.nums  { font-variant-numeric: tabular-nums; }

/* نصّ لاتيني داخل سياق RTL — يُعزَل اتجاهيًّا كي لا تنكسر الفواصل
   والأقواس حوله. يُستعمَل على كل ما هو `lang="fr"`/`lang="en"` وعلى
   المراجع الرمزية (رقم عدد، رابط، رمز وثيقة). */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ==========================================================================
   5. المكوّنات
   ========================================================================== */

/* -- 5.1 الرأس ------------------------------------------------------------
   شريط واحد لا شريطان: الشعار والتنقّل معًا. القديم كان يكرّر الهويّة
   مرّتين (صورة الشعار ثم النصّ نفسه) ويستهلك ~140px رأسيًّا قبل أي محتوى،
   وعلى الهاتف كانت روابطه السبعة تلتفّ إلى أربعة صفوف داخل شريط لاصق
   يبتلع نصف الشاشة. -------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
/* الحدّ يظهر فقط بعد التمرير — لا خطّ عائم فوق أعلى الصفحة بلا سبب.
   يُضبط data-scrolled من site.js؛ غيابه لا يكسر شيئًا. */
.masthead[data-scrolled] {
  border-bottom-color: var(--line);
  box-shadow: var(--sh-1);
}
@supports not (backdrop-filter: blur(1px)) { .masthead { background: var(--paper); } }

.masthead-inner {
  display: flex; align-items: center; gap: var(--s4);
  min-height: 4rem;
}

.brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  flex-shrink: 0; border-radius: var(--r-sm);
}
.brand:hover { text-decoration: none; }
.brand img { height: 2.25rem; width: auto; display: block; }
/* الشعار رسم أحادي اللون (#1B3C4D على شفاف): على خلفية داكنة يصير غير
   مرئي عمليًّا. القلب الكامل يعطي مكافئه الأبيض بدقّة — لا إعادة تلوين
   تقريبية ولا ملفّ ثانٍ يجب أن يبقى متزامنًا مع الأوّل. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img { filter: brightness(0) invert(1); }
}
:root[data-theme="dark"] .brand img { filter: brightness(0) invert(1); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: var(--fs-base); font-weight: 800; color: var(--ink); }
/* توسيط السطر الأقصر («الجزائري») تحت الأعرض («قانون الجمارك») — كان
   `style="text-align: center"` مضمَّنًا في القالب: يُسقَط صامتًا تحت CSP
   الحالي بلا unsafe-inline (REQ-032)، فلا أثر بصريًّا. `.brand-text`
   عمود Flex بـ`align-items: stretch` الافتراضي، فكل سطر فيه يمتدّ فعليًّا
   على عرض الحاوية كاملًا — `text-align: center` هنا يتوسَّط ضمن ذلك
   العرض المشترك لا ضمن عرض نصّه الخاصّ. */
.brand-sub  { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3); text-align: center; }

.site-nav { display: flex; align-items: center; gap: var(--s1); margin-inline-start: auto; }
.site-nav a {
  color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.site-nav a:hover { background: var(--accent-tint); color: var(--accent); text-decoration: none; }
/* الصفحة الحالية: لون + وزن + خطّ سفلي — ثلاث إشارات، لا لون وحده. */
.site-nav a[aria-current="page"] {
  color: var(--ink); font-weight: 800;
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* رابطا «عن الموقع»/«تواصل معنا» — رمز من نظام أيقونات الموقع بلا نصّ
   مرئي، بنفس حشو العناصر النصّية المجاورة فلا يقفز الصفّ ارتفاعًا. `flex`
   يتوسّط الرمز رأسيًّا وأفقيًّا داخل نفس صندوق الحشو (بلا هذا التوسيط
   يعتمد الرمز على `line-height` وحده فينحرف عن مركز الصفّ، خلافًا لبقيّة
   عناصر القائمة النصّية المتوسِّطة بذاتها عبر ارتفاع السطر). الاسم
   المُعلَن لقارئ الشاشة على `aria-label` في القالب — لا نصّ مرئي مكرَّر. */
.site-nav a.nav-icon { display: inline-flex; align-items: center; justify-content: center; }
.site-nav a.nav-icon .ico { width: 1.15rem; height: 1.15rem; }

/* «قوانين أخرى» — قائمة منسدلة بـ<details> أصيل بلا جافاسكربت، بنفس
   أسلوب شجرة الكنّاش وبطاقات فصول الرئيسية. على العريضة تنسدل بطاقة
   عائمة تحت الزرّ؛ العتبة 70rem مطابقة لتلك التي تحوّل .site-nav نفسها
   إلى لوح عمودي — هناك تتمدّد القائمة مكانها فحسب، لا بطاقة عائمة فوق
   لوح أصلًا عمودي. */
.nav-more { position: relative; }
.nav-more > summary {
  display: flex; align-items: center; gap: var(--s2);
  color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  cursor: pointer; list-style: none; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary:hover { background: var(--accent-tint); color: var(--accent); }
.nav-more-caret { display: inline-flex; color: var(--ink-3); transition: transform var(--dur-2) var(--ease); }
.nav-more-caret .ico { width: 1rem; height: 1rem; }
.nav-more[open] > summary .nav-more-caret { transform: rotate(180deg); }
.nav-more-menu {
  display: grid; gap: 2px; min-width: 12rem;
  position: absolute; inset-inline-start: 0; top: calc(100% + var(--s1));
  padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--sh-3);
  z-index: var(--z-nav);
}
.nav-more-menu a {
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
}
.nav-more-menu a:hover { background: var(--accent-tint); color: var(--accent); text-decoration: none; }

/* زرّ البحث في الرأس — مدخل بحث دائم من أي صفحة (طلب متكرّر لمستخدم
   القوى: لا يعود إلى الرئيسية ليبحث). يعرض مفتاح الاختصار حين تتوفّر
   لوحة مفاتيح فعلية. */
.nav-search {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); margin-inline-start: var(--s2);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-3);
  font-size: var(--fs-sm); font-weight: 600;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-search:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
/* موضع الزائر على صفحة البحث — لا رابط «البحث» نصّي منفصل في القائمة
   بعد الآن (كان مكرَّرًا مع هذا المدخل)، فالإشارة انتقلت هنا. */
.nav-search[aria-current="page"] {
  border-color: var(--accent); color: var(--accent); font-weight: 800;
  background: var(--accent-tint);
}
.nav-search kbd {
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 700;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  padding: 0 var(--s2); background: var(--surface-sunk); color: var(--ink-3);
  line-height: 1.5;
}
@media (pointer: coarse) { .nav-search kbd { display: none; } }

/* مفتاح السمة — ثلاث حالات (تلقائي/فاتح/داكن) يديرها site.js. يبقى
   مخفيًّا حتى يعمل الجافاسكربت: زرّ لا يفعل شيئًا أسوأ من غيابه. */
.theme-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex-shrink: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle .ico { width: 1.125rem; height: 1.125rem; }
/* الرمز المعروض = السمة السارية فعلًا، بما فيها حالة «اتبع النظام». */
.theme-toggle .i-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-light { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-dark  { display: inline-flex; }
}
:root[data-theme="dark"] .theme-toggle .i-light { display: none; }
:root[data-theme="dark"] .theme-toggle .i-dark  { display: inline-flex; }
:root[data-theme="light"] .theme-toggle .i-light { display: inline-flex; }
:root[data-theme="light"] .theme-toggle .i-dark  { display: none; }

/* زرّ القائمة على الهاتف */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center; gap: var(--s2);
  min-width: 2.75rem; min-height: 2.75rem;
  margin-inline-start: auto;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); cursor: pointer;
  padding-inline: var(--s3);
  font-size: var(--fs-sm); font-weight: 700;
}
.nav-toggle .ico { width: 1.125rem; height: 1.125rem; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-open  { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: inline-flex; }

/* على الشاشة العريضة القائمة ظاهرة دائمًا — حتى لو بقيت السمة hidden
   من مقاس ضيّق سابق قبل أن يلتقط الجافاسكربت تغيّر العرض. */
@media (min-width: 70.01rem) {
  .site-nav[hidden] { display: flex; }
}

/* -- 5.2 الأزرار ----------------------------------------------------------
   ثلاثة مستويات فقط: أساسي، ثانوي، نصّي. لا تشكيلة مفتوحة تتضخّم. ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 2.75rem;
  padding: var(--s2) var(--s5);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.4;
  cursor: pointer; text-align: center;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.0625rem; height: 1.0625rem; }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-primary:disabled { background: var(--line-strong); color: var(--surface); cursor: not-allowed; transform: none; }

.btn-secondary {
  background: var(--surface); color: var(--ink); border-color: var(--line-strong);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }

.btn-quiet {
  background: transparent; color: var(--ink-2);
  padding-inline: var(--s3); min-height: 2.5rem;
}
.btn-quiet:hover { background: var(--accent-tint); color: var(--accent); }

.btn-sm { min-height: 2.25rem; padding: var(--s1) var(--s3); font-size: var(--fs-xs); }

/* -- 5.3 البحث ------------------------------------------------------------
   مكوّن واحد بثلاثة أحجام، لا ثلاثة مكوّنات متشابهة. --------------- */

.searchbar {
  display: flex; align-items: stretch; gap: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--s2);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.searchbar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint-2);
}
.searchbar input[type="search"] {
  flex: 1 1 8rem; min-width: 0;
  padding: var(--s2) var(--s3);
  border: 0; background: transparent; color: var(--ink);
  font-size: var(--fs-md);
}
/* الحلقة على الحاوية لا على الحقل — إشارة تركيز أوضح، وليست إزالة لها. */
.searchbar input[type="search"]:focus { outline: none; }
.searchbar input::placeholder { color: var(--ink-4); }
.searchbar input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.searchbar select {
  border: 0; border-inline-start: 1px solid var(--line);
  background: transparent; color: var(--ink);
  padding-inline: var(--s3); font-size: var(--fs-sm); cursor: pointer;
}
.searchbar .btn { flex-shrink: 0; }

.searchbar.big { padding: var(--s2); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.searchbar.big input[type="search"] { padding: var(--s3) var(--s4); font-size: var(--fs-lg); }
.searchbar.big .btn { padding-inline: var(--s6); }

/* -- 5.4 البطاقات والألواح ------------------------------------------------ */

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

.panel-head {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.panel-head h2 { font-size: var(--fs-sm); color: var(--ink); }
.panel-head p  { margin-top: 2px; font-size: var(--fs-2xs); color: var(--ink-3); }

/* -- 5.5 التنبيهات والحالات غير العادية ---------------------------------- */

.alert, .notice, .info, .alert-success {
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--ink-3);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  font-size: var(--fs-base);
  background: var(--surface);
}
.alert   { background: var(--repealed-bg); border-color: var(--repealed-ln); border-inline-start-color: var(--repealed); }
.notice  { background: var(--amended-bg);  border-color: var(--amended-ln);  border-inline-start-color: var(--amended); }
.info    { background: var(--accent-tint); border-color: var(--accent-tint-2); border-inline-start-color: var(--accent); }
.alert-success { background: var(--in-force-bg); border-color: var(--in-force-ln); border-inline-start-color: var(--in-force); }

.messages { display: grid; gap: var(--s2); margin-top: var(--s4); }

/* حالة فارغة مصمَّمة لا سطر اعتذار: تقول ماذا حدث، ولماذا، وما التالي. */
.empty {
  text-align: center;
  padding: var(--s7) var(--s5);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}
.empty h2 { font-size: var(--fs-lg); margin-bottom: var(--s2); }
.empty p  { color: var(--ink-3); max-width: 44ch; margin-inline: auto; }
.empty-actions {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  justify-content: center; margin-top: var(--s4);
}

/* -- 5.6 الشارات والأختام: أهمّ عنصر بصري في منتَج قانوني -------------- */

.badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 2px var(--s3);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: var(--fs-2xs); font-weight: 700; line-height: 1.7;
  white-space: nowrap;
}
.s-in-force  { color: var(--in-force);  background: var(--in-force-bg);  border-color: var(--in-force-ln); }
.s-amended   { color: var(--amended);   background: var(--amended-bg);   border-color: var(--amended-ln); }
.s-repealed  { color: var(--repealed);  background: var(--repealed-bg);  border-color: var(--repealed-ln); }
.s-suspended { color: var(--suspended); background: var(--suspended-bg); border-color: var(--suspended-ln); }
.s-unknown   { color: var(--ink-3);     background: var(--surface-sunk); border-color: var(--line); }
/* «تجريبية» (التعريفة الجمركية): نفس عائلة `--amended` الدلالية — صحيح
   لكن غير نهائي، لا خطأ (repealed) ولا يقين تامّ (in-force). */
.s-experimental { color: var(--amended); background: var(--amended-bg); border-color: var(--amended-ln); }
.s-experimental svg { width: 0.8125rem; height: 0.8125rem; }

/* الختم: رمز + نصّ. لا دوران — الحالة القانونية معلومة لا زينة، وميلها
   يقرأه المستخدم كملصق تزييني فيتجاهله. */
.stamp {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-xs); font-weight: 800;
  border: 1.5px solid currentColor; border-radius: var(--r-sm);
  padding: var(--s1) var(--s3);
  white-space: nowrap;
}
.stamp svg { width: 0.875rem; height: 0.875rem; }
.stamp.ok     { color: var(--in-force); background: var(--in-force-bg); }
.stamp.danger { color: var(--repealed); background: var(--repealed-bg); }

/* مرجع رسمي (عدد الجريدة) — لمسة الختم الوحيدة في الموقع. */
.src {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--seal);
  background: color-mix(in srgb, var(--seal) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--seal) 28%, transparent);
  border-radius: var(--r-xs);
  padding: 2px var(--s2);
  font-variant-numeric: tabular-nums;
}
.src svg { width: 0.8125rem; height: 0.8125rem; }

/* مؤشّر لكل استشهاد (النتيجة I-3): نصّ هذه المادة تحديدًا بُتر أثناء بناء
   السياق — مختلف عن بتر المقتطف التجميلي في .citation-excerpt. */
.citation-context-truncated {
  color: var(--repealed);
  background: var(--repealed-bg);
  border-color: color-mix(in srgb, var(--repealed) 28%, transparent);
}

/* -- 5.7 مسار التنقّل ----------------------------------------------------
   RTL أصيل: الفاصل ‹ يشير إلى اليسار، أي إلى اتّجاه تقدّم القراءة
   العربية. القديم كان يستعمل › (يشير يمينًا) في article/browse/konash
   و← في المسار الهيكلي — إشارتان متناقضتان في الصفحة الواحدة. ------- */

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s1) var(--s2);
  font-size: var(--fs-sm); color: var(--ink-3);
  margin: 0; padding: 0; list-style: none;
}
.crumbs li { display: inline-flex; align-items: center; gap: var(--s2); }
.crumbs li + li::before {
  content: "‹";
  color: var(--ink-4);
  font-size: 1.1em;
  line-height: 1;
}
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }

/* المسار الهيكلي المضغوط داخل صفّ نتيجة — نفس الفاصل، حجم أصغر. */
.chain {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  font-size: var(--fs-xs); color: var(--ink-3); line-height: 2;
}
.chain a { color: var(--ink-3); font-weight: 600; }
.chain a:hover { color: var(--accent); }

/* -- 5.8 صفحة عامّة: ترويسة موحَّدة لكل صفحة ---------------------------- */

.page { padding-block: var(--s6) var(--s9); flex: 1; }

.page-head { margin-bottom: var(--s5); }
.page-head .crumbs { margin-bottom: var(--s3); }
.page-head h1 { font-size: var(--fs-2xl); }
.page-head .page-sub {
  margin-top: var(--s2); color: var(--ink-3); font-size: var(--fs-base);
  max-width: 60ch;
}
.page-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
}

.section { margin-top: var(--s8); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.section-head h2 { font-size: var(--fs-lg); }
.section-head .section-note { font-size: var(--fs-sm); color: var(--ink-3); }

/* -- 5.9 الرئيسية --------------------------------------------------------
   لا بطاقة بطل بتدرّج داكن: القديم كان يضع الصندوق الأهمّ في الموقع
   (البحث) فوق تدرّج أردوازي + ظلّ ثقيل، وحلقة التركيز فيه بلون الأردواز
   نفسه — أي غير مرئية أصلًا لمستخدم الكيبورد. البديل: مساحة بيضاء
   محسوبة وتباين نمطي، وسطح ورقي واحد متّصل بلا قفزة داكنة في منتصف
   صفحة فاتحة. -------------------------------------------------------- */

.hero { padding-block: var(--s7) var(--s6); }
.hero-inner { max-width: 46rem; }
.kicker {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-xs); font-weight: 700; color: var(--seal);
  letter-spacing: .02em;
  margin-bottom: var(--s3);
}
.kicker::before {
  content: ""; width: 1.5rem; height: 1px; background: currentColor; opacity: .6;
}
.hero h1 {
  font-size: var(--fs-3xl);
  line-height: 1.22;
  max-width: 20ch;
}
.hero .lead {
  margin-top: var(--s4);
  font-size: var(--fs-lg); color: var(--ink-2);
  max-width: 52ch; line-height: 1.7;
}
.hero .searchbar { margin-top: var(--s6); max-width: 40rem; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.chips-label { font-size: var(--fs-xs); color: var(--ink-3); align-self: center; margin-inline-end: var(--s1); }
.chip {
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); padding: var(--s1) var(--s3);
  white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* مداخل المنتج الثلاثة — لا ثلاث بطاقات متطابقة العرض والارتفاع:
   شبكة غير متماثلة، المدخل الأهمّ (التصفّح) أعرض. */
.entries {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin-top: var(--s5);
}
.entry {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.entry:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: var(--sh-2); }
.entry-ico {
  display: inline-flex; width: 2.25rem; height: 2.25rem;
  align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--accent-tint); color: var(--accent);
  margin-bottom: var(--s1);
}
.entry-ico svg { width: 1.25rem; height: 1.25rem; }
.entry h3 { font-size: var(--fs-md); }
.entry p  { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.65; }
.entry-go { margin-top: auto; padding-top: var(--s3); font-size: var(--fs-sm); font-weight: 700; color: var(--accent); }

/* -- 5.10 هيكلة القانون على الرئيسية -------------------------------------
   قائمة تفصيلية قابلة للطيّ لكل فصل، لا شلّال بطاقات يسكب كل الأقسام
   دفعةً واحدة. المستخدم يرى الفصول كاملة أولًا (تسلسل القانون)، ثم
   يفتح ما يعنيه. `<details>` أصيل: يعمل بلا جافاسكربت وبدلالة صحيحة. */

/* عمود واحد لا شبكة: الفصول **تسلسل** لا مجموعة متكافئة، وقائمة رأسية
   واحدة هي ما تفعله فهارس التشريعات الفعلية. الشبكة كانت تُدخل عيبين
   معًا — مسح بصري متعرّج عبر الأعمدة يضيّع ترتيب الفصول، وفجوة رأسية
   تحت جيران البطاقة المفتوحة (صفّ الشبكة بارتفاع أطول عنصر فيه). */
.chapters-grid { display: grid; gap: var(--s2); }

/* قسم بعرض قراءة محدود — الترويسة وخطّها الفاصل والبطاقات معًا، لا
   ترويسة بعرض الصفحة فوق بطاقات أضيق منها. */
.section-narrow { max-width: 58rem; }
.chapter-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.chapter-card > summary {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4);
  cursor: pointer; list-style: none;
  font-weight: 700; font-size: var(--fs-base); color: var(--ink);
}
.chapter-card > summary::-webkit-details-marker { display: none; }
.chapter-card > summary:hover { background: var(--surface-2); }
.chapter-card > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.chapter-label {
  flex-shrink: 0; font-size: var(--fs-2xs); font-weight: 800;
  color: var(--accent); background: var(--accent-tint);
  border-radius: var(--r-xs); padding: 2px var(--s3);
  min-width: 4.5rem; text-align: center;
}
.chapter-title { flex: 1; line-height: 1.5; }
.chapter-caret {
  flex-shrink: 0; display: inline-flex; color: var(--ink-3);
  transition: transform var(--dur-2) var(--ease);
}
.chapter-caret .ico { width: 1.125rem; height: 1.125rem; }
.chapter-card[open] > summary { border-bottom: 1px solid var(--line); }
.chapter-card[open] .chapter-caret { transform: rotate(180deg); }

.chapter-body { padding: var(--s2); }
.chapter-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chapter-body a {
  display: flex; gap: var(--s3);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5;
}
.chapter-body a:hover { background: var(--accent-tint); color: var(--accent); text-decoration: none; }
.chapter-body .sec-label {
  color: var(--ink-3); font-weight: 700; flex-shrink: 0;
  min-width: 4.5rem;
}
.chapter-open-all {
  padding: var(--s2) var(--s4) var(--s3);
  font-size: var(--fs-xs); font-weight: 700;
}

/* -- 5.11 صفّ نتيجة / صفّ مادة ------------------------------------------
   لا بطاقة بظلّ لكل صفّ: عشرون ظلًّا في صفحة واحدة ضجيج بصري خالص.
   فاصل رفيع + خلفية تحويم، والرقم هو المرساة البصرية. ---------------- */

.rows { display: grid; }
.row {
  display: grid; gap: var(--s2);
  padding: var(--s4) var(--s3);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-1) var(--ease);
}
.row:first-child { border-top: 1px solid var(--line); }
/* شريط متناوب — طلب صريح: فاصل رفيع وحده يصعب تتبّعه في قائمة طويلة
   تلتفّ فيها فقرة المقتطف على سطرين أو ثلاثة، فيضيع القارئ حدود المادة
   الواحدة أثناء التمرير السريع.

   `--surface-2` جُرِّب أوّلًا (فرق ~2% عن الورق) فتبيَّن بلقطة فعلية أنه
   غير مُدرَك بصريًّا إطلاقًا — تمييز لا يُرى لا يخدم القارئ. `--surface-sunk`
   فرقه عن `--surface` أوضح (~7-8% لكل قناة) مع بقائه في نطاق محايد هادئ،
   لا لونًا مُقحَمًا. */
/* `nth-of-type` لا `nth-child`: عنوان مجموعة الوثيقة (`.result-group-head`،
   طلب صريح — تعدّدت وثائق البحث) يتخلّل `.rows` الآن بين المجموعات. عدّ
   بالمولد `<h2>` كان سيُزحزح فردية/زوجية كل صفّ بعده فيكسر التناوب —
   العدّ بنوع الوسم (`<article>` هنا فقط) يتجاهل العناوين المتخلّلة تمامًا. */
.row:nth-of-type(even) { background: var(--surface-sunk); }

/* عنوان الوثيقة فوق مجموعة نتائجها — حدّه العلوي يقوم مقام حدّ
   `.row:first-child` حين يتصدَّر القائمة (لم يعد أوّل عنصر فيها فعليًّا). */
.result-group-head {
  padding: var(--s4) var(--s3) var(--s1);
  font-size: var(--fs-xs); font-weight: 800; color: var(--ink-3);
  border-top: 1px solid var(--line);
}
/* لون تحويم مستقلّ عن اللونين المتناوبين، لا `--surface` نفسه: الصفوف
   الفردية أصلًا بخلفية `--surface`، فتحويمها إليه كان سيُلغي أي إشارة
   تفاعلية على نصف الصفوف. `--accent-tint` هو لغة التحويم نفسها المستعملة
   في بقيّة الموقع (قائمة الفصول، الشجرة الجانبية). */
.row:hover { background: var(--accent-tint); }
.row-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.row-num {
  font-size: var(--fs-lg); font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.row-num:hover { color: var(--accent); }
/* لا طبقة نقر ممتدّة على الصفّ كلّه: كانت ستمنع تحديد نصّ المقتطف ونسخه،
   وهو أوّل ما يفعله من يستشهد بنصّ قانوني. الرقم و«اقرأ النصّ الكامل»
   هدفان صريحان يكفيان. */
.row-text {
  color: var(--ink-2); font-size: var(--fs-base); line-height: 1.85;
  max-width: var(--measure);
}
.row-more {
  justify-self: start;
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent);
  display: inline-flex; align-items: center; gap: var(--s1);
  /* هدف لمس قائم بذاته لا رابط داخل جملة: 24px حدًّا أدنى (WCAG 2.5.8) */
  padding-block: var(--s1); min-height: 1.75rem;
}
.row-more svg { width: 0.875rem; height: 0.875rem; }

/* تمييز مطابقة البحث داخل المقتطف — تسطير سفلي لا كتلة صفراء صارخة:
   يبقى النصّ هو البطل، والمطابقة مُعلَمة بلونين (خلفية + خطّ) فلا تعتمد
   على اللون وحده. */
mark.hit {
  background: color-mix(in srgb, var(--seal) 18%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
  box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--seal) 60%, transparent);
}

/* -- 5.12 الترقيم -------------------------------------------------------- */

.pager {
  display: flex; gap: var(--s3); align-items: center; justify-content: center;
  margin-top: var(--s6); color: var(--ink-3); font-size: var(--fs-sm);
}
.pager-count { font-variant-numeric: tabular-nums; }
/* الأسهم اتّجاهية: في RTL «السابق» يشير يمينًا و«التالي» يسارًا. */
.pager .btn svg { width: 1rem; height: 1rem; }

/* -- 5.13 صفحة المادة: تجربة القراءة الأساسية --------------------------- */

.reader { display: grid; gap: var(--s5); }

.article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s7) var(--s6);
}
/* الملغاة: إطار + خلفية + نصّ صريح — ثلاث إشارات، لا لون وحده. */
.s-repealed-frame {
  border-inline-start: 5px solid var(--repealed);
  background: color-mix(in srgb, var(--repealed-bg) 45%, var(--surface));
}

.article-head {
  display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
  padding-bottom: var(--s4); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}

.article-body {
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--ink);
  max-width: var(--measure);
  hanging-punctuation: first allow-end;
}
.article-body p { margin-block: 0 var(--s4); }
.article-body p:last-child { margin-bottom: 0; }
.article-body ul, .article-body ol { padding-inline-start: var(--s5); margin-block: 0 var(--s4); }
.article-body li { margin-bottom: var(--s2); }
.article-body strong { font-weight: 700; }

.alert-repealed { font-size: var(--fs-base); margin-bottom: var(--s5); }

/* شريط أدوات المادة — كل زرّ يخدم حالة استعمال حقيقية:
   نسخ النصّ للاستشهاد، نسخ الرابط للمشاركة، الطباعة للملفّ الورقي. */
.article-tools {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  padding-top: var(--s5); margin-top: var(--s5);
  border-top: 1px solid var(--line);
}
.article-tools .btn { min-height: 2.5rem; }
/* تأكيد النسخ — يظهر مكان تسمية الزرّ نفسه، حيث نظر المستخدم أصلًا. */
.btn .lbl-done { display: none; }
.btn[data-done] .lbl-idle { display: none; }
.btn[data-done] .lbl-done { display: inline; }
.btn[data-done] { color: var(--in-force); border-color: var(--in-force-ln); background: var(--in-force-bg); }

/* التنقّل بين المواد — الحركة الأكثر تكرارًا في قراءة قانون كامل. */
.article-nav {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  margin-top: var(--s5);
}
.article-nav a {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--ink);
  transition: border-color var(--dur-2) var(--ease);
}
.article-nav a:hover { border-color: var(--accent); text-decoration: none; }
.article-nav svg { width: 1.125rem; height: 1.125rem; color: var(--ink-3); }
.article-nav .dir { display: block; font-size: var(--fs-2xs); color: var(--ink-3); font-weight: 600; }
.article-nav .num { display: block; font-weight: 800; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.article-nav .next { justify-content: flex-end; text-align: end; }

/* -- 5.14 التصفّح: شجرة + قائمة ----------------------------------------- */

.split {
  display: grid; grid-template-columns: 19rem minmax(0, 1fr);
  gap: var(--s6); align-items: start;
}

/* اللصق على الغلاف لا على الشجرة نفسها: `.tree` يملأ ارتفاع `<details>`
   بالكامل، فلا يبقى داخله مدى يتحرّك فيه العنصر اللاصق ولا يلتصق شيء.
   الغلاف عنصر شبكة، وكتلته الحاوية هي منطقة الشبكة كاملة الارتفاع. */
.tree-wrap { position: sticky; top: 5rem; }

.tree {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
  max-height: calc(100dvh - 7rem);
  display: flex; flex-direction: column;
}
.tree > h2 {
  padding: var(--s3) var(--s4); margin: 0;
  font-size: var(--fs-sm); color: var(--ink-3); font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.tree-scroll { overflow-y: auto; padding: var(--s2); overscroll-behavior: contain; }
/* عمق الشجرة من التداخل الطبيعي لعناصر <ul>، لا من متغيّر يُمرَّر عبر
   style= — ذاك كان يُسقَط صامتًا تحت CSP الحالي فتُعرَض الشجرة مسطّحة. */
.tree ul { list-style: none; margin: 0; padding-inline-start: var(--s3); }
.tree > .tree-scroll > ul { padding-inline-start: 0; }
.tree li { position: relative; }
/* خطّ توجيه رفيع يوضّح العمق بدل الاعتماد على المسافة وحدها. */
.tree ul ul { border-inline-start: 1px solid var(--line); margin-inline-start: var(--s2); }
.tree a {
  display: block; padding: var(--s2) var(--s3);
  border-radius: var(--r-sm); font-size: var(--fs-sm);
  color: var(--ink-2); line-height: 1.5;
}
.tree a:hover { background: var(--accent-tint); color: var(--accent); text-decoration: none; }
.tree a.active {
  background: var(--accent); color: var(--accent-ink); font-weight: 700;
}
/* علّة حقيقية رُصدت بلقطتين من المستخدم على شاشة فعلية (2026-09-03، كلا
   السمتين): هذا المحدِّد كان يستهدف `.muted` — صنف لا وجود له في هذا
   العنصر إطلاقًا (العنوان `.node-title`) — فلم يكن يُطبَّق قط. عنوان
   التقسيم على الصفّ النشط كان يبقى بلونه العادي (`--ink-3`, رماديّ
   متوسّط مصمَّم ليتباين مع سطح محايد) فوق خلفية `--accent` المشبَّعة:
   رماديّ متوسّط على أزرق داكن في الفاتحة، ورماديّ متوسّط على أزرق فاتح
   في الداكنة — تباين ضعيف في الحالتين معًا رغم كونه سليمًا في كل عنصر
   آخر بالشجرة. */
.tree a.active .node-title { color: color-mix(in srgb, var(--accent-ink) 78%, transparent); }
.tree .node-label { font-weight: 700; }
/* `--ink-2` لا `--ink-3`: نفس اللقطتين أظهرتا عناوين التقسيمات خافتة
   عن العين حتى في الصفوف غير النشطة — تباينها محسوبًا (~5.8:1 فاتحة،
   ~6.1:1 داكنة) يجتاز WCAG AA بهامش، لكنه بدا شاحبًا فعليًّا عند وزن
   الخطّ الرفيع (400) والمقاس الصغير لعنوان القسم. `--ink-2` أغمق
   بوضوح (~8.7:1 / ~9.9:1) مع إبقاء وزن الخطّ الأخفّ فارقًا كافيًا عن
   الرقم الغامق بجانبه — العنوان يبقى ثانويًّا بالوزن لا باللون. */
.tree .node-title { color: var(--ink-2); font-weight: 400; }
.tree a:hover .node-title { color: inherit; }

.tree-articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tree-articles a { font-variant-numeric: tabular-nums; }
.tree-articles a.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.tree-articles-title {
  padding: var(--s3) var(--s4) var(--s2);
  font-size: var(--fs-sm); color: var(--ink-3); font-weight: 700;
  border-top: 1px solid var(--line);
}

/* الشجرة على الهاتف: لوح منسدل أصيل لا نسخة مصغَّرة من عمود سطح المكتب. */
.tree-mobile-toggle { display: none; }

/* -- 5.15 (محذوفة: منتقي «عرض تاريخي»، طلب صريح 2026-09-03) -------------
   كانت هنا مجموعة `.asof`/`.asof-body`/`.asof-hint` لمنتقي تاريخ النفاذ
   في browse.html — حُذف القالب الذي يستهلكها لأن لا مادة في القاعدة
   الحالية لها أكثر من نسخة بتاريخ نفاذ مختلف، فحُذفت القواعد معه بدل
   إبقائها CSS ميّتًا. الدعم الخادميّ لـ`as_of` نفسه لم يُمسّ؛ لو استُؤنف
   المنتقي لاحقًا فالبنية النصّية أعلاه مرجع كافٍ لإعادتها. --------- */

/* -- 5.16 لوحة خيارات البحث --------------------------------------------- */

.search-filters {
  all: unset; box-sizing: border-box; display: block;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: var(--s3) var(--s4) var(--s4);
  margin-top: var(--s3);
}
/* `<legend>` عنصر ذو تموضع خاصّ: يُرسَم على حدّ الـfieldset لا داخله،
   فيقطع إطار البطاقة بصريًّا. الطفو يعيده إلى التدفّق العادي ككتلة أولى. */
.search-filters legend {
  float: inline-start; width: 100%;
  font-weight: 700; font-size: var(--fs-2xs); color: var(--ink-3);
  padding: 0; margin-bottom: var(--s2);
}
.search-filters-row { clear: both; }
.search-filters-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3) var(--s5); margin-top: var(--s2);
}

/* مجموعة أزرار مقطّعة — نمط تبديل حصري مألوف لخيارات متنافية قليلة. */
.match-modes {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  background: var(--surface-sunk); border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.match-mode {
  position: relative; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.25rem; padding: var(--s1) var(--s4);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.match-mode input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.match-mode:hover { color: var(--accent); }
.match-mode:has(input:checked) { background: var(--accent); color: var(--accent-ink); box-shadow: var(--sh-1); }
.match-mode:has(input:checked):hover { color: var(--accent-ink); }
.match-mode:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.match-modes-hint {
  flex: 1 1 18rem; margin: 0;
  font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.7;
}

.result-summary {
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
  margin: var(--s5) 0 var(--s3);
  font-size: var(--fs-sm); color: var(--ink-3);
}
.result-summary strong { color: var(--ink); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }

/* -- 5.16ب فهرس النصوص التطبيقية والتنظيمية --------------------------------
   بطاقات لا جدول سبعة أعمدة: الجدول القديم كان يفيض أفقيًّا على الهاتف
   ويقصّ الموضوع — أهمّ عمود فيه. هنا الموضوع سطر القراءة الرئيسي،
   والبيانات الوصفية (نوع، رقم، تاريخ، مرجع) حوله بوزن أخفّ. */
.reg-facets { display: grid; gap: var(--s1); margin-top: var(--s4); }
.reg-facets .chips { margin-top: 0; }
.chip svg { width: 0.875rem; height: 0.875rem; vertical-align: -2px; }
.chip-count {
  display: inline-block; min-width: 1.25rem; margin-inline-start: 2px; padding: 0 5px;
  font-size: var(--fs-2xs); font-weight: 800; text-align: center;
  color: var(--ink-3); background: var(--surface-2); border-radius: var(--r-pill);
}
.chip[aria-current="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.chip[aria-current="true"] .chip-count { color: var(--accent); background: var(--accent-ink); }
.chip[aria-current="true"]:hover { color: var(--accent-ink); }

.reg-reset { margin-inline-start: auto; font-size: var(--fs-xs); font-weight: 700; }

.reg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.reg-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.reg-item:hover { border-color: var(--line-strong); box-shadow: var(--sh-1); }

.reg-head { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.reg-kind { color: var(--accent); background: var(--accent-tint); border-color: var(--accent-tint-2); }
.reg-curated { color: var(--seal); background: color-mix(in srgb, var(--seal) 12%, transparent); border-color: color-mix(in srgb, var(--seal) 35%, transparent); }
.reg-num { font-weight: 800; font-size: var(--fs-sm); color: var(--ink); }
.reg-date { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--fs-xs); color: var(--ink-3); }
.reg-date svg { width: 0.875rem; height: 0.875rem; }

.reg-subject { margin-top: var(--s2); font-size: var(--fs-md); line-height: 1.85; color: var(--ink); }

.reg-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4);
  flex-wrap: wrap; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line);
}
.reg-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--fs-xs); color: var(--ink-3); }
.reg-meta span + span::before { content: "·"; margin-inline-end: var(--s3); color: var(--ink-4); }
.reg-no-link { font-size: var(--fs-2xs); color: var(--ink-4); }

/* -- 5.17 الكنّاش: منظور المختصّ ----------------------------------------- */

.shell {
  display: grid; grid-template-columns: 17rem minmax(0, 1fr) 17rem;
  gap: var(--s4); align-items: start;
}

.konash-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4);
}
.konash-bar-actions { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }

.konash-main { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.konash-main-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s3); flex-wrap: wrap;
  padding: var(--s5); border-bottom: 1px solid var(--line);
}
.konash-main-head h1 { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.konash-main-head .chain { margin-top: var(--s2); }
.konash-simple-link {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s4) var(--s5); border-top: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 700;
}
.konash-simple-link svg { width: 0.9375rem; height: 0.9375rem; }

/* تبويبات بلا جافاسكربت: radio مخفيّة + :has() تُظهر لوحتها. الدلالة
   محمولة على العناصر نفسها (radiogroup + tabindex طبيعي للـ radio)،
   لا role=tablist كاذب بلا role=tab تحته. */
.konash-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.konash-tabs .panel { display: none; padding: var(--s5); }
.konash-tabs:has(#tab-text:checked) #panel-text { display: block; }
.konash-tabs:has(#tab-note:checked) #panel-note { display: block; }
.konash-tabs:has(#tab-implementing:checked) #panel-implementing { display: block; }

.tabs {
  display: flex; gap: var(--s1); padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--line); overflow-x: auto;
}
.tab {
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-3);
  padding: var(--s2) var(--s4); border-radius: var(--r-sm);
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.tab:hover { background: var(--accent-tint); color: var(--accent); }
.konash-tabs:has(#tab-text:checked) label[for="tab-text"],
.konash-tabs:has(#tab-note:checked) label[for="tab-note"],
.konash-tabs:has(#tab-implementing:checked) label[for="tab-implementing"] {
  color: var(--ink); background: var(--accent-tint);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}
.konash-tabs:has(#tab-text:focus-visible) label[for="tab-text"],
.konash-tabs:has(#tab-note:focus-visible) label[for="tab-note"],
.konash-tabs:has(#tab-implementing:focus-visible) label[for="tab-implementing"] {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

.konash-tabs .alert { margin: var(--s4) var(--s5) 0; }

.tab-count {
  display: inline-block; min-width: 1.25rem; padding: 0 5px;
  margin-inline-start: var(--s1);
  font-size: var(--fs-2xs); font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--ink-3); background: var(--surface-2);
  border-radius: var(--r-pill); text-align: center;
}
.konash-tabs:has(#tab-implementing:checked) label[for="tab-implementing"] .tab-count {
  color: var(--accent-ink); background: var(--accent);
}

/* نصوص تطبيقية: كل عنصر مرسوم/قرار مستقلّ — قائمة بسيطة بلا زخرفة زائدة،
   بخلاف تظليل مصادر نصّ المادة (هذه ليست مقاطع مُسنَدة، بل مراجع مستقلّة). */
.implementing-list {
  display: grid; gap: var(--s4);
  list-style: none; margin: 0; padding: 0;
}
.implementing-list li {
  position: relative; padding-inline-start: var(--s5);
  font-size: var(--fs-sm); line-height: 1.85; color: var(--ink-2);
}
.implementing-list li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

.legend { display: flex; flex-wrap: wrap; gap: var(--s3); padding: var(--s4) var(--s5) 0; }
.legend-item {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-2xs); color: var(--ink-2); font-weight: 700;
  padding: 2px var(--s2); border-radius: var(--r-pill);
  border: 1px solid var(--line); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.legend-item:hover, .legend-item:focus-visible { background: var(--accent-tint); text-decoration: none; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--seg-color, var(--ink-3)); }

/* صنف المصدر يضبط `--seg-color` وحده؛ التظليل والمرجع ونقطة المسار الزمني
   ودليل الألوان كلّها تقرأ المتغيّر نفسه — لون المصدر واحد أينما ظهر. */
.src-1 { --seg-color: var(--src-1); }
.src-2 { --seg-color: var(--src-2); }
.src-3 { --seg-color: var(--src-3); }
.src-4 { --seg-color: var(--src-4); }
.src-5 { --seg-color: var(--src-5); }
.src-6 { --seg-color: var(--src-6); }
.src-7 { --seg-color: var(--src-7); }
.src-8 { --seg-color: var(--src-8); }

.article-text { font-size: var(--fs-read); line-height: var(--lh-read); max-width: var(--measure); }
.article-text .para { margin-bottom: var(--s4); }

/* تلوين المقاطع من مصدر التعديل الحقيقي — لا زخرفة. الإسناد نفسه لم يعد
   محبوسًا في `title=` (لا يصل لوحة المفاتيح ولا اللمس أصلًا): لكل مقطع
   مُسنَد الآن مرجع هامشي مرقَّم يقفز إلى حدثه في المسار الزمني. */
/* **تظليل النصّ نفسه** (لا شريط هامشي) — طلب صريح من المستخدم ليطابق
   عرف الموقع القديم الذي اعتاده مستخدمو الكنّاش (لقطة مرجعية أُرفقت).
   المشكلة التي دفعت لتجربة الشريط الهامشي سابقًا كانت حواف التظليل
   المسنَّنة عبر الأسطر الملتفّة — `box-decoration-break: clone` يحلّها:
   كل سطر يأخذ حوافه المستديرة الخاصّة بدل صندوق واحد مكسور. `mark` يحمل
   التظليل الآن، لا الفقرة — فالمرجع الهامشي `.seg-ref` بعده يبقى خارج
   كتلة اللون، كما في اللقطة المرجعية. الفقرة قد تضمّ مقاطع من مصادر
   مختلفة، فلون المصدر يُحمَل على كل مقطع ومرجع لا على الفقرة.
   صبغة خفيفة + خطّ سفلي رفيع بلون المصدر: تمييز واضح بين المصادر دون
   كتل لون مشبعة تُتعب العين في قراءة طويلة. */
mark.seg {
  background: color-mix(in srgb, var(--seg-color, transparent) var(--seg-tint), transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--seg-color, transparent) 60%, transparent);
  color: inherit; cursor: help;
  border-radius: var(--r-xs) var(--r-xs) 2px 2px;
  padding: 0.05em 0.2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
/* المفتاح يُطفئ التظليل وحده — لا أثر آخر على التخطيط. */
body:has(#color-toggle:not(:checked)) mark.seg { background: none; box-shadow: none; cursor: text; }
body:has(#color-toggle:not(:checked)) .seg-ref { color: var(--ink-3); }

.seg-ref {
  display: inline-block;
  font-size: var(--fs-2xs); font-weight: 800; vertical-align: super;
  line-height: 1.6; margin-inline-start: 2px;
  color: var(--seg-color, var(--accent));
  font-variant-numeric: tabular-nums;
  padding: 2px var(--s1); border-radius: var(--r-xs);
  min-width: 1.5rem; text-align: center;
}
.seg-ref:hover, .seg-ref:focus-visible { background: var(--accent-tint); text-decoration: none; }

.switch-wrapper {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-xs); color: var(--ink-2); font-weight: 700;
  cursor: pointer; user-select: none;
}
.switch { position: relative; width: 2.25rem; height: 1.25rem; display: inline-block; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0; background: var(--line-strong);
  border-radius: var(--r-pill); transition: background var(--dur-2) var(--ease);
}
.switch input:checked ~ .track { background: var(--accent); }
.switch input:focus-visible ~ .track { outline: 3px solid var(--focus); outline-offset: 2px; }
/* اتّجاه حركة المقبض منطقيّ لا هندسيّ: يبدأ عند **بداية** المحور (اليمين
   في RTL) ثم يتحرّك نحو نهايته (اليسار). النسخة الأولى كانت تستعمل
   `inset-inline-end` فتنطلق من اليسار وتنتهي يمينًا — سلوك مفتاح إنجليزي
   حرفيًّا، يقرؤه المستخدم العربي معكوسًا. رُصد بلقطة مكبَّرة. */
.switch .handle {
  position: absolute; top: 2px; inset-inline-start: 2px;
  width: 1rem; height: 1rem;
  background: #fff; border-radius: 50%;
  box-shadow: var(--sh-1);
  transition: inset-inline-start var(--dur-2) var(--ease);
}
.switch input:checked ~ .handle { inset-inline-start: calc(100% - 1.125rem); }

.side { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: var(--s3); }
.side .card { padding: 0; }

.kv { display: grid; grid-template-columns: minmax(4.5rem, auto) 1fr; gap: var(--s2) var(--s3); padding: var(--s4); }
.kv .k { color: var(--ink-3); font-size: var(--fs-xs); }
.kv .v { color: var(--ink); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }

.timeline { padding: var(--s3) var(--s4) var(--s4); display: grid; gap: var(--s2); }
.event {
  display: flex; gap: var(--s3); align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3);
  scroll-margin-top: 6rem;
}
.event:target { border-color: var(--accent); background: var(--accent-tint); }
.event .dot {
  width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0;
  background: var(--seg-color, var(--ink-3));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seg-color, var(--ink-3)) 18%, transparent);
}
.event .e-title { font-weight: 800; font-size: var(--fs-xs); color: var(--ink); }
.event .e-sub { font-size: var(--fs-2xs); color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.event .e-index {
  margin-inline-start: auto; flex-shrink: 0;
  font-size: var(--fs-2xs); font-weight: 800; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.linkbox { padding: var(--s3) var(--s4) var(--s4); display: grid; gap: var(--s2); }
.linkrow {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2) var(--s3);
}
.linkrow .label { font-size: var(--fs-xs); font-weight: 700; }
.linkrow .hint { font-size: var(--fs-2xs); color: var(--ink-3); margin-top: 1px; font-variant-numeric: tabular-nums; }

/* -- 5.18 القاموس -------------------------------------------------------- */

.terms { display: grid; gap: var(--s3); }
.term { padding: var(--s5); }
.term-langs { display: grid; gap: var(--s4); }
.term-lang { padding-inline-start: var(--s3); border-inline-start: 3px solid var(--line); }
.term-head { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.term-label { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.term-def { margin-top: var(--s1); color: var(--ink-2); font-size: var(--fs-base); line-height: 1.8; max-width: var(--measure); }
.lang-tag {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--accent);
  background: var(--accent-tint); border-radius: var(--r-xs);
  padding: 1px var(--s2); flex-shrink: 0;
}
.term-foot {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-3);
}

/* -- 5.19 المساعد -------------------------------------------------------- */

.ask { display: grid; gap: var(--s3); }
.ask textarea {
  width: 100%; padding: var(--s3) var(--s4);
  font-size: var(--fs-md); line-height: 1.75;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  resize: vertical; min-height: 6rem;
}
.ask textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
.ask-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.counter { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.counter.over { color: var(--repealed); font-weight: 700; }

/* هيكل عظمي بشكل المحتوى القادم، لا دوّارة عامّة: يقلّل الإحساس بالانتظار
   ويمنع قفزة التخطيط حين تصل الإجابة. */
.skeleton { display: grid; gap: var(--s3); }
.skeleton[hidden] { display: none; }
.sk-line { height: 0.875rem; border-radius: var(--r-xs); background: var(--surface-sunk); }
.sk-line.w90 { width: 90%; } .sk-line.w75 { width: 75%; } .sk-line.w60 { width: 60%; }
.sk-block { height: 4.5rem; border-radius: var(--r-md); background: var(--surface-sunk); }
@media (prefers-reduced-motion: no-preference) {
  .sk-line, .sk-block {
    background: linear-gradient(90deg, var(--surface-sunk) 0%, var(--surface-2) 50%, var(--surface-sunk) 100%);
    background-size: 200% 100%;
    animation: sk 1.4s var(--ease) infinite;
  }
  @keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
}

.warnings { }
.warnings ul { margin: var(--s2) 0 0; padding-inline-start: var(--s5); }

.answer {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s5) var(--s6);
}
.answer.refused { background: var(--surface-2); }
.answer-text {
  margin: 0; font-size: var(--fs-read); line-height: var(--lh-read);
  white-space: pre-wrap; overflow-wrap: break-word;
  max-width: var(--measure);
}

.citations { margin-top: var(--s5); }
.citations ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.citation { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3) var(--s4); }
.citation-head { display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.citation-num { font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.citation-meta { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s1); }
.citation-excerpt { margin-top: var(--s2); color: var(--ink-2); font-size: var(--fs-base); line-height: 1.8; }

/* -- 5.20 صفحات ثابتة ---------------------------------------------------- */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: var(--s3); margin: var(--s6) 0; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); }
.stat-tile .num { font-size: var(--fs-2xl); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat-tile .lbl { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s1); }

.prose { max-width: var(--measure); }
.prose p { color: var(--ink-2); line-height: 1.85; margin-bottom: var(--s4); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 700; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--s3); }
.feature-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); }
.feature-tile .f-ico {
  display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--accent-tint); color: var(--accent); margin-bottom: var(--s3);
}
.feature-tile .f-ico svg { width: 1.125rem; height: 1.125rem; }
.feature-tile h3 { font-size: var(--fs-base); margin-bottom: var(--s1); }
.feature-tile p { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.7; }

.cta-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
  background: var(--accent-tint); border: 1px solid var(--accent-tint-2);
  border-radius: var(--r-lg); padding: var(--s6); margin-top: var(--s8);
}
.cta-band h2 { font-size: var(--fs-lg); }
.cta-band p { color: var(--ink-2); margin-top: var(--s1); font-size: var(--fs-sm); }

/* -- 5.21 التطبيقات ------------------------------------------------------ */

.apps-list { display: grid; gap: var(--s5); }
/* `min-width: 0` ليس زخرفة: الحدّ الأدنى التلقائي لعنصر الشبكة هو حجم
   محتواه، وشريط اللقطات داخله أعرض من الشاشة بطبيعته — فبدونه يمدّ
   البطاقة ومعها الصفحة كلّها بدل أن يتمرّر داخل حاويته.
   ملاحظة تاريخية: قبل تحويل اللقطات إلى أزرار كان `img{max-width:100%}`
   يمنع الفيضان بضغط الصور نفسها — أي بتشويه نسبها بدل تمريرها. */
.app-card {
  min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s5);
}
.app-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.app-icon { width: 3.5rem; height: 3.5rem; border-radius: var(--r-md); flex-shrink: 0; object-fit: cover; }
.app-meta { flex: 1 1 12rem; }
.app-meta h2 { font-size: var(--fs-md); }
.app-dev { font-size: var(--fs-xs); color: var(--ink-3); }
.app-badges { display: flex; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; }
.app-badges span {
  font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3);
  background: var(--surface-sunk); border-radius: var(--r-xs); padding: 2px var(--s2);
  font-variant-numeric: tabular-nums;
}
.app-badges .rate { color: var(--amended); background: var(--amended-bg); }
.app-desc { color: var(--ink-2); line-height: 1.8; margin: var(--s4) 0; max-width: var(--measure); font-size: var(--fs-base); }
.app-features {
  list-style: none; margin: 0 0 var(--s5); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: var(--s2) var(--s4);
}
.app-features li { font-size: var(--fs-sm); color: var(--ink-2); padding-inline-start: var(--s5); position: relative; }
.app-features li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--in-force);
}

.shots {
  display: flex; gap: var(--s2); min-width: 0;
  overflow-x: auto; padding-bottom: var(--s2); scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
/* اللقطة زرّ حقيقي لا صورة بمستمع نقر: كانت غير قابلة للفتح بلوحة
   المفاتيح إطلاقًا (WCAG 2.1.1) — أربع عشرة صورة لا يصلها مستخدم كيبورد.
   والزرّ يمنح كذلك التمرير الأفقي بؤرةً طبيعية بلا tabindex مصطنع. */
.shot-btn {
  padding: 0; border: 0; background: none; cursor: zoom-in;
  flex-shrink: 0; scroll-snap-align: start; border-radius: var(--r-sm);
  line-height: 0;
}
.shot-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.shot {
  height: 12rem; display: block;
  border-radius: var(--r-sm); border: 1px solid var(--line);
}

.dz-lightbox {
  position: fixed; inset: 0; z-index: var(--z-overlay); display: none;
  align-items: center; justify-content: center;
  background: rgba(10, 12, 15, .92);
}
.dz-lightbox.open { display: flex; }
.dz-lightbox img { max-width: 88vw; max-height: 82vh; border-radius: var(--r-sm); }
.dz-lb-close, .dz-lb-btn {
  position: absolute; background: rgba(255, 255, 255, .12); color: #fff;
  border: 0; border-radius: var(--r-pill); width: 2.75rem; height: 2.75rem;
  font-size: var(--fs-lg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dz-lb-close:hover, .dz-lb-btn:hover { background: rgba(255, 255, 255, .24); }
.dz-lb-close:focus-visible, .dz-lb-btn:focus-visible { outline: 3px solid #F2D9A6; outline-offset: 2px; }
.dz-lb-close { top: var(--s4); inset-inline-end: var(--s4); }
.dz-lb-prev  { inset-inline-start: var(--s4); top: 50%; transform: translateY(-50%); }
.dz-lb-next  { inset-inline-end: var(--s4); top: 50%; transform: translateY(-50%); }
.dz-lb-count { position: absolute; bottom: var(--s4); color: rgba(255, 255, 255, .82); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* -- 5.22 النماذج -------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }

.card-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s6); }
.card-block h2 { margin-bottom: var(--s4); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
.field { margin-bottom: var(--s4); }
.field label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--s2); }
.field .req { color: var(--repealed); }
.field input, .field textarea {
  width: 100%; padding: var(--s2) var(--s3);
  font-size: var(--fs-base); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface);
}
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 8rem; }
.field ul.errorlist {
  list-style: none; margin: var(--s2) 0 0; padding: 0;
  color: var(--repealed); font-size: var(--fs-xs); font-weight: 600;
}
.field:has(ul.errorlist) input, .field:has(ul.errorlist) textarea { border-color: var(--repealed); }

.contact-info { display: grid; gap: var(--s3); }
.info-card {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s4);
}
.info-card .i-ico {
  display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--accent-tint); color: var(--accent); flex-shrink: 0;
}
.info-card .i-ico svg { width: 1.0625rem; height: 1.0625rem; }
.info-card h3 { font-size: var(--fs-sm); margin-bottom: 2px; }
.info-card p { font-size: var(--fs-sm); color: var(--ink-3); }
.info-note { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.7; padding-inline: var(--s1); }

/* -- 5.23 التذييل --------------------------------------------------------
   لا مزرعة روابط بأربعة أعمدة: مسارات التنقّل الحقيقية + بيان المصدر
   والإخلاء، وهما في منتَج قانوني معلومة ثقة لا نصّ صغير مهمَل. ------- */

.footer {
  margin-top: var(--s9);
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.footer-top {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s6); padding-block: var(--s7) var(--s6);
}
.footer h2 { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 700; margin-bottom: var(--s3); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.footer ul a { color: var(--ink-2); font-size: var(--fs-sm); }
.footer ul a:hover { color: var(--accent); }
.footer-about p { color: var(--ink-3); line-height: 1.8; max-width: 44ch; }
.footer-about .brand { margin-bottom: var(--s3); }
.footer-legal {
  border-top: 1px solid var(--line);
  padding-block: var(--s4) var(--s6);
  display: grid; gap: var(--s2);
  color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.75;
}
.footer-legal strong { color: var(--ink-2); }

/* شريط الحقوق/الخصوصية السفليّ — أصغر وأخفت من فقرات الإخلاء أعلاه،
   ومفصول عنها بخطّ رفيع: معلومة إدارية بحتة (من يملك الموقع، أين تجد
   سياسته)، لا جزءًا من التحذير القانوني الذي يسبقها. */
.footer-bottombar {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: var(--s2) var(--s4);
  padding-top: var(--s3); margin-top: var(--s1);
  border-top: 1px solid var(--line);
  font-size: var(--fs-2xs); color: var(--ink-4);
}
.footer-bottombar p { margin: 0; }
.footer-bottombar a { color: var(--ink-3); }
.footer-bottombar a:hover { color: var(--accent); }

/* -- 5.24 صفحات الخطأ ---------------------------------------------------- */

.errpage { text-align: center; padding-block: var(--s10) var(--s11); }
.errpage .code {
  font-size: var(--fs-3xl); font-weight: 800; color: var(--ink-4);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.errpage h1 { margin-top: var(--s4); font-size: var(--fs-2xl); }
.errpage p { margin-top: var(--s3); color: var(--ink-3); max-width: 46ch; margin-inline: auto; }
.errpage .empty-actions { margin-top: var(--s6); }

/* ==========================================================================
   5.25 تفاصيل مكمِّلة للمكوّنات أعلاه
   ========================================================================== */

/* -- الفاصل الاتجاهي --------------------------------------------------------
   المحرف ← من محارف Unicode القابلة للانعكاس (Bidi_Mirrored)، فيُقلَب إلى →
   تلقائيًّا حين يقع داخل مقطع RTL — أي أنه يشير إلى عكس تقدّم القراءة
   العربية بالضبط، ولا يظهر ذلك في مصدر القالب بل في المتصفّح وحده.
   العزل الاتجاهي هنا هو ما يُبقيه مشيرًا إلى اليسار كما هو مقصود.
   ولهذا أيضًا كل أسهم التنقّل في الموقع رسوم SVG لا محارف. ------------- */
.sep {
  direction: ltr; unicode-bidi: isolate; display: inline-block;
  color: var(--ink-4); font-size: .9em;
}
.crumbs li + li::before {
  direction: ltr; unicode-bidi: isolate; display: inline-block;
}

/* -- روابط «انتقل» المضمَّنة ----------------------------------------------- */
.entry-go, .chapter-open-all, .row-more, .konash-simple-link, .term-foot a {
  display: inline-flex; align-items: center; gap: var(--s2);
}
.entry-go .ico, .chapter-open-all .ico, .row-more .ico { width: .9em; height: .9em; }
.chapter-open-all { justify-content: space-between; }

/* -- قوائم داخل الألواح النصّية -------------------------------------------- */
.info h2, .alert h2, .notice h2 { font-size: var(--fs-md); margin-bottom: var(--s2); }
.info ul, .alert ul, .notice ul, .warnings ul {
  margin: var(--s2) 0 0; padding-inline-start: var(--s5);
}
.info li, .alert li, .notice li { margin-bottom: var(--s1); }
.info p + p, .alert p + p, .notice p + p { margin-top: var(--s2); }

kbd {
  font-family: var(--font-ui); font-size: .85em; font-weight: 700;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  padding: 0 var(--s2); background: var(--surface-sunk); color: var(--ink-2);
}

/* -- تاريخ مضغوط (يُبنى في assistant.js لمصادر الإجابة) ------------------- */
.date {
  font-size: var(--fs-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* -- مجموعة تبويبات الكنّاش: fieldset يُصفَّر من نمط المتصفّح الافتراضي --- */
.tabs-group { all: unset; box-sizing: border-box; display: block; }

/* -- تصفّح القاموس بالحرف --------------------------------------------------
   حروف موجودة فعلًا مع أعدادها، لا أبجدية كاملة نصفها روابط ميّتة. ----- */
.letters {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s4);
}
.letter {
  display: inline-flex; align-items: baseline; gap: var(--s1);
  min-width: 2.75rem; min-height: 2.75rem;
  padding: var(--s2) var(--s3);
  justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.letter:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.letter.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.letter-char { font-weight: 800; font-size: var(--fs-md); }
.letter-count { font-size: var(--fs-2xs); color: var(--ink-4); }
.letter.active .letter-count { color: color-mix(in srgb, var(--accent-ink) 75%, transparent); }

/* -- المصادر في صفحة المساعد ---------------------------------------------- */
.citation-num {
  font-size: var(--fs-md); font-weight: 800; color: var(--accent);
}

/* -- شريط اللقطات: بؤرة لوحة مفاتيح مرئية على الحاوية القابلة للتمرير --- */
.shots:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* -- غلاف الشجرة ----------------------------------------------------------
   على الشاشة العريضة `<details>` مجرّد حاوية: الملخّص مخفيّ والمحتوى
   ظاهر دائمًا (السمة `open` مثبَّتة في القالب). على الضيّقة يتحوّل إلى
   لوح مطويّ حقيقي — راجع قسم الاستجابة. ------------------------------ */
.tree-wrap > summary { list-style: none; }
.tree-wrap > summary::-webkit-details-marker { display: none; }

/* -- شريط أدوات المادة: تأكيد النسخ ---------------------------------------- */
.btn[data-done] .ico { color: var(--in-force); }

/* شبكات العمود الواحد: `minmax(0, 1fr)` لا `auto`.
   المسار التلقائي (`auto`) يتّسع لأعرض محتوى فيه، فشريط لقطات أفقي أو
   سطر طويل داخل العمود يمدّ المسار — ومعه الصفحة كلّها — بدل أن يتمرّر
   داخل حاويته. `min-width: 0` على العنصر لا يكفي: القيد يجب أن يقع على
   المسار نفسه. وقاية بنيوية: تُبقي أي محتوى واسع يُضاف لاحقًا محصورًا في
   عموده. */
.apps-list, .rows, .terms, .chapters-grid, .timeline, .linkbox,
.messages, .ask, .reader, .skeleton, .contact-info, .article-nav {
  grid-template-columns: minmax(0, 1fr);
}
.article-nav { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

/* -- 5.26 التعريفة الجمركية ------------------------------------------------
   الرمز الجمركي **مُعرِّف لا نصّ**: `unicode-bidi: isolate` يمنع إعادة
   تدفّقه داخل فقرة RTL، و`tabular-nums` يجعل أعمدة الأرقام تصطفّ.
   وأعماق سلسلة التسمية ستّ فئات ساكنة لا `style=` ديناميكي — CSP تُسقِط
   المضمَّن بصمت، ويمسكه اختبار الترميز.
-------------------------------------------------------------------------- */

/* المصدر فرنسيّ بالكامل، فكلّ **لوح بيانات** (قوائم الفصول والبنود، شجرة
   البند، سلسلة التسمية، الإجراءات، مقتطفات البحث) `dir="ltr"` محاذًى يسارًا
   داخل إطار واضح. فقرة فرنسية محاذاة يمينًا بحافّة يسرى مسنَّنة تُقرأ أبطأ
   بشكل ملموس — وعلى الهاتف تلتفّ كلّ تسمية تقريبًا. العناوين والوسوم
   العربية تبقى RTL خارج الألواح، والإطار هو ما يجعل تبدّل الاتّجاه مقصودًا
   لا عشوائيًّا. داخل كلّ صفّ: الفرنسي يسارًا، والعربي (عدد، وسم) يمينًا. */

.tariff-code {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* 0101211100 ⇐ 0101 21 11 00 بصريًّا فقط (بند · بند فرعي دولي · وطني).
   هوامش لا مسافات، فالنسخ وCtrl+F يريان الرمز متّصلًا كما في المصدر. */
.tariff-code .g { margin-inline-start: .28em; }
.tariff-code-xl {
  font-size: clamp(1.875rem, 1.45rem + 1.6vw, 2.5rem);
  font-weight: 800; line-height: 1.15; color: var(--ink);
}
.tariff-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6em; padding: 0 .45em;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--ink);
  font-size: .875em; font-weight: 700; line-height: 1.6;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}

/* ترويسة: وسم عربي صغير فوق عنوان المصدر الفرنسي. العنوان هو ما يُقرأ،
   فهو الـ<h1> — لا الرمز العاري كما كان («10» وحده لا يقول شيئًا). */
.tariff-head { display: grid; gap: var(--s2); }
.tariff-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); }
.tariff-kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-3);
}
.tariff-kicker .tariff-code { color: var(--accent); }
.tariff-head .tariff-title {
  font-size: var(--fs-xl); font-weight: 800; line-height: 1.45;
  text-align: right; max-width: 46rem;
}
/* عناوين الأقسام بالأحرف الكبيرة كلّها في المصدر — كتلة كبيرة صعبة القراءة.
   التحويل عرضيّ فقط؛ النصّ المخزَّن والمنسوخ كما ورد. */
.tariff-title.is-caps, .tariff-card-title { text-transform: lowercase; }
.tariff-title.is-caps::first-letter, .tariff-card-title::first-letter { text-transform: uppercase; }
.tariff-code-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4); }

.tariff-crumb { margin-block-end: var(--s4); }
.tariff-crumb a { display: inline-flex; align-items: baseline; gap: .3em; max-width: 100%; }
.tariff-crumb .tariff-code { color: var(--ink-2); }
.tariff-crumb-title {
  display: inline-block; max-width: 16rem; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500;
}

.tariff-block { margin-block-start: var(--s7); }
.tariff-block > h2 { font-size: var(--fs-lg); margin-block-end: var(--s3); }
.tariff-block > h2 span { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); }
.tariff-note { margin-block-start: var(--s3); font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.8; max-width: 62ch; }

/* -- البحث والأمثلة -- */
.tariff-search .btn svg { width: 1.125rem; height: 1.125rem; }
.tariff-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-block-start: var(--s3); font-size: var(--fs-sm); color: var(--ink-3);
}
.tariff-chip {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600;
}
.tariff-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); text-decoration: none; }

.tariff-direct {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3);
  margin-block-start: var(--s4); padding: var(--s3) var(--s4);
  border-inline-start: 4px solid var(--accent);
  color: var(--ink); font-weight: 700; text-decoration: none;
}
.tariff-direct:hover { background: var(--accent-tint); text-decoration: none; }
.tariff-direct .tariff-code { color: var(--accent); }
.tariff-direct-title { color: var(--ink-2); font-weight: 500; }

.tariff-results {
  list-style: none; margin: var(--s3) 0 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
.tariff-result { display: grid; gap: var(--s2); padding: var(--s4); }
.tariff-result + .tariff-result { border-top: 1px solid var(--line); }
/* نفس لغة القوائم في بقيّة الموقع: شريط متناوب + تحويم بلون التمييز. */
.tariff-result:nth-child(even) { background: var(--surface-sunk); }
.tariff-result:hover { background: var(--accent-tint); }
.tariff-result-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.tariff-result-code { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.tariff-result-code:hover { color: var(--accent); text-decoration: none; }
.tariff-result-heading { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); }
.tariff-result-heading .tariff-code { color: var(--accent); }
.tariff-rate-chip {
  margin-inline-start: auto; padding: .1em .65em; border-radius: var(--r-pill);
  background: var(--accent-tint); color: var(--accent-strong);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
}
.tariff-result-text { text-align: left; color: var(--ink-2); font-size: var(--fs-base); line-height: 1.75; }

/* -- فهرس الأقسام والقوائم -- */
.tariff-jump {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1);
  margin-block-start: var(--s5); font-size: var(--fs-sm); color: var(--ink-3);
}
.tariff-jump > span { margin-inline-end: var(--s1); font-weight: 700; }
.tariff-jump a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; min-height: 2.25rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums;
}
.tariff-jump a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); text-decoration: none; }

.tariff-sections { display: grid; gap: var(--s5); margin-block-start: var(--s5); }
.tariff-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-1); overflow: hidden;
  /* القفز من فهرس الأقسام لا يُخفي البطاقة تحت الرأس اللاصق. */
  scroll-margin-top: 5.5rem;
}
.tariff-card-h { font-size: inherit; }
.tariff-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.tariff-card-head:hover { background: var(--accent-tint); text-decoration: none; }
.tariff-card-head:hover .tariff-card-title { color: var(--accent); }
.tariff-card-title { display: block; font-size: var(--fs-md); font-weight: 800; line-height: 1.45; }
.tariff-card-kicker { flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.tariff-card-kicker .tariff-code { color: var(--accent); }

.tariff-list { list-style: none; margin: 0; padding: 0; }
.tariff-list > li + li { border-top: 1px solid var(--line); }
.tariff-list-link, .tariff-list-head {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: var(--s3); align-items: baseline;
  padding: var(--s3) var(--s4);
}
.tariff-list-link { color: var(--ink); line-height: 1.55; text-decoration: none; }
.tariff-list-link:hover { background: var(--accent-tint); text-decoration: none; }
.tariff-list-link:hover .tariff-list-title { color: var(--accent); }
.tariff-list-link > .tariff-code { color: var(--accent); font-weight: 700; }
.tariff-list-title.is-missing { color: var(--ink-3); text-align: left; }
.tariff-list-meta { color: var(--ink-3); font-size: var(--fs-sm); text-align: right; font-variant-numeric: tabular-nums; }
.tariff-list-head {
  padding-block: var(--s2); background: var(--surface-2);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3);
}
.tariff-list-head > :last-child { text-align: right; }

/* -- شجرة البند: خطوط إرشاد للعمق، والرموز عمود أخير مصطفّ -- */
.tariff-panel {
  margin-block-start: var(--s3); padding: var(--s2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.tariff-tree { list-style: none; margin: 0; padding: 0; }
.tariff-tree.is-nested {
  margin-inline-start: .6rem; padding-inline-start: var(--s3);
  border-inline-start: 1px solid var(--line);
}
.tariff-group {
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: var(--s2); border-radius: var(--r-sm);
  font-size: var(--fs-base); font-weight: 700; line-height: 1.55; color: var(--ink);
  cursor: pointer; list-style: none;
}
.tariff-group::-webkit-details-marker { display: none; }
/* سهم CSS لا محرف ▼ ثابت: يدور مع الحالة، ويبقى بلون النصّ الثانوي. */
.tariff-group::before {
  content: ""; flex: none; width: .42rem; height: .42rem; margin-block-start: .5em;
  border-inline-end: 2px solid var(--ink-3); border-block-end: 2px solid var(--ink-3);
  transform: rotate(-45deg); transition: transform var(--dur-1) var(--ease);
}
details[open] > .tariff-group::before { transform: rotate(45deg); margin-block-start: .35em; }
.tariff-group:hover { background: var(--surface-2); }
.tariff-tree.is-nested .tariff-group { font-weight: 600; color: var(--ink-2); }
.tariff-leaf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: var(--s1) var(--s4); min-height: 2.5rem;
  padding: var(--s2); border-radius: var(--r-sm);
  font-size: var(--fs-base); line-height: 1.55; color: var(--ink); text-decoration: none;
}
.tariff-leaf:hover { background: var(--accent-tint); text-decoration: none; }
.tariff-leaf:hover .tariff-leaf-label { color: var(--accent); }
.tariff-leaf-code { color: var(--accent); font-weight: 700; font-size: var(--fs-sm); }
.tariff-orphan { display: block; padding: var(--s2); color: var(--ink-3); }

/* -- صفحة البند الفرعي -- */
.tariff-chain {
  list-style: none; margin: 0; padding: var(--s3) var(--s4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-base); line-height: 1.6; color: var(--ink-2);
}
/* العمق فئة ساكنة تضبط متغيّرًا (لا `style=` — CSP)، والإزاحة والشَّرطة
   الصغيرة قبل كلّ مقطع تُحسَبان منه: تحاكي «- - -» في المصدر بصريًّا. */
.chain-seg { position: relative; padding-block: var(--s1); padding-inline-start: calc(var(--i, 1) * 1.25rem); }
.chain-seg::before {
  content: ""; position: absolute; top: calc(var(--s1) + .8em);
  inset-inline-start: calc(var(--i, 1) * 1.25rem - .85rem); width: .5rem;
  border-top: 1px solid var(--line-strong);
}
.chain-seg.d0 { --i: 0; }
.chain-seg.d0::before { display: none; }
.chain-seg.d1 { --i: 1; }
.chain-seg.d2 { --i: 2; }
.chain-seg.d3 { --i: 3; }
.chain-seg.d4 { --i: 4; }
.chain-seg.d5 { --i: 5; }
.chain-seg.d6 { --i: 6; }
.chain-seg.d7 { --i: 7; }
.chain-seg.d8 { --i: 8; }
.chain-seg.is-heading { color: var(--ink-3); padding-block-end: var(--s2); }
.chain-seg.is-heading .tariff-code { margin-inline-end: var(--s2); color: var(--accent); font-weight: 700; }
.chain-seg.is-self { color: var(--ink); font-weight: 700; }

.tariff-table {
  overflow-x: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.tariff-rates { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.tariff-rates th, .tariff-rates td { padding: var(--s3) var(--s4); text-align: start; vertical-align: baseline; }
.tariff-rates thead th {
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); white-space: nowrap;
}
.tariff-rates tbody tr + tr > * { border-top: 1px solid var(--line); }
.tariff-rates tbody th { color: var(--ink); font-weight: 700; }
.tariff-rate-kind { font-weight: 800; }
/* مع تسمية عربية يصير الرمز شارة ثانوية بجانبها، لا عنوانًا ثانيًا ينافسها. */
.tariff-rate-name + .tariff-rate-kind {
  margin-inline-start: var(--s1); padding: 0 .35em;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3);
}
.tariff-rate-v { font-size: var(--fs-md); font-weight: 800; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tariff-rate-obs { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); }
.tariff-rate-obs > span { display: block; text-align: left; }
.tariff-rate-obs:empty::before { content: "—"; color: var(--ink-4); }
.tariff-rates tfoot td {
  border-top: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--fs-sm); color: var(--ink-3);
}

.tariff-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--s2); margin: 0;
}
.tariff-facts > div {
  padding: var(--s3) var(--s4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.tariff-facts dt { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); }
.tariff-facts dd { margin: 0; font-size: var(--fs-md); font-weight: 700; line-height: 1.5; color: var(--ink); }

.tariff-formalities {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
.tariff-formalities li {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: baseline;
  gap: var(--s3); padding: var(--s3) var(--s4);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--ink);
}
.tariff-formalities li + li { border-top: 1px solid var(--line); }

.tariff-source p { margin-block-end: var(--s3); font-size: var(--fs-sm); color: var(--ink-2); }

.tariff-pager {
  justify-content: space-between; flex-wrap: wrap;
  margin-block-start: var(--s7); padding-block-start: var(--s5);
  border-top: 1px solid var(--line);
}
.tariff-pager .tariff-code { color: var(--ink-3); font-weight: 600; }
.tariff-pager .is-next { margin-inline-start: auto; }

/* تصحيحات بعد مراجعة اللقطات:
   - الفاصل ورابطه كتلة واحدة لا تُقسَم عند الالتفاف (لا سهم يتيم).
   - عمود الملاحظة محاذًى يسارًا كلّه — «—» البديل كان يقف يمينًا بينما
     نصّ الملاحظات الفرنسي يسارًا، فيبدو العمود بحافّتين. */
.tariff-crumb-step { display: inline-flex; align-items: baseline; gap: var(--s2); max-width: 100%; }
.tariff-rate-obs { text-align: left; }
@media (max-width: 36rem) {
  .tariff-pager .btn { flex: 1 1 100%; justify-content: space-between; }
  .tariff-pager .is-next { margin-inline-start: 0; }
}

/* الهاتف: الجداول بطاقات، والشجرة ترفع الرمز فوق التسمية. العتبة 36rem
   قيست على لقطة 390px: جدول الرسوم النوعية بخمسة أعمدة كان يلفّ رأس
   «Unité de mesure» على ثلاثة أسطر، وشجرة 8703 تترك ~11rem للتسمية. */
@media (max-width: 36rem) {
  .tariff-card-head { flex-direction: column-reverse; align-items: stretch; gap: var(--s1); }
  .tariff-list-link, .tariff-list-head { grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: var(--s2); padding-inline: var(--s3); }
  .tariff-crumb-title { max-width: 9rem; }

  .tariff-panel { padding: var(--s1); }
  .tariff-tree.is-nested { margin-inline-start: .4rem; padding-inline-start: var(--s2); }
  .tariff-leaf { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .tariff-leaf-code { order: -1; }

  .tariff-chain { padding-inline: var(--s3); }
  .chain-seg { padding-inline-start: calc(var(--i, 1) * .85rem); }
  .chain-seg::before { inset-inline-start: calc(var(--i, 1) * .85rem - .6rem); width: .4rem; }

  .tariff-rates thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .tariff-rates tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
    column-gap: var(--s3); padding: var(--s3) var(--s4);
  }
  .tariff-rates tbody tr + tr { border-top: 1px solid var(--line); }
  .tariff-rates tbody tr + tr > * { border-top: 0; }
  .tariff-rates tbody th, .tariff-rates tbody td { padding: 0; }
  .tariff-rate-obs { grid-column: 1 / -1; margin-block-start: var(--s1); }
  .tariff-rate-obs:empty { display: none; }
  .tariff-rates tfoot, .tariff-rates tfoot tr, .tariff-rates tfoot td { display: block; }

  .tariff-specific tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s2); }
  .tariff-specific tbody th { grid-column: 1 / -1; }
  .tariff-specific td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-3);
  }
  .tariff-specific .tariff-rate-v { font-size: var(--fs-base); }
}

/* ==========================================================================
   6. الاستجابة — كل نقطة توقّف لسبب حقيقي في المحتوى، لا لمقاس جهاز.
   ========================================================================== */

/* الكنّاش: ثلاثة أعمدة ← عمودان ← عمود */
@media (max-width: 78rem) {
  .shell { grid-template-columns: 16rem minmax(0, 1fr); }
  .shell .side { grid-column: 1 / -1; position: static; flex-direction: row; flex-wrap: wrap; }
  .shell .side > .card { flex: 1 1 18rem; }
}

/* الشجرة الجانبية تفقد معناها كعمود لاصق قبل هذا العرض */
@media (max-width: 60rem) {
  .split { grid-template-columns: 1fr; gap: var(--s4); }
  .shell { grid-template-columns: 1fr; }
  .shell .side { flex-direction: column; }
  .shell .side > .card { flex: 1 1 auto; }

  /* الشجرة تصبح لوحًا مطويًّا فوق القائمة — لا عمود مثبَّت يزحم الشاشة. */
  .tree-wrap { position: static; }
  .tree { max-height: none; }
  .tree-scroll { max-height: 60vh; }
  .tree-mobile-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    width: 100%; padding: var(--s3) var(--s4);
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r-md); cursor: pointer;
    font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
    list-style: none;
  }
  .tree-mobile-toggle::-webkit-details-marker { display: none; }
  .tree-mobile-toggle svg { width: 1rem; height: 1rem; color: var(--ink-3); transition: transform var(--dur-2) var(--ease); }
  details[open] > .tree-mobile-toggle svg { transform: rotate(180deg); }
  details[open] > .tree-mobile-toggle { border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; }
  details[open] > .tree { border-radius: 0 0 var(--r-md) var(--r-md); }
  .tree > h2 { display: none; }

  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .footer-about { grid-column: 1 / -1; }
}

/* القائمة العلوية: من صفّ روابط إلى لوح منسدل.
   العتبة 70rem لا 56rem — قيست لا خُمِّنت: عند 1024px (منفذ عرض 987 بعد
   شريط التمرير) كان صفّ الروابط الثمانية + الشعار + مدخل البحث + مفتاح
   السمة يتجاوز العرض بـ117–163px على كل صفحة، فتفيض الصفحة كلّها أفقيًّا.
   وهذا أكثر المقاسات شيوعًا على اللوحيات وشاشات المكتب الصغيرة. */
@media (max-width: 70rem) {
  .site-nav {
    position: fixed; inset-inline: 0; top: 4rem; bottom: auto;
    z-index: var(--z-drawer);
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: var(--s3);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-3);
    max-height: calc(100dvh - 4rem);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .site-nav[hidden] { display: none; }
  .site-nav a {
    padding: var(--s3) var(--s4); font-size: var(--fs-md);
    border-radius: var(--r-sm); min-height: 2.75rem;
    display: flex; align-items: center;
  }
  .site-nav a[aria-current="page"] {
    background: var(--accent-tint); color: var(--accent); box-shadow: none;
  }
  .nav-toggle { display: inline-flex; }
  .nav-search { margin-inline-start: auto; }
  .nav-search .lbl { display: none; }
  .theme-toggle { order: 1; }
  .nav-toggle { order: 2; margin-inline-start: 0; }

  /* «قوانين أخرى» داخل اللوح العمودي: تمدُّد مكاني لا بطاقة عائمة —
     اللوح نفسه عمودي أصلًا، فبطاقة فوقه تُخفي ما تحتها بلا داعٍ. */
  .nav-more > summary {
    padding: var(--s3) var(--s4); font-size: var(--fs-md); min-height: 2.75rem;
  }
  .nav-more-menu {
    position: static; box-shadow: none; border: 0; background: none;
    padding: 0 0 0 var(--s4); margin-top: 2px;
  }
  .site-nav a.nav-icon { justify-content: flex-start; }
  .site-nav a.nav-icon .ico { width: 1.35rem; height: 1.35rem; }
}

/* الرأس على الشاشة الضيّقة — علّة فيضان أفقي حقيقية رُصدت بلقطة عند 390px:
   خمسة عناصر كلّها `flex-shrink: 0` (شعار بعرض 9rem + بحث + سمة + زرّ قائمة
   بنصّه) تتجاوز مجموعها عرض الشاشة، فتفيض الصفحة كلّها أفقيًّا وتُقصّ من
   حافّتها. الحلّ تقليص الشعار وإسقاط نصّ زرّ القائمة، لا إخفاء الفيضان
   بـ`overflow-x`. */
@media (max-width: 36rem) {
  .masthead-inner { gap: var(--s3); }
  .brand-text { display: none; }
  .brand img { height: 1.75rem; }
  .nav-toggle-label { display: none; }
  .nav-toggle { padding-inline: var(--s2); min-width: 2.75rem; }
  .nav-search { padding: var(--s2); }
  .article { padding: var(--s5) var(--s4); border-radius: var(--r-md); }
  .card-block { padding: var(--s4); }
  .grid-2 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .cta-band { padding: var(--s5); }
  .konash-main-head, .konash-tabs .panel { padding: var(--s4); }
  .konash-tabs .alert { margin-inline: var(--s4); }
  .legend { padding-inline: var(--s4); }
  .page { padding-block: var(--s5) var(--s7); }
  .article-tools .btn { flex: 1 1 auto; }
}

@media (max-width: 48rem) {
}

/* ==========================================================================
   7. الحركة المخفَّضة — احترام تفضيل النظام، لا استثناءات منسيّة.
   ========================================================================== */

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

/* ==========================================================================
   8. الطباعة — الورق مخرَج نهائي في منتَج قانوني: نصّ المادة ومرجعها
   وحالتها، بلا واجهة ولا ألوان خلفية تستهلك الحبر.
   ========================================================================== */

@media print {
  :root {
    --paper: #fff; --surface: #fff; --surface-2: #fff; --surface-sunk: #fff;
    --ink: #000; --ink-2: #222; --ink-3: #444; --line: #bbb; --accent: #000;
  }
  .masthead, .footer, .skip, .searchbar, .pager, .tree, .side, .article-tools,
  .article-nav, .search-filters, .chips, .entries, .konash-simple-link,
  .nav-toggle, .theme-toggle, .switch-wrapper, .tabs, [data-copy], [data-print] { display: none !important; }

  body { background: #fff; font-size: 11pt; }
  .page { padding: 0; }
  .article, .card, .konash-main { border: 0; padding: 0; box-shadow: none; }
  .article-body, .article-text { max-width: none; font-size: 11pt; line-height: 1.7; }

  /* الحالة يجب أن تبقى مقروءة على الورق — بلا اعتماد على لون الخلفية. */
  .badge, .stamp { border: 1px solid #000; color: #000; background: none; }
  .s-repealed-frame { border-inline-start: 3px solid #000; }

  /* الرابط بلا وجهته ورقةٌ مبتورة. */
  .crumbs a::after, .article-body a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }

  a, .row { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  /* صفحة البند الفرعي ممّا يُطبَع فعلًا: الشجرة مفتوحة كاملةً على الورق. */
  .tariff-tree details { display: block; }
  .tariff-tree summary { list-style: none; }
  .tariff-group::before, .tariff-jump, .tariff-hint, .tariff-search, .tariff-pager { display: none; }
  .tariff-card, .tariff-panel, .tariff-table, .tariff-chain, .tariff-facts > div { box-shadow: none; }
}


/* ==========================================================================
   9. حارس أخير للفيضان الأفقي
   ========================================================================== */

@media (max-width: 24rem) {
  .brand img { height: 1.5rem; }
  .masthead-inner { gap: var(--s2); }
}

/* كلمة واحدة أطول من الحاوية (رابط خامّ، مرجع طويل بلا مسافات) تفيض بها
   أفقيًّا. الكسر مقصور على الحاويات النصّية — لا على الواجهة كلّها. */
.article-body, .row-text, .answer-text, .term-def, .prose p, .app-desc,
.citation-excerpt, .empty p, .page-sub, .lead {
  overflow-wrap: break-word;
}