/* ══ فهرسُ المؤشّرات — **مصفوفةٌ مضغوطة** لا جدارُ رسوم ═══════════════════════
   ⛔ **العطبُ المقيس** (بلاغُ المالك 2026-09-03 · «جدارُ الرسوم»): أربعٌ وستّون
      بطاقةً طويلةً مكدّسةً في ستّة أقسام، كلٌّ برسمٍ كاملِ العلامات وثلاثِ فقرات.
      فالقارئُ يُمرّر بلا نهايةٍ ليقارن، **والمقارنةُ هي غرضُ الفهرس**.
   ⚖ **والعلاجُ ضغطُ البطاقة لا حذفُ المعنى**: يبقى الاسمُ والفئةُ والرمزُ
      و«كيف يُقرأ» و«أين يُخطئ» — وتخرج **الصيغةُ** وحدَها إلى صفحته المفردة
      (وهي أقلُّ ما يُقرأ عند المسح السريع). والرسمُ يصير **خطّاً موجزاً**:
      بلا علاماتٍ نصّيّة، ويبقى رمزُه وعتباتُه لأنّهما ما يُميّز الشكل.
   ⛔ **ولا ظلَّ ولا استدارةَ ولا لونَ أكسنت** (ميثاق §4أ) — مرجعُ المالك
      يحمل ظلّاً صلباً وبرتقاليّاً، وهما خارجَ لغة المنصّة. المأخوذُ **البنية**:
      شبكةٌ رباعيّةٌ · شريطُ تصنيفٍ يُرشِّح · خطٌّ موجزٌ بلا محاور.
   ══════════════════════════════════════════════════════════════════════ */

.iv { background: var(--fnv-surface); color: var(--fnv-ink); direction: rtl; }
.iv a { color: inherit; text-decoration: none; }

.iv-hero { border-bottom: 2px solid var(--fnv-ink); padding: 56px 0 36px; }
.iv-hero__k { font-family: 'Readex Pro', sans-serif; font-size: .8125rem;
    color: var(--fnv-ink-3); display: block; margin-bottom: 12px; }
.iv-hero__k .n { font-family: var(--fnv-font-mono); letter-spacing: normal; }
.iv-hero h1 { font-family: var(--fnv-font-body); font-size: var(--fnv-size-title);
    font-weight: 700; line-height: 1.45; margin: 0 0 14px; }
.iv-hero p { max-width: var(--fnv-measure); font-size: 1rem; line-height: 2;
    color: var(--fnv-ink-muted); margin: 0; }
.iv-hero__n { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; }
.iv-hero__n b { font-family: var(--fnv-font-mono); font-size: 1.5rem; font-weight: 700; display: block; }
.iv-hero__n span { font-size: .8125rem; color: var(--fnv-ink-3); }

/* ── شريطُ التصنيف: **يُرشِّح** ولا يقفز.
   ⛔ **وكان مرساةً (`#cat-…`) فيقفز ويترك بقيّةَ الجدار قائماً** — أي يُغيّر
      الموضعَ ولا يُقلّل ما يُقرأ. والترشيحُ يُخفي ما لا يخصّ الفئةَ فيصير
      المُصيَّرُ عشرَ بطاقاتٍ لا أربعاً وستّين. */
.iv-nav { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--fnv-surface);
    border-bottom: 1px solid var(--fnv-border); padding: 11px 0; margin-bottom: 26px; }
.iv-nav__in { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.iv-nav button { flex: 0 0 auto; padding: 7px 15px; border: 1.5px solid var(--fnv-border);
    background: var(--fnv-surface); color: inherit; font: inherit;
    font-size: .8125rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.iv-nav button:hover { border-color: var(--fnv-ink); }
.iv-nav button[aria-pressed="true"] { border-color: var(--fnv-ink); background: var(--fnv-ink); color: var(--fnv-surface); }
.iv-nav button .n { font-family: var(--fnv-font-mono); opacity: .6; }

/* ── حقلُ البحث: قبل شريط الفئات لأنّ مَن يعرف اسمَ مؤشّرِه لا يريد تصنيفَه. */
.iv-find { margin: 0 0 9px; }
.iv-find__i { width: 100%; max-width: 420px; padding: 8px 12px; font: inherit; font-size: .875rem;
    color: var(--fnv-ink); background: var(--fnv-surface); border: 1.5px solid var(--fnv-border); }
.iv-find__i:focus { outline: 2px solid var(--fnv-ink); outline-offset: 1px; border-color: var(--fnv-ink); }
.iv-find__i::placeholder { color: var(--fnv-ink-3); }
.iv-card[hidden] { display: none; }

.iv-sec { margin-bottom: 40px; scroll-margin-top: 64px; }
.iv-sec[hidden] { display: none; }
.iv-sec__h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    border-bottom: 2px solid var(--fnv-ink); padding-bottom: 9px; margin-bottom: 18px; }
.iv-sec__h h2 { font-size: 1.22rem; font-weight: 700; margin: 0; }
.iv-sec__h span { font-family: var(--fnv-font-mono); font-size: .8125rem; color: var(--fnv-ink-3); }

/* ── الشبكة: أربعةُ أعمدةٍ على السطح — وهو ما يجعلها **مصفوفةً تُقارَن** لا عموداً يُمرَّر. */
.iv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }

.iv-card { border: var(--fnv-card-border) solid var(--fnv-ink); background: var(--fnv-surface);
    display: flex; flex-direction: column; }
.iv-card:hover { background: var(--fnv-surface-2); }
.iv-card__h { padding: 11px 13px 9px; display: flex; align-items: flex-start;
    justify-content: space-between; gap: 8px; }
.iv-card__ar { font-size: .95rem; font-weight: 700; line-height: 1.5; display: block; }
.iv-card__cat { font-size: .75rem; color: var(--fnv-ink-3); display: block; margin-top: 2px; }
.iv-card__tag { flex: 0 0 auto; font-family: var(--fnv-font-mono); font-size: .75rem; font-weight: 700;
    border: 1px solid var(--fnv-border); padding: 2px 6px; white-space: nowrap; }

/* ── الخطُّ الموجز: يملأ العرضَ بنسبته، بلا محورٍ ولا شبكةٍ ولا علاماتٍ نصّيّة. */
.iv-fig { background: var(--fnv-surface-2); border-block: 1px solid var(--fnv-border); padding: 6px 0; }
.iv-fig svg { display: block; width: 100%; height: auto; aspect-ratio: 260/58; }
/* ⚖ **والوحدةُ عشرٌ لا 7.5**: البطاقةُ 236–330 بكسلاً فالارتفاعُ 53–74، ووحدةُ
     7.5 تُصيَّر 6.8–9.6 — تحتَ أرضيّة القراءة. وعشرٌ تُصيَّر 9.1–12.8، وهي
     **رمزٌ لاتينيٌّ وعتبةٌ رقميّة** لا نصٌّ عربيٌّ فأرضيّتُها أدنى. */
.iv-fig svg text { font-size: 10px; }

.iv-card__b { padding: 11px 13px 13px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
/* ⚖ **قصُّ السطور يجعلها مصفوفةً تُقارَن** (قِيس في المتصفّح 1440×900 · 2026-09-04):
     البطاقاتُ كانت **294–478 بكسلاً** — تفاوتُ 184، فالشبكةُ تُقرأ رفوفاً مسنّنةً
     لا مصفوفةً. وبالقصّ صار التفاوتُ **87**، وارتفاعُ الصفحة 8,710 ⇒ 8,329.
   ⛔ **وفقدُ المعلومة مقيسٌ لا مُقدَّر**: **ثلاثُ بطاقاتٍ من أربعٍ وستّين** يُقصّ
     نصُّها فعلاً، ونصُّها كاملٌ في صفحتها على بعد نقرة. والقصُّ ثمنٌ صغيرٌ لمصفوفةٍ
     تُمسَح بالعين — وهو غرضُ الفهرس. */
.iv-card__read { font-size: .8125rem; line-height: 1.85; color: var(--fnv-ink); margin: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.iv-card__fail { font-size: .78rem; line-height: 1.8; color: var(--fnv-ink-muted); margin: 0;
    border-inline-start: 2px solid var(--fnv-gamma-neg); padding-inline-start: 8px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.iv-card__go { margin-top: auto; padding-top: 4px; font-size: .78rem; font-weight: 700; }
.iv-card:hover .iv-card__go span { border-bottom: 1.5px solid var(--fnv-ink); }

/* ⛔ **ولا يُتّكل على `.fnv-sr` العامّة**: هذه الصفحةُ تُصيَّر بتخطيط الزوّار كذلك،
     وقد وقع من قبلُ أنّ صنفَ قارئ الشاشة غيرُ محمَّلٍ للزائر فظهر النصُّ نصّاً. */
#ivStatus { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.iv-none { padding: 30px 0; color: var(--fnv-ink-muted); font-size: .9rem; }

.iv-foot { border-top: 2px solid var(--fnv-ink); margin-top: 36px; padding: 26px 0 60px; }
.iv-foot__p { font-size: .85rem; line-height: 2; color: var(--fnv-ink-muted);
    max-width: var(--fnv-measure); margin: 0 0 16px; }

@media (max-width: 600px) {
    .iv-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .iv-hero { padding: 40px 0 28px; }
}

/* ══ تأجيلُ تصيير ما تحت الطيّة — مقيسٌ لا مفترَض (أُضيف 2026-09-04) ═══════════
   **المقيسُ في متصفّحٍ حقيقيٍّ عند 1440×900** (‏وسيطُ خمس جولات):
     · بلا تأجيل        47.2 مِلّي لكلّ ستّ دوراتِ تخطيط
     · بتأجيل ما بعد الثامنة  19.8 مِلّي ⇒ **نقصُ 58٪** · وانزياحُ **33 بكسلاً** فقط
   ⛔ **والأولى ثمانٍ تبقى بلا تأجيل عمداً**: الدليلُ يمنع تطبيقَه فوق الطيّة —
      فتقييمُ حدود الرؤية قبل الرسم **يُبطئ** التحميلَ الحرِج. وثمانٍ صفّان على
      أربعةِ أعمدةٍ أو خمسة، فتغطّي المدى العمليَّ لعروض سطح المكتب.
   ⚖ **و`contain-intrinsic-size` إلزاميّ**: بدونه تنهار البطاقةُ إلى صفرٍ خارج
      الشاشة فيقفز الشريطُ. و`auto` تجعل المتصفّحَ يتذكّر المقاسَ الحقيقيَّ بعد
      أوّل تصيير، فالتقديرُ 340 لا يحكم إلّا الجولةَ الأولى.
   ⚖ **وقصُّ السطور أعلاه هو ما جعل هذا آمناً**: قبله كان التفاوتُ 184 بكسلاً
      والانزياحُ 2,141 — أي أنّ التوحيدَ البصريَّ شرطُ التحسين لا زينةٌ بجانبه. */
.iv-grid .iv-card:nth-child(n+9) {
    content-visibility: auto;
    contain-intrinsic-size: auto 340px;
}