/* ═══════════════════════════════════════════════════════════════════════
   الرئيسية · التخصصات · قائمة تخصص — أنماط منقولة بالرقم عن التطبيق.

   المرجع: `ui/theme/Color.kt` و`Type.kt` و`Theme.kt` (الأشكال) وما تبنيه
   `ui/components/Cards.kt` و`Avatar.kt` و`Common.kt` و`HorizontalCards.kt`
   و`NewlyJoinedCard.kt` و`OfferArt.kt`.

   لماذا رموز لون جديدة بدل رموز `base.css`؟ لأن لوحة الموقع اختارت
   التركوازي أساساً بينما التطبيق أزرق `#037E9D`، وشتّان بين «عرض الكل»
   تركوازية على الويب وزرقاء في التطبيق حين يفتحهما صاحب الدليل جنباً إلى
   جنب. الرموز هنا **مسمّاة `--a-` (app)** ومحصورة في `.sc`/`.sc-hdr` فلا
   تمسّ شاشةً أخرى، ولكلٍّ قيمتان تنقلبان مع المظهر بلا لون منسيّ.

   وكل فئة هنا تبدأ بـ`sc-` عمداً: هذه الشاشات لا تشارك غيرها بطاقةً ولا
   بلاطة بعد اليوم، فلا يغيّر تعديلٌ هنا شكل البحث أو المفضّلة بالخطأ.
   ═══════════════════════════════════════════════════════════════════════ */

.sc, .sc-hdr {
  /* ── LightColors ── */
  --a-pri: #037E9D;
  --a-on-pri: #FFFFFF;
  --a-pri-c: #DDF0F6;
  --a-on-pri-c: #03647E;
  --a-sec-c: #DDF0F6;
  --a-on-sec-c: #05738F;
  --a-bg: #F1F7F9;
  --a-sur: #FFFFFF;
  --a-on-sur: #062430;
  --a-sur-v: #E9F3F7;
  --a-on-sur-v: #5A7C88;
  --a-out-v: #E9F3F7;
  --a-t3: #8FA9B3;          /* textTertiary */
  --a-ok: #10B981;          /* SuccessGreen */
  --a-err: #EF4444;
  --a-ring: linear-gradient(135deg, #2AA5C4, #037E9D);   /* ringGradient */
  --a-sh: 0 1px 2px rgb(15 23 42 / .07), 0 2px 6px rgb(15 23 42 / .05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc,
  :root:not([data-theme="light"]) .sc-hdr {
    --a-pri: #5ABFD8; --a-on-pri: #06182F; --a-pri-c: #053240; --a-on-pri-c: #B6E1EC;
    --a-sec-c: #10302C; --a-on-sec-c: #CBE9F1;
    --a-bg: #031A21; --a-sur: #05242E; --a-on-sur: #E4F1F6;
    --a-sur-v: #06303C; --a-on-sur-v: #8FA9B3; --a-out-v: #1F2C45;
    --a-t3: #5A7C88; --a-err: #FF6B6B;
    --a-ring: linear-gradient(135deg, #2DD4BF, #5ABFD8);
    --a-sh: 0 1px 2px rgb(0 0 0 / .35), 0 2px 8px rgb(0 0 0 / .3);
  }
}

:root[data-theme="dark"] .sc,
:root[data-theme="dark"] .sc-hdr {
  --a-pri: #5ABFD8; --a-on-pri: #06182F; --a-pri-c: #053240; --a-on-pri-c: #B6E1EC;
  --a-sec-c: #10302C; --a-on-sec-c: #CBE9F1;
  --a-bg: #031A21; --a-sur: #05242E; --a-on-sur: #E4F1F6;
  --a-sur-v: #06303C; --a-on-sur-v: #8FA9B3; --a-out-v: #1F2C45;
  --a-t3: #5A7C88; --a-err: #FF6B6B;
  --a-ring: linear-gradient(135deg, #2DD4BF, #5ABFD8);
    --a-sh: 0 1px 2px rgb(0 0 0 / .35), 0 2px 8px rgb(0 0 0 / .3);
}

/* ── ثماني لوحات باستيل تدور على التخصصات — `SpecialtyAccentsLight` ──
   الترتيب هو ترتيب التطبيق، فالقسم الأول وردي في الاثنين لا في أحدهما. */
.sc-a0 { --tn: #FF4D6D; --ct: #FFE9EE; }
.sc-a1 { --tn: #3B82F6; --ct: #E6F0FF; }
.sc-a2 { --tn: #10B981; --ct: #E3F8F0; }
.sc-a3 { --tn: #A855F7; --ct: #F3E9FE; }
.sc-a4 { --tn: #F59E0B; --ct: #FEF3E2; }
.sc-a5 { --tn: #06B6D4; --ct: #E0F7FB; }
.sc-a6 { --tn: #EC4899; --ct: #FCE7F3; }
.sc-a7 { --tn: #8B5CF6; --ct: #EDE9FE; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-a0 { --tn: #FF7A93; --ct: #3A1F27; }
  :root:not([data-theme="light"]) .sc-a1 { --tn: #6BA5FF; --ct: #1B2942; }
  :root:not([data-theme="light"]) .sc-a2 { --tn: #34D399; --ct: #15302A; }
  :root:not([data-theme="light"]) .sc-a3 { --tn: #C084FC; --ct: #2A1F3D; }
  :root:not([data-theme="light"]) .sc-a4 { --tn: #FBBF24; --ct: #372911; }
  :root:not([data-theme="light"]) .sc-a5 { --tn: #22D3EE; --ct: #12303A; }
  :root:not([data-theme="light"]) .sc-a6 { --tn: #F472B6; --ct: #3A1E30; }
  :root:not([data-theme="light"]) .sc-a7 { --tn: #A78BFA; --ct: #241F3D; }
}

:root[data-theme="dark"] .sc-a0 { --tn: #FF7A93; --ct: #3A1F27; }
:root[data-theme="dark"] .sc-a1 { --tn: #6BA5FF; --ct: #1B2942; }
:root[data-theme="dark"] .sc-a2 { --tn: #34D399; --ct: #15302A; }
:root[data-theme="dark"] .sc-a3 { --tn: #C084FC; --ct: #2A1F3D; }
:root[data-theme="dark"] .sc-a4 { --tn: #FBBF24; --ct: #372911; }
:root[data-theme="dark"] .sc-a5 { --tn: #22D3EE; --ct: #12303A; }
:root[data-theme="dark"] .sc-a6 { --tn: #F472B6; --ct: #3A1E30; }
:root[data-theme="dark"] .sc-a7 { --tn: #A78BFA; --ct: #241F3D; }

/* الأيقونة السطرية: المقاس يُملى في السمة `style` عند الحاجة، وهذا قاعه */
.sc-i { width: 20px; height: 20px; flex: none; }

/* الرسم الملوّن يُعرض بمقاسه المطلوب لا بمقاس أبيه */
.sc-art { display: block; object-fit: contain; }
.sc-vec { color: var(--tn, var(--a-pri)); }

/* ═══════════════ الترويسة الكحلية ═══════════════ */

/* زوايا ٢٨ وحشو ١٠/١٨ — `RoshetaHeader` بعد `statusBarsPadding` */
.sc-hdr {
  padding: calc(env(safe-area-inset-top) + 10px) 0 18px;
  border-end-start-radius: 28px;
  border-end-end-radius: 28px;
}
.sc-hrow { display: flex; align-items: center; gap: 10px; }

.sc-hb {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: rgb(255 255 255 / .20); border: 0; border-radius: 50%;
  color: #fff; cursor: pointer; padding: 0;
}
/* ٤٠ في التطبيق و٤٤ هنا: الفارق أربعة بكسلات لا تُرى، وهدف اللمس يُخطئ دونها */
.sc-hb.ghost { background: none; pointer-events: none; }
.sc-hb .sc-i { width: 20px; height: 20px; }

.sc-htxt { flex: 1; min-width: 0; }
.sc-htxt.mid { text-align: center; }

.sc-title {
  margin: 0; font-size: 19px; line-height: 29px; font-weight: 700; color: #fff;
  overflow: hidden; overflow-wrap: normal; word-break: normal;
}
.sc-sub { font-size: 12px; line-height: 20px; color: rgb(255 255 255 / .85); }

.sc-brand { margin: 0; font-size: 19px; line-height: 29px; font-weight: 700; letter-spacing: -.2px; }
.sc-brand em { font-style: normal; color: #89D0E1; }
.sc-tag { font-size: 11px; line-height: 16px; color: rgb(255 255 255 / .8); }

/* شريط البحث الكبسولي — `RoshetaSearchBar` بنصف قطر ١٨ وحشو ١٦ */
.sc-search {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 14px; padding: 16px; border-radius: 18px;
  background: var(--a-sur); border: 1px solid var(--a-out-v);
  color: var(--a-t3); font-size: 14px; text-align: start; cursor: pointer;
}
.sc-search .sc-i { color: var(--a-t3); }

/* ═══════════════ لبنات مشتركة ═══════════════ */

/* الشريط الأفقي بلا التقاط: `LazyRow` لا تلتقط، والالتقاط يُقرأ ممانعةً */
.sc .rail { scroll-snap-type: none; gap: 10px; padding: 0 16px 6px; }
.sc .rail > * { scroll-snap-align: none; }

/* `DoctorColumn` تباعد بطاقاتها ١٢، وقوائم التخصصات ١٠ */
.sc .stack { gap: 12px; }
.sc .sc-rows { gap: 10px; }

.sc-sec { margin-top: 18px; }
.sc-sh {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-block: 4px; margin-bottom: 10px;
}
.sc-sh h2 {
  margin: 0; font-size: 16px; line-height: 25px; font-weight: 600; color: var(--a-on-sur);
  overflow-wrap: normal; word-break: normal;
}
.sc-sh a {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  color: var(--a-pri); font-size: 14px; line-height: 20px; font-weight: 600;
  padding: 2px 6px; border-radius: 8px;
}
.sc-sh a .sc-i { width: 18px; height: 18px; }

.sc-empty {
  display: grid; justify-items: center; gap: 12px;
  padding: 32px 20px; text-align: center;
}
.sc-empty-ic {
  width: 76px; height: 76px; display: grid; place-items: center;
  border-radius: 50%; background: var(--a-sur-v); color: var(--a-t3);
}
.sc-empty-ic .sc-i { width: 34px; height: 34px; }
.sc-empty p { margin: 0; font-size: 14px; font-weight: 600; color: var(--a-on-sur-v); }
.sc-empty > span { font-size: 12px; color: var(--a-t3); }

/* ═══════════════ الأفاتار ووسام التوثيق ═══════════════ */

/* حلقة ٢ ثم فجوة ٢ ثم الصورة — `RingedAvatar`. الفجوة بلون الخلفية تجعل
   الإطار «حولها» لا ملتصقاً بها، فيُقرأ حلقةً أنيقة لا حدّاً سميكاً. */
.sc-ava {
  position: relative; flex: none; display: block;
  width: var(--s, 56px); height: var(--s, 56px);
  border-radius: 50%; padding: 2px; background: var(--a-ring);
}
.sc-ava.sq { border-radius: 26%; }
.sc-ava-in {
  display: block; width: 100%; height: 100%; padding: 2px;
  border-radius: 50%; background: var(--a-bg); overflow: hidden;
}
.sc-ava.sq .sc-ava-in { border-radius: 23%; }
.sc-ava img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; background: var(--a-sur);
}
.sc-ava.sq img { border-radius: 20%; }

/* بديل الصورة: رسم القسم داخل دائرة بلون السطح */
.sc-ava-f {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; background: var(--a-sur-v);
}
.sc-ava.sq .sc-ava-f { border-radius: 20%; }

/* الإشارة الوحيدة للتوثيق: لا شريحة «مميَّز» ولا «ملف موثَّق» في أي بطاقة.
   نسبة الوسام من الصورة كنسبته في ملف الطبيب (٣٤ من ١١٨)، بحدّ أعلى كي
   يبقى «علامة صغيرة فوق الصورة» لا قرصاً يزاحمها. */
.sc-ok {
  position: absolute; inset-block-end: -2px; inset-inline-end: -2px;
  width: clamp(18px, calc(var(--s) * .3), 22px);
  height: clamp(18px, calc(var(--s) * .3), 22px);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--a-ok); border: 2px solid var(--a-sur); color: #fff;
}
.sc-ok .sc-i { width: 58%; height: 58%; }

/* بانر العرض وبطاقة الترحيب لا تعرضان الوسام: الأول إعلان لا بطاقة سجل،
   والثانية تحمل شارة «جديد» في الموضع نفسه — والتطبيق لا يضع فيهما شيئاً. */
.sc-of .sc-ok, .sc-wc .sc-ok { display: none; }

/* ═══════════════ ١ · بلاطة الوصول السريع ═══════════════ */

/* ست بلاطات يجب أن تُرى دفعةً واحدة، فالفجوة ٢ والحشو الجانبي ١٢ لا ١٦ */
/* أربع بلاطات توزَّع على عرض الشاشة بالتساوي — لا تمرير ولا فراغ على الجانبين. */
.sc-rail-q {
  display: grid !important; grid-template-columns: repeat(4, 1fr);
  /* `.wrap` يضيف 16px؛ نلغيه هنا فقط ليبقى حشو الصف 12px نفسه في التطبيق. */
  gap: 8px !important; padding-inline: 12px !important; margin-inline: -16px;
  overflow: visible !important;
}

.sc-qt {
  display: grid; align-content: start; justify-items: center; gap: 8px;
  width: auto; min-width: 0; min-height: 112px;
  padding: 8px 4px; border-radius: 18px; text-align: center;
  background: #fff; border: 1px solid rgb(3 126 157 / .14); box-shadow: var(--a-sh);
  transition: transform var(--dur) var(--ease);
}
.sc-qt:active { transform: scale(.94); }
.sc-qt-ic {
  position: relative; width: 68px; height: 68px; display: grid; place-items: center;
  overflow: visible;
}
.sc-qt-ic::before {
  content: ""; position: absolute; width: 48px; height: 48px; border-radius: 50%;
  background: #EAF6F9;
}
.sc-qt-ic img {
  position: relative; z-index: 1; display: block; width: 66px; height: 66px;
  max-width: none; object-fit: contain;
}
/* الكلمة العربية لا تُكسر في منتصفها: «مستشفيات» سطرٌ كامل أو نقاط */
.sc-qt-l {
  font-size: 13px; line-height: 18px; font-weight: 600; color: #042A36;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: normal; word-break: normal;
}

/* ═══════════════ ٢ · بانر العروض ═══════════════ */

/* صفحة الدوّار بعرض العمود كاملاً وبحدّ ٤٦٠ — `widthIn(max = 460.dp)` */
.sc-rail-of > *, .sc-rail-wc > * { width: min(100%, 460px); }

.sc-of {
  position: relative; overflow: hidden; display: flex; align-items: center;
  gap: 16px; padding-inline: 20px; aspect-ratio: 1.85; border-radius: 20px;
  background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff;
}
.sc-of.roseta { cursor: default; }
/* دائرتان شفافتان تكسران سطح التدرّج فلا يبدو مسطّحاً */
.sc-of::before, .sc-of::after { content: ""; position: absolute; border-radius: 50%; }
.sc-of::before {
  width: 250px; height: 250px; inset-block-start: -90px; inset-inline-start: -60px;
  background: rgb(255 255 255 / .09);
}
.sc-of::after {
  width: 180px; height: 180px; inset-block-end: -60px; inset-inline-end: -50px;
  background: rgb(255 255 255 / .07);
}
.sc-of > * { position: relative; }
.sc-of-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-of-b b {
  font-size: clamp(26px, 10.6vw, 40px); line-height: 1.15; font-weight: 700;
  color: var(--hl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-of-b span {
  font-size: clamp(15px, 5.2vw, 19px); font-weight: 700; color: rgb(255 255 255 / .95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-of-b i {
  margin-top: 12px; font-style: normal; font-size: 16px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-of-b u {
  text-decoration: none; font-size: 13px; color: rgb(255 255 255 / .82);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-of-a { flex: none; }
/* فوق الهيرو تكون فجوة الحلقة بيضاء شفافة لا بلون خلفية الصفحة */
.sc-of-a .sc-ava-in, .sc-fc-cv .sc-ava-in { background: rgb(255 255 255 / .25); }

/* شارة المدّة مقتطعة من حافة البطاقة: بلا حشو خارجي وبزاوية سفلية واحدة */
.sc-of-d {
  position: absolute; inset-block-start: 0; inset-inline-end: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-end-start-radius: 16px;
  background: linear-gradient(90deg, #FFD75E, #F0A426);
  color: #5C3800; font-size: 11px; font-weight: 700;
}
.sc-of-d .sc-i { width: 14px; height: 14px; }

.sc-of.poster { padding: 0; aspect-ratio: 1200 / 630; }
.sc-of-img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════ ٣ · بطاقة «انضمّ حديثاً» ═══════════════ */

.sc-wc {
  position: relative; display: flex; align-items: center; gap: 13px;
  height: 138px; padding: 14px 16px 14px 14px; border-radius: 24px;
  background: linear-gradient(135deg, var(--w1), var(--w2));
  border: 1px solid color-mix(in srgb, var(--wa) 28%, transparent);
}
.sc-wc-a { position: relative; flex: none; }
.sc-wc-new {
  position: absolute; inset-block-start: -5px; inset-inline-start: -2px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 100px; background: var(--a-ok);
  color: #fff; font-size: 11px; font-weight: 700;
  box-shadow: 0 2px 6px rgb(0 0 0 / .18);
}
.sc-wc-new .sc-i { width: 10px; height: 10px; fill: currentColor; }
.sc-wc-b { flex: 1; min-width: 0; display: grid; gap: 4px; }
.sc-wc-l {
  font-size: 12px; font-weight: 700; color: var(--wa);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-wc-b b {
  font-size: 16px; line-height: 25px; font-weight: 700; color: #10243E;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: normal; word-break: normal;
}
.sc-wc-s {
  font-size: 12px; color: #3A5578;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* سهم لا زر: البطاقة كلها تُنقر، وزرٌّ داخلها يوهم بإجراءين */
.sc-wc-go {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: color-mix(in srgb, var(--wa) 14%, transparent);
  color: var(--wa);
}
.sc-wc-go .sc-i { width: 14px; height: 14px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-wc {
    background: linear-gradient(135deg, var(--n1), var(--n2));
    border-color: color-mix(in srgb, var(--na) 35%, transparent);
  }
  :root:not([data-theme="light"]) .sc-wc-l,
  :root:not([data-theme="light"]) .sc-wc-go { color: var(--na); }
  :root:not([data-theme="light"]) .sc-wc-go { background: color-mix(in srgb, var(--na) 30%, transparent); }
  :root:not([data-theme="light"]) .sc-wc-b b { color: #fff; }
  :root:not([data-theme="light"]) .sc-wc-s { color: rgb(255 255 255 / .85); }
}
:root[data-theme="dark"] .sc-wc {
    background: linear-gradient(135deg, var(--n1), var(--n2));
    border-color: color-mix(in srgb, var(--na) 35%, transparent);
}
:root[data-theme="dark"] .sc-wc-l { color: var(--na); }
:root[data-theme="dark"] .sc-wc-go { color: var(--na); background: color-mix(in srgb, var(--na) 30%, transparent); }
:root[data-theme="dark"] .sc-wc-b b { color: #fff; }
:root[data-theme="dark"] .sc-wc-s { color: rgb(255 255 255 / .85); }

/* ═══════════════ ٤ · بطاقة التخصص وصفّه ═══════════════ */

.sc-spc {
  display: grid; justify-items: center; align-content: start; gap: 8px;
  width: 112px; padding: 12px; border-radius: 20px;
  background: var(--a-sur); box-shadow: var(--a-sh); text-align: center;
  transition: transform var(--dur) var(--ease);
}
.sc-spc:active { transform: scale(.97); }
.sc-spc-ic, .sc-row-ic {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 14px; background: var(--ct);
}
/* ثلاثة أسطر بارتفاع محجوز: «الكبد والجهاز الهضمى والأمراض المعدية» تطول،
   والارتفاع الثابت يُبقي عدّاد كل البلاطات على خطّ واحد. */
.sc-spc-n {
  height: 44px; font-size: 11px; line-height: 14px; color: var(--a-on-sur);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; overflow-wrap: normal; word-break: normal;
}
.sc-spc-c { font-size: 11px; color: var(--a-t3); }

.sc-row {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: 20px; background: var(--a-sur); box-shadow: var(--a-sh);
  transition: transform var(--dur) var(--ease);
}
.sc-row:active { transform: scale(.985); }
.sc-row-b { flex: 1; min-width: 0; }
.sc-row-b b {
  display: block; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--a-on-sur);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: normal; word-break: normal;
}
.sc-row-b span { display: block; font-size: 12px; line-height: 20px; color: var(--a-t3); }
.sc-row-go { width: 24px; height: 24px; color: var(--a-t3); flex: none; }

/* حقل التصفية — الموقع وحده يملكه (شاشة التطبيق قائمة بلا بحث)، فليأخذ
   هيئة شريط بحث التطبيق نفسه كي لا يبدو عنصراً غريباً وسط شاشته. */
.sc-find {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 14px 16px; border-radius: 18px;
  background: var(--a-sur); border: 1px solid var(--a-out-v);
}
.sc-find .sc-i { color: var(--a-t3); }
.sc-find:focus-within { border-color: var(--a-pri); }
.sc-fin {
  flex: 1; min-width: 0; align-self: stretch;
  background: none; border: 0; outline: none;
  font: inherit; font-size: 14px; color: var(--a-on-sur);
}
.sc-fin::placeholder { color: var(--a-t3); }
.sc-fin::-webkit-search-cancel-button { display: none; }

/* ═══════════════ ٥ · بطاقة الطبيب/المنشأة ═══════════════ */

.sc-card {
  position: relative; display: block; padding: 14px;
  border-radius: 20px; background: var(--a-sur); box-shadow: var(--a-sh);
  transition: transform var(--dur) var(--ease);
}
.sc-card:active { transform: scale(.99); }
.sc-card-in {
  display: flex; align-items: flex-start; gap: 12px;
  padding-inline-end: 26px;     /* مكان القلب — الرابط لا يبتلعه */
}
.sc-card-b { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sc-card-h { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
/* `min-width:0` على الاسم نفسه لا على أبيه وحده: الكلمة العربية لا تُكسر
   في منتصفها (`overflow-wrap: normal`)، فاسمٌ من كلمة واحدة طويلة يوسّع
   العنصر إلى مقاسه الأدنى ويدفع البطاقة خارج الشاشة لولا هذا الصفر. */
.sc-card-h b {
  min-width: 0; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--a-on-sur);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: normal; word-break: normal;
}
.sc-card-s {
  font-size: 12px; line-height: 20px; color: var(--a-pri); max-width: 100%;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: normal; word-break: normal;
}
.sc-card-a, .sc-fc-a {
  display: flex; align-items: center; gap: 4px; margin-top: 4px; max-width: 100%;
  font-size: 12px; line-height: 20px; color: var(--a-t3);
}
.sc-card-a .sc-i, .sc-fc-a .sc-i { width: 13px; height: 13px; }
.sc-card-a > span, .sc-fc-a > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* شارة التوافر — كبسولة بحشو ١٠/٥ ونقطة ٧ حين تكون مفتوحة */
.sc-pill {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; max-width: 100%;
  padding: 5px 10px; border-radius: 100px;
  background: var(--a-sur-v); color: var(--a-on-sur-v);
  font-size: 12px; line-height: 17px; text-align: start;
}
.sc-pill.on {
  background: color-mix(in srgb, var(--a-ok) 14%, transparent); color: var(--a-ok);
}
.sc-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-ok); flex: none; }

/* القلب في آخر الصفّ كما في التطبيق — مطلقٌ كي لا يعشّش زرٌّ داخل رابط */
.sc-fav {
  position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--a-t3);
}
.sc-fav.on { color: var(--a-err); }
.sc-fav.on .sc-i { fill: currentColor; }

/* زرّا التواصل — `ActionPill`: نصف قطر ١٢ وحشو رأسي ٩ */
.sc-acts { display: flex; gap: 8px; margin-top: 12px; }
.sc-ap {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 9px 6px; border-radius: 12px;
  font-size: 14px; line-height: 20px; font-weight: 600;
}
.sc-ap .sc-i { width: 16px; height: 16px; }
.sc-ap.p1 { background: var(--d-blue-soft); color: var(--d-blue-ink); }
.sc-ap.p2 { background: var(--d-green-soft); color: var(--d-green-ink); }

/* وسم الاسم — `TitleTag`: لون ثابت لكل وسم، والثبات هو ما يجعله يُعرف بلمحة.
   ألوان التطبيق حرفياً في النهاري؛ ولأن التطبيق لا يفتح لها نظيراً ليليّاً
   ترفع النسخة الليلية إضاءتها وحدها كي لا تغرق في سطحٍ داكن. */
.sc-tag-b {
  flex: none; font-style: normal; font-size: 11px; line-height: 16px; font-weight: 600;
  padding: 2px 6px; border-radius: 7px; white-space: nowrap;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc) 28%, transparent);
}
.sc-tag-b.t0 { --tc: #5A7C88; }
.sc-tag-b.t1 { --tc: #037E9D; }
.sc-tag-b.t2 { --tc: #EC4899; }
.sc-tag-b.t3 { --tc: #D97706; }
.sc-tag-b.t4 { --tc: #05738F; }
.sc-tag-b.t5 { --tc: #DC2626; }
.sc-tag-b.t6 { --tc: #0891B2; }
.sc-tag-b.t7 { --tc: #7C3AED; }
.sc-tag-b.t8 { --tc: #4F46E5; }
.sc-tag-b.t9 { --tc: #8B5CF6; }
.sc-tag-b.t10 { --tc: #A855F7; }
.sc-tag-b.t11 { --tc: #059669; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-tag-b.t0 { --tc: #8FA9B3; }
  :root:not([data-theme="light"]) .sc-tag-b.t1 { --tc: #7CADFF; }
  :root:not([data-theme="light"]) .sc-tag-b.t2 { --tc: #F9A8D4; }
  :root:not([data-theme="light"]) .sc-tag-b.t3 { --tc: #FBBF24; }
  :root:not([data-theme="light"]) .sc-tag-b.t4 { --tc: #89D0E1; }
  :root:not([data-theme="light"]) .sc-tag-b.t5 { --tc: #FCA5A5; }
  :root:not([data-theme="light"]) .sc-tag-b.t6 { --tc: #67E8F9; }
  :root:not([data-theme="light"]) .sc-tag-b.t7 { --tc: #C4B5FD; }
  :root:not([data-theme="light"]) .sc-tag-b.t8 { --tc: #A5B4FC; }
  :root:not([data-theme="light"]) .sc-tag-b.t9 { --tc: #C4B5FD; }
  :root:not([data-theme="light"]) .sc-tag-b.t10 { --tc: #D8B4FE; }
  :root:not([data-theme="light"]) .sc-tag-b.t11 { --tc: #6EE7B7; }
}
:root[data-theme="dark"] .sc-tag-b.t0 { --tc: #8FA9B3; }
:root[data-theme="dark"] .sc-tag-b.t1 { --tc: #7CADFF; }
:root[data-theme="dark"] .sc-tag-b.t2 { --tc: #F9A8D4; }
:root[data-theme="dark"] .sc-tag-b.t3 { --tc: #FBBF24; }
:root[data-theme="dark"] .sc-tag-b.t4 { --tc: #89D0E1; }
:root[data-theme="dark"] .sc-tag-b.t5 { --tc: #FCA5A5; }
:root[data-theme="dark"] .sc-tag-b.t6 { --tc: #67E8F9; }
:root[data-theme="dark"] .sc-tag-b.t7 { --tc: #C4B5FD; }
:root[data-theme="dark"] .sc-tag-b.t8 { --tc: #A5B4FC; }
:root[data-theme="dark"] .sc-tag-b.t9 { --tc: #C4B5FD; }
:root[data-theme="dark"] .sc-tag-b.t10 { --tc: #D8B4FE; }
:root[data-theme="dark"] .sc-tag-b.t11 { --tc: #6EE7B7; }

/* ═══════════════ ٦ · بلاطة «متاح الآن» ═══════════════ */

.sc-av {
  display: grid; justify-items: center; align-content: start; gap: 6px;
  width: 112px; padding: 12px 4px; border-radius: 18px;
  background: var(--a-sur); box-shadow: var(--a-sh); text-align: center;
}
.sc-av-a { position: relative; }
/* الوسم هنا من `doctor_id` الخام غير المطبَّع — فقد يأتي «استشاري جراحة
   المسالك» لا «استشاري». والبلاطة ١١٢px ثابتة والشريحة `nowrap`، فبلا هذا
   القيد يخرج الوسم من حدّها ويزحم جارتها في الشريط. */
.sc-av .sc-tag-b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* النقطة الخضراء هنا تعني «مفتوح الآن»، ووسام التوثيق أخضر أيضاً — فلو
   اجتمعا على صورة واحدة صارا إشارتين متطابقتين بمعنيين. الدور للنقطة. */
.sc-av .sc-ok { display: none; }
.sc-av-dot {
  position: absolute; inset-block-end: 0; inset-inline-end: 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--a-ok); border: 2px solid var(--a-sur);
}
.sc-av b {
  width: 100%; max-width: 100%; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--a-on-sur);
  direction: rtl; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-av-s {
  width: 100%; max-width: 100%; font-size: 11px; line-height: 16px; color: var(--a-on-sur-v);
  direction: rtl; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-av-n {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--a-ok);
}
.sc-av-n i { width: 6px; height: 6px; border-radius: 50%; background: var(--a-ok); }

/* ═══════════════ ٧ · بطاقة المنشأة ═══════════════ */

.sc-fc {
  display: block; width: 210px; height: 254px; overflow: hidden;
  border-radius: 20px; background: var(--a-sur); box-shadow: var(--a-sh);
}
/* رأس البطاقة: ارتفاع مقطوع و`overflow` عليه هو نفسه.
   القصّ على البطاقة الخارجية وحدها كان يترك الصورة تدفع تخطيط الرأس قبل أن
   تُقصّ، فتخرج بطاقة مشوّهة على بعض المتصفّحات. */
.sc-fc-cv {
  position: relative; display: block; height: 124px; overflow: hidden;
  background: linear-gradient(135deg, var(--g1), var(--g2));
}
/* دائرة شفافة تكسر سطح التدرّج — للسجلّ بلا صورة وحده */
.sc-fc-cv:not(.has-im)::before {
  content: ""; position: absolute; width: 96px; height: 96px; border-radius: 50%;
  inset-block-start: -30px; inset-inline-start: -26px; background: rgb(255 255 255 / .10);
}
/* الشعار البديل يتوسّط الرأس حين لا صورة */
.sc-fc-cv:not(.has-im) > .sc-ava {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(50%, -50%);
}
/* الصورة تملأ الرأس كاملاً — تموضع مطلق فلا يتأثّر حجمها بتخطيط الأب */
.sc-fc-im {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* تدرّج خافت أسفل الصورة يفصلها عن النصّ الأبيض تحتها */
.sc-fc-cv.has-im::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgb(0 0 0 / .18) 100%);
}
/* `justify-items: center` وحده يجعل عرض كل عنصر = عرض محتواه، والعمود التلقائي
   ينمو معه — فبطاقة ٢١٠px كان جسمها يتمدّد إلى ٨٩١px والنصّ يُقصّ من الطرفين
   بلا نقاط. `minmax(0, 1fr)` يمنع نموّ العمود، و`max-width` يقصّ كل عنصر على
   حدة فتعمل النقاط (`text-overflow`) كما تعمل في التطبيق. */
.sc-fc-b {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 22px 20px minmax(16px, 1fr) 28px;
  justify-items: center; gap: 2px; height: 130px;
  padding: 8px 12px; text-align: center;
}
.sc-fc-b > * { max-width: 100%; min-width: 0; }
.sc-fc-s, .sc-pill {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-fc-h { display: flex; align-items: center; gap: 5px; max-width: 100%; }
.sc-fc-h b {
  min-width: 0; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--a-on-sur);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-fc-s {
  max-width: 100%; font-size: 12px; line-height: 20px; color: var(--a-on-sur-v);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-fc-a .sc-i { color: var(--a-pri); }
.sc-fc-a {
  align-self: center; min-height: 16px; margin-top: 0;
  font-size: 11px; line-height: 16px;
}
.sc-fc-blank { visibility: hidden; }
.sc-fc-status {
  width: 100%; height: 28px; display: grid; place-items: center;
}
.sc-fc-status .sc-pill {
  margin-top: 0; max-width: 100%; padding: 4px 9px; line-height: 16px;
}

/* ═══════════════ ٨ · شرائح القائمة ═══════════════ */

.sc-fpills { padding-block: 10px 12px !important; }
.sc-fp {
  padding: 8px 16px; border: 0; border-radius: 100px; cursor: pointer;
  background: var(--a-sur); color: var(--a-on-sur-v); box-shadow: var(--a-sh);
  font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sc-fp.on { background: var(--a-pri); color: var(--a-on-pri); }

.sc-geo {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--a-err) 8%, transparent);
  color: var(--a-err); font-size: 12px; line-height: 17px;
}

.sc-dist {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  padding: 4px 9px; border-radius: 100px;
  background: color-mix(in srgb, var(--a-ok) 12%, transparent);
  color: var(--a-ok); font-size: 12px; line-height: 17px; font-weight: 600;
}
.sc-dist .sc-i { width: 13px; height: 13px; fill: currentColor; }
.sc-dist.off {
  background: color-mix(in srgb, var(--a-t3) 12%, transparent);
  color: var(--a-t3); font-weight: 400;
}
.sc-dist.off .sc-i { fill: none; }

/* ═══════════════ ٩ · صفّ الموضوع ودعوة التطبيق ═══════════════ */

.sc-tp {
  display: flex; align-items: stretch; height: 96px; overflow: hidden;
  border-radius: 18px; background: var(--a-sur); box-shadow: var(--a-sh);
}
/* صور المواضيع مصمَّمة عريضة (١٢٠٠×٦٣٠) فتحفظ نسبتها ولا تُقصّ من الجانبين */
.sc-tp-im { width: 150px; flex: none; background: var(--a-sur-v); }
.sc-tp-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-tp-b { flex: 1; min-width: 0; display: grid; align-content: center; gap: 5px; padding: 12px; }
.sc-tp-b b {
  font-size: 14px; line-height: 22px; font-weight: 600; color: var(--a-on-sur);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: normal; word-break: normal;
}
.sc-tp-b span { font-size: 11px; color: var(--a-t3); }

/* دعوة تحميل التطبيق — لا تظهر لصاحب الآيفون أصلاً */
.sc-cta {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px;
  padding: 16px; border-radius: 20px; background: var(--a-sur); box-shadow: var(--a-sh);
}
.sc-cta-ic {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 15px; background: var(--a-pri-c); color: var(--a-pri);
}
.sc-cta-ic .sc-i { width: 24px; height: 24px; }
.sc-cta-b b { display: block; font-size: 15px; font-weight: 700; color: var(--a-on-sur); }
.sc-cta-b span { display: block; font-size: 13px; line-height: 1.55; color: var(--a-on-sur-v); }
.sc-cta .btn { grid-column: 1 / -1; }

/* الشاشة العريضة: العمود يبقى بعرض الهاتف كما في `PageSlot` على اللوح */
@media (hover: hover) {
  .sc-card:hover, .sc-row:hover, .sc-spc:hover, .sc-av:hover, .sc-fc:hover, .sc-tp:hover {
    box-shadow: 0 2px 6px rgb(15 23 42 / .1), 0 10px 28px rgb(15 23 42 / .08);
  }
}