/* ===== منصة الأحياء — الهوية الخضراء (تُبنى فوق app.css) =====
   إعادة تسمية للمتغيّرات الثلاثة لا غير، كما تفعل chem.css وmath.css وphys.css.
   و--gold لا يُعاد تعريفه: الكهرماني لا يزاحم الأخضر، فلا يُكتب سطر لا يغيّر شيئًا. */
body.bio{
  --teal:#157347;        /* نصّ أبيض عليه ٥٫٨٧ — يفي AA */
  --teal-d:#0f5434;      /* على أبيض ٨٫٩٨، وعلى --teal-l ٧٫٧٨ */
  --teal-l:#e4f2ea;
}
body.bio .hl{background:#d3ecdf;color:var(--teal-d);padding:1px 5px;border-radius:5px;font-weight:700}

/* قيمةٌ لا تنفصل عن وحدتها — القاعدة نفسها التي في phys.css، ولعلّتها نفسها:
   على ٣٧٥px تنزل الوحدة تحت العدد فيُقرأ عددان لا قيمة واحدة. */
body.bio .lesson-body span[dir="ltr"]{white-space:nowrap}

/* شارة الفصل قيد الإعداد — غير موجودة في app.css المشترك، كما في phys.css. */
body.bio .soon{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;
  background:#eef1f4;color:#5b6b7a;margin-inline-start:8px}

/* جدول المقارنة الحيّ (bio-cmp.js) — صفٌّ متّفق يميل إلى الأخضر، ومختلف
   يميل إلى الكهرماني (--gold من app.css، لا لونٌ جديد)، وخليّة التفريغ
   بلون النصّ الأخضر الغامق لتمييزها كعنصر تفاعلي.
   #fff8ec حرفيّ مقصودًا لا خطأ: لا يوجد --gold-l في app.css ولا في أيّ
   منصّة — .rule و.warn و.law في app.css نفسه يكتبون هذا التظليل حرفيًّا
   أيضًا، فلا متغيّر هنا يُخالف اتّفاقًا قائمًا. لا تُستحدث --gold-l هنا
   وحدها: app.css مشتركٌ بين خمس منصّات، وتعريفها في بيو فقط دون بقيّة
   الملفّات الشقيقة أثاثٌ غير متّسق. أيّ إعادة تلوين للكهرماني مستقبلًا
   يلزمها مسح كل تكرار لِـ#fff8ec في app.css نفسه أيضًا — هذا السطر ليس
   الثغرة الوحيدة، فمعالجته وحده وهمُ إصلاح. */
body.bio .cmp tr.same td{background:var(--teal-l)}
body.bio .cmp tr.diff td{background:#fff8ec}
body.bio .cmp td.blank{color:var(--teal-d);font-weight:700;cursor:pointer}

/* صفٌّ فيه صنفٌ واحد على الأقلّ بلا قيمة مذكورة (bio-cmp.js: full=false) —
   لا يميل أخضر ولا كهرماني، لأنه لا يحمل حكم اتفاق ولا اختلاف؛ خلفيّته
   محايدة بلون البطاقة نفسه لا الأخضر ولا الكهرماني كي لا يُقرأ اتفاقًا
   أو اختلافًا لا أساس له. وخليّة «غير مذكور» بعينها تُخفَت بـ--muted
   المشترك (لا لون جديد) لتمييزها عن قيمةٍ فعليّة داخل السطر نفسه. */
body.bio .cmp tr.partial td{background:var(--card)}
body.bio .cmp td.unk{color:var(--muted);font-style:italic}

/* أداة الرسوم المعنونة (bio-fig.js عبر vFig) — الـsvg يملأ عرض الحاوية
   ويحافظ على نسبته، فلا ينكسر تخطيطه على ٣٧٥px. */
body.bio .fig-box{background:#fafcfb;border:1px solid var(--line);border-radius:var(--r);
  padding:8px;margin-bottom:14px}
body.bio .fig-box svg{width:100%;height:auto;display:block}

/* أداة المفتاح التصنيفي (vKey) — كل خطوة مقطوعة سابقًا تُعرض شارةً صغيرة،
   فيبقى أثر السؤالات التي أُجيب عنها ظاهرًا فوق السؤال الحاليّ. */
body.bio .key-path{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
body.bio .key-step{background:var(--teal-l);color:var(--teal-d);border-radius:8px;
  padding:5px 10px;font-size:13.5px}

/* .why مُستعملة أصلًا في pickBio ومعالج امتحان الرسوم، ولم تكن مُعرَّفة هنا —
   phys.css وحدها تُعرّفها، وهي لا تُشحَن في منصّة الأحياء. */
body.bio .why{background:#fdeceb;border:1px solid #f0b8b3;border-radius:12px;
  padding:13px 16px;margin-top:14px;font-size:15px;line-height:1.9}

/* الرسم الشجريّ الوصفي (bio-clado.js عبر vClado) — قائمةٌ متداخلة تنمو
   عموديًّا لا أفقيًّا عمدًا: فرعٌ أفقيّ (خطوط SVG متفرّعة جنبًا إلى جنب)
   ينكسر على ٣٧٥px، وقائمةٌ متداخلة بإزاحةٍ صغيرة لكل مستوًى لا تنكسر مهما
   عمقت الشجرة لأن كل نصّ يلتفّ داخل عرض الشاشة نفسه (راجع القياس في تقرير
   المهمّة). الإزاحة والخطّ الجانبي بهوية المنصّة (--teal) لا لونٍ صريح. */
body.bio .clado-tree,body.bio .clado-kids{list-style:none;margin:0;padding-inline-start:16px}
body.bio .clado-tree{padding-inline-start:0}
body.bio .clado-node{border-inline-start:2px solid var(--teal-l);padding-inline-start:12px;margin:8px 0}
body.bio .clado-label{display:inline-block;background:var(--teal-l);color:var(--teal-d);
  font-weight:700;border-radius:8px;padding:3px 10px;margin-bottom:4px;font-size:14.5px}
body.bio .clado-leaf{padding-inline-start:12px;margin:4px 0;font-size:15px;
  border-inline-start:2px solid var(--line)}

/* دورة تعاقب الأجيال (bio-lifecycle.js عبر vLifeCycle) — قائمةٌ عمودية لا
   حلقةٌ مرسومة: الحلقة تحتاج عرضًا ثابتًا ينكسر على ٣٧٥px، والقائمة العمودية
   بسهمٍ بين كل طورٍ وتاليه تحمل المعنى نفسه (تعاقبٌ مغلق) وتلتفّ داخل عرض
   الشاشة مهما طال اسم الانتقال. والسطر الأخير يُعيد الدورة إلى أوّلها صراحةً
   فلا تُقرأ قائمةً منتهية. والألوان من هوية المنصّة (--teal) لا صريحة. */
body.bio .lc-ring{list-style:none;margin:0 0 14px;padding:0}
body.bio .lc-phase{border-inline-start:3px solid var(--teal-l);
  padding:8px 12px;margin:0 0 2px}
body.bio .lc-phase.lc-dom{border-inline-start-color:var(--teal);
  background:var(--teal-l);border-radius:10px}
body.bio .lc-name{font-weight:700;font-size:15.5px;color:var(--teal-d)}
body.bio .lc-badge{display:inline-block;background:var(--teal);color:#fff;
  border-radius:999px;padding:2px 9px;margin-inline-start:8px;font-size:12.5px}
body.bio .lc-via{display:block;color:var(--muted);font-size:13.5px;margin-top:4px}
body.bio .lc-back{padding:8px 12px;color:var(--teal-d);font-size:14px;font-weight:700}