/* أميري — نسخُ بولاق، مُحمَّلٌ من عندنا لا من خادمٍ أجنبيّ: لا يُسرَّب عنوانُ زائرٍ لأحد. رخصة OFL في fonts/OFL.txt */
@font-face { font-family: Amiri; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/amiri-arabic-400-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FDFD; }
@font-face { font-family: Amiri; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/amiri-arabic-700-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FDFD; }
@font-face { font-family: Amiri; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/amiri-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Amiri; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/amiri-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ================================================================ نظامُ التصميم
   ثلاثُ طبقات: (١) قيمٌ خامٌ لا تُستعمل في المكوّنات مباشرة، (٢) رموزٌ دلاليّةٌ تُسمّي الوظيفة،
   (٣) المكوّناتُ تحت، ولا تعرف إلّا الطبقةَ الثانية. فمن أراد لونًا أو حجمًا جديدًا أضافه هنا لا هناك.
   المرجعُ المكتوب: 00_الفهرس-والخطة/نظام-التصميم.md */
:root {
  /* (١) الخام — الحبر والورق والشنجرف */
  --ink-950: #0E1116; --ink-900: #141821; --ink-850: #1C2029; --ink-800: #1E2433; --ink-750: #232833;
  --ink-700: #2A2F3A; --ink-650: #2C313C; --ink-600: #5B6272; --ink-500: #7A808C; --ink-450: #8B92A0;
  --ink-400: #9AA1AE; --ink-100: #E7E9EE;
  --paper-0: #FFFFFF; --paper-50: #FBFBF8; --paper-100: #F5F6F3; --paper-150: #F2F1EC;
  --paper-200: #E8E6DE; --paper-300: #D9DCD3;
  --cinnabar-700: #9B1C31; --cinnabar-300: #E0677A;
  --ochre-600: #8A5A12; --ochre-300: #E0A94F;   /* ٥٫٤:١ على الورق: الرتبةُ نصٌّ صغير */
  --olive-600: #5A6A2E; --olive-300: #A9BC72;
  --teal-600: #2F6F5E; --teal-300: #6FC0A8;
  --indigo-700: #2B3A67; --indigo-300: #8FA3E0;

  /* (٢) الدلاليّ — السطوح */
  --paper: var(--paper-100);      /* أرضُ الموقع */
  --surface: var(--paper-0);      /* ما يُرفع عن الأرض: حقل، جدول، بطاقة */
  --leaf: var(--paper-50);        /* ورقُ العيّنة، أدفأ من الأرض */
  --band: var(--ink-900);         /* شريطُ الحبر: الترويسة والذيل */
  /* الحبر */
  --ink: var(--ink-800);
  --muted: var(--ink-600);        /* ٦٫٢:١ على الأرض — أدنى ما يُكتب به نصّ */
  --on-band: var(--paper-150);
  --band-muted: var(--ink-400);   /* ٧٫١:١ على الشريط */
  /* الخطوط والحدود */
  --rule: var(--paper-300);
  --gutter: var(--paper-200);
  --band-rule: var(--ink-700);
  --field-edge: #858A94;          /* حدُّ الحقل: ٣٫٤:١ — يُعرف الحقلُ بإطاره */
  /* الفعل والتركيز */
  --action: var(--indigo-700); --action-ink: var(--paper-0); --focus: var(--indigo-700);
  /* الرتب — ولكلّ رتبةٍ اسمٌ مكتوبٌ معها، فلا يُعتمد على اللون وحدَه */
  --blocking: var(--cinnabar-700); --high: var(--ochre-600); --medium: var(--olive-600);
  --low: #5F6573; --strength: var(--teal-600);
  --rubric: var(--cinnabar-700);  /* حبرُ الطُّرّة */
  --mark: rgba(155, 28, 49, 0.09);
  --mark-strong: rgba(155, 28, 49, 0.16);
  --lift: 0 1px 0 var(--gutter), 0 40px 80px -48px rgba(10, 13, 18, 0.55);

  /* الخطّان: النسخُ للعناوين والشواهد، والحديثُ للجسم */
  --naskh: Amiri, "Noto Naskh Arabic", "Traditional Naskh", "Geeza Pro", "Traditional Arabic", serif;
  --sans: "Noto Sans Arabic", "SF Arabic", "Segoe UI", "Geeza Pro", Tahoma, sans-serif;

  /* السلّمُ الطباعيّ — ثماني درجاتٍ لا غير. والجسمُ ١٨ بكسلًا: الحرفُ العربيّ بنقاطه وحركاته
     يحتاج أكبرَ من اللاتينيّ. وأصغرُ ما يُكتب ١٤ بكسلًا، وللبيانات الهامشيّة وحدَها */
  --fs-xs: 0.875rem;   /* ١٤ — بياناتٌ هامشيّة: رقمُ صفحة، تاريخ */
  --fs-sm: 1rem;       /* ١٦ — نصٌّ ثانويّ: تعليل، حاشية، خانة */
  --fs-md: 1.125rem;   /* ١٨ — الجسم */
  --fs-lg: 1.3125rem;  /* ٢١ — مقدّمة، عنوانُ بند */
  --fs-xl: 1.625rem;   /* ٢٦ — عنوانٌ ثالث */
  --fs-2xl: 2.125rem;  /* ٣٤ — عنوانُ قسم */
  --fs-3xl: clamp(2.25rem, 4vw, 2.875rem);  /* ٣٦–٤٦ — عنوانُ صفحة */
  --fs-display: clamp(3.25rem, 8vw, 6.5rem); /* الشعار وحدَه */
  --lh-tight: 1.3; --lh-heading: 1.45; --lh-body: 1.8; --lh-naskh: 2.15;

  /* المسافات: سلّمٌ من أربعة بكسلات */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --measure: 34rem;
  --page: 64rem;
  --target: 44px;      /* أدنى ارتفاعٍ لما يُلمَس */
  --radius: 2px;
  --dur: 180ms; --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: var(--ink-900); --surface: var(--ink-850); --leaf: #1F242E; --band: var(--ink-950);
    --ink: var(--ink-100); --muted: var(--ink-400); --on-band: var(--ink-100); --band-muted: var(--ink-450);
    --rule: var(--ink-650); --gutter: var(--ink-650); --band-rule: var(--ink-750); --field-edge: #6B7280;
    --action: var(--indigo-300); --action-ink: var(--ink-900); --focus: var(--indigo-300);
    --blocking: var(--cinnabar-300); --high: var(--ochre-300); --medium: var(--olive-300);
    --low: var(--ink-400); --strength: var(--teal-300); --rubric: var(--cinnabar-300);
    --mark: rgba(224, 103, 122, 0.14); --mark-strong: rgba(224, 103, 122, 0.22);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--fs-md); line-height: var(--lh-body); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--naskh); font-weight: 700; margin: 0 0 var(--s-3); line-height: var(--lh-heading); color: var(--ink); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
::selection { background: var(--mark); }

/* الشريط */
.bar { display: flex; align-items: center; gap: 20px; padding: 18px 32px; background: var(--band);
  color: var(--on-band); border-bottom: 1px solid var(--band-rule); }
.brand { font-family: var(--naskh); font-size: var(--fs-2xl); font-weight: 700; color: var(--on-band); text-decoration: none;
  line-height: 1; padding-bottom: 6px; border-bottom: 2px solid var(--rubric); }
.bar .nav-link { color: var(--band-muted); }
.bar .nav-link:hover { color: var(--on-band); }
.bar .nav-link[aria-current="page"] { color: var(--on-band); box-shadow: inset 0 -2px 0 var(--rubric); }
.bar .lang select { background: transparent; color: var(--on-band); border-color: var(--band-muted); }
.bar .lang select option { color: var(--ink); background: var(--surface); }
.bar-note { margin: 0; color: var(--band-muted); font-size: var(--fs-sm); }

/* الرفع */
.view { padding: 32px 24px 64px; }
.upload { max-width: 640px; margin: 0 auto; display: grid; gap: 24px; }
.sheet { position: relative; display: grid; place-items: center; align-content: center; gap: 8px; min-height: 300px;
  background: var(--surface); border: 1px solid var(--rule); border-inline-start: 6px solid var(--blocking);
  padding: 32px; text-align: center; cursor: pointer; }
.sheet input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sheet:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.sheet.dragging { background: var(--mark); }
.sheet-title { font-family: var(--naskh); font-size: var(--fs-2xl); line-height: 1.3; }
.sheet-hint { color: var(--muted); }
.sheet.has-file .sheet-title { font-size: var(--fs-xl); }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
.field:first-child { grid-column: 1 / -1; }
.field input, .field select { background: var(--surface); border: 1px solid var(--field-edge); padding: 8px 10px; color: var(--ink); border-radius: 2px; }

.consents { border: 0; border-top: 1px solid var(--rule); padding: 16px 0 0; margin: 0; display: grid; gap: 14px; }
.consents legend { font-family: var(--naskh); font-size: var(--fs-md); font-weight: 700; padding: 0; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; color: var(--muted); font-size: var(--fs-sm); }
.consent strong { color: var(--ink); display: block; font-weight: 600; }
.consent input { margin-top: 6px; width: 18px; height: 18px; accent-color: var(--action); }
.consent-off { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

.primary, .secondary, .danger { border: 1px solid transparent; padding: 10px 22px; cursor: pointer; border-radius: 2px; font-weight: 600; }
.primary { background: var(--ink); color: var(--paper); justify-self: start; padding: 12px 26px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .primary { background: var(--ink); color: var(--paper); } }
.primary:disabled { opacity: 0.55; cursor: progress; }
.secondary { background: transparent; border-color: var(--field-edge); }
.danger { background: transparent; color: var(--blocking); border-color: currentColor; margin-top: 12px; }
.fine { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.form-error { margin: 0; color: var(--blocking); font-weight: 600; }

/* التقدّم */
.progress { max-width: 520px; margin: 0 auto; }
.stages { list-style: none; padding: 0; margin: 20px 0; counter-reset: stage; }
.stages li { counter-increment: stage; display: grid; grid-template-columns: 2.2em 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); color: var(--muted); }
.stages li::before { content: counter(stage); font-family: var(--naskh); text-align: center; }
html[lang="ar"] .stages li::before { content: counter(stage, arabic-indic); }
.stages li[data-state="running"] { color: var(--ink); font-weight: 600; }
.stages li[data-state="done"] { color: var(--ink); }
.stages .state { font-size: var(--fs-xs); }
.stages li[data-state="done"] .state { color: var(--strength); }

/* النتائج — انظر «عارض الطُّرّة» في آخر الورقة */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filter { border: 1px solid var(--field-edge); background: var(--surface); padding: 2px 10px; border-radius: 999px; cursor: pointer; font-size: var(--fs-xs); }
.filter[aria-pressed="true"] { border-color: var(--ink); font-weight: 600; }

.findings { list-style: none; margin: 0; padding: 0; }
.finding { border-bottom: 1px solid var(--rule); }
.finding button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 12px 10px 12px 4px; cursor: pointer;
  border-inline-start: 4px solid var(--sev, var(--low)); padding-inline-start: 12px; }
.finding button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.finding.active button { background: var(--surface); }
.finding-head { display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-xs); color: var(--muted); }
.finding-locus { display: block; font-size: var(--fs-xs); color: var(--muted); }
.fid { font-variant-numeric: tabular-nums; }
.finding-head .sev { color: var(--sev); font-weight: 700; }
.finding-claim { margin: 4px 0 0; }
.finding-detail { display: none; padding: 0 12px 14px; font-size: var(--fs-sm); color: var(--muted); border-inline-start: 4px solid var(--sev, var(--low)); }
.finding.active .finding-detail { display: block; }
.finding-detail p { margin: 6px 0; }
.finding-detail strong { color: var(--ink); font-weight: 600; }

.sev-blocking { --sev: var(--blocking); }
.sev-high { --sev: var(--high); }
.sev-medium { --sev: var(--medium); }
.sev-low { --sev: var(--low); }
.sev-strength { --sev: var(--strength); }

/* المخطوط: نصٌّ بالنسخ، وعلاماتُ الرتبة في الهامش */
.manuscript { max-width: 46rem; margin: 0 auto; padding-inline-end: 3.2em; font-family: var(--naskh); font-size: var(--fs-md); line-height: 2.05; }
.para { position: relative; margin: 0 0 0.9em; padding-inline-start: 18px; border-inline-start: 3px solid transparent; }
.para.marked { border-inline-start-color: var(--sev); }
.para.focus { background: var(--mark); }
.para .page { position: absolute; inset-inline-end: -3.2em; top: 0.2em; font-family: var(--sans); font-size: var(--fs-xs); color: var(--muted); }
.para.heading { font-weight: 700; font-size: var(--fs-lg); margin-top: 1.4em; }
.para.bibliography { font-size: var(--fs-sm); color: var(--muted); }
.para mark { background: var(--mark); color: inherit; box-shadow: inset 0 -2px 0 var(--sev); }
.para .glosses { display: inline-flex; gap: 4px; margin-inline-start: 6px; vertical-align: super; }
.gloss { all: unset; cursor: pointer; font-family: var(--sans); font-size: var(--fs-xs); color: var(--sev); font-weight: 700; }
.gloss:focus-visible { outline: 2px solid var(--focus); }
.notes { margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--muted); line-height: 1.8; }
.notes li::before { content: attr(data-n) " — "; }

/* التشخيص */
.band { margin: 8px 0 0; font-family: var(--naskh); font-size: var(--fs-md); }
.gate { margin: 12px 0 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--blocking); color: var(--ink); font-size: var(--fs-sm); }
.axes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.axis { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: var(--fs-xs); }
.axis .meter { grid-column: 1 / -1; height: 5px; background: var(--rule); }
.axis .meter span { display: block; height: 100%; background: var(--ink); }

.persona { margin-bottom: 16px; }
.persona h3 { margin: 0 0 4px; font-size: var(--fs-sm); }
.persona ol { margin: 0; padding-inline-start: 1.3em; font-size: var(--fs-sm); }
.persona li { margin-bottom: 6px; }
.persona .ref { color: var(--muted); font-size: var(--fs-xs); }

.downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.downloads a { color: var(--action); font-weight: 600; }

@media (max-width: 560px) {
  .bar { flex-direction: column; gap: 0; padding: 10px 16px; }
  .view { padding: 20px 16px 48px; }
  .fields { grid-template-columns: 1fr; }
  .sheet { min-height: 220px; }
  .sheet-title { font-size: var(--fs-xl); }
}

@media (prefers-reduced-motion: no-preference) {
  .para.focus { transition: background-color 0.4s ease; }
}

/* اللغة */
.lang { margin-inline-start: auto; }
.lang select { background: var(--surface); border: 1px solid var(--field-edge); padding: 2px 6px; border-radius: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.content-note { margin: 0 0 10px; }
.consent strong + span { display: block; }
html[dir="ltr"] .manuscript, html[dir="ltr"] .brand { font-family: var(--naskh); }

/* ---------------------------------------------------------------- التنقّل */
.nav { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; margin-inline-start: auto; }
.nav-link { color: var(--ink); text-decoration: none; font-size: var(--fs-sm); }
.nav-link[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -2px 0 var(--ink); }
.nav-button { background: none; border: 0; padding: 0; cursor: pointer; }
.nav + .lang { margin-inline-start: 18px; }
.bar-note + .nav { margin-inline-start: auto; }
.text-link { background: none; border: 0; padding: 0; color: var(--action); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
a.primary { display: inline-flex; text-decoration: none; }

/* ---------------------------------------------------------------- الصفحة الرئيسة
   الفكرةُ الحاكمة: الصفحةُ نفسُها ورقةٌ ذاتُ طُرَّة. المتنُ في الجدول، والحكمُ في الهامش
   معقودًا عليه برقم، ولا حكمَ إلّا ومعه شاهدُه. */
.home { max-width: 62rem; margin: 0 auto; padding: 0 24px 0; }

/* الفاتحة: شريطُ حبرٍ تُوضَع عليه الورقة — كصفحةِ عنوانٍ لطبعةٍ محقَّقة، لا كبطاقةِ منتَج */
.masthead { background: var(--band); color: var(--on-band); padding: 76px 24px 168px; }
.masthead-in { max-width: 46rem; margin: 0 auto; }
/* شعارٌ من كلمتين يحتمل مقاسَ العرض؛ ولو طال لاختنق */
.masthead h1 { font-size: var(--fs-display); line-height: 1.18; letter-spacing: -0.015em;
  color: var(--on-band); margin: 0 0 22px; }
html[dir="ltr"] .masthead h1 { line-height: 1.08; }
.masthead .lead { font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--band-muted); max-width: 40em; margin: 0 0 30px; }
.masthead .fine { color: var(--band-muted); }
.masthead .text-link { color: var(--on-band); }
.masthead .primary { background: var(--on-band); color: var(--band); }

/* العهدُ قبل الدعوى: أوّلُ ما يسأل عنه الباحثُ مصيرُ نصّه، لا ما نحسنه */
.pledge { margin: 0 0 22px; font-size: var(--fs-xs); letter-spacing: 0.01em; color: var(--band-muted);
  border-inline-start: 2px solid var(--rubric); padding-inline-start: 12px; }

/* الورقةُ ترتفع إلى الشريط: ورقةٌ وُضعت على المكتب، وهي وحدَها الجرأةُ في الصفحة */
.hero { max-width: 62rem; margin: 0 auto; padding: 0 0 56px; }
.folio-sheet { display: grid; grid-template-columns: minmax(0, 1fr) 15rem;
  background: var(--leaf); border: 1px solid var(--gutter);
  box-shadow: var(--lift); }
.folio-body { padding: 52px 44px 46px; border-inline-end: 1px solid var(--gutter); position: relative; }
/* جدولُ الصفحة: خيطٌ يحصر المتن كما يُحصَر في المخطوط */
.folio-body::before { content: ""; position: absolute; inset: 22px 22px 22px 22px;
  border: 1px solid var(--gutter); pointer-events: none; }
.folio-page { position: absolute; top: 26px; inset-inline-start: 44px;
  font-family: var(--sans); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.06em; }
.folio-text { margin: 0; font-family: var(--naskh); font-size: var(--fs-lg); line-height: 2.25; text-align: justify;
  hyphens: none; position: relative; }
.folio-text mark { background: none; color: inherit; box-shadow: inset 0 -0.42em 0 var(--mark-strong); }
.key { font-family: var(--sans); font-size: 0.6em; font-weight: 700; color: var(--rubric);
  vertical-align: super; margin-inline-start: 2px; }
.folio-margin { padding: 52px 24px 46px; display: grid; align-content: start; gap: 6px; }
.folio-note { margin: 0; display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.75; }
.folio-note b { font-family: var(--sans); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em;
  color: var(--rubric); display: block; }
.folio-note cite { font-style: normal; font-family: var(--naskh); color: var(--muted); font-size: var(--fs-sm); }
.folio-note cite::before { content: ""; display: block; width: 24px; height: 1px;
  background: var(--gutter); margin: 10px 0 8px; }
.folio figcaption { margin-top: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .folio-margin > * { animation: gloss 520ms 320ms both ease-out; }
  @keyframes gloss { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* سُلَّمُ الرتب: اللونُ في الطُّرَّة يحمل معنًى، فيُفكّ للزائر */
.ranks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ranks li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.ranks li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sev, var(--low)); }


/* شريطُ ما ننفرد به */
.claims { padding: 0 0 8px; }
.claims { padding-top: 56px; }
.claim { position: relative; padding: 24px 0 26px; border-top: 1px solid var(--rule); }
.claim::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 26px; height: 2px; background: var(--rubric); }
.claim dt { font-family: var(--naskh); font-size: var(--fs-lg); font-weight: 700; margin-bottom: 6px; line-height: 1.5; }
.claim dd { margin: 0; color: var(--muted); font-size: var(--fs-sm); max-width: 34em; }

/* الأقسام */
.home-section { padding: 68px 0; border-top: 1px solid var(--rule); }
.home-section > h2 { font-size: var(--fs-2xl); margin-bottom: 10px; }
.section-lead { margin: 0 0 28px; color: var(--muted); max-width: 42em; }
.works { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.works > div { border-top: 2px solid var(--ink); padding-top: 14px; }
.works dt { font-family: var(--naskh); font-size: var(--fs-lg); font-weight: 700; margin-bottom: 8px; }
.works dd { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.home-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; }
.plain-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.plain-list li { padding-inline-start: 18px; position: relative; }
.plain-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em;
  width: 7px; height: 1px; background: var(--rubric); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 1.8em 1fr; gap: 10px; }
.steps li::before { content: counter(step); font-family: var(--naskh); font-size: var(--fs-xl); line-height: 1.1;
  color: var(--rubric); font-weight: 700; }
html[lang="ar"] .steps li::before { content: counter(step, arabic-indic); }

/* الأسعار */
.tariff { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tariff caption { text-align: start; color: var(--muted); font-size: var(--fs-sm); padding-bottom: 12px; }
.tariff th, .tariff td { text-align: start; padding: 14px 8px; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.tariff thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding-bottom: 8px; }
.tariff tbody th { font-family: var(--naskh); font-size: var(--fs-md); font-weight: 700; }
.tariff .num { text-align: end; font-family: var(--naskh); font-size: var(--fs-xl); font-weight: 700; white-space: nowrap; }
.tariff .limit { color: var(--muted); font-size: var(--fs-sm); }
.tariff tr.free .num { color: var(--strength); }

.home-section > p { max-width: 46em; }
.promises { border-bottom: 0; padding-bottom: 8px; }
.promises .plain-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 56px; }
@media (max-width: 720px) { .promises .plain-list { grid-template-columns: 1fr; } }
.scope-note { margin-top: 24px; padding-inline-start: 14px; border-inline-start: 2px solid var(--rubric); }

/* ---------------------------------------------------------------- صفحاتُ النصّ: الأسعار والخصوصيّة */
.doc { max-width: 58rem; margin: 0 auto; padding: 56px 24px 24px; }
.doc h1 { font-size: var(--fs-3xl); border-top: 2px solid var(--rubric); padding-top: 20px; margin-bottom: 14px; }
.doc-lead { font-size: var(--fs-md); line-height: 1.85; color: var(--muted); max-width: 40em; margin: 0 0 8px; }
.doc-section { padding: 44px 0; border-top: 1px solid var(--rule); }
.doc-section > h2 { font-size: var(--fs-xl); margin-bottom: 10px; }
.doc-section > p { max-width: 44em; margin: 0 0 18px; }
.doc-section > p:last-child { margin-bottom: 0; }
.doc .tariff { margin-top: 18px; }
.doc-section .plain-list { margin: 0 0 20px; }
.qa { margin: 0; display: grid; gap: 0; }
.qa > div { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.qa > div:last-child { border-bottom: 0; }
.qa dt { font-family: var(--naskh); font-size: var(--fs-lg); font-weight: 700; margin-bottom: 5px; }
.qa dd { margin: 0; color: var(--muted); max-width: 46em; }

/* الذيل */
.foot { background: var(--band); color: var(--on-band); margin-top: 64px; }
.foot-in { max-width: 62rem; margin: 0 auto; padding: 44px 24px 56px;
  display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: baseline; }
.foot .brand { font-size: var(--fs-xl); color: var(--on-band); border-bottom-color: var(--rubric); }
.foot p { margin: 0; color: var(--band-muted); font-size: var(--fs-xs); }
.foot-nav a { color: var(--band-muted); border-bottom-color: var(--band-rule); }
.foot-nav a:hover { color: var(--on-band); border-bottom-color: var(--rubric); }
.foot .foot-langs { margin-inline-start: auto; }
.foot-nav { display: flex; gap: 20px; }
.foot-nav a { font-size: var(--fs-sm); text-decoration: none; border-bottom: 1px solid var(--band-rule); padding-bottom: 2px; }

/* ---------------------------------------------------------------- الدخول والحساب والإدارة */
.narrow { max-width: 440px; margin: 0 auto; padding: 48px 24px 72px; }
.narrow.wide { max-width: 900px; }
.narrow h1 { font-size: var(--fs-2xl); }
/* صفحةُ الدخول: ورقةٌ صغيرةٌ بخيطٍ أحمرَ في رأسها، على نمط الفاتحة */
.page-login .narrow { max-width: 27rem; padding-top: 64px; }
.page-login h1 { border-top: 2px solid var(--rubric); padding-top: 18px; margin-bottom: 22px; }
.page-login .field input { background: var(--surface); }
.page-login .stack { margin-top: 18px; }
.page-login .stack .primary { justify-self: stretch; text-align: center; }
.narrow .block h2 { font-size: var(--fs-xl); }
.stack { display: grid; gap: 16px; margin: 20px 0; }
.stack .primary, .stack .secondary { justify-self: start; }
.field small { color: var(--muted); }
.block { padding: 28px 0; border-top: 1px solid var(--rule); }
.block:first-of-type { margin-top: 20px; }

.worktype { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; grid-column: 1 / -1; }
.worktype legend { padding: 0; margin-bottom: 4px; color: var(--muted); font-size: var(--fs-sm); width: 100%; }
.worktype label { display: inline-flex; gap: 6px; align-items: center; color: var(--ink); cursor: pointer; }
.worktype input { accent-color: var(--action); }

.reviews { list-style: none; margin: 12px 0 0; padding: 0; }
.review { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.review-title { font-weight: 600; }
.review .fine { grid-column: 1; }
.review .text-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin: 24px 0; }
.stats div { border-inline-start: 3px solid var(--rule); padding-inline-start: 12px; }
.stats dt { color: var(--muted); font-size: var(--fs-xs); }
.stats dd { margin: 0; font-family: var(--naskh); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.3; }
.stats .stat-wide { grid-column: 1 / -1; }
.stats .stat-wide dd { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 400; }
.caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cap { display: flex; justify-content: space-between; border-bottom: 1px solid var(--rule); padding: 6px 0; }
.cap.on .cap-state { color: var(--strength); font-weight: 600; }
.cap.off .cap-state { color: var(--muted); }
.switch { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin: 14px 0 6px; }
.switch .secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.narrow .block h3 { font-size: var(--fs-md); margin: 28px 0 6px; }
.narrow .tariff { margin-top: 12px; }
/* أبوابُ اللوحة: خيطٌ واحدٌ تحتها، والبابُ الحاضر يقطعه — لا بطاقاتٌ ولا ظلال */
.tabs-bar { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 22px 0 6px;
  border-bottom: 1px solid var(--rule); }
.tab-link { color: var(--muted); text-decoration: none; font-size: var(--fs-sm); padding: 8px 0 10px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-link:hover { color: var(--ink); }
.tab-link[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--rubric); }
.tab-panel > h2:first-child { margin-top: 24px; }
.tab-panel > h2 { margin-top: 34px; }
.form-error.ok { color: var(--strength); }
.row-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.row-actions .text-link { font-size: var(--fs-xs); }
.switch input[type="search"] { background: var(--surface); border: 1px solid var(--field-edge);
  padding: 7px 10px; border-radius: 2px; min-width: 15rem; }
.table-wrap { overflow-x: auto; }
.users { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.users th, .users td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.users th { color: var(--muted); font-weight: 600; }
.users .num { font-variant-numeric: tabular-nums; }
.state-off { color: var(--blocking); }

@media (max-width: 980px) {
  .masthead { padding: 52px 20px 132px; }
  .hero { padding: 0 0 44px; }
  .home-two { grid-template-columns: 1fr; gap: 36px; }
  .works { grid-template-columns: 1fr; gap: 24px; }
  .home { padding: 0 16px; }
  .foot-in { padding: 28px 16px 48px; }
}
@media (max-width: 620px) {
  .masthead { padding: 40px 16px 112px; }
  .folio-body { padding: 34px 22px 28px; }
  .folio-body::before { inset: 12px; }
  .folio-page { inset-inline-start: 22px; top: 16px; }
  .folio-margin { padding: 22px 22px 26px; }
  .doc { padding: 36px 16px 16px; }
  .doc-section { padding: 32px 0; }
  .folio-sheet { grid-template-columns: 1fr; }
  .folio-body { border-inline-end: 0; border-bottom: 1px solid var(--gutter); padding: 30px 20px 22px; }
  .folio-margin { padding: 18px 20px 22px; }
  .folio-text { font-size: var(--fs-md); text-align: start; }
  .home-section { padding: 40px 0; }
  .tariff th, .tariff td { padding: 12px 4px; }
  .tariff .limit { display: block; }
  .foot .foot-langs { margin-inline-start: 0; }
}
@media (max-width: 560px) {
  .bar { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
  .nav { order: 3; width: 100%; margin-inline-start: 0; }
  .lang { margin-inline-start: auto; }
  .narrow { padding: 28px 16px 56px; }
}

/* المساندة */
.share { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); display: grid; gap: 10px; justify-items: start; }
.share h2 { margin: 0; }
.tickets { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.ticket { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.ticket p { grid-column: 1 / -1; margin: 0; }
.ticket-view { background: var(--surface); border: 1px solid var(--rule); padding: 12px; max-height: 340px; overflow: auto; font-size: var(--fs-xs); direction: ltr; text-align: left; }

.consent.choice { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; grid-template-columns: 1fr; }
.consent.choice legend { padding: 0; color: var(--muted); font-size: var(--fs-sm); }
.consent.choice legend strong { color: var(--ink); display: block; font-weight: 600; }
.consent.choice label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.consent.choice input { width: 18px; height: 18px; accent-color: var(--action); }

.google { display: inline-flex; gap: 8px; align-items: center; }
.or { color: var(--muted); font-size: var(--fs-sm); margin: 14px 0 0; }

/* ================================================================ المكوّنات الأساسيّة
   ما يُلمَس لا يقلّ عن ٤٤ بكسلًا، ولكلّ فعلٍ حالاتُه: مرور، ضغط، تعطيل، تركيز. */
.primary, .secondary, .danger { min-height: var(--target); display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2); padding: 0 var(--s-5); font-size: var(--fs-sm); line-height: 1.2; border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.primary { padding: 0 var(--s-6); }
.primary:hover:not(:disabled) { background: var(--action); color: var(--action-ink); }
.masthead .primary:hover { background: var(--paper-0); color: var(--band); box-shadow: inset 0 -3px 0 var(--rubric); }
.primary:active:not(:disabled) { transform: translateY(1px); }
.secondary:hover:not(:disabled) { border-color: var(--ink); }
.danger:hover { background: var(--blocking); color: var(--paper-0); border-color: var(--blocking); }
.text-link { min-height: var(--target); display: inline-flex; align-items: center; }
.text-link:hover { text-decoration-thickness: 2px; }
.nav-link { min-height: var(--target); display: inline-flex; align-items: center; font-size: var(--fs-sm); }
.lang select { min-height: 36px; padding: 0 var(--s-2); font-size: var(--fs-sm); }
.field { font-size: var(--fs-sm); gap: var(--s-1); }
.field input, .field select { min-height: var(--target); padding: 0 var(--s-3); font-size: var(--fs-md);
  transition: border-color var(--dur) var(--ease); }
.field input:hover, .field select:hover { border-color: var(--muted); }
.field input:focus-visible, .field select:focus-visible { border-color: var(--focus); outline-offset: 0; }
.fine { font-size: var(--fs-sm); line-height: 1.7; }
.foot-nav a { min-height: var(--target); display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ================================================================ الفاتحة (المرحلة ٢)
   الورقةُ على شريط الحبر في أوّل شاشة: يرى الزائرُ المنتَجَ نفسَه قبل أن يقرأ وصفَه. */
.masthead { padding: var(--s-8) var(--s-5); }
.masthead-in { max-width: 76rem; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--s-7) var(--s-8); align-items: center; }
.masthead h1 { font-size: clamp(3.25rem, 6.4vw, 6rem); }
.masthead .lead { max-width: 30em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin: 0 0 var(--s-3); }
.masthead .folio { margin: 0; font-family: var(--sans); font-size: var(--fs-md); font-weight: 400; line-height: var(--lh-body); }
.masthead .folio-sheet { grid-template-columns: minmax(0, 1fr) 13rem; color: var(--ink); }
.masthead .folio-body { padding: var(--s-7) var(--s-6) var(--s-6); }
.masthead .folio-text { font-size: var(--fs-lg); line-height: var(--lh-naskh); }
.masthead .folio-margin { padding: var(--s-7) var(--s-5) var(--s-6); }
.masthead .folio figcaption { color: var(--band-muted); }
.masthead .ranks li { color: var(--band-muted); }

/* ما ننفرد به: اثنان في الصدر بحجمٍ أكبر، وأربعةٌ تحتهما */
.claims { padding-top: var(--s-8); }
.claims .claims-lead, .claims .claims-rest { display: grid; margin: 0; }
.claims-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); }
.claims-lead .claim { padding: var(--s-6) 0 var(--s-7); }
.claims-lead .claim dt { font-size: var(--fs-2xl); line-height: var(--lh-heading); margin-bottom: var(--s-3); }
.claims-lead .claim dd { font-size: var(--fs-md); color: var(--ink); max-width: 30em; }
.claims-rest { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--s-6); }
.claims-rest .claim dt { font-size: var(--fs-lg); }
.claims-rest .claim dd { font-size: var(--fs-sm); }

@media (max-width: 980px) {
  .masthead-in { grid-template-columns: 1fr; }
  .claims-lead { grid-template-columns: 1fr; }
  .claims-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .masthead { padding: var(--s-6) var(--s-4) var(--s-7); }
  .masthead .folio-sheet { grid-template-columns: 1fr; }
  .claims-rest { grid-template-columns: 1fr; }
  .claims-lead .claim dt { font-size: var(--fs-xl); }
}

/* التركيزُ على شريط الحبر: لونُ الفعل لا يُرى عليه (١٫٦:١)، فيُكتب بلون الورق */
.bar, .masthead, .foot { --focus: var(--on-band); }

/* ================================================================ عارضُ الطُّرّة (المرحلة ٢)
   المتنُ في جدوله، والملاحظةُ في هامشه بجانب فقرتها معقودةً برقم؛ وبجانبهما فهرسُ الملاحظات والتشخيص. */
.view-result { padding: 0; }
.result-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-7);
  padding: var(--s-6) var(--s-6) var(--s-5); border-bottom: 1px solid var(--rule); background: var(--surface); }
.result-title { font-size: var(--fs-2xl); margin: 0 0 var(--s-1); }
.result-head .band { margin: 0; font-family: var(--naskh); font-size: var(--fs-lg); color: var(--ink); }
.result-head .gate { margin: var(--s-3) 0 0; max-width: 46em; font-size: var(--fs-sm); }
.score { margin: 0; font-family: var(--naskh); font-weight: 700; font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; color: var(--ink); }
.score small { font-size: var(--fs-xl); color: var(--muted); font-weight: 400; }

.key-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; padding: 0 0.3em;
  font-family: var(--naskh); font-weight: 700; font-size: var(--fs-sm); line-height: 1; color: var(--paper-0); background: var(--rubric);
  border-radius: 999px; margin-inline-end: var(--s-1); font-variant-numeric: tabular-nums; }
.persona .ref { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); margin-inline-start: var(--s-1); }
.persona .ref .key-badge { font-size: var(--fs-xs); }

.tabs { display: flex; gap: var(--s-5); padding: 0 var(--s-5); border-bottom: 1px solid var(--rule); background: var(--paper); }
.tab { background: none; border: 0; padding: 0; min-height: var(--target); cursor: pointer; color: var(--muted);
  font-size: var(--fs-sm); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--rubric); }
.pane { padding: var(--s-5); }
.pane:not(.shown) { display: none; }

/* المخطوط */
.manuscript { max-width: none; margin: 0; padding: 0; font-family: var(--naskh); font-size: var(--fs-lg); line-height: var(--lh-naskh); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; gap: 0 var(--s-6); }
.row .para { margin: 0; padding: 0 0 var(--s-4); padding-inline-start: var(--s-4); position: relative; }
.row .margin { display: grid; align-content: start; gap: var(--s-2); padding-top: 0.35em; border-inline-start: 1px solid var(--gutter);
  padding-inline-start: var(--s-4); font-family: var(--sans); }
.para .page { position: static; display: block; font-family: var(--sans); font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--s-1); }
.para.heading { font-size: var(--fs-xl); margin-top: var(--s-5); }
.para.bibliography { font-size: var(--fs-md); }
.para .glosses { gap: 2px; margin-inline-start: 2px; vertical-align: super; line-height: 1; }
.gloss { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px; font-family: var(--naskh); font-size: var(--fs-sm);
  font-weight: 700; color: var(--rubric); }
.gloss:hover { background: var(--mark); }
.gloss:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.margin-note { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; width: 100%;
  padding: var(--s-2) var(--s-3); border-inline-start: 3px solid var(--sev, var(--low)); background: var(--surface);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--ink); transition: background-color var(--dur) var(--ease); }
.margin-note:hover { background: var(--mark); }
.margin-note:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.margin-note.active { background: var(--mark); box-shadow: inset 0 0 0 1px var(--sev, var(--low)); }
.margin-head { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); }
.margin-head .sev { color: var(--sev); font-weight: 700; }
.margin-head .key-badge { font-size: var(--fs-xs); }
.margin-claim { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* فهرسُ الملاحظات */
.finding-head { align-items: center; font-size: var(--fs-xs); }
.finding-claim { font-size: var(--fs-sm); }

/* الحاسوب: المخطوطُ دائمًا، والجانبُ يتبدّل بين الفهرس والتشخيص ويلازم الشاشة */
@media (min-width: 1101px) {
  .view-result { display: grid; grid-template-columns: minmax(0, 1fr) 25rem;
    grid-template-areas: "head head" "doc tabs" "doc side"; grid-template-rows: auto auto 1fr; align-items: start; }
  .result-head { grid-area: head; }
  .panes { display: contents; }
  .pane-manuscript { grid-area: doc; grid-row: 2 / span 2; display: block !important; padding: var(--s-6) var(--s-6) var(--s-8); }
  .tabs { grid-area: tabs; position: sticky; top: 0; z-index: 2; border-inline-start: 1px solid var(--rule); }
  .tab[data-pane="manuscript"] { display: none; }
  .pane-findings, .pane-diagnosis { grid-area: side; position: sticky; top: var(--target); max-height: calc(100vh - var(--target));
    overflow-y: auto; border-inline-start: 1px solid var(--rule); }
  .pane-diagnosis.shown { display: grid; align-content: start; gap: var(--s-6); }
}
@media (max-width: 1100px) {
  .tabs { position: sticky; top: 0; z-index: 2; }
  .tab { flex: 1; }
  .row { grid-template-columns: 1fr; }
  .row .margin { border-inline-start: 0; padding: 0 0 var(--s-4); }
  .row .margin:empty { display: none; }
  .pane-diagnosis.shown { display: grid; gap: var(--s-6); }
}
@media (max-width: 620px) {
  .result-head { padding: var(--s-5) var(--s-4); }
  .pane { padding: var(--s-4); }
  .manuscript { font-size: var(--fs-md); }
}

/* الاسمُ في التركيّة والإنجليزيّة: Nakd وNaqd، ومعه شرحُه بلغة الزائر ليُفهم أنّه «نقد» */
.brand { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.brand-gloss { font-family: var(--sans); font-size: var(--fs-xs); font-weight: 400; color: var(--band-muted);
  letter-spacing: 0.02em; white-space: nowrap; }
.brand-gloss:empty { display: none; }
.brand, .foot .brand { border-bottom: 0; padding-bottom: 0; }
.brand-name { padding-bottom: 6px; border-bottom: 2px solid var(--rubric); }

/* ================================================================ الصفحاتُ الشارحة: نماذج · المنهج · الحقول */
/* النموذج: شاهدٌ من المتن وملاحظتُه في هامشه، على هيئة الطُّرّة نفسِها */
.specs { display: grid; gap: var(--s-5); margin-top: var(--s-5); counter-reset: spec; }
.spec { counter-increment: spec; margin: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--leaf); border: 1px solid var(--gutter); }
.spec-text { margin: 0; padding: var(--s-5) var(--s-6); border-inline-end: 1px solid var(--gutter);
  font-family: var(--naskh); font-size: var(--fs-lg); line-height: var(--lh-naskh); color: var(--ink); }
.spec-text p { margin: 0; }
.spec-text mark { background: none; color: inherit; box-shadow: inset 0 -0.42em 0 var(--mark-strong); }
.spec-note { padding: var(--s-5); border-inline-start: 3px solid var(--sev, var(--low)); display: grid; gap: var(--s-2); align-content: start; }
.spec-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-size: var(--fs-xs); }
.spec-head .sev { color: var(--sev); font-weight: 700; }
.spec-kind { color: var(--muted); }
.spec .key-badge::before { content: counter(spec); }
html[lang="ar"] .spec .key-badge::before { content: counter(spec, arabic-indic); }
.spec-claim { margin: 0; font-size: var(--fs-md); line-height: 1.7; color: var(--ink); }
.spec-line { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.spec-line b { color: var(--ink); font-weight: 600; }
.spec-line b::after { content: ":"; }

.index-demo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-7); align-items: start;
  margin-top: var(--s-5); padding: var(--s-6); background: var(--surface); border: 1px solid var(--rule); }
.index-demo .band { margin: 0; align-self: center; font-family: var(--naskh); font-size: var(--fs-lg); }
.index-demo .axes { grid-column: 1 / -1; margin: var(--s-3) 0 0; }
.axis .meter span { background: var(--ink); }

/* المراحل: تسلسلٌ حقيقيّ، فالترقيمُ معلومة */
.stage-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; counter-reset: stage; display: grid; gap: 0; }
.stage-list li { counter-increment: stage; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 var(--s-4);
  padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
.stage-list li::before { content: counter(stage); grid-row: 1 / span 2; font-family: var(--naskh); font-size: var(--fs-2xl);
  line-height: 1; font-weight: 700; color: var(--rubric); }
html[lang="ar"] .stage-list li::before { content: counter(stage, arabic-indic); }
.stage-list h3 { margin: 0 0 var(--s-1); font-size: var(--fs-lg); }
.stage-list p { margin: 0; color: var(--muted); max-width: 40em; }
.rank-list dt { color: var(--sev); }
.rank-list > div { border-inline-start: 3px solid var(--sev); padding-inline-start: var(--s-4); }

.field-grid { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 var(--s-6); }
.field-grid li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.count { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.page-cta { margin: var(--s-7) 0 0; padding-top: var(--s-6); border-top: 2px solid var(--rubric); }
.doc .works { margin-top: var(--s-4); }

@media (max-width: 760px) {
  .spec { grid-template-columns: 1fr; }
  .spec-text { border-inline-end: 0; border-bottom: 1px solid var(--gutter); padding: var(--s-4); }
  .spec-note { padding: var(--s-4); }
  .index-demo { grid-template-columns: 1fr; padding: var(--s-4); }
}

/* ================================================================ لوحةُ الإدارة (المرحلة ٣)
   تُقرأ من أعلى: ما يحتاج انتباهًا، ثمّ الأرقامُ الحاكمة، ثمّ اتّجاهُ ثلاثين يومًا. */
.page-admin .narrow.wide { max-width: 72rem; }
.attention h2 { font-size: var(--fs-lg); margin-top: var(--s-5); }
.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.alert { padding: var(--s-3) var(--s-4); background: var(--surface); border-inline-start: 3px solid var(--low); font-size: var(--fs-sm); }
.alert-bad { border-color: var(--blocking); }
.alert-warn { border-color: var(--high); }
.alert-info { border-color: var(--action); }
.alert-calm { border-color: var(--strength); color: var(--muted); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0; margin: var(--s-6) 0;
  border-top: 2px solid var(--ink); }
.kpi { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.kpi + .kpi { padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--rule); }
.kpi dt { font-size: var(--fs-xs); color: var(--muted); }
.kpi-value { margin: var(--s-1) 0 0; font-family: var(--naskh); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.kpi-sub { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.kpi-warn .kpi-value { color: var(--high); }
.kpi-bad .kpi-value { color: var(--blocking); }

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--s-5); margin-bottom: var(--s-6); }
.chart { margin: 0; padding: var(--s-4); background: var(--surface); border: 1px solid var(--rule); display: grid; gap: var(--s-2); }
.chart figcaption { order: -1; font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .bar { fill: var(--ink); }
.chart .bar:hover { fill: var(--action); }
.chart .bar-over { fill: var(--blocking); pointer-events: none; }
.chart .grid { stroke: var(--rule); stroke-dasharray: 3 4; }
.chart .axis-line { stroke: var(--field-edge); }
.chart .tick { fill: var(--muted); font-size: 20px; font-family: var(--sans); }  /* بوحدات الرسم: يُصغَّر مع عرضه إلى نحو ١٣ بكسلًا */

/* الشراءُ من جدول الأسعار، والدفعُ */
.buy-cell { text-align: end; white-space: nowrap; }
.page-checkout .consent { margin: var(--s-4) 0; }