/* ============================================================
   certificate.css — ورقة الشهادة وصفحة التحقق (§8 و§17)
   ------------------------------------------------------------
   قواعد ملزمة:

   ١) **لا قيمة لون ولا حجم خط واحدة مكتوبة هنا** (§17.9): كل شيء عبر
      متغيّرات tokens.css ومتغيّرات الهوية المحقونة وقت التشغيل. ولون
      لون المستوى وحده يأتي من بيانات الشهادة نفسها في سمة style عند
      العرض، لأنه لقطة محفوظة في الصف لا قيمة تصميم.

   ٢) **الخصائص المنطقية إلزامية** (§17.10): border-inline-start لا
      border-right، وtext-align:start لا right. الاستثناء الوحيد الأرقام
      والمعرّفات اللاتينية (الرقم التسلسلي ورمز التحقق) بـ direction:ltr.

   ٣) هذا الملف يخدم **الورقة المطبوعة وصفحتها في المتصفح معاً**. محرّك
      PDF لا يفكّ var() ولا يفهم الخصائص المنطقية، فتُحلّ المتغيّرات
      وتُشتق المقابلات الفيزيائية للاتجاه RTL عند التصيير في CertificatePdf —
      والملف يبقى منطقياً بلا قيمة واحدة مكتوبة.
   ============================================================ */

/* ثوابت تخطيط الورقة — لا تُعرَض في إعدادات الهوية (§17.8)، وتُعرَّف
   متغيّراتٍ هنا لا قيماً متناثرة كما في app.css */
:root{
  --certificate-logo-h:56px;
  --certificate-max:1000px;
  --qr-size:96px;
}

/* ── الورقة ───────────────────────────────────────────────── */
.certificate-sheet{
  background:var(--header-bg);
  color:var(--color-text);
  font-family:var(--font-ar);
  line-height:var(--line-height);
  padding:var(--space-8);
  border:var(--space-1) solid var(--brand-600);
  border-radius:var(--radius-lg);
  text-align:center;
}

.certificate-head{
  border-block-end:1px solid var(--table-border);
  padding-block-end:var(--space-4);
  margin-block-end:var(--space-6);
}

.certificate-logo{
  max-height:var(--certificate-logo-h);
  max-width:100%;
}

.certificate-org{
  color:var(--site-name);
  font-size:var(--fs-h2);
  margin-block-start:var(--space-2);
  margin-block-end:0;
}

.certificate-system{
  color:var(--gray-500);
  font-size:var(--fs-quote);
  margin:0;
}

.certificate-title{
  color:var(--brand-600);
  font-size:var(--fs-h1);
  margin-block-start:0;
  margin-block-end:var(--space-4);
}

.certificate-lead{
  color:var(--color-subheading);
  font-size:var(--fs-body);
  margin-block-start:0;
  margin-block-end:var(--space-2);
}

.certificate-holder{
  color:var(--color-heading);
  font-size:var(--fs-h1);
  margin-block-start:0;
  margin-block-end:var(--space-4);
}

.certificate-program{
  color:var(--color-heading);
  font-size:var(--fs-h2);
  margin-block-start:0;
  margin-block-end:var(--space-2);
}

.certificate-meta{
  color:var(--color-text);
  font-size:var(--fs-body);
  margin-block-start:var(--space-2);
  margin-block-end:var(--space-2);
}

.certificate-level{
  display:inline-block;
  border-inline-start:var(--space-1) solid var(--brand-600);
  padding-inline-start:var(--space-3);
  color:var(--color-heading);
  font-size:var(--fs-h2);
}

.certificate-foot{
  border-block-start:1px solid var(--table-border);
  margin-block-start:var(--space-6);
  padding-block-start:var(--space-4);
  color:var(--gray-600);
  font-size:var(--fs-quote);
}

.certificate-qr{
  width:var(--qr-size);
  height:var(--qr-size);
}

.certificate-note{
  color:var(--gray-500);
  font-size:var(--fs-quote);
  margin-block-start:var(--space-2);
  margin-block-end:0;
}

/* ── الأرقام والمعرّفات اللاتينية — الاستثناء الوحيد (§17.10) ── */
.certificate-serial,
.certificate-code,
.certificate-url{
  direction:ltr;
  text-align:left;
  font-family:var(--font-en);
  font-variant-numeric:tabular-nums;
  color:var(--color-text);
}

/* ── صفحة التحقق ──────────────────────────────────────────── */
.verify-panel{
  max-width:var(--certificate-max);
  margin-inline-start:auto;
  margin-inline-end:auto;
  text-align:start;
}

.verify-status{
  display:inline-block;
  border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-4);
  font-size:var(--fs-h2);
}

.verify-status-valid{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-border);}
.verify-status-revoked{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border);}
.verify-status-missing{background:var(--err-bg);color:var(--err);border:1px solid var(--err-border);}

.verify-fields{
  margin-block-start:var(--space-6);
  border-collapse:collapse;
  width:100%;
}

.verify-fields th{
  text-align:start;
  color:var(--gray-600);
  font-weight:normal;
  padding:var(--space-2) 0;
  padding-inline-end:var(--space-6);
  vertical-align:top;
  white-space:nowrap;
}

.verify-fields td{
  text-align:start;
  color:var(--color-text);
  padding:var(--space-2) 0;
}