/* ═══════════════════════════════════════════════════════════════════════
   أنماط الشاشات المتفرّقة: المواضيع الطبية، العروض، البحث، المفضّلة،
   المزيد، الخصوصية.

   هذه الورقة تُقرأ مع الكوتلن في يدٍ أخرى: كل مقاسٍ هنا مأخوذٌ من ملفٍ
   بعينه في `app/src/main/java/r0sheta/berketelsabh/com/ui/` وموضعه مذكورٌ فوقه.
   القاعدة: **لا رقم مخترَع**. ما لم يذكره التطبيق لا يُقدَّر هنا بالعين.

   البادئة `mx` على كل فئة جديدة ليست زخرفة: `views-home.js` و
   `views-doctor.js` يملكهما آخرون ويكتبان في `screens.css` المشتركة، وقد
   استُهلكت هناك أسماء عامة (`tcard` و`ocard` و`avail` و`srch`) لمعانٍ
   مختلفة تماماً. البادئة تضمن ألا يغيّر تعديلٌ هناك شكل شاشةٍ هنا.

   الرموز: ما في `base.css` يكفي أكثر الحالات، وما ينقص يُضاف هنا بأسماء
   `--mx-*` مأخوذة من `ui/theme/Color.kt` نفسه — لا لونَ مكتوباً في قاعدة
   إلا أن يكون لوناً صريحاً في الكوتلن (الذهبي والأخضر وأزرق فيسبوك).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── الرموز الناقصة من لوحة التطبيق ────────────────────────────────────
   `Theme.kt` يعرّف لوحةً كاملة، و`base.css` نقل منها الكحلي والتركوازي
   فقط. الأزرق الأساسي (`primary`) هو لون سطر التصنيف في كل بطاقة موضوع
   وسطر التخصص في كل بطاقة طبيب، فبدونه تخرج الشاشتان بلون آخر. */
:root {
  --mx-pri: #037E9D;          /* BluePrimary */
  --mx-pri-c: #DDF0F6;        /* BlueSoft — primaryContainer */
  --mx-pri-oc: #03647E;       /* BluePrimaryDark — onPrimaryContainer */
  --mx-sec-c: #DDF0F6;        /* secondaryContainer */
  --mx-sec-oc: #05738F;       /* TealDeep — onSecondaryContainer */
  --mx-ring: #2AA5C4;         /* TealAccent — بداية حلقة الصورة */
  --mx-sv: #E9F3F7;           /* SurfaceVariantL */
  --mx-osv: #5A7C88;          /* TextSecondaryL — onSurfaceVariant */
  --mx-t3: #8FA9B3;           /* TextTertiaryL */
  --mx-ok: #10B981;           /* SuccessGreen — وسام التوثيق والتوافر */

  /* `shadowElevation = 1.dp` في كل بطاقة: ظلٌّ يفصل البطاقة عن الخلفية ولا
     يُرى وحده. ظلّ `base.css` العام أثقل منه بكثير (مصمَّمٌ لبطاقات مرفوعة). */
  --mx-el1: 0 1px 2px rgb(15 27 51 / .07), 0 1px 3px rgb(15 27 51 / .05);
  --mx-el2: 0 2px 4px rgb(15 27 51 / .09), 0 4px 12px rgb(15 27 51 / .08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mx-pri: #5ABFD8; --mx-pri-c: #053240; --mx-pri-oc: #B6E1EC;
    --mx-sec-c: #10302C; --mx-sec-oc: #CBE9F1; --mx-ring: #2DD4BF;
    --mx-sv: #06303C; --mx-osv: #8FA9B3; --mx-t3: #5A7C88;
    --mx-el1: 0 1px 2px rgb(0 0 0 / .38), 0 1px 4px rgb(0 0 0 / .3);
    --mx-el2: 0 2px 6px rgb(0 0 0 / .45), 0 6px 16px rgb(0 0 0 / .4);
  }
}

:root[data-theme="dark"] {
  --mx-pri: #5ABFD8; --mx-pri-c: #053240; --mx-pri-oc: #B6E1EC;
  --mx-sec-c: #10302C; --mx-sec-oc: #CBE9F1; --mx-ring: #2DD4BF;
  --mx-sv: #06303C; --mx-osv: #8FA9B3; --mx-t3: #5A7C88;
    --mx-el1: 0 1px 2px rgb(0 0 0 / .38), 0 1px 4px rgb(0 0 0 / .3);
    --mx-el2: 0 2px 6px rgb(0 0 0 / .45), 0 6px 16px rgb(0 0 0 / .4);
}

/* أداة القصّ المتكرّرة: الكوتلن يقول `maxLines = n` فتقولها CSS بسطرين. */
.mxtc-t, .mxtc-s, .mxtc-x, .mxrec-n b, .mxrec-s,
.mxoff-f b, .mxpost-h, .mxpost-s, .mxpost-w, .mxpost-d,
.mxstrip-b b, .mxstrip-b > span, .mxcta-b b {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: break-word; word-break: normal;
}

/* ═══════════════ الترويسة — RoshetaHeader.kt ═══════════════
   حشوها في التطبيق `start/end 12, top 8, bottom = bottomPadding`، وكل شاشات
   هذا الملف تمرّر `bottomPadding = 16`. زواياها السفلية ٢٨. */

.mxh { padding: calc(env(safe-area-inset-top) + 8px) 0 16px; }
.mxh, .mxhero { border-end-start-radius: 28px; border-end-end-radius: 28px; }
/* عمود الترويسة أضيق من عمود القائمة بأربع نقاط — كما في التطبيق تماماً */
.mxh > .wrap { padding-inline: 12px; }
/* `HeaderIconButton`: دائرة ٤٠ بأبيض ٢٠٪. الهدف يبقى ٤٤ لأن الإصبع أعرض من الرسم */
.mxh .hdr-btn, .mxhero .hdr-btn { background: rgb(255 255 255 / .2); }

/* العنوان العريض: `headlineSmall` (١٩/٢٩ عريض) وتحته `bodySmall` بشفافية ٨٥٪ */
.mxhd-t { flex: 1; min-width: 0; }
.mxhd-t h1 {
  margin: 0; font-size: 20px; font-weight: 800; line-height: 1.5; color: #fff;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.mxhd-t p {
  margin: 0; font-size: 12.5px; line-height: 1.62; color: rgb(255 255 255 / .85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* العنوان المضغوط: `titleLarge` موسَّط بين الزرّين (`compact = true`) */
.mxhd-c {
  flex: 1; min-width: 0; margin: 0; text-align: center;
  font-size: 19px; font-weight: 800; line-height: 1.5; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════════════ الصور — Cards.kt::NetworkImage ═══════════════
   البديل مرسوم **خلف** الصورة دائماً لا بديلاً عنها: الإطار يأخذ نسبته من
   هنا فور الرسم، فيبقى ارتفاع البطاقة ثابتاً سواء وصلت الصورة في جزءٍ من
   ثانية أو بعد ثلاث — وهذا هو `LogoPlaceholder` نفسه. */

.mxcov {
  position: relative; display: block; overflow: hidden;
  background: var(--mx-sv); color: var(--mx-t3);
}
.mxcov > .mxcov-i {
  position: absolute; inset: 0; margin: auto;
  width: 26px; height: 26px; opacity: .5;
}
.mxcov img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* الصورة سقطت فأزالها `onerror`: يبقى الرسم البديل وحده على السطح المحايد */
.mxcov-off > .mxcov-i { opacity: .55; }

.mxcov-t { width: 100%; height: 150px; }                    /* TopicCard: height(150.dp) */
.mxcov-t img { object-fit: cover; }                          /* ContentScale.Crop الافتراضي */

/* غلاف الموضوع: نسبته الأصلية ١٢٠٠×٦٣٠ وكاملاً بلا قصّ (`ContentScale.Fit`) —
   الغلاف مرسومٌ بعنوانه، والقصّ كان يبتر العنوان المرسوم داخله */
.mxcov-hero { width: 100%; aspect-ratio: 1200 / 630; background: none; }
.mxcov-hero img { object-fit: contain; }
.mxcov-hero > .mxcov-i { opacity: .3; }

.mxcov-w { width: 100%; aspect-ratio: 1200 / 630; }          /* بوستر العرض المرفوع */
.mxcov-w img { object-fit: cover; }
.mxcov-fit { width: 100%; height: 190px; }                   /* OfferBodyCard: height(190.dp) */
.mxcov-fit img { object-fit: contain; }

/* ═══════════════ الأفاتار ذو الحلقة — Avatar.kt ═══════════════
   حلقة متدرّجة (تركوازي→أزرق) عرضها ٢، ثم فجوة ٢ بلون الخلفية، ثم الصورة.
   المنشأة مربّعة الزوايا (شعار لا وجه) والشخص دائرة. */

.mxava {
  position: relative; flex: none; display: block;
  width: var(--s, 56px); height: var(--s, 56px); padding: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mx-ring), var(--mx-pri));
}
.mxava.sq { border-radius: 17px; }

.mxava-in {
  position: relative; width: 100%; height: 100%; padding: 2px;
  border-radius: 50%; background: var(--bg);
  display: grid; place-items: center; overflow: hidden;
}
.mxava.sq .mxava-in { border-radius: 15px; }

/* رسم التخصص هو القاع: يظهر ما دامت الصورة لم تصل أو لم تأتِ أصلاً */
.mxava-in .sp-art { width: 62%; height: 62%; object-fit: contain; }
.mxava-ph {
  position: absolute; inset: 2px; display: block;
  border-radius: 50%; object-fit: cover; background: var(--card);
}
.mxava.sq .mxava-ph { border-radius: 13px; }

/* فوق الهيدر الكحلي تصير الفجوة بيضاء شفافة لا بلون الخلفية (`onHero`) */
.mxava.hero .mxava-in { background: rgb(255 255 255 / .25); }
.mxava.hero .mxava-ph { background: rgb(255 255 255 / .2); }

/* وسام التوثيق — DoctorHeroHeader.kt::DoctorAvatar:
   دائرة `colors.success` في الطرف السفلي بنسبة ٣٤/١١٨ من قطر الصورة،
   وداخلها علامة صحّ بيضاء بنصف قطرها. الحدّ الخارجي بلون البطاقة يفصلها
   عن الصورة حين تكون الصورة خضراء أو داكنة.
   وهي **الإشارة الوحيدة** للتوثيق: لا شريحة «مميَّز» ولا «ملف موثَّق». */
.mxava-v {
  position: absolute; inset-block-end: 0; inset-inline-end: 0;
  width: max(18px, calc(var(--s, 56px) * .29));
  height: max(18px, calc(var(--s, 56px) * .29));
  border-radius: 50%; background: var(--mx-ok); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--card);
}
.mxava.hero .mxava-v { box-shadow: 0 0 0 2px rgb(255 255 255 / .35); }
.mxava-v svg { width: 58%; height: 58%; }

/* ═══════════════ وسم اللقب — TitleTag.kt ═══════════════
   لونه ثابت لكل لقب في الوضعين، والتعبئة ١٢٪ منه والحدّ ٢٨٪. */
.mxtag {
  display: inline-flex; align-items: center; flex: none;
  padding: 2px 6px; border-radius: 7px;
  font-size: 11.5px; font-weight: 600; line-height: 1.55;
  color: var(--tc, #5A7C88);
  background: color-mix(in srgb, var(--tc, #5A7C88) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc, #5A7C88) 28%, transparent);
}

/* ═══════════════ القوائم — Insets.kt::listContentPadding ═══════════════
   حشو ١٦ من كل جانب وفجوة ١٢ بين البطاقات، في كل `LazyColumn` بلا استثناء. */
.mxlist { display: grid; gap: 12px; padding-block: 16px; }
.mxstack { display: grid; gap: 14px; padding-block: 16px; }

/* ═══════════════ ١ · بطاقة الموضوع — Cards.kt::TopicCard ═══════════════
   صورة ١٥٠، ثم حشو ١٤ وفجوة ٤: عنوان (سطران) فتصنيف بالأزرق الأساسي (سطر)
   فمتن (ثلاثة أسطر). ولا تاريخ في البطاقة — التطبيق يؤخّره لصفحة الموضوع. */

.mxtc {
  display: block; overflow: hidden; border-radius: 20px;
  background: var(--card); box-shadow: var(--mx-el1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mxtc:active { transform: scale(.99); }
@media (hover: hover) { .mxtc:hover { box-shadow: var(--mx-el2); } }

.mxtc-b { padding: 14px; display: grid; gap: 4px; }
/* `titleSmall` = ١٤/٢٢ نصف-عريض. مقيسٌ على لقطة التطبيق: هذه المقاسات تجعل
   العنوان والتصنيف والمتن تشغل نفس الأسطر ونفس الارتفاع على عرض ٣٧٥. */
.mxtc-t {
  -webkit-line-clamp: 2;
  font-size: 15px; font-weight: 700; line-height: 1.57; color: var(--ink);
}
.mxtc-s {                                  /* `bodySmall` بلون `primary` */
  -webkit-line-clamp: 1;
  font-size: 12.5px; line-height: 1.66; color: var(--mx-pri);
}
/* المتن بأسطره كما كتبها المحرّر (`pre-line`) لا مضغوطاً في فقرة: القصّ عند
   السطر الثالث يقع عندئذٍ في موضعه على أندرويد حرفاً بحرف */
.mxtc-x {
  -webkit-line-clamp: 3; white-space: pre-line;
  font-size: 14px; line-height: 1.64; color: var(--muted);
}

/* ═══════════════ ٢ · صفحة الموضوع — TopicDetailScreen.kt ═══════════════ */

/* الغلاف هو الترويسة: أزرارٌ **فوقه** في شريطها لا عليه، فلا يحجب زرٌّ رسماً.
   ولا نقاط زخرفية هنا — التطبيق يرسم تدرّجاً سادة خلف الغلاف لا هيدره
   المنقّط، ولون الشريط يُنسخ من حافة الغلاف نفسها (انظر `tintHero`). */
.mxhero {
  padding: 0; overflow: hidden;
  background: linear-gradient(210deg, var(--navy-top) 0%, var(--navy-mid) 45%, var(--navy-deep) 100%);
}
.mxhero::after { content: none; }
/* نسخة الغلاف المغسولة تملأ الترويسة كلها وتقبع تحت كل شيء؛ الغلاف الحقيقي
   يغطّيها فلا يظهر منها إلا ما خلف شريط الأزرار — انظر `heroWash` */
.mxhero-wash {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  filter: blur(26px) saturate(1.1); transform: scale(1.35);
}
.mxhero-bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 6px) 12px 6px;
}
/* الشريط قد يجلس على لونٍ فاتح من الغلاف، فالزرّ يحمل حدّه معه */
.mxhero .hdr-btn { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }

/* عمود المقال: حشو أفقي ١٨ (١٦ من `.wrap` + ٢) ورأسي ١٦ وفجوة ١٢ */
.mxart { display: grid; gap: 12px; padding: 16px 2px 8px; }
.mxart h1 {
  margin: 0; font-size: 20.5px; font-weight: 800; line-height: 1.62; color: var(--ink);
}
.mxart-m { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* شريحة التصنيف: `primaryContainer` بزوايا كاملة وحشو ١١×٥ */
.mxart-p {
  padding: 5px 11px; border-radius: 999px;
  background: var(--mx-pri-c); color: var(--mx-pri-oc);
  font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.mxart-d { font-size: 12px; font-weight: 600; color: var(--mx-t3); }

/* الفقرة الأولى مقدّمة: أعرض وزناً وأضيق سطراً لأنها تلخّص الموضوع */
.mxart p { margin: 0; font-size: 15.5px; line-height: 1.87; color: var(--muted); }
.mxart p.mxart-lead { font-size: 15px; font-weight: 700; line-height: 2.05; color: var(--ink); }

.mxart-src {
  padding: 13px; border-radius: 14px;
  background: var(--mx-sv); color: var(--muted);
  font-size: 14px; font-weight: 600; line-height: 1.72;
}

/* المشاركة فعل أساسي لمحتوى توعوي — زرّان صريحان لا أيقونة مخفية */
.mxart-sh { display: flex; gap: 10px; margin-block-start: 2px; }
.mxsh {
  flex: 1; min-width: 0; min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 8px; border: 0; border-radius: 13px;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.mxsh:active { transform: scale(.97); }
.mxsh svg { width: 17px; height: 17px; }
.mxsh.fb { background: #1877F2; color: #fff; }
.mxsh.pri { background: var(--mx-pri-c); color: var(--mx-pri-oc); }

.mxart-note { font-size: 11.5px; line-height: 1.7; color: var(--mx-t3); }

/* ═══════════════ ٣ · العروض — OffersScreen.kt ═══════════════ */

.mxoff {
  display: block; overflow: hidden; border-radius: 20px;
  background: var(--card); box-shadow: var(--mx-el1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mxoff:active { transform: scale(.99); }
@media (hover: hover) { .mxoff:hover { box-shadow: var(--mx-el2); } }
/* الشريط الذهبي أرفع في القائمة منه في صفحة العرض (٤ مقابل ٥) */
.mxoff .gold-bar { height: 4px; }

.mxoff-f { display: flex; align-items: center; gap: 8px; padding: 11px 13px; }
.mxoff-g { width: 17px; height: 17px; flex: none; color: #E0A100; }
.mxoff-f b {
  flex: 1; min-width: 0; -webkit-line-clamp: 1;
  font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink);
}
.mxoff-f > span { flex: none; font-size: 11.5px; color: var(--mx-t3); }

/* البوستر المولَّد — OfferArt.kt::AutoOfferCard (الصيغة المضغوطة):
   نصّ الخصم في عمودٍ يملأ الفراغ، وصورة مقدّمه في طرف الصفّ، ودائرتان
   شفافتان تكسران سطح التدرّج فلا يبدو مسطّحاً. */
.mxpost {
  position: relative; overflow: hidden; aspect-ratio: 2.1;
  display: flex; align-items: center; gap: 10px;
  padding-inline: 14px; color: #fff;
}
.mxpost::before, .mxpost::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.mxpost::before {
  width: 150px; height: 150px; inset-block-start: -90px; inset-inline-start: -60px;
  background: rgb(255 255 255 / .09);
}
.mxpost::after {
  width: 110px; height: 110px; inset-block-end: -60px; inset-inline-end: -50px;
  background: rgb(255 255 255 / .07);
}
.mxpost > * { position: relative; }
.mxpost-b { flex: 1; min-width: 0; }
.mxpost-h {
  -webkit-line-clamp: 1;
  font-size: clamp(20px, 7vw, 26px); font-weight: 800; line-height: 1.16;
}
.mxpost-s { -webkit-line-clamp: 1; font-size: 14px; font-weight: 700; color: rgb(255 255 255 / .95); }
.mxpost-w {
  -webkit-line-clamp: 1; margin-block-start: 6px;
  font-style: normal; font-size: 12px; font-weight: 700;
}
.mxpost-d {
  -webkit-line-clamp: 1; text-decoration: none;
  font-size: 10.5px; color: rgb(255 255 255 / .82);
}

/* ── صفحة العرض — OfferDetailScreen.kt ── */

/* شريط مقدّم العرض داخل الترويسة الكحلية */
.mxstrip { display: flex; align-items: center; gap: 12px; margin-block-start: 12px; color: #fff; }
.mxstrip-b { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 4px; }
.mxstrip-b b { -webkit-line-clamp: 2; font-size: 16px; font-weight: 700; line-height: 1.5; }
.mxstrip-b > span { -webkit-line-clamp: 1; font-size: 13px; color: rgb(255 255 255 / .88); }
/* الألوان الصريحة تختفي على الأزرق، فالوسم فوق الهيدر أبيضُ شفاف */
.mxstrip .mxtag {
  color: #fff; background: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .35);
}

.mxob { overflow: hidden; border-radius: 20px; background: var(--card); box-shadow: var(--mx-el1); }
.mxob-b { padding: 15px; display: grid; gap: 9px; }
.mxob-h { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; color: #D98200; }
.mxob-h svg { width: 18px; height: 18px; flex: none; }
.mxob-hl { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.5; color: var(--ink); }
.mxob-x { margin: 0; font-size: 15.5px; line-height: 1.78; color: var(--ink); }
.mxob-m { display: flex; flex-wrap: wrap; gap: 7px; }

.mxcta {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border-radius: 20px; background: var(--card); box-shadow: var(--mx-el1);
}
.mxcta-b { flex: 1; min-width: 0; }
.mxcta-b b { -webkit-line-clamp: 2; font-size: 15px; font-weight: 700; line-height: 1.55; color: var(--ink); }
.mxcta-b > span { display: block; font-size: 11.5px; color: var(--mx-t3); }
/* سهم «للأمام» في RTL يشير لليسار — والرمز في المجموعة مرسوم لليمين */
.mxgo { width: 18px; height: 18px; flex: none; color: var(--mx-pri); transform: scaleX(-1); }

/* ═══════════════ ٤ · بطاقة السجل — Cards.kt::DoctorCard ═══════════════
   صفٌّ علويّ (صورة ٦٤ + عمود نصّ + قلب) ثم صفّ أفعال. الشبكة عمودان لأن
   القلب زرٌّ مستقلّ خارج رابط البطاقة — رابطٌ داخل رابط وسمٌ غير صالح. */

.mxrec {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; padding: 14px; border-radius: 20px;
  background: var(--card); box-shadow: var(--mx-el1);
}
.mxrec-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.mxrec-b { flex: 1; min-width: 0; }
.mxrec-n { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mxrec-n b { -webkit-line-clamp: 2; font-size: 15px; font-weight: 700; line-height: 1.55; color: var(--ink); }
/* التخصص بالأزرق الأساسي كما في التطبيق — لا رمادياً */
.mxrec-s { display: block; -webkit-line-clamp: 2; font-size: 13px; line-height: 1.66; color: var(--mx-pri); }
.mxrec-ad {
  display: flex; align-items: center; gap: 4px; margin-block-start: 4px;
  font-size: 12.5px; line-height: 1.6; color: var(--mx-t3);
}
.mxrec-ad svg { width: 13px; height: 13px; flex: none; }
/* العنوان سطر واحد (`maxLines = 1`): الصفّ نفسه لا يُقصّ لأنه يحمل الأيقونة،
   فالقصّ على النصّ داخله */
.mxrec-ad > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* شارة التوافر — AvailabilityBadge.kt: خضراء بنقطة حين يكون مفتوحاً،
   ورماديّة صامتة فيما عدا ذلك. لا لون ثالث. */
.mxav {
  display: inline-flex; align-items: center; gap: 6px; margin-block-start: 5px;
  max-width: 100%; padding: 5px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.5;
  background: var(--mx-sv); color: var(--mx-osv);
}
.mxav.on { background: color-mix(in srgb, var(--mx-ok) 14%, transparent); color: var(--mx-ok); }
.mxav i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--mx-ok); }

/* هدف اللمس ٤٤ والرسم ٢٠: الهوامش السالبة تُبقي القلب في ركنه بصريّاً */
.mxrec-fav {
  align-self: start; width: 44px; height: 44px;
  margin-block-start: -10px; margin-inline-end: -10px;
  display: grid; place-items: center;
  border: 0; background: none; color: var(--mx-t3); cursor: pointer;
  border-radius: 50%; transition: color var(--dur) var(--ease);
}
.mxrec-fav svg { width: 20px; height: 20px; }
.mxrec-fav.on { color: var(--danger); }
.mxrec-fav.on svg { fill: currentColor; }

.mxrec-acts { grid-column: 1 / -1; display: flex; gap: 8px; margin-block-start: 12px; }
.mxpill {
  flex: 1; min-width: 0; min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 8px; border-radius: 14px;
  font-size: 14px; font-weight: 700;
  transition: transform var(--dur) var(--ease);
}
.mxpill:active { transform: scale(.97); }
.mxpill svg { width: 17px; height: 17px; flex: none; }
.mxpill.p { background: var(--mx-pri-c); color: var(--mx-pri-oc); }
.mxpill.s { background: var(--mx-sec-c); color: var(--mx-sec-oc); }

/* ═══════════════ ٥ · الحالة الفارغة — Common.kt::EmptyState ═══════════════ */

.mxempty { display: grid; justify-items: center; gap: 12px; padding: 32px 20px; text-align: center; }
.mxempty-i {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mx-sv); color: var(--mx-t3);
}
.mxempty-i svg { width: 34px; height: 34px; }
.mxempty p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--mx-osv); }
.mxempty > span { font-size: 13px; line-height: 1.85; color: var(--mx-t3); }
.mxempty .btn { margin-block-start: 4px; }

/* ═══════════════ ٦ · البحث — SearchScreen.kt ═══════════════
   الحقل داخل الترويسة الكحلية لا تحتها: هو أول ما تراه العين في شاشةٍ
   وظيفتها الكتابة. زواياه ١٨ وحدّه `outlineVariant`. */

.mxsrch {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 4px 0; min-height: 52px; padding-inline: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
}
.mxsrch > svg { width: 20px; height: 20px; flex: none; color: var(--mx-t3); }
.mxsrch input {
  flex: 1; min-width: 0; padding: 0; border: 0; outline: none; background: none;
  font: inherit; font-size: 14.5px; color: var(--ink);
}
.mxsrch input::placeholder { color: var(--mx-t3); }
.mxsrch input::-webkit-search-cancel-button { display: none; }
/* زرّ المسح يظهر مع أول حرف فقط: دائرة فارغة بجوار حقلٍ فارغ تُربك لا تُفيد */
.mxsrch-x {
  display: none; width: 44px; height: 44px; margin-inline-end: -10px;
  place-items: center; border: 0; border-radius: 50%; background: none;
  color: var(--mx-t3); font-size: 15px; cursor: pointer;
}
.mxsrch.has .mxsrch-x { display: grid; }

.mxcount { margin: 16px 4px 0; font-size: 12.5px; font-weight: 600; color: var(--mx-osv); }

.mxsug { margin-block-start: 4px; padding-block-end: 16px; }
.mxsug h2 { margin: 0 0 10px; font-size: 15.5px; font-weight: 800; }
/* المقترح يحمل رسم تخصّصه الحقيقي — نفس ملفات التطبيق، لا رمزاً عاماً */
.mxdep {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  padding: 5px 12px 5px 9px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.mxdep .sp-art { width: 26px; height: 26px; flex: none; }
.mxdep b { font-size: 12px; font-weight: 700; color: var(--mx-pri); }

/* ═══════════════ ٧ · المزيد — MoreScreen.kt ═══════════════ */

.mxcard {
  display: grid; gap: 12px; padding: 14px;
  border-radius: 20px; background: var(--card); box-shadow: var(--mx-el1);
}
.mxcard-h { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--ink); }
.mxcard-h svg { width: 19px; height: 19px; flex: none; color: var(--mx-pri); }
.mxcard-h.ok svg { color: var(--mx-ok); }
.mxcard-p { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--muted); }
.mxcard-p.faint { font-size: 12.5px; color: var(--mx-t3); }
.mxcard .steps { margin: 0; }
.mxcard .btn { width: 100%; }

/* ثلاثة أوضاع لا زرّ تبديل: «تلقائي» يتبع نظام الجهاز وليس هو «فاتح» */
.mxths { display: flex; gap: 8px; }
.mxth {
  flex: 1; min-width: 0; display: grid; justify-items: center; gap: 5px;
  padding: 12px 4px; border: 0; border-radius: 16px;
  background: var(--mx-sv); color: var(--mx-osv);
  font: inherit; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mxth svg { width: 21px; height: 21px; }
.mxth span { font-size: 12px; font-weight: 600; }
.mxth.on { background: var(--mx-pri-c); color: var(--mx-pri); box-shadow: inset 0 0 0 1.5px var(--mx-pri); }

.mxrow {
  display: flex; align-items: center; gap: 14px; min-height: 52px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--card); box-shadow: var(--mx-el1);
}
.mxrow-i { width: 20px; height: 20px; flex: none; display: grid; place-items: center; color: var(--mx-pri); }
.mxrow-i svg { width: 20px; height: 20px; }
.mxrow-b { flex: 1; min-width: 0; }
.mxrow-b b { display: block; font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--ink); }
.mxrow-b > span { display: block; font-size: 12.5px; line-height: 1.55; color: var(--mx-t3); overflow-wrap: anywhere; }

/* بطاقة الاشتراك بتدرّج الهوية نفسه — هي دعوة لا صفّ إعدادات */
.mxjoin {
  display: grid; gap: 8px; padding: 18px; border-radius: 20px; color: #fff;
  background: linear-gradient(210deg, var(--navy-top) 0%, var(--navy-mid) 45%, var(--navy-deep) 100%);
  box-shadow: var(--mx-el2);
}
.mxjoin b { font-size: 16px; font-weight: 800; }
.mxjoin > span { font-size: 13px; line-height: 1.75; color: rgb(255 255 255 / .9); }
.mxjoin-b {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; margin-block-start: 4px; padding: 0 16px;
  border-radius: 999px; background: #fff; color: var(--mx-pri-oc);
  font-size: 14px; font-weight: 700;
}
.mxjoin-b svg { width: 17px; height: 17px; }

.mxfoot { padding: 14px 6px 8px; text-align: center; color: var(--mx-t3); font-size: 11.5px; line-height: 1.8; }
.mxfoot p { margin: 0 0 3px; }

.mxnote { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--mx-t3); }

/* ═══════════════ ٨ · الخصوصية ═══════════════
   `screens.css` تعطي `.psec` حشوها فقط لأنها كانت تُلبَس مع `.card`؛ البطاقة
   هنا مستقلّة بسطحها وظلّها كبقية بطاقات هذا الملف. */
.psec { border-radius: 20px; background: var(--card); box-shadow: var(--mx-el1); }
.psec h2 { color: var(--mx-pri); }

/* ═══════════════ عمود أوسع على الشاشات الكبيرة ═══════════════
   `PageWidth.kt` يقيّد العمود عند ٥٠٠ ولا يمدّه، و`--max` في `base.css`
   يفعل الشيء نفسه عند ٥٦٠ — فلا حاجة لتجاوزه. يبقى تكبير العنوان وحده
   كما في نسخة اللوح. */
@media (min-width: 700px) {
  .mxart h1 { font-size: 23px; }
  .mxob-hl { font-size: 21px; }
}