/* ============================================================
   dashboard.css — اللوحة والترتيب والتشخيص (§7 · §19 · §20.5)
   ------------------------------------------------------------
   القواعد الملزمة نفسها المذكورة في app.css:

   ١) **لا قيمة لون ولا حجم خط واحدة هنا** (§17.9). كل لون وكل حجم
      عبر متغيّرات tokens.css المحقونة وقت التشغيل. وثوابت التخطيط
      (عرض البطاقة، سماكة الشريط) تُعرَّف متغيّراتٍ هنا لا قيماً
      متناثرة، كما في app.css.

   ٢) **الخصائص المنطقية إلزامية** (§17.10): inline-start/inline-end
      و text-align:start، ولا right/left إلا للأرقام اللاتينية.

   ٣) **النِّسَب قيمُ بيانات لا قيمُ تصميم**: تُمرَّر من القالب في
      متغيّر --meter-value ولا تُكتب في القاعدة.
   ============================================================ */

:root{
  /* **وعرضُ البطاقتين بأمر المالك** — §23/٣٧٣ */
  --card-min:267px;
  --meter-h:8px;
  --meter-radius:999px;
  --kpi-min:174px;
  /*
     **وعمودٌ أعرضُ من وعائه يمدّ الصفحة** — §23/٣٦٢: **٣٢٠px على جوالٍ
     عرضُ محتواه ٣١٢** — فتتمدّد الصفحةُ جانبيّاً.
  */
  --rank-col-min:min(280px, 100%);
  --accent-bar:3px;
}

/* ============================================================
   شريط «ما يحتاج انتباهاً» (§20.5)
   الشريط كله يختفي حين لا شيء ينتظر — القالب لا يرسمه أصلاً.
   ============================================================ */
.attention{
  display:flex;flex-direction:column;gap:var(--space-2);
  margin-block-end:var(--space-6);
}
/* **وداخل كتلة الفسيفساء بلا هوامشَ تكسرها** — §23/٦٢٠ */
.mosaic-block > .attention,.mosaic-block > .kpis{margin-block-end:0;}
.attention a{
  display:flex;align-items:center;gap:var(--space-2);
  padding-block:var(--space-3);padding-inline:var(--space-4);
  border:1px solid var(--warn-border);
  border-inline-start:var(--accent-bar) solid var(--warn);
  border-radius:var(--radius-sm);
  background:var(--warn-bg);color:var(--warn);
  text-decoration:none;
}
.attention a:hover{border-color:var(--warn);}
.attention a .icon{color:var(--warn);}
.attention a.attention-err{
  border-color:var(--err-border);border-inline-start-color:var(--err);
  background:var(--err-bg);color:var(--err);
}
.attention a.attention-err .icon{color:var(--err);}

/* ============================================================
   اللوحةُ مكتباً — §23/٨٢٢: صفوفُ قرارٍ ومسؤوليّة، عددٌ ثمّ تسمية ثمّ سهم
   ============================================================ */
/* (صفوفٌ لا بطاقاتٌ داخل البطاقة — أ-م٨٠٤: «الباقي بطاقة داخل بطاقة»؛ فالكتلةُ بطاقةٌ واحدة وصفوفُها بفواصل) */
.desk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.desk-list li + li{border-block-start:1px solid var(--gray-200);}
.desk-list a{
  display:flex;align-items:center;gap:var(--space-3);
  padding-block:var(--space-3);padding-inline:var(--space-2);
  color:var(--surface-card-fg);text-decoration:none;
}
.desk-list a:hover .desk-label{color:var(--brand-600);}
.desk-count{
  flex:none;min-inline-size:2.5em;text-align:center;
  padding-block:var(--space-1);padding-inline:var(--space-2);
  border-radius:var(--radius-sm);background:color-mix(in oklab, var(--brand-600) 12%, var(--surface-card));color:var(--brand-600);font-weight:600;
}
.desk-label{flex:1 1 auto;min-inline-size:0;}
/* (**ونسبةُ من نجح بلون الحال** — §23/٩٧١، أ-م٩٣٠: «بطاقة النسبة تكون خضرا»؛ ووسمُ الحال سطرٌ واحد: كان «لم ينجح» سطرين — قِيس في لقطته) */
.desk-count.desk-count-ok{background:var(--ok-bg);color:var(--ok);}
.desk-list .pill{flex:none;white-space:nowrap;}
.desk-list a .icon{flex:none;color:var(--color-subheading);}
.desk-duties{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 18rem), 1fr));gap:var(--space-4);}
.desk-duty h3{margin:0 0 var(--space-2);color:var(--color-subheading);font-size:calc(var(--fs-body) * var(--fs-scale));}
/* (وعرضُ الكتل من قواعد الفسيفساء العامّة: ستّةٌ على العريض وصفٌّ كاملٌ على الهاتف — فلا قاعدةَ هنا تعلو عليها) */

/*
   ── **الرئيسيّةُ عمودان: الأيمنُ للقرار والمسؤوليّات والترتيبات والنتائج** — §23/٩٦٣ *(المالك — أ-م٩١٨: «العامود الأيمن تظهر فيه القرار
      المسؤوليات بشكل عامودي»)* ── ثلثٌ وثلثان، وكتلُ الأيمن صفٌّ تحت صفٍّ بعرضه، ومسؤوليّاتُ الأدوار تحت بعضها؛ وحتى ٩٠٠ عمودٌ واحدٌ
      والأيمنُ أوّلاً
*/
.home-columns{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);gap:var(--space-6);align-items:start;}
/* (**ومسافةٌ فوق العمودين** — أ-م٩٢٢: «المسافة بين الهيدر والضفحة ضيف»؛ سقط رأسُ الصفحة بـ§23/٩٦٣ فلصقت الكتلُ بحاشية الحاوية وحدَها) */
.home-columns{margin-block-start:var(--space-6);}
.home-side{display:flex;flex-direction:column;gap:var(--space-4);min-inline-size:0;}
.home-side > .mosaic{grid-template-columns:minmax(0, 1fr);margin-block-end:0;}
.home-side > .mosaic > .mosaic-block,
.home-side > .mosaic > .mosaic-block[data-span]{grid-column:1 / -1;}
.home-side .desk-duties{grid-template-columns:minmax(0, 1fr);}
/*
   ── **أرقامُ المنصّة أيقوناتٌ بلا بطاقات: الرقمُ فوقها والاسمُ تحتها** — §23/٩٦٤ *(المالك — أ-م٩٢٠: «ابي احولها الى ايقونات وفوقها
      الرقم وتحتها الاسم بدون بظاقات مصغر»)* ── وكلٌّ بلونه من ألوان الأغلفة (§23/٤١١)
*/
/* (**في صفٍّ واحد** — أ-م٩٢٢: «الارقام في صف واحد»؛ كلُّ رقمٍ عمودٌ متساوٍ مهما كان عددُها، والاسمُ أصغرُ ليتّسع) */
/* (**ثمّ في وسط الصفحة بين الشريط والإعلان** — §23/٩٦٧، أ-م٩٢٤: «في نصف الصفحة لايمين او يسار»: أعمدةٌ بقدرٍ واحدٍ موسَّطة، تضيق على الجوّال) */
.home-figures{list-style:none;margin:var(--space-4) 0 var(--space-6);padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0, 6rem);justify-content:center;gap:var(--space-2);}
/* (وعلى الجوّال تلتفّ صفَّين: صارت مع أعداد الحال تسعاً فقُصّت خمسةُ أسماءٍ على ٣٩٠ — قِيس؛ §23/٩٧٠) */
@media (max-width:640px){
  .home-figures{grid-auto-flow:row;grid-template-columns:repeat(auto-fill, minmax(4.5rem, 1fr));row-gap:var(--space-3);}
  /* (والاسمُ الطويلُ يلتفّ ولا يُقصّ: «المتواجدون الآن» قُصّ على ٣٩٠ — قِيس، §23/٩٧٣) */
  .home-figure-label{white-space:normal;}
}
.home-figure{--tile-color:var(--cover-color-1);display:flex;flex-direction:column;align-items:center;gap:var(--space-1);color:var(--color-text);text-decoration:none;text-align:center;}
.home-figure > .num{color:var(--tile-color);font-weight:700;font-size:calc(var(--fs-body) * var(--fs-scale) * 1.15);line-height:1;}
/*
   (**ولونُ الغلاف الفاتح يُعتَم للنصّ ولا يتبدّل لونُه** — §23/١١١١، أ-م١٠٤٥ ج١٢: بهويّة الموقع أغلفةٌ فاتحة — «8» تباينُها ١٫١٥ و«1» ١٫٢٨
    على الأبيض. فالإضاءةُ تُسقَّف عند ٠٫٥٥ بالدرجة واللون نفسيهما، والداكنُ لا يُمسّ؛ والمتصفّحُ الذي لا يعرف الصيغةَ يبقى على ما قبلها)
*/
.home-figure > .num,.home-figure > .icon{color:oklch(from var(--tile-color) min(l, 0.55) c h);}
.home-figure > .icon{color:var(--tile-color);inline-size:1.5em;block-size:1.5em;}
.home-figure-label{font-size:calc(var(--fs-body) * var(--fs-scale) * .72);white-space:nowrap;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;}
a.home-figure:hover .home-figure-label,a.home-figure:focus-visible .home-figure-label{color:var(--tile-color);}
/*
   (**والاسمُ يلتفّ حتى ٩٠٠ بعد قاعدته لا قبلها** — §23/١١١١، أ-م١٠٤٥ ج٧: قاعدةُ الالتفاف (§23/٩٧٣) كُتبت قبل القاعدة الأساس فغلبتها، فبقي
    «المتواجدون الآن» مقصوصاً على الجوّال، و«قيد المراجعة» على التابلت؛ وكذلك تسميةُ بطاقة الأرقام «متوسط أفضل النتائج» على التابلت)
*/
@media (max-width:900px){
  .home-figure-label{white-space:normal;}
}
.home-figure[data-tone="2"]{--tile-color:var(--cover-color-2);}
.home-figure[data-tone="3"]{--tile-color:var(--cover-color-3);}
.home-figure[data-tone="4"]{--tile-color:var(--cover-color-4);}
.home-figure[data-tone="5"]{--tile-color:var(--cover-color-5);}
.home-figure[data-tone="6"]{--tile-color:var(--cover-color-6);}
.home-figure[data-tone="7"]{--tile-color:var(--cover-color-7);}
.home-figure[data-tone="8"]{--tile-color:var(--cover-color-8);}
/* (وصفُّ الترتيب رتبةٌ ثمّ اسمٌ ثمّ نسبة، بلا رابطٍ لكلِّ اسم: «الكل» في رأس الكتلة يقود إلى صفحته) */
.side-ranking li{display:flex;align-items:center;gap:var(--space-3);padding-block:var(--space-2);padding-inline:var(--space-2);}
@media (max-width:900px){
  .home-columns{grid-template-columns:minmax(0, 1fr);}
  /* (**والأيسرُ أوّلاً على الجوّال والتابلت: الأرقامُ ثمّ الأيسرُ ثمّ الأيمن** — §23/١١٠٥، أ-م١٠٤٢: «البي العكس يتصدر الصفة الايقونات الرقمية
     ثم الجزء اللي على اليسار ثم الجزء اللي على اليمين»؛ وكان الأيمنُ أوّلاً — §23/٩٦٣. والأرقامُ قبل العمودين في الصفحة أصلاً) */
  .home-main{order:-1;}
}

/* ============================================================
   بطاقات الدورات الفعّالة (§20.5)
   ============================================================ */
/*
   ── **وبطاقةُ الاختبار تسعُ سطرَها** — §23/٣٧٣ *(بلاغ المالك: «ليش
   الإخراج كذا؟»)* ────────────────────────────────────────────────────

   **وأمرُه بالستّة كان عن صفِّ الأعداد** — رقمٌ وتسميةٌ قصيرة —
   **فطبّقتُه على الصفّين**: ستٌّ في ١١٢٠px تعطي **١٧٠px للبطاقة**،
   **وسطرُها «متوسط الدرجات ٧٣٫٦٨٪» وحدَه يحتاج ضِعفَها** — فانكسر
   كلُّ سطرٍ سطرين.

   **فعادت إلى `auto-fill` بأدنى ٢٦٤px**: أربعٌ في الصفّ، **وتنهار
   بنفسها حيث لا تتّسع**.
*/
.cards{
  display:grid;gap:var(--space-3);
  /*
     ── **والعرضُ عرضٌ لا حدٌّ أدنى** — §23/٣٧٣ *(بلاغ المالك: «ما
     تغيّر»)* ────────────────────────────────────────────────────────

     **و`minmax(٢٦٧, 1fr)` تحسب العددَ بالرقم ثمّ تمدّ كلَّ عمودٍ
     ليملأ الصفّ** — **فبطاقةٌ طُلب عرضُها ٢٦٧ تُرسم ٤٣٣**.

     **فالمسارُ ثابتٌ بلا `1fr`**: العرضُ هو العرض، **وما فضل من
     الصفّ يبقى فراغاً** ولا يُضخَّم فيه شيء.
  */
  grid-template-columns:repeat(auto-fill, var(--card-min));
  justify-content:start;
  margin-block-end:var(--space-8);
}

/*
   **وحشوُ بطاقة الرقم يضيق لتسعَ سُدسَ الصفّ** — §23/٣٧٦: «الوحدات
   الإدارية» أطولُ تسمياتها.

   **وكان خطُّها يصغر معه** (`.85`) — §23/٣٨٠ *(بلاغ المالك: «والعنوانُ
   خطُّها صغير يختلف عن خطّ عنوان الاختبار»)*: **فسقط التضييق**،
   **والقياسُ صار واحداً لرؤوس الصفحة كلِّها** (آخرَ الملفّ).
*/



.card{
  display:flex;flex-direction:column;gap:var(--space-1);
  padding:var(--space-3);
  /* **وحدُّها من ألوان الهوية** — §23/٣٧٠ *(أمر المالك)*؛ **ومن «حدود البطاقات» حين تُحفظ** — §23/٨٨٤ (كان يُسقطها) */
  border:1px solid var(--card-border, var(--table-border));border-radius:var(--radius);
  background:var(--surface-card);color:var(--surface-card-fg);box-shadow:var(--shadow-sm);
  /* **والرأسُ يُقصّ بحدّ البطاقة** — §23/٣٧٨ */
  overflow:hidden;
}
/*
   **والعنوانُ يتّسع لبطاقةٍ سُدسِ الصفّ**: كان بحجم `--fs-h2` فيلتفّ
   سطرين ويدفع ما تحته.
*/
/*
   ── **ورأسُ البطاقة رأسُ جدول** — §23/٣٧٨ *(أمر المالك: «وصفُّ العنوان
   إعداداتُ الجدول في الهوية… طبّق اللونَ الذهبيَّ على كلِّ بطاقات
   الصفحة، والحدودَ على حدود البطاقة الخارجية»)* ────────────────────────

   **والبطاقةُ تُقرأ جدولاً صغيراً**: رأسٌ ملوّنٌ ثمّ أسطرٌ تحته —
   **ولغةُ الجداول هي لغةُ النظام كلِّه**، فلا تُخترع ثانية.

   **ويمتدّ من حافةٍ إلى حافة**: هامشٌ سالبٌ بقدر حشو البطاقة،
   **والزوايا تُقصّ بـ`overflow`** فلا يبرز عن حدّها.
*/
.card h3{
  margin:calc(var(--space-3) * -1) calc(var(--space-2) * -1) var(--space-2);
  padding:var(--space-2);
  background:var(--table-header-bg);color:var(--table-header-text);
  font-size:calc(var(--fs-body) * var(--fs-scale));line-height:1.4;
  /* **والعنوانُ في وسط رأسه ومتينٌ** — §23/٣٧٨ *(أمر المالك)* */
  text-align:center;font-weight:700;
}
.card h3 a{color:var(--table-header-text);}
.card a{color:var(--link-on-base);}

/*
   ── **والأكثرُ إلحاحاً يُعلَّم لا يُقلَب** — §23/٣٧٠ *(بلاغ المالك:
   «لماذا أوّلُ بطاقةٍ تختلف عن الباقي؟ وحدُّ الخليّة بلونٍ فاتحٍ من
   ألوان الهوية»)* ─────────────────────────────────────────────────────

   **وكان يقلب سطحَها كلَّه** (§20.5: «بلون `surface_raised`») —
   **فتُقرأ بطاقةً من نوعٍ آخر لا بطاقةً أعجل**، **ويُعاد لونُ كلِّ
   شيءٍ فيها**: العنوانُ والرقمُ والتسميةُ والشريط — أربعُ قواعدَ
   تُصان.

   **فصار شريطاً في رأسها** — **وهي لغةُ الهوية نفسُها** (§23/٣٦٦:
   البطاقةُ المنهارة وبطاقةُ الرقم) — **والحدُّ الفاتحُ يبقى لها كما
   لأخواتها**.
*/
/*
   **والأولى لا تختلف** — §23/٣٧٨ *(أمر المالك: «شيل الخطّ اللي فوق أوّل
   بطاقة»)*: **ورأسُ الجدول يعلوها كما يعلو أخواتِها**.
*/
/*
   ── **وسطرُ البطاقة تسميةٌ وقيمة** — §23/٣٧٠ *(بلاغ المالك: «توزيعُ
   العناصر فيها غير مرتّب»)* ────────────────────────────────────────────

   **وكانت `flex` بفجوةٍ تتبع النصّ** — فالقيمةُ تلتصق بتسميتها
   **وتختلف بدايتُها من سطرٍ إلى سطر**. **فصارت التسميةُ في طرفٍ
   والقيمةُ في طرف** — **وتصطفّ الأرقامُ عموداً واحداً**.
*/
.card-line{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--space-2);
}
/*
   ── **وألوانُ الهوية تُستعمل** — §23/٣٧٥ *(بلاغ المالك: «ليش الهوية إذا
   ما تُستخدم ألوانُها للإخراج البصريّ؟»)* ──────────────────────────────

   **وتسميةُ السطر كانت رماديّةً محايدة** — **وهي أكثرُ ما يتكرّر في
   البطاقة**. **فصارت من لون رأس الجدول مغمَّقاً** — **وهي لغةُ الهوية
   نفسُها** (§23/٣٦٦: عناوينُ البطاقة المنهارة).
*/
/* (و٣٥٪ لا ٥٥٪ — §23/١١١١، أ-م١٠٤٥ ج١٨: برأس جدولٍ فاتحٍ جدّاً كان المزيجُ ٣٫٣:١ في «المسجلون · المؤدون · النجاح…») */
.card-line .label{color:color-mix(in srgb, var(--table-header-bg) 35%, var(--color-text));}

/*
   ── **والرقمُ يُلفت لا يُقرأ متناً** — §23/٣٧٥ *(أمر المالك: «والأرقام؟
   لازم ألوانُها تكون لافتةً مش نفس لون الخطّ»)* ──────────────────────────

   **وكان بلون المتن ووزنِه** — **فسطرٌ كلُّه بلونٍ واحدٍ يُمسح بالعين
   ولا يُقرأ**: العينُ تبحث عن الرقم فتقرأ الجملة.

   **فلونُ العلامة ووزنٌ أثقل** — **والتسميةُ من الذهبيّ** (فوق)،
   **فالسطرُ لونان يفترقان**.
*/
.card-line .num,
.card-line .tnum{color:var(--brand-600);font-weight:700;}

/* **وما يحتاج انتباهاً يبقى بلونه** — §20.5: لا يُغرَق في لون العلامة */
.card-line .card-key{color:var(--warn);}

/* **والموعدُ آخرَ سطرٍ بحدٍّ يفصله** — §23/٣٧٥ */
.card-when{
  margin-block-start:auto;padding-block-start:var(--space-2);
  border-block-start:1px solid var(--table-border);
}
/* «٤ لم يبدؤوا» أهم رقم في البطاقة (§20.5) — يُبرَز لا يُدفن */
/* **وسطحُها لم يعد يُقلَب** (§23/٣٧٠) — فلا استثناءَ للونها */
.card-key{font-weight:700;color:var(--warn);}

/* شريط التقدم — قيمته من البيانات عبر --meter-value */
.meter{
  block-size:var(--meter-h);inline-size:100%;
  background:var(--gray-200);border-radius:var(--meter-radius);overflow:hidden;
}
.meter > span{
  display:block;block-size:100%;
  inline-size:var(--meter-value);
  background:var(--brand-600);border-radius:var(--meter-radius);
}

/* ============================================================
   المؤشرات الأربعة (§20.5) — أربعة لا أكثر
   ============================================================ */
.kpis{
  display:grid;gap:var(--space-4);
  /*
     ── **وستٌّ بالكسر لا بالعرض** — §23/٣٧٦ *(بلاغ المالك: «رقمك غلط،
     خمسٌ مش ستّ»)* ──────────────────────────────────────────────────

     **وحسبتُ ١٧٤ على عرضِ محتوىً ١١٢٠** — **وعرضُه ٩٧٩**: الشريطُ
     يأخذ عمودَه والحاويةُ حشوَها، **فرقمٌ ثابتٌ يصحّ على شاشةٍ ويكذب
     على أخرى**.

     **فستّةُ أعمدةٍ بالكسر**: تصحّ على أيِّ عرض، **والبطاقةُ تأخذ
     سُدسَه** — **وتنهار إلى ما يتّسع دون ٩٠٠px**.
  */
  grid-template-columns:repeat(auto-fill, var(--kpi-min));
  justify-content:start;
  margin-block-end:var(--space-8);
}
/*
   ── **وحشوٌ واحدٌ لا حشوان** — §23/٣٧٨ *(بلاغ المالك: «ليش البطاقات
   الثانية طالعة كذا؟»)* ────────────────────────────────────────────────

   **وكان التضييقُ مكتوباً فوق ثمّ يردّه المختصرُ هنا** — **رابعةُ مرّةٍ
   يعضّني فيها الترتيب**: فالحشوُ ١٦ والهامشُ السالبُ ٨، **فيبقى بياضٌ
   حولَ الرأس**.

   **فصار في موضعٍ واحد**: بلوكٌ ١٦ وجانبيٌّ ٨ — **يوافق الهامشَ السالبَ
   في رأسه**.
*/
.kpi{
  padding:var(--space-4) var(--space-2);
  border:1px solid var(--table-border);border-radius:var(--radius);overflow:hidden;
  /*
     **وحدٌّ علويٌّ من لون رأس الجدول** — §23/٣٦٦ *(قرار المالك: توزيعُ
     ألوان الهوية)*: **البطاقةُ كانت بحدٍّ واحدٍ باهت**.
  */
  /* **والحدودُ كلُّها بلون الرأس الذهبيّ الأساسيّ، رفيعةً سواء** — أ-م١٥٠ *(أمر المالك:
     «عدّل الحدود في البطاقات المصغّرة إلى اللون الذهبي الأساسي»)*؛ وسقط الشريطُ العلويُّ الغليظ (أ-م١٤٦) */
  border-color:var(--table-header-bg);
  background:var(--surface-card);color:var(--surface-card-fg);
}
/*
   **ولونُ النصّ من سطحه لا من لوحٍ آخر** — أ-م١٧: كانت التسميةُ رماديةً
   والقيمةُ بلون العنوان، **وكلاهما داكنٌ ثابت**. فلمّا صارت خلفيةُ
   البطاقة عنّابيةً **اختفى الرقمُ في خلفيته** — ورآه المالك.
*/
/* **وتسميةُ بطاقة الرقم رأسُها** — §23/٣٧٨ *(أمر المالك: «كلُّ بطاقات الصفحة»)* */
.kpi .label{
  display:block;
  margin:calc(var(--space-4) * -1) calc(var(--space-2) * -1) var(--space-2);
  padding:var(--space-2);
  /* **وخلفيتُها خلفيةُ تسميات بطاقة البيانات نفسُها** — أ-م١٤٥ *(أمر المالك)*:
     خُمسُ لون الرأس ممزوجاً بسطح البطاقة، والنصُّ بلون العناوين */
  background:color-mix(in srgb, var(--table-header-bg) 22%, var(--surface-card));color:var(--color-heading);
  /* **وحدٌّ داخليٌّ تحت التسمية بلون الرأس الذهبيّ** — أ-م١٥١ *(أمر المالك: «مش مبيّنة هنا»)* */
  border-block-end:1px solid var(--table-header-bg);
  /* **والتسميةُ في وسط رأسها ومتينة** — §23/٣٧٨ */
  text-align:center;font-weight:700;
}

/* **والرقمُ في وسط بطاقته** — §23/٣٧٨: كبطاقة الاختبار شكلاً */
/*
   ── **والرقمُ يهدأ ويلبس لونَ الهوية** — §23/٣٨٠ *(بلاغ المالك:
   «الأرقامُ كبيرةٌ وشاذّةٌ ولونُها أسود»)* ────────────────────────────

   **وكان بقياس العنوان الأوّل** (`--fs-h1`) **في بطاقةٍ سُدسِ الصفّ** —
   **فيطغى على رأسه ويخرج عن إيقاع الصفحة**. **فصار بقياس العنوان
   الثاني**: بارزٌ ولا يشذّ.

   **ولونُه لونُ العلامة لا لونُ النصّ** — **كرقم بطاقة الاختبار
   سواءً** (`.card-line .tnum`، §23/٣٧٧: «الأرقامُ لازم ألوانُها تكون
   لافتة مش نفس لون الخطّ») — **فلا رقمان في صفحةٍ بلونين**.
*/
/*
   **وقياسُه ثلاثةَ عشرَ بأمره** — §23/٣٨١ *(نصُّ المالك: «حجم الأرقام
   ما زال كبير، خلّه ١٣»)*: **كسرٌ من قياس المتن لا رقمٌ مكتوب** (§17.3)
   — `16 × 1.0625 × .765 = 13`، **فيتبع لغةَ الصفحة كما تتبعها أخواتُه**.
*/
.kpi .value{display:block;text-align:center;}
/* ── **والرقمُ بقياس تسميته** — §23/٤٢١ *(بلاغ المالك — أ-م١٣٧: «حجم الأرقام ما
   يناسب حجم النص»)*: ينسخ «خلّه ١٣» (§23/٣٧٨) بأمره الجديد ── */
/* **والرقمُ بأسود الهوية** — أ-م١٥٢ *(أمر المالك: «خطّ الأرقام أسود الهوية»)*: لونُ العناوين لا العلامة — ينسخ §23/٣٧٥ في البطاقة المصغّرة */
/* لونُ العناوين في هويّة الجهة عنّابيٌّ — فالأسودُ المقصودُ لونُ متن الهوية (`--color-text`) */
.kpi .value{font-size:calc(var(--fs-body) * var(--fs-scale));font-weight:700;color:var(--color-text);}
/* **والتسميةُ سطرٌ واحد** — §23/٤٢١/٤ */
.kpi .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* (**وعلى التابلت تلتفّ كالجوّال** — §23/١١١١، أ-م١٠٤٥ ج٧: «متوسط أفضل النتائج» مقصوصةٌ على ٨٢٠ في لوحة الاختبار؛ والجوّالُ يلتفّ من §23/٩٤٢/٤) */
@media (max-width:900px){.kpi .label{white-space:normal;}}

/* ============================================================
   الترتيب — العشرة الأوائل وأقل عشرة جنباً إلى جنب (§20.5)
   ============================================================ */
/*
   ── **وثلاثةُ ترتيباتٍ في صفٍّ واحد** — §23/٣٧١ *(أمر المالك: «حاول
   تخلّي الثلاثَ بطاقاتٍ في صفٍّ واحدٍ في عرض الديسكتوب»)* ────────────────

   **و`auto-fit` بأدنى ٢٨٠px يعطي اثنين في ١١٢٠** — **فتنزل الثالثةُ
   وحدَها في سطرٍ تحتهما**.
*/
/* (وسقطت قواعدُ `rank-columns` هنا وتحت — §23/٣٧١ و§23/٣٧٢: صفحةُ الترتيب لا تلبسها اليوم؛ فحصُ الديون §23/١١٨٣) */


.scope-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-block-end:var(--space-4);}
.scope-tabs a{
  padding-block:var(--space-2);padding-inline:var(--space-4);
  border:1px solid var(--gray-300);border-radius:var(--radius-sm);
  color:var(--color-subheading);text-decoration:none;
}
.scope-tabs a[aria-current="page"]{
  background:var(--brand-50);border-color:var(--brand-600);color:var(--brand-600);font-weight:600;
}

/* ============================================================
   الترتيبُ بخمسة نطاقات — §23/٥٦١ *(المالك — أ-م٣٩٠/س١٤)*
   المتصدّرون الثلاثة بطاقاتٌ كبيرة بألوان العائلة (الأوّلُ بلون العلامة)،
   ومن الرابع جدولٌ بشريطِ نسبةٍ يحمل خطَّ الحدّ الأدنى — والألوانُ رموزُ الثيم.
   ============================================================ */
.rank-podium{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:var(--space-4);margin-block-end:var(--space-6);}
.rank-podium-card{
  --podium-color:var(--cover-color-1);
  display:grid;justify-items:center;gap:var(--space-1);text-align:center;
  padding-block:var(--space-6);border-block-start:var(--accent-bar) solid var(--podium-color);
}
.rank-podium-card[data-rank="2"]{--podium-color:var(--cover-color-2);}
.rank-podium-card[data-rank="3"]{--podium-color:var(--cover-color-7);}
.rank-podium-rank{
  display:inline-grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;border-radius:50%;
  background:var(--podium-color);color:var(--brand-fg);font-weight:700;
}
.rank-podium-name{margin:0;font-size:calc(var(--fs-body) * var(--fs-scale) * 1.15);}
.rank-podium-value{font-size:calc(var(--fs-body) * var(--fs-scale) * 2);font-weight:700;color:var(--podium-color);line-height:1;}
/* (**والمركزان الثاني والثالث يُقرآن بأغلفةٍ فاتحة** — §23/١١١١، أ-م١٠٤٥ ج١٦: رقمُ المركز أبيضُ على فاتح ٢٫١٧ ونسبتُه ٢٫٠١؛ فتُسقَّف إضاءةُ
    لونه للنصّ ولدائرة الرقم كما في أرقام الرئيسيّة) */
.rank-podium-value{color:oklch(from var(--podium-color) min(l, 0.55) c h);}
.rank-podium-rank{background:oklch(from var(--podium-color) min(l, 0.55) c h);}
.rank-podium-label{color:var(--color-subheading);}
@media (max-width:760px){.rank-podium{grid-template-columns:minmax(0,1fr);}}

/* **الشريطُ**: القيمةُ امتلاءٌ بلون النجاح فوق الحدّ وبلون الإخفاق دونه، والحدُّ خطٌّ رفيع، والرقمُ فوقهما */
.rank-bar{
  position:relative;display:block;min-inline-size:8rem;block-size:calc(var(--meter-h) * 3);
  background:var(--gray-200);border-radius:var(--meter-radius);overflow:hidden;
}
.rank-bar-fill{position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--rank-value);border-radius:var(--meter-radius);}
.rank-bar.is-above .rank-bar-fill{background:color-mix(in oklab, var(--ok) 45%, var(--surface-card));}
.rank-bar.is-below .rank-bar-fill{background:color-mix(in oklab, var(--err) 40%, var(--surface-card));}
.rank-bar-pass{position:absolute;inset-block:0;inset-inline-start:var(--rank-pass);inline-size:2px;background:var(--color-heading);opacity:.6;}
.rank-bar-value{position:absolute;inset:0;display:grid;place-items:center;color:var(--color-heading);font-weight:600;}

/* ============================================================
   لوحةُ العضو — §23/٤١٥ *(بلاغ المالك — أ-م١٢١: «مع صورة أفاتار»)*
   الصورةُ دائرةٌ، ومن لا صورةَ له حرفُ اسمه بلون الهوية.
   ============================================================ */
/* **رأسُ العضو على الرأس الموحَّد** — §23/٦٢٨: الصورةُ قبل الاسم، وهويّتُه سطراً تحته */
.member-head .head-title{gap:var(--space-4);}
.member-head .head-title .avatar{order:-1;}
.member-head .member-identity{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);flex-basis:100%;min-inline-size:0;}
/* **الصلاحياتُ نافذةٌ في اللوحة** — §23/٤٢٥ (أ-م١٧٥): بطاقةُ البنود ثمّ سجلُّ الأدوار وزرُّ التعديل */
.permissions-dialog{inline-size:min(52rem, 92vw);}
.permissions-dialog .data-card{margin-block-start:var(--space-4);}
.permissions-dialog h2{margin-block-start:var(--space-6);}
.permissions-dialog .form-actions.at-end{border-block-end:0;padding-block-end:0;justify-content:flex-end;}
/* **والصورةُ من مكتبةٍ داخل الموقع** — §23/٤٢١: قواعدُها الأساسُ في `app.css` لأنّ الترويسةَ تحملها في كلِّ صفحة (أ-م١٦٠) */
/* **النموذجُ الضيّق عمودٌ واحد** — §23/٤٢٣/١ */
.form-card-narrow{grid-template-columns:minmax(0,1fr);max-inline-size:36rem;}
/* **ورمزُ QR ورموزُ الاسترداد في صفحة «التحقق بخطوتين»** — §23/١٠٦٢: الصورةُ تحمل أرضَها البيضاء فتقرؤها الكاميرا في الوضع الداكن أيضاً */
.two-factor-qr{justify-self:start;inline-size:200px;block-size:200px;border-radius:var(--radius-sm);}
/* **ودليلُ المستخدم** — §23/١٠٦٣: الفهرسُ قائمةٌ بعناوين البنود، والبندُ فقراتٌ وصورٌ لا تتجاوز عرضَه */
.guide-list{display:grid;gap:var(--space-2);margin:0;padding-inline-start:var(--space-6);}
/* **والأبوابُ أعمدةٌ بينها خطٌّ فاصل، والخطُّ أصغرُ قليلاً** — §23/١٠٦٧ (أ-م١٠١٢): أربعةٌ على العريضة وتقلّ بعرض الشاشة حتى عمودٍ على الجوّال */
.guide-areas{columns:4 13rem;column-gap:var(--space-6);column-rule:1px solid var(--gray-200);font-size:calc(var(--fs-body) * var(--fs-scale) * .92);}
.guide-area{break-inside:avoid;margin-block-end:var(--space-4);}
.guide-area h3{margin:0 0 var(--space-2);color:var(--color-subheading);font-size:calc(var(--fs-body) * var(--fs-scale));}
.guide-area .guide-list{gap:var(--space-1);padding-inline-start:var(--space-4);}
/* **والأدوارُ عناوينُ في البطاقة الواحدة، بينها فسحةٌ وخطّ؛ و«(جديد)» بلون الحالة** — §23/١١٧٥ (أ-م١١٠٤) */
.guide-role + .guide-areas{margin-block-end:var(--space-4);}
.guide-areas + .guide-role{padding-block-start:var(--space-4);border-block-start:1px solid var(--gray-200);}
.guide-new{color:var(--ok);white-space:nowrap;}
/* (و«(تجريبي)» رماديُّ النصّ الثانويّ — §23/١١٧٦، أ-م١١٠٥) */
.guide-trial{color:var(--gray-600);white-space:nowrap;}
.guide-entry p{margin-block:0 var(--space-3);line-height:1.9;}
/* **وخطواتُ الإجراء نقاطٌ تحت بعض** — §23/١٠٦٤ (أ-م١٠١١: «الافضل الخطوات تحطها تحت بعض») */
.guide-entry ul{display:grid;gap:var(--space-1);margin-block:calc(var(--space-2) * -1) var(--space-4);padding-inline-start:var(--space-6);line-height:1.9;}
.guide-entry img{display:block;max-inline-size:100%;block-size:auto;margin-block:var(--space-3);border:1px solid var(--gray-200);border-radius:var(--radius-sm);}
.recovery-codes{display:grid;grid-template-columns:repeat(2, max-content);gap:var(--space-2) var(--space-6);margin:0;padding-inline-start:var(--space-6);}
/* **الصورةُ زرٌّ يفتح لوحاً** — §23/٤٢٣/١ */
.avatar-button{
  display:inline-flex;align-items:center;gap:var(--space-3);
  font:inherit;color:var(--color-text);background:var(--surface-field);
  border:1px solid var(--gray-300);border-radius:var(--radius-sm);
  padding-block:var(--space-2);padding-inline:var(--space-3);cursor:pointer;
}
.avatar-button:hover,.avatar-button:focus-visible{border-color:var(--brand-600);}
.avatar-dialog{inline-size:min(28rem, 92vw);}
.avatar-dialog .avatar-choices{padding-block-start:var(--space-4);justify-content:center;}
.avatar-choices{display:flex;flex-wrap:wrap;gap:var(--space-3);border:0;margin:0;padding:0;}
/* (وفي بطاقة النموذج تأخذ الصفَّ كلَّه: كانت في خانةٍ من خانتَيها فالتفّت الصورُ في نصف العرض والتاسعةُ وحدَها — رُئي ٢٠٢٦-١٠-٠٥، أ-م٧٨٥) */
.form-card > .avatar-choices{grid-column:1 / -1;}
.avatar-choice{cursor:pointer;position:relative;display:grid;place-items:center;}
.avatar-choice input{position:absolute;opacity:0;inline-size:1px;block-size:1px;}
.avatar-choice .avatar{border:2px solid transparent;}
.avatar-choice input:checked + .avatar{border-color:var(--brand-600);box-shadow:0 0 0 2px var(--brand-50);}
.avatar-choice input:focus-visible + .avatar{border-color:var(--brand-600);}

/* ============================================================
   الرسمُ البيانيُّ بأعمدةٍ أفقية — §23/٤١٨ *(بلاغ المالك — أ-م١٣١)*
   التسميةُ والقيمةُ نصّ، والطولُ نسبة؛ والألوانُ من مفاتيح الثيم.
   ============================================================ */
.bars{display:flex;flex-direction:column;gap:var(--space-2);margin:0 0 var(--space-6);}
.bar-row{display:grid;grid-template-columns:minmax(8rem, 1fr) 3fr;gap:var(--space-3);align-items:center;}
.bar-label{margin:0;color:var(--color-subheading);}
.bar-track{
  margin:0;position:relative;display:flex;align-items:center;gap:var(--space-2);
  block-size:calc(var(--meter-h) * 3);background:var(--gray-200);border-radius:var(--meter-radius);overflow:hidden;
}
.bar{display:block;block-size:100%;inline-size:var(--bar-value);background:var(--brand-600);border-radius:var(--meter-radius);flex:none;}
.bar-ok{background:var(--ok);}
.bar-err{background:var(--err);}
.bar-warn{background:var(--warn);}
/* ── **والقيمةُ في طرف المسار على خلفيّة البطاقة، تُرى أيّاً كان طولُ الشريط** — §23/٩٤٤/٤: كانت تلي الشريطَ فإذا امتلأ المسارُ دُفعت
   خارجه وقصّها (`overflow:hidden`) — الشريطُ الممتلئُ بلا رقم ── */
.bar-value{
  position:absolute;inset-inline-end:var(--space-2);
  padding-inline:var(--space-2);border-radius:var(--radius-sm);
  background:var(--surface-card);color:var(--surface-card-fg);font-weight:600;white-space:nowrap;line-height:1.4;
}
@media (max-width:640px){
  .bar-row{grid-template-columns:1fr;gap:var(--space-1);}
}

/* **قائمةُ إجاباتٍ مرقَّمةٌ داخل خليّة** — أ-م١٦٩ */
/* بلا ترقيمٍ ثانٍ — السطرُ يحمل رقمَ خطوته؛ والخاطئُ بلون الخطأ والمقابلُ له بلون الصواب (أ-م١٧٠) */
.answer-list{margin:0;padding:0;list-style:none;text-align:start;}
.answer-list li{padding-block:var(--space-1);}
.answer-list .is-wrong{color:var(--err);}
.answer-list .is-right{color:var(--ok);}
/* خياراتُ السؤال تحت نصّه في صفحة الإجابات الخاطئة (أ-م١٧١) */
.question-options{margin:var(--space-3) 0 0;padding-inline-start:var(--space-6);text-align:start;}
.question-options li{padding-block:var(--space-1);}
/* تصحيحُ المفتاح وختمُه (§23/٤٣٣) */
.key-options{margin:0;padding:0;list-style:none;}
.key-seal{margin:var(--space-3) 0 0;text-align:start;}

/* ============================================================
   المرشّح الواحد أعلى الشاشة (§20.5)
   ============================================================ */
.filters{
  display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:end;
  padding:var(--space-4);margin-block-end:var(--space-6);
  border:1px solid var(--table-border);border-radius:var(--radius);
  background:var(--gray-50);
}
/* ── **صفٌّ واحدٌ على الشاشة العريضة** — §23/٤١٢ *(بلاغ المالك — أ-م١٢٠:
   «أبيه صف واحد، صغّر الخط، تصرّف، ما أبيه ينزلق إلى صفين»)*:
   الحقولُ تتقاسم العرضَ، والخطُّ كسرٌ من خطّ المتن؛ وعلى الهاتف يُسمح بالانكسار ── */
.filters{font-size:calc(var(--fs-body) * var(--fs-scale) * 0.85);}
.filters .field{flex:1 1 0;min-inline-size:0;}
.filters .field label{font-size:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.filters .field > select,.filters .field > .input{font-size:inherit;inline-size:100%;padding-inline:var(--space-2);}
/* ── **والقوائمُ تنفتح إلى تحت دائماً** — §23/٤٢٠ *(بلاغ المالك — أ-م١٢٧:
   «القوائم تنبثق على فوق، أبيها على تحت كلها»)*: `<details class="pick">`
   زرُّها كحقلٍ، ولوحُها تحت الزرّ بتنسيقٍ لا يقرّره المتصفّح، ويُمرَّر داخلَه ── */
.filters .pick-label{color:var(--color-subheading);text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pick{position:relative;min-inline-size:0;}
.pick > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  font:inherit;color:var(--color-text);background:var(--surface-field);
  border:1px solid var(--gray-300);border-radius:var(--radius-sm);
  padding-block:var(--space-3);padding-inline:var(--space-2);
  min-height:var(--touch-min);line-height:var(--line-height-control);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pick > summary::-webkit-details-marker{display:none;}
.pick > summary::after{content:"⌄";flex:none;color:var(--gray-500);}
.pick[open] > summary{border-color:var(--brand-600);}
.pick > summary:focus-visible{border-color:var(--brand-600);outline:none;}
.pick-list{
  list-style:none;margin:0;padding:var(--space-1);
  position:absolute;inset-block-start:calc(100% + var(--space-1));inset-inline-start:0;
  min-inline-size:100%;max-inline-size:24rem;max-block-size:18rem;overflow:auto;z-index:30;
  background:var(--surface-field);color:var(--color-text);
  border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow);
}
.pick-list a{
  display:block;padding-block:var(--space-2);padding-inline:var(--space-3);
  border-radius:var(--radius-sm);color:var(--color-text);text-decoration:none;white-space:nowrap;
}
.pick-list a:hover,.pick-list a:focus-visible{background:var(--chrome-hover);}
.pick-list a[aria-current="true"]{color:var(--brand-600);font-weight:600;}
.pick-group{padding-block:var(--space-2) var(--space-1);padding-inline:var(--space-3);color:var(--gray-500);font-weight:600;}
@media (min-width:900px){
  .filters{flex-wrap:nowrap;}
}

/* ============================================================
   الفارق عن المتوسط — الاتجاه لونٌ دلالي لا زخرفة
   والأرقام اللاتينية بـ ltr كما في §17.10
   ============================================================ */
.diff{direction:ltr;text-align:left;font-variant-numeric:tabular-nums;}
.diff-up{color:var(--ok);}
.diff-down{color:var(--err);}

/* (وسقطت قواعدُ التشخيص الأوّل `diag-*` و`wrong-answer` — §19.2: صفحاتُه اليوم جداول؛ فحصُ الديون §23/١١٨٣) */

.note{
  padding:var(--space-3);
  border:1px solid var(--table-border);border-radius:var(--radius-sm);
  background:var(--gray-50);
}
.note + .note{margin-block-start:var(--space-2);}
.note .meta{color:var(--gray-500);}

/*
   ── **وستٌّ بالكسر، وبعد قاعدتها لا قبلها** — §23/٣٧٦ *(بلاغ المالك:
   «خمسٌ مش ستّ» مرّتين)* ────────────────────────────────────────────────

   **وكانت مكتوبةً فوق `.kpis`** — **وخصوصيّتُهما واحدة**، **فالمتأخّرةُ
   تغلب**: `auto-fill` تردّ الستّةَ في كلِّ مرّة.
*/
@media (min-width:900px){
  .kpis-six{grid-template-columns:repeat(6, minmax(0, 1fr));}
  /* (وستٌّ في ثلاثة أعمدة حيث تطول تسمياتُها — §23/١٢٣١) */
  .kpis-three{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
/* ── **وعلى الجوّال بطاقتان تملآن الصفّ، والتسميةُ تلتفّ ولا تُقطع** — §23/٩٤٢/٤: كانت عموداً واحداً بعرضٍ ثابتٍ ملتصقاً باليمين
   ونصفُ الصفّ فارغ، و«متوسط أفضل النت…» مقطوعة (لوحةُ الاختبار · المسار · المدرّب) ── */
@media (max-width:640px){
  .kpis{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .kpi .label{white-space:normal;}
  /* (والأخيرةُ في عددٍ فرديٍّ تأخذ صفَّها لا نصفَه ملتصقاً بطرفه — §23/٩٤٧/٩) */
  .kpis > :last-child:nth-child(odd){grid-column:1 / -1;}
}

/*
   ── **وأربعٌ حدُّها** — §23/٣٧٩ *(أمر المالك: «أحسّ أنّا ضيّقنا بطاقاتِ
   الاختبار وايد — ارجع خلّها بحدٍّ أقصى أربع في الصفحة»)* ────────────────

   **وبالكسر لا بالعرض** — كما في بطاقات الأعداد: **رقمٌ ثابتٌ يصحّ على
   شاشةٍ ويكذب على أخرى**.

   **وحشوُها يضيق وتسميتُها تصغر** لتسعَ «لم يتموا الاختبار» في سطر.
*/
/*
   ── **وثلاثٌ أعرضُ في الصفّ** — §23/٥٦٣ *(نصُّ المالك — أ-م٣٩٠/س٢٥: «بطاقات الاختبارات والدورات
   أربع في الصف: وسّعها واجعلها ثلاثاً فقط وزر المزيد»)*: **فالأربعُ (§23/٣٧٩) صارت ثلاثاً** والحشوُ يعود.
*/
@media (min-width:900px){
  .cards{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

/*
   ── **وثلاثةُ أرقامٍ متوسّطة روابط** — §23/٥٦٣ *(نصُّ المالك: «وسّط الأرقام في البطاقة؛
   وجميع البيانات في البطاقات هايبر لينك»)*: الرقمُ فوق تسميته، **وكلٌّ بابٌ إلى ما يعدّه**
   (§23/٤١١)، **ولونُ الرقم لونُ العلامة ووزنُه** كسطر البطاقة (§23/٣٧٥).
*/
.card-stats{
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--space-2);
  margin-block:var(--space-1) var(--space-2);
  text-align:center;
}
.card-stats a{
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--space-1) / 2);
  padding-block:var(--space-1);
  border-radius:var(--radius-sm);
  text-decoration:none;
}
.card-stats a:hover{background:color-mix(in srgb, var(--table-header-bg) 12%, var(--surface-card));}
.card-stats .num{font-size:calc(var(--fs-body) * var(--fs-scale) * 1.35);font-weight:700;color:var(--brand-600);}
.card-stats .num.card-key{color:var(--warn);}
.card-stats .label{color:color-mix(in srgb, var(--table-header-bg) 35%, var(--color-text));}
/* **والمتوسطُ رابطٌ بلون الرقم** — §23/٥٦٣ */
.card-line a.num{color:var(--brand-600);text-decoration:none;}
.card-line a.num:hover{color:var(--brand-700);}

/*
   ── **ورؤوسُ الصفحة قياسٌ واحد** — §23/٣٨٠ *(بلاغ المالك: «والعنوانُ
   خطُّها صغير يختلف عن خطّ عنوان الاختبار» ثمّ «نفس الشيء» على رؤوس
   جداول الترتيب)* ──────────────────────────────────────────────────────

   **وكانت ثلاثةَ قياساتٍ في شاشةٍ واحدة**: رأسُ بطاقة الاختبار، وتسميةُ
   بطاقة الرقم أصغرَ منه، ورأسُ جدول الترتيب أصغرَ من كليهما — **ورؤوسٌ
   ثلاثةٌ بثلاثة قياساتٍ تُقرأ ثلاثَ مراتب**، **وهي مرتبةٌ واحدة**.

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

   **وبعد قواعدها لا قبلها** — §23/٣٧٦: **خصوصيّةٌ مساويةٌ تُغلَب
   بالترتيب**، **وقد عضّني خمساً**.
*/
.card h3,
.kpi .label{font-size:calc(var(--fs-body) * var(--fs-scale));font-weight:700;}

@media (min-width:900px){
  .card h3,
  .kpi .label{font-size:calc(var(--fs-body) * var(--fs-scale) * .95);}
}

/*
   ── **ومؤشّرا النجاح والرسوب بلونَي حالتيهما** — §23/٣٧٧ *(أمر المالك:
   «النجاح أخضر، الرسوب أحمر»)* ─────────────────────────────────────────

   **وهما لونا «اجتاز» و«رسب» في النظام كلِّه** — مشتقّان من هويته
   (§17.1) — **فلا لونَ يُخترع للمؤشّر**.

   **والخصوصيّةُ مرفوعةٌ عمداً** (`.meter.meter-ok`): **قاعدةٌ بخصوصيّةٍ
   مساويةٍ تُغلَب بالترتيب** — **وقد وقع ثلاثاً اليوم**، **فتُرفع مرّةً
   ولا يعود الترتيبُ حاكماً**.
*/
/* **وفاتحان** — §23/٥٦٣ *(نصُّ المالك: «خفّف لون المؤشر الأحمر والأخضر ليكون فاتحاً بدل الغامق»)*: اللونُ نفسُه ممزوجاً بسطح البطاقة */
.meter.meter-ok > span{background:color-mix(in oklab, var(--ok) 45%, var(--surface-card));}
.meter.meter-fail > span{background:color-mix(in oklab, var(--err) 45%, var(--surface-card));}