/* ═══════════════════════════════════════════════════════════════════════
   أنماط الشاشات — ما تنفرد به كل صفحة بعد اللبنات المشتركة.

   المرجع هنا ليس ذوقاً حراً بل شاشات التطبيق: `ui/home/HomeScreen.kt`
   و`ui/detail/DoctorDetailScreen.kt` و`ui/components/*.kt`. المقاسات
   منقولة عنها (البلاطة ٦٢، بطاقة التخصص ١١٢، الأفاتار ١١٨، حشو الكارت ١٤،
   صندوق الأيقونة ٤٤ بنصف قطر ١٤…) كي يفتح صاحب الآيفون الموقع فيجد
   التطبيق لا نسخةً تشبهه.

   ولا يُعرَّف هنا رمزٌ جديد للألوان: كل شيء من رموز `base.css` كي ينقلب
   المظهر الداكن وحده بلا لون منسيّ. الاستثناء الوحيد هو الأسطح الملوّنة
   المغلقة (الذهبي، والهيرو الكحلي) — تلك ثابتة في المظهرين كما في التطبيق
   لأنها ليست خلفية الصفحة بل لوحة قائمة بذاتها.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── إصلاحات تسري على كل الشاشات ──────────────────────────────────────

   عنصر الشبكة أصغره الافتراضي `min-width:auto`، أي أنه لا يضيق تحت مقاس
   محتواه الأدنى. وبطاقة الطبيب تحمل شريحة توافر بـ`white-space:nowrap`،
   فأصغرها الأدنى أعرض من العمود على شاشة ٣٧٥ — فتخرج البطاقة من `.stack`
   وتدفع الصفحة أفقياً ٨١ بكسلاً. صفرٌ هنا يعيدها إلى مسار العمود. */
#app .stack > *,
#app .grid2 > *,
#app .sgrid > * { min-width: 0; }

/* الشريط السفلي أطول من رمزه: زرّ الرئيسية دائرةٌ ٤٤ فيصير الارتفاع
   الحقيقي ٨٣ لا ٦٤. الرمز لا يُمسّ لأن غيره يبني عليه، والفرق يُعوَّض
   هنا حشواً أسفل كل شاشة كي لا يختفي آخر كارت تحت الشريط. */
#app > .view { padding-block-end: 34px; }

/* وشريط الأفعال يُرفع بالفارق نفسه كي لا يستقرّ خلف الشريط السفلي.
   تنبيه لمن يقرأ بعدي: هذا التصحيح نائمٌ اليوم. `body{overflow-x:hidden}`
   في `base.css` يجعل الجسم حاويةَ تمرير، فيلتصق `position:sticky` بمنفذ
   تمرير لا يتحرّك أصلاً — أي أن الشريط لا يلتصق بشيء بل ينساب مع الصفحة.
   القياس على الجهاز يؤكّده: عند تمرير ٧٠٠ يخرج الشريط من أعلى الشاشة.
   ولذلك صُمِّم أدناه سطراً واحداً: يقرأ جيداً وهو منساب، ويبقى مقبولاً
   عائماً إن أُصلح الجذر (وإصلاحه سطرٌ في `base.css` ليس ملفي:
   `overflow-x: clip` بدل `hidden` — يقصّ الزائد بلا إنشاء حاوية تمرير). */
.acts { bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); }

/* نصّ يُقصّ بعد سطرٍ أو سطرين بدل أن يمدّ البطاقة — أداة تتكرر أدناه */
.acard-x, .stile-n, .qtile-l, .scell-n, .prow-b span, .acard-b b, .opost-h {
  overflow: hidden;
  overflow-wrap: break-word;   /* عند كلمة أطول من السطر: لا تدفع الصندوق */
  word-break: normal;          /* لكن لا تُكسر الكلمة العربية في منتصفها */
}

/* شريحة التوافر قد تنتهي باسم عيادة طويل («يفتح اليوم ٥ م · عيادات السيدة
   رقية الخيرية»)، والشريحة `nowrap` بطبعها فتخرج من البطاقة إلى خارج الشاشة.
   السماح لها بالالتفاف يُبقيها داخل حدّها بلا حذف معلومة. */
.dcard-a .chip, .avail { max-width: 100%; white-space: normal; text-align: start; }

/* صفّ شرائح عام — التخصصات في البحث وبنود الخدمات في ملف الطبيب */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* هدف اللمس الموصى به ٤٤؛ زرّ الترويسة كان ٤٢ فتُخطئه الإصبع على الحافة */
.hdr-btn { width: 44px; height: 44px; }

/* مساعدات صغيرة يستدعيها أكثر من ملف */
.center { text-align: center; }
.stack.pad { padding-block-start: 14px; }
.btn.block { display: flex; width: 100%; }
.lead { font-size: 16px; font-weight: 700; line-height: 1.85; }
svg.inl { width: 15px; height: 15px; vertical-align: -3px; margin-inline: 2px; color: var(--teal); }

/* ═══════════════ ١ · الرئيسية ═══════════════ */

/* شريط الخدمات: ست بلاطات يجب أن تُرى دفعةً واحدة على شاشة الهاتف كما في
   التطبيق، فالفجوة ضيّقة والحشو الجانبي أقلّ من بقية الأشرطة. */
.rail-q { gap: 4px; padding-inline: 12px; margin-inline: -12px; }

.qtile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  width: 76px;                 /* ٦٢ في التطبيق زائد فسحة: خطّ المتصفّح أعرض
                                  من خطّ أندرويد بنفس المقاس، و«مستشفيات»
                                  انكسرت في التطبيق حين ضاق العرض عن الكلمة */
  padding: 6px 2px 4px;
  min-height: 44px;
  text-align: center;
  border-radius: 16px;
  transition: transform var(--dur) var(--ease);
}
.qtile:active { transform: scale(.94); }

.qtile-ic {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 17px;
  background: var(--teal-soft);
  border: 1px solid color-mix(in srgb, var(--teal) 26%, transparent);
  color: var(--teal);
}
.qtile-ic svg { width: 26px; height: 26px; }
.qtile-ic b { font-size: 19px; font-weight: 800; }

.qtile-l {
  font-size: 11.5px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  min-height: 2.7em;            /* سطران محجوزان دائماً فتستوي رؤوس البلاطات */
}

/* شريط العروض: عرض البطاقة محدود وإلا تمدّدت على الشاشة الكبيرة حتى صارت
   لافتة — نفس حدّ `widthIn(max = 460.dp)` في التطبيق. */
.rail-offers .ocard { width: min(84vw, 330px); }

/* بطاقة التخصص في الشريط — ١١٢ عرضاً كما في `SpecialtyCard` */
.stile {
  display: grid; justify-items: center; align-content: start; gap: 8px;
  width: 112px; padding: 12px 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stile:active { transform: scale(.97); }
@media (hover: hover) { .stile:hover { box-shadow: var(--shadow-lift); } }

.stile-ic {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 14px; background: var(--teal-soft); color: var(--teal);
}
.stile-ic svg { width: 26px; height: 26px; }

/* ثلاثة أسطر بارتفاع محجوز: أسماء التخصصات العربية طويلة («الكبد والجهاز
   الهضمى والأمراض المعدية»)، والارتفاع الثابت يُبقي عدّاد كل البلاطات على
   خطّ واحد مهما اختلفت أطوال الأسماء. */
.stile-n {
  font-size: 11.5px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  height: 3.9em; overflow: hidden;
}
.stile-c { font-size: 11px; font-weight: 700; color: var(--faint); }

/* دعوة تحميل التطبيق — لا تظهر لصاحب الآيفون أصلاً */
.cta {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 12px; padding: 16px;
}
.cta-ic {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 15px; background: var(--teal-soft); color: var(--teal);
}
.cta-ic svg { width: 24px; height: 24px; }
.cta-b b { display: block; font-size: 15px; font-weight: 800; }
.cta-b span { display: block; color: var(--muted); font-size: 13px; line-height: 1.55; }
.cta .btn { grid-column: 1 / -1; }   /* الزر سطراً كاملاً: بجوار النصّ يخنقه على ٣٧٥ */

/* ═══════════════ ٢ · كل التخصصات ═══════════════ */

/* حقل التصفية: نفس هيئة صندوق البحث في الترويسة كي يُقرأ حقلاً لا زرّاً */
.fwrap, .srch {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding-inline: 15px; margin-block-start: 16px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow);
}
.fwrap svg, .srch svg { width: 20px; height: 20px; color: var(--faint); flex: none; }
.fwrap:focus-within, .srch:focus-within { border-color: var(--teal); }

.fin, .srch input {
  flex: 1; min-width: 0; align-self: stretch;
  background: none; border: 0; outline: none;
  font: inherit; font-size: 15px; color: var(--ink);
}
.fin::placeholder, .srch input::placeholder { color: var(--faint); }
/* زرّ المسح الأصلي في متصفّح ويب-كِت يزدوج مع زرّنا فيظهر ✕ مرتين */
.fin::-webkit-search-cancel-button,
.srch input::-webkit-search-cancel-button { display: none; }

/* عمود واحد على الهاتف كشاشة التطبيق، وعمودان حين يتّسع العمود فقط —
   عمودان على ٣٧٥ يجعلان «الكبد والجهاز الهضمى…» أربعة أسطر. */
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }

.scell {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 60px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.scell:active { transform: scale(.985); }
@media (hover: hover) { .scell:hover { border-color: color-mix(in srgb, var(--teal) 45%, transparent); } }
.scell-n { font-size: 14px; font-weight: 700; line-height: 1.4; }
.scell-c { font-size: 12px; font-weight: 700; color: var(--faint); flex: none; }

/* ═══════════════ ٣ · قائمة تخصص ═══════════════ */

.lst-n { margin: 14px 0 10px; font-weight: 700; }

.rail-chips { gap: 8px; margin-block-end: 14px; }
.fchip {
  min-height: 44px;            /* شريحة تُضغط لا تُقرأ — فمقاس الإصبع لا العين */
  padding-inline: 16px;
  font-size: 13.5px; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fchip.on {
  background: linear-gradient(140deg, var(--navy-top), var(--navy-deep));
  color: #fff; border-color: transparent;
}

/* ═══════════════ ٤ · ملف الطبيب ═══════════════ */

/* الهيرو الكحلي: الترويسة والبطاقة الشخصية لوحٌ واحد كما في التطبيق، لا
   شريطٌ كحلي فوق خلفية رمادية. لذلك تُنزع خلفية `.hdr` واستدارتها هنا
   وتُورَّث إلى الحاوية — وإلا ظهر خطّ فاصل في منتصف الكحلي. */
.doc-top {
  position: relative; overflow: hidden; color: #fff;
  border-end-start-radius: 30px; border-end-end-radius: 30px;
  background:
    radial-gradient(circle at 88% 6%, rgb(255 255 255 / .13), transparent 58%),
    linear-gradient(210deg, var(--navy-top) 0%, var(--navy-mid) 45%, var(--navy-deep) 100%);
}
.doc-top::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(rgb(255 255 255 / .16) 1.7px, transparent 1.8px),
    radial-gradient(rgb(255 255 255 / .09) 1.7px, transparent 1.8px);
  background-size: 30px 30px, 30px 30px;
  background-position: 0 0, 15px 15px;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent 78%);
  mask-image: linear-gradient(270deg, #000, transparent 78%);
}
.doc-top > * { position: relative; z-index: 1; }
.doc-top .hdr { background: none; border-radius: 0; padding-block-end: 4px; }
.doc-top .hdr::after { content: none; }

.doc-hero { padding: 4px 16px 22px; }

/* الأفاتار وشارة التوثيق: الشارة تركب حافة الصورة، فالحاوية بمقاس الصورة
   تماماً لا بعرض العمود — وإلا هامت الشارة في الفراغ بعيداً عنها. */
.avaw { position: relative; width: 112px; margin-inline: auto; }
.doc-hero .ava {
  box-shadow: 0 0 0 3px rgb(255 255 255 / .25), 0 10px 26px rgb(4 12 30 / .35);
  background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .35);
}
.doc-hero .ava b { color: #fff; }
/* حلقة ذهبية للملف الموثَّق — نفس إشارة التطبيق، والذهبي فيه محجوزٌ
   للتوثيق والعروض وحدهما فلا يلتبس بغيره. */
.doc-hero .ava.ok {
  border-color: #E2AE2A;
  box-shadow: 0 0 0 3px #D9A017, 0 0 0 5px rgb(255 255 255 / .18), 0 10px 26px rgb(4 12 30 / .35);
}
.verif {
  position: absolute; inset-block-end: 2px; inset-inline-start: 2px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: #0E9F81; color: #fff; border: 2px solid var(--navy-deep);
}
.verif svg { width: 17px; height: 17px; }

/* وسم «دكتورة/مستشفى…» — نفس `TitleTag`: زجاجيّ فوق الكحلي لا لون ثابت */
.ttag {
  display: inline-block; margin-block-start: 12px;
  padding: 3px 9px; border-radius: 7px;
  font-size: 11.5px; font-weight: 700;
  background: rgb(255 255 255 / .2); color: #fff;
  border: 1px solid rgb(255 255 255 / .35);
}

/* نصوص الهيرو فوق الكحلي: رموز النصّ العامة مضبوطة على خلفية الصفحة
   الفاتحة، فلو تُركت لظهر الاسم كحلياً على كحليّ. */
.doc-hero h1 { color: #fff; margin-block: 8px 2px; font-size: 22px; line-height: 1.35; }
.doc-hero .dep { color: rgb(255 255 255 / .82); }
.qual {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 8px 0 0; color: rgb(255 255 255 / .88); font-size: 13.5px; line-height: 1.5;
}
.qual svg { color: #FFE9A8; flex: none; }

/* شريحة الحالة في الهيرو: لا تُترك لألوان الشريحة العامة لأن خلفيتها
   الكحلية ثابتة في المظهرين — أخضر صريح للمفتوح، وزجاج أبيض لغيره. */
.avail {
  display: inline-flex; margin: 12px 0 0; padding: 6px 13px;
  background: rgb(255 255 255 / .17); color: #fff;
  border-color: rgb(255 255 255 / .3);
}
.avail.ok { background: #0B7C63; border-color: rgb(255 255 255 / .3); color: #fff; }
.avail.warn { background: rgb(255 255 255 / .17); color: #fff; }
.avail svg { width: 15px; height: 15px; }

.doc-body { padding-block-start: 16px; }

/* مقاسان لأيقونات هذه الشاشة: الصغيرة داخل السطور، والكبيرة رأسَ بطاقة */
.doc-ic { width: 17px; height: 17px; }
.doc-ic.lg { width: 22px; height: 22px; }

/* شريط العرض الذهبي — الذهبي لا يُستعمل لغيره في المنتج كلّه، فوجوده
   وحده إشارة. ألوانه ثابتة في المظهرين لأنه سطحٌ ملوّن مغلق لا خلفية. */
.offer-strip {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; margin-block-end: 14px;
  border-radius: 16px; color: #5C3800;
  background: linear-gradient(100deg, #FFD75E, #F0A426);
  border: 1px solid rgb(255 255 255 / .5);
  box-shadow: var(--shadow);
}
.offer-strip svg { color: #7A4B00; flex: none; }
.offer-strip > span { flex: 1; min-width: 0; }
.offer-strip b { display: block; font-size: 14px; font-weight: 800; }
.offer-strip i {
  display: block; font-style: normal; font-size: 12.5px; color: #7A4B00;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.offer-strip em { font-style: normal; font-size: 13.5px; font-weight: 800; flex: none; }

/* شريط واحد لا شريطان: الهامش العلوي يتّسع لبطاقة اسم الفرع المعلّقة فوقه */
.acts { gap: 5px; padding: 5px; margin-block-start: 36px; }
.acts .btn { min-width: 0; overflow: hidden; padding-inline: 5px; }
.acts .btn.ico-only { flex: 0 0 44px; padding: 0; }

/* القياس على الجهاز بخطّ Cairo: «اتصال» ٩٩ بكسلاً و«واتساب» ١١٢ برسمهما،
   والأزرار الأيقونية الثلاثة ١٣٢، والمتاح داخل عمود ٣٧٥ إنما هو ١٧٣ للاثنين
   — فالخمسة لا تجتمع في سطر واحد ما دام الرسم قائماً، وآخرها يهرب إلى سطر
   وحده فيبدو عطلاً. الرسم هو ما يسقط لا الكلمة: «اتصال» و«واتساب» كلمتان
   تشرحان نفسيهما، أما زرّ أيقونةٍ بلا كلمة فلا يشرحه شيء. */
@media (max-width: 430px) {
  .acts .btn:not(.ico-only) svg { display: none; }
}

/* اسم الفرع المختار: خارج تدفّق الأزرار لأنه سطرٌ لا زرّ، ومعلّق فوق
   الشريط لا داخله كي لا يسرق من عرضها شيئاً. */
.acts-note {
  position: absolute; inset-inline: 0; inset-block-end: calc(100% + 6px);
  width: fit-content; max-width: 100%; margin-inline: auto;
  padding: 3px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid var(--line);
  font-size: 12px; font-weight: 700; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acts .fav.on { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.acts .fav.on svg { fill: currentColor; }

/* ── برنامج اليوم ── */

/* البطاقة زرٌّ لا `div`: تُعاد إليها هيئة النصّ التي يمسحها المتصفّح عن
   الأزرار. والحدّ الأعلى للعرض يمنع «يفتح بعد ٤ ساعات و٥٠ دقيقة» من مطّ
   البطاقة إلى ثلث الشريط. */
.stop {
  text-align: start; cursor: pointer; font: inherit; color: inherit;
  min-height: 74px; max-width: 232px;
}
.stop .tag {
  display: block; margin-block-start: 3px;
  font-size: 11.5px; font-weight: 700; color: var(--faint);
}
.stop.now .tag { color: var(--ok); }
.stop.next .tag { color: var(--teal); }

.stops-none {
  display: grid; gap: 3px; padding: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.stops-none b { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.stops-none span { color: var(--muted); font-size: 13px; }

/* ── بطاقة العيادة ── */

.clinic { padding: 14px; margin-block-start: 12px; }
.clinic-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-block-end: 10px;
}
.clinic-hd b { font-size: 15px; font-weight: 800; line-height: 1.4; }

.irow { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.irow svg { color: var(--faint); flex: none; margin-block-start: 3px; }
.irow b { font-weight: 700; }
.irow > span { flex: 1; min-width: 0; }
/* الهاتف رابطٌ يُضغط: صفٌّ كامل بمقاس إصبع لا نصٌّ ملوّن */
.irow a {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; flex: 1; min-width: 0; color: var(--teal); font-weight: 700;
}
.irow a svg { color: var(--teal); margin-block-start: 0; }

.maplink {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; margin-block-start: 10px; padding-inline: 12px;
  border: 1px solid var(--line); border-radius: 14px;
  color: var(--teal); font-size: 13.5px; font-weight: 700;
}
.maplink svg { color: currentColor; }
@media (hover: hover) { .maplink:hover { background: var(--card-2); } }

.shot {
  flex: none; padding: 0; border: 0; background: none; line-height: 0;
  border-radius: 12px; overflow: hidden; cursor: pointer;
}
.photos { margin-block-start: 10px; }

/* ── جدول الأسبوع ── */

.week { margin-block-start: 10px; }
.tday {
  display: inline-block; margin-inline-start: 6px;
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--teal);
}
/* الفترات جنباً إلى جنب لا سطراً تحت سطر — أقصر ارتفاعاً وأسرع قراءةً */
.week td:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
.per {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent);
  white-space: nowrap;
}
/* الفترة الجارية الآن مصبوغة: من يفتح الملف الثامنة مساءً يريد أن يعرف
   أيّ فترةٍ هي المفتوحة، لا أن اليوم مفتوح فحسب. */
.per.live {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  color: var(--ok);
}

/* نقطة «فرع اليوم» على التبويب */
.tab .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  display: inline-block; margin-inline-end: 6px;
}
.tab { min-height: 44px; }
.tab.on .dot { background: var(--teal-bright); }

/* ── الخدمات والمؤهلات ── */

.bullets { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bullets li { position: relative; padding-inline-start: 18px; font-size: 14px; line-height: 1.7; }
.bullets li::before {
  content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
}
.clinic .chips { margin-block-start: 2px; }

/* ── التواصل والختم ── */

.social {
  display: flex; align-items: center; gap: 10px;
  margin-block-start: 22px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.social b { font-size: 14px; font-weight: 700; flex: 1; }
.social a {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 14px; background: var(--card-2); color: var(--teal);
  border: 1px solid var(--line);
}
@media (hover: hover) { .social a:hover { border-color: var(--teal); } }

.stamp {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-block-start: 20px; text-align: center; font-size: 12.5px;
}
.stamp svg { color: var(--ok); flex: none; }

/* ── عارض الصور ──────────────────────────────────────────────────────
   الطبقة خارج `#app`، فحارس مقاس الأيقونات لا يبلغها: كل رسم هنا يأخذ
   مقاسه صراحةً وإلا تمدّد السهم على نصف الشاشة. */
.lb {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 24px;
  background: rgb(4 8 18 / .92);
  animation: lb-in 160ms var(--ease);
}
@keyframes lb-in { from { opacity: 0 } to { opacity: 1 } }
.lb img { max-width: 100%; max-height: 78vh; border-radius: 14px; display: block; }
.lb-x, .lb-a {
  position: absolute; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / .14); color: #fff; font-size: 17px; line-height: 1;
}
.lb-x { inset-block-start: max(16px, env(safe-area-inset-top)); inset-inline-end: 16px; }
/* التوسيط بالهوامش لا بـ`translate`: العنصر المعكوس يحمل `transform`
   سطرياً في الشيفرة، وأي `transform` هنا يمحوه فينقلب السهمان معاً. */
.lb-a { inset-block: 0; block-size: 44px; margin-block: auto; inset-inline-end: 12px; }
.lb-a.end { inset-inline-end: auto; inset-inline-start: 12px; }
.lb-a svg { width: 24px; height: 24px; }
.lb-n {
  position: absolute; inset-block-end: max(20px, env(safe-area-inset-bottom));
  inset-inline: 0; text-align: center; color: rgb(255 255 255 / .8);
  font-size: 13px; font-weight: 700;
}
.lb-err { color: #fff; text-align: center; }

@media (prefers-reduced-motion: reduce) { .lb { animation: none; } }

/* ═══════════════ ٥ · العروض ═══════════════ */

.ocard-full { overflow: hidden; }
/* شريط ذهبي رفيع أعلى البطاقة: يوسمها عرضاً قبل قراءة كلمة */
.gold-bar { display: block; height: 5px; background: linear-gradient(90deg, #FFD75E, #F0A426); }

.ocard-full-b { padding: 16px; }
.ocard-full-h {
  display: flex; align-items: center; gap: 7px;
  color: var(--gold); font-size: 13px; font-weight: 800;
}
.ocard-full-h svg { width: 17px; height: 17px; }
.ocard-full-b h1 { margin: 6px 0 8px; font-size: 22px; font-weight: 800; line-height: 1.4; }
.ocard-full-b p { margin: 0 0 10px; line-height: 1.85; }
.ocard-full-m { display: flex; flex-wrap: wrap; gap: 7px; margin-block-start: 12px; }

/* بوستر العرض المولَّد — التدرّج يأتي سطرياً من بيانات العرض نفسه.
   النسبة ١٫٨٥ كما في التطبيق، والدائرتان الشفافتان زخرفتُه. */
.opost {
  position: relative; overflow: hidden;
  aspect-ratio: 1.85; min-height: 150px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px; padding: 18px 20px; color: #fff;
}
.opost::before, .opost::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.opost::before { width: 220px; height: 220px; inset-block-start: -90px; inset-inline-start: -60px; background: rgb(255 255 255 / .09); }
.opost::after { width: 160px; height: 160px; inset-block-end: -60px; inset-inline-end: -50px; background: rgb(255 255 255 / .07); }
.opost > * { position: relative; }
.opost-h {
  font-size: clamp(24px, 8.4vw, 38px); font-weight: 800; line-height: 1.12;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.opost-s { font-size: clamp(14px, 4.4vw, 19px); font-weight: 700; color: rgb(255 255 255 / .95); }
.opost-n { font-style: normal; font-size: 14px; font-weight: 700; margin-block-start: 8px; }

/* إطار صورة له بديل مرسوم خلفه دائماً — فإن غابت الصورة أو فشلت ظهر
   الرسم بلا مربّع مكسور ولا قفزة في الارتفاع. */
.mdia {
  position: relative; display: grid; place-items: center; overflow: hidden;
  background: var(--card-2); color: var(--faint); border-radius: var(--r-sm);
}
.mdia-x { width: 34px; height: 34px; }
.mdia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mdia.wide { width: 100%; aspect-ratio: 1200 / 630; }
/* صورة المقال: زوايا الكارت لا زوايا الصورة الصغيرة، ولا حشو `.hero` */
.mdia.hero { border-radius: var(--r); padding: 0; margin-block-end: 14px; }

/* بطاقة مقدّم العرض */
.prov {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; min-height: 76px;
}
.prov-b { flex: 1; min-width: 0; }
.prov-b b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.45; }
.prov-b > span { display: block; color: var(--muted); font-size: 12.5px; }
.prov.static { color: inherit; }
.prov > svg.prow-i { color: var(--teal); }

.btns { display: flex; gap: 8px; }
.btns .btn { flex: 1; min-width: 0; padding-inline: 8px; font-size: 13.5px; }

/* ═══════════════ ٦ · المواضيع الطبية ═══════════════ */

.acard {
  display: block; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.acard:active { transform: scale(.99); }
@media (hover: hover) { .acard:hover { box-shadow: var(--shadow-lift); } }
.acard .mdia { border-radius: 0; }
/* موضوع بلا صورة (أو صورة سقطت فأزالها `onerror`): شريطٌ رماديّ بنسبة
   ١٢٠٠×٦٣٠ يأكل نصف البطاقة بلا معلومة. النسبة تُختصر حين لا تكون هناك
   صورةٌ أصلاً فيبقى الرسم البديل إشارةً لا فراغاً. */
.acard .mdia:not(:has(img)) { aspect-ratio: 1200 / 260; }
.acard-b { padding: 12px 14px 14px; }
.acard-b b {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 15.5px; font-weight: 800; line-height: 1.5;
}
.acard-x {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  margin-block-start: 3px; color: var(--muted); font-size: 13px; line-height: 1.6;
}
.acard-b i { display: block; margin-block-start: 6px; font-style: normal; font-size: 12px; color: var(--faint); }

.art { padding-block-start: 16px; }
.art h1 { margin: 0 0 8px; font-size: 22px; font-weight: 800; line-height: 1.5; }
.art-m { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-block-end: 14px; }
.art-d { color: var(--faint); font-size: 12.5px; font-weight: 700; }
.art p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.95; }
/* المصدر بطاقةٌ مستقلّة: مصداقية المصدر هي الفارق في المحتوى الطبي */
.art-src {
  padding: 12px 14px; margin-block-end: 16px;
  background: var(--card-2); border-inline-start: 3px solid var(--teal);
  border-radius: var(--r-sm); color: var(--muted); font-size: 13px; line-height: 1.7;
}
.art .btn { margin-block-end: 12px; }

/* ═══════════════ ٧ · البحث ═══════════════ */

/* زرّ المسح شفاف بمقاس إصبع: دائرةٌ ملوّنة بحجم ٤٤ داخل حقلٍ ارتفاعه ٥٢
   تبدو زرّاً ثانياً يزاحم الحقل، والمطلوب مساحة لمسٍ لا مساحة لون. */
.srch-x {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  margin-inline-end: -8px;
  border: 0; border-radius: 50%; background: none; color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer;
}
@media (hover: hover) { .srch-x:hover { background: var(--card-2); color: var(--ink); } }
.chip.tap { min-height: 44px; padding-inline: 14px; cursor: pointer; }
.chip.tap b { color: var(--teal); font-weight: 800; }

/* ═══════════════ ٨ · المزيد والخصوصية ═══════════════ */

.prow {
  display: flex; align-items: center; gap: 12px;
  min-height: 62px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  transition: border-color var(--dur) var(--ease);
}
@media (hover: hover) { .prow:hover { border-color: color-mix(in srgb, var(--teal) 45%, transparent); } }
.prow-i { width: 21px; height: 21px; color: var(--teal); flex: none; }
.prow-go { width: 17px; height: 17px; color: var(--faint); flex: none; }
.prow-b { flex: 1; min-width: 0; }
.prow-b b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.prow-b span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.55; }

.note { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.note > svg { margin-block-start: 2px; }
.note b { display: block; font-size: 14.5px; font-weight: 800; margin-block-end: 4px; }
.note p { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.note .btn { width: 100%; }
.ok-note { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); }
.ok-note > svg { color: var(--ok); }

.steps { margin: 0 0 10px; padding-inline-start: 18px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.steps li { margin-block-end: 4px; }
.steps b { display: inline; font-size: inherit; }

.join { display: grid; gap: 6px; padding: 18px 16px; text-align: center; }
.join b { font-size: 16px; font-weight: 800; }
.join span { color: var(--muted); font-size: 13px; line-height: 1.7; }
.join .btn { margin-block-start: 8px; }

.foot {
  margin-block-start: 26px; padding-block-start: 18px;
  border-block-start: 1px solid var(--line);
  text-align: center; color: var(--faint); font-size: 12px; line-height: 1.8;
}
.foot p { margin: 0 0 4px; }

.psec { padding: 16px; }
.psec h2 { margin: 0 0 8px; font-size: 15.5px; font-weight: 800; color: var(--teal); }
.psec p { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; line-height: 1.9; }
.psec p:last-child { margin-block-end: 0; }

.pbul { display: flex; align-items: flex-start; gap: 8px; margin-block-end: 8px; }
.pbul svg { width: 15px; height: 15px; color: var(--ok); flex: none; margin-block-start: 5px; }
.pbul span { flex: 1; min-width: 0; color: var(--muted); font-size: 13.5px; line-height: 1.8; }

/* بطاقة تعريف الموقع: مفتاح وقيمة على سطر واحد بفاصل خفيف */
.kv {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-block: 7px; border-block-end: 1px dashed var(--line);
}
.kv:first-child { padding-block-start: 0; }
.kv span { color: var(--muted); font-size: 13px; flex: none; }
.kv b { font-size: 13.5px; font-weight: 700; text-align: end; overflow-wrap: anywhere; }

/* ═══════════════ الشاشات الواسعة ═══════════════
   العمود يبقى بعرض الهاتف ويتوسّط كما قرّر `base.css`؛ ولا يتغيّر هنا إلا
   ما يبدو صغيراً حين تتّسع الشاشة حوله: عنوانُ صفحةٍ كاملة، وقاعُ هيرو
   صار شريطاً عريضاً فاحتاج نفَساً أطول. */
@media (min-width: 760px) {
  .doc-hero { padding-block-end: 26px; }
  .art h1, .ocard-full-b h1 { font-size: 24px; }
}