/* دال — ورقٌ وحبر: العائلة البصرية نفسها التي اعتُمدت لصفحات المؤشر (الرموز من tokens.json).
   لونٌ واحدٌ للفعل (brand) وخطوطٌ شعرية للفصل، ولا بطاقات ولا ظلال ولا أيقونات.
   الفاتح هو الورق، والداكن لمن يطلبه جهازه (prefers-color-scheme) — الرموز نفسها معكوسة. */
:root{
  --paper:#f6f5f2;--paper-raised:#edebe6;--paper-sunken:#e4e1da;
  --ink:#111111;--ink-2:#474744;--ink-3:#65655f;
  --rule:#dedbd5;--rule-strong:#8f8c84;
  --brand:#20427a;--on-brand:#f6f5f2;--brand-tint:#e2e7f1;
  --down:#b8321f;
  --band:#111111;--band-ink:#ededed;--band-ink-2:#a0a09c;
  --font-sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-arabic:"IBM Plex Sans Arabic","IBM Plex Sans","Segoe UI",Tahoma,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --r2:4px;--page-max:1120px;--control-h:40px;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root{
  --paper:#1a1a1a;--paper-raised:#242423;--paper-sunken:#2e2e2c;
  --ink:#ededed;--ink-2:#bdbdb9;--ink-3:#a0a09c;
  --rule:#333333;--rule-strong:#6e6e6a;
  --brand:#9db9ee;--on-brand:#1a1a1a;--brand-tint:#1f2a3d;
  --down:#f08270;
  --band:#0f0f0f;
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{background:var(--paper);font-family:var(--font-sans);-webkit-text-size-adjust:100%}
/* العربية بخطّ العائلة العربي نفسه (Plex Sans Arabic)؛ وهو يحمل اللاتينية فلا يختلط خطّان في السطر الواحد */
html:lang(ar){font-family:var(--font-arabic)}
body{margin:0;background:var(--paper);color:var(--ink-2);font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
::selection{background:var(--brand-tint);color:var(--ink)}
.skip{position:absolute;top:-100px;inset-inline-start:var(--s4);z-index:3;padding:6px 12px;background:var(--brand);color:var(--on-brand);text-decoration:none;border-radius:var(--r2)}
.skip:focus{top:var(--s2)}
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--s5)}
.mark{display:block;flex:none}

/* ── الشريط العلوي: مرّةً واحدة في الصفحة؛ العلامة بالورق على الحبر، والروابط كلماتٌ لا أيقونات ── */
.band{background:var(--band);color:var(--band-ink)}
.band .wrap{display:flex;align-items:center;justify-content:space-between;min-height:48px;gap:var(--s4)}
.band a{color:var(--band-ink);text-decoration:none;font-size:14px;line-height:20px}
.band a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.band a:focus-visible{outline-color:var(--band-ink)}
.band-home{display:inline-flex;align-items:center;gap:var(--s3);font-weight:600}
.band-home{gap:10px}
.band-home .mark{width:20px;height:20px}
/* الشعار واحدٌ في اللغتين: Daall بالحرف اللاتيني، والعلامة دائماً في زاوية الصفحة (يميناً بالعربية ويساراً بالإنجليزية) */
.band-home .wm{font-family:var(--font-sans);font-size:15px}
.band-home:hover{text-decoration:none}
.band-nav{display:flex;align-items:center;gap:var(--s5)}
.band-nav a{color:var(--band-ink-2)}
.band-nav a:hover{color:var(--band-ink)}

/* ── الافتتاح: سطرٌ يحمل الصفحة ثم شرحه؛ لا صورة ولا شعارات ── */
.opening{padding:var(--s8) 0 var(--s7);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s4)}
.opening>*{grid-column:1/span 9}
.label{font-size:13px;line-height:18px;font-weight:500;color:var(--ink-3)}
html:lang(en) .label{font-size:11px;line-height:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.display{font-size:40px;line-height:52px;font-weight:500;letter-spacing:-.01em;color:var(--ink);max-width:24ch}
html:lang(ar) .display{letter-spacing:0}
.lede{font-size:18px;line-height:30px;color:var(--ink-2);max-width:62ch}

/* ── تبويبات الأقسام: صفٌّ لاصقٌ بخطٍّ تحتيّ واحد؛ القسم الظاهر يحمل خطّ العلامة ── */
.tabs{position:sticky;top:0;z-index:2;background:var(--paper);border-bottom:1px solid var(--rule)}
.tabs .wrap{display:flex;gap:var(--s5);overflow-x:auto;scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:12px 0 11px;margin-bottom:-1px;border-bottom:2px solid transparent;font-size:14px;line-height:20px;color:var(--ink-2);text-decoration:none}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="true"]{color:var(--ink);border-color:var(--brand)}

/* ── الوحدة: عنوانٌ وتعليقٌ على عمود البداية، ومحتواها على التسعة الباقية، فوقهما خطّ حبرٍ واحد ── */
.module{padding:var(--s4) 0 var(--s8);border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);row-gap:var(--s5);scroll-margin-top:var(--s7)}
.module+.module{margin-top:0}
.module-head{grid-column:1/span 3}
.module-body{grid-column:4/span 8}
.title{font-size:20px;line-height:26px;font-weight:600;color:var(--ink)}
html:lang(en) .title{letter-spacing:-.005em}
.caption{font-size:13px;line-height:18px;color:var(--ink-3);margin-top:var(--s2)}
.prose{max-width:68ch}
.prose p+p{margin-top:var(--s4)}
.prose strong{color:var(--ink);font-weight:600}

/* السجلّ: صفوفٌ بخطوطٍ شعرية، المصطلح على اليمين (البداية) والشرح بعده — جدولٌ لا بطاقات */
.ledger{border-top:1px solid var(--rule)}
.ledger>div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--s5);padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.ledger dt{font-size:13px;line-height:26px;font-weight:600;color:var(--ink)}
html:lang(en) .ledger dt{font-size:11px;line-height:26px;letter-spacing:.06em;text-transform:uppercase}
.ledger dd{max-width:62ch}

/* الطبقات والقواعد: قوائمٌ مرقّمةٌ بخطوطٍ شعرية، الرقم بأرقامٍ جدولية على عمود البداية */
.layers,.rules{list-style:none;padding:0;counter-reset:n;border-top:1px solid var(--rule);margin-top:var(--s5)}
.layers li,.rules li{counter-increment:n;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--s5);padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.layers li::before,.rules li::before{content:counter(n,decimal-leading-zero);font-family:var(--font-sans);font-size:13px;line-height:26px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
.layers h3,.rules h3{font-size:16px;line-height:26px;font-weight:600;color:var(--ink)}
.layers p,.rules p{max-width:62ch}

/* ── النموذج: حقولٌ على ورقٍ غائر بلا إطار، والزرّ الوحيد الممتلئ بلون العلامة ── */
.form{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s5);row-gap:var(--s4);max-width:720px}
.field{display:grid;gap:6px;min-width:0}
.field--wide,.actions,.status{grid-column:1/-1}
.field label{font-size:13px;line-height:18px;color:var(--ink-2)}
.optional{color:var(--ink-3)}
.field input,.field textarea{width:100%;min-height:var(--control-h);padding:0 var(--s3);border:1px solid transparent;border-radius:var(--r2);background:var(--paper-sunken);color:var(--ink);font:inherit;font-size:15px}
.field textarea{padding:var(--s2) var(--s3);min-height:140px;resize:vertical;line-height:24px}
.field input:focus,.field textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
.field [aria-invalid="true"]{border-color:var(--down)}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.actions{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.button{min-height:var(--control-h);padding:0 var(--s5);border:1px solid var(--brand);border-radius:var(--r2);background:var(--brand);color:var(--on-brand);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.button:hover{filter:brightness(1.08)}
.button[disabled]{opacity:.5;cursor:default}
.hint{font-size:13px;line-height:18px;color:var(--ink-3)}
.status{min-height:26px;font-size:15px;color:var(--ink)}
.status[data-state="error"]{color:var(--down)}

/* ── التذييل: سطرٌ واحدٌ فوقه خطّ حبر ── */
.foot{border-top:1px solid var(--ink);padding:var(--s4) 0 var(--s7);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:13px;line-height:18px;color:var(--ink-3)}
.foot a{color:var(--ink-2)}
.foot .ltr{direction:ltr;unicode-bidi:isolate}

/* صفحة 404 */
.lost{padding:var(--s8) 0;max-width:62ch}
.lost .mark{width:48px;height:48px;margin-bottom:var(--s5)}
.lost .mark polygon{fill:var(--ink)}
.lost p{margin-top:var(--s3)}

@media(max-width:900px){
  .opening>*{grid-column:1/-1}
  .module-head,.module-body{grid-column:1/-1}
}
@media(max-width:600px){
  .wrap{padding:0 var(--s4)}
  .opening{padding:var(--s7) 0 var(--s6)}
  .display{font-size:30px;line-height:38px}
  .lede{font-size:17px;line-height:28px}
  .module{padding-bottom:var(--s7)}
  .ledger>div,.layers li,.rules li{grid-template-columns:1fr;row-gap:var(--s1)}
  .ledger dt,.layers li::before,.rules li::before{line-height:20px}
  .form{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}