/* ==========================================================================
   البوصلة — نظام الهوية البصرية (v4) على قالب albousala2
   المرجع: نظام التصميم «البوصلة — الهوية البصرية»
   القواعد: الخط بدل الظل · الورق بدل الأبيض الصرف · الذهبي علامة لا مساحة ·
            أثر هندسي واحد (النجمة الثمانية)
   ========================================================================== */

:root {
  --albs-navy-deep: #051334;
  --albs-card: #FFFFFF;
  --albs-muted: #5C6472;
  --albs-rule: rgba(7, 27, 64, .14);
  --albs-veil: rgba(5, 19, 52, .92);
  --albs-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='14'/%3E%3Crect x='5' y='5' width='14' height='14' transform='rotate(45 12 12)'/%3E%3C/svg%3E");
  --albs-star-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='5.5' y='5.5' width='13' height='13'/%3E%3Crect x='5.5' y='5.5' width='13' height='13' transform='rotate(45 12 12)'/%3E%3C/svg%3E");
  --albs-star-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='5.5' y='5.5' width='13' height='13'/%3E%3Crect x='5.5' y='5.5' width='13' height='13' transform='rotate(45 12 12)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3C/svg%3E");
}

/* ---------- الأرضية: ورق دافئ ---------- */
body.bs { background: var(--albs-paper) !important; }
.art, .art__body { background: transparent; }

/* ---------- التصنيف: شرطة ذهبية + كلمة (بدل الأزرق والكبسولات) ---------- */
.bs-card .bs-tag, .bs-card__badge .bs-tag, .h2-item .h2-pill, .m-kicker {
  display: inline-flex !important; align-items: center; gap: 8px;
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  font: 700 13px/1.2 var(--albs-font) !important; color: var(--albs-gold-text) !important;
}
.bs-card .bs-tag::before, .bs-card__badge .bs-tag::before, .h2-item .h2-pill::before, .m-kicker::before {
  content: ""; width: 14px; height: 3px; background: var(--albs-gold); flex: none;
}

/* ==========================================================================
   1) الخبر المحوري — «عمود البوصلة»
   ========================================================================== */
.dh .hero2__lead { position: relative; }
.dh .hero2__lead .hero2__media { position: absolute !important; inset: 0; z-index: 0; }
.dh .hero2__lead::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--albs-veil) 0%, rgba(5,19,52,.55) 38%, rgba(5,19,52,0) 62%);
}
.dh .hero2__lead .hero2__body {
  position: absolute !important; z-index: 2; inset-inline-start: 0; bottom: 0; inset-inline-end: auto; top: auto;
  max-width: 68%; margin: 0 32px 28px; padding: 0 0 0 0 !important; padding-inline-start: 22px !important;
  border-inline-start: 3px solid var(--albs-gold);
  background: none !important; display: grid !important; gap: 10px; justify-items: start;
}
.dh .hero2__lead .h2-pill {
  display: inline-flex !important; align-items: center; gap: 8px;
  background: none !important; color: var(--albs-gold-light) !important; padding: 0 !important; border-radius: 0 !important;
  font: 700 13px/1.2 var(--albs-font) !important;
}
.dh .hero2__lead .h2-pill::before { content: ""; width: 14px; height: 3px; background: var(--albs-gold-light); }
.dh .hero2__title { margin: 0 !important; text-wrap: balance; }
.dh .hero2__foot { display: flex; gap: 16px; align-items: center; color: #C9CED8 !important; font: 400 13px/1.4 var(--albs-font); }
.dh .hero2__foot * { color: inherit !important; }
.dh .hero2__more { color: var(--albs-gold-light) !important; font-weight: 600; }

/* الأخبار بجانب المحوري: بطاقات أفقية */
.dh .h2-item__title { font-family: var(--albs-font-head) !important; font-weight: 700 !important; color: var(--albs-ink) !important; }
.dh .h2-item__title a { color: inherit !important; }
.dh .h2-item .h2-meta { color: var(--albs-muted) !important; font: 400 13px/1.4 var(--albs-font) !important; }
.dh .h2-item .h2-meta svg { display: none; }
.dh .h2-item__media { border-radius: 2px !important; }

/* ==========================================================================
   2) الفواصل: نجمة + اسم + سطر تعريف + خط رفيع وشرطة ذهبية
   ========================================================================== */
.dh .bs-sechead__title { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; }
.dh .bs-sechead__title::before {
  content: "" !important; display: block !important; width: 14px; height: 14px; flex: none; background: var(--albs-gold);
  -webkit-mask: var(--albs-star) center / contain no-repeat; mask: var(--albs-star) center / contain no-repeat;
  position: static !important; border: 0 !important;
}
.dh .bs-sechead__title::after {
  display: block !important; flex-basis: 100%; padding-inline-start: 26px; position: static !important;
  font: 400 14px/1.4 var(--albs-font); color: var(--albs-muted); background: none !important; width: auto !important; height: auto !important;
}
.dh .sec.opinion .bs-sechead__title::before, .dh [aria-labelledby="s-eco"] .bs-sechead__title::before { -webkit-mask-image: var(--albs-star-o); mask-image: var(--albs-star-o); }
.dh .sec.regions .bs-sechead__title::before { -webkit-mask-image: var(--albs-star-c); mask-image: var(--albs-star-c); background: var(--albs-gold-light); }

/* سطر التعريف الثابت لكل قسم */
.dh [aria-labelledby="s-maroc"] .bs-sechead__title::after { content: "ما يحدث في البلد اليوم، وما وراءه"; }
.dh .sec.regions .bs-sechead__title::after { content: "اثنتا عشرة جهة، بوصلة واحدة"; color: #C9CED8; }
.dh [aria-labelledby="s-eco"] .bs-sechead__title::after { content: "الأرقام وما تعنيه لجيب المواطن"; }
.dh .sec.opinion .bs-sechead__title::after { content: "أقلام البوصلة: الخبر وقد صار سؤالاً"; }
.dh [aria-labelledby="s-sport"] .bs-sechead__title::after { content: "الملاعب والمنتخبات، بعين البوصلة"; }
.dh .albs-x-tv .bs-sechead__title::after { content: "قصص تُرى"; }

/* أعمدة الأقسام الستة: نجمة صغيرة بلا سطر تعريف */
.dh .sec.cols .bs-sechead__title { font-size: 1.25rem !important; }
.dh .sec.cols .bs-sechead__title::before { width: 11px; height: 11px; }
.dh .sec.cols .bs-sechead__title::after { display: none !important; }
.dh .sec.cols .bs-sechead::after { width: 36px; }

/* ==========================================================================
   3) البطاقات
   ========================================================================== */
.dh .bs-card { background: none !important; box-shadow: none !important; }
.dh .bs-card__body { display: grid; gap: 8px; }
.dh .bs-card__title { font-family: var(--albs-font-head) !important; font-weight: 700 !important; color: var(--albs-ink) !important; margin: 0 !important; }
.dh .bs-card__title a { color: inherit !important; }
.dh .bs-meta, .dh .bs-meta time, .dh .bs-meta__author { font: 400 13px/1.4 var(--albs-font) !important; color: var(--albs-muted) !important; }
.dh .bs-meta__author { font-weight: 600 !important; color: var(--albs-ink) !important; }
.dh .bs-card__media { border-radius: 2px !important; }

/* قصة القسم (اقتصاد): عنوان 26/800 ومقتطف بخط المتن */
.dh .bs-card--lead .bs-card__title { font-weight: 800 !important; color: var(--albs-navy) !important; font-size: clamp(1.375rem, 1.1rem + .6vw, 1.625rem) !important; line-height: 1.35 !important; }
.dh .bs-card--lead .bs-card__excerpt { font: 400 18px/1.6 var(--albs-font-body) !important; color: var(--albs-ink) !important; opacity: .9; margin: 0 !important;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dh .bs-card--row { border-bottom: 1px solid var(--albs-rule); }

/* الرأي: خط كحلي فوق، الكاتب بحلقة ذهبية، العنوان بين «» */
.dh .op-card { border-top: 2px solid var(--albs-navy) !important; background: none !important; }
.dh .op-card .bs-avatar { box-shadow: 0 0 0 1px var(--albs-gold) !important; border: 0 !important; }
.dh .op-card__name { font: 700 14px/1.3 var(--albs-font) !important; color: var(--albs-navy) !important; }
.dh .op-card__title { font-family: var(--albs-font-head) !important; font-weight: 700 !important; font-size: 1.25rem !important; line-height: 1.5 !important; color: var(--albs-navy) !important; }
.dh .op-card__title a { color: inherit !important; }
.dh .op-card__title a::before { content: "«"; color: var(--albs-gold); }
.dh .op-card__title a::after { content: "»"; color: var(--albs-gold); }

/* الجهات: رقائق بخط رفيع على الكحلي */
.dh .sec.regions .bs-chip { background: none !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 2px !important; color: #fff !important; }
.dh .sec.regions .bs-chip:hover { border-color: var(--albs-gold-light) !important; color: var(--albs-gold-light) !important; }
.dh .sec.regions .bs-tag { color: var(--albs-gold-light) !important; }
.dh .sec.regions .bs-tag::before { background: var(--albs-gold-light) !important; }

/* رأي وتحليل: أرضية بيضاء بخط رفيع بدل الأزرق الفاتح */
.dh .sec.opinion { background: var(--albs-card) !important; border: 1px solid var(--albs-rule) !important; box-shadow: none !important; }
[data-theme="dark"] .dh .sec.opinion { background: #0F1D38 !important; border-color: rgba(255,255,255,.12) !important; }

/* الشرائط الخدمية: بيضاء بخط رفيع، بلا تعبئة ملونة */
.dh .verify-band, .dh .albs-cta { box-shadow: none !important; }

/* ==========================================================================
   4) الهاتف (.mh)
   ========================================================================== */
.mh .m-lead__body { display: grid; gap: 8px; border-inline-start: 3px solid var(--albs-gold); padding-inline-start: 14px !important; margin-top: 14px; }
.mh .m-lead__title { font-family: var(--albs-font-head) !important; font-weight: 800 !important; color: var(--albs-navy) !important; line-height: 1.35 !important; margin: 0 !important; }
.mh .m-lead__dek { font: 600 18px/1.55 var(--albs-font-body) !important; color: var(--albs-ink) !important; opacity: .88; margin: 0 !important; }
.mh .m-chip { background: var(--albs-navy) !important; color: var(--albs-gold-light) !important; border-radius: 2px !important; font: 700 12px/1 var(--albs-font) !important; }
.mh .m-meta, .mh .m-meta time { font: 400 13px/1.4 var(--albs-font) !important; color: var(--albs-muted) !important; }
.mh .m-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--albs-rule) !important; padding-bottom: 8px !important; margin-bottom: 16px !important; }
.mh .m-head::after { content: ""; position: absolute; bottom: -2px; inset-inline-start: 0; width: 44px; height: 3px; background: var(--albs-gold); }
.mh .m-head__t { display: flex !important; align-items: center; gap: 10px; font-family: var(--albs-font-head) !important; font-weight: 800 !important; color: var(--albs-navy) !important; margin: 0 !important; }
.mh .m-head__t::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--albs-gold);
  -webkit-mask: var(--albs-star) center / contain no-repeat; mask: var(--albs-star) center / contain no-repeat; }
.mh .m-sec--opinion .m-head__t::before { -webkit-mask-image: var(--albs-star-o); mask-image: var(--albs-star-o); }
.mh .m-head__more { color: var(--albs-gold-text) !important; font: 600 14px/1.3 var(--albs-font) !important; }
.mh .m-title { font-family: var(--albs-font-head) !important; font-weight: 700 !important; color: var(--albs-ink) !important; }
.mh .m-op__name { color: var(--albs-navy) !important; font: 700 14px/1.3 var(--albs-font) !important; }
.mh .m-op .bs-avatar { box-shadow: 0 0 0 1px var(--albs-gold) !important; }
.mh .m-op .m-title::before { content: "«"; color: var(--albs-gold); }
.mh .m-op .m-title::after { content: "»"; color: var(--albs-gold); }

/* ==========================================================================
   5) صفحة المقال
   ========================================================================== */
.art__crumbs { display: flex; align-items: center; gap: 8px; font: 400 13px/1.2 var(--albs-font) !important; color: var(--albs-muted) !important; }
.art__crumbs a { color: var(--albs-muted) !important; }
.art__crumbs a:last-of-type { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--albs-gold-text) !important; }
.art__crumbs a:last-of-type::before { content: ""; width: 14px; height: 3px; background: var(--albs-gold); }
.art__title { text-wrap: balance; }
.art__byline { border-block: 1px solid var(--albs-rule) !important; padding-block: 12px !important; background: none !important; }
.art__byline .bs-avatar { box-shadow: 0 0 0 1px var(--albs-gold) !important; border: 0 !important; }
.art__byline .bs-meta__author { font: 700 14px/1.3 var(--albs-font) !important; color: var(--albs-navy) !important; }
.art__role, .art__byline .bs-meta, .art__byline time { font: 400 13px/1.4 var(--albs-font) !important; color: var(--albs-muted) !important; }
.art__fig img { border-radius: 4px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; }
.art__fig figcaption { font: 400 13px/1.5 var(--albs-font) !important; color: var(--albs-muted) !important; border-bottom: 1px solid var(--albs-rule); padding-block: 8px; }
.art__body h2 { display: flex; align-items: center; gap: 12px; }
.art__body h2::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--albs-gold); transform: rotate(45deg); }
.art__body blockquote { border-inline-start: 3px solid var(--albs-gold) !important; border-inline-end: 0 !important; background: none !important;
  padding-inline-start: 24px !important; margin-inline: 0 !important; }
/* «كلمة أخيرة»: صندوق كحلي بنجمة (يلفّه الخادم حول العنوان وما بعده) */
.art__body .albs-final { background: var(--albs-navy-deep); color: #fff; border-radius: 4px; padding: 24px 32px; margin-top: 2em; }
.art__body .albs-final > :first-child { display: flex; align-items: center; gap: 12px; margin: 0 0 12px !important; font: 800 20px/1.3 var(--albs-font-head) !important; color: var(--albs-gold-light) !important; }
.art__body .albs-final > :first-child::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--albs-gold-light); transform: none;
  -webkit-mask: var(--albs-star) center / contain no-repeat; mask: var(--albs-star) center / contain no-repeat; }
.art__body .albs-final p { color: #fff !important; margin: 0 0 .6em !important; }
.art__body .albs-final p:last-child { margin-bottom: 0 !important; }
.art__body .albs-final a { color: var(--albs-gold-light) !important; }

/* ==========================================================================
   6) البوصلة TV (صفحة /tv)
   ========================================================================== */
.btv .btv-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1.2 var(--albs-font) !important; color: var(--albs-gold-light) !important; }
.btv .btv-kicker__dot { width: 14px !important; height: 3px !important; border-radius: 0 !important; background: var(--albs-gold-light) !important; }
.btv .btv-hero__title, .btv .btv-sec__title { font-family: var(--albs-font-head) !important; font-weight: 800 !important; }
.btv .btv-hero__excerpt { font-family: var(--albs-font-body) !important; font-size: 18px !important; line-height: 1.6 !important; }
.btv .btv-sec__title { display: flex; align-items: center; gap: 12px; }
.btv .btv-sec__title::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--albs-gold);
  -webkit-mask: var(--albs-star) center / contain no-repeat; mask: var(--albs-star) center / contain no-repeat; }
.btv .btv-sec__head { border-bottom: 1px solid var(--albs-rule); position: relative; }

/* ---------- الوضع الداكن ---------- */
[data-theme="dark"] body.bs, html[data-theme="dark"] body { background: #0A1428 !important; }
[data-theme="dark"] .bs-card .bs-tag, [data-theme="dark"] .h2-item .h2-pill, [data-theme="dark"] .m-kicker,
[data-theme="dark"] .art__crumbs a:last-of-type, [data-theme="dark"] .mh .m-head__more { color: var(--albs-gold-light) !important; }
[data-theme="dark"] .dh .bs-card__title, [data-theme="dark"] .dh .h2-item__title, [data-theme="dark"] .mh .m-title { color: #EEF0F4 !important; }
[data-theme="dark"] .dh .bs-card--lead .bs-card__title, [data-theme="dark"] .dh .op-card__title, [data-theme="dark"] .dh .op-card__name,
[data-theme="dark"] .mh .m-lead__title, [data-theme="dark"] .mh .m-head__t, [data-theme="dark"] .art__byline .bs-meta__author { color: #FFFFFF !important; }
[data-theme="dark"] .dh .op-card { border-top-color: #C9CED8 !important; }
[data-theme="dark"] .dh .bs-sechead__title::after, [data-theme="dark"] .dh .bs-meta, [data-theme="dark"] .dh .bs-meta time { color: #A3ACBD !important; }