/*
=========================================================
MAHEDI ALTAYS — PROJECT STATUS
=========================================================

شارة الحالة وسطر العدّ. أُخرجا من focus-rail.css في 4.67
لأنهما لم يعودا خاصّين بالشريط: يظهران في الصفحة الرئيسية،
وفي صفحة المجال، وفي قارئ المشروع.

    ما يُستعمل في ثلاثة مواضع لا يسكن في ملف أحدها.

والألوان الثلاثة ثابتة المعنى في كل الموقع، فلا يتعلّم
الزائر لغةً جديدة في كل صفحة.
=========================================================
*/

/* =========================================================
   حالة المشروع — 4.67
   =========================================================

   شارة صغيرة أعلى البطاقة تقول أين المشروع من عمره. ثلاثة
   ألوان لا أكثر، ولكلٍّ معنى ثابت في كل الموقع:

       أخضر    منجز        — انتهى، ويمكن زيارته
       برونزي  قيد التنفيذ  — يجري الآن
       رمادي   مخطط له      — لم يبدأ بعد

   واللون وحده لا يكفي: الشارة تحمل نصّها مكتوبًا، فمن لا
   يميّز الألوان يقرأ الحالة كما يقرؤها غيره.
   ========================================================= */

/*
الشارة ساكنة الموضع افتراضًا.

كانت absolute بالأصل لأن أول موضع استُعملت فيه كان زاوية
بطاقة. ثم ظهرت في صفحة المجال وفي قارئ المشروع، فطارت إلى
زاوية الصفحة لأن لا حاوية تحدّها.

    الافتراض هو الشكل الأبسط، والاستثناء يُعلَن حيث يُحتاج.

فالإطلاق صار خاصًّا بشريط الواجهة وحده.
*/
.focus-status{
  display:inline-block;
  align-self:flex-start;

  padding:5px 12px;

  border:1px solid var(--brand-line);
  border-radius:999px;

  font-size:12px;
  font-style:normal;
  line-height:1.4;
  white-space:nowrap;
}

.focus-status--done{
  border-color:rgba(var(--brand-green-rgb), .5);
  background:rgba(var(--brand-green-rgb), .1);
  color:var(--brand-green);
}

.focus-status--active{
  border-color:rgba(var(--brand-bronze-rgb), .55);
  background:rgba(var(--brand-bronze-rgb), .12);
  color:var(--brand-bronze-light);
}

.focus-status--planned{
  color:var(--brand-muted);
}

/* في شريط الواجهة وحده: الشارة في زاوية البطاقة */
#focus .focus-grid > a{
  position:relative;
}

#focus .focus-grid > a > .focus-status{
  position:absolute;
  inset-block-start:16px;
  inset-inline-end:16px;
}


/* ---------------------------------------------------------
   سطر العدّ

   يُحسب من البطاقات، فلا يشيخ. ويُقرأ في ثانية: كم يجري
   الآن، وكم انتهى، وكم ينتظر.
   --------------------------------------------------------- */

.focus-tally{
  display:flex;
  flex-wrap:wrap;
  gap:18px;

  margin-block:0 22px;

  color:var(--brand-muted);
  font-size:14px;
}

.focus-tally b{
  margin-inline-end:5px;
  color:var(--brand-text);
  font-weight:600;
}

.focus-count--active b{ color:var(--brand-bronze-light); }
.focus-count--done b{ color:var(--brand-green); }