/* ════════════════════════════════════════════════════════════════════════════
   أبيلي ٢ — التطبيقُ هو التصميم
   ترجمةٌ حرفيةٌ لأنماط ‎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('/mini-app/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('/mini-app/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('/mini-app/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('/mini-app/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('/mini-app/fonts/thmanyah-serif-text-black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* ── الأرضية واللوحتان — قيمُ التصميم حرفاً ─────────────────────────────────── */
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,
.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,
.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{
  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‎، فهو المصدرُ
   نفسُه لا مصدرٌ ثانٍ يتباعد. */
html[data-boot-th="فاتح"],
[data-th="فاتح"]{
  --bg:#F6FAF9; --side:#ECF3F1; --surf:#FFFFFF; --ink:#0F211F; --ink2:#4C615D; --ink3:#7C918C;
  --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:#0E8C80; --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));
  --ok:#1D8A5F; --ok-t:#E4F4EC; --warn:#B45309; --bad:#C0392B; --bad-t:#FAEAE8; --me:#10201E; --me-ink:#F5FAF8;
  /* رماديُّ الشارة: حبرٌ ثالثٌ بلا خُضرة. ‎--ink3‎ نفسُه ‎#7C918C‎ — يصلح نصّاً
     ولا يصلح قرصاً من سبعة بكسلات، فيُقرأ لونَ الهوية فينقلب معنى النقطة.
     وأزرقُ «قيد التنفيذ» صار رمزاً لأنّه يُطلى على ثلاثة أشكال: قرصٌ وفقاعةٌ وإبهام. */
  --dot-mute:#9AA1A5; --bl:#5B8DD6;
  /* أخضرُ الإيصال على فقاعة كلامي: الفقاعةُ (‎--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="داكن"]{
  --bg:#0A0D13; --side:#0D111A; --surf:rgba(255,255,255,.045); --ink:#EAF1F5; --ink2:#8792A3; --ink3:#5F6B7A;
  --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; --me-ok:#5BE3A6;
  --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);
  /* ── حواشي الجهاز أفقياً — نتوءُ الشاشة في الوضع العرضيّ ───────────────────
     ‎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%}}
html[data-lay="wide"]{--side-w:calc(296px * var(--ui));--inbox:calc(292px * 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}}
@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;
  /* منحنيا أبيلي: خروجٌ هادئٌ لِما يستقرّ (‎--ez‎)، وارتدادةٌ خفيفةٌ لِما يظهر
     من عدمٍ (‎--ez-b‎). كانا يُنسخان حرفاً في كلِّ قاعدة، فاختلفت الأرقامُ بين
     سطحٍ وسطحٍ بلا قصد — والاسمُ يجمعها فيصير للتطبيق إيقاعٌ واحد. */
  --ez:cubic-bezier(.16,1,.3,1);--ez-b:cubic-bezier(.34,1.56,.64,1)}
.nofx{--fx-pop:none;--fx-rise:none;--fx-slide:none;--fx-grow:none;--fx-glow: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:ab-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‎ هو ما يمنح الحقلَ الفارغَ ارتفاعَ تلميحه الملفوف. وما
   لم يعرفه المحرّكُ يبقى الحقلُ سطراً واحداً والتلميحُ يُقصّ تحت حافّته — وهو
   الوجهُ الثاني من «كنها تختفي» على الأجهزة التي لم تبلغ الخاصيّة. سطران
   يكفيان تلميحاتِ هذه الأشرطة على عرض الهواتف. */
@supports not (field-sizing:content){
  .cbar textarea:placeholder-shown,.ofc__note textarea:placeholder-shown,.md__ta:placeholder-shown{min-height:2lh}
}

/* ── اتجاهُ الأيقونة اتجاهُ القراءة ────────────────────────────────────────────
   ‎.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{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)}
.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}
/* مِفتاحُ المحادثة الواحدة: ملتصقٌ بسقف المُمَرِّر فيبقى في العين، والخيطُ يُفتَح
   على آخِره فلا ينفع مِفتاحٌ يسكن أوّلَه ويمضي. */
.trth{position:sticky;top:0;z-index:3;pointer-events:none;padding-block:calc(2px * 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__f{font-size:calc(10.5px * var(--fz));color:var(--ink3)}

/* ════ عالم العميل — الشجرة الجانبية ════ */
/* ── أرضيّةُ طلباتي: بيضاءُ كصندوق الواردة، وهويّةٌ باقيةٌ في رأسها ────────────
   أمرُ صاحب المنصّة: «اجعل لون خلفية منطقة طلباتي مثل خلفية منطقة الطلبات
   الواردة للمتجر بيضاء بطريقةٍ متناسقة دون افقاد الهوية للهيدر وغيره».
   وكانت اللوحةُ كلُّها ‎--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:0 calc(11px * var(--ui));padding-inline-start:calc(11px * var(--ui) + var(--safe-s));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(-11px * var(--ui));
  padding:calc(11px * var(--ui)) calc(11px * var(--ui)) calc(9px * var(--ui));
  padding-inline-start:calc(11px * var(--ui) + var(--safe-s));
  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));padding:0 calc(3px * var(--ui))}
.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(5px * var(--ui));height:calc(29px * var(--ui));padding:0 calc(11px * 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;font-family:inherit}
@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}
.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(--ok-t);color:var(--ok)}
/* «غير مقروء» شارةٌ على الصورة نفسها، في ركنها الأعلى الخارجيِّ كشارةِ الجرس —
   كانت في طرف الصفِّ الآخر ملتصقةً بالسعر، فتُقرأ كأنها من شأنه. */
.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}
.kid__p{font-size:calc(12.5px * var(--fz));font-weight:700;white-space:nowrap;color:var(--ink)}
.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);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(-11px * var(--ui));
  padding:calc(8px * var(--ui)) calc(11px * var(--ui)) calc(10px * var(--ui));
  padding-inline-start:calc(11px * var(--ui) + var(--safe-s));
  background:var(--side);border-top:1px solid var(--line);
  transition:background .3s ease}
/* ── صفُّ الذيل: هويّةٌ، ثمّ بابٌ، ثمّ ترس ─────────────────────────────────────
   كان الذيلُ زرّاً واحداً يملأ العرض، وفي طرفه ترسٌ مرسومٌ في جوفه — لا هدفاً
   ثانياً بل زخرفةً على الهدف الأوّل. فلمّا وجب أن يقف بينهما بابُ الدخول (وهو
   زرٌّ، ولا يجوز زرٌّ في جوف زرّ) صار الصفُّ ثلاثةً صريحة: ‎.sb__acct‎ يأخذ ما
   بقي من العرض ويفتح الإعدادات، و‎.btnIn‎ للزائر وحدَه، و‎.sb__gear‎ ترسٌ صار
   هدفاً قائماً بنفسه في مكانه الذي كان. ومن دخل لا يرى فرقاً: اثنان متجاوران
   حيث كان واحدٌ فيه رسمُ ترس. */
.sb__frow{display:flex;align-items:center;gap:calc(6px * var(--ui))}
.sb__acct{display:flex;align-items:center;gap:calc(8px * var(--ui));flex:1;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}
.sb__gear{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:calc(31px * var(--ui));height:calc(31px * var(--ui));padding:0;border:0;border-radius:9px;background:transparent;color:var(--ink3);cursor:pointer;transition:background .16s,color .16s;font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .sb__acct:hover{background:var(--fill)}
  .sb__gear:hover{background:var(--fill);color:var(--ink2)}
}
.sb__gear:active{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__acct .nm{display:flex;align-items:center;gap:calc(4px * var(--ui));font-size:calc(12px * var(--fz));font-weight:500;min-width:0}
.sb__acct .nm>bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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}
.hd__chatav{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}
@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)}
}
/* شرائطُ الرأس المتدفقة */
.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}
.strip .act{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));padding:calc(7px * var(--ui)) calc(14px * var(--ui));border:1px solid var(--line);border-radius:999px;background:var(--surf);font-size:calc(12px * var(--fz));font-weight:500;cursor:pointer;transition:background .16s;color:var(--ink);font-family:inherit}
@media (hover:hover) and (pointer:fine){
  .strip .act:hover{background:var(--fill)}
}
.strip .act--bad{color:var(--bad)}
/* صفُّ مقارنة */
.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)}

/* ════ الساحة — لوحُ الرسائل ════ */
.th{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:calc(16px * var(--ui)) var(--pad) calc(8px * var(--ui))}
.th__in{max-width:calc(640px * var(--ui));margin:0 auto;display:flex;flex-direction:column;gap:var(--gap)}
.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{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{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{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{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(10px * var(--fz));color:var(--ink3)}
.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(--ok);color:var(--bg)}
.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__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{opacity:.6}
/* صوتية */
.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))}
/* شريطُ التقييم */
.rev{padding:calc(6px * var(--ui)) var(--pad) 0;flex:0 0 auto}
.rev__in{max-width:calc(640px * var(--ui));margin:0 auto;display:flex;align-items:center;gap:calc(10px * var(--ui));padding:calc(11px * var(--ui)) calc(14px * var(--ui));border-radius:14px;background:var(--ok-t);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);animation:var(--fx-slide) .3s var(--ez) backwards}
.rev__in>svg{color:var(--ok);flex:0 0 auto}
.rev__c{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2.5px * var(--ui))}
.rev__c b{font-size:calc(12.5px * var(--fz));font-weight:700}
.rev__c span{font-size:calc(10.5px * var(--fz));color:var(--ink2)}
.rev__go{padding:calc(7px * var(--ui)) calc(15px * var(--ui));border:0;border-radius:999px;background:var(--ok);color:var(--bg);font-size:calc(11.5px * 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__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}
@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:600;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{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__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)}
.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)}
.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:600;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;background:var(--bg);min-height:0}
.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:1px solid var(--line);background:var(--side)}
/* صدرُ السكّة: واجهةُ المتجر، وهي بابُ الواردة لا بابُ الملفّ (قرارُ صاحب
   المنصّة ٢٠٢٦-٠٨-٢١ — انظر ‎renderPV‎). والخطُّ أنحفُ من خطِّ بقيّة الأيقونات:
   واجهةُ المتجر ستُّ عقدٍ متلاصقةٍ في أربعٍ وعشرين نقطة، فسمكُ ٢٫٣ يطمس شبّاكَها
   ومظلّتَها فتُقرأ كتلةً — «ولا تخليها بولد مع المحافظة على الوضوح». */
.rail__home{position:relative;width:calc(31px * var(--ui));height:calc(31px * var(--ui));border-radius:10px;display:grid;place-items:center;flex:0 0 auto;border:0;cursor:pointer;transition:background .16s,color .16s;background:var(--acc-t);color:var(--acc-ink)}
.rail__home svg{stroke-width:1.85}
.rail__home.on{background:var(--acc);color:var(--bg)}
.rail__home.on svg{stroke-width:2}
/* والنقطةُ على البلاطة المضاءة تنقلب حبراً: أخضرُ على أخضرَ لا يُرى */
.rail__home.on .rail__dot{background:var(--bg)}
.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__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)}
}
.pv__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2.5px * var(--ui));min-height:0}
.pv__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}
.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}
/* ── رأسُ خطّ الصفقات: بدجُ المتجر ثم شريطُ الحالات ─────────────────────────────
   الحالاتُ ستٌّ ومعها الفرزُ، فهي «محدودةٌ غالباً» كما قال صاحبُ المنصّة — تسكن
   بقيّةَ الرأس بعد اسم المتجر وتنسحب جانبياً متى ضاق. و‎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(6px * var(--ui)) var(--pad) calc(2px * 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)}
/* اللوحات */
.pv__row{flex:1;min-height:0;display:flex}
.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:600}
/* ══ لوحُ التفاصيل: رأسٌ يثبت، ومتنٌ يمشي، ورصيفٌ أسفلَه لا فيه ══════════════
   الشكوى بحرفها: «إذا حرّكت سكرول بداخل تفاصيل الطلب الوارد يتحرّك … فقط دون
   شيءٍ آخر». وهي وصفٌ دقيقٌ لِما كان: اللوحُ مُمَرِّرٌ واحدٌ فيه لاصقان — بطاقةُ
   الطلب في قمّته ومؤلّفُ العرض في قاعه — فلا يبقى للأصبع إلا السطرُ الواحدُ
   بينهما. والبطاقةُ المفتوحةُ تبلغ آلافَ البكسلات وهي لاصقةٌ بـ‎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}
/* ولوحٌ بلا رصيفٍ (طلبٌ منتهٍ) يحمل حشوةَ الجهاز بنفسه */
.pd--bare{padding-bottom:max(14px * var(--ui),var(--safe-b))}
/* والحشوةُ السفلى ثلاثٌ لا اثنتا عشرة: تسعُها في الرأس نفسِه (أو في المتن حين
   ينفتح)، فيجتمع تحت العنوان مطويّاً ‎9+3‎ كما فوقَه ‎12‎ — ميزانٌ لا يختلّ بحال. */
.pd__req{display:flex;flex-direction:column;padding:calc(12px * var(--ui)) calc(17px * var(--ui)) calc(3px * var(--ui));border-radius:16px;background:var(--surf);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:var(--shadow)}
/* مطويّاً: البطاقةُ هي الرأسُ نفسُه، فتثبت كاملةً فوق ما يمرّ تحتها.
   مفتوحاً: تمشي البطاقةُ في المجرى ويثبت رأسُها وحدَه. والقاعدةُ التي لا تُخرَق:
   ‎.open‎ لا تملك من تخطيط الرأس شيئاً — لا عرضاً ولا حشوةً ولا موضعاً — فالرأسُ
   صندوقٌ واحدٌ في الحالين. وكان يملكها فكان سهمُ الطيّ يقفز ٣٤بك عرضاً و١٢بك
   ارتفاعاً في اللحظة التي تُنزَع فيها الوسمُ آخرَ السفر: خطوةٌ وسيطةٌ تُرى بعد
   أن يكون المتنُ قد انطوى كلَّه. ولم يبقَ لها إلا الاستدارةُ — وهي لا تُحرّك بكسلاً. */
.pd__req:not(.open){position:sticky;top:0;z-index:5}
[data-th="داكن"] .pd__req{background:rgba(16,20,28,.82)}
/* والرأسُ المثبَّتُ مصمتٌ لا زجاجيّ: ما يمرّ تحته نصُّ الطلب نفسُه لا أرضيّةُ
   صفحةٍ ساكنة، و‎.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)}
}
[data-th="فاتح"] .po .oc__prn{color:var(--me-ink)}
/* ── مؤلِّفُ العرض: رصيفٌ أسفلَ المُمَرِّر لا لاصقٌ في جوفه ────────────────────
   كان ‎position:sticky;bottom:0‎ داخلَ ‎.pd‎، فيقع تحت بطاقةِ الطلب اللاصقة
   (‎z-index:5‎) وتبتلعه متى طالت — يرتفع مع لوحة المفاتيح ولا يُرى، وهو ما
   يُشتكى: «حقلُ كتابة العرض يختفي». وموضعُه الصحيحُ موضعُ ‎.cbarw‎ من المحادثة:
   أخٌ يجلس تحت المُمَرِّر في ‎.pdw‎ — لا يعلوه شيءٌ، ويركب اللوحةَ بالطريق
   المُقاس نفسِه (‎[data-kb-dock]‎ في §5ه). */
.ofc{flex:0 0 auto;display:flex;flex-direction:column;gap:calc(9px * var(--ui));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}
.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)}
.ofc__cancel{padding:calc(4px * var(--ui)) calc(11px * var(--ui));border-radius:8px;border:0;background:var(--fill);color:var(--ink2);font-size:calc(11px * var(--fz));cursor:pointer;font-family:inherit}
/* مدينةُ العرض في رأس المؤلّف: رقاقةٌ إلى جانب سطر الخلاصة — فما يقرؤه العميلُ
   عن هذا العرض مجموعٌ في مكانٍ واحدٍ يُقرأ قبل الإرسال. تنكمش قبل غيرها على
   الشاشة الضيّقة (‎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}
.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="now"] .ofc__cap[data-for="now"],
.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:600;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))}
.pg__in--w{max-width:calc(640px * 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‎ أوّلَ ظهورٍ له
   وحدَه — وهي الذاكرةُ نفسُها التي تحمي صفوفَ القائمة الرئيسية. وكانت البطاقةُ
   والرقاقةُ تنبضان على كلِّ رسمٍ مهما كان سببُه، فتُقفِز الصفحةُ كلُّها لتغيير
   مقياسِ تطابقٍ في سطرٍ واحد. */
.intr{display:flex;flex-direction:column;gap:calc(7px * 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{display:flex;align-items:center;gap:calc(8px * var(--ui));min-width:0;min-height:calc(30px * var(--ui))}
/* السطرُ الثاني هادئ: لا يُقرأ إلا حين يُقصد، فلا يزاحم اسمَ الاهتمام نفسَه. */
/* الوسمُ لا ينمو: ‎flex:1‎ كان يمدّه إلى عرض السطر كلِّه فيدفع المقياسَ إلى سطرٍ
   ثانٍ ويصير الصفُّ ١١٢px بلا داعٍ. الآن يأخذ مقاسَ نصّه، ويُدفع المقياسُ للطرف. */
.intr__m{display:flex;align-items:center;justify-content:space-between;gap:calc(8px * var(--ui));flex-wrap:wrap}
.intr__l{font-size:calc(10.5px * var(--fz));color:var(--ink3);flex:0 1 auto;min-width:0;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:600;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:600;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)}
/* التقارير */
.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)}
.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;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{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)}
}
/* في كرت الحساب يقف على مقاس الكرت: الكرتُ أفسحُ من صفِّ الذيل، والبابُ فيه
   أوّلُ ما يُنقر في صفحةٍ كلُّها إعدادات. */
.st__me>.btnIn{height:calc(34px * var(--ui));padding:0 calc(15px * var(--ui));font-size:calc(12px * var(--fz))}

/* ════ النوافذ ════ */
.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 .2s ease-out 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-pop .32s var(--ez-b) 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))}
.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__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{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{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{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:600;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}
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{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)}

/* فقاعةُ الإضافة — ابنةُ الأصل لا شقيقتُه */
.bq--add{padding:calc(10px * var(--ui)) calc(13px * var(--ui));border-radius:14px 4px 16px 16px;background:color-mix(in srgb,var(--me) 62%,var(--surf))}
.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{border-inline-start-color:var(--me-ink);background:color-mix(in srgb,var(--me-ink) 9%,transparent)}
.bm .mq__n{color:var(--me-ink)}
.bm .mq bdi{color:color-mix(in srgb,var(--me-ink) 80%,transparent)}
.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{animation:ab-ping 1.5s ease-out 1}
.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{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‎ حول سهم الكرت رُفعت: ثلاثُ حركاتٍ لا نهائيةٍ وثلاثُ
   قواعدَ لم يكن يطلقها سطرٌ واحدٌ في التطبيق — صنفٌ لا يكتبه أحد. وحبّةُ الحالة
   ‎.stg--news‎ تحمل الخبرَ نفسَه بلونها، فلا ثانيةَ لها. */

/* المجموعةُ الموسّعة: إطارٌ منحنٍ خفيفٌ شفيف — فالعروضُ أبناءُ الطلب لا طلباتٌ أخرى */
/* إطارُ الفتح يُرسم على طبقةٍ خلفيةٍ تتمدّد للخارج — وصندوقُ الصفِّ نفسِه لا
   يتغيّر قيد أنملة. كان ‎.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)}

/* رقاقةُ الترتيب — خفيفةٌ كالهوية */
.chip--sort{display:inline-flex;align-items:center;gap:calc(5px * var(--ui));color:var(--ink2);border-style:dashed}

/* ═══ السحبُ للتحديث — الصفحةُ تأتي مع الأصبع ═══════════════════════════════
   الشكلُ القديمُ كان يحرّك شيئاً واحداً: قرصاً ينزل فوق قائمةٍ مسمّرةٍ في
   مكانها. ذلك تشغيلُ أداةٍ ملصوقةٍ بالزجاج لا سحبُ سطح — لا وزنَ في الإيماءة،
   ولا شيءَ يرتدّ، ولا شيءَ يبقى مفتوحاً بينما تجري الجولة.
   الآن يركب محتوى المُمَرِّر السحبَ: كلُّ ابنٍ مباشرٍ يحمله التحويلُ نفسُه،
   مكتوباً سطراً من ‎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}
/* مركونٌ بمقدار قرصٍ وفُسحةٍ فوق حافّة النافذة، فيختفي كلَّه في السكون */
.ptr__rider{position:absolute;inset-inline:0;inset-block-start:calc(-48px * var(--ui));display:flex;justify-content:center}
/* ═══ القرصُ أربعُ عُقَدٍ، مقسومةً بمن يملك كلَّ خاصيّة ═══
   كان عقدةً واحدةً تحمل الرمز، ولذلك لم يكن التسليحُ يُقال إلا لوناً: السحبُ
   يكتب دورانَ الرمز في ‎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)}}
[data-motion="هادئ"] .ptr--spin .ptr__ring,[data-motion="هادئ"] .ptr--spin .ptr__arc,
[data-motion="هادئ"] .ptr__gl.is-result svg{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .ptr--spin .ptr__ring,.ptr--spin .ptr__arc,.ptr__gl.is-result svg{animation:none!important}
}

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

/* انتقالاتُ الصفحات: اللوحُ الداخلُ ينزلق بتباطؤٍ أمامي، فتحاً ورجوعاً */
@keyframes ab-pgf{from{opacity:.55;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes ab-pgb{from{opacity:.6;transform:translateX(12px) scale(.995)}to{opacity:1;transform:none}}
.pg-f{animation:ab-pgf .3s cubic-bezier(.2,.8,.3,1) both}
.pg-b{animation:ab-pgb .28s cubic-bezier(.2,.8,.3,1) both}

/* نافذتا المعاينة وقائمة الرسالة */
/* ════ نافذةُ الإطلالة — طبقاتٌ ثلاث: ما هو، وما فيه، وما يُفعَل ════════════
   كانت قائمةَ صفوفٍ بعرض النافذة، الصفُّ منها لكلمة. والأفعالُ الستّةُ كانت
   تطلب ستَّ مئةِ بكسلٍ رأسيّ — وهي في بلاطٍ متجاورٍ سطران. */
.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)))}
.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)}
/* النبضةُ تقرأ لونَ النقطة نفسِه (‎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:ab-pingc 2.4s ease-out 3}
[data-motion="هادئ"] .pingc{animation:none}
@media (prefers-reduced-motion:reduce){
  .pingc{animation:none}
}
/* الجديدُ غير المُطَّلع عليه: حبّةٌ خضراء تومض تباعاً — أفتحُ للرسالة، أغمقُ للعرض، وتناوبٌ لهما */
.stg--news{width:calc(8px * var(--ui));height:calc(8px * var(--ui));margin-inline:calc(3px * var(--ui));background:var(--ok)}
@keyframes ab-nMsg{0%,100%{box-shadow:0 0 0 0 transparent}12%{box-shadow:0 0 0 5px color-mix(in srgb,#7ED6A8 55%,transparent)}24%{box-shadow:0 0 0 0 transparent}36%{box-shadow:0 0 0 5px color-mix(in srgb,#7ED6A8 45%,transparent)}48%{box-shadow:0 0 0 0 transparent}}
@keyframes ab-nOff{0%,100%{box-shadow:0 0 0 0 transparent}12%{box-shadow:0 0 0 5px color-mix(in srgb,#1D8A5F 60%,transparent)}24%{box-shadow:0 0 0 0 transparent}36%{box-shadow:0 0 0 5px color-mix(in srgb,#1D8A5F 50%,transparent)}48%{box-shadow:0 0 0 0 transparent}}
@keyframes ab-nAB{0%,100%{box-shadow:0 0 0 0 transparent}10%{box-shadow:0 0 0 5px color-mix(in srgb,#1D8A5F 60%,transparent)}20%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 5px color-mix(in srgb,#1D8A5F 50%,transparent)}40%{box-shadow:0 0 0 0 transparent}55%{box-shadow:0 0 0 5px color-mix(in srgb,#7ED6A8 55%,transparent)}65%{box-shadow:0 0 0 0 transparent}75%{box-shadow:0 0 0 5px color-mix(in srgb,#7ED6A8 45%,transparent)}85%{box-shadow:0 0 0 0 transparent}}
.stg--news.live.stg--msg{animation:ab-nMsg 3.2s ease-out 3}
.stg--news.live.stg--off{animation:ab-nOff 3.2s ease-out 3}
.stg--news.live.stg--both{animation:ab-nAB 4.8s ease-out 2}
/* قيد التنفيذ: النقطةُ زرقاء، فلتومض بزرقتها هي — اللونُ يقول «هذا الطلب»
   والومضةُ تقول «فيه جديد»، فلا تُفقِد الرسالةُ الطلبَ حالتَه. */
.stg--news.stg--blue{background:var(--bl)}
/* إطارٌ واحدٌ للوضعين: ‎var()‎ داخل الإطار يُحلّ على العنصر لا على الإطار، فلوحةُ
   الوضع الداكن تصله. كانا إطارين بلونين مكتوبين باليد ونسخةً ثالثةً للخلفية. */
@keyframes ab-nBlue{0%,100%{box-shadow:0 0 0 0 transparent}12%{box-shadow:0 0 0 5px color-mix(in srgb,var(--bl) 55%,transparent)}24%{box-shadow:0 0 0 0 transparent}36%{box-shadow:0 0 0 5px color-mix(in srgb,var(--bl) 45%,transparent)}48%{box-shadow:0 0 0 0 transparent}}
.stg--news.live.stg--blue{animation:ab-nBlue 3.2s ease-out 3}

/* بدجُ «مخفي» — خارجَ الطلب وداخله */
.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{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}
.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}
/* ═══ ما خلف النافذة لا يتحرّك ═══
   ‎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}
#ab2mdl.bye{pointer-events:none}
#ab2mdl.bye .md{opacity:0;transition:opacity .16s ease}
#ab2mdl.bye .md__c{opacity:0;transform:scale(.965);transition:opacity .14s ease,transform .16s cubic-bezier(.4,0,.2,1)}
/* جرسُ الإشعارات وعدّادُه — في شجرة العميل وسكة المتجر */
.sb__bell{position:relative;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}
@media (hover:hover) and (pointer:fine){
  .sb__bell:hover{background:var(--fill2)}
}
.bell__n{position:absolute;top:calc(-4px * var(--ui));inset-inline-start:calc(-4px * var(--ui));min-width:calc(15px * var(--ui));height:calc(15px * var(--ui));padding:0 calc(4px * var(--ui));border-radius:999px;background:var(--acc);color:var(--bg);font-size:calc(9px * var(--fz));font-weight:700;display:grid;place-items:center;line-height:1}
/* مركزُ الإشعارات */
.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}
/* هياكلُ الانتظار — صفوفٌ تحاكي الشكل قبل البيانات */
.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}
/* زرُّ «إلى آخر المحادثة» */
.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:var(--surf);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}
@media (hover:hover) and (pointer:fine){
  .tobot:hover{background:var(--fill)}
}
/* نافذةُ التأكيد — تحلّ محلَّ 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):not(.chip--sort),.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{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‎ — شاشةٌ تُخلِف غيرَها: الخارجةُ تخرج كاملةً (٩٠ملّي) ثم تدخل الداخلةُ
     بعدها (٢١٠ملّي بتكبيرٍ لطيفٍ من ‎.985‎). ولا إطارَ واحدٌ يحمل صفحتين. */
: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)}
@keyframes ab-vtOut{to{opacity:0}}
@keyframes ab-vtIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
:root[data-vt="page"]::view-transition-old(root){mix-blend-mode:normal;animation:ab-vtOut 90ms cubic-bezier(.4,0,1,1) both}
:root[data-vt="page"]::view-transition-new(root){mix-blend-mode:normal;animation:ab-vtIn 210ms 90ms 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(3px * var(--ui));padding-bottom:0}
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{gap:calc(6px * var(--ui));padding-top:calc(9px * var(--ui));padding-bottom:calc(9px * var(--ui))}
/* ── نافذةُ الإطلالة بالعرض: أوسعُ وأقصر ───────────────────────────────────────
   الشاشةُ العريضةُ القصيرةُ تعطي عرضاً وتشحّ بالارتفاع، فتُشترى الأسطرُ من
   العرض: نافذةٌ أعرضُ تجعل الوصفَ سطرين بدل أربعة، والحقائقَ صفّاً بدل صفّين،
   فتبلغ الأفعالُ الشاشةَ بلا تمرير. */
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}