/* ════════════════════════════════════════════════════════════════════════════
   أبيلي ٢ — التطبيقُ هو التصميم
   ترجمةٌ حرفيةٌ لأنماط ‎Abeely 2.dc.html‎ (حزمة التسليم 2026-08-20) إلى أصناف.
   المرجع الملزم: docs/design/abeely2-handoff-reference.md — عدِّل بموجبه فقط.
   عالمان على ‎[data-w]‎ بنيوياً، ووضعان على ‎[data-th]‎ لونياً (الداكنُ الأصل).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── الخط الواحد ─────────────────────────────────────────────────────────── */
@font-face{font-family:'Thmanyah Serif Text';src:url('/a/fonts/thmanyah-serif-text-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Text';src:url('/a/fonts/thmanyah-serif-text-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Text';src:url('/a/fonts/thmanyah-serif-text-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Text';src:url('/a/fonts/thmanyah-serif-text-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Thmanyah Serif Text';src:url('/a/fonts/thmanyah-serif-text-black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
/* ── والأوزانُ المكتوبةُ في هذه الورقة هي الأوزانُ الخمسةُ أعلاه، لا سواها ────
   كانت عشرُ قواعدَ تكتب ‎font-weight:600‎ وليس في العائلة وجهٌ بهذا الوزن.
   وقاعدةُ المطابقة في المواصفة صريحةٌ لما فوق الخمسمئة: تُطلَب الأوزانُ الأعلى
   صعوداً قبل الأدنى — فالستُّمئة تُرسَم سبعمئة في كلِّ محرّك. قِيس بعرض النصّ
   نفسِه عند أربعين بكسلاً: خمسمئة ‎392px‎، وستُّمئة ‎399px‎، وسبعمئة ‎399px‎.
   فالمرسومُ سبعمئة، والمكتوبُ صار سبعمئة: لا يتغيّر على الشاشة بكسلٌ واحد،
   ويصدق الملفُّ فلا يقفز عشرةُ مواضعَ فجأةً لو أُضيف وجهُ ستّمئةٍ يوماً. */

/* ── الأرضية واللوحتان — قيمُ التصميم حرفاً ─────────────────────────────────── */
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#F6FAF9}
body{font-family:'Thmanyah Serif Text',serif}
*{box-sizing:border-box}
a{color:#2FA99C;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  a:hover{color:#1F8A7E}
}
button,input,textarea{font-family:inherit}
/* متنفَّسٌ عند الكشف: حين تُكشَف حقلٌ من تحت لوحة المفاتيح (‎§5ج-د‎ في ab2.js)
   يُحسَب هذا الهامشُ معه، فلا يلتصق الحقلُ بحافّة ما يُرى. */
input,textarea,select{scroll-margin-block:18px}
/* وحقلُ بحثٍ تحته قائمةٌ يُكشَف ومعه أوّلُ نتائجه: كشفُ الحقل وحدَه يترك
   النتائجَ تحت الطابع، وهي كلُّ ما فُتحت لوحةُ المفاتيح من أجله. */
.rch__srch input,.pool__srch input{scroll-margin-block-end:150px}
button{-webkit-tap-highlight-color:transparent}
/* وميضُ اللمس الرمادي كان مكتوماً على الأزرار وحدَها، فيومض على كل ‎span‎ و‎div‎
   يحمل ‎data-a‎ — وهو جزءٌ من الإحساس بأن التمريرَ «يحدّد» ما تحته. */
html{-webkit-tap-highlight-color:transparent}
/* الحلقةُ حلقةُ لوحةِ مفاتيح، لا وسمُ اختيارٍ يرسمه إصبع. «يوجد تحديد بالاسود
   على خيار» هو هذا السطرُ بعينه: النافذةُ كانت تنقل التركيزَ قسراً إلى أوّلِ
   زرٍّ فيها، و‎:focus-visible‎ يصدُق على النقل البرمجيّ، فيُرسم إطارٌ أسودُ
   (‎currentColor‎ = ‎#0F211F‎ في الفاتح) حول «افتح الطلب» بلا أن يطلبه أحد.
   عُولج من طرفيه: التركيزُ صار يقف على الحوار نفسِه لا على زرٍّ فيه (‎§9‎)،
   والحلقةُ لا تُرسم إلا وقد لمس المستخدمُ لوحةَ مفاتيحٍ فعلاً — ‎data-kbnav‎
   (وليس ‎data-kb‎: ذاك للّوحة اللينة وحدَها في ‎§5ه‎، ولو اشتركا لأطفأ كلٌّ الآخر)
   يُرفع بأوّلِ مفتاحٍ **ينقل التركيز** (تابٌ أو مفتاحُ تنقّلٍ خارجَ حقل، لا حرفٌ
   يُكتب داخلَه — ‎§12‎) ويسقط بأوّلِ أصبعٍ تهبط. فمن يتنقّل بالمفاتيح يرى أين
   هو، ومن يلمس أو يكتب لا يرى وسماً لم يصنعه.
   وإطفاءُ حلقتِنا وحدَها لا يكفي: للمتصفّح حلقتُه هو (‎outline:auto‎) تحت
   ‎:focus-visible‎ نفسِه، وكانت حلقتُنا تحجبها لا غير — فتُكشَف إن رُفعت. تُطفأ
   الحلقتان معاً، وتُشعَل حلقتُنا وحدَها لمن يستحقّها. */
:focus,:focus-visible{outline:none}
/* ولونُها لونُ الهوية لا الحبر: ‎currentColor‎ يعني الأسودَ في الفاتح، وهو ما
   لا يُراد على أيِّ عنصرٍ في المنصّة — لا حقلاً ولا زرّاً ولا صفّاً. */
html[data-kbnav="1"] :focus-visible{outline:2px solid color-mix(in srgb,var(--acc) 62%,transparent);outline-offset:2px}
/* حاويةُ الحوارِ تُركَّز لتُعلَن، لا لتُؤطَّر — ولا حتى بالمفاتيح: من يتنقّل بها
   يرى الإطارَ على أوّلِ عنصرٍ يدخله، لا على الصندوق كلِّه. */
html[data-kbnav="1"] [tabindex="-1"]:focus-visible{outline:none}
/* والحقلُ لا يُطوَّق مرّتين: طوقُ غلافه أدناه يكفي، وهو وحدَه من يحمل انحناءه.
   وحلقةُ المتصفّح مستطيلةٌ على حقلٍ عارٍ بلا ‎border-radius‎ مهما استدار غلافُه. */
html[data-kbnav="1"] input:focus-visible,
html[data-kbnav="1"] textarea:focus-visible{outline:none}

/* ── طوقُ التركيز — قانونٌ واحدٌ لحقول المنصّة كلِّها ───────────────────────
   الشكوى بحرفها: «الحدودُ السوداءُ هذي اللي تظهر في الحقول… لمّا أبدا أكتب…
   بحدّة زوايا قاسية بلا أدنى جمالية». ولم تكن حدَّ حقلٍ أصلاً، بل ‎outline‎
   حلقةِ المفاتيح فوق: أيُّ ضغطةِ مفتاحٍ كانت ترفع ‎data-kbnav‎ — ولوحةُ الهاتف
   اللينةُ مفاتيحُ هي الأخرى — فأوّلُ حرفٍ يكتبه اللامسُ يُشعلها. وتُشعَل على
   الحقلِ العاري، والعاري بلا انحناء (‎border:0‎ وغلافُه وحدَه من يستدير)، فيُرسم
   مستطيلٌ أسودُ حادُّ الزوايا فوق حقلٍ مستديرٍ تحته.
   عُولج من طرفيه: الكتابةُ لم تعد ترفع الرايةَ (‎§12‎ في ab2.js)، والطوقُ صار
   يُرسم على **غلاف** الحقل لا على الحقل. والغلافُ هو من يملك الانحناءَ المعتمد
   — ٩ للبحث، ١٠ لحقل الإجابة، ١١ للمنتقي والبحث العام، ١٦ للملاحظة، ١٨
   للمؤلّفَين، ٩٩٩ لحبّة الاهتمام — فطوقٌ عليه يتبع انحناءَه بلا أن يُكتب رقمٌ
   مرّتين ولا أن يُنسى واحد. ولونُه ‎--acc‎، وطبقتان لا حدٌّ صلب:
   • ما له حدٌّ: حدُّه يتلوّن، وهالةٌ ٣px تذوب خارجه بلا فُرجةٍ تفصلها عنه.
   • ما لا حدَّ له (حقولُ التعبئة): خيطٌ ‎inset‎ يطوّقه وتينتُ الهوية تغمره.
     و‎inset‎ ضرورةٌ لا ذوق: ‎.sb__srch‎ يسكن غلافاً يطويه ‎overflow:hidden‎
     (‎.sb__srchw‎ و‎.inb__srch‎ يطويان بـ‎max-height‎)، فهالةٌ خارجيةٌ تُقَصُّ من
     ثلاث جهات فتُقرأ عطباً لا طوقاً. والخيطُ الداخليُّ لا يُقَصُّ ولا يزحف الصفَّ
     بكسلاً — ‎box-shadow‎ خارج الحساب، بخلاف حدٍّ يُولَد عند التركيز.
   والثلاثةُ خارج سلَّم ‎--ui‎: هويةٌ لا مقاس، كالزوايا والحدود والظلال.
   ‎:focus-within‎ لا ‎:focus‎ — الغلافُ لا يُركَّز، ابنُه من يُركَّز.
   و‎.prof__bio‎ ليس منها: صار حاضنةً لحقول ‎.ns__f‎ ولكلٍّ منها حدُّه، فطوقٌ
   عليه يرسم طوقين متداخلين. وأيُّ حقلٍ جديدٍ يُضاف إلى إحدى القائمتين، لا إلى
   قاعدةٍ خاصّةٍ به — وإلا عادت الحدودُ السوداءُ من بابٍ آخر. */
.sb__srch,.cbar,.cp__box,.cp__cin,.ofc__in,.ofc__note,.int__add,.eda__ed,.ask__ed,
.rch__srch,.pool__srch,.md__ta,.rpt__in,.ns__f input,.ns__f textarea{
  transition:box-shadow .2s var(--ez),border-color .2s var(--ez),background-color .2s var(--ez)}
/* (أ) ما له حدٌّ */
.ofc__in:focus-within,.ofc__note:focus-within,.rch__srch:focus-within,.pool__srch:focus-within,
.eda__ed:focus-within,
.md__ta:focus,.ns__f input:focus,.ns__f textarea:focus{
  border-color:var(--focus-edge);box-shadow:var(--focus-halo)}
/* (ب) ما لا حدَّ له — حقولُ التعبئة */
.sb__srch:focus-within,.cp__cin:focus-within,.int__add:focus-within,.ask__ed:focus-within{
  background:var(--acc-t);box-shadow:var(--focus-line)}
/* (ج) وللمؤلّفَين ظلُّهما تحت الطوق — لا يُمحى بإشعاله */
.cbar:focus-within,.cp__box:focus-within{
  border-color:var(--focus-edge);box-shadow:var(--focus-halo),var(--shadow)}
[data-th="فاتح"] ::selection{background:#C5E8E3}
[data-th="داكن"] ::selection{background:rgba(98,227,213,.28)}
::-webkit-scrollbar{width:calc(7px * var(--ui));height:calc(7px * var(--ui))}
::-webkit-scrollbar-thumb{background:rgba(128,128,140,.4);border-radius:999px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
::placeholder{opacity:1;color:var(--ink3)}
img{max-width:100%}

/* اللوحتان معرَّفتان على الجذر أيضاً لا على ‎#ab2‎ وحدَه.
   ثلاثُ عقدٍ تعيش خارج ‎#ab2‎ لأنها تعلو كلَّ شيء: الإشعارُ العلويّ ‎#ab2ntf‎
   والتوستُ ‎#ab2tst‎ وشريطُ الحافة — و‎document.body.appendChild‎ يضعها خارج
   نطاق ‎[data-th]‎. فكلُّ ‎var(--…)‎ فيها كان يُحلّ إلى «لا شيء»: أرضيةُ التوست
   شفافةٌ تماماً وحدُّه معدوم، فيُقرأ نصّاً سائباً فوق القائمة متداخلاً بما تحته
   — وهو ما وُصف حرفاً: «بلا خلفية، متداخلة مع اللي وراها، غير واضحة أصلاً».
   ‎data-boot-th‎ يكتبه نمطُ الإقلاع قبل أول طلاء ويجدّده ‎_render‎، فهو المصدرُ
   نفسُه لا مصدرٌ ثانٍ يتباعد. */
/* ══ سلَّمُ الحبر — ثلاثُ درجاتٍ كلُّها تُقرأ، ودرجتان لا تلتبسان ═════════════
   ┌── الرجوعُ من هنا ───────────────────────────────────────────────────────┐
   │ القيمُ التي كانت قبل ٢٠٢٦-٠٨-٢٣، إن أُريد ردُّها:                        │
   │   فاتح:  ‎--ink2:#4C615D‎  ‎--ink3:#7C918C‎  ‎--acc:#0E8C80‎                 │
   │   داكن:  ‎--ink2:#8792A3‎  ‎--ink3:#5F6B7A‎                                │
   │ وسطرٌ سادسٌ معها: عدّادا البحث ‎.srh__n‎ و‎.srm__n‎ يعودان إلى ‎--ink3‎.      │
   │ وأسهلُ منه: ‎git revert‎ للالتزام الذي حمل هذا التعليق — لا يمسّ سواه.      │
   └────────────────────────────────────────────────────────────────────────┘
   قِيس بمقياس المنصّة نفسِه (‎npm run measure:contrast‎ — يقرأ البكسل المرسوم لا
   يحسبه): ثمانٍ وسبعون مخالفةً لعتبة ‎4.5:1‎، كلُّها من رمزين. وصفحةُ الدخول
   تجتاز بصفر — فالمنصّةُ تعرف المعيارَ والتطبيقُ وحدَه كان خارجه.
   والعلاجُ لم يكن رفعَ الحبر الثالث وحدَه: الثالثُ لو رُفع إلى العتبة وحدَه
   لَلَامَسَ الثاني (‎L*‎ أربعةٌ وأربعون مقابل تسعةٍ وثلاثين) فيصير السلّمُ
   درجتين تُقرآن واحدة — وذلك أسوأُ من المخالفة لا علاجُها. فتحرّك الاثنان معاً
   وبقيت المسافةُ بينهما: أحدَ عشرَ ثمّ ثلاثون ثمّ أربعةٌ وأربعون في الفاتح،
   وخمسةٌ وتسعون ثمّ ستّةٌ وسبعون ثمّ ثمانيةٌ وخمسون في الداكن — فُرَجٌ متساويةٌ
   أقربُ ممّا كانت.
   ولونُ الهوية في الفاتح تحته نصٌّ (رقاقةٌ مختارةٌ وزرُّ الطلب): كان ‎3.93:1‎
   وصار ‎4.52:1‎ بإدكانِ ثمانيةٍ بالمئة — والداكنُ سليمٌ أصلاً (‎12.47:1‎) فلم
   يُمَسّ، وظلُّ التمرير ‎--acc-d‎ ما زال أدكنَ من الأصل. */
html[data-boot-th="فاتح"],
[data-th="فاتح"]{
  --bg:#F6FAF9; --side:#ECF3F1; --surf:#FFFFFF; --ink:#0F211F; --ink2:#374B47; --ink3:#566A66;
  --line:rgba(15,33,31,.1); --line2:rgba(15,33,31,.2); --fill:rgba(15,33,31,.05); --fill2:rgba(15,33,31,.09);
  --acc:#0D8176; --acc-d:#0B6E65; --acc-t:#DFF2EF; --acc-tt:#C5E8E3; --acc-ink:#0A6158;
  /* طوقُ التركيز — ثلاثُ طبقاتٍ من لون الهوية، شرحُها عند قواعدها أدناه */
  --focus-halo:0 0 0 3px color-mix(in srgb,var(--acc) 15%,transparent);
  --focus-line:inset 0 0 0 1.5px color-mix(in srgb,var(--acc) 38%,transparent);
  --focus-edge:color-mix(in srgb,var(--acc) 55%,var(--line));
  /* أخضرُ الإتمام: كان ‎#1D8A5F‎ — ‎4.11:1‎ على الأرضية و‎3.81:1‎ على تعبئته
     ‎--ok-t‎، وتحته نصٌّ في الحالين (زرُّ «أكّد الإتمام»، وبلاطةُ «اقبل العرض»،
     وشارتا «موثّق» و«برو»). أُدكِن بالعلاج نفسِه الذي أُدكِن به لونُ الهوية في
     دفعة ٢٠٢٦-٠٨-٢٣: ‎4.99:1‎ على الأرضية و‎4.63:1‎ على تعبئته — والفرقُ
     بالعين درجةٌ واحدة. والداكنُ سليمٌ أصلاً (‎11.31:1‎) فلم يُمَسّ. */
  --ok:#1A7B52; --ok-t:#E4F4EC; --warn:#B45309; --bad:#C0392B; --bad-t:#FAEAE8; --me:#10201E; --me-ink:#F5FAF8;
  /* رماديُّ الشارة: حبرٌ ثالثٌ بلا خُضرة. ‎--ink3‎ نفسُه ‎#7C918C‎ — يصلح نصّاً
     ولا يصلح قرصاً من سبعة بكسلات، فيُقرأ لونَ الهوية فينقلب معنى النقطة.
     وأزرقُ «قيد التنفيذ» صار رمزاً لأنّه يُطلى على ثلاثة أشكال: قرصٌ وفقاعةٌ وإبهام. */
  /* وأزرقُ «قيد التنفيذ» مثلُ الرماديّ سواءً بسواء: ‎#5B8DD6‎ يصلح قرصاً من سبعة
     بكسلاتٍ ولا يصلح حرفاً — ‎3.21:1‎ على الأرضية، وهو حبرُ عمودِ «مقبولة» في
     خطّ الصفقات وشارةِ حالها. فالقرصُ يبقى كما هو ولحبره درجةٌ أدكن
     (‎5.70:1‎ على الأرضية، ‎4.61:1‎ على تعبئته) — القسمةُ نفسُها التي بين
     ‎ST‎ و‎ST_INK‎ في ‎ab2.js‎ حرفاً. وفي الداكن الأزرقُ سليمٌ حبراً (‎8.03:1‎)
     فالدرجتان واحدة. */
  --dot-mute:#9AA1A5; --bl:#5B8DD6; --bl-ink:#2A62B4;
  --bl-t:#E2EBF8;  /* أرضيةُ شارة «مقبول» — حبرُها ‎--bl-ink‎ المقيسُ أعلاه. */
  /* أخضرُ الإيصال على فقاعة كلامي: الفقاعةُ (‎--me‎) داكنةٌ في الوضعين، ولونُ
     الهوية الفاتحُ عليها نحوُ ‎2:1‎ — فلها أخضرُها الفاتح. */
  --me-ok:#6FE0AE;
  --shadow:0 1px 3px rgba(15,33,31,.05); --shadow2:0 6px 22px rgba(15,33,31,.1);
  /* لوحُ التوست: مضادُّ لون الصفحة عمداً — لا يذوب في أيّ شيء تحته */
  --tst-bg:rgba(13,32,29,.96); --tst-ink:#F2F8F6; --tst-line:rgba(255,255,255,.14);
  --tst-shadow:0 12px 34px rgba(15,33,31,.28); --tst-ok:#6FE0AE; --tst-bad:#FF9B90; --tst-warn:#F4C56A;
}
html[data-boot-th="داكن"],
[data-th="داكن"]{
  /* والداكنُ يمشي في الاتجاه المضادّ: الحبرُ يفتحّ ليبتعد عن الأرضية — والفُرَجُ
     هي هي (‎95 ← 76 ← 58‎). ولونُ الهوية فيه لم يُمَسّ. */
  --bg:#0A0D13; --side:#0D111A; --surf:rgba(255,255,255,.045); --ink:#EAF1F5; --ink2:#B5BCC6; --ink3:#858F9B;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16); --fill:rgba(255,255,255,.06); --fill2:rgba(255,255,255,.11);
  --acc:#62E3D5; --acc-d:#43C9BB; --acc-t:rgba(98,227,213,.1); --acc-tt:rgba(98,227,213,.18); --acc-ink:#62E3D5;
  /* والداكنُ يرفع الهالةَ درجةً: تركوازٌ مضيءٌ على ‎#0A0D13‎ يحتاج ٪١٨ ليُقرأ
     ما يقرؤه ٪١٥ من الغامق على أرضيةٍ فاتحة. */
  --focus-halo:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent);
  --focus-line:inset 0 0 0 1.5px color-mix(in srgb,var(--acc) 40%,transparent);
  --focus-edge:color-mix(in srgb,var(--acc) 55%,var(--line));
  --ok:#4ADE9B; --ok-t:rgba(74,222,155,.12); --warn:#E8B34B; --bad:#F0837B; --bad-t:rgba(240,131,123,.13); --me:rgba(98,227,213,.12); --me-ink:#EAF1F5;
  --dot-mute:#6B7683; --bl:#7FA8E8; --bl-ink:#7FA8E8; --me-ok:#5BE3A6;
  --bl-t:rgba(127,168,232,.14);  /* أرضيةُ شارة «مقبول» — حبرُها ‎--bl-ink‎ المقيسُ أعلاه. */
  --shadow:0 1px 3px rgba(0,0,0,.4); --shadow2:0 10px 34px rgba(0,0,0,.5);
  /* في الداكن المضادُّ هو الأفتح: لوحٌ يرتفع عن ‎#0A0D13‎ بحدٍّ وظلٍّ يفصلانه */
  --tst-bg:rgba(31,41,58,.97); --tst-ink:#F2F7FB; --tst-line:rgba(255,255,255,.16);
  --tst-shadow:0 14px 38px rgba(0,0,0,.62); --tst-ok:#5BE3A6; --tst-bad:#FF9E96; --tst-warn:#F2C265;
}
/* ── مقاسُ العرض — مقبضان لا واحد ───────────────────────────────────────────
   ‎--fz‎ يكبّر الحروف (كلُّ font-size في الورقة وفي ab2.js يمرّ به)، و‎--ui‎ يكبّر
   البنية: الحشوَ والفُرَج والأعراض والارتفاعات والأيقونات. الأصلُ 1 لكليهما،
   فقاعدةُ المقاس لا تغيّر بكسلاً واحداً على من لم يختر. ودرجتان فوقه: «كبير»
   و«أكبر» — الحرفُ ينمو أسرعَ قليلاً من البنية عمداً، فيكبر المقروءُ ولا تُبتلع
   الشاشةُ حشواً. الزوايا والحدودُ والظلالُ خارج السلَّم: هي هويةٌ لا مقاس. */
:root{--fzb:1.1;/* مقبضُ حجم الخطوط — 1 يعيدها لأصلها بسطرٍ واحد */
  --zf:1;--ui:1;--fz:calc(var(--fzb) * var(--zf));
  --pad:calc(26px * var(--ui));--gap:calc(14px * var(--ui));--desk:inline;--side-w:calc(296px * var(--ui));--rail:calc(56px * var(--ui));--inbox:calc(292px * var(--ui));--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  /* ── حشوُ اللوحة في طرفها الداخليّ — الطرفُ الذي يلي جارتها ─────────────────
     الطرفان ليسا سواءً وإن تساوى رقمُهما: طرفُ البداية حافّةُ الجهاز، وراءه
     زجاجٌ وحسب؛ وطرفُ النهاية شعرةٌ يقابلها لوحٌ آخر بحشوٍ ستّةٍ وعشرين. وقد
     صارت تلك الشعرةُ مقبضاً يُمسَك ويُسحَب، فحشوٌ أحدَ عشرَ يجعل أوّلَ شيءٍ في
     اللوحة على بُعدِ نصفِ منطقةِ إمساك — والشكوى بحرفها: «زرّ تكبير الخط قريبٌ
     حدّاً وملاصقٌ للجزء حقّ الهيدر». فالطرفُ الداخليُّ يزيد خمسةً على الشاشة
     العريضة وحدَها؛ وفي التكديس لا جارةَ له أصلاً، فحشوُه حشوُ الحافّة كما كان. */
  --sb-pe:calc(11px * var(--ui));
  /* ── حواشي الجهاز أفقياً — نتوءُ الشاشة في الوضع العرضيّ ───────────────────
     ‎viewport-fit=cover‎ يمدّ الصفحةَ تحت النتوء والزوايا المستديرة، وهو
     المطلوبُ لأرضيةٍ تملأ الشاشة. لكنّ التطبيقَ كان يقرأ الحاشيتين العلوية
     والسفلية وحدَهما، والأفقيّتان صفرٌ في الوضع الرأسيّ فلم يظهر العطبُ إلّا
     بالعرض: السكّةُ الجانبيةُ تقع تحت النتوء فتُبتلع أزرارُها. والشكوى بحرفها
     «عالج اختفاء القائمة الجانبية خلف نتوءات الآيفون أو غيره بطريقة تستغلّ
     كامل الشاشة العرضية».
     و«تستغلّ كامل الشاشة» شرطٌ يمنع الحلَّ الكسول (حشوٌ على الجذر يترك شريطين
     ميّتين على الحافّتين): الأرضيةُ تبقى ممتدّةً إلى حافّة الزجاج، والحاشيةُ
     تُدفَع إلى داخل السكّة نفسِها فتتّسع بقدرها ويبقى لونُها تحت النتوء.
     والاتّجاهُ يقلبهما: بدايةُ السطر في العربية يمينُ الشاشة، وفي اللاتينية
     يسارُها — فيُقرأ الجانبان بالمنطق لا بالجهة. */
  --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
  /* لوحةُ المفاتيح — يكتبهما ‎§5ه‎ في ab2.js، وصفرٌ ما لم تُفتح:
     ‎--kb‎ ما تغطّيه اللوحةُ من قاع الشاشة، و‎--kbl‎ ما يجب أن يرتفعه الرصيفُ فوقها.
     وليسا شيئاً واحداً: رصيفٌ لاصقٌ في جوف مُمَرِّرٍ يرفعه الحشوُ المُعارُ وحدَه،
     فرفعُه صفرٌ والتغطيةُ قائمة. الشرحُ الكاملُ فوق ‎kbWrite‎. */
  --kb:0px;--kbl:0px;
  /* سقفُ بطاقة النافذة: مقبضٌ لكلِّ نوعٍ ليبقى للسقف الأصليّ معنىً تحت اللوحة */
  --md-cap:86dvh}
/* الوسطُ هو الجذرُ نفسُه (‎--zf:1;--ui:1‎) فلا سطرَ له هنا: «متوسط» ليس درجةً
   تُطبَّق بل الأصلُ الذي تُقاس منه الدرجتان — أصغرُ منه وأكبر. */
html[data-size="أصغر"]{--zf:.92;--ui:.95}
html[data-size="أكبر"]{--zf:1.14;--ui:1.09}
/* ═══ محورا الاستجابة: الحواشي عرضٌ، والتكديسُ حالُ عرضٍ كاملة ═══════════════
   كانا محوراً واحداً في استعلامٍ واحد، وهما اثنان:
   ① **الحواشي والسكّة والشارات** مسألةُ عرضٍ خالصة — كم بكسلاً بين الحافّة
      والحرف — فتبقى في استعلام الورقة كما كانت.
   ② **التكديس** (لوحٌ واحدٌ يملأ الشاشة أم لوحان جنباً إلى جنب) ليس مسألةَ
      عرضٍ وحدَه: الجوّالُ بالعرض ٩٣٢×٤٣٠ أعرضُ من أن يُكدَّس وأقصرُ من أن
      يُترك بلا لوحين. فحكمُه يُكتب على الجذر من ‎layout()‎ في ab2.js (‎data-lay‎)،
      وهذا هو مصدرُه الوحيد. والاستعلامُ أدناه هو ما قبل الجافاسكربت وحدَه —
      هيكلُ الإقلاع لا يقرأ هذين المقبضين أصلاً، فلا ومضةَ تخطيطٍ تُرى. */
@media (max-width:960px){:root{--pad:calc(14px * var(--ui));--gap:calc(12px * var(--ui));--desk:none;--rail:calc(48px * var(--ui));--side-w:100%;--inbox:100%}}
/* وعرضُ اللوحة على الشاشة العريضة يقبل يدَ صاحبه: ‎--side-user‎/‎--inbox-user‎
   يكتبهما ‎§5ج-ز‎ على الجذر متى سُحِب المقبض، والبديلُ في القوس هو المقاسُ
   المصمَّمُ لمن لم يختر — فيتبع سلَّمَ ‎--ui‎ كما كان. والتكديسُ لا يراهما أصلاً:
   لوحٌ يملأ الشاشة لا فاصلَ فيه يُمسَك. */
html[data-lay="wide"]{--side-w:var(--side-user,calc(296px * var(--ui)));--inbox:var(--inbox-user,calc(292px * var(--ui)));--sb-pe:calc(16px * var(--ui))}
html[data-lay="stack"]{--side-w:100%;--inbox:100%}

@keyframes ab-sweep{to{transform:rotate(360deg)}}
@keyframes ab-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes ab-pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes ab-dot{0%,100%{opacity:.3;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}
@keyframes ab-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ab-slide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ab-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 50%,transparent)}75%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes ab-glow{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}to{box-shadow:0 0 0 16px transparent}}
@keyframes ab-fade{from{opacity:0}to{opacity:1}}
/* ── دخولُ اللوح: تدرّجٌ لطيفٌ لا نطّة ─────────────────────────────────────────
   «أريد فتحَه للبوب وإغلاقَه وانطواءَه وظهورَه بأنيميشن سلسٍ ناعمٍ تدريجيٍّ لطيف،
   وليس قاسياً — أريد تكون تلك عادةَ المنصّة عندي». وكان اللوحُ يدخل بـ‎ab-pop‎ على
   ‎--ez-b‎: من ‎scale(.88)‎ بارتدادةٍ فوق الواحد (‎1.56‎) — نطّةٌ تُرى قسوتُها على
   لوحٍ بمساحة نصف الشاشة وإن حسنت على رقاقةٍ صغيرة. فصار له مدخلُه: مقياسٌ لا
   يكاد يُقاس، وإزاحةٌ يسيرةٌ من تحت، وتلاشٍ على منحنى الاستقرار ‎--ez‎ وحدَه.
   و‎ab-pop‎ باقيةٌ لأهلها — الرقاقاتُ والشاراتُ الصغيرةُ التي تظهر من عدم. */
@keyframes ab-mdin{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ab-logo{from{opacity:0;transform:scale(.55) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes ab-phin{from{opacity:0;transform:translateY(7px)}to{opacity:.85;transform:none}}
@keyframes ab-phin2{from{opacity:0;transform:translateY(7px)}to{opacity:.85;transform:none}}
@keyframes ab-sheen{from{opacity:0}to{opacity:1}}

/* ══ حركاتُ الدخول تُنادى بأسمائها من هنا ══════════════════════════════════════
   ‎_render‎ يهدم شجرةَ التطبيق ويبنيها على كلِّ رسم. وحركةُ الدخول المكتوبةُ في
   قاعدةِ العنصر نفسِه تُعاد كلَّما أُعيد بناؤه — أي على كلِّ رسمٍ لا على كلِّ
   ظهور. فنبضةُ استطلاعٍ كلَّ ٢٥ ثانية، أو حدثٌ حيٌّ، أو لمسةٌ على زرٍّ لا يخصّ
   البطاقة: كلُّها كانت تُقفِز الشاشةَ كلَّها. قِيسَ على صفحة الاهتمامات: رسمٌ
   خلفيٌّ لا يغيّر حرفاً واحداً يُقفِز ستّةَ عناصر — بطاقتان لكلِّ اهتمام.
   فالأسماءُ صارت متغيّراتٍ ترثها الشجرة: ‎.nofx‎ على لوحِ الصفحة يجعلها ‎none‎
   دفعةً واحدة، فلا حركةَ دخولٍ لرسمٍ لم يفتح شاشة. والحركاتُ التي تصف عملاً
   جارياً — دوّارةٌ، وهيكلٌ، ونقاطُ كتابة، ونبضُ تسجيل — تُسمّى مباشرةً بلا
   متغيّر فلا يمسّها هذا المفتاح: ليست دخولاً يُعاد بل عملاً يستمرّ. */
:root{--fx-pop:ab-pop;--fx-rise:ab-rise;--fx-slide:ab-slide;--fx-grow:ab-grow;--fx-glow:ab-glow;
  /* والنبضتان معهنّ: «فيه جديد» خبرٌ يُعلَن مرّةً لا حالٌ تُعاد مع كلِّ بناء.
     و‎pingOn‎ في ab2.js يمنعهما عند المصدر؛ وهذا حارسُ الباب الثاني — رسمٌ
     خلفيٌّ لا يفتح شاشةً لا يُطلق نبضةً كائناً ما كان مصدرُها. */
  --fx-ping:ab-ping;--fx-pingc:ab-pingc;
  /* منحنيا أبيلي: خروجٌ هادئٌ لِما يستقرّ (‎--ez‎)، وارتدادةٌ خفيفةٌ لِما يظهر
     من عدمٍ (‎--ez-b‎). كانا يُنسخان حرفاً في كلِّ قاعدة، فاختلفت الأرقامُ بين
     سطحٍ وسطحٍ بلا قصد — والاسمُ يجمعها فيصير للتطبيق إيقاعٌ واحد. */
  /* ومنحنىً ثالثٌ لسطحٍ يغادر الشاشةَ ويعود — لا لقيمةٍ تستقرّ: ‎--ez‎ خروجٌ
     مفرِطُ التقدُّم (‎.16,1‎) يقطع ثمانين بالمئة من الطريق في ثلثه الأوّل ثم
     يزحف، وهو صوابٌ لصفٍّ ينزلق أو رقاقةٍ تُختار، وقاسٍ لبطاقةٍ بارتفاعِ سطرين
     تنطوي وتنفرد فوق المحادثة — «قساوة في طيّ وتوسيع العنصر العائم». وهذا منحنى
     استقرار الأوراق في iOS، وهو مقيسٌ لا مختار (‎liquid-glass-research.md‎). */
  --ez:cubic-bezier(.16,1,.3,1);--ez-b:cubic-bezier(.34,1.56,.64,1);--ez-s:cubic-bezier(.32,.72,0,1)}
.nofx{--fx-pop:none;--fx-rise:none;--fx-slide:none;--fx-grow:none;--fx-glow:none;--fx-ping:none;--fx-pingc:none}

/* ── الجذر ──────────────────────────────────────────────────────────────────── */
#ab2{transition:background .3s ease,color .3s ease;direction:rtl;height:100dvh;width:100%;display:flex;align-items:stretch;background:var(--bg);color:var(--ink);font-size:calc(14px * var(--fz));line-height:1.6;overflow:hidden;padding-top:var(--safe-t);--safe-s:var(--safe-r);--safe-e:var(--safe-l);padding-inline-end:var(--safe-e)}
html[dir="ltr"] #ab2{direction:ltr;--safe-s:var(--safe-l);--safe-e:var(--safe-r)}
/* لوحةُ المفاتيح تقتطع من المرئيِّ ولا تمسّ ‎100dvh‎، فيبقى نصفُ التطبيق تحتها
   ويُدفع الباقي إلى أعلى ليُكشَف الحقل. الجذرُ يقصر إلى ما يُرى ما دامت مفتوحة،
   فينزل المؤلِّفُ وأزرارُ الشاشة فوقها لا تحتها، وتبقى الشاشةُ في مكانها. */
/* و‎min-height:0‎ لازمة: هيكلُ الإقلاع في ‎index.html‎ يكتب ‎#ab2{min-height:100dvh}‎
   قبل أن تصل هذه الورقة، وأرضيةٌ بالشاشة كاملةً تُبطِل كلَّ قصر — قِيس: الارتفاعُ
   يبقى ٨٤٤ والطابعُ يغطّي ٣٣٦ منها. */
.an{animation-fill-mode:backwards;animation-delay:calc(min(var(--i,0)*.05s,.42s))}
[data-motion="هادئ"] .an{animation-delay:0s!important}
[data-motion="هادئ"] .ping{animation:none!important;box-shadow:none!important}
.rise{animation:ab-rise .38s var(--ez) backwards}
/* واثنتان كانتا خارجَ المفتاح فبقيت الغمزةُ فيهما وحدَهما: ‎.pop‎ و‎.slidein‎
   تُكتبان في الوسم بيدٍ لا ذاكرةَ لها (بخلاف ‎.rise‎ التي يمنحها ‎riseCls‎ أوّلَ
   ظهورٍ ثم يحرمها)، فكلُّ رسمٍ خلفيٍّ يُعيدهما: مؤلّفُ العرض ينزلق من تحت
   الحافّة، وبطاقاتُ اللوح والمؤشّراتُ تنطّ — بلا فعلِ أحد. وهي بعينها الشكوى
   العائدة: «ربكةٌ واهتزازاتٌ في بعض الصفحات من دون أيِّ إجراء». والاسمُ
   متغيّرٌ فيسكت مع أخواته حين لا تُفتَح شاشة. */
.pop{animation:var(--fx-pop) .35s var(--ez-b) backwards}
.slidein{animation:var(--fx-slide) .28s var(--ez) backwards}
/* نبضةُ الانتباه تلفت ثم تصمت. كانت ‎infinite‎ — نبضٌ أبديٌّ على شاشةٍ ساكنة
   لا يقول شيئاً بعد أوّلِ مرة، واللونُ وحدَه يكفي لحمل الحالة بعدها. */
.ping{animation:var(--fx-ping) 2.4s ease-out 3}
.spin{width:calc(11px * var(--ui));height:calc(11px * var(--ui));flex:0 0 auto;border-radius:999px;border:1.5px solid var(--acc);border-top-color:transparent;animation:ab-sweep .7s linear infinite}
bdi{unicode-bidi:isolate}
/* التلميحُ الذي لا يسع سطرَ حقلٍ واحدٍ يُختَم بثلاث نقاطٍ لا يُقَصُّ في منتصف
   كلمة: المتصفّحُ يقصّ الفائضَ صمتاً، فيُقرأ التلميحُ ناقصاً كأنّه كُتب هكذا. */
input::placeholder{text-overflow:ellipsis}
/* ══ التلميحُ لا يقيس الحقلَ ولا يُمرَّر فيه ══════════════════════════════════
   «فيه سكرولات تتحكم بالبلاك هولدرات … ولاحظت انه غير متوسط … يفترض انه سطر،
   ولا يخضع لطول البلاك هولدر».
   وعلّتُهما واحدة: ‎field-sizing:content‎ يقيس الحقلَ الفارغَ بمحتواه، ومحتوى
   الفارغِ تلميحُه. فتلميحٌ يلفّ سطرين يجعل شريطَ الكتابة سطرين وهو فارغ — فلا
   يبدو النصُّ متوسّطاً لأنه ليس متوسّطاً، إنّما هو أوّلُ سطرين — والزائدُ عمّا
   يُرى يبقى قابلاً للتمرير داخل الحقل، فيُسحب التلميحُ بالأصبع كأنّه نصٌّ مكتوب.
   فالفارغُ يُقاس بصفّه لا بتلميحه (‎field-sizing:fixed‎ مع ‎rows="1"‎)، والتلميحُ
   سطرٌ لا يلتفّ ويُختَم بثلاث نقاطٍ إن طال. ومتى كُتب حرفٌ سقطت الحالةُ وعاد
   القياسُ بالمحتوى، فينمو الشريطُ مع السطر الجديد كما كان.
   ولا يُدخَل في هذا صندوقٌ وُلد متعدّدَ الأسطر (‎.cp__box‎، ‎.md__ta‎، سيرةُ
   المتجر): ارتفاعُه الأدنى مكتوبٌ بيدٍ ولا يقرؤه من تلميحه أصلاً. */
.cbar textarea:placeholder-shown,.ofc__note textarea:placeholder-shown{field-sizing:fixed;overflow:hidden}
.cbar textarea::placeholder,.ofc__note textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── اتجاهُ الأيقونة اتجاهُ القراءة ────────────────────────────────────────────
   ‎.icd‎ الأيقوناتُ الاتجاهيّةُ المرسومةُ للعربية: ‎back‎ يشير يميناً — إلى حيث
   تبدأ القراءةُ ومن حيث تخرج إيماءةُ الرجوع — و‎chevL‎ يساراً إلى حيث تمضي.
   فتنقلبان في اللاتينية وحدَها، ويصير كلُّ ما في الشاشة مرآةَ نفسِه: الموضعُ
   بـ‎inset-inline‎ والسهمُ بهذه القاعدة، لا موضعٌ ينقلب وسهمٌ يثبت.
   ‎.icf‎ المرسومةُ للاتينية (فقاعةُ المحادثة وطائرةُ الإرسال: ذيلٌ ورأسٌ يميناً)،
   فتُقلب في العربية وحدَها وتعود إلى أصلها في اللاتينية.
   يكتبهما ‎svg()‎ في ‎ab2.js‎: ‎.icd‎ من جدول ‎IC_DIR‎، و‎.icf‎ من ‎FLIP‎ عند النداء. */
html[dir="ltr"] .icd{transform:scaleX(-1)}
.icf{transform:scaleX(-1)}
html[dir="ltr"] .icf{transform:none}

/* ── ذرّاتُ التصميم ─────────────────────────────────────────────────────────── */
/* رقاقة: 999، مختارةٌ تُعبَّأ بالتركواز ونصُّها الأرضية */
.chip{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));flex:0 0 auto;white-space:nowrap;padding:calc(4px * var(--ui)) calc(11px * var(--ui));border-radius:999px;cursor:pointer;font-size:calc(11.5px * var(--fz));font-family:inherit;transition:background .16s,color .16s,border-color .16s,transform .16s var(--ez);border:1px solid var(--line);background:transparent;color:var(--ink2)}
/* الرقاقةُ أكثرُ ما يُنقر في المنصّة، وكانت وحدَها بلا ردٍّ تحت الإصبع بينما
   لكلِّ زرٍّ سواها انكماشةٌ تقول «وصلَتك». */
.chip:active{transform:scale(.96)}
.chip b{font-weight:500;opacity:.6}
.chip.on{border-color:transparent;background:var(--acc);color:var(--bg);font-weight:500}
.chip.on b{opacity:.8}
.chip--dash{border-style:dashed;border-color:var(--line2);color:var(--acc-ink)}
@media (hover:hover) and (pointer:fine){
  .chip--dash:hover{background:var(--acc-t)}
}
/* مقطع: حاويةٌ 2px داخلها أزرار 7px 11px */
.seg{display:inline-flex;gap:calc(2px * var(--ui));padding:calc(2px * var(--ui));border-radius:9px;background:var(--fill)}
.seg--flex{display:flex}
.segb{position:relative;padding:calc(5px * var(--ui)) calc(11px * var(--ui));border:0;border-radius:7px;cursor:pointer;font-size:calc(11px * var(--fz));font-family:inherit;transition:background .16s,color .16s,transform .16s var(--ez);background:transparent;color:var(--ink2)}
/* ── ما تُصيبه الأصبعُ أوسعُ ممّا تراه العين ──────────────────────────────────
   البلاطةُ في الشريط مقصودةُ الصِّغَر — هي مبدّلُ عرضٍ لا زرَّ فعل — وتشتدّ
   ضِيقاً في الوضع العريض القصير (الجوّالُ بالعرض) حيث تُشدّ الحواشي رأسياً:
   قِيست ‎34×22‎، ودون الأربعة والعشرين التي يشترطها ‎WCAG 2.5.8‎ للهدف.
   والعلاجُ ليس تكبيرَ البلاطة — فيكبر معها الشريطُ ويزاحم الرأسَ الذي شُدّ
   عمداً — بل توسيعُ ما تُصيبه الأصبع وحدَه: طبقةٌ شفّافةٌ تمتدّ فوق البلاطة
   وتحتها إلى أربعةٍ وعشرين، والعرضُ كما هو (أربعةٌ وثلاثون يكفي). وهي ابنةُ
   الزرّ فالنقرةُ عليها نقرةٌ عليه، ولا تزحف جانباً فلا تسرق نقرةَ جارتها. */
.segb::after{content:"";position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);
  height:max(100%,24px);pointer-events:auto}
.segb:active{transform:scale(.97)}
.segb.on{background:var(--acc);color:var(--bg);font-weight:700}
/* ── الشريطُ ذو القرص المنزلق ────────────────────────────────────────────────
   كان الاختيارُ يُطفأ هنا ويُشعَل هناك في إطارٍ واحد، فلا تعرف العينُ من أين
   ذهبَ إلى أين. القرصُ طبقةٌ واحدةٌ تحت الأزرار ينزلق بينها، يُقاس موضعُه وعرضُه
   في ‎segThumbPaint‎ بإحداثيّاتٍ فيزيائية — ولذلك ‎left:0‎ لا ‎inset-inline-start‎:
   ‎offsetLeft‎ و‎translateX‎ كلاهما يُقاس من اليسار في الاتجاهين، فيتّفق الثلاثة. */
.seg--th{position:relative;isolation:isolate}
.seg--th>.seg__th{position:absolute;left:0;top:calc(2px * var(--ui));bottom:calc(2px * var(--ui));width:0;z-index:0;
  border-radius:7px;background:var(--acc);pointer-events:none;
  transition:transform .34s var(--ez),width .34s var(--ez)}
.seg--th>.segb{position:relative;z-index:1}
/* اللونُ وحدَه يبقى للزرّ، والأرضيةُ صارت للقرص */
.seg--th>.segb.on{background:transparent}
[data-motion="هادئ"] .seg--th>.seg__th{transition:none}
@media (prefers-reduced-motion:reduce){
  .seg--th>.seg__th{transition:none}
}
.segb--w{flex:1;text-align:center}
/* شريطُ المؤلّف يملأ سطرَه وأزرارُه لا تنكسر: ‎flex:1‎ بأساسٍ صفريٍّ يسوّي
   الأعراضَ فيلتفّ «سعر ثابت» سطرين إلى جانب «نطاق»، والأساسُ ‎auto‎ يمنح كلَّ
   زرٍّ مقاسَ كلمته ثمّ يقسم الفائضَ بينهم بالسواء. */
.segb--g{flex:1 1 auto;text-align:center;white-space:nowrap;padding-inline:calc(6px * var(--ui))}
/* كرةُ إرسالٍ 36 — كلُّ أزرار الإرسال الأيقونية دائرية 36×36 (قانون التصميم) */
.icb{display:inline-flex;align-items:center;justify-content:center;width:calc(36px * var(--ui));height:calc(36px * var(--ui));flex:0 0 auto;border:0;border-radius:999px;background:var(--acc);color:var(--bg);cursor:pointer;transition:background .16s,opacity .16s,transform .15s var(--ez),box-shadow .2s}
.icb:active{transform:scale(.92)}
.icb[disabled]{opacity:.38;cursor:not-allowed;box-shadow:none}
.icb:not([disabled]){box-shadow:0 4px 14px color-mix(in srgb,var(--acc) 35%,transparent)}
.icb--ghost{background:var(--fill);color:var(--ink2);box-shadow:none!important}
@media (hover:hover) and (pointer:fine){
  .icb--ghost:hover{background:var(--fill2)}
}
.icb--rec{background:var(--bad)!important;color:var(--bg)!important;animation:ab-ping 1.1s ease-out infinite}
/* زرُّ أدواتٍ 32 بزوايا 9 */
.tb{display:inline-flex;align-items:center;justify-content:center;width:calc(32px * var(--ui));height:calc(32px * var(--ui));flex:0 0 auto;border-radius:9px;border:0;background:var(--fill);color:var(--ink);cursor:pointer;transition:background .16s}
@media (hover:hover) and (pointer:fine){
  .tb:hover{background:var(--fill2)}
}
.tb.on{background:var(--fill2)}
/* مفتاح 38×22 يخضرّ وينزلق يساراً */
.tgl{position:relative;width:calc(38px * var(--ui));height:calc(22px * var(--ui));flex:0 0 auto;border-radius:999px;transition:background .18s;background:var(--fill2);display:inline-block}
.tgl i{position:absolute;top:calc(2.5px * var(--ui));inset-inline-start:calc(2.5px * var(--ui));width:calc(17px * var(--ui));height:calc(17px * var(--ui));border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s var(--ez)}
.tgl.on{background:var(--ok)}
/* مسافةُ الانزلاق تتبع عرضَ المفتاح: 38 − 17 − 2.5×2 — وإلا وقفت الكرةُ دون الطرف */
.tgl.on i{transform:translateX(calc(-16px * var(--ui)))}
html[dir="ltr"] .tgl.on i{transform:translateX(calc(16px * var(--ui)))}
/* رقاقةُ توسيعٍ 27 دائرية */
.chev27{display:inline-flex;align-items:center;justify-content:center;width:calc(27px * var(--ui));height:calc(27px * var(--ui));flex:0 0 auto;border-radius:999px;background:var(--fill);color:var(--ink3);border:0;cursor:pointer;transition:transform .22s var(--ez),background .16s,color .16s}
@media (hover:hover) and (pointer:fine){
  .chev27:hover{background:var(--fill2);color:var(--ink)}
}
/* عمودُ عنوانٍ وسطرٍ فرعي — الفُرجة 2.5 والقصُّ بلا قصِّ نوازل */
.tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2.5px * var(--ui))}
.tt>bdi,.tt>.tt1{font-weight:700;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tt>.tt2{font-size:calc(11px * var(--fz));color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* الاسمُ إلى جانب صورته — أياً كانت لغتُه.
   ‎bdi‎ يستنبط اتجاهَه من أول حرفٍ قويٍّ فيه، فيصير اتجاهُ «‎Vinod Auto Parts‎»
   ‎ltr‎ داخلَ واجهةٍ ‎rtl‎، و‎text-align:start‎ يُحسب حينئذٍ على اتجاه الاسم لا
   على اتجاه الواجهة: فيقفز الاسمُ اللاتينيُّ إلى الطرف المقابل من الصفِّ
   بعيداً عن صورته (والعربيُّ مثلُه في واجهةٍ لاتينية). نثبّت المحاذاة على جهة
   الواجهة، ويبقى ترتيبُ الحروف داخلَ الاسم على اتجاهه هو. يخصُّ سطرَ الاسم
   والعنوانِ المقصوصَ في الصفوف وحدَه — أما نصُّ الرسائل والملاحظات فيتبع
   اتجاهَ كاتبه كما هو. */
.kid__n,.tr__t,.ir__t,.cmp__n,.tt>bdi,.tt>.tt1,.md__r>bdi{text-align:right}
html[dir="ltr"] .kid__n,html[dir="ltr"] .tr__t,html[dir="ltr"] .ir__t,html[dir="ltr"] .cmp__n,
html[dir="ltr"] .tt>bdi,html[dir="ltr"] .tt>.tt1,html[dir="ltr"] .md__r>bdi{text-align:left}
/* حبّةُ ملاحظةٍ وسطى */
.noteP{display:flex;align-items:center;gap:calc(7px * var(--ui));align-self:center;padding:calc(6px * var(--ui)) calc(13px * var(--ui));border-radius:999px;background:var(--fill);font-size:calc(11px * var(--fz));color:var(--ink3);line-height:1.6;text-align:center}
/* سطرُ نظام */
.sysL{display:flex;align-items:center;gap:calc(8px * var(--ui));font-size:calc(11.5px * var(--fz));font-weight:500;color:var(--acc-ink);line-height:1.6}
.sysSpin{position:relative;width:calc(18px * var(--ui));height:calc(18px * var(--ui));flex:0 0 auto;border-radius:999px;overflow:hidden;background:var(--acc-t);display:grid;place-items:center}
.sysSpin::before{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0deg,var(--acc) 70deg,transparent 72deg);animation:ab-sweep 2.2s linear infinite}
.sysSpin::after{content:'';position:relative;width:calc(4px * var(--ui));height:calc(4px * var(--ui));border-radius:999px;background:var(--acc)}
/* نقطةُ حالٍ 7 */
.dot7{width:calc(7px * var(--ui));height:calc(7px * var(--ui));flex:0 0 auto;border-radius:999px}
/* بلاطةُ أيقونة */
.tile{flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:var(--acc-t);color:var(--acc-ink)}
/* عدّادُ ترجمة/رقاقة إفصاح */
.trc{align-self:flex-start;display:inline-flex;align-items:center;gap:calc(5px * var(--ui));padding:calc(3px * var(--ui)) calc(9px * var(--ui));border:0;border-radius:999px;background:var(--acc-t);color:var(--acc-ink);font-size:calc(10px * var(--fz));font-weight:500;cursor:pointer;font-family:inherit;max-width:100%;text-align:start;line-height:1.6}
.trc>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.trc>svg{flex:0 0 auto}
/* «عرض الترجمة» — الكلماتُ على الشاشة هي التي كُتبت، والرقاقةُ تعرض لا تُفصح.
   فتُطفأ نبرتُها: لا تنافس نصّاً لم يُمَسّ. */
.trc--off{background:var(--fill);color:var(--ink3)}
/* الانتظارُ يُرى: ترجمةٌ في الطريق ليست «لا ترجمةَ لهذا» — والفرقُ بينهما هو ما
   كان القارئُ يجهله فيظنّ الميزةَ معطّلة. */
.trc--wait{cursor:default}
.trc__d{display:inline-flex;align-items:center;gap:calc(2px * var(--ui))}
.trc__d>i{width:calc(3px * var(--ui));height:calc(3px * var(--ui));border-radius:999px;background:currentColor;animation:trdot 1s ease-in-out infinite}
.trc__d>i:nth-child(2){animation-delay:.16s}
.trc__d>i:nth-child(3){animation-delay:.32s}
@keyframes trdot{0%,60%,100%{opacity:.25}30%{opacity:1}}
[data-motion="هادئ"] .trc__d>i{animation:none;opacity:.55}
/* شارةُ إفصاحٍ بلا فعل — لصفٍّ هو زرٌّ في ذاته فلا يقبل زرّاً بداخله */
.trm{flex:0 0 auto;display:inline-flex;color:var(--acc-ink);opacity:.75}
/* مِفتاحُ المحادثة الواحدة: ملتصقٌ بسقف المُمَرِّر فيبقى في العين، والخيطُ يُفتَح
   على آخِره فلا ينفع مِفتاحٌ يسكن أوّلَه ويمضي. */
/* ولاصقٌ ثانٍ في الموضع نفسِه: الرقاقةُ العائمةُ تعلوه، فينزل من تحتها متى حضرت
   ويعود متى غابت — بمنحناها ومدّتها، فلا يُرى انتقالٌ ثانٍ يخالف الأوّل. */
/* ── دعوةُ الزائر فوق صفوف السوق (المحرّك: ‎renderINB‎) ────────────────────────
   «أتِحْ تصفّحَ الطلبات كلِّها لغير المشتركين … لكن ما يقدر يسوّي شيئاً حتى
   يسجّل». فالصفوفُ تُقرأ كما هي، وفوقها شريطٌ يقول من أنت هنا وما طريقُك —
   شريطٌ لا لوحٌ يحلُّ محلَّ ما جاء القارئُ من أجله. */
.inb__lead{display:flex;align-items:center;gap:calc(10px * var(--ui));
  padding:calc(11px * var(--ui)) calc(13px * var(--ui));margin-bottom:calc(10px * var(--ui));
  border:1px solid var(--line);border-radius:14px;background:var(--acc-t);color:var(--ink)}
.inb__lead>svg{flex:0 0 auto;color:var(--acc-ink)}
.inb__lc{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2px * var(--ui))}
.inb__lc b{font-size:calc(12.5px * var(--fz));font-weight:700}
.inb__lc span{font-size:calc(11px * var(--fz));line-height:1.65;color:var(--ink2)}
.inb__lgo{flex:0 0 auto;border:0;border-radius:999px;background:var(--acc);color:var(--bg);
  padding:calc(7px * var(--ui)) calc(13px * var(--ui));font-size:calc(11.5px * var(--fz));
  font-weight:700;font-family:inherit;cursor:pointer;transition:background .16s,transform .15s var(--ez)}
.inb__lgo:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.inb__lgo:hover{background:var(--acc-d)}}
/* ومقعدُ مؤلّف العرض حين يجلس فيه زائر: الشكلُ شكلُ الرصيف، والمتنُ دعوة. */
.ofc--gate{padding-top:calc(10px * var(--ui))}
.ofg{display:flex;align-items:center;gap:calc(11px * var(--ui));
  max-width:calc(640px * var(--ui));margin:0 auto;
  padding:calc(12px * var(--ui)) calc(14px * var(--ui));border-radius:16px;
  border:1px solid var(--line);background:var(--surf);box-shadow:var(--shadow)}
.ofg>svg{flex:0 0 auto;color:var(--acc-ink)}
.ofg__c{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2px * var(--ui))}
.ofg__c b{font-size:calc(13px * var(--fz));font-weight:700}
.ofg__c span{font-size:calc(11px * var(--fz));line-height:1.7;color:var(--ink2)}
.ofg__go{flex:0 0 auto;display:inline-flex;align-items:center;gap:calc(6px * var(--ui));
  border:0;border-radius:999px;background:var(--acc);color:var(--bg);
  padding:calc(9px * var(--ui)) calc(15px * var(--ui));font-size:calc(12px * var(--fz));
  font-weight:700;font-family:inherit;cursor:pointer;transition:background .16s,transform .15s var(--ez)}
.ofg__go:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.ofg__go:hover{background:var(--acc-d)}}

.trth{position:sticky;top:0;z-index:3;pointer-events:none;padding-block:calc(2px * var(--ui));
  transition:top .34s var(--ez)}
.th.ctx-on .trth{top:calc(46px * var(--ui))}
.trth__b{pointer-events:auto;display:inline-flex;align-items:center;gap:calc(6px * var(--ui));padding:calc(4px * var(--ui)) calc(12px * var(--ui));border:1px solid var(--line);border-radius:999px;background:var(--surf);color:var(--ink2);font-size:calc(10px * var(--fz));font-weight:700;font-family:inherit;cursor:pointer;box-shadow:var(--shadow)}
.trth__b.on{background:var(--acc-t);border-color:transparent;color:var(--acc-ink)}
/* هيكلُ انتظار */
.skel{border-radius:12px;background:var(--fill);overflow:hidden;position:relative}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--fill2),transparent);animation:ab-sweep 0s linear;transform:translateX(-100%);animation:skm 1.2s linear infinite}
@keyframes skm{to{transform:translateX(100%)}}

/* ════ البوابة ════ */
.pt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(22px * var(--ui));padding:calc(32px * var(--ui))}
.pt__logo{width:calc(46px * var(--ui));height:calc(46px * var(--ui));border-radius:14px;background:var(--acc);display:grid;place-items:center;color:var(--bg)}
.pt__t{margin:0;font-size:calc(25px * var(--fz));font-weight:900;text-align:center;font-feature-settings:'dlig' 1,'jalt' 1,'ss01' 1,'calt' 1}
.pt__cards{width:100%;max-width:calc(340px * var(--ui));display:flex;flex-direction:column;gap:calc(9px * var(--ui))}
.pt__c{display:flex;align-items:center;gap:calc(11px * var(--ui));padding:calc(14px * var(--ui));border-radius:15px;border:1px solid var(--line);background:var(--surf);color:var(--ink);cursor:pointer;text-align:start;box-shadow:var(--shadow);transition:border-color .16s,transform .16s var(--ez),box-shadow .2s;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .pt__c:hover{border-color:var(--line2);transform:translateY(-1px)}
}
.pt__c:active{transform:scale(.98)}
.pt__c--biz{border:0;background:var(--me);color:var(--me-ink)}
.pt__tile{width:calc(34px * var(--ui));height:calc(34px * var(--ui));flex:0 0 auto;border-radius:11px;background:var(--acc-t);display:grid;place-items:center;color:var(--acc-ink)}
.pt__c--biz .pt__tile{background:rgba(255,255,255,.12);color:var(--me-ink)}
.pt__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2.5px * var(--ui))}
.pt__tx b{font-size:calc(14.5px * var(--fz));font-weight:900}
.pt__tx span{font-size:calc(11px * var(--fz));color:var(--ink3)}
.pt__c--biz .pt__tx span{color:inherit;opacity:.6}
.pt__c>svg:last-child{color:var(--ink3);flex:0 0 auto}
.pt__c--biz>svg:last-child{color:inherit;opacity:.55}
/* ── كيف تعمل — ثلاثةُ أسطرٍ بعرض البطاقتين، رقاقاتُها في عمودٍ واحد ──
   وكانت سطراً أفقياً بأسهم يلتفّ على الضيّق فيصير سطرين ونصفاً. */
.pt__how{width:100%;max-width:calc(340px * var(--ui));display:flex;flex-direction:column;align-items:flex-start;gap:calc(9px * var(--ui))}
.pt__st{display:flex;align-items:center;gap:calc(9px * var(--ui));font-size:calc(11.5px * var(--fz));color:var(--ink2)}
.pt__sn{width:calc(22px * var(--ui));height:calc(22px * var(--ui));flex:0 0 auto;border-radius:8px;background:var(--acc-t);color:var(--acc-ink);display:grid;place-items:center}

/* ════ عالم العميل — الشجرة الجانبية ════ */
/* ── أرضيّةُ طلباتي: بيضاءُ كصندوق الواردة، وهويّةٌ باقيةٌ في رأسها ────────────
   أمرُ صاحب المنصّة: «اجعل لون خلفية منطقة طلباتي مثل خلفية منطقة الطلبات
   الواردة للمتجر بيضاء بطريقةٍ متناسقة دون افقاد الهوية للهيدر وغيره».
   وكانت اللوحةُ كلُّها ‎--side‎ من حافّةٍ إلى حافّة — رأسُها وقائمتُها سواء — فصفوفُ
   طلباتك تُقرأ على أرضيّةٍ ملوّنةٍ لا تشبه صفوفَ الواردة، وما يهبط فيها مرسوماً
   بوصفة ‎--surf‎ (قرصُ السحب للتحديث خاصّةً) يهبط غريباً عن أرضيّته.
   فصارت القسمةُ قسمةَ عالم المتجر بعينها، لا لوناً ثالثاً يُخترع لها: **رأسٌ
   راكدٌ** بلون الهوية ‎--side‎ — لونُ شريط الأيقونات هناك حرفاً — تحته شعرةٌ
   واحدة، و**قائمةٌ مرتفعةٌ** بلون السطح ‎--surf‎ كصندوق الواردة تماماً. ولا يفقد
   الرأسُ من هويّته شيئاً: الشعارُ والاسمُ وزرُّ الطلب والجرسُ وحقلُ البحث ورقائقُ
   التصفية تبقى كلُّها فوق اللون كما كانت.
   والرأسُ يقصر بقصرِ ما فيه: حقلُ البحث ينطوي مع التمرير (‎foldWire‎) وهو **في
   جوفه** لا تحته، فينكمش اللونُ بمقداره في النَّفَس نفسِه — ‎.28s‎ ومنحنى ‎--ez‎
   من طيّة الحقل عينِها، فحركةٌ واحدةٌ يُرى منها لونٌ ينحسر لا صندوقان يتسابقان.
   وهو المأذونُ فيه نصّاً: «لا مانع أن يكون اللون يقصر لمّا ينطوي حقل البحث
   بسلاسةٍ ونعومة». */
/* ── ولا عتبةَ بيضاءَ بين لونٍ ومحتوى: الشفةُ لاصقةٌ بالرأس وبالذيل ──────────
   أمرُ صاحب المنصّة: «خلِّ الشفةَ مباشرةً مع الهيدر وليست بعتبةٍ بيضاء، وكذلك
   أسفلُ في جهة حسابي: اجعلِ الذي تحت قسم حسابي زيَّ الهيدر — بنفس الفصل
   والطريقة والرسم، يعني ما نحتاج خطّاً ولا شفةً بيضاء، بل بنفس لون الهيدر
   والخطِّ اللاصق فيه».
   وكان بين شعرةِ الرأس وأوّلِ صفٍّ سبعةُ بكسلاتٍ من فُرجة ‎.sb‎ — خارجَ
   المُمَرِّر فلا يطويها تمرير: شريطٌ أبيضُ ثابتٌ تحت اللون، والصفُّ المنزلقُ
   يُقصُّ عند حافّةٍ لا يراها أحد. فصارت الفُرجةُ صفراً وانتقل مقدارُها إلى حشوة
   المُمَرِّر نفسِه: يقف الصفُّ حيث كان بالضبط في السكون، ويمرُّ تحت الشعرة
   حرفاً عند التمرير.
   وحاشيةُ الجهاز السفلى انتقلت من ‎.sb‎ إلى ‎.sb__foot‎، وإلّا رجع البياضُ من
   تحت اللون. */
.sb{width:calc(var(--side-w) + var(--safe-s));max-width:100%;flex:0 0 auto;display:flex;flex-direction:column;gap:0;padding-block:0;padding-inline-start:calc(11px * var(--ui) + var(--safe-s));padding-inline-end:var(--sb-pe);background:var(--surf);border-inline-end:1px solid var(--line);min-height:0}
/* الرأسُ يمدّ لونَه إلى حافّتَي اللوحة: هوامشُ سالبةٌ بمقدار حشو ‎.sb‎ الجانبيّ
   (وحاشيةُ الجهاز معها في جهة البدء)، وحشوُه هو يعيد ما سلبته — فالمحتوى يقف
   حيث كان يقف بالضبط، ولا يبقى شريطٌ أبيضُ على الجانبين يقطع اللون. */
.sb__top{flex:0 0 auto;display:flex;flex-direction:column;gap:calc(7px * var(--ui));
  margin-inline-start:calc(-11px * var(--ui) - var(--safe-s));
  margin-inline-end:calc(-1 * var(--sb-pe));
  padding-block:calc(11px * var(--ui)) calc(9px * var(--ui));
  padding-inline-start:calc(11px * var(--ui) + var(--safe-s));
  padding-inline-end:var(--sb-pe);
  background:var(--side);border-bottom:1px solid var(--line);
  transition:background .3s ease}
/* ── وصفُّ الشعار على عمود اللوحة، لا على عمودٍ يخصُّه ────────────────────────
   كان له حشوٌ ثلاثةٌ من عنده، فيقف الشعارُ وثلاثةُ الاختصارات على عمودٍ يزيح
   ثلاثةً عن كلِّ ما تحته: حقلُ البحث، وزرُّ الترتيب، ورقائقُ التصفية، وقائمةُ
   الطلبات، وصفُّ الحساب. ثلاثةٌ لا تُرى وحدَها وتُرى مجتمعةً: عمودان في لوحةٍ
   واحدة، وأوّلُ ما يكشفهما زرٌّ مربّعٌ ممتلئٌ في طرف الصفّ يقف أدنى من الطرف
   الذي تحته. فسقط الحشوُ وصار الصفُّ على عمود اللوحة نفسِه، فتُقرأ الأشياءُ
   الستّةُ في خطٍّ واحد. */
.sb__brand{display:flex;align-items:center;gap:calc(8px * var(--ui));min-width:0}
.sb__logo{width:calc(26px * var(--ui));height:calc(26px * var(--ui));border-radius:8px;background:var(--acc);display:grid;place-items:center;color:var(--bg);flex:0 0 auto}
.sb__name{font-weight:900;font-size:calc(17px * var(--fz));font-feature-settings:'dlig' 1,'jalt' 1,'ss01' 1,'calt' 1}
.sb__sp{flex:1}
/* ‎«تكبير زر إنشاء الطلب قليلاً مع الحفاظ على هويته وتصميمه الحالي»‎ — درجةٌ
   واحدةٌ لا أكثر: تسعٌ وعشرون تصير أربعاً وثلاثين، والحشوُ والاستدارةُ والحرفُ
   يتبعون بمقدارٍ يبقيه الزرَّ نفسَه لا زرّاً آخرَ بلونه. */
.sb__new{display:inline-flex;align-items:center;gap:calc(6px * var(--ui));height:calc(34px * var(--ui));padding:0 calc(15px * var(--ui));flex:0 0 auto;border:0;border-radius:11px;background:var(--acc);color:var(--bg);font-size:calc(12.5px * var(--fz));font-weight:700;cursor:pointer;transition:background .16s;font-family:inherit}
.sb__new:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .sb__new:hover{background:var(--acc-d)}
}
.sb__srchw{overflow:hidden;transition:max-height .28s var(--ez),opacity .22s,margin-top .28s;max-height:calc(40px * var(--ui));opacity:1;margin-top:0}
.sb__srchw.hid{max-height:0;opacity:0;margin-top:calc(-7px * var(--ui))}
.sb__srch{display:flex;align-items:center;gap:calc(7px * var(--ui));height:calc(33px * var(--ui));padding:0 calc(11px * var(--ui));border-radius:9px;background:var(--fill);color:var(--ink3)}
.sb__srch input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:calc(12.5px * var(--fz));color:var(--ink)}
.sb__srchx{display:inline-flex;padding:calc(2px * var(--ui));border:0;background:transparent;color:var(--ink3);cursor:pointer}
/* ═══ صفُّ البحث: حقلٌ يتمدّد، وترتيبٌ في طرفه ═══════════════════════════════
   أمرُ صاحب المنصّة: «وضع الأحدث/الأقدم على يسار حقل البحث … وعند الـScroll
   يطوى ويختفي مع حقل البحث، وعند الصعود يظهران معاً بسلاسة». والصفُّ الواحدُ
   هو ما يحقّق ذلك بلا محرّكٍ ثانٍ: ما دام الترتيبُ داخلَ الصندوق الذي يطويه
   ‎foldWire‎ فهو ينطوي بحركته وزمنه ومنحناه، ولا يُكتب له سطرٌ من عنده.
   وينسخُ الصفُّ نفسُه في العالمين — ‎.sb__srchw‎ و‎.inb__srch‎ — فلا يفترق سطحان
   في شيءٍ اسمُه واحد. */
.srchrow{display:flex;align-items:center;gap:calc(6px * var(--ui))}
.srchrow>.sb__srch{flex:1;min-width:0}
.srt{position:relative;flex:0 0 auto}
/* والانكماشةُ تُستوفى كما تُستوفى في الرقاقة والمقطع: كانت وحدَها في المنصّة
   بلا ‎transform‎ في انتقالها، فتقفز إلى ‎.97‎ وترتدّ دفعةً — وذاك ما يُقرأ
   ارتجافةً في أيقونةٍ صغيرةٍ يمرّ عليها الإبهامُ وهو يمرّر. */
.srt__b{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));height:calc(33px * var(--ui));padding:0 calc(10px * var(--ui));border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--ink2);font-size:calc(11.5px * var(--fz));font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .16s,color .16s,border-color .16s,transform .16s var(--ez)}
.srt__b.on{border-color:transparent;background:var(--acc-t);color:var(--acc-ink)}
.srt__b>svg{flex:0 0 auto}
.srt__b>svg:last-child{opacity:.55;transition:transform .22s var(--ez)}
.srt.open .srt__b>svg:last-child{transform:rotate(180deg)}
.srt__l{max-width:calc(86px * var(--ui));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .srt__b:hover{background:var(--fill);color:var(--ink)}
  .srt__b.on:hover{background:var(--acc-tt)}
}
.srt__b:active{transform:scale(.97)}
/* ── اللوحُ الصغير ينفتح تحت زرّه مباشرةً، وينطبق حيث فُتح ────────────────────
   وهو **انتقالٌ** لا حركةُ دخول: حركةُ الدخول تُعاد مع كلِّ رسمٍ خلفيٍّ (نبضةُ
   استطلاعٍ، حدثٌ حيّ) فتومض بلا سبب، والانتقالُ لا يجري إلّا حين تتبدّل القيمةُ
   على عقدةٍ حيّة — وذاك ما يكتبه ‎sortPaint‎ بيده. ولذلك يبقى اللوحُ مرسوماً
   دائماً ويُخفيه ‎visibility‎: عقدةٌ تُولَد بصنفها النهائيِّ لا انتقالَ لها. */
.srt__pop{position:absolute;z-index:30;top:calc(100% + 7px * var(--ui));inset-inline-end:0;
  min-width:calc(178px * var(--ui));display:flex;flex-direction:column;gap:calc(1px * var(--ui));
  padding:calc(6px * var(--ui));border-radius:14px;border:1px solid var(--line);
  /* ولوحُ الترتيب يُرصَف طبقتين كلوح القائمة (‎.mnu__pop‎ أدناه) للعلّة نفسِها:
     ‎--surf‎ في الوضع الداكن شفّافةٌ (‎rgba(255,255,255,.045)‎)، فلوحٌ يطفو فوق
     الرقاقات يُقرأ ما تحته من خلاله — «شاهد بوب الأجدد أثناء الوضع الداكن كأنه
     شفاف». فسطحُ اللوح فوق أرضيةِ الصفحة المصمتة، ولا لونَ ثالثَ يُكتب هنا. */
  background:linear-gradient(var(--surf),var(--surf)),var(--bg);box-shadow:var(--shadow2);
  opacity:0;visibility:hidden;pointer-events:none;transform-origin:top left;
  transform:translateY(calc(-5px * var(--ui))) scale(.96);
  transition:opacity .15s var(--ez),transform .2s var(--ez),visibility 0s .2s}
html[dir="ltr"] .srt__pop{transform-origin:top right}
.srt.open .srt__pop{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .16s var(--ez),transform .26s var(--ez-b),visibility 0s}
.srt__t{padding:calc(5px * var(--ui)) calc(9px * var(--ui)) calc(3px * var(--ui));font-size:calc(10.5px * var(--fz));font-weight:700;color:var(--ink3)}
.srt__o{display:flex;align-items:center;gap:calc(8px * var(--ui));padding:calc(8px * var(--ui)) calc(9px * var(--ui));border:0;border-radius:9px;background:transparent;color:var(--ink);font-size:calc(12px * var(--fz));font-family:inherit;cursor:pointer;text-align:start;transition:background .16s,color .16s}
.srt__ot{flex:1;min-width:0;white-space:nowrap}
.srt__o.on{background:var(--acc-t);color:var(--acc-ink);font-weight:500}
/* «ونقطة من نفس لون الهوية يسار المختار» — والطرفُ يتبع اتجاهَ القراءة، فهي
   آخرُ الصفِّ لا يمينَه ولا يسارَه بالاسم. تكبر من نقطةٍ إلى نقطةٍ بارتدادةٍ
   خفيفةٍ فيُرى انتقالُ الاختيار من سطرٍ إلى سطر. */
.srt__dot{width:calc(7px * var(--ui));height:calc(7px * var(--ui));flex:0 0 auto;border-radius:999px;background:var(--acc);opacity:0;transform:scale(.35);transition:opacity .18s var(--ez),transform .26s var(--ez-b)}
.srt__o.on .srt__dot{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .srt__o:hover{background:var(--fill)}
  .srt__o.on:hover{background:var(--acc-tt)}
}
.srt__o:active{background:var(--fill)}
/* والقصُّ يُطلَق ما دام اللوحُ مفتوحاً وحدَه: الطيّةُ تعيش على ‎max-height‎ فيلزمها
   ‎overflow:hidden‎، ولوحُ الترتيب ابنُ ذلك الصندوق. ‎sortPaint‎ يضع الصنفَ عند
   الفتح ويرفعه بعد الانطباق، فلا يُقَصّ اللوحُ ولا تُكسَر الطيّة.
   واسمُه ‎uncut‎ لا ‎pop‎: كان ‎pop‎ فوقع على ‎.pop‎ نفسِها — حركةُ الدخول العامّة
   أعلاه (‎--fx-pop‎، ثلثُ ثانيةٍ من ‎opacity:0;scale(.88)‎). فكان فتحُ الترتيب
   يُطفئ صفَّ البحث كلَّه ويعيده ينمو، والشكوى بحرفها: «مبدل فرز الاقدم
   الاجدد يعطي ومضة شفافة قبل يفتح». وحرفٌ واحدٌ من صفةٍ في وسمٍ يوقظ حركةً
   في ورقةٍ أخرى، فلا يُسمّى حالُ عنصرٍ باسمِ أثرٍ عامّ. */
.sb__srchw.uncut,.inb__srch.uncut{overflow:visible}
.sb__filters{display:flex;gap:calc(4px * var(--ui));padding:0 calc(1px * var(--ui)) calc(2px * var(--ui));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.sb__filters::-webkit-scrollbar{display:none}
/* حشوةُ الطرفين فرجةُ الإطار زائداً بروزَه: عشرٌ للعين، وفوقَها ثلاثٌ أعلى
   وخمسٌ أسفلَ لِما يبرزه ‎.tr::before‎ خارجَ صندوق الصفّ. فيقف إطارُ المفتوح
   على عشرٍ من الحافّة في طرفَي اللوح كما يقف حيث يُكشَف — رقمٌ واحدٌ لا يتبدّل
   بتبدّل موضع الصفّ (‎TREE_EDGE‎ في ab2.js). وكانت عشراً مجرّدةً فيبقى للإطار
   عند القاع خمسٌ وحدَها، فيكاد يلامس شعرةَ الشفّة. */
.sb__list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:calc(1px * var(--ui));padding:calc(13px * var(--ui)) calc(3px * var(--ui)) calc(15px * var(--ui))}
.sb__empty{display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--ui));padding:calc(30px * var(--ui)) calc(12px * var(--ui));text-align:center;color:var(--ink3);font-size:calc(12px * var(--fz))}
/* صفُّ طلبٍ في الشجرة */
.tr{display:flex;flex-direction:column}
.tr__r{display:flex;align-items:center;gap:calc(8px * var(--ui));width:100%;padding:calc(9px * var(--ui)) calc(10px * var(--ui));border:0;border-radius:11px;cursor:pointer;text-align:start;transition:background .16s;color:var(--ink);background:transparent;font-family:inherit;font-weight:400}
@media (hover:hover) and (pointer:fine){
  .tr__r:hover{background:var(--fill)}
}
/* «من هذا رجعت» — أخفُّ من التحديد ومعناه غيرُه: علامةُ موضعٍ على قائمةٍ لوحُها
   وحدَه (الجوال)، بلونِ اللمس نفسِه لا بلون الهوية. ويسبق ‎.cur‎ فلو اجتمعا يوماً
   غلب التحديدُ الأصرحُ منهما. */
.tr__r.last{background:var(--fill)}
.tr__r.cur{background:var(--acc-t)}
.tr__r.cur.kidon{background:var(--fill)}
.tr__r.fresh{font-weight:700}
.tr__m{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2.5px * var(--ui));text-align:start}
.tr__t{font-size:calc(12.5px * var(--fz));line-height:1.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tr__s{font-size:calc(10.5px * var(--fz));font-weight:400;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr__pill{font-size:calc(12px * var(--fz));font-weight:500;color:var(--ink3);flex:0 0 auto}
.tr__chev.open{transform:rotate(0deg)}
.tr__chev{transform:rotate(90deg)}
html[dir="ltr"] .tr__chev{transform:rotate(-90deg)}
html[dir="ltr"] .tr__chev.open{transform:rotate(0deg)}
/* الفروع بخطوط الاتصال */
/* الحشوةُ العليا ٣px بمقدار نتوء ‎.kid::before‎ إلى أعلى: فمرفقُ أوّلِ ابنٍ يقف
   على حافّة الغلاف تماماً، ولا يقصُّه ‎overflow‎ أثناء الطيّ ولو بشعرة. */
.tr__kids{position:relative;display:flex;flex-direction:column;gap:calc(1px * var(--ui));padding:calc(3px * var(--ui)) calc(19px * var(--ui)) calc(6px * var(--ui)) calc(4px * var(--ui))}
/* أثناء الطيّ يُقصُّ ما زاد عن الارتفاع الحيّ فيُكشَف المحتوى كشفاً؛ والأبناءُ
   لا ينضغطون مع الغلاف (‎flex-shrink‎ الافتراضيُّ يمطّهم رأسياً) بل يبقون على
   مقاسهم ويختفون خلف الحدّ — وذاك فرقُ «ينبثق من مكانه» عن «يُمَطّ». */
.tr__kids>*{flex:0 0 auto}
.tr__kids.fold{overflow:hidden}
.kid{position:relative;display:flex;align-items:center;gap:calc(7px * var(--ui));width:100%;padding:calc(5px * var(--ui)) calc(8px * var(--ui));border:0;border-radius:9px;cursor:pointer;text-align:start;transition:background .16s;color:var(--ink);background:transparent;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .kid:hover{background:var(--fill)}
}
/* هيكلُ الابن يقف على مقاس الابن بلا رقمٍ يُقدَّر: هو صفُّ الابن نفسُه عنصراً
   وطبقاتٍ — ‎<button class="kid">‎ وفيه ‎.kid__av‎ و‎.kid__n‎ و‎.kid__s‎ و‎.kid__p‎ —
   وشريطٌ ‎inline-block‎ أقصرُ من سطرها يسكن كلَّ واحدةٍ منها. فدِعامةُ السطر
   (‎strut‎) تعطي الصندوقَ ارتفاعَ سطرِه ولو لم يكن فيه حرف، ولا يزيده الشريطُ
   شيئاً. ولذلك يصدق تحت كلِّ خطٍّ ولغةٍ ودرجةِ مقاس بلا ‎line-height‎ مخمَّن.
   وكان ‎<div>‎ فيرث ‎line-height:1.6‎ من الجذر، والزرُّ يرث ‎normal‎ من المتصفّح —
   فيفترق سطرُ الوصف وسطرُ بابِ البقيّة عن أصلهما، ويقصرُ الصفُّ كلُّه عن الابن
   خمسةَ عشرَ بكسلاً لأنّ ارتفاعَه كان ينزل على الصورة (٢٣بك). ولا بابَ فيه
   لـ«عروضٌ أخرى» وهو رابعُ الصفوف متى جاوز العدُّ ثلاثةً — فيطول الغلافُ سبعين
   بكسلاً دفعةً حين تصل العروضُ الحقيقيّة، ويُقرأ قفزةً في آخر حركةٍ انتهت. */
.kid--skel{cursor:default;pointer-events:none}
.kid--skel .kid__n>.skel,.kid--skel .kid__s>.skel,.kid--skel .kid__p>.skel,.kid--skel span.lbl>.skel{
  display:inline-block;vertical-align:middle;height:calc(9px * var(--ui));border-radius:999px}
@media (hover:hover) and (pointer:fine){
  .kid--skel:hover{background:transparent}
}
.kid.cur{background:var(--acc-t)}
.kid::before{content:'';position:absolute;inset-inline-start:calc(-6px * var(--ui));top:calc(-3px * var(--ui));width:calc(13px * var(--ui));height:calc(18px * var(--ui));border-inline-start:1.25px solid var(--line2);border-bottom:1.25px solid var(--line2);border-end-start-radius:8px;pointer-events:none}
.kid.cont::after{content:'';position:absolute;inset-inline-start:calc(-6px * var(--ui));top:calc(15px * var(--ui));bottom:calc(-2px * var(--ui));width:calc(1.25px * var(--ui));background:var(--line2);pointer-events:none}
.kid__av{position:relative;width:calc(23px * var(--ui));height:calc(23px * var(--ui));flex:0 0 auto;border-radius:999px;display:grid;place-items:center;font-size:calc(10.5px * var(--fz));font-weight:500;background:var(--fill2);color:var(--ink2)}
/* أزرقُ ما بعد القبول لا أخضرُ النجاح — الحرفُ والشارةُ في صفٍّ واحدٍ لسانُهما واحد */
.kid.won .kid__av{background:var(--bl-t);color:var(--bl-ink)}
/* «غير مقروء» شارةٌ على الصورة نفسها، في ركنها الأعلى الخارجيِّ كشارةِ الجرس —
   كانت في طرف الصفِّ الآخر ملتصقةً بالسعر، فتُقرأ كأنها من شأنه. */
.kid__nu{position:absolute;inset-inline-start:calc(-2px * var(--ui));top:calc(-2px * var(--ui));width:calc(8px * var(--ui));height:calc(8px * var(--ui));border-radius:999px;background:var(--acc);border:2px solid var(--surf);pointer-events:none}
.kid__m{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2.5px * var(--ui));text-align:start}
.kid__nw{display:flex;align-items:center;gap:calc(4px * var(--ui));min-width:0}
.kid__n{flex:1;min-width:0;font-size:calc(12px * var(--fz));font-weight:500;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.kid__s{font-size:calc(10px * var(--fz));color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* السطرُ الثاني حين يحمل آخرَ الكلام: علامةٌ ثم نصٌّ — العلامةُ أولَ العقدة
   فتقع يمينَ النصِّ في العربية («وحالة الصحات قبلها يمين»)، والنصُّ وحدَه يُبتر.
   وعلامتُه ‎.stg‎ (١٤بك) في سطرِ ١٤بك — فلا يعلو الصفُّ على أخيه ولا على هيكله. */
.kid__s--lm{display:flex;align-items:center;gap:calc(4px * var(--ui))}
.kid__s--lm>.stg{margin-inline-start:calc(-1px * var(--ui))}
.kid__st{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* «مقبول» قبل السعر من جهة الاسم — شارةُ أزرقِ الحال، أصغرُ من أخت البطاقة
   بمقدار صفِّها. */
.kid__acc{flex:0 0 auto;padding:calc(1.5px * var(--ui)) calc(7px * var(--ui));border-radius:999px;font-size:calc(9px * var(--fz));font-weight:700;background:var(--bl-t);color:var(--bl-ink)}
/* ── والرمزُ تحت الرقم لا إلى جانبه ────────────────────────────────────────
   أمرُ صاحب المنصّة: «ضعه صغيراً أسفل العروض الواردة بالمشجّرة، أسفل يسار الرقم
   بلطفٍ ودقّة». فالسعرُ عمودٌ من سطرين: الرقمُ بمقاسه، وتحته الرمزُ بثلثيه
   وبحبرٍ باهت، محاذياً منتهى الرقم — يسارَه في العربية ويمينَه في الإنجليزية
   (‎align-items:flex-end‎ ينقلب مع اتجاه الكتابة من تلقائه). والسطرُ الثاني بلا
   ارتفاعِ سطرٍ كامل، فلا يطول الصفُّ بكسلاً واحداً. */
.kid__p{display:flex;flex-direction:column;align-items:flex-end;gap:0;font-size:calc(12.5px * var(--fz));font-weight:700;white-space:nowrap;color:var(--ink)}
.kid__pn{font-weight:inherit;font-size:inherit;line-height:1.35}
/* رمزُ الريال بحجمٍ يُقرأ: كان ٨٫٥بك بحبرٍ ثالثٍ تحت رقمٍ أسود عريض — همسٌ
   تحت صراخ، في منصةٍ سلعتُها السعر. */
.kid__cur{font-size:calc(10px * var(--fz));font-weight:600;font-style:normal;line-height:1.05;color:var(--ink2);margin-block-start:calc(-1px * var(--ui))}
.kid__p.soft{font-size:calc(10.5px * var(--fz));color:var(--ink3)}
.kid--more{color:var(--ink3)}
.kid--more .kid__dots{width:calc(21px * var(--ui));flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:calc(2px * var(--ui))}
.kid--more .kid__dots i{width:calc(2.5px * var(--ui));height:calc(2.5px * var(--ui));border-radius:999px;background:currentColor}
.kid--more span.lbl{flex:1;min-width:0;font-size:calc(11px * var(--fz));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── المسحوبُ في الشجرة: صفُّ خبرٍ مرّةً، ثمّ عدّادٌ في الذيل ────────────────────
   «حطه في اخر الشجرة وكأنه عرضٌ زائدٌ بالداخل وليس ضمن الشجرة … مثلاً تقول ١ عرض
    تم سحبه». فذيلُه لباسُ «عروضٌ أخرى» نفسُه (‎.kid--more‎) — بابٌ إلى الداخل لا
   صفُّ عرضٍ ينافس — والسهمُ يحلُّ محلَّ النقاط الثلاث في مقاسها هي، فلا ينزاح
   الحرفُ عن سطر إخوته. وصفُّ الخبر باهتٌ كبطاقته في الداخل (‎.oc.lost‎)، ونقطتُه
   نقطةُ تنبيهٍ لا نقطةُ رسالةٍ: لونُها ‎--warn‎ وهالتُها من لونها هي (‎.pingc‎). */
.kid--pulled{opacity:.62}
.kid--pulled .kid__av--pull{background:transparent;color:var(--ink3);border:1px dashed var(--line2)}
.kid--pulled .kid__n{font-weight:400}
.kid--pulled .kid__nu{background:var(--warn);color:var(--warn)}
/* والشطبُ على الرقم وحدَه لا على العمود: لو مُدّ إليه لَشُطب الرمزُ تحته معه. */
.kid__p--pull{font-size:calc(11.5px * var(--fz));font-weight:500;white-space:nowrap;color:var(--ink3)}
.kid__p--pull>.kid__pn{text-decoration:line-through}
.kid--pull .kid__gl{width:calc(21px * var(--ui));flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:currentColor}
/* صفُّ الحساب أسفل الشجرة */
/* ذيلُ اللوحة رأسُها معكوساً: اللونُ نفسُه ‎--side‎، والمدُّ إلى حافّتَي اللوحة
   بالهوامش السالبة نفسِها، والشعرةُ ‎border-top‎ لاصقةٌ بحافّته العليا فتُقصُّ
   عندها الصفوفُ كما تُقصُّ عند شعرة الرأس. وكان ههنا خطٌّ طليقٌ (‎.sb__hr‎)
   يسبح في بياضٍ فوقه وتحته — رُفِع، فالشعرةُ الآن من الصندوق لا جارةٌ له. */
.sb__foot{flex:0 0 auto;
  margin-inline-start:calc(-11px * var(--ui) - var(--safe-s));
  margin-inline-end:calc(-1 * var(--sb-pe));
  padding-block:calc(8px * var(--ui)) calc(10px * var(--ui));
  padding-inline-start:calc(11px * var(--ui) + var(--safe-s));
  padding-inline-end:var(--sb-pe);
  background:var(--side);border-top:1px solid var(--line);
  transition:background .3s ease}
/* ── صفُّ الذيل: هويّةٌ، ثمّ بابٌ، ثمّ ترس ─────────────────────────────────────
   كان الذيلُ زرّاً واحداً يملأ العرض، وفي طرفه ترسٌ مرسومٌ في جوفه — لا هدفاً
   ثانياً بل زخرفةً على الهدف الأوّل. فلمّا وجب أن يقف بينهما بابُ الدخول (وهو
   زرٌّ، ولا يجوز زرٌّ في جوف زرّ) صار الصفُّ ثلاثةً صريحة: ‎.sb__acct‎ يأخذ ما
   بقي من العرض ويفتح الإعدادات، و‎.btnIn‎ للزائر وحدَه. وترسُ الطرف سقط بعد أن
   جلس الترسُ مجلسَ الصورة الشخصية في صدر الصفّ — هدفان لفعلٍ واحدٍ في صفٍّ واحدٍ
   ازدواجٌ لا اختيار. */
.sb__frow{display:flex;align-items:center;gap:calc(6px * var(--ui))}
/* حسابي لا يبتلع الصفَّ كما كان (‎flex:1‎): زرُّ الطلب في الطرف الآخر، والفراغُ
   بينهما فاصلٌ صريحٌ (‎.sb__sp‎) لا فيضُ اسمٍ طويل. وترسُ الجوار سقط بعد أن جلس
   الترسُ مجلسَ الصورة الشخصية في صدر الصفّ (‎.sb__av--gear‎). */
.sb__acct{display:flex;align-items:center;gap:calc(8px * var(--ui));flex:0 1 auto;min-width:0;padding:calc(7px * var(--ui)) calc(6px * var(--ui));border:0;border-radius:10px;background:transparent;cursor:pointer;text-align:start;color:var(--ink);transition:background .16s;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .sb__acct:hover{background:var(--fill)}
}
.sb__av{width:calc(27px * var(--ui));height:calc(27px * var(--ui));flex:0 0 auto;border-radius:999px;background:var(--fill2);display:grid;place-items:center;font-size:calc(11px * var(--fz));font-weight:500;color:var(--ink2)}
/* والترسُ في مجلس الصورة: قرصُه هو القرصُ نفسُه، وحبرُه أوضحُ قليلاً لأنه صار
   يقول فعلاً لا يحمل حرفاً. */
.sb__av--gear{border-radius:10px;color:var(--ink2)}
.sb__acct .nm{display:flex;align-items:center;gap:calc(4px * var(--ui));font-size:calc(12px * var(--fz));font-weight:500;min-width:0}
/* ── وحشوةٌ في طرف الاسم، وإلا سقطت ياؤه ─────────────────────────────────────
   «الياء في كلمة حسابي مختفية من القسم التحتي». و‎overflow:hidden‎ يقصّ عند حافّة
   الحشوة لا عند حافّة الحرف، والياءُ المنتهيةُ في العربية تمدّ ذيلَها خارجَ عرضِها
   المحسوب — فتُقصّ وحدَها ويبقى ما قبلها. بكسلان يردّانها، ولا يزيدان الصفَّ شيئاً
   يُرى. وهي علّةُ كلِّ اسمٍ ينتهي بياءٍ أو نونٍ أو راءٍ في صندوقٍ مقصوص. */
.sb__acct .nm>bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:calc(2px * var(--ui))}
.sb__acct .sub{font-size:calc(10px * var(--fz));color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ════ عالم العميل — الرئيسي ════ */
.cm{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);position:relative;min-height:0}
.hd{display:flex;align-items:center;gap:calc(9px * var(--ui));padding:calc(9px * var(--ui)) var(--pad);min-height:calc(52px * var(--ui));border-bottom:1px solid var(--line);flex:0 0 auto}
.hd__t1{font-size:calc(15.5px * var(--fz));font-weight:700;line-height:1.6}
/* ── صورةٌ في مربّعٍ ثابت: تُرسى ولا تُنسَب ───────────────────────────────────
   كلُّ حاملٍ لصورةٍ هنا (شعارُ المتجر في رأس المحادثة وفي بطاقة العرض وفي
   الملفّ، والمصغَّراتُ والمعرض) مربّعٌ مقاسُه معلومٌ بالبكسل، وكانت الصورةُ
   داخله ‎width:100%;height:100%‎. والنسبةُ لا تُحلّ داخلَ شبكةٍ مسارُها ‎auto‎:
   ارتفاعُ المسار يُقاس من محتواه، والمحتوى يسأل عن ارتفاع المسار — دورةٌ
   يفكّها كلُّ محرّكٍ بطريقته. كروميوم يسقط على ارتفاع الصورة الطبيعيِّ منسوباً
   إلى عرضها (قِيس: ‎46×61‎ في مربّعِ ‎46×46‎)، ووِبكِت — وهو وِبفيو تيليجرام على
   الآيفون — يقيسها على ‎max-content‎ فتصير بارتفاع الصورة الأصليّ كلِّه: شريطٌ
   رفيعٌ يمتدُّ من أعلى الشاشة إلى أسفلها من خلف كلِّ شيء، وهو البلاغُ بحرفه.
   والإرساءُ يفكُّ الدورةَ من أصلها: مربّعٌ ‎position:relative‎ وصورةٌ
   ‎position:absolute;inset:0‎ — النسبةُ تُقاس على صندوقٍ معلومٍ لا على مسارٍ
   يُقاس من محتواه، فالجوابُ واحدٌ في كلِّ محرّك.
   و‎padding:0‎ لأنّ حاملَ الصورة زرٌّ: حشوُ المتصفّح الافتراضيُّ (‎1px 6px‎) كان
   يقضم صندوقَ المحتوى فتُرسم الصورةُ ‎24×34‎ في مربّعِ ‎36×36‎ — مزحوقةً ولا في
   مركزها. */
/* اسمُ من تكلّمه وحالُ محادثته في سطرٍ واحد: الاسمُ يُقَصّ والشارةُ لا تُقَصّ.
   والاسمُ لم يعد ابناً مباشراً لـ‎.tt‎ فسقطت عنه ‎.tt>bdi‎ — تُعاد هنا حرفاً
   (وزنٌ وقصٌّ ومحاذاةٌ تتبع اتجاهَ الكتابة) لئلّا يخفّ الاسمُ درجةً بلا قرار. */
.hd__who{display:flex;align-items:center;gap:calc(6px * var(--ui));min-width:0}
.hd__who>bdi{min-width:0;font-weight:700;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;text-align:right}
html[dir="ltr"] .hd__who>bdi{text-align:left}
.hd__chatav{position:relative;overflow:hidden;padding:0;width:calc(36px * var(--ui));height:calc(36px * var(--ui));flex:0 0 auto;border-radius:12px;border:0;background:var(--fill2);color:var(--ink2);display:grid;place-items:center;font-size:calc(14px * var(--fz));font-weight:500;cursor:pointer;transition:background .16s;font-family:inherit}
.hd__chatav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
@media (hover:hover) and (pointer:fine){
  .hd__chatav:hover{background:var(--acc-t)}
}
.hd__sw{display:inline-flex;align-items:center;gap:calc(6px * var(--ui));height:calc(32px * var(--ui));padding:0 calc(12px * var(--ui));flex:0 0 auto;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:calc(12px * var(--fz));font-weight:500;cursor:pointer;transition:background .16s;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .hd__sw:hover{background:var(--fill)}
}
/* ── زرُّ العبور يلبس لونَ الوجهة لا لونَ مكانه ────────────────────────────────
   أمرُ صاحب المنصّة: «في مزود الخدمة ← الطالب زر الانتقال يكون بنفس لون زر إنشاء
   الطلب، وفي الطالب ← مزود الخدمة يكون باللون الأسود مثل لون زر الدخول إلى حساب
   أبي الأعمال». وهو منطقٌ قبل أن يكون لوناً: العبورُ إلى أبيلي الشخصيّ عبورٌ إلى
   حيث يُنشَأ الطلب، فيلبس لونَ ذلك الفعل (‎--acc‎)؛ والعبورُ إلى أبيلي أعمال عبورٌ
   إلى حسابٍ بابُه في البوّابة بلاطةٌ داكنة (‎.pt__c--biz‎ على ‎--me‎)، فيلبس لونَها
   بعينه. فيَعِد اللونُ بما وراءه قبل أن تُقرأ الكلمة، ولا يُتعلَّم لونٌ ثالث. */
.hd__sw--acc{border-color:transparent;background:var(--acc);color:var(--bg)}
.hd__sw--biz{border-color:transparent;background:var(--me);color:var(--me-ink)}
@media (hover:hover) and (pointer:fine){
  .hd__sw--acc:hover{background:var(--acc-d)}
  .hd__sw--biz:hover{background:var(--me)}
}
/* شريطُ المقارنة وحدَه بقي شريطاً: هو جدولُ أسعارٍ يُقرأ، لا قائمةَ خياراتٍ
   تُنقَر — والقائمةُ صارت لوحاً يطفو (‎.mnu‎ أدناه). */
.strip{border-bottom:1px solid var(--line);background:var(--bg);animation:var(--fx-slide) .24s var(--ez) backwards;flex:0 0 auto}
.strip__in{max-width:calc(640px * var(--ui));margin:0 auto;display:flex;align-items:center;gap:calc(6px * var(--ui));flex-wrap:wrap;padding:calc(10px * var(--ui)) var(--pad) calc(12px * var(--ui))}
.strip__in--col{flex-direction:column;align-items:stretch;gap:calc(10px * var(--ui))}
.strip__t{font-size:calc(14px * var(--fz));font-weight:700}
/* ═══ قائمةُ الثلاث نقاط — لوحٌ يطفو تحت زرّه، لا شريطٌ يدفع الصفحة ═══════════
   الشكوى بحرفها: «الثلاث نقاط في المزود تدفع الخط للأسفل وتنشئ خطاً آخر»،
   و«فتح الثلاث نقاط في الواجهتين قاسٍ وغير ناعم وغير سلس ولطيف فتحاً وإغلاقاً
   وقائمته متداخلة، وأريدها تظهر كبوب مثل حقّ الترتيب».
   وكانت رقاقاتٍ مرصوفةً في شريطٍ يُحقَن بين الرأس والجسد: يولد الشريطُ فيدفع
   المحادثةَ كلَّها لأسفل، وتلتفّ رقاقاتُه سطرين وثلاثة على شاشة الجوّال —
   فيُقرأ «سطرٌ ثانٍ في الرأس» لا «قائمةُ خيارات». وحركتُه ‎animation‎ على عقدةٍ
   تُولَد مع الرسم: تظهر دفعةً بلا انفتاح، وتختفي دفعةً بلا انطباق — إذ لا عقدةَ
   تبقى ليجري عليها انتقالُ الخروج.
   فصارت لوحاً واحداً بطراز لوح الترتيب حرفاً: مرسومٌ دائماً ويُخفيه ‎visibility‎،
   يُفتَح ويُغلَق بصنفٍ يُكتب على العقدة الحيّة (‎mnuPaint‎) فيجري الانتقالُ في
   الاتجاهين، وصفوفُه سطرٌ لكلِّ خيارٍ باسمٍ وشرحٍ وأيقونةٍ في بلاطتها — فلا
   يتداخل خيارٌ بخيار، ويُعرَف ما يفعله كلٌّ قبل لمسه. */
.mnu{position:relative;flex:0 0 auto;display:inline-flex}
.mnu__pop{position:absolute;z-index:40;top:calc(100% + 8px * var(--ui));inset-inline-end:0;
  width:calc(262px * var(--ui));max-width:min(calc(100vw - 28px * var(--ui)),calc(320px * var(--ui)));
  /* والجوّالُ بالعرض شاشتُه ٤٣٠ ارتفاعاً: لوحٌ بسبعة صفوفٍ يتجاوزها، فيُقَصّ آخرُه
     ولا يُعرف أنّ تحته شيئاً. يمرّر في نفسه ولا يجرّ ما خلفه معه. */
  max-height:calc(100dvh - 108px * var(--ui));overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;scrollbar-width:none;
  display:flex;flex-direction:column;gap:calc(1px * var(--ui));
  padding:calc(7px * var(--ui));border-radius:18px;border:1px solid var(--line);
  /* ‎--surf‎ في الوضع الداكن شفّافةٌ (‎rgba(255,255,255,.045)‎)، ولوحٌ يطفو فوق
     محادثةٍ يُقرأ كلامُها من خلاله. فتُرصَف طبقتان: سطحُ اللوح فوق أرضيةِ
     الصفحة المصمتة — لونان معروفان في اللوحتين، ولا ثالثَ يُكتب هنا. */
  background:linear-gradient(var(--surf),var(--surf)),var(--bg);box-shadow:var(--shadow2);
  opacity:0;visibility:hidden;pointer-events:none;transform-origin:top left;
  transform:translateY(calc(-6px * var(--ui))) scale(.95);
  transition:opacity .15s var(--ez),transform .2s var(--ez),visibility 0s .2s}
html[dir="ltr"] .mnu__pop{transform-origin:top right}
.mnu__pop::-webkit-scrollbar{display:none}
.mnu.open .mnu__pop{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .16s var(--ez),transform .28s var(--ez-b),visibility 0s}
/* والصفوفُ تصل تباعاً لا دفعةً: أربعُ خطواتٍ من عشرين ملّيّاً — تكفي ليُقرأ
   «انفتحت» ولا تبلغ أن تُنتظَر. وفي الإغلاق بلا تأخيرٍ البتّة: الانصرافُ لا
   يتدرّج، فالمنصرفُ لا يُستأذَن في مغادرته. */
.mnu__pop>*{opacity:0;transform:translateY(calc(-5px * var(--ui)));
  transition:opacity .16s var(--ez),transform .2s var(--ez)}
.mnu.open .mnu__pop>*{opacity:1;transform:none}
.mnu.open .mnu__pop>:nth-child(2){transition-delay:.02s}
.mnu.open .mnu__pop>:nth-child(3){transition-delay:.04s}
.mnu.open .mnu__pop>:nth-child(4){transition-delay:.06s}
.mnu.open .mnu__pop>:nth-child(5){transition-delay:.08s}
.mnu.open .mnu__pop>:nth-child(n+6){transition-delay:.1s}
[data-motion="هادئ"] .mnu__pop>*{transition-delay:0s!important}
.mnu__t{padding:calc(6px * var(--ui)) calc(10px * var(--ui)) calc(5px * var(--ui));font-size:calc(10.5px * var(--fz));font-weight:700;color:var(--ink3)}
.mnu__i{display:flex;align-items:center;gap:calc(9px * var(--ui));width:100%;padding:calc(8px * var(--ui)) calc(9px * var(--ui));border:0;border-radius:12px;background:transparent;color:var(--ink);font-family:inherit;font-size:calc(12.5px * var(--fz));cursor:pointer;text-align:start;transition:background .16s,color .16s}
.mnu__ic{width:calc(27px * var(--ui));height:calc(27px * var(--ui));flex:0 0 auto;border-radius:9px;display:grid;place-items:center;background:var(--fill);color:var(--ink2);transition:background .16s,color .16s}
.mnu__l{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(1px * var(--ui))}
.mnu__n{font-weight:500;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnu__s{font-size:calc(10.5px * var(--fz));line-height:1.5;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* المختارُ يُقرأ من بلاطته: لونُ الهوية يقول «هذا قائمٌ الآن» بلا كلمةٍ زائدة */
.mnu__i.lit .mnu__ic{background:var(--acc-t);color:var(--acc-ink)}
/* وما يُتلف لا يُلوَّن كما يُلوَّن ما يُنشئ: حبرُ التحذير على الاسم وعلى بلاطته */
.mnu__i.bad{color:var(--bad)}
.mnu__i.bad .mnu__ic{background:var(--bad-t);color:var(--bad)}
.mnu__i.bad .mnu__s{color:color-mix(in srgb,var(--bad) 62%,var(--ink3))}
@media (hover:hover) and (pointer:fine){
  .mnu__i:hover{background:var(--fill)}
  .mnu__i.bad:hover{background:var(--bad-t)}
}
.mnu__i:active{background:var(--fill2)}
.mnu__i.bad:active{background:var(--bad-t)}
.mnu__sep{height:1px;flex:0 0 auto;margin:calc(5px * var(--ui)) calc(9px * var(--ui));background:var(--line)}
/* صفُّ الرمز لا يُنقَر كلُّه — الفعلُ في شارته وحدَها، فلا يُقرأ سطراً يفتح شيئاً */
.mnu__i--code{cursor:default;align-items:center}
.mnu__code{font-size:calc(11.5px * var(--fz));font-weight:700;color:var(--ink2);letter-spacing:.04em}
.mnu__i--code .codebdg{flex:0 0 auto}
/* والنسخُ لا يطوي القائمةَ: أثرُه شارةٌ تخضرّ لحظةً في مكانها */
.codebdg.ok{background:var(--ok-t);color:var(--ok)}
/* شارةُ الكتم — تُقرأ حيث يقع أثرُها: رأسُ المحادثة، وصفُّها في القائمة */
.mutem{display:inline-flex;align-items:center;gap:calc(4px * var(--ui));flex:0 0 auto;padding:calc(2px * var(--ui)) calc(8px * var(--ui));border-radius:999px;background:var(--fill);color:var(--ink3);font-size:calc(10px * var(--fz));font-weight:700;line-height:1.6}
.mutem svg{flex:0 0 auto;opacity:.85}
.mutem--s{padding:0;background:transparent;gap:0;opacity:.6}
/* صفُّ مقارنة */
.cmp{display:flex;align-items:center;gap:calc(10px * var(--ui));border:0;background:transparent;padding:0;color:var(--ink);width:100%;cursor:pointer;text-align:start;font-family:inherit}
.cmp__n{width:calc(92px * var(--ui));flex:0 0 auto;font-size:calc(12px * var(--fz));font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.cmp__bar{flex:1;min-width:0;height:calc(6px * var(--ui));border-radius:999px;background:var(--fill2);overflow:hidden;display:flex}
.cmp__bar i{display:block;height:100%;border-radius:999px;background:var(--acc);transform-origin:right center;animation:var(--fx-grow) .6s var(--ez) backwards}
html[dir="ltr"] .cmp__bar i{transform-origin:left center}
.cmp.low .cmp__bar i{background:var(--ok)}
.cmp__p{font-size:calc(12.5px * var(--fz));font-weight:700;white-space:nowrap;width:calc(74px * var(--ui));text-align:end;flex:0 0 auto}
.cmp__tag{display:inline-flex;align-items:center;flex:0 0 auto;padding:calc(2px * var(--ui)) calc(9px * var(--ui));border-radius:999px;font-size:calc(10px * var(--fz));font-weight:700;background:var(--fill);color:var(--ink3)}
.cmp.low .cmp__tag{background:var(--ok);color:var(--bg)}

/* ════ الساحة — لوحُ الرسائل ════ */
/* والمحادثةُ عند العميل كلوح المتجر: الكلامُ يجلس فوق حقل الكتابة والفراغُ
   يعلوه (‎.pd>:first-child‎ وشرحُه هناك). والمُمَرِّرُ يصير عموداً ليعمل الهامشُ
   التلقائيّ، والتوسيطُ الأفقيُّ باقٍ بهامشٍ جانبيٍّ تلقائيّ لا بالمختصر. */
.th{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding:calc(16px * var(--ui)) var(--pad) calc(8px * var(--ui))}
/* محادثةٌ بلا شريط كتابة (طلبٌ مكتمل): قاعُ المُمَرِّر قاعُ الشاشة، فحشوتُه هي
   وحدَها ما يحرس ذيلَه من انحناء الجهاز — والذيلُ رقاقةُ التقييم نفسُها. */
.th--nobar{padding-bottom:max(calc(8px * var(--ui)),var(--safe-b))}
/* ── ولصقُ القاع صفةُ محادثةٍ لا صفةُ كلِّ خيط ──────────────────────────────
   ‎margin-block-start:auto‎ يدفع المحتوى إلى قاع المُمَرِّر ما دام أقصرَ منه —
   وهو عُرفُ المحادثات: الرسائلُ تنمو من الأسفل ويجاورها شريطُ الكتابة. لكنّه
   كان على كلِّ ‎.th‎، ومنها **شاشةُ الطلب** التي ليست محادثةً: طلبٌ بلا عروضٍ
   فقاعتُه واحدةٌ، فتهبط إلى القاع ويعلوها فراغُ شاشةٍ كامل. أمرُ صاحب المنصّة
   (٢٠٢٦-٠٨-٢٥): «لا أريد فقاعة طلبي التي لا عروض عليها تكون أسفل، بل تبدأ من
   أعلى اللوحة». فصار اللصقُ مشروطاً بالصنف ‎.th--chat‎ (يكتبه ‎renderTH‎ متى
   كان الخيطُ محادثةَ عرضٍ مفتوحة)، وما سواه يبدأ من أعلاه. ولا يتغيّر شيءٌ متى
   فاض المحتوى: الهامشُ التلقائيُّ يصير صفراً بنفسه، و‎stickBottom‎ يبقى سيّدَ
   موضع التمرير. */
.th__in{width:100%;max-width:calc(640px * var(--ui));margin-inline:auto;display:flex;flex-direction:column;gap:var(--gap)}
.th--chat .th__in{margin-block-start:auto}
/* ══ الرقاقةُ العائمةُ للمحادثة (المحرّك: ‎ctxH‎ و‎ctxSync‎ في ab2.js) ══════════════
   سطران يقولان ما يُسأل عنه في محادثة عرض: ما طلبتُ، وبكم — ولمسةٌ تفتح البوب
   (‎S.modal==='ctx'‎). وليست رأساً للمحادثة: رأسُها الرسائلُ نفسُها — الطلبُ ثمّ
   العرضُ في ‎.th__hd‎ — وهذه تنبيهٌ يطفو فوقهما متى غابا فوق الحافّة.
   وهي **صفريّةُ الارتفاع**: لاصقةٌ تطفو فوق الفقاعات ولا تزيح واحدةً. وذاك شرطُ
   صحّةٍ لا زينة — عنصرٌ لاصقٌ **يشغل** حيّزاً في صدر المُمَرِّر ثمّ يُطوى ويُفرَد
   يُنقص ارتفاعَ المحتوى فيعوّضه مثبِّتُ التمرير في المتصفّح، فتُقرأ التعويضةُ
   نيّةَ صعودٍ فيُفرَد فيُعوَّض عكساً… ذبذبةٌ لا تنتهي (الشرحُ فوق ‎FOLD_QUIET‎).
   والفُرجةُ التي يهبها العمودُ لعقدةٍ بلا ارتفاعٍ تُستردّ بهامشٍ سالبٍ يساويها،
   فلا يتبدّل موضعُ أوّلِ فقاعةٍ بكسلاً واحداً.
   والحضورُ والغيابُ تلاشٍ وإزاحةٌ لطيفةٌ على منحنى أبيلي، بلا قفزةٍ ولا ارتدادة:
   «بأنيميشن سلسٍ ناعمٍ تدريجيٍّ لطيف، وليس قاسياً — أريد تكون تلك عادةَ المنصّة
   عندي». و‎visibility‎ تتأخّر بقَدْرِ التلاشي فلا تُلمَس وهي ذاهبة، وتعود بلا
   تأخيرٍ فلا تُنتظَر وهي قادمة. */
.ctx{position:sticky;top:calc(8px * var(--ui));z-index:7;height:0;overflow:visible;
  display:flex;flex-direction:column;align-items:center;pointer-events:none;
  margin-bottom:calc(-1 * var(--gap));
  transition:opacity .34s var(--ez),transform .42s var(--ez),visibility 0s}
.ctx.hid{opacity:0;visibility:hidden;transform:translateY(calc(-12px * var(--ui)));
  transition:opacity .26s var(--ez),transform .34s var(--ez),visibility 0s .34s}
/* وشعرةٌ فوقها تذوب فيها الفقاعةُ المارّة: بين سقف المُمَرِّر وقمّة الرقاقة شريطٌ
   يعبره المحتوى (حشوةُ ‎.th‎ العلويةُ ‎16‎ وإزاحةُ اللصق ‎8‎)، وحافّةٌ مقصوصةٌ فيه
   تُقرأ قصّاً لا طفواً. فتدرّجٌ من الأرضية إلى الشفافية يبتلعها عند الحافّة
   ويسلّمها للرقاقة عند قمّتها — ويذهب معها ويجيء، لأنّه منها لا طبقةٌ ثانية.
   و‎z-index:-1‎ لأنّ المُطلَقَ يعلو الجاري في السياق الواحد: بلاها يمرّ التدرّجُ
   فوق حرفِ الرقاقة نفسِه. */
.ctx::before{content:"";position:absolute;inset-inline:calc(-1 * var(--pad));z-index:-1;
  top:calc(-24px * var(--ui));height:calc(27px * var(--ui));pointer-events:none;
  background:linear-gradient(to bottom,var(--bg) 26%,transparent)}
/* صدرُ الخيط: الطلبُ بإضافاته ثمّ العرضُ — عقدةٌ واحدةٌ لأنّ ‎ctxSync‎ يقيس قاعَها */
.th__hd{display:flex;flex-direction:column;gap:var(--gap)}
/* ══ ولا زجاجَ حيٍّ فوق قائمةٍ تجري ═══════════════════════════════════════════
   الشكوى: «ربكةٌ أثناء السكرلة في المحادثات وفي غيرها». وهذا سببُها الأوّلُ
   المقيس: ‎backdrop-filter‎ على عنصرٍ **لاصقٍ فوق مُمَرِّرٍ** يُعيد المتصفّحُ
   التقاطَ ما خلفه وطمسَه في **كلِّ إطارِ تمرير** — أثقلُ كلفةٍ لكلِّ إطارٍ في
   الصفحة كلِّها، وهو قانونٌ مكتوبٌ في ذاكرة هذا المستودع منذ حملة النعومة.
   وهنا كان يُدفَع ثمنُه بلا مقابلٍ أصلاً: ‎--surf‎ في الفاتح ‎#FFFFFF‎ مصمتةٌ
   تماماً، فالطمسُ يطمس ما لا يُرى؛ وفي الداكن ‎.86‎ فيمرّ منها ظلُّ ما تحتها.
   فصار السطحُ طبقتين — سطحُ الرقاقة فوق أرضيّة اللوح — فيخرج مصمتاً بلون اليوم
   نفسِه بكسلاً ببكسل، ويحجب ما يمرّ تحته حجباً حقيقياً، بلا مرشّحٍ يعمل.
   وهو يعلو ما جاء به فرعُ الرقاقة العائمة: كانت تحمل ‎backdrop-filter‎ لأنّها
   سبقت هذا الإصلاح — والطفوُ فوق قائمةٍ تجري أشدُّ حاجةً إليه لا أعفى منه. */
.ctx__h{display:flex;align-items:center;gap:calc(9px * var(--ui));width:100%;max-width:calc(640px * var(--ui));pointer-events:auto;padding:calc(9px * var(--ui)) calc(13px * var(--ui));border:0;border-radius:14px;background:var(--surf);box-shadow:var(--shadow2);cursor:pointer;text-align:start;color:var(--ink);font-family:inherit}
[data-th="داكن"] .ctx__h{background:linear-gradient(rgba(16,20,28,.86),rgba(16,20,28,.86)),var(--bg)}
.ctx__ls{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2px * var(--ui))}
.ctx__l{display:flex;align-items:baseline;gap:calc(6px * var(--ui));min-width:0;font-size:calc(11.5px * var(--fz));line-height:1.55}
.ctx__l:last-child{overflow:hidden}
.ctx__k{flex:0 0 auto;font-size:calc(10px * var(--fz));font-weight:700;color:var(--ink3)}
.ctx__k--o{color:var(--acc-ink)}
.ctx__v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;padding-inline-end:calc(2px * var(--ui))}
.ctx__l>.flag{flex:0 0 auto;align-self:center}
/* والعلامةُ سهمان يخرجان إلى الأركان لا سهمٌ يدور: لا شيءَ ينفتح تحتها. */
.ctx__go{flex:0 0 auto;width:calc(26px * var(--ui));height:calc(26px * var(--ui));border-radius:8px;
  display:grid;place-items:center;background:var(--fill);color:var(--ink3)}
/* والجوفُ في المجرى: يدفع الرسائلَ ولا يعلوها، ويمشي معها إن مُرّرت */
@media (hover:hover) and (pointer:fine){.ctx__h:hover{background:var(--fill)}}
.m{display:flex;flex-direction:column;align-items:flex-end}
.m--start{align-items:flex-start}
.m--center{align-items:center}
/* فقاعةُ الطلب — «أنا» */
.bq{max-width:min(100%,470px * var(--ui));display:flex;flex-direction:column;gap:calc(7px * var(--ui));padding:calc(13px * var(--ui)) calc(16px * var(--ui));border-radius:16px 5px 16px 16px;background:var(--me);color:var(--me-ink)}
html[dir="ltr"] .bq{border-radius:5px 16px 16px 16px}
.bq__k{display:flex;align-items:center;gap:calc(6px * var(--ui));font-size:calc(10.5px * var(--fz));font-weight:700;opacity:.62}
.bq__t{font-size:calc(15.5px * var(--fz));font-weight:500;line-height:1.85;white-space:pre-wrap;display:block}
.bq__f{font-size:calc(11px * var(--fz));opacity:.6;line-height:1.6}
.bq__media{display:flex;gap:calc(6px * var(--ui));flex-wrap:wrap}
.thumb{position:relative;display:grid;place-items:center;width:calc(58px * var(--ui));height:calc(58px * var(--ui));flex:0 0 auto;border-radius:11px;background:rgba(125,125,125,.16);border:1px solid rgba(125,125,125,.2);cursor:pointer;color:inherit;overflow:hidden;padding:0}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* بطاقةُ عرضٍ — «الآخر» */
.oc{width:min(100%,470px * var(--ui));display:flex;flex-direction:column;gap:calc(9px * var(--ui));padding:calc(13px * var(--ui)) calc(15px * var(--ui));border-radius:5px 16px 16px 16px;border:1px solid var(--line);background:var(--surf);box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s,transform .25s var(--ez)}
html[dir="ltr"] .oc{border-radius:16px 5px 16px 16px}
@media (hover:hover) and (pointer:fine){
  .oc:hover{border-color:var(--line2);box-shadow:var(--shadow2);transform:translateY(-2px)}
}
.oc.won{border-color:color-mix(in srgb,var(--ok) 45%,transparent);animation:var(--fx-glow) 1s ease-out both}
.oc.lost{opacity:.55}
@media (hover:hover) and (pointer:fine){
  .oc.lost:hover{transform:none}
}
.oc__top{display:flex;align-items:flex-start;gap:calc(10px * var(--ui))}
.oc__av{position:relative;padding:0;width:calc(34px * var(--ui));height:calc(34px * var(--ui));flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-size:calc(14px * var(--fz));font-weight:500;background:var(--fill2);color:var(--ink2);cursor:pointer;border:0;font-family:inherit;overflow:hidden}
.oc__av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oc__mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2.5px * var(--ui))}
.oc__nm{display:flex;align-items:center;gap:calc(6px * var(--ui));flex-wrap:wrap}
.oc__n{font-size:calc(13.5px * var(--fz));font-weight:700;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:transparent;transition:text-decoration-color .16s}
@media (hover:hover) and (pointer:fine){
  .oc__n:hover{text-decoration-color:var(--acc)}
}
.oc__meta{font-size:calc(10.5px * var(--fz));color:var(--ink3);display:flex;align-items:center;gap:calc(4px * var(--ui));flex-wrap:wrap}
.oc__pr{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto}
.oc__prn{font-weight:900;line-height:1.15;color:var(--ink);font-size:calc(21px * var(--fz))}
.oc__prn.rng{font-size:calc(16px * var(--fz))}
.oc__prn.ngo{font-size:calc(13.5px * var(--fz))}
.oc__cur{font-size:calc(12.5px * var(--fz));font-weight:600;color:var(--ink2)}
.flag{display:inline-flex;align-items:center;gap:calc(4px * var(--ui));padding:calc(2px * var(--ui)) calc(9px * var(--ui));border-radius:999px;font-size:calc(10px * var(--fz));font-weight:700;background:var(--acc-t);color:var(--acc-ink);align-self:flex-start}
/* «مقبول» بأزرق الحال لا بأخضر النجاح: الأزرقُ في هذه المنصّة لسانُ «ما بعد
   القبول» أينما نطق — نقطةُ قيد التنفيذ وظرفُ رسائل المقبول — فالشارةُ منه:
   أرضيةٌ خفيفةٌ وحبرٌ أزرق («ببدج ازرق خفيف وخط ازرق» بحرف الأمر). */
.flag--won{background:var(--bl-t);color:var(--bl-ink)}
.flag--lost{background:var(--fill);color:var(--ink3)}
.flag--new{background:var(--acc);color:var(--bg);animation:var(--fx-pop) .3s var(--ez-b) backwards}
/* سطرُ المحادثة على بطاقة العرض: علامةُ الحال (ظرفٌ أو صحّ) ثم آخرُ الكلام
   بنصِّه — بدل رقعِ «رسالة جديدة» و«لم يقرأ رسالتك بعد» المتراكمة في الصدر. */
.oc__lm{display:flex;align-items:center;gap:calc(6px * var(--ui));font-size:calc(11.5px * var(--fz));color:var(--ink2);min-width:0}
.oc__lm>bdi{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc__txt{font-size:calc(14px * var(--fz));line-height:1.85;white-space:pre-wrap;display:block}
.oc__badges{display:flex;align-items:center;gap:calc(6px * var(--ui));font-size:calc(11px * var(--fz));color:var(--ink3);flex-wrap:wrap}
.oc__acts{display:flex;gap:calc(6px * var(--ui));flex-wrap:wrap}
.btnA{display:inline-flex;align-items:center;gap:calc(6px * var(--ui));padding:calc(7px * var(--ui)) calc(14px * var(--ui));border:0;border-radius:9px;background:var(--acc);color:var(--bg);font-size:calc(12px * var(--fz));font-weight:700;cursor:pointer;transition:background .16s,transform .15s var(--ez);font-family:inherit}
.btnA:active{transform:scale(.96)}
.btnA.dis{background:var(--fill);color:var(--ink3);cursor:default}
.btnA--ok{background:var(--ok)}
.btnB{display:inline-flex;align-items:center;gap:calc(6px * var(--ui));padding:calc(7px * var(--ui)) calc(13px * var(--ui));border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:calc(12px * var(--fz));font-weight:500;cursor:pointer;transition:background .16s;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .btnB:hover{background:var(--fill)}
}
/* فقاعتا محادثة */
.bt{max-width:min(100%,470px * var(--ui));display:flex;flex-direction:column;gap:calc(4px * var(--ui));padding:calc(10px * var(--ui)) calc(14px * var(--ui));border-radius:5px 16px 16px 16px;border:1px solid var(--line);background:var(--surf)}
html[dir="ltr"] .bt{border-radius:16px 5px 16px 16px}
.bm{max-width:min(100%,470px * var(--ui));display:flex;flex-direction:column;gap:calc(4px * var(--ui));padding:calc(10px * var(--ui)) calc(14px * var(--ui));border-radius:16px 5px 16px 16px;background:var(--me);color:var(--me-ink)}
html[dir="ltr"] .bm{border-radius:5px 16px 16px 16px}
.bt__x,.bm__x{font-size:calc(14px * var(--fz));line-height:1.8;white-space:pre-wrap;display:block}
.bt__w{font-size:calc(10px * var(--fz));color:var(--ink3)}
/* الخفوتُ بالحبر لا بالشفافية: ‎opacity‎ على السطر سقفٌ لا يعلوه ابنٌ، فيُخفت
   معه صحُّ الإيصال الأخضرُ إلى نصفه ويضيع لونُه. */
.bm__w,.po__w{display:flex;align-items:center;gap:calc(4px * var(--ui));font-size:calc(10px * var(--fz));color:color-mix(in srgb,var(--me-ink) 58%,transparent)}
/* إيصالُ الرسالة: صحٌّ باهتٌ لِما لم يُقرأ، وصحّان أخضران لِما قُرئ */
.tick{display:inline-flex;align-items:center;flex:0 0 auto;transition:color .2s linear}
.tick--rd{color:var(--me-ok)}
/* المُرسَلةُ لا تخفت: كانت ‎.bm.sending‎ تشحب إلى ‎.6‎ ثم تقفز كاملةً مع تأكيد
   الخادم — نصفُ ثانيةٍ من تردّدٍ يُقرأ بطئاً. واتساب لا يُخفت حرفاً: الفقاعةُ
   بكامل حبرها من لحظة اللمسة، وساعةُ ‎msgTick‎ وحدَها تقول «في الطريق»،
   والفشلُ بابُه إزالةُ الفقاعة مع التوست لا الشحوب. والشفافيةُ سقفٌ يخفت
   تحته كلُّ ابنٍ — وهو ما ترفضه قاعدةُ «الخفوتُ بالحبر لا بالشفافية». */
/* صوتية */
.bv{display:flex;align-items:center;gap:calc(9px * var(--ui));padding:calc(9px * var(--ui)) calc(13px * var(--ui));border-radius:5px 16px 16px 16px;border:1px solid var(--line);background:var(--surf);color:var(--acc-ink)}
.bv__go{display:grid;place-items:center;width:calc(28px * var(--ui));height:calc(28px * var(--ui));flex:0 0 auto;border:0;border-radius:999px;background:var(--acc-t);color:var(--acc-ink);cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .bv__go:hover{background:var(--acc-tt)}
}
.bv__bars{display:flex;align-items:center;gap:calc(2px * var(--ui));height:calc(18px * var(--ui))}
.bv__bars i{width:calc(2.5px * var(--ui));flex:0 0 auto;border-radius:999px;background:currentColor}
.bv__d{font-size:calc(10px * var(--fz));color:var(--ink3)}
/* يكتب الآن */
.typing{display:flex;align-items:center;gap:calc(5px * var(--ui));align-self:flex-end;padding:calc(8px * var(--ui)) calc(13px * var(--ui));border-radius:999px;border:1px solid var(--line);background:var(--surf)}
.typing i{width:calc(5px * var(--ui));height:calc(5px * var(--ui));border-radius:999px;background:var(--acc);animation:ab-dot 1.2s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
.typing span{font-size:calc(11px * var(--fz));color:var(--ink2);margin-inline-start:calc(4px * var(--ui))}
/* شريطُ التقييم */
/* ══ رقاقةُ الإتمام والتقييم — تطفو فوق الرسائل، ولا تجلس على شريطٍ أبيض ══════
   «لطّفها أكثر وخفّض ارتفاعها … وحطّ علامة إكس صغيرة يمين … مع شرط أنها تنطوي
   وتختفي إذا انفتح الكيبورد». ثمّ: «خلّ تقييم الخدمة العائم الذي بالمحادثة
   عائماً زجاجياً دون خلفية بيضاء له، وكبّر شوي الإكس وحطّ لها بدج دائري خفيف».
   كانت أختاً للمُمَرِّر تجلس بينه وبين شريط الكتابة، فالشريطُ الذي تحتها يقتطع
   من المحادثة قامتَه كاملةً — وأرضيّتُه ‎--bg‎ بعرض الشاشة: أبيضُ الفاتح، وهو
   «الخلفيةُ البيضاء» بحرفها؛ ورقاقةٌ على أرضيّةٍ مصمتةٍ لا تُقرأ زجاجاً مهما
   شفّت. فانتقلت إلى **جوف المُمَرِّر** آخرَ أبناء ‎.th__in‎، لاصقةً بقاعه:
     ① تمرُّ الفقاعاتُ تحتها فيُقرأ الزجاجُ زجاجاً — طبقتان لا مرشّح: صبغةُ
        ‎--ok‎ فوق أرضيّةِ الورقة بشفافيةٍ تكفي أن يُرى ما يمرّ ولا تكفي أن يُقرأ
        الحرفُ عليها بصعوبة. ولا ‎backdrop-filter‎ البتّة: «لا زجاجَ حيٌّ فوق سطحٍ
        يُمرَّر» — قانونُ المستودع، والشرحُ عند ‎.ctx__h‎.
     ② وهي في المحتوى، فالمحادثةُ الواقفةُ على آخرها تجد لها حيّزاً في الذيل ولا
        تغطّي آخرَ رسالة: «لا تتغطّى آخرُ رسالة بل تظهر كاملةً أعلى طلب التقييم».
     ③ وتركب اللوحةَ بلا رقمٍ من عندها: مستطيلُ اللصق هو **صندوقُ محتوى**
        المُمَرِّر لا صندوقُ حشوه، والحشوُ المُعارُ في ‎§5ه‎ يساوي ما غطّته اللوحةُ
        والرصيفُ معاً — فقاعُ المستطيل هو قمّةُ شريط الكتابة بعينها، و‎bottom:0‎
        تكفي. ولم تعد ‎data-kb-dock‎، ولا يتبدّل صندوقُ المُمَرِّر حين تنطوي.
   والانطواءُ بالستار نفسِه الذي تنطوي به بطاقةُ الطلب (‎--ez-s‎)، والمقصُّ على
   الغلاف لا على الجوف كي تنكمش الحشوةُ معه إلى صفر. وللغلاف فُرجةٌ مقيسةٌ حول
   الجوف — هامشٌ سالبٌ وحشوةٌ تساويه — كي لا يقصَّ المقصُّ ظلَّ الرقاقة.
   ولا ‎z-index‎ لها: اللصقُ وحدَه يرفعها فوق الفقاعات (المُطلَقُ يعلو الجاري)،
   وهي آخرُ إخوتها المُطلَقين فتعلوهم جميعاً. ورقمٌ موجبٌ كان يرفعها فوق شريط
   الكتابة نفسِه، فتُرى وهي تنطوي مطبوقةً عليه لحظةَ فتح اللوحة. */
.rev{position:sticky;bottom:0;
  margin-inline:calc(-6px * var(--ui));padding:calc(3px * var(--ui)) calc(6px * var(--ui)) calc(5px * var(--ui));
  overflow:hidden;max-height:calc(66px * var(--ui));opacity:1;pointer-events:none;
  transition:max-height .32s var(--ez-s),opacity .22s var(--ez-s),padding-block .32s var(--ez-s),transform .32s var(--ez-s)}
html[data-kb] .rev,.rev--gone{max-height:0;opacity:0;padding-block:0;pointer-events:none;
  transform:translateY(calc(-6px * var(--ui)))}
html[data-kb] .rev .rev__in,.rev--gone .rev__in{pointer-events:none}
/* ولا يُلمَس من الغلاف إلا ما رُسم منه: الفُرجةُ حول الجوف تمرّ اللمسَ إلى
   الفقاعة تحتها بدل أن تبتلعه في شريطٍ شفّافٍ بعرض المحادثة. */
.rev__in{pointer-events:auto;max-width:calc(640px * var(--ui));margin:0 auto;display:flex;align-items:center;gap:calc(9px * var(--ui));padding:calc(5px * var(--ui)) calc(7px * var(--ui)) calc(5px * var(--ui)) calc(5px * var(--ui));border-radius:999px;
  background:linear-gradient(color-mix(in srgb,var(--ok) 13%,transparent),color-mix(in srgb,var(--ok) 13%,transparent)),color-mix(in srgb,var(--bg) 90%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 26%,transparent);box-shadow:var(--shadow);
  animation:var(--fx-slide) .3s var(--ez) backwards}
html[dir="ltr"] .rev__in{padding:calc(5px * var(--ui)) calc(5px * var(--ui)) calc(5px * var(--ui)) calc(7px * var(--ui))}
/* بابُ الخروج في صدر الرقاقة: بدجٌ دائريٌّ خفيفٌ لا يزاحم الدعوة، ولمسُه أوسعُ
   من رسمه. وكان قرصاً شفّافاً بحبرٍ ثالثٍ يضيع على زجاجٍ يمرّ تحته ما يمرّ —
   فصار له سطحُه الخاصّ: درجةٌ من حبر اليوم تعمل في اللوحتين. */
.rev__x{width:calc(28px * var(--ui));height:calc(28px * var(--ui));flex:0 0 auto;display:grid;place-items:center;border:0;border-radius:999px;background:var(--fill2);color:var(--ink2);cursor:pointer;transition:background .16s,color .16s}
@media (hover:hover) and (pointer:fine){.rev__x:hover{background:color-mix(in srgb,var(--ink) 15%,transparent);color:var(--ink)}}
.rev__x:active{background:color-mix(in srgb,var(--ink) 18%,transparent)}
.rev__t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(12px * var(--fz));font-weight:600;line-height:1.6;color:var(--ink)}
.rev__go{padding:calc(6px * var(--ui)) calc(14px * var(--ui));border:0;border-radius:999px;background:var(--ok);color:var(--bg);font-size:calc(11px * var(--fz));font-weight:700;cursor:pointer;transition:transform .15s var(--ez);font-family:inherit;flex:0 0 auto}
.rev__go:active{transform:scale(.96)}
/* شريطُ الكتابة */
.cbarw{padding:calc(8px * var(--ui)) var(--pad) max(14px * var(--ui),var(--safe-b));flex:0 0 auto}
.cbar{max-width:calc(640px * var(--ui));margin:0 auto;display:flex;align-items:flex-end;gap:calc(8px * var(--ui));padding:calc(8px * var(--ui)) calc(18px * var(--ui)) calc(8px * var(--ui)) calc(8px * var(--ui));border-radius:18px;border:1px solid var(--line);background:var(--surf);box-shadow:var(--shadow)}
html[dir="ltr"] .cbar{padding:calc(8px * var(--ui)) calc(8px * var(--ui)) calc(8px * var(--ui)) calc(18px * var(--ui))}
.cbar textarea{flex:1;min-width:0;border:0;background:transparent;outline:none;resize:none;field-sizing:content;min-height:1lh;max-height:7lh;padding:calc(7px * var(--ui)) 0;font-size:calc(14px * var(--fz));line-height:1.65;color:var(--ink)}

/* ════ المؤلِّف ════ */
.cp{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:clamp(14px * var(--ui),6vh,44px * var(--ui)) var(--pad) calc(30px * var(--ui));display:flex;flex-direction:column;align-items:center;gap:calc(18px * var(--ui))}
/* ── سؤالُ المنصّة يتوسّط لوحَه ────────────────────────────────────────────────
   «وش تحتـــاج؟» وحقلُه كتلةٌ واحدةٌ ارتفاعُها ثلثُ اللوح، وكانت تجلس في رأسه
   ويمتدّ تحتها ثلثاه بياضاً — فتُقرأ الشاشةُ ناقصةً وكأنّ شيئاً لم يُحمَّل بعد.
   هامشان تلقائيّان يقسمان الفائضَ فوقها وتحتها بالسواء، فتقع في مركز البصر.
   ومتى طالت الكتلةُ (لوحُ الفهم، وبطاقةُ سؤال، ومسودّةٌ تُراجَع) صار الهامشان
   صفرين من تلقائهما فلا يُقَصُّ رأسُها ولا ذيلُها. */
.cp>:first-child{margin-block-start:auto}
.cp>:last-child{margin-block-end:auto}
.cp__hero{width:100%;max-width:calc(620px * var(--ui));display:flex;flex-direction:column;gap:calc(6px * var(--ui))}
.cp__h1{margin:0;font-size:calc(34px * var(--fz));font-weight:900;line-height:1.5;font-feature-settings:'dlig' 1,'jalt' 1,'ss01' 1,'calt' 1}
.cp__p{margin:0;font-size:calc(13px * var(--fz));color:var(--ink2)}
.cp__box{position:relative;width:100%;max-width:calc(620px * var(--ui));display:flex;align-items:flex-end;gap:calc(8px * var(--ui));padding:calc(8px * var(--ui)) calc(18px * var(--ui)) calc(8px * var(--ui)) calc(8px * var(--ui));border-radius:18px;border:1px solid var(--line);background:var(--surf);box-shadow:var(--shadow)}
html[dir="ltr"] .cp__box{padding:calc(8px * var(--ui)) calc(8px * var(--ui)) calc(8px * var(--ui)) calc(18px * var(--ui))}
.cp__ph{position:absolute;inset-inline-start:calc(52px * var(--ui));inset-inline-end:calc(18px * var(--ui));top:calc(16px * var(--ui));font-size:calc(14px * var(--fz));color:var(--ink3);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.cp__ph.a{animation:ab-phin .55s var(--ez) backwards}
.cp__ph.b{animation:ab-phin2 .55s var(--ez) backwards}
.cp__box textarea{flex:1;min-width:0;border:0;background:transparent;outline:none;resize:none;field-sizing:content;min-height:3lh;max-height:8lh;padding:calc(8px * var(--ui)) 0;font-size:calc(14px * var(--fz));line-height:1.7;color:var(--ink)}
.cp__ai{width:100%;max-width:calc(620px * var(--ui));display:flex;align-items:center;justify-content:center;gap:calc(8px * var(--ui));padding:calc(12px * var(--ui));border-radius:13px;border:1px dashed color-mix(in srgb,var(--acc) 55%,transparent);background:var(--acc-t);color:var(--acc-ink);font-size:calc(13px * var(--fz));font-weight:700;cursor:pointer;transition:background .16s,transform .15s var(--ez);font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .cp__ai:hover{background:var(--acc-tt)}
}
.cp__ai:active{transform:scale(.98)}
.cp__card{width:100%;max-width:calc(620px * var(--ui));display:flex;flex-direction:column;gap:calc(11px * var(--ui));padding:calc(16px * var(--ui)) calc(17px * var(--ui));border-radius:16px;border:1px solid var(--line);background:var(--surf);box-shadow:var(--shadow2);animation:var(--fx-pop) .35s var(--ez-b) backwards}
.cp__k{font-size:calc(11px * var(--fz));font-weight:700;color:var(--acc-ink)}
.cp__q{font-size:calc(15px * var(--fz));font-weight:500}
.cp__opts{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ui))}
.cp__opt{padding:calc(7px * var(--ui)) calc(13px * var(--ui));border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:calc(12px * var(--fz));font-weight:500;cursor:pointer;transition:background .16s;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .cp__opt:hover{background:var(--fill)}
}
.cp__row{display:flex;align-items:center;gap:calc(6px * var(--ui))}
.cp__cin{flex:1;display:flex;align-items:center;gap:calc(7px * var(--ui));height:calc(34px * var(--ui));padding:0 calc(12px * var(--ui));border-radius:10px;background:var(--fill)}
.cp__cin input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:calc(12.5px * var(--fz));color:var(--ink)}
.cp__done{height:calc(34px * var(--ui));padding:0 calc(15px * var(--ui));border:0;border-radius:10px;background:var(--acc);color:var(--bg);font-size:calc(12px * var(--fz));font-weight:700;cursor:pointer;font-family:inherit}
.cp__skip{padding:calc(5px * var(--ui)) calc(11px * var(--ui));border:0;border-radius:999px;background:transparent;color:var(--ink3);font-size:calc(11px * var(--fz));cursor:pointer;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .cp__skip:hover{background:var(--fill)}
}
.cp__draft{font-size:calc(14.5px * var(--fz));line-height:1.85;white-space:pre-wrap;display:block}
.cp__grasp{width:100%;max-width:calc(620px * var(--ui));display:flex;flex-direction:column;gap:calc(7px * var(--ui));padding:calc(9px * var(--ui)) calc(13px * var(--ui));border-radius:12px;background:var(--acc-t);animation:var(--fx-slide) .28s var(--ez)}
.cp__gr{display:flex;align-items:center;gap:calc(8px * var(--ui));flex-wrap:wrap}
.cp__gk{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));font-size:calc(11px * var(--fz));font-weight:700;color:var(--acc-ink);flex:0 0 auto}
.cp__gc{display:inline-flex;align-items:center;gap:calc(4px * var(--ui));padding:calc(4px * var(--ui)) calc(11px * var(--ui));border:0;border-radius:999px;background:var(--surf);font-size:calc(11.5px * var(--fz));font-weight:500;color:var(--ink);font-family:inherit;cursor:pointer;text-align:start;animation:var(--fx-pop) .32s var(--ez-b) backwards;transition:background .16s,box-shadow .16s}
.cp__gc--ro{cursor:default}
/* مسودةُ الطلب داخل لوح الاستئذان — تُقرأ لا تُزحم، وتُمرَّر إن طالت */
.ask__body{display:block;max-height:calc(168px * var(--ui));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:calc(10px * var(--ui)) calc(12px * var(--ui));border-radius:11px;background:var(--fill);color:var(--ink);font-size:calc(13px * var(--fz));line-height:1.8;white-space:pre-wrap;text-align:start}
/* ── رقاقاتُ معيار الاهتمام: ثلاثةُ خياراتٍ يُقرأ وصفُها لا رقمُها ───────────
   عمودٌ لا صفّ: الوصفُ سطرٌ كاملٌ («ما يصلني إلا صميم مجالي») ولا يسع صفّاً
   من ثلاثة على عرض جوّال. والمختارُ يأخذ تينتَ الهوية وطوقاً داخلياً — لا
   حدّاً صلباً يزحف الصفَّ بكسلاً عند التبديل. */
.stx{display:grid;gap:calc(6px * var(--ui));margin-top:calc(6px * var(--ui))}
.stx__b{display:block;width:100%;text-align:start;padding:calc(9px * var(--ui)) calc(11px * var(--ui));
  border:0;border-radius:11px;background:var(--fill);color:var(--ink);cursor:pointer;
  box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .2s var(--ez),background-color .2s var(--ez)}
.stx__b b{display:block;font-size:calc(13px * var(--fz));font-weight:700}
.stx__b i{display:block;font-style:normal;opacity:.66;font-size:calc(11.5px * var(--fz));line-height:1.6}
.stx__b.on{background:var(--acc-t);color:var(--acc-ink);box-shadow:var(--focus-line)}
.stx__b:active{transform:scale(.99)}
/* سطرُ الحدود تحت المصغّرات: خبرٌ لا دعوة، فيأخذ الحبرَ الثالثَ ولا يأخذ لوناً */
.cp__lim{margin-top:calc(6px * var(--ui));color:var(--ink3);text-align:start;
  font-size:calc(11px * var(--fz));line-height:1.6}
/* ── «ما عرفنا» — صراحةٌ تحت المتن، لا اعتذارٌ ولا إنذار ────────────────────
   ليست خطأً فتُطلى حمرةَ ‎--bad‎، وليست خبراً عادياً فتُبتلع في ‎--ink3‎: هي
   دعوةٌ لعملٍ صغيرٍ يربح صاحبَه عروضاً أدقّ، فتأخذ لونَ الهوية على تينتِه —
   المكانَ نفسَه الذي تشغله كلُّ دعوةٍ في المنصّة (‎.cp__gc--gap‎ حرفاً).
   والسطرُ الثاني ‎<i>‎ أخفتُ: السببُ يُقرأ بعد الأسماء لا قبلها. */
.ask__miss{display:flex;gap:calc(7px * var(--ui));align-items:flex-start;
  padding:calc(8px * var(--ui)) calc(11px * var(--ui));border-radius:10px;
  background:var(--acc-t);color:var(--acc-ink);text-align:start;
  font-size:calc(12px * var(--fz));line-height:1.7}
.ask__miss svg{flex:0 0 auto;margin-top:calc(3px * var(--ui));opacity:.75}
.ask__miss bdi{font-weight:650}
.ask__miss i{display:block;font-style:normal;opacity:.72;font-size:calc(11px * var(--fz))}
/* ── متنُ لوح الفهم وهو يُحرَّر ─────────────────────────────────────────────
   شكلُ ‎.ask__body‎ حرفاً — الأرضيةُ والانحناءُ والحبرُ والسطر — فمن رأى لوحاً
   يقرأ ورأى لوحاً يُكتب فيه لا يتعلّم شكلين لمعنىً واحد؛ الفرقُ أنّ هذا يقبل
   الإصبع. والحقلُ عارٍ تماماً (‎border:0;outline:0;background:transparent‎)
   والغلافُ وحدَه يحمل الطوقَ في «(ب)» أعلاه — وهي القاعدةُ التي مُنع بها
   المستطيلُ الأسودُ الحادُّ من العودة. و‎field-sizing‎ يجعله يكبر بنصّه إلى حدٍّ
   ثمّ يُمرَّر، فلا يقفز اللوحُ بطولِ ما قرأته العين. */
.ask__ed{display:block;padding:calc(10px * var(--ui)) calc(12px * var(--ui));
  border-radius:11px;background:var(--fill);text-align:start}
.ask__ed textarea{display:block;width:100%;border:0;outline:0;background:transparent;
  color:var(--ink);font:inherit;font-size:calc(13px * var(--fz));line-height:1.8;
  resize:none;field-sizing:content;
  max-height:calc(168px * var(--ui));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
@media (hover:hover) and (pointer:fine){
  button.cp__gc:hover{box-shadow:0 0 0 1px var(--acc) inset}
}
button.cp__gc:active{transform:scale(.96)}
/* الفجوةُ رقاقةٌ منقّطةٌ تُلمَس — دعوةٌ لا لومٌ، فلا حمرةَ فيها */
.cp__gc--gap{background:transparent;border:1px dashed color-mix(in srgb,var(--acc) 45%,var(--line));color:var(--acc-ink)}
/* ── الرقاقةُ وهي تُحرَّر: حقلٌ شفّافٌ فوق مرآةٍ تحمل اللون ──────────────────
   لا يمكن تلوينُ بعضِ قيمةِ ‎input‎، والقصُّ ممنوع — فالمرآةُ نسخةٌ من النصِّ
   تحت الحقلِ بنفسِ الخطِّ والمقاسِ والحشوة، فيها وحدَها يُطلى الزائدُ أحمرَ.
   والحقلُ فوقَها بنصٍّ شفّافٍ ومؤشّرٍ ظاهر: الكتابةُ طبيعيةٌ تماماً — مؤشّرٌ
   وتحديدٌ وتشكيلٌ عربيٌّ سليم — والعينُ ترى أين جاوزت. */
.cp__gc--ed{position:relative;padding:0;background:var(--surf);box-shadow:0 0 0 1px var(--acc) inset;min-width:calc(64px * var(--ui))}
.cp__gc--ed.bad{box-shadow:0 0 0 1px var(--bad) inset;animation:ab-nudge .3s var(--ez)}
.cp__gm,.cp__gi{padding:calc(4px * var(--ui)) calc(11px * var(--ui));font-size:calc(11.5px * var(--fz));font-weight:500;font-family:inherit;line-height:1.5;white-space:pre;letter-spacing:inherit}
.cp__gm{color:var(--ink);visibility:visible;pointer-events:none;min-width:calc(42px * var(--ui))}
.cp__gm b{color:var(--bad);font-weight:500}
.cp__gi{position:absolute;inset:0;width:100%;border:0;outline:none;background:transparent;color:transparent;caret-color:var(--acc);text-align:start}
.cp__gi::selection{background:var(--acc-t);color:var(--ink)}
/* ── سجلُّ الأسئلة: ما سُئل وما أُجيب، وبابُ العودة إليه ────────────────────
   من أغلق الخيارات بالغلط كان يفقدها إلى الأبد. الآن كلُّ سؤالٍ صفٌّ يُلمَس. */
.cp__qlog{display:flex;flex-direction:column;gap:calc(4px * var(--ui));border-top:1px solid color-mix(in srgb,var(--acc) 18%,transparent);padding-top:calc(7px * var(--ui))}
.cp__ql{display:flex;align-items:center;gap:calc(7px * var(--ui));width:100%;padding:calc(5px * var(--ui)) calc(9px * var(--ui));border:0;border-radius:9px;background:transparent;color:var(--ink2);font-size:calc(11.5px * var(--fz));font-family:inherit;text-align:start;cursor:pointer;transition:background .16s}
.cp__ql svg{flex:0 0 auto;color:var(--acc-ink)}
.cp__ql--skip svg:first-child{color:var(--ink3)}
.cp__ql svg:last-child{color:var(--ink3);margin-inline-start:auto}
.cp__qlq{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink3)}
.cp__qla{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--ink)}
.cp__ql--skip .cp__qla{font-weight:500;color:var(--ink3);font-style:normal}
@media (hover:hover) and (pointer:fine){
  .cp__ql:hover{background:var(--surf)}
}
/* ── بطاقةُ السؤال وشريطُ خطوها ─────────────────────────────────────────── */
.cp__ah{display:flex;align-items:center;gap:calc(8px * var(--ui));flex-wrap:wrap}
.cp__step{display:inline-flex;align-items:center;gap:calc(2px * var(--ui));flex:0 0 auto;padding:calc(2px * var(--ui));border-radius:999px;background:var(--fill)}
.cp__sb{display:inline-flex;align-items:center;justify-content:center;width:calc(24px * var(--ui));height:calc(24px * var(--ui));border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;transition:background .16s,opacity .16s;font-family:inherit}
.cp__sb:disabled{opacity:.3;cursor:default}
@media (hover:hover) and (pointer:fine){
  .cp__sb:not(:disabled):hover{background:var(--surf)}
}
.cp__sb:not(:disabled):active{transform:scale(.9)}
.cp__sn{font-size:calc(11px * var(--fz));font-weight:700;color:var(--ink2);padding:0 calc(4px * var(--ui));font-variant-numeric:tabular-nums}
/* الخيارُ التحريريُّ بابٌ لا حقلٌ مفتوحٌ دائماً — يُلمَس فيتمدّد سطرُه تحته */
.cp__opt--own{border-style:dashed;color:var(--ink2)}
.cp__opt--own.on{border-style:solid;background:var(--acc-t);border-color:color-mix(in srgb,var(--acc) 45%,var(--line));color:var(--acc-ink)}
.cp__row--own{animation:var(--fx-slide) .24s var(--ez) backwards}
/* المؤلّفُ لا يُهدَم أثناء تفكير أبيلي — يخفت ويبقى مقروءاً */
.cp__box.is-busy .cp__taw{opacity:.62;transition:opacity .2s ease}
.cp__wait{display:inline-flex;align-items:center;gap:calc(7px * var(--ui));font-size:calc(11.5px * var(--fz));color:var(--ink3);max-width:calc(260px * var(--ui));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes ab-nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(calc(-2px * var(--ui)))}75%{transform:translateX(calc(2px * var(--ui)))}}
.nofx .cp__gc--ed.bad{animation:none}

/* ════ الإعدادات (العميل + المتجر) ════ */
.st{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:calc(20px * var(--ui)) var(--pad) calc(30px * var(--ui))}
.st__in{max-width:calc(520px * var(--ui));margin:0 auto;display:flex;flex-direction:column;gap:calc(18px * var(--ui))}
.st__me{display:flex;align-items:center;gap:calc(11px * var(--ui));padding:calc(13px * var(--ui)) calc(15px * var(--ui));border-radius:13px;border:1px solid var(--line);background:var(--surf)}
.st__av{position:relative;width:calc(38px * var(--ui));height:calc(38px * var(--ui));flex:0 0 auto;border-radius:11px;background:var(--fill2);display:grid;place-items:center;font-size:calc(15px * var(--fz));font-weight:500;color:var(--ink2)}
.st__av--img{overflow:hidden}
.st__av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* رأسُ المتجر بابٌ لا لافتة: الشعارُ والاسمُ وسطرُهما زرٌّ واحدٌ يفتح الملفّ،
   والسهمُ المجاورُ وحدَه يبدّل المتجر — هدفان متجاوران لا متداخلان. */
.st__go{flex:1;min-width:0;display:flex;align-items:center;gap:calc(11px * var(--ui));padding:0;margin:0;border:0;border-radius:10px;background:transparent;color:inherit;font-family:inherit;text-align:start;cursor:pointer;transition:opacity .16s}
.st__go:active{opacity:.72}
@media (hover:hover) and (pointer:fine){
  .st__go:hover .tt2{color:var(--acc-ink)}
}
.st__sec{display:flex;flex-direction:column;gap:calc(6px * var(--ui))}
.st__lbl{font-size:calc(10.5px * var(--fz));font-weight:700;color:var(--ink3);padding:0 calc(4px * var(--ui))}
.st__card{display:flex;flex-direction:column;border-radius:13px;border:1px solid var(--line);background:var(--surf);overflow:hidden}
.st__row{display:flex;align-items:center;gap:calc(10px * var(--ui));width:100%;padding:calc(11px * var(--ui)) calc(15px * var(--ui));border:0;background:transparent;cursor:pointer;text-align:start;color:var(--ink);font-family:inherit;font-size:calc(13px * var(--fz))}
@media (hover:hover) and (pointer:fine){
  .st__row:hover{background:var(--fill)}
}
.st__row+.st__row,.st__row+div,div+.st__row{box-shadow:inset 0 1px 0 var(--line)}
.st__card>*:first-child{box-shadow:none}
.st__rowS{display:flex;align-items:center;gap:calc(10px * var(--ui));padding:calc(11px * var(--ui)) calc(15px * var(--ui))}
/* صفٌّ بمقبضٍ على مقاسٍ أكبر: العنوانُ يطول والمقطعُ يتّسع، فيُعصر العنوانُ حرفاً
   في كل سطر ويُخنق المقطع. فوق الوسط تنزل الأداةُ سطراً بحالها إلى الطرف —
   والحدُّ الأدنى للعنوان هو ما يُشعل النزول. والوسطُ وما دونه كما كانا. */
html[data-size="أكبر"] .st__rowS{flex-wrap:wrap}
html[data-size="أكبر"] .st__rowS>.st__col,
html[data-size="أكبر"] .st__rowS>.st__grow{min-width:calc(96px * var(--ui))}
html[data-size="أكبر"] .st__rowS>.seg{margin-inline-start:auto}
.st__grow{flex:1;min-width:0}
.st__sub{font-size:calc(10.5px * var(--fz));color:var(--ink3)}
/* ── شارتا الصفّ: ما يفرّق بين جارَين متشابهي الشكل ──────────────────────────
   قرصٌ في صدر الصفّ يحمل علامةً تقول وظيفتَه قبل أن يُقرأ عنوانُه. «Aa» للمقاس
   بحبرٍ حياديّ، و«ع/A» للّغة بلون الهوية — وشرطتُها أرقُّ من حرفيها كي تُقرأ
   فاصلاً بين أبجديّتين لا حرفاً ثالثاً. */
.st__bdg{width:calc(28px * var(--ui));height:calc(28px * var(--ui));flex:0 0 auto;border-radius:9px;background:var(--fill2);color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;gap:calc(1px * var(--ui));font-size:calc(11.5px * var(--fz));font-weight:700;letter-spacing:.2px;line-height:1}
.st__bdg--lang{background:var(--acc-t);color:var(--acc-ink)}
.st__bdg--lang>i{font-style:normal;font-weight:500;opacity:.55;font-size:calc(10px * var(--fz))}
.chip--lang{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));flex:0 0 auto;max-width:calc(140px * var(--ui))}
.chip--lang>bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:calc(2px * var(--ui))}
.st__col{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2.5px * var(--ui))}
.st__world{display:flex;align-items:center;gap:calc(10px * var(--ui));padding:calc(13px * var(--ui)) calc(15px * var(--ui));border-radius:13px;border:1px solid var(--line);background:var(--surf);color:var(--ink);cursor:pointer;text-align:start;transition:border-color .16s;font-family:inherit;width:100%}
@media (hover:hover) and (pointer:fine){
  .st__world:hover{border-color:var(--line2)}
}
.st__wtile{width:calc(32px * var(--ui));height:calc(32px * var(--ui));flex:0 0 auto;border-radius:10px;background:var(--me);display:grid;place-items:center;color:var(--me-ink)}
/* وبطاقةُ العبور في الإعدادات تلبس ما يلبسه زرُّ الرأس — البابان واحدٌ، فلونان
   لبابٍ واحدٍ يجعل الوجهةَ تُخمَّن مرّتين. والبلاطةُ داخلَها تنقلب إلى الشفافيّة
   كي تُقرأ على الملء، كما تفعل ‎.pt__c--biz .pt__tile‎ حرفاً. */
.st__world--acc{border-color:transparent;background:var(--acc);color:var(--bg)}
.st__world--biz{border-color:transparent;background:var(--me);color:var(--me-ink)}
.st__world--acc .st__wtile,.st__world--biz .st__wtile{background:rgba(255,255,255,.14);color:inherit}
.st__world--acc .tt2,.st__world--biz .tt2{color:inherit;opacity:.66}
.st__world--acc>svg:last-child,.st__world--biz>svg:last-child{color:inherit;opacity:.55}
.st__out{display:flex;align-items:center;justify-content:center;gap:calc(7px * var(--ui));padding:calc(11px * var(--ui));border-radius:13px;border:1px solid var(--line);background:var(--surf);color:var(--bad);font-size:calc(13px * var(--fz));font-weight:700;cursor:pointer;transition:background .16s;font-family:inherit;width:100%}
@media (hover:hover) and (pointer:fine){
  .st__out:hover{background:var(--fill)}
}
.st__ver{align-self:center;font-size:calc(10px * var(--fz));color:var(--ink3)}
.st__area{display:flex;align-items:center;gap:calc(10px * var(--ui));padding:calc(11px * var(--ui)) calc(15px * var(--ui));border-radius:13px;border:1px solid var(--line);background:var(--surf)}
/* كرتُ الفريق زرٌّ لا لوح: نفسُ الصندوق، ويُقرأ أنه يُفتح — سهمٌ في طرفه. */
.st__area--go{width:100%;cursor:pointer;color:inherit;font-family:inherit;text-align:start;transition:background .16s}
.st__area--go:active{background:var(--fill)}
@media (hover:hover){.st__area--go:hover{background:var(--fill)}}
/* الرفضُ يُلوَّن ليُقرأ حالةً لا خبراً عابراً — والسببُ تحته بنصّ المراجع. */
.st__area--warn{border-color:color-mix(in srgb,var(--warn) 42%,var(--line))}
.st__note{padding:calc(9px * var(--ui)) calc(13px * var(--ui));border-radius:11px;background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--ink2);font-size:calc(11.5px * var(--fz));line-height:1.75}
.st__chg{padding:calc(5px * var(--ui)) calc(13px * var(--ui));border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--acc-ink);font-size:calc(11.5px * var(--fz));font-weight:700;cursor:pointer;transition:background .16s;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .st__chg:hover{background:var(--acc-t)}
}

/* ════ عالم المتجر ════ */
.pv{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);min-height:0}
/* الرأسُ فوقَهما، والسكّةُ والجسدُ صفٌّ تحته (‎renderPV‎). */
.pv__wrap{flex:1;min-width:0;min-height:0;display:flex}
.rail{width:calc(var(--rail) + var(--safe-s));flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:calc(11px * var(--ui));padding:calc(13px * var(--ui)) 0 max(13px * var(--ui),var(--safe-b));padding-inline-start:var(--safe-s);border-inline-end:0;background:var(--side)}
/* صدرُ السكّة بلاطةُ الواردة، وهي كأخواتها حرفاً: لا أرضيةَ ملوّنةً تحتها ولا
   مقاسَ يزيد ولا خطَّ ينحف (أمرُ صاحب المنصّة — انظر ‎renderPV‎). فسقط صنفُها
   الخاصُّ ‎.rail__home‎ ولم تبقَ إلّا ‎.rail__b‎ لهنّ جميعاً.
   ولا يُبعَث ‎.rail__home‎ هنا إن عاد يوماً في الوسم: عودتُه خطأٌ يُصحَّح في
   ‎renderPV‎ لا قاعدةٌ تُكتب له — والقصّةُ كاملةً هناك.
   ── والصنفُ هو القسمةُ نفسُها ─────────────────────────────────────────────
   ‎.rail__b‎ لكلِّ ما يفتح شاشةً ويسكن فيها: الواردةُ والمحادثاتُ والاهتماماتُ
   والإعداداتُ ولوحُ الإدارة. و‎.rail__c‎ لما يُنقر فيتبدّل شيءٌ وتبقى حيث أنت:
   اللغةُ والمقاسُ والوضع. فالقرصُ الرماديُّ خبرٌ يقول «هذا أمرٌ لا باب»، ومن
   لبسه بابٌ قرأه صاحبُه زرَّ تبديل — وهو ما نُقل عن الإعدادات بأمر صاحب
   المنصّة، فلا يُلبَس ثانيةً لبابٍ ولو ضاق الذيل. */
.rail__b{position:relative;display:grid;place-items:center;width:calc(32px * var(--ui));height:calc(32px * var(--ui));flex:0 0 auto;border:0;border-radius:9px;cursor:pointer;transition:background .16s,color .16s;background:transparent;color:var(--ink3)}
.rail__b.on{background:var(--acc);color:var(--bg)}
/* والنقطةُ على البلاطة المضاءة تنقلب حبراً: أخضرُ على أخضرَ لا يُرى */
.rail__b.on .rail__dot{background:var(--bg)}
.rail__dot{position:absolute;top:calc(5px * var(--ui));left:calc(5px * var(--ui));width:calc(6px * var(--ui));height:calc(6px * var(--ui));border-radius:999px;background:var(--acc)}
.rail__sp{flex:1}
.rail__c{width:calc(30px * var(--ui));height:calc(30px * var(--ui));flex:0 0 auto;border-radius:999px;border:0;background:var(--fill);color:var(--ink2);display:grid;place-items:center;cursor:pointer;transition:background .16s,color .16s;font-size:calc(11px * var(--fz));font-weight:500;font-family:inherit}
.rail__c.on{background:var(--acc);color:var(--bg)}
@media (hover:hover) and (pointer:fine){
  .rail__c:hover{background:var(--fill2)}
  .rail__c.on:hover{background:var(--acc)}
}
/* ═══ الرأسُ والسكّةُ شريطٌ واحدٌ يلفّ الجسد ═══════════════════════════════════
   أمرُ صاحب المنصّة: «في حساب المتجر عندي هيدر وعندي قائمة جانبية أريدهما بنفس
   لون الهوية — لون الجانبية وهيدر واجهة إنشاء الطلبات — ومتّصلين بدون خطّ، مع
   انحناءةٍ دائريةٍ خفيفةٍ بالزاوية اللي بينهم، جميلةٍ صغيرةٍ وليست زاويةَ تسعين،
   بحيث تكون زيّ انحناء حقل البحث بمستواه».
   وكان الرأسُ على أرضيّة الصفحة (‎--bg‎) تفصله عن السكّة شعرتان: شعرةُ السكّة
   الجانبيةُ وشعرةُ الرأس السفلى — خطّان يقطعان ما هو في المعنى شيءٌ واحد: إطارُ
   التطبيق. فصار الاثنان ‎--side‎ بلا شعرةٍ بينهما، ويتّصلان في زاويةٍ واحدة،
   ويُركَن الجسدُ فيهما بركنٍ منحنٍ مقاسُه مقاسُ انحناء حقل البحث (‎9‎) — فالطبقةُ
   الواحدةُ تُقرأ طبقةً واحدة. */
.pv{background:var(--side)}
/* ── المحادثةُ المستحوِذة: لا سكّةَ إلى جانبها ────────────────────────────────
   والسكّةُ كانت تحمل حاشيةَ الأمان في جهة البدء (‎--safe-s‎)، فمتى غابت وقعت
   على اللوح نفسِه — وإلّا لامس الكلامُ نتوءَ الشاشة في الوضع الأفقيّ.
   ولا ركنَ منحنٍ بلا شريطٍ يلفّه: القطعةُ الصغيرةُ التي تُلقى على الزاوية
   (‎.pv__body::before‎) بلون السكّة، فبلا سكّةٍ تُقرأ نُتفةً في ركنٍ لا شيءَ حولها. */
.pv--solo{padding-inline-start:var(--safe-s)}
.pv--solo .pv__body::before{display:none}
/* واسمُ العميل في الرأس بدل مبدّل المتجر: بلاطتُه تكبر درجةً لتقرأ عنواناً */
.cli--hd{margin-bottom:0;padding-inline-start:calc(3px * var(--ui));min-width:0;flex:0 1 auto}
.cli--hd .cli__av{width:calc(27px * var(--ui));height:calc(27px * var(--ui));font-size:calc(11.5px * var(--fz))}
.cli--hd .cli__n{font-size:calc(14px * var(--fz));font-weight:700;color:var(--ink)}
/* المسرحُ لا يزيد في التخطيط شيئاً — يأخذ ما كان اللوحُ يأخذه ويسلّمه إليه.
   وهو موضعُ أرضية المشهد وحجابه أثناء سحب الرجوع (انظر ‎renderPV‎ و§5ج-ج). */
.pv__stage{flex:1;min-width:0;min-height:0;display:flex}
.pv__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;min-height:0;background:var(--side)}
/* والرأسُ بعرض الشاشة كلِّها الآن، فحاشيتُه في جهة البدء تحسب انحناءَ الجهاز:
   بدجُ المتجر يبلغ الحافّةَ التي كانت للسكّة، ولا يُدفَع تحت الانحناء. */
.pv__hd{display:flex;align-items:center;gap:calc(10px * var(--ui));padding:calc(10px * var(--ui)) var(--pad);padding-inline-start:max(var(--pad),calc(var(--safe-s) + 10px * var(--ui)));min-height:calc(52px * var(--ui));flex:0 0 auto;background:var(--side)}
/* ── والركنُ يُرسَم على الزاوية لا بقصِّ الجسد ──────────────────────────────────
   ‎border-radius‎ على الجسد يحتاج ‎overflow:hidden‎ ليُرى، وذلك يقصُّ ما يخرج من
   جوفه: لوحُ الترتيب الذي ينفتح من صفِّ البحث، والبطاقةُ المثبَّتةُ فوق المحادثة.
   فالركنُ قطعةٌ صغيرةٌ بلون الشريط تُلقى فوق الزاوية وتُقنَّع بربعِ قرص — تُرى
   انحناءةً ولا تمسّ شيئاً تحتها. ومقاسُ القرص مقاسُ انحناء حقل البحث نفسِه. */
.pv__body{position:relative;flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.pv__body::before{content:"";position:absolute;z-index:9;pointer-events:none;
  top:0;inset-inline-start:0;width:calc(9px * var(--ui));height:calc(9px * var(--ui));background:var(--side);
  -webkit-mask-image:radial-gradient(circle calc(9px * var(--ui)) at 0 100%,transparent 99%,#000 100%);
  mask-image:radial-gradient(circle calc(9px * var(--ui)) at 0 100%,transparent 99%,#000 100%)}
html[dir="ltr"] .pv__body::before{
  -webkit-mask-image:radial-gradient(circle calc(9px * var(--ui)) at 100% 100%,transparent 99%,#000 100%);
  mask-image:radial-gradient(circle calc(9px * var(--ui)) at 100% 100%,transparent 99%,#000 100%)}
/* ── والركنُ السفليُّ مثلُه ─────────────────────────────────────────────────────
   أمرُ صاحب المنصّة: «الزاوية التي تلتقي فيها القائمة الجانبية في المزوّد مع
   الجزء السفلي التابع لسفاري، أريد فيها انحناءةً جميلةً أيضاً زيّ الانحناء اللي
   بالزاوية الفوقية». والجسدُ كان يُركَن في الشريط بركنٍ واحدٍ فوق وزاويةِ تسعين
   تحت — فالسكّةُ تنتهي عند حافّة الشاشة بحدٍّ حادّ، والعينُ تقرأ الشريطَ
   منقطعاً. القطعةُ نفسُها بمقاسها نفسِه، مقلوبةً على محورها: قرصُ القناع في
   الزاوية العليا من المربّع بدل السفلى. */
.pv__body::after{content:"";position:absolute;z-index:9;pointer-events:none;
  bottom:0;inset-inline-start:0;width:calc(9px * var(--ui));height:calc(9px * var(--ui));background:var(--side);
  -webkit-mask-image:radial-gradient(circle calc(9px * var(--ui)) at 0 0,transparent 99%,#000 100%);
  mask-image:radial-gradient(circle calc(9px * var(--ui)) at 0 0,transparent 99%,#000 100%)}
html[dir="ltr"] .pv__body::after{
  -webkit-mask-image:radial-gradient(circle calc(9px * var(--ui)) at 100% 0,transparent 99%,#000 100%);
  mask-image:radial-gradient(circle calc(9px * var(--ui)) at 100% 0,transparent 99%,#000 100%)}
.pv__store{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));max-width:100%;padding:calc(3px * var(--ui)) calc(11px * var(--ui));border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink);cursor:pointer;transition:background .16s;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .pv__store:hover{background:var(--fill)}
}
.pv__store bdi{font-size:calc(14px * var(--fz));font-weight:700;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pv__title{font-size:calc(14.5px * var(--fz));font-weight:700;color:var(--ink);line-height:1.6;white-space:nowrap;flex:0 0 auto;font-feature-settings:'dlig' 1,'jalt' 1,'ss01' 1,'calt' 1}
/* ── نسخةُ العنوان في الرأس — يسارَ اسم المتجر ──────────────────────────────────
   «وينتقل بنعومة وسلاسة للهيدر يسار اسم المتجر، وينقطع بتدرّجٍ لونيٍّ خفيفٍ
   شفّافٍ قبل الثلاث نقاط مباشرة». والقصُّ قناعٌ لا نقاطٌ ثلاث: النقاطُ تقول
   «انتهى النصُّ هنا»، والتدرّجُ يقول «بقيّتُه هناك» — وهو الصادقُ، إذ البطاقةُ
   الكاملةُ على بُعد تمريرةٍ واحدةٍ لأعلى.
   والدخولُ إزاحةٌ من الصفر لا ظهورٌ مفاجئ: العرضُ يُفتَح من ‎0‎ ويهبط العنوانُ
   ثمانيَ بكسلاتٍ، فيُقرأ «نزل من مكانه» لا «وُلد هنا». وبمنحنى البحث وزمنه. */
.pv__reqm{flex:0 1 auto;min-width:0;max-width:0;overflow:hidden;white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateY(calc(-8px * var(--ui)));
  font-size:calc(12.5px * var(--fz));font-weight:500;color:var(--ink2);line-height:1.6;
  -webkit-mask-image:linear-gradient(to left,#000 62%,transparent 100%);
  mask-image:linear-gradient(to left,#000 62%,transparent 100%);
  transition:opacity .22s var(--ez),transform .3s var(--ez),max-width .3s var(--ez)}
html[dir="ltr"] .pv__reqm{-webkit-mask-image:linear-gradient(to right,#000 62%,transparent 100%);mask-image:linear-gradient(to right,#000 62%,transparent 100%)}
.pv__reqm.on,html[data-kb] .pv__reqm{opacity:1;transform:none;max-width:100%}
/* ── رأسُ خطّ الصفقات: بدجُ المتجر ثم شريطُ الحالات ─────────────────────────────
   الحالاتُ ستٌّ ومعها الفرزُ، فهي «محدودةٌ غالباً» كما قال صاحبُ المنصّة — تسكن
   بقيّةَ الرأس بعد اسم المتجر وتنسحب جانبياً متى ضاق. و‎min-width:0‎ على الاثنين
   شرطُ الانكماش: بدونها يدفع الشريطُ الرأسَ فيخرج العنوانُ من الشاشة. */
.pv__hdl{flex:1;min-width:0;display:flex;align-items:center;gap:calc(9px * var(--ui))}
.pv__flt{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:calc(4px * var(--ui));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;padding-block:calc(3px * var(--ui))}
.pv__flt::-webkit-scrollbar{display:none}
/* الاهتماماتُ صفٌّ ثانٍ تحت الرأس — لا حدَّ لعددها فلا تُزاحم الحالات.
   ── ونَفَسُه مقسومٌ على جانبيه ───────────────────────────────────────────────
   الشكوى بحرفها: «صفّ الفلاتر الثاني مساحته لاصق بالخط التحتي وأبعد من الشريط
   اللي فوق». وهي حسابٌ لا ذوق: فوقه كان يجتمع ثلاثةُ حشوٍ — ما يفضل من ارتفاع
   الرأس المقرَّر (٥٢) بعد صفِّ الحالات، وحشوةُ الرأس السفلى، وحشوتُه هو العليا
   — فقرابةُ خمسةَ عشرَ بكسلاً؛ وتحته حشوةٌ واحدةٌ اثنتان ثم يبدأ لونُ الجسد.
   فيُقرأ ملتصقاً بحدِّ الجسد الذي ليس منه، ومنفصلاً عن الشريط الذي هو منه.
   والعلاجُ نقلُ ما فوقه إلى ما تحته لا زيادةُ الشريط كلِّه: يُطرح من حشوته
   العليا ما يُضاف إلى السفلى، فيبقى ارتفاعُ الشريط كما هو ويستوي الجانبان. */
.pv__ints{display:flex;align-items:center;gap:calc(4px * var(--ui));flex:0 0 auto;padding:calc(2px * var(--ui)) var(--pad) calc(11px * var(--ui));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.pv__ints::-webkit-scrollbar{display:none}
/* دبّوسُ التثبيت — علامةٌ صامتةٌ بجانب العنوان، لا رقاقةٌ تأكل سطراً.
   وكان دبّوساً عارياً بخطٍّ رفيعٍ على أرضيةِ البطاقة: عشرُ نقاطٍ من خطٍّ بلونٍ
   قريبٍ لا تُقرأ دبّوساً بل شرطةً. الآن قرصٌ من ستَّ عشرةَ نقطةً بتينتِ الهوية
   يحمله — القرصُ يفصله عمّا حوله فيُعرَف من شكله، والدبّوسُ نفسُه صار مصمتَ
   الرأس فلا يتلاشى عند التصغير. والحجمُ لم يكبر إلا نقطتين: «وضحه مع احترام
   الحجم» — لا بدجاً يزاحم العنوان. */
.pinm{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:calc(16px * var(--ui));height:calc(16px * var(--ui));border-radius:999px;
  background:var(--acc-t);color:var(--acc-ink)}
/* اللوحات */

/* ══ البحثُ في الطلبات — قسمان في شاشة الواردة، وصفحةٌ لكلِّ قسمٍ عند طلبه ══════
   «البحث يصبح مدمجًا داخل الطلبات الواردة … القسم الأول: نتائج من اهتماماتي …
    فاصل واضح وبسيط … القسم الثاني: نتائج البحث العام في الطلبات».
   والقسمُ لا يُعلَن بلوحةٍ ولا بأرضيّة: سطرٌ فيه اسمُه وعدُّه، و«المزيد» في طرفه
   متى كان وراءه بقيّة. والفاصلُ شعرةٌ واحدةٌ بعرض القائمة — أبسطُ ما يقول
   «انتهى قسمٌ وبدأ آخر»، ولا يزاحم البطاقاتِ التي هي أصلُ الشاشة. */
.srh{display:flex;align-items:center;gap:calc(7px * var(--ui));padding:calc(11px * var(--ui)) calc(6px * var(--ui)) calc(5px * var(--ui))}
.srh__t{font-size:calc(11px * var(--fz));font-weight:700;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* وعدّادُ النتائج بالحبر الثاني لا الثالث: هو الشيءُ الوحيدُ الذي يحمل حرفاً
   على ‎--fill2‎ — أعمقِ رقاقةٍ في اللوحة — والثالثُ يبلغ العتبةَ على كلِّ أرضيةٍ
   إلّا هذه. ورقمٌ بوزن سبعمئة حبرُه الثاني بحكم دورِه لا بحكم الحاجة. */
.srh__n{flex:0 0 auto;min-width:calc(18px * var(--ui));padding:0 calc(5px * var(--ui));border-radius:999px;background:var(--fill2);color:var(--ink2);font-size:calc(10px * var(--fz));font-weight:700;line-height:calc(16px * var(--ui));text-align:center}
.srh__more{display:inline-flex;align-items:center;gap:calc(3px * var(--ui));flex:0 0 auto;padding:calc(3px * var(--ui)) calc(8px * var(--ui));border:0;border-radius:999px;background:transparent;color:var(--acc-ink);cursor:pointer;font-family:inherit;font-size:calc(11px * var(--fz));font-weight:700;transition:background .16s}
@media (hover:hover) and (pointer:fine){.srh__more:hover{background:var(--acc-t)}}
.srh__more:active{background:var(--acc-t)}
.srh__cut{height:1px;flex:0 0 auto;margin:calc(9px * var(--ui)) calc(6px * var(--ui)) 0;background:var(--line)}
.srh__none{display:flex;align-items:center;gap:calc(7px * var(--ui));padding:calc(9px * var(--ui)) calc(10px * var(--ui));color:var(--ink3);font-size:calc(11.5px * var(--fz))}
.srh__add{display:flex;padding:calc(10px * var(--ui)) calc(6px * var(--ui)) calc(4px * var(--ui))}
/* والصفحةُ المستقلّةُ تملك شاشتَها: رأسٌ فيه الرجوعُ والعنوانُ والكلمةُ المبحوثة،
   ثمّ البطاقاتُ نفسُها بعرضٍ مقروءٍ لا بعرض عمودِ القائمة. */
.srm{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.srm__hd{display:flex;align-items:center;gap:calc(10px * var(--ui));padding:calc(10px * var(--ui)) var(--pad);min-height:calc(52px * var(--ui));border-bottom:1px solid var(--line);flex:0 0 auto}
.srm__tt{display:flex;flex-direction:column;gap:calc(1px * var(--ui));min-width:0;flex:1}
.srm__t{font-size:calc(13.5px * var(--fz));font-weight:700;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srm__q{display:flex;align-items:center;gap:calc(6px * var(--ui));min-width:0;font-size:calc(11px * var(--fz));color:var(--ink3)}
.srm__q>bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:calc(2px * var(--ui))}
.srm__n{flex:0 0 auto;min-width:calc(18px * var(--ui));padding:0 calc(5px * var(--ui));border-radius:999px;background:var(--fill2);color:var(--ink2);font-size:calc(10px * var(--fz));font-weight:700;line-height:calc(16px * var(--ui));text-align:center}
.srm__list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:calc(2px * var(--ui));padding:calc(8px * var(--ui)) calc(10px * var(--ui)) calc(14px * var(--ui));max-width:calc(720px * var(--ui));width:100%;margin:0 auto;overscroll-behavior:contain}
.pv__row{flex:1;min-height:0;display:flex}
/* لوحٌ واحدٌ يملأ الصفَّ — شاشةُ المحادثة (المحرّك: ‎renderPV‎ في ab2.js) */
.pv__row--solo>.inb,.pv__row--solo>.pdw{width:100%;flex:1;min-width:0;border-inline-end:0}
.inb{width:var(--inbox);flex:0 0 auto;display:flex;flex-direction:column;border-inline-end:1px solid var(--line);background:var(--surf);min-height:0}
/* الطيّةُ على الحقل نفسِه لا على غلافٍ حوله: حشوتُه العلويةُ جزءٌ ممّا ينطوي،
   وغلافٌ بلا حشوةٍ كان يترك فراغَ عشرةِ بكسلاتٍ معلَّقاً فوق الرقائق. والسقفُ
   يُقاس بـ‎--ui‎ كارتفاع الحقل نفسِه فلا يقصُّ عند تكبير الخطّ. */
.inb__srch{padding:calc(10px * var(--ui)) calc(10px * var(--ui)) 0;overflow:hidden;
  max-height:calc(52px * var(--ui));opacity:1;
  transition:max-height .28s var(--ez),opacity .22s,padding-top .28s}
.inb__srch.hid{max-height:0;opacity:0;padding-top:0}
.inb__filters{display:flex;gap:calc(4px * var(--ui));padding:calc(10px * var(--ui)) calc(10px * var(--ui)) calc(6px * var(--ui));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.inb__filters::-webkit-scrollbar{display:none}
.inb__list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:calc(2px * var(--ui));padding:calc(6px * var(--ui)) calc(8px * var(--ui)) calc(10px * var(--ui))}
.ir{display:flex;flex-direction:column;gap:calc(2px * var(--ui));width:100%;padding:calc(9px * var(--ui)) calc(10px * var(--ui));border:0;border-radius:11px;cursor:pointer;text-align:start;transition:background .16s;color:var(--ink);background:transparent;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .ir:hover{background:var(--fill)}
}
.ir.cur{background:var(--acc-t)}
.ir__top{display:flex;align-items:center;gap:calc(7px * var(--ui))}
.ir__t{flex:1;min-width:0;font-size:calc(12.5px * var(--fz));font-weight:500;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ir__w{font-size:calc(10px * var(--fz));color:var(--ink3);flex:0 0 auto}
.ir__s{font-size:calc(10px * var(--fz));color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-start:calc(14px * var(--ui))}
.ir__s.mine{color:var(--acc-ink);font-weight:700}
/* ══ لوحُ التفاصيل: رأسٌ يثبت، ومتنٌ يمشي، ورصيفٌ أسفلَه لا فيه ══════════════
   الشكوى بحرفها: «إذا حرّكت سكرول بداخل تفاصيل الطلب الوارد يتحرّك … فقط دون
   شيءٍ آخر». وهي وصفٌ دقيقٌ لِما كان: اللوحُ مُمَرِّرٌ واحدٌ فيه لاصقان — بطاقةُ
   الطلب في قمّته ومؤلّفُ العرض في قاعه — فلا يبقى للأصبع إلا السطرُ الواحدُ
   بينهما. والبطاقةُ المفتوحةُ تبلغ آلافَ البكسلات وهي لاصقةٌ بـ‎z-index:5‎، فلا
   يُقرأ ذيلُها أبداً وتُطبَق على المؤلّف في القاع فيغيب تحتها.
   والترتيبُ الآن ترتيبُ المحادثة نفسُه (‎.th‎ ثم ‎.cbarw‎): ‎.pdw‎ عمودٌ، فيه
   مُمَرِّرٌ واحدٌ ‎.pd‎ ورصيفٌ تحته. ولا يثبت في المُمَرِّر إلا رأسُ الطلب — هويّةُ
   الشاشة وسهمُ طيّها — ويمشي كلُّ ما سواه مع الأصبع. */
/* والفُرجةُ فوق الرأس فُرجةُ العمود لا حشوةُ المُمَرِّر: مستطيلُ اللصق يُقاس
   بصندوق المحتوى، فحشوةٌ علويّةٌ في المُمَرِّر تُثبِّت الرأسَ تحتها بمقدارها
   ويمرّ النصُّ في الشريط الباقي فوقه. فرُفعت إلى العمود: أرضيّةٌ مصمتةٌ لا يعبرها
   حرف، والرأسُ يثبت في قمّة ما يُمرَّر تماماً. */
.pdw{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;padding-top:calc(16px * var(--ui));background:var(--bg)}
.pd{flex:1;min-width:0;display:flex;flex-direction:column;padding:0 var(--pad) calc(10px * var(--ui));gap:calc(11px * var(--ui));overflow-y:auto;overflow-x:hidden;min-height:0}
/* ── الطلبُ يجلس فوق المؤلّف، لا في رأس فراغٍ يفصله عنه ───────────────────────
   اللوحُ عمودٌ: طلبٌ في أعلاه ومؤلّفُ عرضٍ ملتصقٌ بقاعه، وبينهما — في أشيعِ حالٍ
   على الإطلاق، طلبٌ وارِدٌ لم تُكتب تحته كلمةٌ بعد — ثلاثُمئةِ بكسلٍ من البياض.
   فتقرأ الطلبَ في أعلى الشاشة ثمّ تنزل بعينك عبر الفراغ لتكتب سعرَك: خطوتان
   لفعلٍ واحد. والمحادثاتُ كلُّها في الأرض تفعل عكسَ ذلك — الكلامُ يتراكم من
   القاع صعوداً، والفراغُ فوقَه لا تحته. فهامشٌ عُلويٌّ تلقائيٌّ على أوّلِ أبناء
   المُمَرِّر: يجمع الفائضَ فوق المحتوى فيهبط الطلبُ إلى جوار الحقل الذي يُجاب
   فيه. ومتى امتلأ اللوحُ (محادثةٌ تطول) صار الهامشُ صفراً من تلقائه فيعود
   الترتيبُ كما كان ولا يُقَصُّ أعلاه — وهذا ما يفرّق الهامشَ التلقائيَّ عن
   ‎justify-content:flex-end‎ الذي يبتلع رأسَ المحتوى في مُمَرِّرٍ أضيقَ منه. */
.pd>:first-child{margin-block-start:auto}
/* ولوحٌ بلا رصيفٍ (طلبٌ منتهٍ) يحمل حشوةَ الجهاز بنفسه */
.pd--bare{padding-bottom:max(14px * var(--ui),var(--safe-b))}
/* والحشوةُ السفلى ثلاثٌ لا اثنتا عشرة: تسعُها في الرأس نفسِه (أو في المتن حين
   ينفتح)، فيجتمع تحت العنوان مطويّاً ‎9+3‎ كما فوقَه ‎12‎ — ميزانٌ لا يختلّ بحال. */
/* ══ بطاقةُ العميل — مَن أنت تكلّم، باسمه عندك ═════════════════════════════
   شاشةُ محادثةٍ بلا طرفٍ مسمّىً تُقرأ لوحَ طلبٍ لا محادثة. والاسمُ اسمُك أنت له:
   قرصٌ فيه رقمُه في تسلسلك، ثمّ اسمُه، ثمّ قلمٌ باهتٌ يقول إنّه يُغيَّر بلمسة.
   ولا يزاحم بطاقةَ الطلب تحته: سطرٌ واحدٌ بلا أرضيّةٍ ولا حدّ، يُقرأ ترويسةً لا
   بطاقةً ثانية. (المحرّك: ‎cliLabel‎ في ab2.js) */
.cli{display:inline-flex;align-items:center;gap:calc(7px * var(--ui));align-self:flex-start;max-width:100%;min-width:0;margin-bottom:calc(-2px * var(--ui));padding:calc(4px * var(--ui)) calc(9px * var(--ui)) calc(4px * var(--ui)) calc(7px * var(--ui));border:0;border-radius:999px;background:transparent;color:var(--ink2);cursor:pointer;font-family:inherit;transition:background .16s}
@media (hover:hover) and (pointer:fine){.cli:hover{background:var(--fill)}}
.cli:active{background:var(--fill)}
.cli__av{width:calc(21px * var(--ui));height:calc(21px * var(--ui));flex:0 0 auto;border-radius:999px;background:var(--acc-t);color:var(--acc-ink);display:grid;place-items:center;font-size:calc(10px * var(--fz));font-weight:700}
.cli__n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(12px * var(--fz));font-weight:700;color:var(--ink);padding-inline-end:calc(2px * var(--ui))}
/* ولا زجاجَ حيٍّ هنا كذلك — الشرحُ عند ‎.ctx__h‎، وهي البطاقةُ نفسُها في العالم الآخر */
/* و‎flex:0 0 auto‎ شرطُ ‎overflow:hidden‎ أدناه لا زينةٌ معه: البطاقةُ عنصرٌ في
   عمودٍ مرن، وأدنى مقاسٍ تلقائيٍّ لعنصرٍ مرنٍ هو مقاسُ محتواه — إلا أن يكون
   فيضُه مقصوصاً فيصير صفراً. فبلا هذا السطر تنكمش البطاقةُ إلى حشوتها وحدَها
   (١٧بك) في لوحٍ طويل، ويُقَصُّ عنوانُها كلُّه. قِيس. */
.pd__req{flex:0 0 auto;display:flex;flex-direction:column;padding:calc(12px * var(--ui)) calc(17px * var(--ui)) calc(3px * var(--ui));border-radius:16px;background:var(--surf);border:1px solid var(--line);box-shadow:var(--shadow)}
/* مطويّاً: البطاقةُ هي الرأسُ نفسُه، فتثبت كاملةً فوق ما يمرّ تحتها.
   مفتوحاً: تمشي البطاقةُ في المجرى ويثبت رأسُها وحدَه. والقاعدةُ التي لا تُخرَق:
   ‎.open‎ لا تملك من تخطيط الرأس شيئاً — لا عرضاً ولا حشوةً ولا موضعاً — فالرأسُ
   صندوقٌ واحدٌ في الحالين. وكان يملكها فكان سهمُ الطيّ يقفز ٣٤بك عرضاً و١٢بك
   ارتفاعاً في اللحظة التي تُنزَع فيها الوسمُ آخرَ السفر: خطوةٌ وسيطةٌ تُرى بعد
   أن يكون المتنُ قد انطوى كلَّه. ولم يبقَ لها إلا الاستدارةُ — وهي لا تُحرّك بكسلاً. */
/* والسقفُ يعيش على الحال المطويّة وحدَها: الطيّةُ انتقالٌ من رقمٍ إلى رقم، و‎none‎
   لا تُستوفى إلى صفرٍ فتقفز. و‎.open‎ تنزعه من أوّل إطارٍ في الفتح (‎pdFold‎ يضع
   الوسمَ في مبتدأ الرحلة لا في منتهاها)، فلا يُقَصُّ متنٌ ينفتح. */
/* ── والطيّةُ ستارٌ يُسدَل لا صندوقٌ يُقَصّ ────────────────────────────────────
   ‎overflow:hidden‎ كان على الحال المنطوية وحدَها، فيعود ‎visible‎ في أوّل إطارٍ
   من الانفراد: البطاقةُ تظهر بكامل قامتها دفعةً واحدةً بينما ينمو تحتها الصندوقُ
   على مهله — وذاك «القسوةُ» التي وُصفت. وهو على الحالين هنا، فيُقَصُّ المحتوى
   مع الصندوق في الاتجاهين معاً ويُقرأ ستاراً يُسدَل ويُرفَع.
   ولا يمسّ ظلَّها: ظلُّ العنصر يُرسَم خارج صندوقه ولا يقصّه فيضُه هو. */
/* والسقفُ يُقاسُ على قامة البطاقة لا على ضِعفِها الثلاثة: الطيّةُ انتقالٌ من رقمٍ
   إلى رقم، فسقفُ ‎260‎ لبطاقةٍ قامتُها ‎91‎ يقطع الطريقَ كلَّه في خُمس الزمن ثمّ
   يزحف على فراغ — وهو ما يُرى «قفزةً» لا طيّاً، وهو ما يجعل شريطَ البحث ناعماً
   وهذه قاسية: ذاك سقفُه ‎40‎ لصفٍّ قامتُه ‎40‎.
   والرأسُ مقيسُ القامة: سطرُ وصولٍ واحدٌ لا يلتفّ، وعنوانٌ مقصوصٌ عند سطرين
   (‎line-clamp:2‎)، وحشوةٌ ثابتة — فأقصى ما يبلغه ‎١٠٢‎ على أكبر درجات السلَّم.
   ‎118‎ تسعُه بفسحةٍ ولا تترك فراغاً يُقطَع. */
.pd__req:not(.open){position:sticky;top:0;z-index:5;max-height:calc(118px * var(--ui));overflow:hidden;
  transition:max-height .34s var(--ez-s),opacity .26s var(--ez-s),margin-bottom .34s var(--ez-s),padding .34s var(--ez-s),border-width .34s var(--ez-s),transform .34s var(--ez-s);
  /* ── ثُقبا الزاويتين يُسَدّان ───────────────────────────────────────────────
     الشكوى بصورتها: ركنان داكنان حادّان يطلّان من أعلى البطاقة ويختفيان مع كلِّ
     تمريرة. وليسا عطباً في الرسم: البطاقةُ مطويّةً لاصقةٌ في رأس المُمَرِّر
     واستدارتُها ستَّ عشرةَ نقطة، وما بين قوسِ الزاوية وركنِها المربّع فراغٌ
     **خارج** صندوقها — تمرّ تحته فقاعةُ العرض الداكنةُ فيُرى منها مثلَّثٌ حادّ
     في كلِّ جهة. فالبطاقةُ لا تحجب إلّا ما تحت شكلها هي، والفراغُ ليس منه.
     والظلُّ الخارجيُّ يُرسَم في هذا الفراغ بالضبط — خارجَ صندوق الحدود ووفقَ
     استدارته — فيُطلى بأرضيّة اللوح (‎--bg‎) فيسدّه. وإزاحتُه لأعلى بقَدْرِ
     انتشاره تجعل الطلاءَ ينتهي عند حافّة البطاقة السفلى تماماً: لا شريطَ يزيد
     تحتها يبتلع سطراً من الرسالة التي تليها.
     ويبقى ظلُّ اللوح ‎--shadow‎ أوّلَ القائمة فيُرسَم أمامه — الفصلُ الذي يقول
     «هذه فوق وتلك تمرّ تحتها». */
  box-shadow:var(--shadow),0 calc(-1 * var(--pad)) 0 var(--pad) var(--bg)}
/* ═══ الطلبُ العائم ينطوي وينزل إلى الرأس ═══════════════════════════════════
   «عند الـScroll للأسفل يختفي … وعند الـScroll للأعلى يظهر من جديد بسلاسة …
   ويكون سلوك الظهور والاختفاء متناسقاً زيّ حقل البحث». فالطيّةُ بمنحنى البحث
   (‎--ez‎) وبزمنٍ من عائلته، والحدُّ والحشوةُ ينطويان معه فلا يبقى خطٌّ بلا صندوق.
   والهامشُ السالبُ يبتلع فُرجةَ ‎.pd‎ التي كانت تحته: صندوقٌ بارتفاع صفرٍ يترك
   فراغَ أحدَ عشرَ بكسلاً لو لم تُطرَح.
   ولوحةُ المفاتيح تطويه كذلك بأمر صاحب المنصّة: «عند فتح لوحة المفاتيح يختفي
   الطلبُ العائم بنعومة وسلاسة» — وهو الطيُّ نفسُه لا طريقٌ ثانٍ، فينزل عنوانُه
   إلى الرأس كما ينزل عند التمرير ولا يضيع من العين وأنت تكتب إليه. */
.pd__req.hid,html[data-kb] .pd__req:not(.open){max-height:0;opacity:0;pointer-events:none;
  padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0;
  margin-bottom:calc(-11px * var(--ui));transform:translateY(calc(-8px * var(--ui)))}
[data-th="داكن"] .pd__req{background:linear-gradient(rgba(16,20,28,.82),rgba(16,20,28,.82)),var(--bg)}
/* والرأسُ المثبَّتُ مصمتٌ لا زجاجيّ: ما يمرّ تحته نصُّ الطلب نفسُه لا أرضيّةُ
   صفحةٍ ساكنة، و‎.82‎ من العتمة لا تُخفي حرفاً يعبر — قِيس في الداكن فرُئي النصُّ
   خلف العنوان. واللونُ تركيبُ البطاقة على أرضيّتها بالضبط (‎rgba(16,20,28,.82)‎
   فوق ‎#0A0D13‎)، فلا تُفرَّق عينٌ بين الرأس وبقيّة البطاقة. */
[data-th="داكن"] .pd__reqh{background:#0F131A}
/* ‎calc(100% + 34px)‎ لا ‎100%‎: مع ‎box-sizing:border-box‎ يقيس ‎100%‎ صندوقَ
   محتوى البطاقة، فيأكل الحشوُ ١٧+١٧ من داخله ويزيحه الهامشُ السالبُ سبعةَ عشرَ
   إلى المبتدأ — فيقف الرأسُ قاصراً ٣٥بك عن حافّة البطاقة في جهة المبتدأ. قِيس:
   البطاقةُ ‎[62,376]‎ والرأسُ ‎[63,341]‎. وذاك شريطٌ شفّافٌ يمرّ تحته نصُّ الطلب
   عارياً — وهو نفسُه ما نفاه سطرُ التعليق أعلاه ولم يفعله. والزيادةُ تردّه إلى
   الحافّتين تماماً، وتردّ معها عرضَ العنوان فلا يتبدّل قصُّه بين حالٍ وحال. */
.pd__reqh{display:flex;align-items:center;gap:calc(9px * var(--ui));position:sticky;top:0;z-index:2;width:calc(100% + 34px * var(--ui));margin:calc(-12px * var(--ui)) calc(-17px * var(--ui)) 0;padding:calc(12px * var(--ui)) calc(17px * var(--ui)) calc(9px * var(--ui));border-radius:15px 15px 0 0;background:var(--surf);border:0;cursor:pointer;text-align:start;color:var(--ink);font-family:inherit}
/* الاستدارةُ وحدَها تتبع الحال: مطويّاً يبلغ الرأسُ قاعَ البطاقة فيلزمه قوسُها
   السفليُّ وإلا نتأت زاويتاه من تحت المنحنى؛ ومفتوحاً يلزمه القطعُ وإلّا كشفت
   النتوءتان ما يمرّ تحته. ولا تُقاس بها بكسلٌ من تخطيط، فلا تحرّك سهماً. */
.pd__req:not(.open) .pd__reqh{border-radius:15px}
/* سطرُ الوصول فوق العنوان («مطابق «…» · ١٠٠ كم») لافتةٌ لا عنوان: كان بوزن ٧٠٠
   بلون الهوية الصلب، فيسبق العنوانَ إلى العين ويتقدّم على ما جاء يقدّمه. خُفِّف
   إلى ٥٠٠ وأُنزل عن صلابة اللون قليلاً — يُقرأ بلا أن يُنازع، وهو أمرُ صاحب
   المنصّة: «النص العلوي فوق الطلب خففه ونحفه قليلا». */
.pd__k{font-size:calc(10.5px * var(--fz));font-weight:500;color:var(--acc-ink);opacity:.84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* سطران في الحالين لا سطرٌ يصير سطرين: كان العنوانُ يلتفّ مفتوحاً ويُقَصّ مطويّاً،
   فيتبدّل ارتفاعُ الرأس ٢٤بك بين حالٍ وحال ويسير السهمُ معه. وقياسُ ٢٠٤ طلباً في
   الإنتاج يقول: الوسيطُ ٣٠ حرفاً، و٣٨٪ تتجاوز السطرَ الواحد، و٢٪ فقط تتجاوز
   السطرين — ونصفُ العناوين ليست صدرَ وصفها، فقصُّها عند سطرٍ يُضيع ما لا يردّه
   المتن. فسطران: ثباتٌ في الهندسة وسعةٌ للثمانية والتسعين بالمئة. */
/* و‎.pd__req .pd__t‎ لا ‎.pd__t‎ وحدَها: العنوانُ ‎bdi‎ داخلَ ‎.tt‎، فتصيبه
   ‎.tt>bdi‎ بوزنٍ ‎(0,1,1)‎ يعلو ‎(0,1,0)‎ ويردّه إلى سطرٍ لا يلتفّ. وهو سببُ أنّ
   القاعدةَ المنزوعةَ كُتبت ‎.pd__req.open .pd__t‎ — وزناً لا معنى. */
.pd__req .pd__t{font-size:calc(13.5px * var(--fz));font-weight:700;line-height:1.6;white-space:normal;text-overflow:clip;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
/* المتنُ يُقرأ تفصيلاً لا عنواناً: كان ١٥٫٥ بوزن ٥٠٠ فوق عنوانٍ ١٣٫٥ بوزن ٧٠٠،
   فيتقارب الاثنان في الثقل ويلتبس أيُّهما رأسُ الطلب. نصفُ درجةٍ نزولاً ووزنٌ
   أنحفُ يفصلانهما بلا أن يصغر المقروء — «حتى نميز ان هذا عنوان وهذا التفاصيل». */
.pd__x{font-size:calc(15px * var(--fz));font-weight:400;line-height:1.85;white-space:pre-wrap}
.pd__f{font-size:calc(11px * var(--fz));color:var(--ink3)}
.pd__upd{display:flex;flex-direction:column;gap:calc(3px * var(--ui));padding:calc(9px * var(--ui)) calc(12px * var(--ui));border-radius:11px;background:var(--acc-t);animation:var(--fx-slide) .3s var(--ez) backwards}
.pd__updk{display:flex;align-items:center;gap:calc(6px * var(--ui));font-size:calc(10px * var(--fz));font-weight:700;color:var(--acc-ink)}
.pd__updx{font-size:calc(12px * var(--fz));line-height:1.7;display:block;color:var(--ink)}
/* المتنُ يُدَسُّ في بطاقته ويُنزَع منها، وارتفاعُه وحدَه يسير — كغلاف المشجّرة
   حرفاً (‎§5ج-د‎ في ab2.js)، و‎.fold‎ وسمُ الطيران. وكلُّ فُرجةٍ حولَه حشوُه هو لا
   فجوةُ البطاقة ولا حشوتُها، كي تنكمش معه إلى صفرٍ فلا يبقى بعد انطوائه فراغٌ
   يُرى: تسعٌ تحتَه تنزل مع ارتفاعه (يقيسها المحرّكُ ويسيّرها)، وفوقَه صفرٌ لأنّ
   التسعَ التي تفصله عن العنوان صارت في حشوة الرأس السفلى — والرأسُ باقٍ. */
.pd__body{display:flex;flex-direction:column;gap:calc(7px * var(--ui));padding:0 0 calc(9px * var(--ui))}
.pd__body.fold{overflow:hidden}
.pd__req .chev27.open{transform:rotate(180deg)}
/* بطاقةُ عرضي (متجر) */
.po{width:min(100%,430px * var(--ui));display:flex;flex-direction:column;gap:calc(8px * var(--ui));padding:calc(13px * var(--ui)) calc(15px * var(--ui));border-radius:16px 5px 16px 16px;background:var(--me);color:var(--me-ink);border:1px solid var(--line)}
html[dir="ltr"] .po{border-radius:5px 16px 16px 16px}
.po.won{border-color:color-mix(in srgb,var(--ok) 45%,transparent);animation:var(--fx-glow) 1s ease-out both}
.po__t{font-size:calc(13px * var(--fz));font-weight:700}
.po__s{font-size:calc(10.5px * var(--fz));opacity:.6}
.po__x{font-size:calc(13.5px * var(--fz));line-height:1.8;white-space:pre-wrap;display:block}
.po__b{font-size:calc(11px * var(--fz));opacity:.6}
.po__edit{align-self:flex-start;display:inline-flex;align-items:center;gap:calc(6px * var(--ui));padding:calc(6px * var(--ui)) calc(13px * var(--ui));border-radius:9px;border:1px solid rgba(255,255,255,.25);background:transparent;color:inherit;font-size:calc(12px * var(--fz));font-weight:500;cursor:pointer;transition:background .16s;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .po__edit:hover{background:rgba(255,255,255,.08)}
}
/* ── حبرُ الفقاعة حبرُها هي ───────────────────────────────────────────────────
   ‎.oc__prn‎ و‎.oc__cur‎ صُنعتا لبطاقة العرض على أرضية الصفحة (‎--ink‎/‎--ink2‎)،
   ثمّ استُعيرتا لسطر السعر داخل فقاعة «عرضك» — وأرضيتُها ‎--me‎ داكنةٌ في
   اللوحتين. فكان الرقمُ يُعالَج بقاعدةٍ للفاتح وحدَه، وبقيت «ر.س» بحبر الصفحة
   على أرضية الفقاعة: قِيست ‎1.81:1‎ — أي لا تكاد تُرى، وهي الوحدةُ الملاصقةُ
   لأهمّ رقمٍ في الشاشة. و‎inherit‎ يصدُق في اللوحتين معاً بلا شرطٍ على واحدة:
   الفقاعةُ تحمل ‎color:var(--me-ink)‎ فما فيها يرثه (‎15.9:1‎). */
.po .oc__prn,.po .oc__cur{color:inherit}
/* ── مؤلِّفُ العرض: رصيفٌ أسفلَ المُمَرِّر لا لاصقٌ في جوفه ────────────────────
   كان ‎position:sticky;bottom:0‎ داخلَ ‎.pd‎، فيقع تحت بطاقةِ الطلب اللاصقة
   (‎z-index:5‎) وتبتلعه متى طالت — يرتفع مع لوحة المفاتيح ولا يُرى، وهو ما
   يُشتكى: «حقلُ كتابة العرض يختفي». وموضعُه الصحيحُ موضعُ ‎.cbarw‎ من المحادثة:
   أخٌ يجلس تحت المُمَرِّر في ‎.pdw‎ — لا يعلوه شيءٌ، ويركب اللوحةَ بالطريق
   المُقاس نفسِه (‎[data-kb-dock]‎ في §5ه). */
.ofc{flex:0 0 auto;display:flex;flex-direction:column;--ofcg:calc(9px * var(--ui));gap:var(--ofcg);padding:calc(13px * var(--ui)) var(--pad) max(15px * var(--ui),var(--safe-b));background:var(--bg);border-top:1px solid var(--line)}
/* ونسخةُ لوحة الصفقات تجلس في بطاقةٍ لا على حافّة شاشة: بلا إطارٍ ولا حشوةِ جهاز */
.ofc--flat{padding:0;border:0;background:transparent}
/* ── قامةُ المؤلّف: عمودٌ لا يتجاوز عمودَ المحادثة ─────────────────────────────
   «لا أريدها تأخذ راحتها بشكلٍ بشعٍ وتتمدّد بشكلٍ مبالغٍ فيه، بل باعتبارٍ منظَّمٍ
   وجميلٍ وأنيق». وكان المؤلّفُ يمتدّ بعرض اللوح كلِّه بلا سقف: شريطٌ من ثلاثة
   أزرارٍ على لوحِ حاسوبٍ عرضُه ألفٌ يعطي كلمةَ «نطاق» ثلاثَ مئةِ بكسل — وهو
   ترهّلٌ لا سَعة. والحدُّ ليس جديداً يُخترَع: الجارُ الذي يحلّ محلَّه بعد الإرسال
   (‎.cbar‎) محدودٌ بستِّ مئةٍ وأربعين في وسط لوحه منذ اليوم الأوّل، ومعه متنُ
   المحادثة (‎.th__in‎) — فالمؤلّفُ يلبس حدَّهما فيتّصل السطحان بلا قفزةِ عرضٍ
   بينهما. ورأسُ التحرير وحدَه خارجَ الحدّ: هو شريطٌ يبلغ الحافّتين بحواشيه
   السالبة، فسقفٌ عليه يقصّ لونَه عن طرفَي اللوح. */
.ofc__hd,.ofc__grps,.ofc__note,.ofc>.cp__att{width:100%;max-width:calc(640px * var(--ui));margin-inline:auto}
/* ── مجموعتا الخيار: الشريطُ ومقعدُه شيءٌ واحد ────────────────────────────────
   في الحال الطويلة عمودان في عمود — التخطيطُ نفسُه الذي كان حرفاً بحرف، إذ
   فجوةُ الغلاف هي فجوةُ المؤلّف عينُها. وإنّما وُجدا ليقولا للورقة «هذان اثنان»
   فتستطيع الشاشةُ القصيرةُ أن تصفَّهما (أسفلَ الملفّ). */
.ofc__grps,.ofc__grp{display:flex;flex-direction:column;gap:var(--ofcg);min-width:0}
.ofc__hd{display:flex;align-items:center;gap:calc(8px * var(--ui))}
.ofc__k{font-size:calc(11.5px * var(--fz));font-weight:700;color:var(--acc-ink)}
.ofc__sum{font-size:calc(11px * var(--fz));color:var(--ink3)}
/* ── مِقودُ الخطوتين ──────────────────────────────────────────────────────────
   زرّان يسكنان الرأسَ في كلِّ حال ولا يُريان إلّا على الجوّال بالعرض (أسفلَ
   الملفّ). و‎display:none‎ لا ‎visibility‎: ما لا يُرى لا يبلغه ‎Tab‎ ولا يقرؤه
   قارئُ الشاشة، فلا يُعلَن للأعمى نموذجٌ بخطوتين وهو أمام نموذجٍ واحد.
   و«التالي» في آخر الرأس: مقعدُ زرِّ الإرسال من الصفِّ الذي يخلفه — فالفعلُ
   الأمامي في ركنٍ واحدٍ لا يتنقّل بين الخطوتين. */
.ofc__back,.ofc__next{display:none;align-items:center;gap:calc(4px * var(--ui));flex:0 0 auto;
  border:0;border-radius:999px;font-family:inherit;font-weight:700;cursor:pointer;
  font-size:calc(11.5px * var(--fz));transition:background .16s,transform .15s var(--ez)}
.ofc__next{padding:calc(6px * var(--ui)) calc(12px * var(--ui));background:var(--acc);color:var(--bg)}
.ofc__back{padding:calc(5px * var(--ui)) calc(11px * var(--ui));background:var(--acc-t);color:var(--acc-ink)}
.ofc__back svg,.ofc__next svg{flex:0 0 auto;opacity:.8}
.ofc__back:active,.ofc__next:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .ofc__back:hover{background:var(--acc-tt)}
}
/* ── رأسُ التحرير: سطحٌ يقول اسمَه، لا شريطُ رسالةٍ تبدّل نصُّه ─────────────────
   «ويظهر الأمر كرسالة لا كتعديل عرض» — والسببُ أنّ المؤلّفَ كان يحلُّ محلَّ شريط
   الكتابة في مقعده نفسِه بلا حدٍّ يفصله عنه، وأوّلُ ما فيه سطرٌ رماديٌّ بحجم
   ميتا. فصار له رأسٌ بلون الهوية يحمل ثلاثةً: ما يجري، والسعرَ القائمَ الذي
   يُعدَّل، وبابَ خروجٍ مِلءَ اللمسة. والإطارُ يلبس اللونَ كلَّه فيُقرأ سطحاً
   ثانياً فوق المحادثة لا امتداداً لها. */
.ofc--edit{border-top:0;box-shadow:0 -8px 24px rgba(0,0,0,.06)}
.ofc__eh{display:flex;align-items:center;gap:calc(7px * var(--ui));
  margin:calc(-13px * var(--ui)) calc(-1 * var(--pad)) 0;
  padding:calc(9px * var(--ui)) var(--pad);
  background:var(--acc-t);color:var(--acc-ink);
  border-top:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.ofc__eh>svg{flex:0 0 auto}
.ofc__ehl{font-size:calc(12.5px * var(--fz));font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ofc__ehp{flex:0 0 auto;padding:calc(2px * var(--ui)) calc(8px * var(--ui));border-radius:999px;background:var(--surf);color:var(--ink2);font-size:calc(11px * var(--fz));font-weight:500}
.ofc__ehx{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:calc(28px * var(--ui));height:calc(28px * var(--ui));border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;transition:background .16s;font-family:inherit}
.ofc__ehx:active{background:var(--acc-tt)}
@media (hover:hover) and (pointer:fine){
  .ofc__ehx:hover{background:var(--acc-tt)}
}
/* مدينةُ العرض في رأس المؤلّف: رقاقةٌ إلى جانب سطر الخلاصة — فما يقرؤه العميلُ
   عن هذا العرض مجموعٌ في مكانٍ واحدٍ يُقرأ قبل الإرسال. تنكمش قبل غيرها على
   الشاشة الضيّقة (‎min-width:0‎ مع القصّ) فلا تدفع «قدّم عرضك» خارج الصفّ. */
.ofc__loc{display:inline-flex;align-items:center;gap:calc(4px * var(--ui));min-width:0;max-width:calc(150px * var(--ui));
  padding:calc(4px * var(--ui)) calc(9px * var(--ui));border-radius:999px;border:1px solid var(--line);
  background:var(--acc-t);color:var(--acc-ink);font-size:calc(10.5px * var(--fz));font-weight:500;
  cursor:pointer;font-family:inherit;transition:background .16s,border-color .16s}
.ofc__loc>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ofc__loc svg{flex:0 0 auto;opacity:.75}
.ofc__loc--none{background:transparent;border-style:dashed;border-color:var(--line2)}
.ofc__loc:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .ofc__loc:hover{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
}
.ofc__chips{display:flex;flex-wrap:wrap;align-items:center;gap:calc(5px * var(--ui))}
.ofc__div{width:calc(1px * var(--ui));height:calc(16px * var(--ui));background:var(--line);margin-inline:calc(3px * var(--ui))}
.ofc__row{display:flex;align-items:center;gap:calc(7px * var(--ui));flex-wrap:wrap;min-height:calc(33px * var(--ui))}
.ofc__row>.seg--flex{flex:1;min-width:0;max-width:calc(440px * var(--ui))}
.ofc__in{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));height:calc(31px * var(--ui));padding:0 calc(11px * var(--ui));border-radius:9px;border:1px solid var(--line);background:var(--surf)}
/* ── الحقلُ يتمدّد مع رقمه ────────────────────────────────────────────────────
   عرضٌ مقرَّرٌ بالبكسل يقصّ ما جاوزه: «٥٢٢٨٨٨» في حقلٍ يسع ستّاً يُقرأ منه أربعٌ
   ونصفٌ من وسطه، وإلى جانبه في الصفِّ فراغٌ إلى آخر السطر. وهو المُبلَّغ حرفاً:
   «أريدها تتمدّد مع الرقم الذي يُكتب، وتوجد مساحةٌ بالخارج».
   فالعرضُ صار مقيساً: ‎--fw‎ يكتبه المحرّكُ من عرض النصِّ المكتوب فعلاً (‎ofcFit‎)،
   و‎min-width‎ أرضيةٌ لا ينزل تحتها الفارغُ فيبقى شكلُ الصفِّ كما كان، و‎max-width‎
   سقفٌ لا يبتلع به حقلٌ سطرَه كلَّه، و‎flex-shrink‎ يردّه إن ضاقت الشاشةُ فلا
   يخرج عن حافّتها شيء. والصفرُ افتراضُ ‎--fw‎ قبل أوّلِ قياس: الأرضيةُ تحمله. */
/* والزيادةُ على المقيس نَفَسٌ لا زينة: الحقلُ بلا حشوةٍ (فالمطويُّ يجب أن
   يبلغ الصفرَ حقاً)، فعرضٌ يساوي نصَّه بالضبط يُلصِق «٥٠٠٠٠» بـ«إلى» فتُقرآن
   كلمةً واحدة. والنصُّ في الوسط فتنقسم الزيادةُ على جانبيه. */
.ofc__in input{border:0;background:transparent;outline:none;text-align:center;font-size:calc(13px * var(--fz));font-weight:500;color:var(--ink);width:calc(var(--fw,0px) + 10px * var(--ui))}
.ofc__in .u{font-size:calc(10.5px * var(--fz));color:var(--ink3)}
/* البلايسهولدر تلميحٌ لا قيمة: لونُ المتصفّح الافتراضيُّ يقاربُ لونَ الحبر
   فيُقرأ رقماً مكتوباً في حقلٍ فارغ. */
.ofc__in input::placeholder{color:var(--ink3);opacity:1}
/* ── مقعدُ المؤلّف: مكانٌ واحدٌ لا يخلو ولا يقفز ───────────────────────────────
   صفٌّ تحت كلِّ شريطِ اختيار، ارتفاعُه ثابتٌ في الأحوال كلِّها. ما يخصُّ الحالَ
   الجاريةَ يذوب فيه وما فارقها يذوب منه — في خانةِ شبكةٍ واحدةٍ يتقاطع فيها
   الداخلُ والخارج، فلا سطرَ ينزل ولا زرَّ إرسالٍ يتحرّك تحت الإبهام. */
/* المقعدُ ألصقُ بشريطه منه بما بعده: فجوةُ المؤلّف واحدةٌ للجميع، فكان
   الشريطُ وحقلُه يبدوان جارَين لا شيئاً واحداً. */
.ofc__seat{position:relative;display:flex;align-items:center;gap:calc(9px * var(--ui));min-height:calc(33px * var(--ui));margin-top:calc(-3px * var(--ui))}
.ofc__stack{display:grid;align-items:center;justify-items:start;flex:1;min-width:0}
.ofc__stack>*{grid-area:1/1;max-width:100%;min-width:0}
/* المخفيُّ لا يُقرأ ولا يبلغه ‎Tab‎: ‎visibility‎ تُؤخَّر إلى ما بعد الذوبان
   فتُرى الحركةُ كاملةً ثم تُرفَع العقدةُ من شجرة الوصول. */
.ofc__stack>*{opacity:0;visibility:hidden;transform:translateY(4px) scale(.985);pointer-events:none;
  transition:opacity .2s linear,transform .3s var(--ez),visibility 0s linear .3s}
.ofc__seat[data-m="fixed"] .ofc__cap[data-for="fixed"],
.ofc__seat[data-m="range"] .ofc__cap[data-for="range"],
.ofc__seat[data-m="nego"] .ofc__cap[data-for="nego"],
/* ولا سطرَ لـ«فوري»: «تبدأ فور القبول» حُذفت بأمر صاحب المنصّة، فمقعدُه يخلو
   بقرارٍ لا بسهو — ويبقى محجوزاً كي لا ينزل الشريطُ الذي عليه الأصبعُ توّاً.
   وفي التخطيط المتجاور لا يُرى خلوُّه أصلاً: حقلُ السعر إلى جانبه يملأ سطرَه. */
.ofc__seat[data-m="flex"] .ofc__cap[data-for="flex"],
.ofc__seat[data-m="in"] .ofc__eta[data-for="in"]{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.ofc__cap{font-size:calc(11px * var(--fz));color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── حقلُ السعر يتكيّف ولا يُستبدَل ───────────────────────────────────────────
   العقدةُ واحدةٌ في الأحوال الثلاث. «من» و«إلى» والحقلُ الثاني يخرجون من صفرِ
   عرضٍ ويعودون إليه، والحقلُ الأوّلُ يضيق ليُفسح لهم — انتقالُ عرضٍ لا هدمٌ
   وبناء، فيبقى ما كُتب ويبقى التركيزُ حيث تركه الأصبع. */
.ofc__pr{flex:0 1 auto;gap:0;max-width:100%}
.ofc__pr>.ofc__ux,.ofc__pr>.ofc__ur{flex:0 0 auto}
.ofc__pr>.ofc__ux{display:inline-block;max-width:0;min-width:0;margin-inline-end:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .32s var(--ez),margin-inline-end .32s var(--ez),opacity .18s linear}
.ofc__pr[data-m="range"]>.ofc__ux{max-width:calc(30px * var(--ui));margin-inline-end:calc(5px * var(--ui));opacity:1}
.ofc__pr>.ofc__a{flex:0 1 auto;min-width:calc(58px * var(--ui));max-width:calc(104px * var(--ui));transition:width .32s var(--ez),min-width .32s var(--ez)}
.ofc__pr[data-m="range"]>.ofc__a{min-width:calc(46px * var(--ui))}
/* ‎padding:0‎ لازمةٌ لا زينة: للحقل حشوةُ متصفّحٍ افتراضيةٌ (‎1px 2px‎) تبقى بعد
   ‎max-width:0‎ فيظلّ للمطويِّ أربعةُ بكسلاتٍ تُزيح «إلى» عن مكانها. */
/* والطيُّ صار بالعرض لا بسقفه: السقفُ صار حدَّ التمدّد، والمطويُّ عرضُه صفرٌ
   وأرضيتُه صفرٌ معاً — فيبلغ الصفرَ حقاً ويعود إلى مقاسِ ما كُتب فيه. */
.ofc__pr>.ofc__b{flex:0 1 auto;width:0;min-width:0;max-width:calc(104px * var(--ui));padding:0;overflow:hidden;opacity:0;
  transition:width .32s var(--ez),min-width .32s var(--ez),opacity .18s linear}
.ofc__pr[data-m="range"]>.ofc__b{width:calc(var(--fw,0px) + 10px * var(--ui));min-width:calc(46px * var(--ui));opacity:1}
.ofc__pr>.ofc__ur{margin-inline-start:calc(5px * var(--ui))}
/* الهدوءُ يُقاعِد المسرحَ لا الفعل: الحالُ تتبدّل في إطارٍ واحدٍ ويبقى كلُّ
   شيءٍ في مكانه — لا ذوبانَ ولا عرضٌ يزحف. */
[data-motion="هادئ"] .ofc__stack>*,[data-motion="هادئ"] .ofc__pr>*,[data-motion="هادئ"] .ofc__n{transition:none}
@media (prefers-reduced-motion:reduce){
  .ofc__stack>*,.ofc__pr>*,.ofc__n{transition:none}
}
/* ── وحداتُ المدّة صفٌّ جانبيٌّ لا قائمةٌ تسقط ─────────────────────────────────
   كانت زرّاً تسقط تحته قائمة، والمؤلّفُ آخرُ ما في الشاشة: فتسقط القائمةُ تحت
   حافّتها فيغيب نصفُها — وهو المُبلَّغ حرفاً: «الدروب داون اختفى بالأسفل جزءٌ
   منه». والوحداتُ خمسٌ تُقرأ في نظرةٍ واحدةٍ فلا موجبَ لطيّها أصلاً: صفٌّ إلى
   جانب الرقم، المختارُ منه مصمَتٌ وما سواه هادئ — نقرةٌ واحدةٌ بدل نقرتين، ولا
   طبقةَ تعلو شيئاً فتُقَصّ. وإن ضاقت الشاشةُ انساب الصفُّ جانبياً كسائر شرائط
   الرقاقات في التطبيق، ويُزاح وحدَه إلى المختار (‎unitsReveal‎). */
.ofc__eta{display:flex;align-items:center;gap:calc(7px * var(--ui));width:100%;min-width:0}
/* وجيبُ الرقم لا ينكمش تحت زحام الوحدات: الصفُّ وحدَه ينساب. وحشوتُه أضيقُ
   من حشوة جيب السعر — رقمٌ من خانتين لا يحتاج ما يحتاجه سعرٌ من ستّ. */
.ofc__eta>.ofc__in{flex:0 0 auto;padding:0 calc(8px * var(--ui))}
.ofc__n{flex:0 1 auto;min-width:calc(34px * var(--ui));max-width:calc(76px * var(--ui));transition:width .28s var(--ez)}
.ofc__units{display:flex;align-items:center;gap:calc(3px * var(--ui));flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;padding-block:calc(3px * var(--ui))}
.ofc__units::-webkit-scrollbar{display:none}
.ofc__u{flex:0 0 auto;display:inline-flex;align-items:center;height:calc(25px * var(--ui));padding:0 calc(8px * var(--ui));border:0;border-radius:999px;background:var(--fill);color:var(--ink2);font-size:calc(11px * var(--fz));font-weight:700;white-space:nowrap;cursor:pointer;font-family:inherit;transition:background .18s,color .18s,transform .15s var(--ez)}
.ofc__u:active{transform:scale(.94)}
.ofc__u.on{background:var(--acc);color:var(--bg);font-weight:700}
@media (hover:hover) and (pointer:fine){
  .ofc__u:not(.on):hover{background:var(--fill2)}
}
.ofc__note{display:flex;align-items:flex-end;gap:calc(8px * var(--ui));padding:calc(7px * var(--ui)) calc(16px * var(--ui)) calc(7px * var(--ui)) calc(7px * var(--ui));border-radius:16px;border:1px solid var(--line);background:var(--surf)}
html[dir="ltr"] .ofc__note{padding:calc(7px * var(--ui)) calc(7px * var(--ui)) calc(7px * var(--ui)) calc(16px * var(--ui))}
.ofc__note textarea{flex:1;min-width:0;border:0;background:transparent;outline:none;resize:none;field-sizing:content;min-height:1lh;max-height:7lh;padding:calc(7px * var(--ui)) 0;font-size:calc(14px * var(--fz));line-height:1.65;color:var(--ink)}

/* ════ اللوحة الكاملة (كانبان) ════
   قطعتان لا واحدة: ‎.bd__cols‎ سهلُ الأعمدة يُمرَّر جانبياً، و‎.bd__side‎ لوحُ
   الطلب المفتوح. وكان الاثنان أبناءً مباشرين لمُمَرِّرٍ أفقيٍّ واحد، فاللوحُ
   يُسحَب مع الأعمدة ويغيب عن الشاشة. الآن ‎.bd‎ إطارٌ لا يُمرَّر، والتمريرُ في
   جوف الأعمدة وحدَها، واللوحُ ثابتٌ حيث وُضِع. */
.bd{flex:1;min-height:0;display:flex;position:relative;overflow:hidden}
.bd__cols{flex:1;min-width:0;min-height:0;display:flex;gap:calc(11px * var(--ui));padding:calc(14px * var(--ui)) var(--pad);overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain}
/* الأعمدةُ تقتسم العرضَ كلَّه ولا سقفَ لها: سقفٌ يترك على الشاشة الكبيرة فجوةً
   ميّتةً بين آخرِ عمودٍ ولوحِ الطلب تُقرأ عطباً لا تصميماً. والأرضيةُ ١٦٨بك —
   دونها ينكسر العنوانُ أربعةَ أسطرٍ حين يُفتَح اللوحُ على جوّالٍ بالعرض، فوقها
   تُمرَّر الأعمدةُ جانبياً وتبقى مقروءة. */
.bd__col{flex:1 1 0;min-width:calc(168px * var(--ui));display:flex;flex-direction:column;gap:calc(7px * var(--ui));min-height:0}
.bd__h{display:flex;align-items:center;gap:calc(6px * var(--ui));padding:0 calc(3px * var(--ui));font-size:calc(11px * var(--fz));font-weight:700}
.bd__h b{font-weight:500;color:var(--ink3)}
.bd__sc{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:calc(6px * var(--ui));padding-bottom:calc(6px * var(--ui))}
.bd__c{display:flex;flex-direction:column;gap:calc(5px * var(--ui));width:100%;padding:calc(11px * var(--ui)) calc(12px * var(--ui));border-radius:13px;cursor:pointer;text-align:start;transition:border-color .16s,background .16s,transform .2s;color:var(--ink);background:var(--surf);border:1px solid var(--line);font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .bd__c:hover{border-color:var(--line2);transform:translateY(-2px)}
}
.bd__c.cur{background:var(--acc-t);border-color:var(--acc)}
.bd__c.dim{opacity:.6}
.bd__ch{display:flex;align-items:flex-start;gap:calc(7px * var(--ui))}
.bd__ch>.stg{margin-top:calc(5px * var(--ui))}
/* غلافُ العنوان داخل صفِّ الشكل: هو الذي يتمدّد الآن لا العنوانُ نفسُه، لأنّ
   وسمَ التثبيت صار يجاوره. */
.bd__ctw{display:flex;align-items:flex-start;gap:calc(5px * var(--ui));min-width:0;flex:1}
.bd__ct{font-size:calc(12.5px * var(--fz));font-weight:500;line-height:1.7;display:block;flex:1;min-width:0}
.bd__cm{display:flex;align-items:center;gap:calc(6px * var(--ui));flex-wrap:wrap;font-size:calc(10px * var(--fz));color:var(--ink3);line-height:1.6}
/* عدّادُ الصور على البطاقة: «فيه ما يُرى قبل أن تُسعّر» بحرفٍ واحدٍ لا بسطر */
.bd__ph{display:inline-flex;align-items:center;gap:calc(3px * var(--ui));padding:calc(1px * var(--ui)) calc(6px * var(--ui));border-radius:999px;background:var(--fill);color:var(--ink2);font-size:calc(9.5px * var(--fz));font-weight:700}
.bd__badge{display:inline-flex;align-self:flex-start;padding:calc(2px * var(--ui)) calc(8px * var(--ui));border-radius:999px;font-size:calc(9.5px * var(--fz));font-weight:700;background:var(--acc-t);color:var(--acc-ink)}
.bd__badge.ok{background:var(--ok-t);color:var(--ok)}
.bd__badge.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.bd__empty{padding:calc(12px * var(--ui)) calc(10px * var(--ui));border-radius:12px;border:1px dashed var(--line);font-size:calc(10.5px * var(--fz));color:var(--ink3);text-align:center}
/* ── لوحُ الطلب داخل اللوحة ───────────────────────────────────────────────────
   مرصوفٌ إلى جانب الأعمدة على كلِّ مقاس — لا يطفو فوقها ولا يحجب منها عموداً:
   ما يُغطّى لا يُنقَر، وأعمدةُ اللوحة هي طريقُ التنقّل بين الطلبات. وعرضُه
   يتنفّس مع الشاشة بـ‎clamp‎: سقفٌ لئلّا يبتلع اللوحةَ على الحاسوب، وأرضيةٌ
   لئلّا يصير خيطاً على الجوّال بالعرض. والأعمدةُ تُمرَّر جانبياً متى ضاقت.
   وهو ‎renderPD‎ بعينه: مُمَرِّرٌ يقرأ ورصيفٌ يكتب، فلا نسخةَ ثانيةٌ تنحرف. */
.bd__side{flex:0 0 auto;width:clamp(calc(268px * var(--ui)),38vw,calc(348px * var(--ui)));display:flex;flex-direction:column;min-height:0;border-inline-start:1px solid var(--line);background:var(--bg);box-shadow:var(--shadow);animation:var(--fx-slide) .3s cubic-bezier(.16,1,.3,1) backwards}
.bd__sidehd{display:flex;align-items:center;gap:calc(8px * var(--ui));flex:0 0 auto;padding:calc(8px * var(--ui)) calc(12px * var(--ui)) calc(2px * var(--ui))}
.bd__sidek{font-size:calc(10.5px * var(--fz));font-weight:700}
.bd__side .pdw{flex:1;min-height:0;padding-top:calc(8px * var(--ui))}
.bd__side .pd{padding-inline:calc(13px * var(--ui))}
.bd__side .ofc{padding-inline:calc(13px * var(--ui))}
.bd__side .cbarw{padding-inline:calc(13px * var(--ui))}

/* ════ صفحاتُ المتجر ════ */
.pg{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:calc(22px * var(--ui)) var(--pad) calc(30px * var(--ui))}
.pg__in{max-width:calc(540px * var(--ui));margin:0 auto;display:flex;flex-direction:column;gap:calc(14px * var(--ui))}
/* وقياسُ لوحة الأرقام أعرضُ من قياس النصّ: خمسةُ مؤشّراتٍ في سطر (انظر ‎.kpis‎) */
.pg__in--w{max-width:calc(860px * var(--ui))}
.pg__in--s{max-width:calc(600px * var(--ui))}
.pg__intro{margin:0;font-size:calc(13.5px * var(--fz));line-height:1.85;color:var(--ink2)}
/* صدرُ صفحة الاهتمامات: لوحُ الشرح — «هذه الخطوةُ تُشغّل متجرك» أوّلَ مرّة، وما
   تفعله الاهتماماتُ بعدها — ثم حقلُ الإضافة تحته مباشرةً. */
.pg__first{display:flex;align-items:flex-start;gap:calc(10px * var(--ui));padding:calc(12px * var(--ui)) calc(14px * var(--ui));border-radius:13px;border:1px solid var(--acc-tt);background:var(--acc-t)}
.pg__hint{align-self:center;font-size:calc(11px * var(--fz));color:var(--ink3);text-align:center}
/* الشرحُ السفليُّ صار أسطراً لا جملةً واحدة: لكلِّ درجةٍ سطرٌ يقول ما يقع إن
   اختيرت. والوسطُ لا يصلح لقائمةٍ تُقرأ سطراً سطراً، فتُصفّ من مبتدأ السطر. */
.pg__hint--left{align-self:stretch;display:flex;flex-direction:column;gap:calc(3px * var(--ui));
  text-align:start;line-height:1.85;font-size:calc(11.5px * var(--fz))}
.pg__hint--left b{color:var(--ink2);font-weight:700}
/* الاهتمامات */
/* الاهتمامات صارت أسطراً لا رقاقاتٍ متلاصقة: لكلِّ اهتمامٍ بدجُه ودرجةُ تطابقه
   وحدَه، وذلك لا يتّسع في صفٍّ ملفوف. */
.ints{display:flex;flex-direction:column;gap:calc(7px * var(--ui));padding:calc(12px * var(--ui));border-radius:13px;border:1px solid var(--line);background:var(--surf)}
/* لا حركةَ دخولٍ مخبوزةٌ هنا: السطرُ يأخذ ‎.rise‎ من ‎riseCls‎ أوّلَ ظهورٍ له
   وحدَه — وهي الذاكرةُ نفسُها التي تحمي صفوفَ القائمة الرئيسية. وكانت البطاقةُ
   والرقاقةُ تنبضان على كلِّ رسمٍ مهما كان سببُه، فتُقفِز الصفحةُ كلُّها لتغيير
   مقياسِ تطابقٍ في سطرٍ واحد. */
/* ── الوسمُ عمودٌ واحدٌ لا ثلاثةُ وسومٍ كلٌّ بعرضه ─────────────────────────────
   ثلاثةُ صفوفٍ في البطاقة، ولكلِّ صفٍّ وسمٌ وقيمة. لو كان كلُّ صفٍّ صندوقاً على
   حدة لَبدأت كلُّ قيمةٍ حيث انتهى وسمُها، فتُرسَم القيمُ سُلَّماً مكسوراً. وشبكةٌ
   بعمودين تجعل الوسومَ عموداً واحداً بعرض أطولها — تصطفّ القيمُ على خطٍّ واحدٍ
   نازلٍ مهما تبدّل حجمُ العرض أو تُرجمت الكلمات، بلا رقمٍ مكتوبٍ بيدٍ يشيخ.
   و‎display:contents‎ على الصفّ يسلّم ابنيه إلى الشبكة ويبقي الصنفَ للشرح. */
.intr{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:calc(7px * var(--ui)) calc(10px * var(--ui));padding:calc(9px * var(--ui)) calc(10px * var(--ui)) calc(10px * var(--ui));border-radius:12px;background:var(--fill)}
/* إيماضةُ «عندك هذا الاهتمام أصلاً»: نبضتان تقولان أين هو، ثم تنطفئان. وفي
   الوضع الهادئ حلقةٌ ثابتةٌ لا نبض — الإشارةُ تبقى ولو سكنت الحركة. */
@keyframes ab-intflash{0%,100%{box-shadow:0 0 0 0 transparent}
  15%{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 55%,transparent)}
  40%{box-shadow:0 0 0 0 transparent}
  58%{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 45%,transparent)}
  82%{box-shadow:0 0 0 0 transparent}}
.intr--flash{animation:ab-intflash 1.6s ease-out}
[data-motion="هادئ"] .intr--flash{animation:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 55%,transparent)}
.intr__h{grid-column:1 / -1;display:flex;align-items:center;gap:calc(8px * var(--ui));min-width:0;min-height:calc(30px * var(--ui))}
/* السطرُ الثاني هادئ: لا يُقرأ إلا حين يُقصد، فلا يزاحم اسمَ الاهتمام نفسَه. */
/* الوسمُ لا ينمو: ‎flex:1‎ كان يمدّه إلى عرض السطر كلِّه فيدفع المقياسَ إلى سطرٍ
   ثانٍ ويصير الصفُّ ١١٢px بلا داعٍ. الآن يأخذ مقاسَ نصّه، ويُدفع المقياسُ للطرف. */
/* ── الوسمُ وقيمتُه متجاوران، والفراغُ خلفهما لا بينهما ─────────────────────────
   كان الصفُّ ‎space-between‎: الوسمُ في طرفٍ وقيمتُه في الطرف الآخر. على هاتفٍ
   ضيّقٍ يقعان متجاورين فيصحّ، وعلى شاشةٍ عريضةٍ تفتح الشاشةُ بينهما ستّمئة بكسلٍ
   من الفراغ — فتقرأ العينُ وسماً بلا قيمة، وقيمةً بلا وسم، وتقطع المسافةَ في كلِّ
   سطرٍ ذهاباً وإياباً. الآن عمودُ وسمٍ بعرضٍ واحدٍ ثابت، والقيمُ تصطفّ على خطٍّ
   واحدٍ إلى جانبه: تُقرأ الثلاثةُ في نظرةٍ واحدةٍ نازلة.
   و‎flex-wrap‎ باقٍ: من رفع «حجم العرض» إلى أكبرَ في شاشةٍ ضيّقةٍ يحتاج أن تنزل
   القيمةُ سطراً بدل أن تُقَصّ — ويعود الوسمُ حينئذٍ عريضاً بعرض سطره. */
.intr__m{display:contents}
/* والقيمةُ تقف حيث يبدأ عمودُها ولا تتمدّد إلى آخر السطر: عرضُها عرضُ نصِّها */
.intr__m>:last-child{justify-self:start;min-width:0;max-width:100%}
.intr__l{font-size:calc(10.5px * var(--fz));color:var(--ink3);white-space:nowrap}
/* أسماءُ الدرجات صارت جملاً تقول ما تفعل («نفس الكلمة فقط») لا صفاتٍ في صاحبها
   («صارم»)، فالشريطُ الثلاثيُّ قد يتجاوز عرضَ السطر على هاتفٍ ضيّق. يُسحب
   جانبياً بدل أن يلفَّ أزرارَه سطرين أو يقصَّ آخرَها بلا مقبض. */
.seg--q{background:var(--surf);padding:calc(2px * var(--ui));border-radius:9px;
  max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.seg--q::-webkit-scrollbar{display:none}
.segb--q{flex:0 0 auto;white-space:nowrap}
.segb--q{padding:calc(4px * var(--ui)) calc(9px * var(--ui));font-size:calc(10.5px * var(--fz));color:var(--ink3);border-radius:7px}
.segb--q.on{background:var(--acc-t);color:var(--acc-ink);font-weight:700}
@media (hover:hover) and (pointer:fine){
  .segb--q:hover:not(.on){color:var(--ink2)}
}
.int__add--w{align-self:stretch;justify-content:space-between}
.int__add--w input{flex:1;width:auto}
/* البدجُ يحمل اسمَ الاهتمام وحدَه — لا زرَّ فيه. فحشوُه متناظرٌ لا يميل لجهة،
   والاسمُ الطويلُ يُقصّ بالنقاط ولا يدفع السلّةَ خارج السطر. */
.int{display:inline-flex;align-items:center;min-width:0;padding:calc(5px * var(--ui)) calc(11px * var(--ui));border-radius:999px;background:var(--acc-t);color:var(--acc-ink);font-size:calc(12.5px * var(--fz));font-weight:500}
.int>bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* سلّةُ الحذف: حمراءُ خفيفةٌ لا صارخة — تُقرأ فعلاً يُحسَب حسابُه ولا تصرخ في
   وجه من جاء ليضيف اهتماماً. ‎margin-inline-start:auto‎ تدفعها إلى صدر السطر:
   يسارَ البطاقة في العربية، ويمينَها في الإنجليزية — الحافّةُ نفسُها منطقياً.
   ونطاقُ اللمس ٤٤px بالـ::after وإن كانت الدائرةُ ٣٠: الإبهامُ لا يصيب ٣٠px. */
.intr__del{position:relative;flex:0 0 auto;margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;
  width:calc(30px * var(--ui));height:calc(30px * var(--ui));border:0;border-radius:9px;background:var(--bad-t);color:var(--bad);
  cursor:pointer;transition:background-color .16s,transform .12s}
.intr__del::after{content:"";position:absolute;inset:calc(-7px * var(--ui))}
.intr__del:active{transform:scale(.9)}
@media (hover:hover) and (pointer:fine){
  .intr__del:hover{background:color-mix(in srgb,var(--bad) 22%,transparent)}
}
.int__add{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));padding:calc(2px * var(--ui)) calc(3px * var(--ui)) calc(2px * var(--ui)) calc(5px * var(--ui));border-radius:999px;background:var(--fill)}
.int__add input{width:calc(100px * var(--ui));border:0;background:transparent;outline:none;font-size:calc(12.5px * var(--fz));padding:calc(5px * var(--ui));color:var(--ink)}
/* زرُّ الإضافة ٢٤px والإبهامُ لا يصيبه. والتوسيعُ رأسيٌّ فقط: الحقلُ إلى
   جانبه، ولو تمدّد عرضاً لَابتلع نقراتِ من قصد الكتابة. */
.int__go{position:relative;display:inline-flex;align-items:center;justify-content:center;width:calc(24px * var(--ui));height:calc(24px * var(--ui));border:0;border-radius:999px;background:var(--acc);color:var(--bg);cursor:pointer}
.int__go::after{content:"";position:absolute;inset:calc(-9px * var(--ui)) 0}
@media (hover:hover) and (pointer:fine){
  .int__go:hover{background:var(--acc-d)}
}
/* «جلبت لك» — أثرُ الكلمة لا إعدادُها. يُنقر فيفتح الواردةَ مفروزةً عليها،
   فيُلبس لبوسَ المقابض المجاورة لا لبوسَ الوسم الخامل. وصفرُه هادئٌ بلا حدود:
   خبرٌ لا زرّ، فلا يدعو إلى نقرةٍ لا تؤدّي شيئاً. */
.intr__cnt{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line);border-radius:9px;
  background:var(--surf);color:var(--acc-ink);font-size:calc(11px * var(--fz));font-weight:500;font-family:inherit;cursor:pointer;
  max-width:62%;transition:border-color .16s,background-color .16s}
.intr__cnt>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intr__cnt b{font-weight:700}
.intr__cnt--zero{border-color:transparent;background:transparent;color:var(--ink3);cursor:default;padding-inline:0;font-weight:400}
@media (hover:hover) and (pointer:fine){
  .intr__cnt:not(.intr__cnt--zero):hover{border-color:var(--line2);background:var(--fill)}
}
/* مدنُ الاهتمام — ملخّصٌ في السطر، والاختيارُ في لوحةٍ تُفتح */
.intr__city{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line);border-radius:9px;
  background:var(--surf);color:var(--ink2);font-size:calc(11px * var(--fz));font-weight:500;font-family:inherit;cursor:pointer;
  max-width:60%;transition:border-color .16s,background-color .16s}
.intr__city>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intr__city svg{flex:0 0 auto;opacity:.7}
.intr__city--rem{border-color:color-mix(in srgb,var(--acc) 42%,transparent);background:var(--acc-t);color:var(--acc-ink)}
.intr__city--rem svg{opacity:.9}
@media (hover:hover) and (pointer:fine){
  .intr__city:hover{border-color:var(--line2);background:var(--fill)}
}
/* لوحةُ المدى */
.md__c--reach{gap:12px;align-items:stretch;--md-cap:min(78dvh,620px)}
.rch__opts{display:flex;flex-direction:column;gap:7px}
.rch__opt{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--surf);color:var(--ink2);font-size:calc(12.5px * var(--fz));font-weight:500;font-family:inherit;
  cursor:pointer;text-align:start;transition:border-color .16s,background-color .16s}
.rch__opt.on{border-color:color-mix(in srgb,var(--acc) 55%,transparent);background:var(--acc-t);color:var(--acc-ink);font-weight:700}
.rch__opt svg{flex:0 0 auto;opacity:.75}
/* المربّعُ ثابتُ المقاس فارغاً كان أو معلَّماً — وإلا تحرّك النصُّ عند كل نقرة */
.rch__tick{flex:0 0 auto;width:18px;height:18px;border:1.5px solid var(--line2);border-radius:5px;display:grid;place-items:center;
  color:var(--bg);transition:background-color .16s,border-color .16s}
.rch__opt.on .rch__tick{background:var(--acc);border-color:var(--acc)}
@media (hover:hover) and (pointer:fine){
  .rch__opt:hover:not(.on){border-color:var(--line2);background:var(--fill)}
}
.rch__pick{display:flex;flex-direction:column;gap:9px;min-height:0}
.rch__sel{display:flex;flex-wrap:wrap;gap:6px}
.rch__srch{display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;background:var(--surf);color:var(--ink3)}
.rch__srch svg,.rch__si{flex:0 0 auto;display:inline-flex}
.rch__srch input{flex:1;min-width:0;border:0;background:transparent;outline:none;color:var(--ink);font-family:inherit;font-size:calc(12.5px * var(--fz))}
.rch__srch input::-webkit-search-cancel-button{display:none}
.rch__list{display:flex;flex-direction:column;gap:1px;max-height:min(38dvh,300px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  border:1px solid var(--line);border-radius:11px;padding:4px;background:var(--surf)}
.rch__list--ns{max-height:min(28dvh,220px)}
.rch__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 10px;border:0;border-radius:8px;
  background:transparent;color:var(--ink);font-family:inherit;font-size:calc(12.5px * var(--fz));cursor:pointer;text-align:start;width:100%}
.rch__cn{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rch__cr{flex:0 0 auto;font-size:calc(10px * var(--fz));color:var(--ink3)}
@media (hover:hover) and (pointer:fine){
  .rch__row:hover{background:var(--fill)}
}
.rch__row:active{background:var(--fill2)}
/* الصفُّ المختار في نافذة الخريطة — الاختيارُ واحدٌ هناك لا متعدّد */
.rch__row.on{background:var(--acc-t);color:var(--acc-ink);font-weight:700}
.rch__row.on .rch__cr{color:var(--acc-ink);opacity:.7}
.rch__note{display:flex;align-items:center;gap:6px;font-size:calc(11px * var(--fz));line-height:1.75;color:var(--ink3)}
.rch__note svg{flex:0 0 auto}
/* مدينةُ المتجر المختارة في نافذة الإنشاء */
.ns__picked{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
  border-radius:11px;background:var(--acc-t);color:var(--acc-ink);font-family:inherit;font-size:calc(12.5px * var(--fz));font-weight:700;cursor:pointer;text-align:start}
.ns__picked>span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ns__pr{flex:0 0 auto;font-size:calc(10px * var(--fz));font-weight:400;opacity:.75}
.ns__picked svg{flex:0 0 auto;opacity:.8}
/* بابُ الاهتمامات من إعدادات المتجر */
.ns__link{display:flex;align-items:center;gap:11px;padding:12px 13px;border:1px solid var(--line);border-radius:13px;
  background:var(--surf);color:var(--ink);font-family:inherit;cursor:pointer;text-align:start;width:100%;transition:border-color .16s,background-color .16s}
.ns__ic{flex:0 0 auto;width:32px;height:32px;border-radius:10px;background:var(--acc-t);color:var(--acc-ink);display:grid;place-items:center}
.ns__lt{display:block;font-size:calc(13px * var(--fz));font-weight:700}
.ns__ls{display:block;font-size:calc(10.5px * var(--fz));line-height:1.7;color:var(--ink3);margin-top:2px}
@media (hover:hover) and (pointer:fine){
  .ns__link:hover{border-color:var(--line2);background:var(--fill)}
}
/* رجوعٌ إلى الصفحة التي فُتحت منها هذه — لمن جاء من صفحةٍ وحدَه.
   ولا قلبَ هنا: كان السهمُ يُقلب في العربية ويُترك في اللاتينية — عكسُ الصواب
   في اللغتين معاً — فيشير «الرجوعُ» إلى حيث تمضي القراءةُ لا إلى حيث بدأت.
   الاتجاهُ اليومَ حيث يعيش لكلِّ سهمٍ في التطبيق: ‎.icd‎ في صدر الورقة. */
.pg__back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--surf);color:var(--ink2);font-family:inherit;font-size:calc(11.5px * var(--fz));font-weight:700;cursor:pointer}
.pg__back svg{flex:0 0 auto}
@media (hover:hover) and (pointer:fine){
  .pg__back:hover{border-color:var(--line2);background:var(--fill)}
}
/* انتظارُ البحث الشامل */
.pool__wait{display:flex;align-items:center;justify-content:center;gap:8px;padding:22px 0;font-size:calc(11.5px * var(--fz));color:var(--ink3)}
.pro__open{display:flex;align-items:flex-start;gap:7px;padding:9px 11px;border-radius:11px;background:var(--fill);
  font-size:calc(10.5px * var(--fz));line-height:1.7;color:var(--ink3)}
.pro__open svg{flex:0 0 auto;margin-top:3px;color:var(--ok)}
/* دعوةُ برو */
.proInv{display:flex;align-items:center;gap:calc(12px * var(--ui));padding:calc(15px * var(--ui)) calc(17px * var(--ui));border-radius:16px;border:1px dashed color-mix(in srgb,var(--acc) 55%,transparent);background:var(--acc-t);cursor:pointer;text-align:start;transition:background .16s;font-family:inherit;width:100%;color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .proInv:hover{background:var(--acc-tt)}
}
.proInv__ic{width:calc(38px * var(--ui));height:calc(38px * var(--ui));flex:0 0 auto;border-radius:999px;background:var(--acc);display:grid;place-items:center;color:var(--bg)}
.proInv__t{font-size:calc(14px * var(--fz));font-weight:700;color:var(--acc-ink)}
.proInv__s{font-size:calc(11px * var(--fz));line-height:1.7;color:var(--ink2)}
/* التقارير */
/* ── لا بطاقةَ يتيمةٌ في صفٍّ وحدَها ──────────────────────────────────────────
   خمسُ بطاقاتٍ في قياسٍ يسع أربعاً تترك الخامسةَ وحدَها ومعها ثلاثةُ مقاعدَ
   فارغة — وهي بطاقةُ التقييم، أحسنُ ما في الصفحة، تُعرَض يتيمةً كأنّها سقطت من
   الصفّ. والعلاجُ من القياس لا من الشبكة: صفحةُ التقارير لوحةُ أرقامٍ لا صفحةَ
   نصّ، فقياسُها قياسُ لوحةٍ يسع خمسةَ مؤشّراتٍ في سطرٍ واحد (‎.pg__in--w‎)،
   و‎auto-fit‎ يطوي المساراتِ الفارغةَ فيصحّ الصفُّ لأربعةٍ وثلاثةٍ واثنين.
   وفي التكديس عمودان معلومان، فيُمدّ آخرُها متى كان فرداً — امتدادٌ مقصودٌ
   بعرض الصفّ، لا فجوةٌ إلى جانبه. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(130px * var(--ui)),1fr));gap:calc(10px * var(--ui))}
.kpi{display:flex;flex-direction:column;gap:calc(2px * var(--ui));padding:calc(13px * var(--ui)) calc(14px * var(--ui));border-radius:13px;border:1px solid var(--line);background:var(--surf)}
html[data-lay="stack"] .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-lay="stack"] .kpis>:last-child:nth-child(odd){grid-column:1 / -1}
.kpi__l{font-size:calc(10.5px * var(--fz));color:var(--ink3)}
.kpi__v{font-size:calc(22px * var(--fz));font-weight:900;line-height:1.3}
.kpi__v.ok{color:var(--ok)}
.kpi__s{font-size:calc(10px * var(--fz));color:var(--ink3)}
.tops{display:flex;flex-direction:column;gap:calc(10px * var(--ui));padding:calc(15px * var(--ui)) calc(17px * var(--ui));border-radius:14px;border:1px solid var(--line);background:var(--surf)}
.tops__t{font-size:calc(13px * var(--fz));font-weight:700}
.top{display:flex;align-items:center;gap:calc(10px * var(--ui))}
.top__l{width:calc(72px * var(--ui));flex:0 0 auto;font-size:calc(12px * var(--fz));font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top__p{font-size:calc(11.5px * var(--fz));font-weight:700;width:calc(40px * var(--ui));flex:0 0 auto;text-align:end}
/* بوابةُ برو (التمويه) */
.gate{position:relative}
.gate__in{display:flex;flex-direction:column;gap:calc(14px * var(--ui));border-radius:16px}
.gate.off .gate__in{filter:blur(7px);opacity:.55;pointer-events:none}
.gate__ov{position:absolute;inset:0;z-index:2;display:grid;justify-items:center;align-items:start;padding-top:calc(46px * var(--ui));background:color-mix(in srgb,var(--bg) 28%,transparent);border-radius:16px}
.gate__c{display:flex;flex-direction:column;align-items:center;gap:calc(11px * var(--ui));text-align:center;padding:calc(20px * var(--ui)) calc(24px * var(--ui));border-radius:16px;border:1px solid var(--line);background:var(--bg);box-shadow:var(--shadow2);max-width:min(88%,330px * var(--ui))}
.gate__ic{width:calc(40px * var(--ui));height:calc(40px * var(--ui));border-radius:12px;background:var(--acc-t);display:grid;place-items:center;color:var(--acc-ink)}
.gate__t{font-size:calc(16px * var(--fz));font-weight:900}
.gate__p{font-size:calc(11.5px * var(--fz));line-height:1.75;color:var(--ink2);max-width:36ch}
.gate__go{padding:calc(9px * var(--ui)) calc(22px * var(--ui));border:0;border-radius:11px;background:var(--acc);color:var(--bg);font-size:calc(12.5px * var(--fz));font-weight:700;cursor:pointer;transition:transform .15s var(--ez);font-family:inherit}
.gate__go:active{transform:scale(.96)}
/* بحثُ المنصة */
.pool__srch{display:flex;align-items:center;gap:calc(8px * var(--ui));height:calc(38px * var(--ui));padding:0 calc(13px * var(--ui));border-radius:11px;border:1px solid var(--line);background:var(--surf);color:var(--ink3)}
.pool__srch input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:calc(13px * var(--fz));color:var(--ink)}
.pool__saved{display:flex;align-items:center;gap:calc(6px * var(--ui));flex-wrap:wrap;min-height:calc(26px * var(--ui));font-size:calc(10.5px * var(--fz));color:var(--ink3)}
.pool__r{display:flex;flex-direction:column;gap:calc(4px * var(--ui));padding:calc(12px * var(--ui)) calc(14px * var(--ui));border-radius:13px;border:1px solid var(--line);background:var(--surf);cursor:pointer;text-align:start;font-family:inherit;color:var(--ink);width:100%}
.pool__rt{font-size:calc(13.5px * var(--fz));font-weight:500;line-height:1.6;display:block}
.pool__rm{font-size:calc(11px * var(--fz));color:var(--ink3)}
/* ملفُ المتجر (صفحة) */
/* شاراتُ «موثّق» و«برو» تسكن الصفَّ نفسَه لا صفّاً تحته — كما هي في الإعدادات
   حرفاً (‎.st__me‎). كانتا في ‎.prof__chips‎ أسفلَ البطاقة، فتُقرآن سطراً ثانياً
   معلّقاً بلا صاحبٍ يحمله، وهو أمرُ صاحب المنصّة: «كلمة برو … خلها داخل العنصر
   زي مكانها بالاعدادات». */
.prof__me{display:flex;align-items:center;gap:calc(10px * var(--ui));padding:calc(15px * var(--ui)) calc(16px * var(--ui));border-radius:16px;border:1px solid var(--line);background:var(--surf)}
.prof__me .okpill,.prof__me .propill,.prof__me .prof__rate{flex:0 0 auto}
.prof__av{position:relative;padding:0;width:calc(46px * var(--ui));height:calc(46px * var(--ui));flex:0 0 auto;border-radius:13px;background:var(--acc-t);display:grid;place-items:center;color:var(--acc-ink);border:0;cursor:pointer;overflow:visible;font-size:calc(19px * var(--fz));font-weight:900;font-family:inherit}
.prof__av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:13px}
.prof__pen{position:absolute;bottom:calc(-4px * var(--ui));inset-inline-start:calc(-4px * var(--ui));width:calc(17px * var(--ui));height:calc(17px * var(--ui));border-radius:999px;background:var(--acc);color:var(--bg);display:grid;place-items:center;border:2px solid var(--bg)}
.prof__rate{font-size:calc(14px * var(--fz));font-weight:900;color:var(--warn);flex:0 0 auto}
.prof__chips{display:flex;gap:calc(6px * var(--ui));flex-wrap:wrap}
.prof__stat{display:inline-flex;padding:calc(5px * var(--ui)) calc(11px * var(--ui));border-radius:999px;background:var(--fill);font-size:calc(11px * var(--fz));font-weight:500}
.prof__badge{display:inline-flex;align-items:center;gap:calc(4px * var(--ui));padding:calc(5px * var(--ui)) calc(11px * var(--ui));border-radius:999px;background:var(--ok-t);color:var(--ok);font-size:calc(10.5px * var(--fz));font-weight:700}
.prof__bio{display:flex;flex-direction:column;gap:calc(8px * var(--ui));border:1px solid var(--line);border-radius:13px;background:var(--surf);padding:calc(11px * var(--ui)) calc(14px * var(--ui)) calc(12px * var(--ui))}
.prof__bio textarea{border:0;background:transparent;outline:none;resize:none;field-sizing:content;min-height:2.4lh;max-height:6lh;padding:0;font-size:calc(13px * var(--fz));line-height:1.8;color:var(--ink)}
.prof__save{align-self:flex-start;padding:calc(7px * var(--ui)) calc(16px * var(--ui));border:0;border-radius:999px;background:var(--acc);color:var(--bg);font-size:calc(11.5px * var(--fz));font-weight:700;cursor:pointer;transition:transform .15s var(--ez);font-family:inherit}
.prof__save:active{transform:scale(.96)}
.prof__rev{display:flex;flex-direction:column;gap:calc(4px * var(--ui));padding:calc(12px * var(--ui)) calc(14px * var(--ui));border-radius:13px;background:var(--fill)}
.prof__revx{font-size:calc(12.5px * var(--fz));line-height:1.8;display:block}
.prof__revb{font-size:calc(10px * var(--fz));color:var(--ink3)}
/* توثيق/فريق */
.vcard{display:flex;align-items:center;gap:calc(10px * var(--ui));padding:calc(11px * var(--ui)) calc(15px * var(--ui));border-radius:13px;border:1px solid var(--line);background:var(--surf)}
.vcard__go{padding:calc(6px * var(--ui)) calc(14px * var(--ui));border:0;border-radius:999px;background:var(--acc);color:var(--bg);font-size:calc(11px * var(--fz));font-weight:700;cursor:pointer;transition:transform .15s var(--ez);font-family:inherit}
.team__avs{display:inline-flex;align-items:center}
.team__av{width:calc(26px * var(--ui));height:calc(26px * var(--ui));border-radius:999px;background:var(--fill2);display:grid;place-items:center;font-size:calc(10px * var(--fz));font-weight:700;color:var(--ink2);box-shadow:0 0 0 2px var(--surf)}
.team__av:first-child{background:var(--acc-t);color:var(--acc-ink)}
.team__av+.team__av{margin-inline-start:calc(-8px * var(--ui))}
.okpill{display:inline-flex;align-items:center;gap:calc(4px * var(--ui));padding:calc(3px * var(--ui)) calc(10px * var(--ui));border-radius:999px;background:var(--ok-t);color:var(--ok);font-size:calc(10px * var(--fz));font-weight:700}
.propill{display:inline-flex;padding:calc(3px * var(--ui)) calc(10px * var(--ui));border-radius:999px;background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);font-size:calc(10px * var(--fz));font-weight:700}
/* ── بابُ الدخول — لونٌ واحدٌ وهيئةٌ واحدةٌ في موضعيه ────────────────────────
   الأمرُ بحرفه: «حط زر لتسجيل الدخول تحت واضح (نفس لون وهوية اللي في
   الاعدادات)». فهو صنفٌ واحدٌ لا صنفان متشابهان: يظهر في ذيل لوحة الطلبات
   (‎.sb__frow‎) وفي كرت الحساب أعلى الإعدادات (‎.st__me‎)، فلا يفترق الموضعان
   بتحريرِ أحدهما. وهيئتُه هيئةُ «+ طلب» في رأس اللوحة نفسِه — ‎--acc‎ مِلءَ
   الزرِّ وحرفٌ بلون الأرضية — لأنّها لغةُ «الفعلُ الأوّلُ هنا» في هذه المنصّة،
   ولا يليق بها حرفٌ عارٍ ملوّنٌ يُقرأ كلمةً في سطرِ وصف. */
.btnIn{display:inline-flex;align-items:center;justify-content:center;gap:calc(6px * var(--ui));flex:0 0 auto;
  height:calc(31px * var(--ui));padding:0 calc(13px * var(--ui));border:0;border-radius:999px;
  background:var(--acc);color:var(--bg);font-size:calc(11.5px * var(--fz));font-weight:700;
  white-space:nowrap;cursor:pointer;font-family:inherit;transition:background .16s,transform .15s var(--ez)}
.btnIn svg{flex:0 0 auto}
.btnIn:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .btnIn:hover{background:var(--acc-d)}
}
/* في كرت الحساب يقف على مقاس الكرت: الكرتُ أفسحُ من صفِّ الذيل، والبابُ فيه
   أوّلُ ما يُنقر في صفحةٍ كلُّها إعدادات. */
/* شعارُ المتجر لغير المالك: يُرى ولا يُنقر — لا قلمَ عليه ولا مؤشّرَ يد. */
.prof__av--ro{cursor:default}
.st__me>.btnIn{height:calc(34px * var(--ui));padding:0 calc(15px * var(--ui));font-size:calc(12px * var(--fz))}
/* وفي صدر اللوحة إلى جانب الشعار يقف على مقاس اختصارات الرأس (٢٩): ثلاثةُ
   أزرارٍ في الطرف الآخر بهذا الارتفاع، فرابعٌ أطولُ منها يكسر الصفّ. وينكمش
   حرفُه على الشاشة الضيّقة فلا يدفع الاختصاراتِ خارجَها. */
.btnIn--hd{height:calc(29px * var(--ui));padding:0 calc(11px * var(--ui));font-size:calc(11px * var(--fz));min-width:0}
.btnIn--hd span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ════ النوافذ ════ */
.md{position:fixed;inset:0;z-index:60;background:rgba(8,11,15,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:grid;place-items:center;animation:ab-fade .26s var(--ez) backwards;overscroll-behavior:contain}
.md--deep{z-index:62}
.md__c{width:min(92vw,320px * var(--ui));display:flex;flex-direction:column;gap:calc(12px * var(--ui));padding:calc(18px * var(--ui)) calc(16px * var(--ui));border-radius:18px;border:1px solid var(--line);background:var(--bg);color:var(--ink);box-shadow:var(--shadow2);animation:ab-mdin .42s var(--ez) backwards;max-height:var(--md-cap);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.md__wait{display:flex;align-items:center;justify-content:center;gap:calc(7px * var(--ui));padding:calc(10px * var(--ui)) calc(8px * var(--ui));font-size:calc(11px * var(--fz));line-height:1.7;color:var(--ink3);text-align:center}
.md__c--list{width:min(92vw,300px * var(--ui));gap:calc(2px * var(--ui));padding:calc(10px * var(--ui))}
.md__c--store{width:min(92vw,310px * var(--ui))}
.md__c--media{width:min(94vw,400px * var(--ui));gap:calc(10px * var(--ui));padding:calc(14px * var(--ui));border-radius:20px}
.md__c--pro{width:min(92vw,340px * var(--ui));padding:calc(20px * var(--ui)) calc(18px * var(--ui)) calc(16px * var(--ui))}
.md__c--map{width:min(92vw,340px * var(--ui));gap:calc(11px * var(--ui));padding:calc(16px * var(--ui))}
/* ══ بوبُ السياق: الطلبُ ثمّ العرضُ، ومُمَرِّرٌ واحدٌ يجمعهما ═══════════════════════
   «بوبٌ لطيفٌ غير متوحّشٍ لكن مستوعبٌ وكافٍ — ليس ضيّقاً وصغيراً وليس يغطّي أكثر
   الواجهة — وفيه سكرول إن لزم لطلبي». فالعرضُ ٣٦٠ نقطةً (أوسعُ من نافذة القائمة
   بستّين، وأضيقُ من الوسائط بأربعين)، والسقفُ ٧٨٪ من الشاشة — يُبقي طرفاً من
   المحادثة ظاهراً خلفه فيُقرأ لوحاً فوقها لا شاشةً بدلَها.
   وكان صدرُه رأساً ثابتاً يحبس العرضَ ويترك الطلبَ وحدَه يُمرَّر، فحُكم عليه:
   «في البوب ذا خلِّ السكرول موحّداً بينهم وليس فقط على جزءٍ واحدٍ منهما». فصار
   اللوحُ رأساً لا يُمرَّر (العنوانُ وزرُّ الإغلاق) ثمّ مُمَرِّراً واحداً يمشي فيه
   الطلبُ والعرضُ معاً بترتيب المحادثة نفسِه. واللوحُ لا يُمرَّر: ‎overflow:hidden‎
   عليه، فلا مُمَرِّران في نافذةٍ واحدة. */
.md__c--ctx{width:min(92vw,360px * var(--ui));--md-cap:78dvh;
  gap:0;padding:calc(12px * var(--ui)) calc(12px * var(--ui)) calc(6px * var(--ui));
  overflow:hidden}
.ctxm__hd{display:flex;align-items:center;gap:calc(8px * var(--ui));flex:0 0 auto;
  padding:0 calc(2px * var(--ui)) calc(8px * var(--ui))}
.ctxm__hd>.md__t2{flex:1;min-width:0;font-size:calc(13px * var(--fz))}
.md__x{width:calc(28px * var(--ui));height:calc(28px * var(--ui));flex:0 0 auto;border:0;border-radius:999px;
  background:var(--fill);color:var(--ink2);display:grid;place-items:center;cursor:pointer;transition:background .16s}
@media (hover:hover) and (pointer:fine){.md__x:hover{background:var(--fill2)}}
/* ‎.m‎ عمودٌ يرصف الفقاعةَ إلى طرفٍ في المجرى؛ في البوب تُملأ العرضُ كلَّه. */
.ctxm__body .m{align-items:stretch}
.ctxm__body .oc{max-width:100%}
/* ولا أزرارَ للبطاقة هنا: البوبُ مفتوحٌ **داخلَ** محادثة هذا العرض، فزرٌّ يقود
   إلى المكان الذي أنت فيه لغوٌ. والبطاقةُ صامتةٌ أصلاً (‎'quiet'‎ في ‎offerCardH‎)،
   وهذا حارسُ الباب الثاني لو جاءها زرٌّ من طريقٍ آخر. */
.ctxm__body .oc__acts{display:none}
/* ── الفاصلُ يُرى ويقول ما بعده ────────────────────────────────────────────────
   «فاصلةٌ واضحةٌ جميلة»: خطّان يمتدّان من الطرفين وكلمةٌ بينهما — لا خطٌّ أعمى
   يُقرأ حدَّ بطاقةٍ ثانية. */
.ctxm__cut{display:flex;align-items:center;gap:calc(9px * var(--ui));flex:0 0 auto;
  margin:calc(11px * var(--ui)) calc(2px * var(--ui)) calc(9px * var(--ui));
  font-size:calc(10.5px * var(--fz));font-weight:700;color:var(--ink3)}
/* وأوّلُ فاصلٍ في المُمَرِّر لا هامشَ فوقه: الرأسُ فوقه بحشوته، فهامشٌ ثانٍ فراغٌ
   يُقرأ سطراً ناقصاً في صدر البوب. */
.ctxm__cut--top{margin-top:0}
.ctxm__cut::before,.ctxm__cut::after{content:"";height:1px;flex:1;background:var(--line2)}
/* جوفُ البوب: الطلبُ كاملاً بإضافاته ثمّ العرضُ، في مُمَرِّرٍ واحدٍ يمشيان فيه معاً. */
.ctxm__body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:calc(8px * var(--ui));
  padding-bottom:calc(6px * var(--ui));-webkit-overflow-scrolling:touch}
.ctxm__body .bq{max-width:100%}
.md__t{font-size:calc(12.5px * var(--fz));font-weight:700;padding:calc(6px * var(--ui)) calc(8px * var(--ui)) calc(8px * var(--ui))}
.md__r{display:flex;align-items:center;gap:calc(9px * var(--ui));width:100%;padding:calc(9px * var(--ui)) calc(10px * var(--ui));border:0;border-radius:10px;background:transparent;cursor:pointer;text-align:start;color:var(--ink);font-size:calc(13px * var(--fz));transition:background .16s;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .md__r:hover{background:var(--fill)}
}
/* ردُّ فعلٍ باللمس: صفٌّ بلا أثرِ ضغطٍ يُقرأ معطّلاً على الهاتف حيث لا تحويم */
.md__r:active{background:var(--fill2)}
.md__rt{width:calc(30px * var(--ui));height:calc(30px * var(--ui));flex:0 0 auto;border-radius:9px;background:var(--acc-t);display:grid;place-items:center;font-size:calc(12px * var(--fz));font-weight:700;color:var(--acc-ink)}
.md__foot{font-size:calc(10px * var(--fz));color:var(--ink3);padding:calc(7px * var(--ui)) calc(8px * var(--ui)) calc(4px * var(--ui));line-height:1.7}
/* فاصلٌ داخل قائمةِ نافذة: ما تحته صنفٌ آخرُ من الصفوف (مفتاحٌ لا اختيار). */
.md__cut{height:1px;flex:0 0 auto;background:var(--line2);margin:calc(6px * var(--ui)) calc(8px * var(--ui))}
.md__r>.st__col{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2px * var(--ui));text-align:start}
.md__r>.st__col>.st__sub{font-size:calc(10.5px * var(--fz));color:var(--ink3);line-height:1.65}
.md__hd2{display:flex;flex-direction:column;gap:calc(2.5px * var(--ui));text-align:center}.md__t2{font-size:calc(15.5px * var(--fz));font-weight:700}
.md__s2{font-size:calc(10.5px * var(--fz));color:var(--ink3)}
.md__stars{display:flex;justify-content:center;gap:calc(6px * var(--ui));direction:ltr}
.md__star{display:grid;place-items:center;width:calc(38px * var(--ui));height:calc(38px * var(--ui));border:0;border-radius:999px;background:transparent;cursor:pointer;transition:transform .15s var(--ez),color .15s;color:var(--fill2)}
.md__star.on{color:var(--warn)}
.md__star:active{transform:scale(.9)}
.md__ta{border:1px solid var(--line);border-radius:12px;background:var(--surf);outline:none;resize:none;field-sizing:content;min-height:2.2lh;max-height:5lh;padding:calc(10px * var(--ui)) calc(12px * var(--ui));font-size:calc(12.5px * var(--fz));line-height:1.75;color:var(--ink);font-family:inherit}
.md__go{padding:calc(10px * var(--ui));border:0;border-radius:12px;background:var(--acc);color:var(--bg);font-size:calc(13px * var(--fz));font-weight:700;cursor:pointer;transition:transform .15s var(--ez);font-family:inherit}
.md__go:active{transform:scale(.97)}
.md__go--ok{background:var(--ok)}
.md__close{padding:calc(9px * var(--ui)) 0;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--ink);font-size:calc(12.5px * var(--fz));font-weight:700;cursor:pointer;transition:background .16s;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .md__close:hover{background:var(--fill)}
}
/* الخريطة */
/* ── اللوحةُ تُمرَّر ولا تُعصَر ─────────────────────────────────────────────────
   ‎.md__c‎ عمودٌ مرنٌ بسقفٍ ومُمَرِّر، وأبناؤه بلا ‎flex‎ صريحةٍ ينكمشون قبل أن
   يُمرَّر شيء: فحين يُختار حيٌّ وتنفتح قائمتُه صار قرصُ الخريطة شريطاً بارتفاع
   خمسين نقطة، وقائمةُ المدن سطرين — ولا يُقرأ شيءٌ كاملاً. المنعُ من الانكماش
   يعيد لكلِّ قطعةٍ قدرَها، والفائضُ يذهب إلى المُمَرِّر حيث ينتمي. */
.md__c--map>*,.loc__hood>*{flex:0 0 auto}
.map{position:relative;flex:0 0 auto;height:calc(150px * var(--ui));border-radius:13px;background:var(--fill);overflow:hidden;border:1px solid var(--line)}
/* ومتى اختيرت المدينةُ تراجعَ القرصُ وضاقت قائمتُها: البصرُ يمضي إلى الحيّ،
   وما وراءه بقي مرئياً للتبديل لا للاختيار الأوّل. */
.md__c--map2 .map{height:calc(92px * var(--ui))}
.md__c--map2 .rch__list--ns{max-height:min(20dvh,168px)}
/* والزرُّ يبقى في اليد مهما طالت اللوحة: ثلاثُ درجاتٍ من الدقّة لا تسع شاشةً
   قصيرةً بدرجة المقاس «أكبر»، فكان «اعتمد» يهبط تحت الحافّة ويُبحَث عنه بسحب.
   لاصقٌ في قاع المُمَرِّر بحلقةٍ من لون اللوحة تفصله عمّا يمرّ تحته. */
.md__c--map .md__go{position:sticky;bottom:calc(-18px * var(--ui));z-index:2;
  box-shadow:0 0 0 calc(7px * var(--ui)) var(--bg)}
.map__l1{position:absolute;top:34%;inset-inline:0;height:calc(3px * var(--ui));background:var(--line2);opacity:.7}
.map__l2{position:absolute;top:64%;inset-inline:0;height:calc(3px * var(--ui));background:var(--line2);opacity:.5;transform:rotate(-4deg)}
.map__l3{position:absolute;top:0;bottom:0;inset-inline-start:48%;width:calc(3px * var(--ui));background:var(--line2);opacity:.6;transform:rotate(6deg)}
.map__o1{position:absolute;top:8%;inset-inline-end:8%;width:calc(52px * var(--ui));height:calc(52px * var(--ui));border-radius:999px;background:var(--ok-t)}
.map__o2{position:absolute;bottom:calc(-14px * var(--ui));inset-inline-start:calc(-14px * var(--ui));width:calc(70px * var(--ui));height:calc(70px * var(--ui));border-radius:999px;background:var(--acc-t)}
.map__spot{position:absolute;display:flex;align-items:center;gap:calc(5px * var(--ui));padding:calc(4px * var(--ui)) calc(10px * var(--ui));border-radius:999px;border:1.5px solid var(--line2);background:var(--bg);font-size:calc(10px * var(--fz));font-weight:700;cursor:pointer;color:var(--ink2);box-shadow:var(--shadow);font-family:inherit}
.map__spot.on{border-color:var(--acc);color:var(--acc-ink);animation:var(--fx-pop) .3s var(--ez-b) backwards}
.map__spot i{width:calc(7px * var(--ui));height:calc(7px * var(--ui));border-radius:999px;background:var(--acc);flex:0 0 auto}
.map__cities{display:flex;flex-wrap:wrap;gap:calc(5px * var(--ui));max-height:calc(110px * var(--ui));overflow-y:auto;overflow-x:hidden}
/* ── الحيُّ والدبّوس: درجتا دقّةٍ تحت المدينة في اللوحة نفسِها ─────────────────
   قسمٌ ينفتح تحت المدينة متى اختيرت — مؤطَّرٌ بشعرةٍ من فوقه ليُقرأ درجةً ثانيةً
   لا حقلاً رابعاً في قائمة. والكلمةُ «اختياري» صريحةٌ في عنوانه: من يكفيه اسمُ
   مدينته يمضي إلى الزرّ بلا أن يشعر أنه ترك حقلاً ناقصاً. */
.loc__hood{display:flex;flex-direction:column;gap:calc(8px * var(--ui));padding-top:calc(11px * var(--ui));border-top:1px solid var(--line);animation:var(--fx-slide) .26s var(--ez) backwards}
.loc__k{display:flex;align-items:center;gap:calc(6px * var(--ui));font-size:calc(11px * var(--fz));font-weight:700;color:var(--ink2)}
.loc__k svg{flex:0 0 auto;opacity:.7}
.loc__k i{font-style:normal;font-weight:500;font-size:calc(10px * var(--fz));color:var(--ink3)}
/* الدبّوسُ صفٌّ لا رقاقة: تحته سطرُ وعدٍ يُقرأ («يظهر للمزوّد بعد قبول عرضه»)،
   وهو نصفُ الفعل — من يعطي إحداثيّتَه يريد أن يعرف إلى أين تذهب قبل أن يعطيها. */
.loc__here{display:flex;align-items:center;gap:calc(10px * var(--ui));width:100%;text-align:start;
  padding:calc(10px * var(--ui)) calc(12px * var(--ui));border:1px solid var(--line);border-radius:12px;
  background:var(--surf);color:var(--ink);cursor:pointer;font-family:inherit;
  transition:background .16s,border-color .16s}
.loc__here.on{border-color:color-mix(in srgb,var(--acc) 55%,transparent);background:var(--acc-t)}
.loc__here[disabled]{opacity:.7;cursor:default}
.loc__here:active{transform:scale(.985)}
.loc__hi{flex:0 0 auto;display:grid;place-items:center;width:calc(28px * var(--ui));height:calc(28px * var(--ui));border-radius:999px;background:var(--fill);color:var(--acc-ink)}
.loc__here.on .loc__hi{background:var(--acc);color:var(--bg)}
.loc__ht{font-size:calc(12.5px * var(--fz));font-weight:700}
.loc__hs{font-size:calc(10px * var(--fz));line-height:1.6;color:var(--ink3)}
.loc__here.on .loc__hs{color:var(--acc-ink);opacity:.8}
@media (hover:hover) and (pointer:fine){
  .loc__here:hover{border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
}
/* الوسائط */
.mv__hd{display:flex;align-items:center;gap:calc(8px * var(--ui))}
.mv__n{font-size:calc(12px * var(--fz));font-weight:700}
.mv__x{display:inline-grid;place-items:center;width:calc(28px * var(--ui));height:calc(28px * var(--ui));border:0;border-radius:999px;background:var(--fill);color:var(--ink2);cursor:pointer;transition:background .16s;margin-inline-start:auto}
@media (hover:hover) and (pointer:fine){
  .mv__x:hover{background:var(--fill2)}
}
.mv__stage{position:relative;height:calc(230px * var(--ui));border-radius:14px;overflow:hidden;background:var(--me);color:var(--me-ink);display:grid;place-items:center}
.mv__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.mv__nav{position:absolute;top:50%;transform:translateY(-50%);display:inline-grid;place-items:center;width:calc(30px * var(--ui));height:calc(30px * var(--ui));border:0;border-radius:999px;background:rgba(0,0,0,.3);color:#fff;cursor:pointer}
.mv__nav--next{inset-inline-start:calc(8px * var(--ui))}
.mv__nav--prev{inset-inline-end:calc(8px * var(--ui))}
.mv__thumbs{display:flex;gap:calc(6px * var(--ui));justify-content:center;flex-wrap:wrap}
.mv__th{position:relative;display:grid;place-items:center;width:calc(44px * var(--ui));height:calc(44px * var(--ui));flex:0 0 auto;border-radius:9px;background:rgba(125,125,125,.16);cursor:pointer;border:2px solid transparent;color:var(--ink2);overflow:hidden;padding:0}
.mv__th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mv__th.on{border-color:var(--acc)}
/* برو */
.pro__hd{display:flex;align-items:center;gap:calc(10px * var(--ui))}
.pro__ic{width:calc(40px * var(--ui));height:calc(40px * var(--ui));flex:0 0 auto;border-radius:12px;background:var(--acc-t);display:grid;place-items:center;color:var(--acc-ink)}
.pro__t{font-size:calc(17px * var(--fz));font-weight:900}
.pro__s{font-size:calc(10.5px * var(--fz));color:var(--ink3)}
.pro__feats{display:flex;flex-direction:column;gap:calc(7px * var(--ui))}
.pro__f{display:flex;align-items:center;gap:calc(8px * var(--ui));font-size:calc(12.5px * var(--fz))}
.pro__f svg{color:var(--ok);flex:0 0 auto}
.pro__note{align-self:center;font-size:calc(9.5px * var(--fz));color:var(--ink3);text-align:center}

/* ════ الإشعارُ العلوي + التوست ════ */
.ntf{position:fixed;top:calc(var(--safe-t) + 10px * var(--ui));inset-inline:calc(12px * var(--ui));margin-inline:auto;width:auto;max-width:calc(520px * var(--ui));display:flex;align-items:center;gap:calc(10px * var(--ui));padding:calc(11px * var(--ui)) calc(14px * var(--ui));border:1px solid var(--line);border-radius:16px;background:var(--bg);color:var(--ink);box-shadow:var(--shadow2);transform:translateY(calc(-100% - 24px));opacity:0;transition:transform .34s var(--ez-b),opacity .2s ease;z-index:80;cursor:pointer;text-align:start;font-family:inherit}
.ntf.show{transform:none;opacity:1}
.ntf:active{transform:scale(.98)}
.ntf__ic{width:calc(30px * var(--ui));height:calc(30px * var(--ui));flex:0 0 auto;border-radius:10px;background:var(--acc-t);color:var(--acc-ink);display:grid;place-items:center}
.ntf__c{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2.5px * var(--ui))}
.ntf__t{font-size:calc(12.5px * var(--fz));font-weight:700;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ntf__s{font-size:calc(10.5px * var(--fz));color:var(--ink2);line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* التوست — «تم النسخ»، «استلمنا بلاغك»…
   كان أرضيتُه ‎--bg‎ نفسَها التي تحته، فيقرأ نصّاً سائباً فوق القائمة لا بطاقةً:
   بلا حدٍّ يُرى، متداخلاً مع ما وراءه. وكان أسفلَ الشاشة حيث الإبهامُ وشريطُ
   الكتابة، أبعدَ موضعٍ عن العين بعد فعلٍ نظرُك فيه. الآن لوحٌ صريحٌ مضادُّ اللون
   لخلفيته في الوضعين، ببدجٍ دائريٍّ يحمل معنى الرسالة، وفي أعلى الشاشة. */
.tst{position:fixed;top:calc(var(--safe-t) + calc(10px * var(--ui)));inset-inline:0;margin-inline:auto;width:fit-content;max-width:min(92vw,430px);
  display:flex;align-items:center;gap:calc(9px * var(--ui));padding:calc(9px * var(--ui)) calc(15px * var(--ui)) calc(9px * var(--ui)) calc(11px * var(--ui));border-radius:calc(15px * var(--ui));
  background:var(--tst-bg);color:var(--tst-ink);border:1px solid var(--tst-line);box-shadow:var(--tst-shadow);
  -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);
  font-size:calc(12px * var(--fz));font-weight:700;line-height:1.65;text-align:start;
  z-index:96;opacity:0;transform:translateY(calc(-100% - 18px * var(--ui)));
  transition:opacity .18s ease,transform .34s cubic-bezier(.34,1.42,.64,1);pointer-events:none}
html[dir="ltr"] .tst{padding:calc(9px * var(--ui)) calc(11px * var(--ui)) calc(9px * var(--ui)) calc(15px * var(--ui))}.tst.show{opacity:1;transform:none}
/* إشعارٌ علويٌّ معروضٌ ⇐ التوستُ ينزل تحته بدل أن يجلس فوقه */
.tst.low{transform:translateY(calc(-100% - 18px))}
.tst.low.show{transform:translateY(58px)}
.tst__b{width:24px;height:24px;flex:0 0 auto;border-radius:999px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ok) 24%,transparent);color:var(--tst-ok)}
.tst.err .tst__b{background:color-mix(in srgb,var(--bad) 26%,transparent);color:var(--tst-bad)}
.tst.info .tst__b{background:color-mix(in srgb,var(--warn) 26%,transparent);color:var(--tst-warn)}
.tst__t{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* ════ استجابة الجوال — شاشةٌ واحدةٌ تخلُف أختَها ════
   مشروطةٌ بـ‎data-lay="stack"‎ لا بعرض الشاشة: الحكمُ يُحسب في ‎layout()‎ حيث
   يُعرف الاتجاه، فالجوّالُ بالعرض يحتفظ بلوحيه ولا يُخفى أحدُهما. */
html[data-lay="stack"] .sb{border-inline-end:0}
html[data-lay="stack"] #ab2[data-mv="thread"] .sb{display:none}
/* ── وأثناء سحب الرجوع يقوم المشهدُ لوحين: مسافرٌ فوق، وراقدٌ تحته يرتفع ──────
   «الشاشة تتحرك مع الإصبع … مشابهة لتجربة تطبيقات iOS الفخمة»، ثم: «أريد
   السحبَ أكثرَ احترافية، بطريقةٍ تُظهر الصفحةَ الخلفيةَ وكأنها بعيدةٌ قليلةٌ
   فقط، وكأنها ترتفع وتستجيب نسبياً مع السحب». وفخامتُها ليست في الحركة وحدَها
   بل في أنّ تحت المتحرِّك شيئاً، وأنّ ذلك الشيءَ **بعيدٌ ثم يقترب**.
   واللوحُ الراقدُ مرسومٌ أصلاً في الشجرة ومخفيٌّ بالوسم وحدَه — لوحُ القائمة في
   عالم العميل (‎renderSB‎ يُبنى في كلِّ رسمة)، وواردةُ المتجر أختاً للوح الطلب —
   فكشفُه أثناء الإيماءة لا يكلّف بناءً. وهيئتُه (مقاسُه وإزاحتُه وركنُه) تُكتب
   من ‎paint‎ سطراً على العقدة بنسبة ما قُطع من سفر اللوح الذي فوقه، فلا مدّةَ
   هنا ولا منحنى: انظر §5ج-ج في ‎ab2.js‎. وينطفئ الوسمُ مع الرسم الذي يهبط عليه
   الرجوعُ (‎bkDone‎)، فلا يبقى لوحان في الشجرة لحظةً. */
#ab2[data-bk]{position:relative}
html[data-lay="stack"] #ab2[data-bk="1"][data-mv="thread"] .sb{display:flex;position:absolute;inset:0;width:100%;z-index:0}
#ab2[data-bk] .cm{z-index:1}
/* والوسمُ يقول أيَّ مشهدٍ نُصِب: ‎1‎ لوحٌ راقدٌ في الشجرة يُكشَف، و‎2‎ أرضيةُ مشهدٍ
   تُنصَب لأنّ الوجهةَ ليست فيها. وبغير هذا الفرق تُكشَف القائمةُ لسحبةٍ لا تقف
   عليها — وهي «الربكة» بعينها. */
/* وواردةُ المتجر أختُ لوح الطلب في ‎.pv__row‎ — تُكشَف كما تُكشَف القائمة */
/* والمسرحُ يقصُّ ما يفيض عنه: إزاحةُ المنظور تدفع طرفَ اللوح الراقد خارجَ صندوقه
   بقدرها (‎.125‎ من عرضه في الذروة)، وهو في عالم العميل يخرج عن الشاشة فلا يُرى،
   أمّا في المتجر فيقع على شريط الأيقونات — والشريطُ ثابتٌ في مكانه بحقّ، لا
   يمشي تحته لوحٌ ولا يمشي فوقه. */
#ab2[data-bk] .pv__row{position:relative;overflow:hidden}
#ab2[data-bk] .pdw{position:relative;z-index:1}
html[data-lay="stack"] #ab2[data-bk="1"][data-pmv="detail"] .inb{display:flex;position:absolute;inset:0;width:100%;border-inline-end:0;z-index:0}
/* وما لا لوحَ له في الشجرة يسافر لوحُه الأكبرُ فوق مسرحه */
#ab2[data-bk] .pv__stage{position:relative;overflow:hidden}
#ab2[data-bk] .pv__main{position:relative;z-index:1}
/* اللوحُ الراقدُ بطاقةٌ ما دام بعيداً: ركنُه يُكتب بالبكسل من ‎paint‎ وينفتح إلى
   صفرٍ حين يبلغ مكانَه، و‎overflow‎ هو ما يجعل الركنَ يُرى على ما فيه. */
#ab2[data-bk="1"] .sb,#ab2[data-bk="1"] .inb,.bkgnd{overflow:hidden;box-shadow:0 20px 52px rgba(0,0,0,.18)}
/* الحجابُ فوق المشهد الراقد كلِّه لا فوق اللوح وحدَه: لو أظلم اللوحُ وحدَه لقرأت
   العينُ بطاقةً معتمةً على أرضيةٍ ساطعة، لا مشهداً بعيداً يقترب. */
.bkdim{position:absolute;inset:0;z-index:0;background:#000;opacity:0;pointer-events:none}
/* وأرضيةُ المشهد حيث لا لوحَ في الشجرة نعود إليه — «العروضُ غير المقبولة»،
   ومحادثةُ عرضٍ فُتحت من داخل الطلب، وصفحاتُ سكّة المتجر: سطحٌ بلون الصفحة
   بحدِّه وركنه يُركَن ويرتفع كاللوح تماماً، ولا يدّعي محتوىً ليس عنده. */
.bkgnd{position:absolute;inset:0;z-index:0;background:var(--bg);border:1px solid var(--line);pointer-events:none}
html[data-lay="stack"] #ab2[data-mv="list"] .cm{display:none}
html[data-lay="stack"] #ab2[data-pmv="detail"] .inb{display:none}
html[data-lay="stack"] #ab2[data-pmv="list"] .pdw{display:none}
html[data-lay="stack"] .cp{padding-top:calc(18px * var(--ui))}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
}

/* ── شارةُ الموقع في صفّ أدوات المؤلّف ────────────────────────────────────────
   بجانب المشبك والمايك لا في سطرٍ لنفسها: صفُّ الأدوات هو «ما أضيفه إلى طلبي»،
   والموقعُ منه. رقاقةٌ باهتةٌ ما لم يُختَر شيء، وبلون الهوية متى اختير — فيُعرف
   من طرف العين أوُضِع الموقعُ أم لا بلا قراءة. والنقطةُ الصغيرةُ في طرفها علامةُ
   دبّوسٍ دقيقٍ محدَّد. */
.cp__loc{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));min-width:0;max-width:calc(170px * var(--ui));
  height:calc(30px * var(--ui));padding:0 calc(11px * var(--ui));border-radius:999px;
  border:1px dashed var(--line2);background:transparent;color:var(--ink2);
  font-size:calc(11px * var(--fz));font-weight:500;cursor:pointer;font-family:inherit;
  transition:background .16s,border-color .16s,color .16s}
.cp__loc>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp__loc svg{flex:0 0 auto;opacity:.7}
.cp__loc.on{border-style:solid;border-color:color-mix(in srgb,var(--acc) 45%,transparent);background:var(--acc-t);color:var(--acc-ink)}
.cp__loc.on svg{opacity:1}
.cp__loc:active{transform:scale(.96)}
.cp__locg{width:calc(5px * var(--ui));height:calc(5px * var(--ui));border-radius:999px;background:var(--acc);flex:0 0 auto}
@media (hover:hover) and (pointer:fine){
  .cp__loc:hover{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
}

/* ═══ دفعة ٢٠٢٦-٠٨-٢٠ب: الريل تايم، الإيماءات، المؤلّف العمودي، الأرقام ═══ */
/* المؤلّف عموديّ: الكتابة تبدأ فوق، والمشبك والمايك والإرسال صفٌّ تحتها */
.cp__box--col{flex-direction:column;align-items:stretch;gap:calc(2px * var(--ui));padding:calc(10px * var(--ui)) calc(14px * var(--ui)) calc(8px * var(--ui))}
html[dir="ltr"] .cp__box--col{padding:calc(10px * var(--ui)) calc(14px * var(--ui)) calc(8px * var(--ui))}
.cp__taw{position:relative;display:flex;width:100%}
.cp__box--col textarea{width:100%;min-height:2.6lh;max-height:9lh;padding:calc(2px * var(--ui)) calc(2px * var(--ui)) calc(6px * var(--ui))}
/* ═══ التلميحُ يجلس حيث سيجلس الحرفُ الأوّل، ويحتلّ ما يحتلّه ═══════════════
   كان يُوضَع بأرقامٍ من عنده — ‎4px‎ بدايةً و‎4px‎ علوّاً و‎18px‎ نهايةً موروثةً من
   الشكل الأفقيِّ المتقاعد — وحشوةُ الحقل تحته ‎2px‎، فالفرقُ يكبر مع ‎--ui‎ ولا
   ينطبق التلميحُ على مكان الكتابة عند تكبير الخطّ. والنهايةُ ‎18px‎ كانت تسلبه
   من عرضه ما لا يحتاجه الحقلُ أصلاً.
   الآن حدودُه حدودُ صندوق النصّ حرفاً (‎2px‎ في الجهات الثلاث) وارتفاعُ سطره
   ارتفاعُ سطر الحقل (‎1.7‎)، فيقع الحرفُ المكتوبُ فوق التلميح بلا إزاحة.
   ويلتفّ سطرَين بدل أن يُقصّ بثلاث نقاطٍ في سطرٍ واحد: الحقلُ يحجز ‎2.6‎ سطرٍ
   على أي حال، والتلميحُ الطويلُ عند «أكبر» كان يُقرأ نصفَه — «مثال: سبّاك يركّب
   سخاناً في حي الياسمين…» ويسقط ما بعدها. سطران يسعانه كاملاً في المقاسات كلِّها. */
.cp__box--col .cp__ph{inset-inline:calc(2px * var(--ui));top:calc(2px * var(--ui));line-height:1.7;
  white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.cp__acts{display:flex;align-items:center;gap:calc(7px * var(--ui));padding-top:calc(6px * var(--ui));border-top:1px solid color-mix(in srgb,var(--line) 62%,transparent)}
.cp__att{display:flex;gap:calc(7px * var(--ui));flex-wrap:wrap;padding:calc(7px * var(--ui)) calc(2px * var(--ui)) calc(2px * var(--ui))}
.cp__th{position:relative;width:calc(52px * var(--ui));height:calc(52px * var(--ui));border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--fill);flex:0 0 auto}
.cp__th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cp__th--busy{display:flex;align-items:center;justify-content:center}
/* إزالةُ الصورة المرفقة ١٧px — أصغرُ من أن يُصاب. والمصغَّرةُ نفسُها ليست زرّاً،
   فالتوسيعُ فوقها لا يسلب نقرةً من أحد. ولا يتجاوز ٥٢px لأنّ ‎.cp__th‎ يقصّ
   ما خرج (‎overflow:hidden‎) — فهو ركنٌ أوسعُ لا مربّعٌ كامل. */
.cp__thx{position:absolute;top:calc(3px * var(--ui));inset-inline-start:calc(3px * var(--ui));width:calc(17px * var(--ui));height:calc(17px * var(--ui));border-radius:999px;border:0;display:flex;align-items:center;justify-content:center;background:rgba(10,13,19,.62);color:#fff;cursor:pointer;padding:0}
.cp__thx::after{content:"";position:absolute;inset:calc(-7px * var(--ui))}
.cp__dt{font-size:calc(14.5px * var(--fz));font-weight:700;line-height:1.6}
.cp__hint{font-size:calc(10.5px * var(--fz));color:var(--ink3)}
.cp__draft--clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.cp__card--resume{border-style:dashed}
.cp__opt.on{background:var(--acc-t);border-color:color-mix(in srgb,var(--acc) 45%,var(--line));color:var(--acc-ink)}

/* فقاعةُ الإضافة — ابنةُ الأصل لا شقيقتُه */
/* ── والإضافةُ فقاعةٌ كاملةُ اللون لا ظِلُّ فقاعة ────────────────────────────
   كانت أرضيّتُها مزيجاً (‎--me‎ بـ٦٢٪ فوق ‎--surf‎)، فتُقرأ باهتةً كأنّها مسوّدةٌ
   أو رسالةٌ لم تصل. وهي كلامُ صاحب الطلب نفسِه على طلبه — لا درجةَ أدنى فيه.
   أمرُ صاحب المنصّة (٢٠٢٦-٠٨-٢٥): «الإضافات لا أريدها بلون فقاعاتٍ باهتة بل
   لون فقاعةٍ عادي». فاللونُ لونُ ‎.bq‎ نفسُه، ويبقى التمييزُ حيث لا يكلّف
   قراءةً: حشوةٌ أضيق، وركنٌ أحدُّ، وشارةُ «إضافة (n)» بعلامةِ زائد. وحبرُها
   ‎--me-ink‎ كما ورثته — وهو على ‎--me‎ الكاملة أوضحُ منه على المزيج. */
.bq--add{padding:calc(10px * var(--ui)) calc(13px * var(--ui));border-radius:14px 4px 16px 16px;background:var(--me)}
.bq--add .bq__t{font-size:calc(13px * var(--fz))}
.pd__updx{font-size:calc(12px * var(--fz));line-height:1.8;color:var(--ink)}

/* شريطُ الرد/التعديل فوق حقل الكتابة */
.rpb{display:flex;align-items:center;gap:calc(8px * var(--ui));max-width:calc(820px * var(--ui));margin:0 auto calc(6px * var(--ui));padding:calc(7px * var(--ui)) calc(11px * var(--ui));border-radius:12px;border:1px solid var(--line);background:var(--fill);animation:var(--fx-rise) .24s cubic-bezier(.2,.8,.3,1) both}
.rpb__k{display:flex;align-items:center;gap:calc(7px * var(--ui));min-width:0;flex:1;font-size:calc(11px * var(--fz));color:var(--ink2)}
.rpb__q{display:flex;flex-direction:column;min-width:0}
.rpb__q b{font-size:calc(10px * var(--fz));color:var(--acc-ink)}
.rpb__q bdi{font-size:calc(11.5px * var(--fz));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.rpb__x{width:calc(22px * var(--ui));height:calc(22px * var(--ui));border-radius:999px;border:0;background:transparent;color:var(--ink3);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;padding:0}
@media (hover:hover) and (pointer:fine){
  .rpb__x:hover{background:var(--fill2);color:var(--ink)}
}

/* اقتباسُ الرد داخل الفقاعة + وسمُ التعديل + إبرازُ الأصل */
.mq{display:flex;flex-direction:column;gap:calc(1px * var(--ui));align-items:flex-start;width:100%;margin-bottom:calc(6px * var(--ui));padding:calc(6px * var(--ui)) calc(9px * var(--ui));border:0;border-inline-start:2.5px solid var(--acc);border-radius:8px;background:color-mix(in srgb,var(--acc) 7%,transparent);cursor:pointer;text-align:start;font-family:inherit;color:inherit}
.mq__n{font-size:calc(9.5px * var(--fz));font-weight:700;color:var(--acc-ink)}
.mq bdi{font-size:calc(11px * var(--fz));color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.bm .mq,.bq .mq{border-inline-start-color:var(--me-ink);background:color-mix(in srgb,var(--me-ink) 9%,transparent)}
.bm .mq__n,.bq .mq__n{color:var(--me-ink)}
.bm .mq bdi,.bq .mq bdi{color:color-mix(in srgb,var(--me-ink) 80%,transparent)}
/* نسخةُ القراءة (بوبُ السياق): الاقتباسُ يُقرأ ولا يقفز — لا مِرساةَ خلف نافذة */
.mq--ro{cursor:default}
.m__ed{font-size:calc(9px * var(--fz));opacity:.75;font-style:italic}
.m.bye{opacity:0;transform:translateY(4px) scale(.97);transition:opacity .18s ease,transform .18s ease}
.m.hl>.bm,.m.hl>.bt,.m.hl>.bq{animation:ab-ping 1.5s ease-out 1}
/* ═══ انبثاقُ الفقاعة — من جنبها كواتساب، مرّةً واحدةً ساعةَ تولد ═══════════════
   الرسالةُ الجديدةُ تنبثق من زاويتها الحادّة — ذيلِ الفقاعة على حافّة صاحبها —
   مقياساً من ‎.8‎ وصعوداً يسيراً على ارتدادة ‎--ez-b‎: ربعُ ثانيةٍ تُحَسّ باليد
   ولا تؤخِّر عيناً. والذيلُ أعلى-يمين لفقاعتي وأعلى-يسار لفقاعة الآخر وبطاقةِ
   العرض (‎.oc‎ — زاويتُها الحادّةُ زاويةُ ‎.bt‎ نفسُها)، وينقلبان مع اتجاه الكتابة
   كانقلاب زواياها في ‎§الفقاعات‎ أعلاه.
   والوسمَ ‎m--in‎ يمنحه ‎bubNew‎ في ab2.js مرّةً لكلِّ رسالة، والحركةُ تحت
   ‎.nofx‎ عمداً — مقلوبُ مفتاح البيت وقصدُه معاً: الرسمُ الخلفيُّ الموسومُ به
   هو بعينه لحظةُ وصولِ رسالةٍ والخيطُ قائمٌ أمام صاحبه، فتنبثق وحدَها ولا
   يُرقَّص الخيط؛ وفتحُ الخيط لوحٌ بلا ‎nofx‎ وحركتُه انتقالُ الصفحة — ولا
   تُركَب حركةٌ فوق انتقال، فيدخل التاريخُ كلُّه ساكناً.
   والانزياحةُ من تحتٍ تُقصّها حافّةُ المُمَرِّر المثبَّتِ قاعُه: فتُرى الفقاعةُ
   تطلع من رصيف الكتابة نفسِه — طريقَ الكلمة لا طريقاً مرسوماً. */
.m--in>.bm{transform-origin:top right}
.m--in>.bt,.m--in>.oc{transform-origin:top left}
html[dir="ltr"] .m--in>.bm{transform-origin:top left}
html[dir="ltr"] .m--in>.bt,html[dir="ltr"] .m--in>.oc{transform-origin:top right}
.nofx .m--in>.bm,.nofx .m--in>.bt,.nofx .m--in>.oc{animation:ab-bubin .24s var(--ez-b) backwards}
@keyframes ab-bubin{from{opacity:0;transform:translateY(7px) scale(.8)}}
[data-motion="هادئ"] .m--in>.bm,[data-motion="هادئ"] .m--in>.bt,[data-motion="هادئ"] .m--in>.oc{animation:none!important}
.rp-arm{box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 35%,transparent)}

/* قانونُ المؤسس: التحديدُ ممنوعٌ في المنصة كلِّها — لا تظليلَ بالأصابع الطويلة ولا قوائمَ
   نظامٍ دخيلة. البابُ الوحيد: «تحديد جزء من النص» من قائمة التعليق المطوّل يفتح رسالتَها
   وحدَها (sel-on) وينغلق بأول لمسةٍ خارجَها. حقولُ الكتابة قابلةٌ للتحديد بطبيعتها. */
body{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
input,textarea{user-select:text;-webkit-user-select:text}
.bt__x.sel-on,.bm__x.sel-on,.bq__t.sel-on{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}
/* التغميمة: عتمة تُبرز نسخة الفقاعة في موضعها والقائمة بجوارها */
.md--spot{background:color-mix(in srgb,var(--ink) 32%,transparent);backdrop-filter:none}
.spot__b{position:fixed;z-index:2;pointer-events:none;animation:ab-spot .22s cubic-bezier(.2,.8,.3,1) both}
.spot__b .bm,.spot__b .bt{box-shadow:0 10px 34px rgba(0,0,0,.22);max-width:none;width:100%}
.spot__m{z-index:3;width:min(78vw,264px * var(--ui));animation:ab-pop .2s cubic-bezier(.2,.8,.3,1) .05s both}
@keyframes ab-spot{from{transform:scale(1)}to{transform:scale(1.025)}}

/* التعليقُ المطوّل: انكماشٌ مهذّب أثناء الإمساك */
.lp-hold{transform:scale(.965);filter:brightness(.985);transition:transform .42s cubic-bezier(.2,.8,.3,1),filter .42s ease}
/* الطبقةُ صمّاءُ ما دامت الأصبعُ التي فتحتها نازلة — فلا يقع أمرٌ بالأصبع نفسِها */
#ab2mdl.lp-deaf{pointer-events:none}
/* التركيزُ البرمجيُّ عند الفتح كان يرسم إطاراً أسودَ حول أول خيار، فيُقرأ
   «تحديداً غريباً» على خيارٍ لم يُلمَس. الحاويةُ هي التي تُركَّز الآن (‎md__c‎
   بـ ‎tabindex="-1"‎) فيسمعها قارئُ الشاشة بلا إطارٍ يُرى. */
.md__c:focus,.md__c:focus-visible,.spot__m:focus,.spot__m:focus-visible{outline:none}

/* حلقاتُ ‎nu--off/msg/both‎ حول سهم الكرت رُفعت: ثلاثُ حركاتٍ لا نهائيةٍ وثلاثُ
   قواعدَ لم يكن يطلقها سطرٌ واحدٌ في التطبيق — صنفٌ لا يكتبه أحد. وعلامةُ الخبر
   (‎newsMark‎) تحمل الخبرَ نفسَه بشكلها ولونها، فلا ثانيةَ لها. */

/* المجموعةُ الموسّعة: إطارٌ منحنٍ خفيفٌ شفيف — فالعروضُ أبناءُ الطلب لا طلباتٌ أخرى */
/* إطارُ الفتح يُرسم على طبقةٍ خلفيةٍ تتمدّد للخارج — وصندوقُ الصفِّ نفسِه لا
   يتغيّر قيد أنملة. كان ‎.tr.open‎ يضيف حشواً (٣px) وهامشاً (٣px)، فينزاح الكرتُ
   وزرُّ التوسيع عن مكانَيهما لحظةَ الفتح ويُدفع ما تحته. الآن يتبدّل اللونُ
   وحدَه، فيثبت كلُّ شيءٍ قبل الفتح وبعده. (‎.sb__list‎ يحمل حشواً بمقدار البروز
   حتى لا يقصَّ ‎overflow‎ الإطارَ من أطرافه.) */
.tr{position:relative;border-radius:14px}
.tr::before{content:'';position:absolute;inset:calc(-3px * var(--ui)) calc(-3px * var(--ui)) calc(-5px * var(--ui));border-radius:14px;border:1px solid transparent;background:transparent;pointer-events:none;transition:border-color .28s ease,background-color .28s ease}
.tr>*{position:relative}
.tr.open::before{border-color:color-mix(in srgb,var(--acc) 22%,transparent);background:color-mix(in srgb,var(--acc) 4%,transparent)}

/* رقاقةُ الترتيب غادرت شريطَ الحالات إلى صفِّ البحث (‎.srt‎ أعلاه) بأمر صاحب
   المنصّة: «وضع الأحدث/الأقدم على يسار حقل البحث … وعند الـScroll يطوى ويختفي
   معه». ولم يبقَ لها هنا سطر. */

/* ═══ السحبُ للتحديث — الصفحةُ تأتي مع الأصبع ═══════════════════════════════
   الشكلُ القديمُ كان يحرّك شيئاً واحداً: قرصاً ينزل فوق قائمةٍ مسمّرةٍ في
   مكانها. ذلك تشغيلُ أداةٍ ملصوقةٍ بالزجاج لا سحبُ سطح — لا وزنَ في الإيماءة،
   ولا شيءَ يرتدّ، ولا شيءَ يبقى مفتوحاً بينما تجري الجولة.
   الآن يركب محتوى المُمَرِّر السحبَ: كلُّ ابنٍ مباشرٍ يحمله التحويلُ نفسُه،
   مكتوباً سطراً من ‎wirePTR‎ (صفوفُ القائمة، أو ‎.th__in‎ في المحادثة). وهو
   ‎transform‎ لا ‎padding‎ لأنّ التحويلَ لا يمسّ ‎scrollHeight‎ فلا ينزلق موضعُ
   التمرير تحت الأصبع.
   والمؤشِّرُ صندوقان، ولا بدّ أن يكونا اثنين. ‎.ptr‎ نافذةٌ ساكنةٌ مثبّتةٌ حيث
   يبدأ المحتوى — لا عند حافّة المُمَرِّر: هذه المُمَرِّراتُ تدفع حشوةً علويّة،
   وصندوقٌ عند الصفر يُعلِّق القرصَ فوقها. و‎overflow‎ النافذةِ — لا المُمَرِّر —
   هو ما يقصّ، لأنّ الخطَّ المقصودَ بالقصّ هو حافّةُ المحتوى تلك. و‎.ptr__rider‎
   وحدَه ما يتحرّك داخلها، محمولاً بالتحويل نفسِه الذي يحمل المحتوى، فيبقى
   أسفلُ القرص على مسافةٍ ثابتةٍ فوق حافّة المحتوى طولَ الطريق. فالسحبُ إذاً
   يكشف القرصَ بدل أن يُطيّره فوق القائمة: عند ١٠ بكسل ترى عشرَه الأسفل، وعند
   ٦٤ تراه كلَّه.
   والأسفارُ لا تعيش في هذا الملفّ، وذلك هو الإصلاح: كلُّ سفرٍ — سفرُ الأصبع
   والاستقرارُ والعودة — يكتبه مُكامِلُ النابض إطاراً إطاراً في ‎ab2.js‎، فلم
   يبقَ توقيتٌ تعلنه ورقةُ الأنماط إلا غيابُه، و‎ptrShift()‎ يعلنه سطرياً
   و‎!important‎ لأنّ سُلَّمَ الضغط والحركاتِ المملوءةَ تعلو على الإعلان السطريِّ
   العاديّ. */
.ptr-host{position:relative}
/* ‎inset-block-end:0‎ لا ‎height:100%‎ — قمّةُ النافذة مدفوعةٌ إلى حافّة المحتوى
   (يكتبها ‎wirePTR‎)، فصندوقٌ بارتفاعٍ كاملٍ يتدلّى بالمقدار نفسِه خلفَ قاع
   المُمَرِّر، والصندوقُ المطلقُ داخلَ مُمَرِّرٍ يُحتسب في فائضه القابل للتمرير:
   فتنمو القائمةُ بمقدار الإزاحة لحظةَ بدء السحب. تثبيتُ الحافّتين يجعل النافذةَ
   منطقةَ المحتوى المرئيّةَ بالضبط. */
.ptr{position:absolute;inset-inline:0;inset-block-end:0;overflow:hidden;z-index:6;pointer-events:none}
/* مركونٌ فوق حافّة النافذة فيختفي كلَّه في السكون.
   ══ عمودٌ: الكلمةُ فوق القرص، وكلاهما في منتصف السطر ════════════════════════
   كانت الكلمةُ جارةَ القرص في صفٍّ واحد، فكان نصفُ السطر كلَّ ما تسعه — ‎١٢٠‎
   بكسلاً على أضيق شاشة — وكانت الجملُ تُقصَّر لتدخله. وفوقَه السطرُ كلُّه لها،
   والقرصُ يبقى حيث كان: في منتصف السطر تماماً، لا يزحف بكسلاً مهما طالت الكلمةُ
   أو قصرت، لأنّ الطولَ صار يمتدّ في محورٍ آخر.
   و‎-52ui - 17fz‎ ركنُ العمود، محسوبٌ لا مقدَّر: ارتفاعُه ‎17fz‎ (سطرُ الكلمة) +
   ‎5ui‎ (الفُرجة) + ‎36ui‎ (القرص)، وتحته ‎11ui‎ فُسحةٌ تفصل أسفلَ القرص عن حافّة
   المحتوى. فيختفي العمودُ كلُّه في السكون، ويستقرّ عند خطِّ التسليح (‎PTR_ARM‎)
   وفوقَه وتحته فُسحتان متقاربتان.
   والكشفُ من أسفلَ إلى أعلى: القرصُ يظهر أوّلاً ثمّ تنكشف الكلمةُ فوقه — وهو
   ترتيبٌ صحيحٌ في نفسه، إذ يُرى المتحرّكُ قبل أن يُقرأ الخبر. */
.ptr__rider{position:absolute;inset-inline:0;
  inset-block-start:calc(-52px * var(--ui) - 17px * var(--fz));
  display:flex;flex-direction:column;align-items:center;row-gap:calc(5px * var(--ui))}
/* ═══ القرصُ أربعُ عُقَدٍ، مقسومةً بمن يملك كلَّ خاصيّة ═══
   كان عقدةً واحدةً تحمل الرمز، ولذلك لم يكن التسليحُ يُقال إلا لوناً: السحبُ
   يكتب دورانَ الرمز في ‎transform‎ كلَّ إطار، فالتكبيرُ المقصودُ للعمق كان
   سينازعه الخاصيّةَ نفسَها، والقوسُ لا موضعَ له. الآن ‎.ptr__sp‎ يأخذ التكبير،
   و‎.ptr__gl‎ الدوران، و‎.ptr__ring‎ الكسحَ غيرَ المحدَّد، و‎.ptr__arc‎ الشرطة —
   أربعُ خاصيّاتٍ في أربع عُقَد، بلا نزاع.
   والقوسُ هو الجزءُ الذي كان ناقصاً: القرصُ القديمُ لم يكن يقول شيئاً حتى
   يُعبَر الخطُّ، ثم يقوله بانقلاب لون — إعلانٌ يقع بعدَ القرار الذي كان يُفترض
   أن يُنيره. القوسُ يُغلق من ٠ إلى ٣٦٠ عبر السحب، فتُقرأ المسافةُ الباقيةُ
   والإبهامُ لا يزال يقرّرها.
   عقدٌ صلبٌ مع ‎ab2.js‎: ‎stroke-dasharray‎ أدناه ‎94.2 = 2πr‎ عند ‎r=15‎، و‎PTR_C‎
   يُزيح على الرقم نفسِه — الإزاحةُ بلا الشرطةِ التي تُقاس منها بلا معنى، فـ
   «التمام» قيمةٌ واحدةٌ تعيش في ملفّين: حرِّكْ إحداهما وعليك تحريكُ الأخرى. */
/* وصفةُ القرص العائم في أبيلي حرفاً — هي وصفةُ ‎.tobot‎ نفسُها (سطحٌ، شعرةٌ،
   ظلٌّ، ورمزٌ بلون ‎--ink2‎)، فلا يهبط في القائمة جسمٌ من مفرداتٍ أخرى. */
.ptr__sp{position:relative;display:grid;place-items:center;width:calc(36px * var(--ui));height:calc(36px * var(--ui));border-radius:999px;
  background:var(--surf);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink2);
  transition:box-shadow .28s var(--ez),color .18s ease;
  transform-origin:50% 50%;transform:scale(.8)}
.ptr__gl{display:grid;place-items:center;transform-origin:50% 50%;transition:opacity .18s ease}
/* ‎-1px‎ لا ‎0‎، وهي شعرةُ حدِّ القرص: الصندوقُ المطلقُ يُقاس من حافّة الحشو —
   داخلَ الحدِّ — فكان إطارُ القوس ‎36‎ في نافذةٍ عرضُها ‎34‎، وثلاثةُ إعلاناتٍ
   (بدءٌ ونهايةٌ وعرضٌ) لا تستقيم معاً فيُهمَل أحدُها: يسقط ‎inset-inline-end‎ في
   العربية، فينزاح القوسُ بكسلاً عن مركز القرص قطرياً — لا يُقاس بالعين إلّا
   بأنّ الحلقتين لا تتراكزان، وهو المشتكى منه. وبالسالب تنطبق الحافّتان على
   حدِّ القرص تماماً: ‎-1 + 36ui + -1 = 36ui - 2‎ عرضُ نافذة الحشو حرفاً، فلا
   إعلانَ يُهمَل ولا فرقَ بين اتجاهَي القراءة. والحدُّ شعرةٌ لا يقيسها ‎--ui‎،
   فالرقمُ ثابتٌ في كلِّ المقاسات. */
.ptr__ring{position:absolute;inset:-1px;width:calc(36px * var(--ui));height:calc(36px * var(--ui));transform:rotate(-90deg)}
/* مسارٌ باهتٌ يقرأ عليه القوسُ تقدّمَه — شعرةٌ من شعرات الهويّة نفسِها */
.ptr__trk{fill:none;stroke:var(--line);stroke-width:2.5}
.ptr__arc{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:94.2;stroke-dashoffset:94.2}
/* إشارةُ التسليح: القوسُ أُغلِق للتوّ، فيجيب القرصُ بعمقٍ ولون — لا بحلقةٍ
   ثانيةٍ لحالةٍ واحدة. حدُّ القرص يبقى شعرةً محايدةً عمداً: حلقتان متراكزتان
   تُضاءان معاً تقولان الشيءَ نفسَه مرّتين وتُثقلان جسماً صغيراً. و‎--shadow2‎ هو
   الارتفاعُ الذي يعلو به كلُّ سطحٍ في أبيلي حين ينفصل عن الورقة. */
.ptr--ready .ptr__sp,.ptr--spin .ptr__sp{color:var(--acc-ink)}
.ptr--ready .ptr__sp,.ptr--done .ptr__sp,.ptr--fail .ptr__sp{box-shadow:var(--shadow2)}
/* أثناء الجولة يكون القوسُ هو الدوّار، فيتنحّى الرمزُ بدل أن يدور تحته — شيءٌ
   واحدٌ يتحرّك لا اثنان. والكسحُ يطول ويقصر وهو يدور (شرطةٌ وإزاحةٌ على دورةٍ
   ثابتة)، وهو ما يمنع الانتظارَ غيرَ المحدَّد من أن يُقرأ ساعةً متوقّفة كما
   يُقرأ القوسُ الجامدُ الطول. */
.ptr--spin .ptr__gl{opacity:0}
.ptr--spin .ptr__ring{animation:ab-ptrsweep 1.25s linear infinite}
.ptr--spin .ptr__arc{animation:ab-ptrarc 1.25s ease-in-out infinite}
@keyframes ab-ptrsweep{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
@keyframes ab-ptrarc{
  0%{stroke-dasharray:3 91.2;stroke-dashoffset:0}
  50%{stroke-dasharray:62 32.2;stroke-dashoffset:-20}
  100%{stroke-dasharray:3 91.2;stroke-dashoffset:-88}}
/* النتيجةُ تتكلّم بلغة الحالات في أبيلي: ‎--ok‎ للنجاح و‎--bad‎ للتعذّر — وهما
   اللونان اللذان تقولهما كلُّ علامةٍ وشارةٍ في التطبيق. */
.ptr--done .ptr__arc{stroke:var(--ok)}
.ptr--done .ptr__sp{color:var(--ok)}
.ptr--fail .ptr__arc{stroke:var(--bad)}
.ptr--fail .ptr__sp{color:var(--bad)}
.ptr__gl.is-result svg{animation:ab-ptrpop .22s var(--ez-b)}
@keyframes ab-ptrpop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
/* ══ كلمةُ الفجوة — القوسُ نبضٌ والكلمةُ خبر ═════════════════════════════════
   القرصُ وحدَه يقول «شيءٌ يجري» ولا يقول ما هو: تدور الحلقةُ ثمّ تنقلب إلى ✓،
   وهي العلامةُ نفسُها سواءٌ وصل سبعةُ طلباتٍ أو لم يصل شيء — فينزل القارئُ بعينه
   يعدّ الصفوفَ ليعرف هل تغيّر شيء. والكلمةُ تُغني عن العدّ. أمّا الدوّارُ فيبقى
   كما هو بجانبها: هو الحياةُ التي تقول إنّ العملَ جارٍ الآن، ولا يُغني أحدُهما
   عن الآخر.
   ووزنُها ‎600‎ لا ‎700‎: خبرٌ يُقرأ في فجوةٍ ارتفاعُها ٦٤ بكسلاً، لا عنوان. */
   والشفافيةُ ليست هنا: يكتبها ‎puck()‎ إطاراً إطاراً من مقدار السحب (‎§5ج-ب‎)،
   فتشتدّ الكلمةُ وهي تنكشف وتبلغ تمامَها عند خطِّ التسليح، وتبقى تامّةً ما دامت
   الصفحةُ ثابتةً عليه طوالَ الجولة، وتخفت مع عودتها. سطرٌ من ورقةٍ لا يعرف أين
   الأصبعُ الآن.
   و‎line-height‎ بمقاسٍ صريح (‎17fz‎) لا بنسبة: ركنُ العمود أعلاه محسوبٌ على هذا
   الرقم بعينه، فنسبةٌ تتبدّل بالخطِّ تُزحزح الركنَ عن حسابه. */
/* و‎min-block-size‎ لأنّ السطرَ يُقاس وهو فارغ: ‎ensure()‎ يبني العقدةَ خاويةً ثمّ
   يقيس أين يبدأ سطرُها ليعرف من أين تشتدّ، وصندوقٌ بلا محتوىً لا يفتح سطراً
   فيُقاس صفراً. والركنُ في الأعلى محسوبٌ على هذا الرقم نفسِه. */
.ptr__say{min-block-size:calc(17px * var(--fz));max-inline-size:calc(100% - 24px * var(--ui));
  font-size:calc(11.5px * var(--fz));font-weight:600;line-height:calc(17px * var(--fz));color:var(--ink2);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* والتبدّلُ يُرى: كلمةٌ تحلّ محلَّ كلمةٍ في إطارٍ واحدٍ تُقرأ خطأً في الطباعة، لا
   طوراً جديداً. صعودٌ ثلاثةُ بكسلاتٍ مع ظهورٍ — وهي حركةُ الدخول الصغرى نفسُها
   في أبيلي، مقصورةً على هذه العقدة. */
.ptr__say.is-in{animation:ab-ptrsay .26s var(--ez) both}
/* ولا ‎opacity‎ في هذه الحركة: تلك يكتبها السحبُ سطراً في كلِّ إطار، وحركةٌ تمسّها
   تعلو على السطر (الحركاتُ فوق الإعلان العاديّ) فتُطفئ الكلمةَ ثمّ تُشعلها في
   منتصف سحبةٍ ماضية. الارتفاعُ وحدَه يقول «هذه كلمةٌ أخرى». */
@keyframes ab-ptrsay{from{transform:translateY(calc(3px * var(--ui)))}to{transform:none}}
/* ألوانُ النتيجة تتبع القرصَ حرفاً: ‎--bad‎ للتعذّر، ولونُ الهوية لِما وُجد فعلاً.
   و«لا جديد» يبقى بحبر ‎--ink2‎ — خبرٌ صحيحٌ لا حدثٌ يُحتفى به. */
.ptr--fail .ptr__say{color:var(--bad)}
.ptr--news .ptr__say{color:var(--acc-ink);font-weight:700}
[data-motion="هادئ"] .ptr--spin .ptr__ring,[data-motion="هادئ"] .ptr--spin .ptr__arc,
[data-motion="هادئ"] .ptr__gl.is-result svg,[data-motion="هادئ"] .ptr__say.is-in{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .ptr--spin .ptr__ring,.ptr--spin .ptr__arc,.ptr__gl.is-result svg,.ptr__say.is-in{animation:none!important}
}

/* ═══ الوسمُ الطازج — «هذا ما وصل للتوّ» ═══════════════════════════════════
   حركةُ الدخول (‎.rise‎) تقول «هذا الصفُّ ظهر» وتقولها في ثلث ثانيةٍ ثمّ تنقضي،
   فمن رفع عينَه لحظةَ وصولِ الطلب لا يرى منها شيئاً ولا يفرّق بعدها ما وصل الآن
   عمّا كان في القائمة منذ ساعة. فالوسمُ يبقى بعد انقضاء الحركة ستَّ ثوانٍ ثمّ
   ينطفئ من نفسه — وإلّا صار كلُّ صفٍّ في القائمة «جديداً» فلم يعد يعني شيئاً.
   وهو لونٌ لا حركة، فيصمد في الحركة الهادئة كما يصمد في الغنيّة: خبرٌ لا زينة.
   ولا يقع على ‎transform‎ بحال: هذه الصفوفُ أبناءٌ مباشرون للمُمَرِّر، والسحبُ
   يكتب تحويلَها سطراً في كلِّ إطار (‎ptrShift‎) — فأيُّ حركةٍ تمسّ ‎transform‎ هنا
   تنازعُ الأصبعَ على السطح نفسِه.
     ‎.nu‎ ....... أرضيّةٌ من لون الهوية، وشعرةٌ قائمةٌ على حافّة الصفّ. والشعرةُ
                  هي التي تصمد حين يُنتخب الصفُّ (‎.cur‎ تعلوها في الأرضيّة).
     ‎.nu--go‎ ... الانطفاء: ‎background-color‎ لا ‎opacity‎ — إخفاءُ الصفِّ كلِّه
                  بشفافيّةٍ يُطفئ نصَّه معه. والشعرةُ وحدَها تُطفَأ بالشفافيّة،
                  فلا نصَّ تحتها. */
.nu{position:relative;background:var(--acc-t)}
/* شرطةٌ في وسط الحافّة لا حدٌّ بطول الصفّ: الحدُّ الكاملُ يُقرأ إطاراً للصفِّ —
   «هذا محدَّد» — والمطلوبُ علامةٌ عليه.
   وطولُها يتبع طولَ ما هي عليه، ولا يكون رقماً واحداً: العلامةُ نفسُها تقع على
   صفِّ قائمةٍ ارتفاعُه ‎٥٨‎ بكسلاً وعلى بطاقةِ عرضٍ ارتفاعُها أربعةُ أضعافه، فشرطةٌ
   بطولٍ ثابتٍ تصلح لأحدهما وتضيع في الآخر — «الكروت الطويلة طوّله شوي».
   ‎clamp‎ يُخرجها ‎٥٢٪‎ من الارتفاع، بأرضيّةِ ‎٢٢‎ بكسلاً فلا تختفي في صفٍّ ضيّق،
   وسقفِ ‎٨٠‎ فلا تصير حدّاً في بطاقةٍ طويلة. وهي مكتوبةٌ إزاحةً لا ارتفاعاً
   (‏‎inset-block‎ للطرفين) فتتمركز بلا ‎transform‎ — والتحويلُ في هذه الشجرة
   مملوكٌ للسحب.
   ══ وتُسمّى مضايفُها ولا تُترَك عامّة ═══════════════════════════════════════
   ‎.nu::after‎ عاريةً تقع على كلِّ ما يُوسَم، وفي الشجرة ‎.kid.cont::after‎ هو خيطُ
   الفروع الذي يصل الصفَّ بما بعده — عقدةٌ زائفةٌ واحدةٌ لا تحمل شيئين. فكان
   الأخصُّ منهما يغلب: صفٌّ موسومٌ في وسط الشجرة يفقد شرطتَه، وآخِرُ صفٍّ فيها
   (بلا ‎cont‎) يفقد خيطَه — علامتان تتناوبان على مقعدٍ واحد.
   وهو تصادمٌ في التصميم قبل أن يكون في الورقة: حافّةُ صفِّ المشجّرة مشغولةٌ
   أصلاً بخيط الفروع، وخطّان رأسيّان متجاوران على بُعد بكسلاتٍ يُقرآن عطباً.
   فالشرطةُ لأصحاب الحافّة الخالية — صفُّ القائمة، وصفُّ الواردة، وبطاقةُ العرض —
   وصفُّ المشجّرة تكفيه أرضيّتُه وظرفُه. */
.tr__r.nu::after,.ir.nu::after,.oc.nu::after{content:'';position:absolute;
  inset-block:clamp(calc(50% - 40px * var(--ui)),24%,calc(50% - 11px * var(--ui)));
  inset-inline-start:calc(3px * var(--ui));
  inline-size:calc(2.5px * var(--ui));border-radius:999px;background:var(--acc);pointer-events:none}
.nu--go{animation:ab-nugo .5s var(--ez) both}
.tr__r.nu--go::after,.ir.nu--go::after,.oc.nu--go::after{animation:ab-nugob .5s var(--ez) both}
/* والانطفاءُ يعود إلى أرضيّةِ الصفِّ نفسِه لا إلى الشفافية دائماً: بطاقةُ العرض
   سطحٌ له لونٌ (‎--surf‎)، فإطفاؤها إلى شفافيّةٍ يفتح فيها ثقباً على أرضيّة
   الصفحة. و‎--nu-off‎ هو ما تعود إليه كلُّ عقدةٍ بعينها، وأصلُه الشفافيةُ لمن لا
   أرضيّةَ له. والصفُّ المُنتخَبُ يعود إلى لون انتخابه لا إلى العدم. */
@keyframes ab-nugo{from{background-color:var(--acc-t)}to{background-color:var(--nu-off,transparent)}}
@keyframes ab-nugob{from{opacity:1}to{opacity:0}}
.oc.nu{--nu-off:var(--surf)}
.tr__r.cur.nu,.ir.cur.nu,.kid.cur.nu{--nu-off:var(--acc-t)}
/* ═══ الصعودُ يُرى — انظر «الصعودُ يُرى» في ab2.js ═══════════════════════════
   الصفُّ يُوضَع حيث كان ثمّ يُترَك يعود. ‎--fd‎ يكتبها ‎flipPlay‎ على العقدة، وهي
   المسافةُ بين الموضعين لا موضعاً مطلقاً — فتصحّ في الصعود والهبوط معاً.
   وحركةٌ لا انتقال: تنتهي بنفسها ولا تترك ‎transform‎ سطريّاً ينازعه السحب. */
.nu-up{animation:ab-nuup .46s var(--ez) both}
@keyframes ab-nuup{from{transform:translate3d(0,var(--fd,0px),0)}to{transform:none}}
/* واجتماعُهما على عقدةٍ واحدةٍ ممكنٌ (صفٌّ صعد ووسمُه ينطفئ)، و‎animation‎ خاصيّةٌ
   واحدةٌ تُكتب مرّةً — فتُعلَنان معاً حيث تجتمعان وإلّا ابتلعت إحداهما الأخرى. */
.nu--go.nu-up{animation:ab-nugo .5s var(--ez) both,ab-nuup .46s var(--ez) both}
[data-motion="هادئ"] .nu-up,[data-motion="هادئ"] .nu--go.nu-up{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .nu-up,.nu--go.nu-up{animation:none!important}
}

.sb__list,.inb__list,.th{position:relative}

/* ═══ انتقالاتُ الصفحات بغير الأصبع — اللغةُ نفسُها مصغَّرةً ═══════════════════
   زرُّ الرجوع كان يتكلّم لغةً أخرى غيرَ لغة السحب: اثنتا عشرةَ بكسلاً وشعرةُ
   مقاس، بينما الأصبعُ ترفع لوحاً كاملاً من عمقه. فصار الاثنان يقولان الشيءَ
   نفسَه بدرجتين: اللوحُ الداخلُ يرتفع إلى مكانه من الجهة التي يأتي منها،
   بالنسبة نفسِها وإن كانت أصغر. والإزاحةُ بالنسبة المئوية لا بالبكسل — نسبةً
   من عرض اللوح نفسِه — فتقرأها الشاشةُ الصغيرةُ والكبيرةُ حركةً واحدة.
   والفتحُ من جهةٍ والرجوعُ من الأخرى: مكدسٌ لا يخلط اتجاهَيه. */
@keyframes ab-pgf{from{opacity:.5;transform:translateX(-7%) scale(.98)}to{opacity:1;transform:none}}
@keyframes ab-pgb{from{opacity:.45;transform:translateX(7%) scale(.98)}to{opacity:1;transform:none}}
/* وهبوطُ سحبةٍ رفعت أرضيةَ المشهد: الأرضيةُ بلغت مكانها فعلاً تحت الأصبع، فلا
   يُعاد رفعُها — يحضر المحتوى وحدَه بذوبانٍ قصيرٍ بلا إزاحةٍ تصادم ما استقرّ. */
@keyframes ab-pgr{from{opacity:0}to{opacity:1}}
/* ═══ والحشوُ ‎backwards‎ لا ‎both‎ — وإلّا جمّدت حركةٌ منتهيةٌ اللوحَ إلى الأبد ═══
   ‎both‎ يعني ‎forwards‎ معه: الحركةُ إذا انتهت أبقت آخرَ إطارٍ منها مطبَّقاً
   (‎transform:none‎)، وحركةُ الورقة تعلو على الإعلان السطريّ — فسطرُ ‎paint‎ الذي
   يكتبه سحبُ الرجوع على اللوح **لا أثرَ له**. وقِيس في متصفّحٍ حقيقيّ: يُفتَح
   الطلبُ فيلبس اللوحُ ‎pg-f‎، ثمّ ‎cm.style.transform='translate3d(-100px,0,0)'‎
   فإذا المحسوبُ ‎matrix(1,0,0,1,0,0)‎ — صفرٌ. فكانت الإيماءةُ تعمل كلُّها بلا
   حركةٍ تُرى: الأصبعُ تسحب، والنابضُ يطير، والرجوعُ يقع دفعةً واحدةً في آخر
   إطار. وهو «الرجوعُ القاسي المباشر» بحرفه، لا معايرةً تُضبَط.
   والنهايةُ هي السكونُ الطبيعيُّ للوح (‎transform:none;opacity:1‎)، فلا شيءَ
   يُحفَظ بحفظها — و‎backwards‎ يكفي لما قبل البداية. والسحبةُ التي تُدرِك حركةً
   ما تزال تجري تنزع صنفَها عن اللوح (‎bkOn‎)، فلا يتنازع سطران على عقدة. */
.pg-f{animation:ab-pgf .3s cubic-bezier(.22,.86,.28,1) backwards}
.pg-b{animation:ab-pgb .32s cubic-bezier(.22,.86,.28,1) backwards}
.pg-r{animation:ab-pgr .2s ease backwards}

/* نافذتا المعاينة وقائمة الرسالة */
/* ════ نافذةُ الإطلالة — طبقاتٌ ثلاث: ما هو، وما فيه، وما يُفعَل ════════════
   كانت قائمةَ صفوفٍ بعرض النافذة، الصفُّ منها لكلمة. والأفعالُ الستّةُ كانت
   تطلب ستَّ مئةِ بكسلٍ رأسيّ — وهي في بلاطٍ متجاورٍ سطران. */
.md__c--peek{width:min(92vw,352px * var(--ui))}
.pk{gap:calc(10px * var(--ui));padding:calc(14px * var(--ui))}
/* ── لا يُسحَق ابنٌ ليتّسع الصندوق ─────────────────────────────────────────────
   ‎.md__c‎ مرنٌ عموديٌّ بسقفٍ ومُمَرِّر، وأبناؤه مرنون يقبلون الانكماش قبل أن
   يُمرَّر. والحدُّ الأدنى التلقائيُّ (‎min-height:auto‎) يحمي الابنَ من الانكماش
   دون مقاسِ محتواه — إلّا ابناً عليه ‎overflow:hidden‎، فحدُّه صفرٌ بحكم المواصفة.
   وقد وقع ذلك حرفاً: قصُّ الوصف سطرين (‎overflow:hidden‎) جعله ينكمش إلى صفرٍ
   متى امتلأت النافذة — يختفي الوصفُ كلُّه بالضبط حين يكون أطولَ ما يكون.
   القصُّ انتقل إلى الرسم (‎pkClip‎)، وهذا السطرُ يحرس القاعدةَ نفسَها لكلِّ
   ابنٍ يأتي: لا انكماشَ، والصندوقُ يُمرَّر. */
.pk>*{flex:0 0 auto}
.pk__hd{display:flex;flex-direction:column;align-items:flex-start;gap:calc(6px * var(--ui))}
.pk__st{display:inline-flex;padding:calc(3px * var(--ui)) calc(10px * var(--ui));border-radius:999px;font-size:calc(10px * var(--fz));font-weight:700}
.pk__t{font-size:calc(14.5px * var(--fz));font-weight:700;line-height:1.65;display:block;text-align:start}
.pk__who{display:flex;align-items:center;gap:calc(10px * var(--ui))}
.pk__who .nm{display:flex;align-items:center;gap:calc(4px * var(--ui));min-width:0}
/* الحقائقُ رقائقُ متجاورةٌ تلتفّ — لا سطرٌ واحدٌ بفواصلَ نقطيّةٍ يُقرأ جملةً */
.pk__facts{display:flex;flex-wrap:wrap;gap:calc(5px * var(--ui))}
.pk__f{display:inline-flex;align-items:center;gap:calc(4px * var(--ui));max-width:100%;padding:calc(3px * var(--ui)) calc(9px * var(--ui));border-radius:999px;background:var(--fill);color:var(--ink2);font-size:calc(10.5px * var(--fz));line-height:1.6}
.pk__f svg{flex:0 0 auto;color:var(--ink3)}
.pk__f>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk__x{font-size:calc(12.5px * var(--fz));line-height:1.85;color:var(--ink2);display:block;text-align:start}
.pk__about{font-size:calc(11.5px * var(--fz));line-height:1.8;color:var(--ink3);display:block;padding-inline-start:calc(2px * var(--ui))}
.pk__add{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));align-self:flex-start;color:var(--acc-ink);font-size:calc(10.5px * var(--fz));font-weight:700}
.pk__loc{display:flex;align-items:center;gap:calc(9px * var(--ui));padding:calc(9px * var(--ui)) calc(11px * var(--ui));border-radius:12px;background:var(--fill);border:1px solid var(--line)}
.pk__loc--lock{background:transparent;border-style:dashed}
.pk__loci{flex:0 0 auto;display:grid;place-items:center;color:var(--acc-ink)}
.pk__locx{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(1px * var(--ui))}
.pk__locx b{font-size:calc(11.5px * var(--fz));font-weight:700}
.pk__locx span{font-size:calc(10px * var(--fz));color:var(--ink3);line-height:1.6}
.pk__code{display:flex;align-items:center;gap:calc(7px * var(--ui));font-size:calc(11px * var(--fz));color:var(--ink3)}
.pk__code b{font-weight:700;color:var(--ink2)}
.pk__go{display:flex;align-items:center;justify-content:center;gap:calc(7px * var(--ui));padding:calc(11px * var(--ui));border:0;border-radius:13px;background:var(--acc);color:var(--bg);font-size:calc(13px * var(--fz));font-weight:700;cursor:pointer;transition:transform .15s;font-family:inherit}
.pk__go:active{transform:scale(.97)}
/* البلاطُ: أيقونةٌ فوق كلمة، ثلاثةٌ أو أربعةٌ في الصفّ حسب ما يتّسع */
.pk__acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(74px * var(--ui)),1fr));gap:calc(6px * var(--ui))}
.pka{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:calc(5px * var(--ui));padding:calc(9px * var(--ui)) calc(4px * var(--ui));border:1px solid var(--line);border-radius:13px;background:transparent;color:var(--ink2);cursor:pointer;transition:background .16s,border-color .16s,color .16s;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .pka:hover{background:var(--fill);border-color:var(--line2)}
}
.pka:active{background:var(--fill2)}
.pka__i{display:grid;place-items:center;width:calc(30px * var(--ui));height:calc(30px * var(--ui));border-radius:10px;background:var(--fill);color:var(--ink2);transition:background .16s,color .16s}
.pka__l{font-size:calc(10.5px * var(--fz));font-weight:700;line-height:1.4;text-align:center}
.pka--on{border-color:var(--acc);color:var(--acc-ink)}
.pka--on .pka__i{background:var(--acc-t);color:var(--acc-ink)}
.pka--ok .pka__i{background:var(--ok-t);color:var(--ok)}
.pka--ok{color:var(--ok)}
.pka--bad .pka__i{color:var(--bad)}
.pka--bad{color:var(--bad)}
.mm__ex{flex:0 0 auto;font-size:calc(11.5px * var(--fz));color:var(--ink2);line-height:1.7;padding:calc(8px * var(--ui)) calc(11px * var(--ui));border-radius:10px;background:var(--fill);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* رفعُ صف الحساب والسكة عن انحناءات الجوال */
.sb__foot{padding-bottom:max(10px * var(--ui),calc(var(--safe-b) + 6px * var(--ui)))}
/* ── والشريطُ السفليُّ ثابتُ الحجم ────────────────────────────────────────────
   كان يهبط مع النزول ويعود عند السكون طمعاً في المساحة التي تُخليها عناصرُ
   سفاري السفلى. وتلك المساحةُ لا تُخلى: سفاري تُنقص شريطَها حين يمرِّر مُمَرِّرُ
   الوثيقة، وأبيلي تمرِّر ألواحاً ابنةً لا الوثيقة. فحُكم بالإلغاء («ألغِ تحرّك
   الجزء السفلي بالمتصفح … وإن لا فلا تجعل القسم يتغيّر حجمه أصلاً»)، ولم يبقَ
   من الصفِّ إلّا حاشيتُه السفلى أعلاه. */
html[data-lay="stack"] .sb__acct{transition:background .16s}
.rail{padding-bottom:max(16px * var(--ui),calc(var(--safe-b) + 12px * var(--ui)))}

/* نبضُ أيقونة الإشعار العلوي */
.ntf.show .ntf__ic{animation:ab-ping 2.4s ease-out 2}

/* لا تكبيرَ غريباً */
html{-webkit-text-size-adjust:100%}
#ab2{touch-action:manipulation}

/* ═══ دفعة الاستقرار ٢٠٢٦-٠٨-٢٠ج ═══ */
/* حبّةُ الحالة: رموزٌ لطيفةُ الألوان بدل النقاط */
.stg{width:calc(14px * var(--ui));height:calc(14px * var(--ui));flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:999px}
.stg--dot{width:calc(7px * var(--ui));height:calc(7px * var(--ui));margin-inline:calc(3.5px * var(--ui))}
.stg--blue{background:var(--bl)}
.stg--x{color:#D66A6A;background:color-mix(in srgb,#D66A6A 14%,transparent)}
.stg--ok{color:#3E9B72;background:color-mix(in srgb,#3E9B72 14%,transparent)}
[data-th="داكن"] .stg--x{color:#E89090}
[data-th="داكن"] .stg--ok{color:#79C9A2}
/* ── شاراتُ رحلة العرض (عالم المتجر) ─────────────────────────────────────────
   شكلٌ لكلِّ محطّة، ولونان لا غير: أخضرُ الهوية ما دام العرضُ معلَّقاً، وأزرقُ
   «قيد التنفيذ» بعد القبول. وكلُّها بالحرف وحدَه بلا أرضيةٍ ملوّنة — محطّاتُ
   طريقٍ لا أحكامٌ نهائية، فلا تزاحم قرصَي «مكتمل» و«ملغي» في الصفِّ نفسِه. */
.stg--tick,.stg--talk,.stg--up,.stg--undo{width:auto;min-width:calc(14px * var(--ui));background:transparent;transition:color .2s linear}
.stg--tick{color:var(--dot-mute)}          /* صحٌّ واحد: أُرسل ولم يُفتح بعد */
.stg--gr{color:var(--acc)}                 /* ما دام العرضُ معلَّقاً */
.stg--bl{color:var(--bl)}                  /* وما بعد القبول */
/* الإبهامُ لحظةُ فرحٍ لا حالٌ دائمة: أكبرُ قليلاً وأخفُّ حبراً — «خفيف لطيف» */
.stg--up{opacity:.92}
/* سحبتَ عرضك بيدك: سهمُ رجوعٍ بلون الهوية باهتاً — فعلُك أنت لا خبرٌ عنك */
.stg--undo{color:var(--acc);opacity:.6}
/* أُسنِد لغيرك: انتهاءٌ لا إلغاء — الشكلُ إكسٌ والنبرةُ رماديّة */
.stg--x.stg--mute{color:var(--dot-mute);background:var(--fill)}
/* «ردَّ العميلُ، وقرأتَ ردَّه»: الظرفُ نفسُه بحبرٍ رماديٍّ ساكن. الشكلُ يقول
   «ها هنا محادثة» واللونُ يقول «ولا شيءَ ينتظرك فيها» — فتُقرأ الحالُ بلا أن
   تُقرأ خبراً. وهو حبرُ «شاهدته» و«أُرسل ولم يُفتح» نفسُه (‎--dot-mute‎): كلُّ
   ساكنٍ في السلّم بلونٍ واحد، والهويةُ للخبر وحدَه. ولا أرضيةَ له — شارةُ محطّةٍ
   لا حكمٌ نهائيٌّ، كما في بقيّة السلّم. */
.stg--talk.stg--mute{color:var(--dot-mute)}
/* النبضةُ تقرأ لونَ النقطة نفسِه (‎currentColor‎ يُكتب معها سطراً واحداً في
   ab2.js) — إطارٌ واحدٌ يخدم الخضراءَ والرماديّة، فلا يتباعد لونُ الحلقة عن
   لون قلبها. ولا حلقةَ تبقى بعدها: النبضةُ وحدَها تقول «فيه جديد»، والساكنُ
   نقطةٌ عاريةٌ لا غير. */
@keyframes ab-pingc{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 48%,transparent)}
  75%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.pingc{animation:var(--fx-pingc) 2.4s ease-out 3}
[data-motion="هادئ"] .pingc{animation:none}
@media (prefers-reduced-motion:reduce){
  .pingc{animation:none}
}
/* ── علامةُ «فيه جديد»: بانٍ واحدٌ ولغةٌ واحدةٌ في العالمين ──────────────────
   كانت لصفِّ العميل حبّةٌ واحدةٌ تومض بثلاثة أُطُرٍ مكتوبةٍ باليد (‎ab-nMsg‎،
   ‎ab-nOff‎، ‎ab-nAB‎) وألوانٍ صريحةٍ لا تعرف لوحةَ الوضع الداكن — نبضةٌ تقول
   «فيه جديد» ولا تقول ما هو. ولصفِّ المتجر ظرفٌ ساكنٌ بلون الهوية. فالخبرُ
   الواحدُ يُقرأ في شاشةٍ نقطةً وفي أخرى ظرفاً. وأمرُ صاحب المنصّة: «نظام موحّد
   وواضح للعلامات بين الطالب ومزوّد الخدمة … بنفس المنطق في الطرفين».
   فصار: الظرفُ للرسالة (‎.stg--talk‎ + ‎mail‎)، والنقطةُ للعرض (‎.stg--dot‎)،
   ولونُهما حبرُ الحال (‎.stg--gr‎ للهوية و‎.stg--bl‎ لِما بعد القبول)، ونبضتُهما
   ‎.pingc‎ — نبضةُ كلِّ طازجٍ في المنصّة، إطارٌ واحدٌ يقرأ ‎currentColor‎ فيصحّ في
   الوضعين ولا يُكتب لونٌ مرّتين. ‎newsMark‎ في ab2.js هو البانِي الوحيدُ لهما.
   ونقطةُ الخبر تأخذ ملأَها من حبرها فيتّحد قلبُها وحلقتُها. */
.stg--dot.stg--gr,.stg--dot.stg--bl{background:currentColor}

/* بدجُ «مخفي» — خارجَ الطلب وداخله */
.flag--hid{background:color-mix(in srgb,var(--ink3) 16%,transparent);color:var(--ink2);padding:calc(1px * var(--ui)) calc(8px * var(--ui));border-radius:999px;font-size:calc(9.5px * var(--fz));font-weight:700;flex:0 0 auto}
.tr__tw{display:flex;align-items:center;gap:calc(6px * var(--ui));min-width:0}
.tr__tw .tr__t{min-width:0}

/* رقاقةُ رمز الطلب وبدجُ النسخ */
.act--code{display:inline-flex;align-items:center;gap:calc(7px * var(--ui));cursor:default}
.act--code b{font-weight:700;font-size:calc(11.5px * var(--fz));letter-spacing:.4px}
.codebdg{position:relative;display:inline-flex;align-items:center;gap:calc(4px * var(--ui));border:1px solid var(--line);border-radius:999px;background:var(--surf);color:var(--acc-ink);font-size:calc(10px * var(--fz));font-weight:700;padding:calc(2px * var(--ui)) calc(9px * var(--ui));cursor:pointer;font-family:inherit}
/* ── وما تُصيبه الأصبعُ أربعةٌ وعشرون وإن كانت الشارةُ عشرين ──────────────────
   شارةُ «نسخ» مقصودةُ الصِّغَر: تجلس في ذيل سطر رمز الطلب ولا تنازعه، وقِيست
   ‎52×20‎ — دون الأربعة والعشرين التي يشترطها ‎WCAG 2.5.8‎ للهدف. والعلاجُ هو
   علاجُ بلاطة الشريط نفسُه (‎.segb::after‎): طبقةٌ شفّافةٌ تمتدّ فوقها وتحتها
   إلى أربعةٍ وعشرين، والشكلُ كما هو. ابنةُ الزرّ فالنقرةُ عليها نقرةٌ عليه. */
.codebdg::after{content:"";position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);
  height:max(100%,24px);pointer-events:auto}
.codebdg:active{transform:scale(.95)}

/* عرضُ متجرٍ محظور */
.oc--blk{flex-direction:row;align-items:center;gap:calc(9px * var(--ui));color:var(--ink3);font-size:calc(12px * var(--fz));background:var(--fill);border-style:dashed}

/* ═══ دفعة ٢٠٢٦-٠٨-٢٠د: نعومةُ الحواس — لا اهتزاز، لمسٌ أرحب، وانتقالاتٌ حريرية ═══ */
/* دائرةُ توسيع المشجرة: هدفٌ لمسيٌّ 45px (هالةٌ خفيّة) بلا أيِّ تغيّرٍ ظاهري */
/* نطاقُ لمسِ زرِّ التوسيع أوسعُ من دائرته المرئية بكثير: ٢٧px تُرى و٥٣px
   تُلمَس. كان البروزُ ٩px (٤٥px إجمالاً) فيقع الإبهامُ خارجَه فيفتح الطلبَ بدل
   شجرته. والزيادةُ آمنةٌ في الاتجاهين: رأسياً تبقى داخل ارتفاع الصف، وأفقياً
   تبتلع رقمَ العروض المجاور — وهو بلا فعلٍ خاص، ولمسُه ليفتح الشجرة هو
   المتوقَّع أصلاً. الطبقةُ شفافةٌ ومرسومةٌ بعد إخوتها فتملك النقرَ دونهم. */
/* دورانُ السهم على مدّة الطيّ نفسِها ومنحناه نفسِه (‎TREE_MS‎ و‎(.16,1,.3,1)‎):
   حركتان لشيءٍ واحدٍ تُقرآن حركةً واحدة إن بدأتا وانتهتا معاً. وهو ينتقل الآن
   فعلاً لأنّ عقدتَه لم تعد تُهدَم وتُبنى مع كلِّ فتح. */
.tr__chev{position:relative;transition:transform .28s var(--ez),background .16s,color .16s}
[data-motion="هادئ"] .tr__chev{transition:background .16s,color .16s}
@media (prefers-reduced-motion:reduce){
  .tr__chev{transition:background .16s,color .16s}
}
.tr__chev::after{content:'';position:absolute;inset:calc(-13px * var(--ui));border-radius:999px}
/* تغذيةٌ بصريةٌ فوريةٌ للمس — أجهزةُ اللمس لا hover لها، فالضغطةُ تُرى لا تُحَسّ */
@media (hover:none){
  .tr__r:active,.kid:active,.ir:active,.sb__acct:active,.md__r:active,.st__row:active,.pool__r:active,.chip:active,.act:active,.bd__c:active{background:var(--fill)}
  .chev27:active{background:var(--fill2);color:var(--ink)}
  .tb:active,.icb--ghost:active{background:var(--fill2)}
  .pt__c:active,.st__world:active{border-color:var(--line2)}
}
/* المطاطيةُ محتواة — لا تسلسلَ تمريرٍ غريباً خلف القوائم */
.sb__list,.inb__list,.th,.pd,.st,.cp,.pg,.bd__sc,.bd__cols,.rail,.map__cities{overscroll-behavior:contain}
/* ولا مطاطيّةَ في مُمَرِّرٍ يرسم مطاطيّتَه بنفسِه — عند قمّته وحدَها. ‎contain‎
   يمنع تسلسلَ التمرير إلى ما خلفه ولا يمنع الشريطَ المطاطيَّ المحلّيَّ عند
   طرفَيه، وذاك الشريطُ عند القمّة هو العطبُ المرئيّ: تعطي المنصّةُ إزاحةَ تمريرٍ
   سالبةً، فتسحب معها كلَّ ما في المُمَرِّر — وما كان لاصقاً (‎position:sticky‎)
   لا يقوى على الثبات أمام إزاحةٍ سالبة فينزل مع القائمة كأنّه محمولٌ معها.
   والأسوأُ أنّه كان يعمل فوقَ السحب للتحديث لا بدلاً منه: مستمعُ اللمس كان
   سلبياً (‎passive‎) فلا يملك ‎preventDefault‎، فيمشي شريطُ المنصّة على منحناه
   ويمشي القرصُ على منحنى الجافاسكربت — إصبعٌ واحدةٌ ومنحنيان، فينزلق أحدُهما
   عن الآخر ويعبر القرصُ فوقَ أوّلِ بطاقةٍ في القائمة. لا يُسمّيه الناظرُ لكنّه
   يراه «غيرَ احترافيّ»، وهو بالضبط ما رُصِد في التصميم المتقاعد قبلَه: «بق
   يجعل كل الهيدر يتحرك مع السكرول».
   ذاك كلُّه عند القمّة، ولا شيءَ منه عند القاع: لا سحبَ للتحديث هناك، ولا لاصقٌ
   يركب الشريطَ — إنّما ارتدادةٌ تقول «انتهى ما عندنا» بلا كلمة، وهي جمالٌ خالص
   يصنعه السطحُ بنفسِه. فكان المنعُ يُرفع عن الطرفين وحقُّه أن يُرفع عن واحد،
   وذهبت الارتدادةُ مع العطب. الآن القاعدةُ هي المنع، و‎.ovs‎ ترفعه متى ابتعد
   السطحُ عن شريط قمّته (‎ovsSync‎ و‎OVS_TOP‎ في ‎ab2.js §5ج-ه‎) — فالطرفُ الوحيدُ
   الذي يُبلَغ والرايةُ مرفوعةٌ هو القاع، وتعود مطاطيّةُ المنصّة نفسِها تلقائيةً
   حيث لا يركبها أحد. المحورُ الأفقيُّ يبقى ‎contain‎، والصيغةُ الفيزيائيةُ إلى
   جانب المنطقية للمتصفّحات الأقدم. (‎.pd‎ ليست مضيفاً للسحب لكنّها تحمل رأسَ
   الطلب لاصقاً في قمّتها — وهو ما يركب الشريطَ عند القمّة. ومؤلّفُ العرض غادر
   جوفَها إلى ‎.pdw‎ تحتها، فلا لاصقَ في قاعها.) */
.sb__list,.inb__list,.th,.pd{overscroll-behavior-y:none;overscroll-behavior-block:none}
.sb__list.ovs,.inb__list.ovs,.th.ovs,.pd.ovs{overscroll-behavior-y:contain;overscroll-behavior-block:contain}
/* ═══ وملاحةُ الفيض الأفقيّ تُرفَع عن الجوّال ═══
   في محرّكات بلينك سحبةٌ أفقيّةٌ تفيض عن الصفحة = رجوعٌ في التاريخ، وهي غيرُ
   إيماءة النظام: هذه من المحتوى فتُرفَع بسطر، وتلك فوق الويب-فيو فلا تُرفَع
   بحال (‎ab2.js §5ج-ح‎). ورفعُها هنا يترك الشريطَ لإيماءتنا وحدَها حيث لا
   إيماءةَ نظامٍ — كروم بأزرارٍ ثلاثة — فيبقى مشهدُ اللوحين لصاحبه.
   وعلى الجوّال وحدَه (‎data-lay="stack"‎): سطحُ المكتب لا إيماءةَ لنا فيه أصلاً
   (‎backScene‎ تشترط ‎S.mob‎)، فرجعةُ لوحة اللمس هناك ملكُ صاحبها لا نمسّها.
   والشرائطُ الأفقيّةُ الداخليّةُ لا يمسّها هذا: ‎overscroll-behavior-inline:contain‎
   عليها يقطع التسلسلَ قبل أن يبلغ الجذر. */
html[data-lay="stack"]{overscroll-behavior-x:none}
/* ═══ ما خلف النافذة لا يتحرّك ═══
   ‎inert‎ يمنع التركيزَ وقارئَ الشاشة، ولا يمنع أصبعاً من تمرير القائمة تحت
   نافذةٍ مفتوحة. قِيس بالأدوات: القائمةُ تنزلق ١٩٩بك والنافذةُ قائمةٌ فوقها.
   وللانزلاق بابان، وكلاهما مغلقٌ بهذا السطر:
   ① أصبعٌ فتحت القائمةَ بتعليقٍ مطوّل: المتصفّحُ ملك لمستَها للتمرير قبل أن
      تُبنى الطبقةُ أصلاً، فبقيت تمرّر ما تحتها وإن غطّتها طبقةٌ بعدَ حين —
      وطبقةٌ تُبنى في منتصف لمسةٍ لا تسحبها من صاحبها.
   ② الطبقةُ كانت تُخمَل (‎pointer-events:none‎) حتى ترتفع تلك الأصبع، فكلُّ
      لمسةٍ تهبط عليها تمرّ إلى القائمة تحتها. زال ذاك من ‎§11ج‎.
   والقفلُ على المُمَرِّرات أنفسِها لا على الطبقة: ‎overflow:hidden‎ يُلغي
   التمريرَ باللمس، ويُبقي التمريرَ البرمجيَّ وموضعَ التمرير كما هما — فتعود
   القائمةُ عند الإغلاق إلى حيث تركها صاحبُها بلا قفزة. وسطرُ الورقةِ معلَّقٌ
   على الجذر (‎data-mdl‎) فينجو من كلِّ إعادةِ بناءٍ للشجرة، وهي تقع بالعشرات
   والنافذةُ مفتوحة. ولا يُدرَج هنا مُمَرِّرٌ يسكن داخلَ الطبقة (‎.map__cities‎،
   ‎.rch__list‎): تلك تمرّر وهي مفتوحة، وهي المقصودة بالفتح. */
#ab2[data-mdl="1"] .sb__list,#ab2[data-mdl="1"] .inb__list,#ab2[data-mdl="1"] .th,
#ab2[data-mdl="1"] .pd,#ab2[data-mdl="1"] .st,#ab2[data-mdl="1"] .cp,
#ab2[data-mdl="1"] .pg,#ab2[data-mdl="1"] .bd__sc,#ab2[data-mdl="1"] .bd__cols,#ab2[data-mdl="1"] .rail{overflow:hidden}
/* العناوينُ الكبيرة تتوازن سطوراً */
.pt__t,.cp__h1,.gate__t{text-wrap:balance}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{-webkit-tap-highlight-color:transparent}
/* خروجُ النافذة ناعمٌ كدخولها */
/* تبديلُ محتوىً داخلَ نافذةٍ قائمةٍ ليس دخولاً: الحركاتُ تُعرَض مرّةً عند
   الفتح، وإعادتُها على كلِّ تحديثٍ هي الومضةُ نفسُها التي كنّا نطاردها. */
#ab2mdl.md-still .md,#ab2mdl.md-still .md__c,#ab2mdl.md-still .spot__m{animation:none!important}
/* والخروجُ من الباب الذي دخل منه: عكسُ المدخل بمنحناه لا قطعٌ سريعٌ يُقرأ
   اختفاءً. والمهلةُ في ‎paintModal‎ (٢٦٠ملّي) تساوي أطولَ ما هنا فلا تُقتطع
   الحركةُ قبل تمامها. */
#ab2mdl.bye{pointer-events:none}
#ab2mdl.bye .md{opacity:0;transition:opacity .24s var(--ez)}
#ab2mdl.bye .md__c{opacity:0;transform:translateY(8px) scale(.99);transition:opacity .2s var(--ez),transform .26s var(--ez)}
/* جرسُ الإشعارات وعدّادُه — في شجرة العميل وسكة المتجر */
/* ── اختصاراتُ الرأس الثلاثة: الوضعُ واللغةُ ومقاسُ الحرف ─────────────────────
   ورثت مقعدَ الجرس وزرِّ الطلب معاً (أمرُ صاحب المنصّة في «اختصارات الإعدادات»)،
   فبقي قياسُها قياسَ الجرس بعينه: تسعٌ وعشرون في تسعٍ وعشرين على أرضية ‎--fill‎ —
   لا يزيد الرأسُ ارتفاعاً ولا ينقص، وإنّما يتبدّل ما فيه. */
.sb__scs{display:inline-flex;align-items:center;gap:calc(4px * var(--ui));flex:0 0 auto}
.sb__sc{display:inline-flex;align-items:center;justify-content:center;width:calc(29px * var(--ui));height:calc(29px * var(--ui));flex:0 0 auto;border:0;border-radius:9px;background:var(--fill);color:var(--ink2);cursor:pointer;transition:background .16s,color .16s;font-family:inherit}
.sb__sc:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .sb__sc:hover{background:var(--fill2);color:var(--ink)}
}
/* ═══ صفُّ الإشعارات — تحت حقل البحث في العالمين ══════════════════════════════
   سطرٌ واحدٌ لا بطاقة: هو بابٌ لا محتوىً، وكلُّ ما يجب أن يقوله قبل أن يُفتَح
   شيئان — أنّ ثَمّ إشعاراتٍ، وكم منها لم يُقرأ. يهدأ رماديّاً متى هدأت، ويلبس
   لونَ الهوية متى وصل غيرُ مقروء، فيُقرأ حالُه من طرف العين بلا حرف. */
/* العرضُ يأتي من الصندوق لا من ‎width‎: كلا الأبوين عمودٌ مرن، فالابنُ يمتدّ
   بطبعه — و‎width:100%‎ مع هامشٍ جانبيٍّ يفيض بمقدار الهامش. */
.nfr{display:flex;align-items:center;gap:calc(8px * var(--ui));
  padding:calc(7px * var(--ui)) calc(9px * var(--ui));border:0;border-radius:10px;
  background:var(--fill);color:var(--ink2);cursor:pointer;text-align:start;font-family:inherit;
  transition:background .2s,color .2s}
.nfr__ic{display:inline-flex;flex:0 0 auto;color:var(--ink3);transition:color .2s}
.nfr__t{flex:1;min-width:0;font-size:calc(12px * var(--fz));font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nfr__s{flex:0 0 auto;font-size:calc(10.5px * var(--fz));color:var(--ink3)}
.nfr__n{flex:0 0 auto;min-width:calc(18px * var(--ui));height:calc(18px * var(--ui));padding:0 calc(5px * var(--ui));border-radius:999px;background:var(--acc);color:var(--bg);font-size:calc(9.5px * var(--fz));font-weight:700;display:grid;place-items:center;line-height:1}
.nfr__cv{flex:0 0 auto;color:var(--ink3);opacity:.7}
.nfr.on{background:var(--acc-t)}
.nfr.on .nfr__ic{color:var(--acc-ink)}
.nfr.on .nfr__t{color:var(--acc-ink);font-weight:700}
.nfr:active{background:var(--fill2)}
/* وفي صندوق المتجر تُقاس حواشيه بحواشي البحث فوقه وشريطِ الحالات تحته — عشرٌ
   جانباً كما هما، وثمانٍ فوقه فرجةً بينه وبين الحقل. */
.inb>.nfr{margin:calc(8px * var(--ui)) calc(10px * var(--ui)) 0}
/* ── والهادئُ منه ينطوي مع البحث ويتّسع باتّساعه ──────────────────────────────
   أمرُ صاحب المنصّة: «شريط الإشعارات اللي تحت البحث خلّه ينطوي ويتّسع مع البحث
   إذا كان ما فيه إشعارات فعّالة جديدة، أمّا إذا فيه جديدة يكون ظاهر مثل الآن».
   والصنفُ ‎nfr--fold‎ يكتبه الرسمُ من العدّاد وحدَه (‎notifRowH‎)، فالقاعدةُ ههنا
   لا تعرف عدّاداً ولا تسأل عنه: ما حمل الصنفَ انطوى، وما لم يحمله ثبت.
   والطيّةُ نسخةُ ‎.sb__srchw‎ حرفاً — ‎max-height‎ بمنحناها وزمنها — فالصفّان
   يمشيان في نَفَسٍ واحدٍ لا في نَفَسين متقاربَين.
   والسقفُ بالمقياسين معاً: حشوتُه تكبر بـ‎--ui‎ وسطرُه بـ‎--fz‎، فلو قيس بأحدهما
   قُصَّ عند تكبير الخطّ أو تأخّر انطواؤه عند تصغيره.
   وحشوتُه تنطوي معه لا بعده: ‎box-sizing:border-box‎ لا يُنقص صندوقاً عن حشوته،
   فـ‎max-height:0‎ وحدَها تترك أربعةَ عشرَ بكسلاً من لا شيءٍ فوق شريط الحالات —
   وهي بعينها العلّةُ التي عالجها الحقلُ في الواردة بـ‎padding-top:0‎.
   و‎visibility‎ تصحب الطيّة لأنّه زرٌّ لا صندوق: الشفافيةُ وحدَها تُخفيه عن العين
   وتُبقيه في طريق لوحة المفاتيح، فيقف التركيزُ على ما لا يُرى. تُرفع مع أوّل
   إطارٍ من الفتح، ولا تنزل إلّا بعد أن ينطبق (‎0s .28s‎). */
.nfr--fold{overflow:hidden;visibility:visible;
  max-height:calc(16px * var(--ui) + 22px * var(--fz));
  transition:background .2s,color .2s,visibility 0s,
    max-height .28s var(--ez),opacity .22s,margin-top .28s,padding-top .28s,padding-bottom .28s}
.nfr--fold.hid{max-height:0;opacity:0;pointer-events:none;visibility:hidden;
  padding-top:0;padding-bottom:0;
  transition:background .2s,color .2s,visibility 0s .28s,
    max-height .28s var(--ez),opacity .22s,margin-top .28s,padding-top .28s,padding-bottom .28s}
/* والفرجةُ تنطوي معه: في اللوحة فراغُ الصندوق (‎gap‎ سبعةٌ) يُسلَب بهامشٍ سالبٍ
   كما يسلبه الحقلُ فوقه، وفي الواردة هامشُه العلويُّ نفسُه يعود صفراً. */
.sb__top>.nfr--fold.hid{margin-top:calc(-7px * var(--ui))}
.inb>.nfr--fold.hid{margin-top:0}
@media (hover:hover) and (pointer:fine){
  .nfr:hover{background:var(--fill2)}
  .nfr.on:hover{background:var(--acc-tt)}
}
/* مركزُ الإشعارات */
.md__c--notif{width:min(92vw,344px * var(--ui));--md-cap:72dvh;gap:calc(4px * var(--ui));padding:calc(12px * var(--ui)) calc(10px * var(--ui)) calc(10px * var(--ui))}
.nf__hd{display:flex;align-items:center;gap:calc(8px * var(--ui));padding:0 calc(6px * var(--ui)) calc(7px * var(--ui))}
.nf__ic{width:calc(30px * var(--ui));height:calc(30px * var(--ui));flex:0 0 auto;border-radius:10px;background:var(--fill);color:var(--ink2);display:grid;place-items:center}
.nf--new .nf__ic{background:var(--acc-t);color:var(--acc-ink)}
.nf--new .tt bdi{font-weight:700}
/* ── تنبيهُ العالَم الآخر: سطرٌ أسودُ في صدر الصندوق ───────────────────────────
   أمرُ صاحب المنصّة: «مع اللون الأسود لهذا التنبيه وإمكانية الانتقال للحساب هناك
   من الزر». والأسودُ هنا حبرُ الفقاعة (‎--me‎) لا أسودُ الحاسوب: هو الداكنُ الذي
   تعرفه هذه المنصّةُ في وضعيها، فلا يصير في الوضع الداكن مربّعاً يغرق في أرضيته. */
.nfx{display:flex;align-items:center;gap:calc(10px * var(--ui));width:100%;
  padding:calc(10px * var(--ui)) calc(11px * var(--ui));margin-bottom:calc(6px * var(--ui));
  border:0;border-radius:12px;background:var(--me);color:var(--me-ink);
  cursor:pointer;text-align:start;font-family:inherit;transition:filter .16s,transform .15s var(--ez)}
.nfx:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.nfx:hover{filter:brightness(1.12)}}
.nfx__ic{width:calc(28px * var(--ui));height:calc(28px * var(--ui));flex:0 0 auto;border-radius:9px;
  display:grid;place-items:center;background:rgba(255,255,255,.13);color:inherit}
.nfx .tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(1px * var(--ui))}
.nfx__t{font-size:calc(12.5px * var(--fz));font-weight:700;line-height:1.5}
.nfx__s{font-size:calc(10.5px * var(--fz));opacity:.72;line-height:1.5}
.nfx__go{flex:0 0 auto;display:inline-flex;align-items:center;gap:calc(3px * var(--ui));
  font-size:calc(10.5px * var(--fz));font-weight:700;opacity:.9;white-space:nowrap}
/* وفي الوضع الداكن ‎--me‎ تركوازٌ شفّافٌ لا حبرٌ داكن، فالسطرُ يذوب في اللوح.
   فيُطلى بأدكنَ من أرضية الصفحة (‎#0A0D13‎) وشعرةٍ تفصله — أسودُ هذا الوضع. */
[data-th="داكن"] .nfx{background:#05080C;color:#EAF1F5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
/* هياكلُ الانتظار — صفوفٌ تحاكي الشكل قبل البيانات */
.skr{display:flex;align-items:center;gap:calc(9px * var(--ui));padding:calc(9px * var(--ui)) calc(10px * var(--ui))}
.skr__m{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(6px * var(--ui))}
.skr .skel::after{animation-delay:calc(min(var(--i,0)*.09s,.5s))}
/* فاصلُ اليوم في المحادثة */
.daychip{display:inline-flex;padding:calc(3px * var(--ui)) calc(12px * var(--ui));border-radius:999px;background:var(--fill);font-size:calc(10px * var(--fz));font-weight:700;color:var(--ink3);letter-spacing:.2px}
/* ═══ الصوت: شريطُ تسجيلٍ حيّ، وفقاعةُ صوت، ولوحةُ إملاء ═══ */
.vrb{max-width:calc(640px * var(--ui));margin:0 auto;display:flex;align-items:center;gap:calc(10px * var(--ui));padding:calc(8px * var(--ui)) calc(10px * var(--ui)) calc(8px * var(--ui)) calc(8px * var(--ui));
  border-radius:18px;border:1px solid var(--line);background:var(--surf);box-shadow:var(--shadow)}
html[dir="ltr"] .vrb{padding:calc(8px * var(--ui)) calc(8px * var(--ui)) calc(8px * var(--ui)) calc(10px * var(--ui))}
.vrb__x{width:calc(32px * var(--ui));height:calc(32px * var(--ui));flex:0 0 auto;border:0;border-radius:999px;background:var(--fill);color:var(--ink2);
  display:grid;place-items:center;cursor:pointer;transition:background .16s}
@media (hover:hover) and (pointer:fine){
  .vrb__x:hover{background:var(--fill2)}
}
.vrb__dot{width:calc(9px * var(--ui));height:calc(9px * var(--ui));flex:0 0 auto;border-radius:999px;background:var(--bad);animation:ab-recdot 1.4s ease-in-out infinite}
@keyframes ab-recdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}
.vrb__t{font-size:calc(12px * var(--fz));font-weight:700;color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.vrb__t b{font-weight:900;color:var(--ink)}
.vrb__w{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:calc(3px * var(--ui));height:calc(22px * var(--ui));overflow:hidden}
.vrb__w i{width:calc(3px * var(--ui));height:calc(5px * var(--ui));flex:0 0 auto;border-radius:999px;background:color-mix(in srgb,var(--acc) 65%,transparent);
  transition:height .09s linear}
.bv{max-width:min(100%,470px * var(--ui))}
.bv--me{background:transparent;border:0;padding:0;color:inherit}
.bv__pause{display:flex;gap:calc(2.5px * var(--ui))}
.bv__pause i{width:calc(3px * var(--ui));height:calc(11px * var(--ui));border-radius:1px;background:currentColor}
.bv--me .bv__go{background:color-mix(in srgb,var(--me-ink) 16%,transparent);color:var(--me-ink)}
.bv__bars{display:flex;align-items:center;gap:calc(2px * var(--ui));height:calc(18px * var(--ui));flex:1;min-width:0;overflow:hidden}
.bv__bars i{width:calc(2.5px * var(--ui));flex:0 0 auto;border-radius:999px;background:currentColor;opacity:.42}
.bv__bars.on i{animation:ab-vbar 1.1s ease-in-out infinite;opacity:.85}
@keyframes ab-vbar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.bv--me .bv__bars i{background:var(--me-ink)}
.bv--me .bv__d{color:color-mix(in srgb,var(--me-ink) 70%,transparent)}
/* لوحةُ الإملاء — الكلماتُ تُرى وهي تُكتب، والإنهاءُ بيد صاحبها */
.dict{width:100%;display:flex;flex-direction:column;gap:calc(6px * var(--ui));padding:calc(10px * var(--ui)) calc(12px * var(--ui));margin-top:calc(8px * var(--ui));border-radius:13px;
  background:var(--acc-t);animation:var(--fx-slide) .26s var(--ez) backwards}
.dict__hd{display:flex;align-items:center;gap:calc(7px * var(--ui));font-size:calc(11px * var(--fz));font-weight:700;color:var(--acc-ink)}
.dict__x{font-size:calc(13.5px * var(--fz));line-height:1.75;color:var(--ink);min-height:1.7lh}
[data-motion="هادئ"] .vrb__dot,[data-motion="هادئ"] .bv__bars.on i{animation:none}
/* شريطُ انقطاع الشبكة */
.net{position:fixed;top:calc(var(--safe-t) + 10px * var(--ui));inset-inline:0;margin-inline:auto;width:fit-content;max-width:86vw;display:flex;align-items:center;gap:calc(7px * var(--ui));padding:calc(7px * var(--ui)) calc(14px * var(--ui));border-radius:999px;background:color-mix(in srgb,var(--warn) 14%,var(--bg));color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);box-shadow:var(--shadow2);font-size:calc(11.5px * var(--fz));font-weight:700;z-index:82;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .24s var(--ez);pointer-events:none}
.net.show{opacity:1;transform:none}
.net svg{animation:ab-sweep 1.6s linear infinite}
/* زرُّ «إلى آخر المحادثة» — وهو أيضاً يطفو فوق الكلام، فيُرصَف طبقتين كلوحَي
   الترتيب والقائمة: ‎--surf‎ و‎--fill‎ كلتاهما شفّافةٌ في الداكن، وقرصٌ صغيرٌ
   بحرفٍ يجري تحته يُقرأ عطباً لا زرّاً. */
.tobot{position:absolute;bottom:calc(92px * var(--ui));inset-inline-start:calc(16px * var(--ui));z-index:6;width:calc(34px * var(--ui));height:calc(34px * var(--ui));border:1px solid var(--line);border-radius:999px;background:linear-gradient(var(--surf),var(--surf)),var(--bg);color:var(--ink2);box-shadow:var(--shadow2);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(8px) scale(.9);transition:opacity .18s,transform .24s var(--ez),background .16s;pointer-events:none}
.tobot.show{opacity:1;transform:none;pointer-events:auto}
/* ورقاقةُ التقييم تطفو في نقطته، فيعلو فوقها متى كانت في الشاشة — قرصان في
   موضعٍ واحدٍ يقرأهما الإبهامُ شيئاً واحداً. ولا يعلو واللوحةُ مفتوحةٌ: هي
   منطويةٌ حينئذٍ، وقاعدةُ ‎html[data-kb] .tobot‎ أخصُّ فتغلب. */
.th--rev+.tobot{bottom:calc(150px * var(--ui))}
@media (hover:hover) and (pointer:fine){
  .tobot:hover{background:linear-gradient(var(--fill),var(--fill)),var(--bg)}
}
/* نافذةُ التأكيد — تحلّ محلَّ confirm() الأصلي في أخطر فعلين */
.md__c--ask{width:min(92vw,338px * var(--ui));gap:calc(11px * var(--ui))}
.ask__who{font-size:calc(13.5px * var(--fz));font-weight:700;color:var(--acc-ink);display:block}
.ask__pr{display:flex;align-items:baseline;gap:calc(5px * var(--ui));padding:calc(11px * var(--ui)) calc(14px * var(--ui));border-radius:13px;background:var(--fill)}
.ask__pr b{font-size:calc(26px * var(--fz));font-weight:900;line-height:1.15}
.ask__pr>span{font-size:calc(11px * var(--fz));color:var(--ink3)}
.ask__eta{margin-inline-start:auto;font-size:calc(11px * var(--fz));color:var(--ink2)}
.ask__rows{display:flex;flex-direction:column;gap:calc(7px * var(--ui))}
.ask__r{display:flex;align-items:flex-start;gap:calc(8px * var(--ui));font-size:calc(12px * var(--fz));line-height:1.7;color:var(--ink2)}
.ask__r svg{flex:0 0 auto;margin-top:calc(4px * var(--ui));color:var(--ink3)}
.md__go--bad{background:var(--bad)}

/* ════ فريقُ المتجر ════════════════════════════════════════════════════════
   نافذةٌ واحدةٌ تحمل الفريقَ كلَّه: الصفوفُ ورتبُها، وصندوقُ الدعوة، ومغادرةُ
   غيرِ المالك. ولا مُمَرِّرَ لها خاصّ — جسمُ النافذة (.md__c) مُمَرِّرٌ أصلاً
   وعليه ‎overscroll-behavior:contain‎، فإضافةُ ثانٍ تصنع مُمَرِّرَين في لوحٍ
   واحدٍ وهو أسوأُ من طولٍ يُمرَّر. */
.md__c--team{width:min(92vw,344px * var(--ui));gap:calc(11px * var(--ui))}
.tm__list{display:flex;flex-direction:column;gap:calc(2px * var(--ui))}
.tm__r{display:flex;align-items:center;gap:calc(9px * var(--ui));padding:calc(8px * var(--ui)) calc(4px * var(--ui));border-radius:10px}
.tm__r--inv{opacity:.72}
.tm__nm{flex:1;min-width:0;display:flex;align-items:center;gap:calc(6px * var(--ui));font-size:calc(12.5px * var(--fz));font-weight:500;color:var(--ink)}
.tm__nm>bdi,.tm__nm>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm__you{flex:0 0 auto;padding:calc(2px * var(--ui)) calc(7px * var(--ui));border-radius:999px;background:var(--acc-t);color:var(--acc-ink);font-size:calc(9.5px * var(--fz));font-weight:700}
.tm__rl{flex:0 0 auto;font-size:calc(10.5px * var(--fz));font-weight:700;color:var(--ink3)}
/* السلّةُ في طرف الصفّ، أبعدُ ما تكون عن الاسم — لئلّا تُقرأ جزءاً منه. */
.tm__x{flex:0 0 auto;display:inline-grid;place-items:center;width:calc(28px * var(--ui));height:calc(28px * var(--ui));border:0;border-radius:9px;background:transparent;color:var(--bad);cursor:pointer;transition:background .16s}
.tm__x:active{background:var(--bad-t)}
@media (hover:hover){.tm__x:hover{background:var(--bad-t)}}
.tm__inv{display:flex;flex-direction:column;gap:calc(9px * var(--ui));padding:calc(13px * var(--ui)) calc(13px * var(--ui));border-radius:13px;border:1px solid var(--line);background:var(--surf)}
.tm__ttl{font-size:calc(12px * var(--fz));font-weight:700;color:var(--ink)}
/* نتيجةُ لوح الإدارة: بياناتٌ تُقرأ كما جاءت لا نصٌّ مؤلَّف. تُعرض ‎ltr‎ لأنّ
   مفاتيحَها لاتينيةٌ وأرقامُها كذلك، وبخطٍّ ثابتِ العرض ليصطفَّ العمودُ تحت
   العمود. وسقفُ الارتفاع لئلّا يبتلع ردٌّ من ألفِ صفٍّ اللوحَ كلَّه — يُمرَّر
   داخلَ نفسِه، ولا يمرّر جسمَ الصفحة معه. وليس حقلاً فلا طوقَ تركيزٍ له. */
.adm__out{max-height:calc(300px * var(--ui));overflow:auto;-webkit-overflow-scrolling:touch;
  padding:calc(10px * var(--ui)) calc(11px * var(--ui));border-radius:11px;border:1px solid var(--line);
  background:var(--fill);color:var(--ink2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:calc(10.5px * var(--fz));line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
/* الرابطُ يُقرأ ليُتحقّق منه قبل الإرسال، فيُعرض كاملاً ويُكسر أينما وقع —
   وقصُّه بثلاث نقاطٍ يخفي الرمزَ الذي هو الدعوةُ كلُّها. */
.tm__lnk{display:block;padding:calc(8px * var(--ui)) calc(10px * var(--ui));border-radius:9px;background:var(--fill);color:var(--ink2);font-size:calc(10.5px * var(--fz));line-height:1.7;overflow-wrap:anywhere;word-break:break-all}
.tm__acts{display:flex;flex-wrap:wrap;gap:calc(7px * var(--ui))}
.tm__acts>button{display:inline-flex;align-items:center;gap:calc(5px * var(--ui))}
.tm__alt{padding:calc(6px * var(--ui)) calc(14px * var(--ui));border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font-size:calc(11px * var(--fz));font-weight:700;cursor:pointer;transition:background .16s;font-family:inherit}
.tm__alt:active{background:var(--fill)}
@media (hover:hover){.tm__alt:hover{background:var(--fill)}}
.tm__hint{font-size:calc(10.5px * var(--fz));line-height:1.75;color:var(--ink3)}
.md__close--bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 34%,var(--line))}
.md__go[disabled]{opacity:.42;cursor:default;transform:none}

/* ── ورقةُ البلاغ ─────────────────────────────────────────────────────────────
   ثلاثُ درجاتٍ قبل الإرسال: سببٌ يُختار، أو سببٌ يُكتب، ثم زرٌّ يُضغط. الزرُّ
   مطفأٌ حتى يوجد سبب، فلا يقع بلاغٌ بنقرةٍ واحدةٍ ولا بالغلط. */
.md__c--rpt{width:min(92vw,340px);gap:11px}
.rpt__rs{display:flex;flex-direction:column;gap:2px}
.rpt__r{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:11px;
  background:transparent;cursor:pointer;text-align:start;color:var(--ink);font-family:inherit;
  font-size:calc(12.5px * var(--fz));line-height:1.6;transition:background .16s}
.rpt__r.on{background:var(--fill)}
.rpt__r:active{background:var(--fill2)}
@media (hover:hover) and (pointer:fine){.rpt__r:hover{background:var(--fill)}}
.rpt__ring{width:19px;height:19px;flex:0 0 auto;border-radius:999px;border:1.6px solid var(--line2);
  display:grid;place-items:center;transition:border-color .16s}
.rpt__ring i{width:9px;height:9px;border-radius:999px;background:var(--bad);transform:scale(0);transition:transform .18s var(--ez-b)}
.rpt__r.on .rpt__ring{border-color:var(--bad)}
.rpt__r.on .rpt__ring i{transform:scale(1)}
.rpt__t{min-width:0}
.rpt__in{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surf);
  color:var(--ink);outline:none;font-family:inherit;font-size:calc(12.5px * var(--fz))}
/* الطوقُ شكلٌ واحدٌ ولونُه لونُ سياقه: نافذةُ الإبلاغ كلُّها ‎--bad‎ (الحلقةُ
   والقرصُ والعنوان)، فطوقٌ أخضرُ في وسطها ينقض معناها. الشكلُ من القانون
   والحمرةُ من المعنى — وهو الاستثناءُ الوحيد. */
.rpt__in:focus{border-color:color-mix(in srgb,var(--bad) 48%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 13%,transparent)}
.rpt__note{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;
  font-size:calc(10px * var(--fz));color:var(--ink3);line-height:1.7}
.rpt__note svg{flex:0 0 auto}
/* إنشاءُ المتجر — أولُ خطوةٍ للمزوّد، وكانت مفقودةً تماماً */
.md__c--ns{width:min(92vw,342px * var(--ui));gap:calc(12px * var(--ui))}
.ns__f{display:flex;flex-direction:column;gap:calc(6px * var(--ui))}
.ns__l{font-size:calc(11px * var(--fz));font-weight:700;color:var(--ink2)}
/* شريطُ فرزِ الواردة بالاهتمام الذي جلب الطلب — بلا عنوانٍ فوقه ولا شعرةٍ تحته.
   العنوانُ («وصلتك عبر») كان شرحاً لا يقول أكثرَ ممّا تقوله الرقائقُ نفسُها،
   وهي أسماءُ اهتمامات المتجر بعدّاداتها. والشعرةُ التي ورثت دورَه سقطت بأمر
   صاحب المنصّة: «ازل الخط الفاضل بين الحالات والاهتمامات» — والفصلُ بينهما
   يقوله بدجُ «جميع اهتماماتي» في صدر الصفّ بلا خطٍّ يقسم الرأس.
   وصفٌّ واحدٌ لا صفّان: نسخةٌ حرفيّةٌ من ‎.inb__filters‎ — مُمَرِّرٌ أفقيٌّ بلا
   شريط تمرير — فيُسحب كما تُسحب الحالات ولا يأكل من الواردة سطراً ثانياً.
   والفراغُ فوقه ستّةُ بكسلاتٍ كما كان: حشوةُ ‎.inb__filters‎ السفلى وحدَها. */
.inb__ints{display:flex;gap:calc(4px * var(--ui));padding:0 calc(10px * var(--ui)) calc(8px * var(--ui));
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.inb__ints::-webkit-scrollbar{display:none}
/* ── الشريطان ينطويان مع البحث: المختارُ ينزلق إلى الصدر، وما سواه يذوب ──────
   أمرُ صاحب المنصّة: «عند السكرول — بنفس الطريقة واللحظة التي ينطوي بها البحث —
   البدجُ المختارُ من فلاتر الاهتمامات يصعد للصفِّ حقِّ الحالات … واختفاءٌ تدريجيٌّ
   سريعٌ خفيفٌ لطيفٌ للبقية غير المختارة من الفلترين»، ثم «خلّهم ينزلقون لبداية
   الصف عند الطي انزلاقاً ناعماً … دون عوائق بقفزات وسيطة»، و«الأحدث والأقدم تكون
   يمين أوّل بدج وتكون باقية حتى مع السكرول لأسفل».
   فالمطويُّ صفٌّ واحدٌ في صدر الشريط: ‎[الترتيب] [الحالة] [الاهتمام]‎ بفراغِ
   الشريط نفسِه بين كلِّ اثنين. والزمنُ والمنحنى منقولان حرفاً عن طيّة البحث
   (‎.28s var(--ez)‎) لأنّ الحركتين حركةٌ واحدةٌ في نَفَسٍ واحد.
   الصعودُ ‎margin-top‎ سالبةٌ لا إزاحةٌ فوق المكان: الحركةُ والمساحةُ التي تُخلى
   للواردة شيءٌ واحد، فتنقبض الترويسةُ بقدرِ ما ارتفع الشريطُ لا أكثر.
   والانزلاقُ الجانبيُّ ‎translate‎ لا ‎transform‎: ‎transform‎ محجوزةٌ لانكماشة
   ‎:active‎ تحت الأصبع، والخاصّيتان تتركّبان فلا تمحو إحداهما الأخرى. وهو إزاحةٌ
   لا انكماشُ عرض: العرضُ الجوهريُّ لا يُستوفى بين قيمتين فيقفز في منتصف الطريق.
   وهو على الرقائق لا على الشريط: صندوقُ الشريط هو المِقَصُّ الذي يقصُّ ما فاض
   عنه، فلو انزلق معها لَسافر المِقَصُّ معها وبقيت الرقاقةُ مقصوصةً كما كانت —
   وقد رُئي: اهتمامٌ في ذيل شريطٍ فائضٍ يصل مقعدَه وعدّادُه مقطوع. وصندوقٌ ثابتٌ
   يعني أنّ ما وصل الصدرَ وصله كاملاً.
   وما لم يُختَرْ يذوب في مكانه ولا يزحف: تمرّ فوقه الباقيةُ مملوءةً بلون الهوية
   ويذوب هو تحتها — وذلك «اختفاء ما بينهما» لا انطواءُ صفٍّ يجرّ ما بقي فيه.
   ولكلِّ رقاقةٍ إزاحتُها هي (‎--c‎ عليها) لا إزاحةٌ واحدةٌ للشريط: اهتمامان
   غيرُ متجاورَين لا يرصفهما رقمٌ واحد، فيبقى بينهما فراغُ ما ذاب. يقيسها
   ‎railSync‎ في حلقةٍ تمشي على الشريطين كأنّهما صفٌّ واحد. والصعودُ وحدَه رقمٌ
   على الجذر (‎--fdy‎) لأنّه صفةُ شريطٍ لا صفةُ رقاقة.
   والرجوعُ بلا حساب: نزعُ ‎inb--fold‎ يعيد ‎translate‎ إلى ‎none‎، فتمشي كلُّ
   رقاقةٍ الطريقَ نفسَه معكوساً بالمنحنى نفسِه.
   والشريطُ الصاعدُ يعلو صفَّ الحالات فلا يبتلع نقرَه: النقرُ يمرّ من خلاله إلى
   ما تحته، إلا رقاقتَه المختارة فتبقى حيّةً في مقعدها الجديد. */
.inb__ints{transition:margin-top .28s var(--ez)}
/* كتمٌ لإطارٍ واحد: تصحيحُ رقمٍ تبدّل تحت الطيّة يقع صامتاً، فلا يُرى انزلاقٌ
   بلا سبب بعد رسمٍ خلفيٍّ أو ترجمةِ نصٍّ غيّرت عرضَ رقاقة (‎railSync(true)‎). */
.inb--now .inb__ints,.inb--now .inb__filters>.chip,.inb--now .inb__ints>.chip{transition:none}
/* والمطويُّ صفُّ خلاصةٍ لا شريطٌ يُسحَب: السحبُ الجانبيُّ يمسّ شريطاً واحداً من
   الاثنين فينفرط الصفُّ المرصوف — نصفُه يمشي ونصفُه يقف. ‎hidden‎ يمنع سحبَ
   الأصبع ولا يمسّ ‎scrollLeft‎ (الصندوقُ يبقى مُمَرِّراً بالبرمجة)، فيعود الشريطُ
   مفروداً إلى حيث تركته الأصبعُ بلا قفزة. */
.inb--fold .inb__filters,.inb--fold .inb__ints{overflow-x:hidden;overflow-y:hidden}
.inb--fold .inb__ints{margin-top:calc(-1 * var(--fdy,0px));pointer-events:none}
.inb--fold .inb__ints>.chip.on{pointer-events:auto}
.inb__filters>.chip,.inb__ints>.chip{transition:background .16s,color .16s,border-color .16s,transform .16s var(--ez),translate .28s var(--ez),opacity .2s ease .06s,visibility 0s}
.inb--fold .inb__filters>.chip,.inb--fold .inb__ints>.chip{translate:var(--c,0px)}
.inb--fold .inb__filters>.chip:not(.on),.inb--fold .inb__ints>.chip:not(.on){
  opacity:0;visibility:hidden;pointer-events:none;transform:scale(.94);
  transition:opacity .14s ease,transform .18s var(--ez),translate .28s var(--ez),visibility 0s linear .18s}
/* تلميحُ الحقل — تحت الحقل لا فوقه، ليقرأه من احتاجه بعد أن يرى ما يكتب فيه.
   ويحمل أيقونةً تفرّق الحقلين بلمحة: عينٌ لما يراه العميل، ووسمٌ لما يجلب الطلب. */
.ns__h{display:flex;align-items:flex-start;gap:calc(5px * var(--ui));font-size:calc(10px * var(--fz));line-height:1.7;color:var(--ink3)}
.ns__h svg{flex:0 0 auto;margin-top:calc(3px * var(--ui))}
/* نبذةُ المزوّد على بطاقته كما يقرؤها العميل */
.prof__about{margin:0;font-size:calc(12px * var(--fz));line-height:1.85;color:var(--ink2);white-space:pre-wrap;overflow-wrap:anywhere}
.ns__f input,.ns__f textarea{border:1px solid var(--line);border-radius:11px;background:var(--surf);outline:none;
  padding:calc(10px * var(--ui)) calc(12px * var(--ui));font-size:calc(13.5px * var(--fz));line-height:1.7;color:var(--ink);font-family:inherit;resize:none;width:100%}
.ns__cities{display:flex;flex-wrap:wrap;gap:calc(5px * var(--ui));max-height:calc(104px * var(--ui));overflow-y:auto;overflow-x:hidden}
.ns__first{gap:calc(8px * var(--ui));padding:calc(34px * var(--ui)) calc(18px * var(--ui))}
.prof__bio .ns__f input,.prof__bio .ns__f textarea{background:var(--bg)}
.prof__bio{gap:calc(12px * var(--ui))}
.prof__save[disabled]{opacity:.45;cursor:default}
.ns__first .gate__go{margin-top:calc(4px * var(--ui));display:inline-flex;align-items:center;gap:calc(6px * var(--ui))}
/* شاشةُ التعثّر — طريقُ خروجٍ كريم بدل الفراغ الأبدي */
.crash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(11px * var(--ui));padding:calc(32px * var(--ui));text-align:center;background:var(--bg);color:var(--ink)}
.crash__ic{width:calc(46px * var(--ui));height:calc(46px * var(--ui));border-radius:14px;background:var(--fill);color:var(--ink3);display:grid;place-items:center}
.crash__t{font-size:calc(17px * var(--fz));font-weight:900}
.crash__p{font-size:calc(12.5px * var(--fz));line-height:1.8;color:var(--ink2);max-width:34ch}
.crash__go{margin-top:calc(4px * var(--ui));padding:calc(10px * var(--ui)) calc(24px * var(--ui));border:0;border-radius:12px;background:var(--acc);color:var(--bg);font-size:calc(13px * var(--fz));font-weight:700;cursor:pointer;font-family:inherit}
/* نصٌّ لقارئ الشاشة وحدَه — الحالةُ اللونية لا تصل الأعمى */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* الخلفيةُ الخاملة خلف النافذة لا تُلتقط باللمس ولا بالتركيز */
[inert]{pointer-events:none}
/* ══ الانتقالُ يصف علاقةَ الشاشتين ══════════════════════════════════════════════
   كان هنا مزجٌ متقاطعٌ واحدٌ لكلِّ انتقال (‎.22s‎ على جذر الوثيقة). والمزجُ صادقٌ
   في حالةٍ واحدةٍ فقط: أن تكون الصورتان صورةً واحدةً بكسوتين — تبديلُ المظهر
   وتبديلُ الأرقام. أمّا حين تُخلِف شاشةٌ شاشةً أخرى — تبويبُ التقارير مكانَ
   تبويب الاهتمامات — فتراكبُهما ليس انتقالاً بل تعريضٌ مزدوج: صفحتان في إطارٍ
   واحد، «تقارير المتجر» مطبوعةٌ فوق «اهتماماتي»، وأرقامُ الكشف تحت بطاقات
   الاهتمام. وقياسُه على تسجيل المؤسِّس: ٢٢٠ ملّي ثانيةً تحمل الشاشتين معاً،
   يقرؤها المستخدمُ عطباً في الرسم لا حركةً مقصودة. وزادها سوءاً أنّ الطبقتين
   تُمزَجان بـ‎plus-lighter‎ (سلوك المتصفّح الافتراضيّ) فيلتهب النصُّ فوق النصّ.
   فصار لكلِّ علاقةٍ انتقالُها:
   • ‎skin‎ — التخطيطُ هو هو والكسوةُ تتبدّل: مزجٌ متقاطعٌ حقيقيّ، وهو موضعُه.
   • ‎page‎ — شاشةٌ تُخلِف غيرَها: الداخلةُ مصمتةٌ تعلو الخارجةَ الثابتةَ وتستقرّ
     في مكانها (١٧٠ملّي). ولا إطارَ واحدٌ يحمل صفحتين — الشرحُ أسفلَه. */
:root[data-vt="skin"]::view-transition-old(root),
:root[data-vt="skin"]::view-transition-new(root){animation-duration:.24s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
/* ── والخارجةُ تثبت تحت الداخلة ولا تذوب قبلها ───────────────────────────────
   كان التسلسلُ «اخرجْ إلى شفافيةِ صفرٍ في تسعين ملّي، ثمّ ادخُلْ من صفرٍ بعدها»،
   وبين الطرفين إطاراتٌ لا يظهر فيها إلّا أرضيّةُ المستند: ومضةٌ يراها الناسُ ولا
   يجدون لها سبباً — وهي الشكوى بحرفها: «توجد ومضةٌ وغمزةٌ غريبةٌ مزعجةٌ في كل
   المنصة إذا انتقلتُ من قسمٍ لقسم». وقد وُلدت من إصلاح التعريض المزدوج فتبادلا
   المكان، فثبتت القديمةُ مصمتةً تحت الداخلة فلا إطارَ فارغٌ البتّة.
   ── ثمّ بقيت الغمزةُ في نصفها الآخر ─────────────────────────────────────────
   القديمةُ ثابتةٌ مصمتةٌ، والداخلةُ كانت تذوب فوقها **من شفافيةِ صفر**: فكلُّ
   إطارٍ من المئة والسبعين يحمل صفحتين — وهو بعينه التعريضُ المزدوجُ الذي بُني
   هذا القسمُ لينهيه، والسطرُ فوق يَعِد بنقيضه («ولا إطارَ واحدٌ يحمل صفحتين»).
   والرهانُ كان أنّ ١٧٠ملّي «أقصرُ من أن يُقرأ صفحتين» — وقد سقط الرهان: بُلِّغ
   في تبديل الحساب («ومضةٌ وغمزةٌ غير لطيفة»)، وقِيس بالتصوير عند ٧٠ملّي فإذا
   صفوفُ الإعدادات المغادَرة مطبوعةٌ حرفاً بحرفٍ داخلَ لوحة الطلبات القادمة.
   ولا يُقاس بالجهتين سواءً: لوحُ العميل (‎.sb‎) هو الشاشةُ كلُّها فيشفّ كلُّه،
   ولوحُ المتجر عمودٌ داخل ‎.pv‎ فرأسُه وسكّتُه مصمتان — فتُرى الغمزةُ في اتجاهٍ
   ولا تكاد تُرى في الآخر، وهي هي.
   فالداخلةُ صارت مصمتةً من إطارها الأوّل، والحركةُ حركةُ استقرارٍ لا ذوبان:
   تهبط من ‎1.012‎ إلى مقاسها. والتكبيرُ **فوق** الواحد لا تحته عمداً — طبقةٌ
   أصغرُ من الشاشة تكشف من تحتها طوقاً من الصفحة المغادرة، وأكبرُ منها تغطّيها
   كاملةً في كلِّ إطار. فلا إطارَ يحمل صفحتين، بالحرف هذه المرّة.
   وتبديلُ الأقسام في حساب المتجر لا يمرّ بهذا أصلاً (‎A.pTab‎ يرسم بلا انتقال). */
@keyframes ab-vtHold{from{opacity:1}to{opacity:1}}
@keyframes ab-vtIn{from{transform:scale(1.012)}to{transform:none}}
:root[data-vt="page"]::view-transition-old(root){mix-blend-mode:normal;animation:ab-vtHold 170ms linear both}
:root[data-vt="page"]::view-transition-new(root){mix-blend-mode:normal;animation:ab-vtIn 170ms cubic-bezier(0,0,.2,1) both}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ═══ لوحةُ المفاتيح — طبقةٌ تعلو الصفحةَ ولا ترفعها (المحرّك: §5ه في ab2.js) ═══
   لا شيءَ هنا يُقلّص شيئاً: ‎interactive-widget=resizes-visual‎ في ‎index.html‎ يترك
   نافذةَ التخطيط كما هي، فـ‎100dvh‎ ثابتٌ و‎#ab2‎ لا يتغيّر ارتفاعُه ولا يُضغط عنصر.
   وكلُّ ما تقرؤه هذه القواعدُ رقمان يكتبهما ‎§5ه‎ على الجذر: ‎--kb‎ ما تغطّيه اللوحةُ
   من قاع الشاشة، و‎--kbl‎ ما يجب أن يرتفعه الرصيفُ فوقها (وليسا واحداً — الشرحُ فوق
   ‎kbWrite‎). وكلاهما صفرٌ ما لم تُفتح لوحة، فكلُّ سطرٍ أدناه بلا أثرٍ عند السكون. */
/* الرصيفُ يركب اللوحةَ: ‎transform‎ على المُركِّب وحدَه — لا تخطيطَ يُعاد ولا منحنى
   انتقالٍ من عندنا، فخطواتُ اللوحة نفسُها هي الحركة، وشريطٌ يلحقُ بمنحنىً خاصٍّ به
   يصل «متأخّراً قليلاً» مهما ضُبط. والشريطُ الذي يُخليه هو — بالبناء — الشريطُ
   الذي تغطّيه اللوحة، فلا يظهر تحته شيء. */
html[data-kb] [data-kb-dock]{transform:translate3d(0,calc(var(--kbl) * -1),0)}
/* وحشوةُ الأمان تحته تُطوى: اللوحةُ نفسُها غطّت شريطَ الجهاز الذي وُضعت له، فبقاؤها
   فجوةٌ ميّتةٌ بين الحقل والمفاتيح — ويعود الشريطُ إلى حشوته المجرّدة كما لو لا انحناءَ
   في الجهاز. والقياسُ في §5ه يجري بعد هذا، فيتبعه بلا رقمٍ مكتوبٍ بيد. */
html[data-kb] .cbarw{padding-bottom:14px}
html[data-kb] .ofc{padding-bottom:15px}
/* ودخولُ مؤلّف العرض حركةٌ على ‎transform‎: لو أُعيد رسمُه واللوحةُ مرفوعةٌ لسقط
   الرصيفُ خلف المفاتيح ربعَ ثانيةٍ ثم عاد. الحركةُ للفتح لا للكتابة. */
html[data-kb] .ofc{animation:none}
/* وما كان معلّقاً على القاع يعلو معه */
.tobot{bottom:calc(92px + var(--kb))}
/* القوائمُ التي حقلُها فوقها (البحثُ في الشجرة وفي الواردة) لا يمرّ بها محرّكُ
   الكشف — فحقلُها ليس فيها — فتُعطى مجالَها هنا: يبقى آخرُ صفٍّ قابلاً للوصول
   بالتمرير بدل أن يُدفن خلف المفاتيح. */
html[data-kb] .sb__list{padding-bottom:calc(8px + var(--kb))}
html[data-kb] .inb__list{padding-bottom:calc(10px + var(--kb))}
/* النافذةُ حوارٌ عائم، فتتوسّط ما بقي فوق اللوحة كما تفعل المنصّاتُ الأصلية — لا
   ينكمش شيءٌ فيها، إنما يُقال لها أين الحيّزُ الباقي. وسقفُها يُقيَّد به لأنّ عنصرَ
   الشبكة المتوسّطَ يتجاوز حيّزَه ولا يُقصّ به، وجسمُها ممرِّرٌ أصلاً فالقيدُ تمريرٌ
   لا قصّ. وقائمةُ المدن تتقلّص داخلَه بدل أن يصير في النافذة مُمَرِّران. */
.md{padding-bottom:var(--kb)}
html[data-kb] .md__c{max-height:min(var(--md-cap),calc(100dvh - var(--kb) - 24px))}
html[data-kb] .rch__pick{flex:1 1 auto;min-height:0}
html[data-kb] .rch__list{flex:1 1 auto;min-height:66px}

/* ═══ الشاشةُ العريضةُ القصيرة — الجوّالُ بالعرض والطيّةُ وما جرى مجراهما ═══
   «المتجر عند الاستعراض بالعرض … اجعل الجانبية تتسكرل عشان اقدر اوصل للاعدادات».
   شكوىً واحدةٌ لعلّةٍ واحدة: تخطيطٌ يقيس العرضَ ويتجاهل الارتفاع. والجوّالُ
   بالعرض ٩٣٢×٤٣٠ عرضُه عرضُ حاسوبٍ صغيرٍ وارتفاعُه نصفُ ارتفاعِ جوّالٍ رأسيّ،
   فما يُشترى بالعرض هنا يُدفَع من الارتفاع. ثلاثةُ أشياء تتبع ذلك:
     ① **السكّةُ تتمرّر** حيثما كانت — لا في الشاشة القصيرة وحدَها. أزرارُها
        عشرةٌ بارتفاعٍ ثابت: على ٦٦٧×٣٧٥ كانت تطلب ٣٩١بك بدرجة «عادي» و٤٦١
        بدرجة «أكبر»، والشدُّ أدناه يردّهما إلى ٣٥٩ و٤٣٢ — فالأولى تسع والثانيةُ
        لا. وقصُّ ما لا يُمرَّر يعني حبسَ آخرِ زرٍّ فيها — وهو اليومَ زرُّ الوضع،
        وكان الإعدادات قبل أن تصعد إلى صفِّ الأقسام. والحكمُ واحدٌ في الحالين:
        آخرُ الذيل يُبلَغ بالتمرير لا بالحظّ.
     ② **الحواشي تُشدّ** رأسياً: رأسٌ ٥٢→٤٤، وحشوُ الصفحات ٢٠→١٢. أربعون
        بكسلاً على شاشةٍ ٣٧٥ عُشرُها.
     ③ **الصفحاتُ تُقرأ عمودين**: الإعداداتُ والملفُّ والاهتماماتُ أعمدةٌ
        واحدةٌ بعرض ٥٢٠بك وسطَ ٩٠٠ — فراغان عن الجانبين وتمريرٌ طويل. العمودان
        يشتريان من الفائض الأفقيّ نصفَ التمرير الرأسيّ. */
.rail{overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
/* ‎.rail__sp‎ فارغٌ بـ‎flex:1‎: ما دام في السكّة فسحةٌ يدفع المجموعةَ السفلى إلى
   القاع، فإذا ضاقت انكمش إلى صفرٍ وتلاصقت المجموعتان وتمرّرت السكّة. لا شرطَ
   يُكتب، والسلوكان من قاعدةٍ واحدة. */
html[data-short="1"] .rail{gap:calc(7px * var(--ui));padding-top:calc(8px * var(--ui))}
html[data-short="1"] .pv__hd{min-height:calc(44px * var(--ui));padding-top:calc(6px * var(--ui));padding-bottom:calc(6px * var(--ui))}
html[data-short="1"] .st{padding-top:calc(12px * var(--ui));padding-bottom:calc(20px * var(--ui))}
html[data-short="1"] .pg{padding-top:calc(12px * var(--ui));padding-bottom:calc(20px * var(--ui))}
html[data-short="1"] .inb__srch{padding-top:calc(7px * var(--ui))}
html[data-short="1"] .inb__filters{padding-top:calc(7px * var(--ui));padding-bottom:calc(4px * var(--ui))}
html[data-short="1"] .pd{padding-top:calc(11px * var(--ui))}
html[data-short="1"] .bd__cols{padding-top:calc(9px * var(--ui));padding-bottom:calc(9px * var(--ui))}
/* الرأسُ العريضُ القصير: العنوانُ يتنحّى لشريط الحالات — والمبدّلُ إلى جانبه
   يقول أيَّ عرضٍ نحن فيه، فلا يضيع خبرٌ ويُشترى للشريط عرضٌ يحتاجه. */
html[data-short="1"] .pv__hd--flt .pv__title{display:none}
html[data-short="1"] .pv__ints{padding-top:calc(1px * var(--ui));padding-bottom:calc(8px * var(--ui))}
html[data-short="1"] .bd__c{padding:calc(9px * var(--ui)) calc(10px * var(--ui));border-radius:12px}
html[data-short="1"] .bd__side .pdw{padding-top:calc(4px * var(--ui))}
/* مؤلّفُ العرض على شاشةٍ ارتفاعُها ٤٣٠: الفُرَجُ تُشدّ فيبقى للطلب فوقَه سطران */
html[data-short="1"] .ofc{--ofcg:calc(6px * var(--ui));padding-top:calc(9px * var(--ui));padding-bottom:calc(9px * var(--ui))}
/* ── وخياراه يتجاوران فوق حقل الكتابة ────────────────────────────────────────
   الشكوى بحرفها: «على الجوال إذا جيت أقدّم عرض وأنا بالوضع الجانبي كل شيء مغطّى
   ومتداخل لدرجة أن حتى حقل الكتابة ما هو فيه»، والطلبُ بحرفه: «أحتاج تكون
   خيارات إنشاء العرض متجاورة فوق حقل الكتابة (إذا يكفي) بطريقة جميلة».
   والحسابُ يقول لِمَ: المؤلّفُ ستّةُ صفوفٍ رأسية — رأسٌ وشريطان ومقعدان وحقلٌ —
   قرابةُ مئتين وستّين بكسلاً؛ والجوّالُ بالعرض يعطي التطبيقَ ثلاثَ مئةٍ وعشرين
   بعد شريط المتصفّح. فلا يبقى للطلب الذي يُسعَّر عليه سطرٌ واحد.
   وما تشحّ به الشاشةُ العرضيةُ هو الارتفاعُ وحدَه؛ عرضُها فائضٌ. فالصفّان
   يصيران صفّاً: مجموعةُ السعر ومجموعةُ الموعد جنباً إلى جنب، وترتفع مئةُ بكسلٍ
   إلى الطلب. و‎auto-fit‎ هو الشرطُ «إذا يكفي» مكتوباً بالورقة لا بالجافاسكربت:
   إن ضاق اللوحُ عن عمودين (لوحُ الصفقات الجانبيُّ مثلاً) عادا عمودين رأسيّين
   من تلقائهما بلا سطرٍ يُكتب لهما.
   والشاشةُ الطويلةُ — الحاسوبُ واللوحيُّ — لا يبلغها هذا الشرطُ أصلاً: هناك
   يأخذ كلُّ شيءٍ راحتَه كما كان، محدوداً بسقف القامة لا مُرسَلاً بلا حدّ. */
html[data-short="1"] .ofc__grps{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(176px * var(--ui)),1fr));align-items:start;column-gap:calc(20px * var(--ui))}
/* ولوحُ الصفقات الجانبيُّ يتّسع للعمودين على الشاشة العرضية: كان سقفُه ٣٤٨
   فيُردّ المؤلّفُ إلى عمودٍ واحدٍ وتعود الشكوى من بابها. والأعمدةُ إلى جانبه
   تنساب جانبياً كما هي، فما أخذه اللوحُ لا يُفقَد. */
html[data-short="1"] .bd__side{width:clamp(calc(300px * var(--ui)),46vw,calc(420px * var(--ui)))}
/* ── وقبلَ العرضِ الأوّل: لوحٌ يقدَّم فيه عرضٌ، لا محادثةٌ تُفتح ────────────────
   «خلِّ الفكرة إنه تقديم عرض وليس شكل محادثة … ثم إذا جاء يحادث أصلاً أموره
   جيدة لأن المحادثة تفتح كاملة أصلاً». والسطرُ المتوسّطُ في المُمَرِّر («وصلك
   لأنه يطابق …») نصُّ محادثةٍ في شاشةٍ ليست محادثةً بعد، وهو يعيد ما تقوله
   بطاقةُ الطلب فوقه حرفاً — ثلاثون بكسلاً من ثلاث مئة. فيسقط هنا وحدَه: قبل
   العرض الأوّل، وعلى الشاشة القصيرة، ولا يُمَسّ بعدهما. */
html[data-short="1"] .pdw--offer{padding-top:calc(8px * var(--ui))}
html[data-short="1"] .pdw--offer .pd>.m--center{display:none}
/* ── وخطوتان لا نموذجٌ واحد ──────────────────────────────────────────────────
   «إذا كنا بالجوال بالعرض يكون الطلب الوارد ينفتح لتقديم عرض بخطوتين: خطوة
   الخيارات وخطوة وصف العرض، بخلاف لو كان واقف الجوال أو كنا على شاشة كبيرة».
   والعلّةُ حسابٌ لا ذوق: المؤلّفُ بصفّيه المتجاورين مئةٌ وثمانون بكسلاً من
   ثلاث مئةٍ وعشرين، ومع لوحة المفاتيح لا يبقى للطلب شيء. فإذا انقسم إلى
   خطوتين حمل كلٌّ منهما نصفَه: الخياراتُ رأسٌ وصفّان (١٢٥ تقريباً)، والوصفُ
   رأسٌ وحقلٌ (٩٠) — فيبقى للطلب الذي يُسعَّر عليه مئتان، ويبقى للكاتب فوق
   لوحته مئةٌ وعشرون.
   والقسمةُ في الورقة لا في الشجرة: كلُّ شيءٍ مكتوبٌ دائماً، والسِّمةُ ‎data-step‎
   تُظهِر وتُخفي. فلا عقدةَ تُنسَخ لخطوة (‎#ofGo‎ و‎#ofNote‎ مقعدٌ واحدٌ لكلٍّ —
   عقدٌ محروسٌ في verify-mini-ui-contracts)، ولا حالٌ تعلق بعد دوران الجهاز:
   الجوّالُ الواقفُ والحاسوبُ واللوحيُّ لا يبلغهم هذا الشرطُ أصلاً، فيرون
   النموذجَ كلَّه دفعةً واحدةً كما هو اليوم. */
html[data-short="1"] .ofc__hd{min-height:calc(30px * var(--ui))}
/* والخلاصةُ أوّلُ ما ينكمش في رأسٍ ضاق: هي الخبرُ الذي يُعاد قراءتُه، لا الذي
   يُفقَد كلُّه إن قُصّ طرفُه. */
html[data-short="1"] .ofc__sum{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-short="1"] .ofc[data-step="opts"] .ofc__next{display:inline-flex}
html[data-short="1"] .ofc[data-step="opts"] .ofc__note,
html[data-short="1"] .ofc[data-step="opts"]>.cp__att{display:none}
html[data-short="1"] .ofc[data-step="note"] .ofc__back{display:inline-flex}
html[data-short="1"] .ofc[data-step="note"] .ofc__k,
html[data-short="1"] .ofc[data-step="note"] .ofc__grps{display:none}
/* ── نافذةُ الإطلالة بالعرض: أوسعُ وأقصر ───────────────────────────────────────
   الشاشةُ العريضةُ القصيرةُ تعطي عرضاً وتشحّ بالارتفاع، فتُشترى الأسطرُ من
   العرض: نافذةٌ أعرضُ تجعل الوصفَ سطرين بدل أربعة، والحقائقَ صفّاً بدل صفّين،
   فتبلغ الأفعالُ الشاشةَ بلا تمرير. */
html[data-short="1"] .md__c--peek{width:min(94vw,calc(560px * var(--ui)));max-height:94dvh}
html[data-short="1"] .pk{gap:calc(7px * var(--ui));padding:calc(11px * var(--ui))}
html[data-short="1"] .pk__acts{grid-template-columns:repeat(auto-fit,minmax(calc(66px * var(--ui)),1fr))}
html[data-short="1"] .pk__go{padding:calc(8px * var(--ui))}
html[data-short="1"] .pk__t{font-size:calc(13.5px * var(--fz))}
/* الصورُ مصغَّرةٌ أكثر حيث الارتفاعُ هو الشحيح — تبقى مقروءةً وتردّ للأفعال سطراً */
html[data-short="1"] .pk .thumb{width:calc(42px * var(--ui));height:calc(42px * var(--ui));border-radius:9px}
html[data-short="1"] .pk__loc{padding:calc(7px * var(--ui)) calc(10px * var(--ui))}
html[data-short="1"] .pka{padding:calc(7px * var(--ui)) calc(4px * var(--ui))}
html[data-short="1"] .pka__i{width:calc(26px * var(--ui));height:calc(26px * var(--ui))}

/* ── عمودان حيث يُشترى الارتفاعُ بالعرض ──────────────────────────────────────
   مشروطةٌ بالحالين معاً (‎wide‎ و‎short‎): على الحاسوب الطويل العمودُ الواحدُ
   المتوسّطُ هو التصميمُ المُعتمَد ولا يُمَسّ، وعلى الجوّال الرأسيّ لا عرضَ
   يُقتسَم أصلاً. وما يمتدّ على العمودين هو ما لا يُقرأ نصفاً: رأسُ الصفحة
   وذيلُها ونموذجُها. */
/* الإعداداتُ تدفّقٌ لا شبكة: بطاقاتُها مستقلّةٌ وارتفاعاتُها متباينةٌ جداً
   (التنبيهاتُ سطران، والمظهرُ خمسة)، فالشبكةُ تُحاذيها صفّاً صفّاً وتترك تحت
   القصيرة فراغَ الطويلة. والعمودُ المتعدّد (‎columns‎) يوازن بنفسِه ويكسر حيث
   يشاء بلا فراغٍ ميّت، و‎break-inside:avoid‎ يمنع انقسامَ البطاقة بين عمودين.
   والفجوةُ تصير هامشاً لأنّ الحاويةَ لم تعد ‎flex‎، ورأسُ الصفحة وذيلُها
   يمتدّان على العمودين (‎column-span‎). */
html[data-lay="wide"][data-short="1"] .st__in{max-width:calc(920px * var(--ui));display:block;columns:2;column-gap:calc(16px * var(--ui))}
html[data-lay="wide"][data-short="1"] .st__in>*{break-inside:avoid;margin-bottom:calc(12px * var(--ui))}
html[data-lay="wide"][data-short="1"] .st__in>.st__me,
html[data-lay="wide"][data-short="1"] .st__in>.st__ver{column-span:all}
html[data-lay="wide"][data-short="1"] .st__in>.st__ver{display:block;text-align:center;margin-bottom:0}
html[data-lay="wide"][data-short="1"] .pg__in,
html[data-lay="wide"][data-short="1"] .pg__in--w,
html[data-lay="wide"][data-short="1"] .pg__in--s{max-width:calc(920px * var(--ui))}
/* الملفُّ: بطاقةُ الهويّة سطرٌ كاملٌ كما هي، ونموذجُها عمودان — الاسمُ والنبذةُ
   جنباً إلى جنبٍ بدل أن يتلوَ أحدُهما الآخر على شاشةٍ ارتفاعُها ٤٣٠. */
html[data-lay="wide"][data-short="1"] .prof__bio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:calc(12px * var(--ui)) calc(16px * var(--ui))}
html[data-lay="wide"][data-short="1"] .prof__bio>.prof__save{grid-column:1 / -1;justify-self:start}
/* الاهتماماتُ بطاقاتٌ متكرّرةٌ فتقبل العمودين بلا قسمةِ معنىً، وحقلُ الإضافة
   يمتدّ تحتها: هو ذيلُ القائمة لا صفٌّ فيها. */
html[data-lay="wide"][data-short="1"] .ints{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:calc(7px * var(--ui)) calc(9px * var(--ui))}
html[data-lay="wide"][data-short="1"] .ints>.int__add--w{grid-column:1 / -1}

/* ═══ مقبضُ العرض — الفاصلُ نفسُه يُمسَك ويُسحَب ═════════════════════════════
   أمرُ صاحب المنصّة: «أبغى بوضع الشاشة الكبيرة يتفعّل مسكُ القائمة الجانبية
   وزيادةُ عرضها وتقليصُها إلى درجةٍ منطقيةٍ يتحكّم بها المستخدم». والمحرّكُ
   والحدودُ في ‎§5ج-ز‎ من ab2.js؛ وهذه هيئتُه.
   وهو **الفاصلُ** لا شريطٌ يُضاف إليه: عرضُه صفرٌ في التخطيط فلا يزحف بكسلاً
   ولا يقتطع من لوحٍ ولا من جاره، ومنطقةُ إمساكه تطبق على الشعرة من جانبيها.
   ولا يُرى منه شيءٌ في السكون: الشعرةُ التي كانت هي هي، فإذا وقعت عليه اليدُ
   أو التركيزُ حلّ محلَّها خيطُ الهوية — إعلانٌ عن قابليّةٍ عند طلبها لا عنصرٌ
   ثالثٌ يزاحم العينَ في كلِّ نظرة.
   ولا يُبنى في التكديس: لوحٌ يملأ الشاشة لا فاصلَ فيه يُمسَك. */
.rszh{display:none}
html[data-lay="wide"] .rszh{display:block;position:relative;z-index:14;
  width:0;flex:0 0 auto;align-self:stretch;touch-action:none}
/* منطقةُ الإمساك اثنا عشرَ بكسلاً، غيرُ متساوية القسمة على الشعرة عمداً: ثلثٌ
   في اللوحة وثلثان في جارتها. فالجارةُ حشوُها ‎--pad‎ (ستّةٌ وعشرون) فما يقع
   عليها من الشريط يقع على فراغ؛ واللوحةُ أضيقُ حشواً — وأضيقُها لوحُ الواردة
   في المتجر، صفوفُه على تسعةٍ من الشعرة — فلو قُسِم الشريطُ نصفين لَابتلع من
   شريط تمريرِها ما يُحَسّ تحت الأصبع في اللوح الذي يُمرَّر بها. والفرقُ لا
   تراه عينٌ ولا تُخطئه يد: مؤشّرُ السحب يقول أين المقبضُ قبل أن يُضغَط. */
.rszh::before{content:"";position:absolute;inset-block:0;
  inset-inline-start:calc(-4px * var(--ui));width:calc(12px * var(--ui));cursor:col-resize}
/* والخيطُ يقع على الشعرة لا إلى جانبها: بكسلان بلون الهوية مركزهما مركزُها */
.rszh::after{content:"";position:absolute;inset-block:0;
  inset-inline-start:-1px;width:2px;background:var(--acc);
  opacity:0;transition:opacity .16s var(--ez);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .rszh:hover::after{opacity:.55}
}
/* حلقةُ التركيز لا تُرسم على عقدةٍ عرضُها صفر — تُقرأ إطاراً معلّقاً في الهواء.
   فالخيطُ نفسُه هو علامةُ التركيز، مُشبَعاً (وهو لونُ الهوية لا حبرٌ أسودُ —
   قانونُ «لا حدَّ أسودَ» في هذه الورقة يشمل الفواصلَ كما يشمل الحقول). */
html[data-kbnav="1"] .rszh:focus-visible{outline:none}
html[data-kbnav="1"] .rszh:focus-visible::after{opacity:1}
html[data-rsz="1"] .rszh::after{opacity:1}
/* وأثناءَ السحب: لا نصَّ يُحدَّد خلف الأصبع، ولا مؤشّرَ يتبدّل على ما يمرّ به —
   الفأرةُ تغادر منطقةَ المقبض بحكم اللقطة (‎setPointerCapture‎) فتمرّ على أزرارٍ
   وحقولٍ لكلٍّ مؤشّرُه، ولولا القسرُ لَتراقص شكلُها طولَ السحبة. */
html[data-rsz="1"]{cursor:col-resize;user-select:none;-webkit-user-select:none}
html[data-rsz="1"] *{cursor:col-resize!important}

/* ═══ دفعة ٢٠٢٦-٠٨-٢٣: الإضافةُ مرقّمةٌ ولها حكمُ الرسالة، وقائمةُ التعديل ═══ */
/* سطرُ «رداً على…» في متن الطلب عند المزوّد: رتبةُ ما رُدَّ عليه تُقرأ قبل النصّ */
.pd__updq{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));align-self:flex-start;
  font-size:calc(10px * var(--fz));font-weight:700;color:var(--acc-ink);opacity:.85}

/* ── لوحُ الإضافات أسفلَ حقل التعديل ──────────────────────────────────────────
   يملأ ما فضل من الشاشة ولا ينكمش دون محتواه (‎1 0 auto‎)، والمُمَرِّرُ ‎.cp‎
   وحدَه — لا مُمَرِّرَ داخل مُمَرِّر. */
.edadds{width:100%;max-width:calc(620px * var(--ui));flex:1 0 auto;
  display:flex;flex-direction:column;gap:calc(9px * var(--ui));
  padding:calc(12px * var(--ui)) calc(13px * var(--ui));
  border-radius:16px;border:1px dashed var(--line);
  background:color-mix(in srgb,var(--fill) 55%,transparent)}
.edadds__h{display:flex;align-items:center;gap:calc(8px * var(--ui))}
.edadds__s{font-size:calc(10.5px * var(--fz));color:var(--ink3);text-align:end}
.edadds__l{display:flex;flex-direction:column;gap:calc(8px * var(--ui))}
.eda{display:flex;flex-direction:column;gap:calc(5px * var(--ui));
  padding:calc(10px * var(--ui)) calc(12px * var(--ui));
  border-radius:13px;border:1px solid var(--line);background:var(--surf);
  animation:var(--fx-slide) .26s var(--ez) backwards}
.eda--ed{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
/* الرتبةُ يميناً وزرّاها يساراً داخلها — «اعلى يسارها داخلها» */
.eda__h{display:flex;align-items:center;gap:calc(6px * var(--ui))}
.eda__k{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));
  font-size:calc(10.5px * var(--fz));font-weight:700;color:var(--acc-ink)}
/* ثمانيةٌ وعشرون مرئيةً، وما تُصيبه الأصبعُ ثمانيةٌ وثلاثون: زرّان متجاوران
   في ركنٍ واحدٍ أحدُهما يحذف — فلا يُترك ما بينهما لزلّة إبهام. */
.eda__b{position:relative;width:calc(28px * var(--ui));height:calc(28px * var(--ui));flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:9px;
  background:var(--fill);color:var(--ink2);cursor:pointer;
  transition:background .16s,color .16s,transform .15s var(--ez)}
.eda__b::after{content:"";position:absolute;inset:calc(-5px * var(--ui))}
.eda__b:active{transform:scale(.92)}
.eda__b--bad{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}
@media (hover:hover) and (pointer:fine){
  .eda__b:hover{background:var(--fill2);color:var(--ink)}
  .eda__b--bad:hover{background:color-mix(in srgb,var(--bad) 20%,transparent);color:var(--bad)}
}
.eda__q{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));align-self:flex-start;
  padding:calc(3px * var(--ui)) calc(9px * var(--ui));border-radius:999px;
  background:var(--acc-t);color:var(--acc-ink);font-size:calc(10px * var(--fz));font-weight:700}
.eda__x{display:block;font-size:calc(13px * var(--fz));line-height:1.85;white-space:pre-wrap;color:var(--ink)}
.eda__ed{display:flex;width:100%;padding:calc(6px * var(--ui)) calc(10px * var(--ui));
  border-radius:11px;border:1px solid var(--line);background:var(--bg)}
.eda__ed textarea{width:100%;min-width:0;border:0;background:transparent;outline:none;resize:none;
  field-sizing:content;min-height:2lh;max-height:9lh;padding:0;
  font-size:calc(13px * var(--fz));line-height:1.8;color:var(--ink);font-family:inherit}
.eda__acts{display:flex;align-items:center;gap:calc(7px * var(--ui));padding-top:calc(2px * var(--ui))}
.eda__non{display:flex;align-items:center;gap:calc(9px * var(--ui));
  padding:calc(14px * var(--ui)) calc(12px * var(--ui));border-radius:13px;
  background:var(--fill);color:var(--ink3);font-size:calc(11.5px * var(--fz));line-height:1.7}
/* «تمّ» مقفولٌ على حقلٍ فارغ: الفراغُ ليس حذفاً، وللحذف بابُه الأحمر */
.btnA[disabled]{opacity:.42;cursor:not-allowed}

/* ═══ دفعة ٢٠٢٦-٠٨-٢٤: الإضافةُ رسالةٌ موسومةٌ، والحذفُ يترك شاهدة ═══ */
/* ── وسمُ «إضافة (٢) على الطلب» فوق الفقاعة ───────────────────────────────────
   يُلمَس فيفتح تسلسلَ الإضافات، فهو زرٌّ لا لافتة. ولونُه لونُ الهوية في فقاعة
   الطرف الآخر، وحبرُ فقاعتي في فقاعتي — لا لونَ فاتحٌ على داكنٍ يُقرأ ٢:١. */
.badd{display:flex;align-items:center;gap:calc(5px * var(--ui));align-self:flex-start;max-width:100%;
  margin-bottom:calc(4px * var(--ui));padding:calc(3px * var(--ui)) calc(9px * var(--ui));
  border:0;border-radius:999px;background:var(--acc-t);color:var(--acc-ink);
  font-size:calc(10px * var(--fz));font-weight:700;font-family:inherit;cursor:pointer;text-align:start;
  transition:background .16s}
.badd>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badd--gone{background:var(--fill);color:var(--ink3)}
.bm .badd{background:color-mix(in srgb,var(--me-ink) 15%,transparent);color:var(--me-ink)}
.bm .badd--gone{background:color-mix(in srgb,var(--me-ink) 8%,transparent);
  color:color-mix(in srgb,var(--me-ink) 66%,transparent)}
@media (hover:hover) and (pointer:fine){
  .badd:hover{background:var(--acc-tt)}
  .bm .badd:hover{background:color-mix(in srgb,var(--me-ink) 22%,transparent)}
}
.badd:active{transform:scale(.97)}

/* ── شاهدةُ الرسالة المحذوفة — صفٌّ واحدٌ باهتٌ في مكانها ───────────────────── */
.btomb{flex-direction:row;align-items:center;gap:calc(7px * var(--ui));opacity:.66}
.btomb__x{flex:1;min-width:0;font-size:calc(12.5px * var(--fz));font-style:italic}
.btomb .bm__w,.btomb .bt__w{flex:0 0 auto}
/* واقتباسُ ما حُذف يُقرأ محذوفاً لا فارغاً */
.mq--del bdi{font-style:italic;opacity:.8}

/* ── تسلسلُ الإضافات في بوب الإطلالة ───────────────────────────────────────── */
.pkadd{display:flex;flex-direction:column;gap:calc(6px * var(--ui));width:100%;
  padding:calc(9px * var(--ui)) calc(11px * var(--ui));border-radius:13px;background:var(--fill)}
.pkadd__h{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));
  font-size:calc(10.5px * var(--fz));font-weight:700;color:var(--acc-ink)}
.pkadd__l{display:flex;flex-direction:column;gap:calc(7px * var(--ui));
  max-height:34vh;overflow-y:auto;overflow-x:hidden}
.pkadd__i{display:flex;align-items:flex-start;gap:calc(8px * var(--ui));
  padding:calc(6px * var(--ui)) calc(8px * var(--ui));border-radius:10px;background:var(--surf)}
.pkadd__i.on{box-shadow:0 0 0 1.5px var(--acc) inset}
.pkadd__n{flex:0 0 auto;font-size:calc(10.5px * var(--fz));font-weight:700;color:var(--acc-ink);
  padding-top:calc(2px * var(--ui))}
.pkadd__c{display:flex;flex-direction:column;gap:calc(2px * var(--ui));min-width:0;flex:1}
.pkadd__q{display:inline-flex;align-items:center;gap:calc(4px * var(--ui));align-self:flex-start;
  font-size:calc(9.5px * var(--fz));font-weight:700;color:var(--ink3)}
.pkadd__x{font-size:calc(12px * var(--fz));line-height:1.8;color:var(--ink);display:block;white-space:pre-wrap}
.pkadd__t{font-size:calc(9.5px * var(--fz));color:var(--ink3)}

/* ═══ الشاشةُ الخالية — تقول ما يملؤها، بأيقونة قسمها ═══════════════════════════
   شكوى صاحب المنصّة (٢٠٢٦-٠٨-٢٤): «خلّ محتوى الشاشة الفارغة والبدائية والكلام
   يمثّل هويتي، وواضح وصريح وبشري إنساني… وليس كأنه آلةٌ لا تفهم. مثلاً أنت تشير
   للواردة بغير أيقونة قسمها. أريد احترافية نظيفة واضحة».
   وكان الخلاءُ حبّةً رماديّةً وحيدةً (‎.noteP‎) تطفو في وسط لوحٍ فارغٍ كامل.
   و‎.noteP‎ أداةُ **حاشيةٍ** في مجرى الكلام — سطرٌ صغيرٌ بين الفقاعات يعلّق على ما
   حولَه — لا لافتةُ شاشة. فإذا وُضعت وحدَها في لوحٍ خالٍ لم تقل ما هذا المكانُ،
   ولا ما الخطوةُ التالية، ولا حملت من هوية المنصّة حرفاً.
   وهذه هيئةُ الخلاء بعدها، ثلاثُ طبقاتٍ لا واحدة: بلاطةُ أيقونةِ **القسم نفسِه**،
   ثمّ عنوانٌ بوزن العناوين يقول الحالَ في جملة، ثمّ سطرٌ واحدٌ يشرحه وخطوةٌ تُنقَر
   متى كانت ثَمّ خطوة. ولا سطرَ رابع: الشاشةُ الخاليةُ تُقرأ بلمحةٍ أو لا تُقرأ. أسرتُها أسرةُ ‎.crash‎ و‎.gate__c‎: مقاسٌ من سلَّم
   ‎--ui/--fz‎، وزوايا ولونٌ من التوكنز، وخطٌّ واحدٌ كما في كلِّ المنصّة.
   و‎flex:1 0 auto‎ لا ‎flex:1‎: الأساسُ ارتفاعُ المحتوى ثمّ ينمو ليملأ ما زاد،
   فيتوسّط في اللوح الطويل ولا يُقَصّ رأسُه في الشاشة القصيرة (‎justify-content:
   center‎ في مُمَرِّرٍ أضيقَ من محتواه يبتلع أعلاه بلا طريقٍ إليه). */
.void{flex:1 0 auto;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(7px * var(--ui));padding:calc(26px * var(--ui)) calc(20px * var(--ui));text-align:center}
.void__ic{width:calc(46px * var(--ui));height:calc(46px * var(--ui));flex:0 0 auto;border-radius:14px;
  background:var(--acc-t);color:var(--acc-ink);display:grid;place-items:center;margin-bottom:calc(3px * var(--ui))}
.void__t{font-size:calc(15.5px * var(--fz));font-weight:900;color:var(--ink);line-height:1.6}
.void__p{font-size:calc(12.5px * var(--fz));line-height:1.85;color:var(--ink2);max-width:36ch}
.void .gate__go{margin-top:calc(6px * var(--ui));display:inline-flex;align-items:center;gap:calc(6px * var(--ui))}
/* والخطواتُ الثلاثُ هي هي التي في البوابة (‎.pt__how‎، والبانِي ‎howH‎ في ab2.js):
   حكايةُ المنصّة تُروى بلسانٍ واحدٍ حيثما رُويت، فلا يقرأ الزائرُ في البوابة
   ثلاثاً وفي أوّل شاشةٍ يدخلها ثلاثاً غيرَها. */
.void .pt__how{margin-top:calc(5px * var(--ui));text-align:start}
/* والانتظارُ في اللوح الخالي سطرٌ متوسّطٌ لا حبّةٌ في طرفه */
.void .pool__wait{padding:0}
/* ولوحُ المحادثة مُمَرِّرٌ كتليٌّ، فيُقلَب عموداً حين يحمل خلاءً ليتوسّط فيه */
.th--void{display:flex;flex-direction:column}
.th--void .th__in{flex:1;justify-content:center}
/* ══ والقائمةُ إلى جانبه سطرٌ واحد ═════════════════════════════════════════════
   اللوحُ العريضُ يحمل الحكايةَ والخطوة، والقائمةُ إلى جانبه عمودٌ ضيّق: عنوانان
   متطابقان وزرّان لفعلٍ واحدٍ في شاشةٍ واحدةٍ يُقرآن عطباً في الرسم. فسطرُ
   ‎.sb__empty‎ القائمُ يكفيها (‎voidLineH‎)، ولا صنفَ جديدٌ لها. */

/* ══ تواصل معنا — قناةُ الدعم داخل التطبيق ═══════════════════════════════════
   خلف رايةٍ (‏‎FF_SUPPORT_THREADS‎)، وهي الموضعُ الوحيدُ الذي مسّته خطّةُ
   المرصد في سطح المستخدم. والطوقُ على **غلاف** الحقل لا على الحقل — كبقيّة
   حقول المنصّة، ولا حدَّ أسودَ بحال. */
.sup__l{display:flex;flex-direction:column;gap:calc(6px * var(--ui));max-height:38dvh;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.sup__r{display:flex;align-items:center;gap:calc(9px * var(--ui));width:100%;min-width:0;
  padding:calc(10px * var(--ui)) calc(12px * var(--ui));border:1px solid var(--line);
  border-radius:13px;background:var(--surf);color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.sup__r:active{transform:scale(.99)}
.sup__rt{flex:1;min-width:0;font-size:calc(12.5px * var(--fz));font-weight:500;line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup__rs{flex:0 0 auto;font-size:calc(10.5px * var(--fz));color:var(--ink3);line-height:1.6}
.sup__new{display:flex;flex-direction:column;gap:calc(8px * var(--ui))}
.sup__f{display:flex;border:1px solid var(--line2);border-radius:13px;background:var(--surf);
  transition:box-shadow .2s var(--ez),border-color .2s var(--ez)}
.sup__f:focus-within{border-color:var(--focus-edge);box-shadow:var(--focus-halo)}
.sup__i{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:inherit;
  font-size:calc(12.5px * var(--fz));line-height:1.8;padding:calc(10px * var(--ui)) calc(13px * var(--ui))}
.sup__i--ta{resize:none;font-family:inherit}
.sup__i::placeholder{color:var(--ink3)}
.sup__err{font-size:calc(11.5px * var(--fz));color:var(--bad);line-height:1.7}
.sup__ms{display:flex;flex-direction:column;gap:calc(8px * var(--ui));max-height:44dvh;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.sup__m{display:flex;flex-direction:column;gap:calc(3px * var(--ui));align-items:flex-start;max-width:86%}
.sup__m--s{align-self:flex-end;align-items:flex-end}
.sup__mb{padding:calc(9px * var(--ui)) calc(13px * var(--ui));border-radius:16px;background:var(--fill);
  font-size:calc(12.5px * var(--fz));line-height:1.8;overflow-wrap:anywhere;white-space:pre-wrap}
.sup__m--s .sup__mb{background:var(--acc-t);color:var(--acc-ink)}
.sup__mt{font-size:calc(10px * var(--fz));color:var(--ink3);padding:0 calc(4px * var(--ui))}