/* ============================================================
   نيوز فيد — صفحة المدينة بمعمار «الجريدة والخارطة».

   لغةٌ واحدة تحكم الملف: ورقٌ وقواعد وأعمدة. لا بطاقات ولا ظلال
   ولا زوايا مدوّرة إلا حيث تكون عنصر تحكّم. ما يفصل الكتل هو الخطّ
   لا الصندوق، لأن الصندوق يجعل كل شيء متساوي الأهمية — وصفحة
   أخبار قوامها التفاوت.

   يُحمَّل بعد cities.css فيَرِث متغيّراته ويُبطل ما يخالفه.
   ============================================================ */

/* الرموز على :root لا على .cty وحدها.
   .cty صنفُ بطاقة المقال، فكانت الرموز تعيش داخلها. وصفحة المدينة تلفّ
   محتواها بها فترث — أمّا قسم الرئيسة و/cities فلا .cty فيهما، فيفشل
   var(--ctp-red) ويعود fill إلى قيمته الابتدائية: الأسود. فبدت نقاط
   الخارطة سوداء متشابهة، والحدود الرفيعة ثقُلت إلى currentColor.
   ولا يكشفه فحصُ العلامات: الأصناف كلها حاضرة والقيمة وحدها ساقطة. */
:root, .cty {
  --ctp-ink:    #1A1710;   /* حبر */
  --ctp-ink-2:  #5A5245;   /* نصّ ثانوي */
  --ctp-mute:   #8A8071;   /* بيانات ثانوية */
  --ctp-hair:   #DED5C4;   /* قاعدة رفيعة */
  --ctp-hair-2: #E9E1D2;   /* أرفع */
  --ctp-red:    #8A2B2B;   /* المدينة المفتوحة والمصادر */
  --ctp-olive:  #517338;   /* النشاط اليوم */
  --ctp-paper:  #F2EEE4;   /* الإطار الجانبي */
}
:root[data-theme="dark"], [data-theme="dark"] .cty {
  --ctp-ink:#EDE7DA; --ctp-ink-2:#B7AF9F; --ctp-mute:#8E8676;
  --ctp-hair:#3A342A; --ctp-hair-2:#2C2720;
  --ctp-red:#C97A72; --ctp-olive:#8AA96A; --ctp-paper:#211D17;
}

/* ── القواعد ── */
.ctp-rule { border:0; margin:0; background:var(--ctp-hair); }
.ctp-rule-thick { height:3px; background:var(--ctp-ink); margin:14px 0 0; }
.ctp-rule-thin  { height:1px; background:var(--ctp-ink); margin:12px 0 22px; }
.ctp-rule-hair  { height:1px; background:var(--ctp-hair); margin:20px 0 14px; }

/* ── ① الفهرس الطباعي ──
   النشاط يُقاس بوزن الحرف لا بشريط: في الجريدة يُقاس الوزن بالحبر. */
.ctp-index {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 17px;
  padding:8px 0 12px; border-bottom:1px solid var(--ctp-hair);
}
.ctp-index-lbl {
  font-size:11px; font-weight:700; letter-spacing:1.2px; color:var(--ctp-red);
  padding-left:13px; border-left:1px solid var(--ctp-hair); margin-left:4px;
}
.ctp-ix {
  font-size:13.5px; font-weight:500; color:var(--ctp-mute);
  text-decoration:none; display:inline-flex; align-items:center; gap:4px;
  padding-bottom:3px; border-bottom:2px solid transparent; transition:color .15s;
}
.ctp-ix:hover { color:var(--ctp-ink); }
.ctp-ix.is-live { font-weight:700; color:var(--ctp-olive); }
.ctp-ix.is-on {
  font-size:15px; font-weight:900; color:var(--ctp-ink);
  border-bottom-color:var(--ctp-ink);
}
.ctp-ix i {
  width:5px; height:5px; border-radius:50%; background:var(--ctp-olive);
  flex:0 0 5px;
}
.ctp-ix.is-on i { background:var(--ctp-red); }

/* ── ② ترويسة الصحيفة ── */
.ctp-mast {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding:10px 0 0;
}
.ctp-mast-name { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.ctp-mast-name h1 {
  margin:0; font-size:52px; line-height:1.05; font-weight:900;
  letter-spacing:-.5px; color:var(--ctp-ink);
}
.ctp-group {
  font-size:12.5px; font-weight:700; letter-spacing:.6px; color:var(--ctp-red);
}
.ctp-mast-side { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }

.ctp-stats { display:flex; align-items:center; gap:0; margin:0; }
.ctp-stats > div { padding:0 16px; text-align:left; }
.ctp-stats > div + div { border-right:1px solid var(--ctp-hair); }
.ctp-stats dt { font-size:19px; font-weight:800; color:var(--ctp-ink); line-height:1.2; }
.ctp-stats dd { margin:0; font-size:11px; color:var(--ctp-mute); }
.ctp-stats > div:first-child dt { color:var(--ctp-olive); }

/* المفتاح: زرٌّ حقيقي لا فلتر باهت — التمييز بين «عنها» و«تذكرها»
   موجود في البيانات منذ البداية ولم يكن يُرى. */
.ctp-seg {
  display:inline-flex; gap:0; padding:3px; border-radius:9px;
  background:var(--ctp-hair-2);
}
.ctp-seg a {
  font-size:12.5px; font-weight:500; color:var(--ctp-mute);
  padding:6px 14px; border-radius:7px; text-decoration:none;
  transition:background .15s, color .15s;
}
.ctp-seg a:hover { color:var(--ctp-ink); }
.ctp-seg a.is-on {
  background:#fff; color:var(--ctp-ink); font-weight:700;
  box-shadow:0 1px 3px rgba(60,40,20,.10);
}
[data-theme="dark"] .ctp-seg a.is-on { background:#332C23; box-shadow:none; }

/* ── ③ الأعمدة الثلاثة ──
   الصدارة أوسعها، والخارطة أضيقها: الرصيف تابعٌ لا بطل. */
.ctp-cols {
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) 330px;
  gap:0 26px; align-items:start; padding-bottom:26px;
}
.ctp-cols > * + * { padding-right:26px; border-right:1px solid var(--ctp-hair); }

.ctp-kick {
  display:block; font-size:10.5px; font-weight:900; letter-spacing:1.4px;
  color:var(--ctp-red); margin-bottom:14px;
}

.ctp-lead h2 { margin:0 0 12px; font-size:29px; line-height:1.45; font-weight:700; }
.ctp-lead h2 a { color:var(--ctp-ink); text-decoration:none; }
.ctp-lead h2 a:hover { text-decoration:underline; text-underline-offset:4px; }
.ctp-deck {
  margin:0 0 12px; font-size:14.5px; line-height:1.85; color:var(--ctp-ink-2);
  font-weight:400;
}

.ctp-by {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:0; font-size:11px; color:var(--ctp-mute);
}
.ctp-by b { color:var(--ctp-red); font-weight:700; }
.ctp-by span { color:var(--ctp-hair); }
.ctp-n {
  font-style:normal; font-size:10px; font-weight:700; color:var(--ctp-olive);
  background:rgba(81,115,56,.10); padding:2px 6px; border-radius:4px;
}

/* خيط المتابعة — سكّة على الحافة اليمنى وعُقدة لكل تقرير */
.ctp-thread-hd {
  display:flex; align-items:center; gap:7px; margin:0 0 12px;
  font-size:12px; color:var(--ctp-mute);
}
.ctp-thread-hd b { font-size:13px; font-weight:800; color:var(--ctp-ink); }
.ctp-thread-hd span { color:var(--ctp-hair); }
.ctp-thread { list-style:none; margin:0; padding:0 16px 0 0; border-right:2px solid var(--ctp-hair); }
.ctp-thread li { position:relative; padding-bottom:16px; }
.ctp-thread li:last-child { padding-bottom:0; }
.ctp-thread li::before {
  content:''; position:absolute; right:-23px; top:7px;
  width:7px; height:7px; border-radius:50%; background:var(--ctp-hair);
}
.ctp-thread a {
  display:block; font-size:15px; line-height:1.6; font-weight:500;
  color:var(--ctp-ink); text-decoration:none; margin-bottom:4px;
}
.ctp-thread a:hover { text-decoration:underline; text-underline-offset:3px; }

/* المزيد من المدينة */
.ctp-more ol { list-style:none; margin:0; padding:0; }
.ctp-more li { padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--ctp-hair-2); }
.ctp-more li:last-child { border-bottom:0; margin-bottom:0; padding-bottom:0; }
.ctp-more a {
  display:block; font-size:16.5px; line-height:1.65; font-weight:700;
  color:var(--ctp-ink); text-decoration:none; margin-bottom:6px;
}
.ctp-more a:hover { text-decoration:underline; text-underline-offset:3px; }

/* ── رصيف الخارطة ──
   إطارٌ مُحاط بخيط لا بطاقة بظلّ: الجريدة تعرف «الإطار الجانبي»
   ولا تعرف الظلال، فتبقى اللغة واحدة وتتغيّر الوظيفة. */
.ctp-map-cap { margin:-8px 0 12px; font-size:11px; color:var(--ctp-mute); }
.ctp-map-box {
  border:1px solid var(--ctp-hair); border-radius:4px;
  background:var(--ctp-paper); padding:14px 16px 12px;
}
.ctp-today {
  margin:0 0 10px; padding-bottom:10px; font-size:11.5px; font-weight:700;
  color:var(--ctp-ink-2); border-bottom:1px solid var(--ctp-hair);
}
.ctp-today b { color:var(--ctp-ink); }
/* 140 لا 190: نسبة الرسم 1:3.2، فـ190 عرضاً تعني 607 ارتفاعاً — أطول
   من العمودين الآخرين بمئتَي بكسل، فيبقى تحتهما فراغ ميّت. و140 تعطي
   447 وهو مقاس النموذج. واللصاقات هي ما يجعل الصِّغَر مقبولاً: النقطة
   تقول «هنا» واللصاقة تقول «ما هذا». */
.ctp-svg { display:block; width:100%; max-width:140px; height:auto; margin:0 auto; }
.ctp-land { fill:#E5DFD1; stroke:#D5CBB7; stroke-width:1; }
[data-theme="dark"] .ctp-land { fill:#2E2820; stroke:#413A2E; }

/* مساحة النقر أوسع من القرص: مدن الضفة متقاربة فعلاً — خمسة عشر
   بكسلاً تفصل رام الله عن القدس على هذا المقياس. تكبير الأقراص
   ليقبلها الإصبع كان سيجعلها تتداخل، وتصغيرها يكذب على المقياس. */
.ctp-hit { fill:transparent; }
.ctp-dot { fill:#BCB1A0; transition:fill .15s; }
.ctp-dot.is-live { fill:var(--ctp-olive); }
.ctp-dot.is-on   { fill:var(--ctp-red); }
.ctp-ring { fill:none; stroke:var(--ctp-olive); stroke-width:1.5; opacity:.45; }
.ctp-ring.is-on { stroke:var(--ctp-red); opacity:1; }
.ctp-pin { cursor:pointer; }
.ctp-pin:hover .ctp-dot { fill:var(--ctp-ink); }
.ctp-pin:focus-visible { outline:2px solid var(--ctp-red); outline-offset:2px; }
.ctp-map-note { margin:10px 0 0; font-size:10px; color:var(--ctp-mute); text-align:left; }

/* ── الاستجابة ──
   العمود الثالث أول ما يسقط: الخارطة تابع، والفهرس أعلى الصفحة
   يغطّي وظيفتها حين تضيق الشاشة. */
@media (max-width:1100px) {
  .ctp-cols { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
  .ctp-map {
    grid-column:1 / -1; padding-right:0; border-right:0;
    border-top:1px solid var(--ctp-hair); padding-top:22px; margin-top:22px;
  }
  .ctp-map-box { display:flex; gap:20px; align-items:center; }
  .ctp-map-box .ctp-today { flex:1; border-bottom:0; padding-bottom:0; margin:0; }
  .ctp-svg { max-width:120px; }
  .ctp-map-note { flex:0 0 150px; margin:0; }
}
@media (max-width:820px) {
  .ctp-mast-name h1 { font-size:38px; }
  .ctp-cols { grid-template-columns:1fr; gap:0; }
  .ctp-cols > * + * {
    padding-right:0; border-right:0; border-top:1px solid var(--ctp-hair);
    padding-top:22px; margin-top:22px;
  }
  .ctp-lead h2 { font-size:24px; }
  .ctp-mast { align-items:flex-start; flex-direction:column; gap:14px; }
  .ctp-mast-side { gap:16px; }
  .ctp-stats > div { padding:0 12px; }
  .ctp-stats > div:first-child { padding-right:0; }
}
@media (max-width:520px) {
  .ctp-index { gap:6px 13px; padding-top:16px; }
  .ctp-ix { font-size:12.5px; }
  .ctp-ix.is-on { font-size:13.5px; }
  .ctp-mast-name h1 { font-size:31px; }
  .ctp-rule-thick { height:2px; }
  .ctp-lead h2 { font-size:21px; }
  .ctp-deck { font-size:14px; }
  .ctp-map-box { display:block; }
  .ctp-map-box .ctp-today { border-bottom:1px solid var(--ctp-hair); padding-bottom:10px; margin-bottom:10px; }
  .ctp-svg { max-width:150px; }
  .ctp-map-note { text-align:right; margin-top:10px; }
}

/* الصدى: أسماء مصادر لا عناوين. سطرٌ واحد هادئ يقول «مؤكَّد»، لا
   قائمةٌ تعيد العنوان نفسه بأسماء مختلفة. */
.ctp-echo {
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin:14px 0 0; padding:9px 12px; border-radius:4px;
  background:var(--ctp-hair-2); font-size:11.5px; color:var(--ctp-ink-2);
}
.ctp-echo b { font-size:10.5px; font-weight:800; letter-spacing:.4px; color:var(--ctp-olive); }

/* ═══════════════════════════════════════════════════════════════════
   الصفحة الجامعة /cities — الخارطة والفهرس.

   تتقاسم رموز الورقة أعلاه ولا تُعرّف لوناً جديداً: لونٌ يُعرَّف هنا
   ينحرف عن صفحة المدينة عند أول تعديل، والصفحتان تُفتحان تباعاً فيُرى
   الفرق فوراً.
   ═══════════════════════════════════════════════════════════════════ */

.ctp-hub { max-width: 1180px; margin: 0 auto; padding: 28px 20px 64px; }

.ctp-hub .ctp-dek {
  margin: 6px 0 0; color: var(--ctp-ink-2);
  font-size: 15px; line-height: 1.7; max-width: 62ch;
}

/* عمودان: الفهرس أولاً في القراءة العربية، والخارطة رصيفاً. */
.ctp-hub-cols {
  display: grid; grid-template-columns: 1fr 320px;
  gap: 34px; margin-top: 26px; align-items: start;
}
.ctp-hub-map { order: 2; }
.ctp-hub-list { order: 1; min-width: 0; }

.ctp-svg-lg { width: 100%; height: auto; max-height: 560px; }

/* ── سطور الفهرس ── */
.ctp-rows { list-style: none; margin: 10px 0 0; padding: 0; }
.ctp-rows > li { border-top: 1px solid var(--ctp-hair-2); }
.ctp-rows > li:first-child { border-top: 1px solid var(--ctp-hair); }
.ctp-rows > li:last-child { border-bottom: 1px solid var(--ctp-hair); }

.ctp-row {
  position: relative; display: flex; align-items: baseline;
  gap: 14px; padding: 13px 4px 15px; text-decoration: none;
  color: inherit; transition: background .12s ease;
}
.ctp-row:hover { background: var(--ctp-paper); }
.ctp-row.is-empty { opacity: .5; }

.ctp-row-main { flex: 1 1 auto; min-width: 0; display: flex;
  align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ctp-row-name {
  font-size: 19px; font-weight: 800; color: var(--ctp-ink);
  letter-spacing: -.2px;
}
.ctp-row:hover .ctp-row-name { color: var(--ctp-red); }
.ctp-row-gov { font-size: 12px; color: var(--ctp-mute); }

.ctp-row-nums {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 14px;
  font-size: 13px; color: var(--ctp-ink-2); font-variant-numeric: tabular-nums;
}
.ctp-row-total b { font-size: 15px; color: var(--ctp-ink); font-weight: 800; }
.ctp-row-prim { color: var(--ctp-mute); }
.ctp-row-today { color: var(--ctp-olive); font-weight: 700; }

/* شريط الحرارة: تحت السطر لا خلفه — الرقم يُقرأ والترتيب يُرى معاً،
   وخلفيةٌ متدرّجة تُفسد قراءة الرقم فوقها. */
.ctp-row-heat {
  position: absolute; inset-inline-start: 4px; bottom: 6px;
  height: 2px; width: calc((100% - 8px) * var(--heat, 0));
  background: var(--ctp-olive); opacity: .55; border-radius: 2px;
}

.ctp-empty {
  border-top: 2px solid var(--ctp-ink); margin-top: 24px;
  padding: 40px 0; text-align: center; color: var(--ctp-ink-2);
}
.ctp-empty h3 { margin: 0 0 8px; color: var(--ctp-ink); font-size: 20px; }
.ctp-back {
  display: inline-block; margin-top: 14px; padding: 9px 18px;
  border: 1px solid var(--ctp-hair); color: var(--ctp-ink);
  text-decoration: none; font-weight: 700; font-size: 14px;
}
.ctp-back:hover { border-color: var(--ctp-red); color: var(--ctp-red); }

/* الخارطة تنزل تحت الفهرس قبل أن تضيق فتصير غير قابلة للنقر. */
@media (max-width: 900px) {
  .ctp-hub-cols { grid-template-columns: 1fr; gap: 26px; }
  .ctp-hub-map { order: 1; }
  .ctp-hub-list { order: 2; }
  .ctp-svg-lg { max-height: 460px; }
}
@media (max-width: 560px) {
  .ctp-hub { padding: 20px 14px 48px; }
  .ctp-row { flex-wrap: wrap; gap: 6px 12px; }
  .ctp-row-nums { width: 100%; }
  .ctp-row-name { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════════
   خارطة قسم المدن على الرئيسة — عمودٌ خاصّ.

   ── لماذا عمود لا رأسُ الفهرس ──
   نسبة رسم فلسطين 204:652، أي 1:3.2. فوضعُ الخارطة فوق القائمة بارتفاع
   مقيَّد (max-height:300px) يُنكمِش عرضها إلى 94px — تسعة وأربعين في
   المئة من عمود الفهرس. عندها لا تُقرأ ألوان النقاط ولا تُنقر: تصير
   زخرفةً تشغل مكاناً بلا أن تؤدّي عملها.

   وبعمود عرضه 196px يبلغ ارتفاعها 626px — وهو ارتفاع القسم نفسه
   تقريباً، ومساحة النقر 25px قطراً. أي أن الشكل الطويل النحيل ليس عيباً
   يُقاوَم بل هو ما تعطيه الجغرافيا، والتصميم يفسح له عموداً.
   ═══════════════════════════════════════════════════════════════════ */

.nfc-split.has-map { grid-template-columns: 196px 232px minmax(0, 1fr); }
.nfc-map { min-width: 0; }
.nfc-map-svg { width: 100%; height: auto; display: block; }

/* النقطة المفتوحة على الخارطة تتبع الصفّ المفتوح في الفهرس: يبدّلهما
   السكربت معاً بالـslug، فلا تفترق الإشارتان. */
.ctp-pin.is-on .ctp-dot { fill: var(--ctp-red); }

@media (max-width: 1180px) {
  /* العمود الثالث يخنق اللوحة قبل أن يخنق نفسه: تُطوى الخارطة أوّلاً
     وتبقى القائمة — وهي تؤدّي الملاحة نفسها بالأسماء. */
  .nfc-split.has-map { grid-template-columns: 232px minmax(0, 1fr); }
  .nfc-map { display: none; }
}

@media (max-width: 820px) {
  /* لازمٌ صراحةً: قاعدة الجوّال في cities.css على `.nfc-split` وحدها،
     وقاعدتي أعلاه على `.nfc-split.has-map` — أعلى تخصيصاً ومتأخّرة في
     الترتيب، فتغلبها وتفرض عمودين على الهاتف. التخصيص لا ينتبه لنقطة
     التوقّف: كلتا القاعدتين تنطبق عند 800px، والأعلى تخصيصاً تفوز. */
  .nfc-split.has-map { grid-template-columns: minmax(0, 1fr); }
}

/* ── لصاقات الخارطة ──
   ثلاث لا أكثر: المدينة المفتوحة، وأنشط مدينة اليوم، وأكبر أرشيف.
   تجعل الخارطة مقروءةً وهي صغيرة، فالنقطة تقول «هنا» واللصاقة «ما هذا». */
.ctp-tag rect { fill:#FFFFFF; stroke:var(--ctp-hair); stroke-width:1; }
.ctp-tag text {
  font-family: inherit; font-size:8px; font-weight:800;
  fill:var(--ctp-ink-2); letter-spacing:-.1px;
}
.ctp-tag.is-on   rect { fill:var(--ctp-red);   stroke:var(--ctp-red); }
.ctp-tag.is-on   text { fill:#FFF; }
.ctp-tag.is-live rect { fill:var(--ctp-olive); stroke:var(--ctp-olive); }
.ctp-tag.is-live text { fill:#FFF; }
[data-theme="dark"] .ctp-tag rect { fill:var(--ctp-paper); stroke:var(--ctp-hair); }

/* ── سطر «تذكرها دون أن تدور فيها» ──
   التمييز بين primary وmention موجود في القاعدة منذ البداية ولم تعرضه
   واجهة. وهو يجيب سؤالاً يطرحه القارئ: أهذا خبرُ المدينة أم خبرٌ ذُكرت
   فيه؟ وإخفاؤه يجعل الرقم الكبير يبدو مضخَّماً. */
.ctp-ment {
  display: block; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--ctp-hair-2);
  font-size: 12.5px; color: var(--ctp-mute); text-decoration: none;
}
.ctp-ment b { color: var(--ctp-ink-2); font-weight: 800; }
.ctp-ment:hover { color: var(--ctp-red); }

/* ── شريط الختام ──
   الهدوء حالةٌ لا غياب: ذِكرُ عدد المدن الهادئة يمنع قراءةً خاطئة —
   أن بقيّة الأقسام فارغة أو معطوبة. */
.ctp-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-top: 22px; padding-top: 14px;
  border-top: 1px solid var(--ctp-hair);
  font-size: 13px; color: var(--ctp-mute);
}
.ctp-browse { color: var(--ctp-ink-2); font-weight: 800; text-decoration: none; }
.ctp-browse:hover { color: var(--ctp-red); }
@media (max-width: 560px) {
  .ctp-foot { flex-direction: column; gap: 8px; }
}

/* رابط ذيل عمود الخبر الرئيسي — من النموذج. */
.ctp-allnews {
  display: inline-block; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--ctp-hair);
  font-size: 13px; font-weight: 800;
  color: var(--ctp-ink-2); text-decoration: none;
}
.ctp-allnews:hover { color: var(--ctp-red); }

/* ═══════════════════════════════════════════════════════════════════
   قسم المدن على الرئيسة — النموذج ٤ نفسه.

   لا تُعيد تعريف شيء من الكتلة: المصطبة والأعمدة والخارطة تأتي من
   القواعد أعلاه كما هي. وهذا هو المقصود — تصميمٌ واحد في موضعين، لا
   اثنان ينحرفان بتعديلٍ يُصيب واحداً.
   ═══════════════════════════════════════════════════════════════════ */

/* عرض هذا القسم عرض إخوته على الرئيسة. كان 1180px — مقاس عمود قراءة
   يناسب صفحة المدينة المستقلّة — فبدا الصندوق على الرئيسة منزاحاً
   110px من كل جانب تحت «آخر الأخبار». المقاس الآن من الرمز المشترك. */
.nfc-paper { max-width: var(--nf-measure, 1400px); margin: var(--nf-section-gap, 38px) auto 40px; padding: 0 var(--nf-gutter, 24px); }

/* ── شريط العنوان: نسخة طبق الأصل من شريط «آخر الأخبار» ──
   المقاسات هنا ليست تقريباً بل نُقلت رقماً رقماً من
   .nf-latest-rail في home-redesign.css: علامة 4×19 بزاوية 2،
   عنوان 17px/800، مسافة 12، مسطرة شعرة، رابط 13px/800 بلون
   --accent-2. أي تعديل هناك يجب أن يقع هنا — وهو ما يحرسه
   tests/lead_contract_test.php.
   ولا letter-spacing على نصّ عربي: الحروف موصولة. */
.nfc-paper-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 0; border-bottom: 0;
  margin-bottom: 16px;
}
.nfc-paper-mark {
  flex: none; width: 4px; height: 19px; border-radius: 2px;
  background: var(--accent, #5B7F3B);
}
.nfc-paper-head h2 {
  margin: 0; font-family: inherit;
  font-size: var(--nf-rail-title, 17px); font-weight: 800; line-height: 1.5;
  color: var(--text, #2C2416); white-space: nowrap;
}
.nfc-paper-live {
  font-size: 12px; font-weight: 700;
  color: var(--muted, #7A6E5D); white-space: nowrap;
}
.nfc-paper-rule { flex: 1 1 auto; min-width: 12px; height: 1px; background: var(--border, #E7E1D4); }
.nfc-paper-all {
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-start: 0;
  font-size: 13px; font-weight: 800;
  color: var(--accent-2, #3D5A28);
  text-decoration: none; white-space: nowrap;
  padding: 4px 2px; border-radius: 8px;
  transition: gap .18s ease;
}
.nfc-paper-all:hover { gap: 10px; color: var(--accent-2, #3D5A28); }
.nfc-paper-all svg { opacity: .6; }
.nfc-paper-all:focus-visible {
  outline: 2px solid var(--accent, #5B7F3B); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { .nfc-paper-all { transition: none; } }

/* الخطّ السميك أعلى المصطبة يكرّر حدّ الترويسة أعلاه، فيُطوى هنا. */
.nfc-paper [data-cities-content] > .ctp-rule-thick:first-child { display: none; }

/* هيكل الانتظار — بالبنية نفسها فلا يقفز ارتفاع القسم عند التبديل. */
.nfc-skel { background: var(--ctp-hair-2); border-radius: 6px; margin-bottom: 12px; }
.nfc-skel-lead { height: 132px; }
.nfc-skel-row  { height: 46px; }
.nfc-empty { padding: 28px 0; color: var(--ctp-mute); font-size: 14px; }

@media (max-width: 560px) {
  .nfc-paper { padding-inline: var(--nf-gutter, 14px); }
}

/* مواصلة عمود المتصدّر حين لا خيط له — بلا ترويسة، فهي مواصلة لا قسمٌ
   جديد. والفراغ الذي تملؤه قِسناه: ٣١٨ بكسلاً مقابل ٥٩٣ للخارطة. */
.ctp-cont { margin-top: 4px; }

/* ── شارة الطيّ ──
   «ذُكر في N مصادر» — والقائمة في سمة title تظهر عند المرور. عددٌ يقول
   «مؤكَّد» لا «مكرَّر»: الخبر الذي نقلته أربع وكالات أوثق من خبرٍ نقلته
   واحدة، وطيُّ الصياغات يُظهر ذلك بدل أن يُغرِق القسم بها. */
.ctp-fold {
  font-style: normal; font-size: 10.5px; font-weight: 800;
  color: var(--ctp-olive); background: color-mix(in srgb, var(--ctp-olive) 12%, transparent);
  padding: 1px 6px; border-radius: 999px; margin-inline-start: 6px;
  cursor: help; white-space: nowrap;
}
/* بديلٌ للمتصفّحات بلا color-mix — يبقى مقروءاً لا شفّافاً. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .ctp-fold { background: var(--ctp-hair-2); }
}
/* «أوّل من نشر»: بدونها يبدو إسنادُ الخبر لأقدم مصدر خطأً في الترتيب. */
.ctp-first {
  font-style: normal; font-size: 10px; font-weight: 700;
  color: var(--ctp-mute); margin-inline-start: 5px;
}