/* ══ شريطُ أقسام التقرير — طلبُ المالك 2026-09-19 ══════════════════════════
   «تقريرٌ في صفحة المشترك يجب أن يظهر بتصميمٍ احترافيٍّ وجذّابٍ سهلِ التصفّح
    والتنقّل».

   ⚖ **تحسينٌ تدريجيّ**: بلا JS لا يُبنى الشريطُ ولا يتغيّر شيء — فالأرشيفُ
     المنشورُ لا يُعاد توليدُه (ميثاق §7).
   ⛔ **ولا استدارةَ ولا ظلال** (ميثاق §4أ) · والحدُّ اللونيُّ وحدَه يفصل.
   ⛔ **ولا لونَ خامّ**: كلُّ لونٍ رمزٌ من `finviro-base.css`.
   ⛔ **ولا `z-index` خارجَ السلّم**: `--z-sticky` — والشريطُ يقف تحت الترويسة
     الثابتة بإزاحةٍ مقيسةٍ لا برقمٍ مكتوب.
   ══════════════════════════════════════════════════════════════════════ */

.fnv-rnav {
    position: sticky;
    top: var(--fnv-rnav-top, 0px);
    z-index: var(--z-sticky);
    background: var(--fnv-surface);
    border-block-end: 1px solid var(--fnv-ink);
    margin: 0 0 20px;
}

.fnv-rnav__in {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    min-width: 0;
}

.fnv-rnav__lbl {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 800;
    color: var(--fnv-ink-3);
    letter-spacing: .04em;
}

/* ── القائمةُ: تمريرٌ أفقيٌّ لا التفافٌ يبتلع ارتفاعَ الشاشة ──────────────── */
.fnv-rnav__list {
    display: flex;
    flex: 1 1 auto;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    flex-wrap: nowrap;
}

.fnv-rnav__a {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--fnv-border);
    background: var(--fnv-surface);
    color: var(--fnv-ink-2);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
    white-space: nowrap;
    /* ⚖ **وعرضُ الرقاقة محدود** — قِيس على تقرير 62 (عرض 375): عرضُ القائمة
         **270 بكسل**، ورقاقةٌ بعنوانٍ من أربعةٍ وثلاثين حرفاً تملؤها وحدَها،
         فلا يرى القارئُ إلّا واحدةً ويسقط معنى «الخريطة». */
    max-inline-size: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fnv-rnav__a:hover {
    border-color: var(--fnv-ink-3);
    color: var(--fnv-ink);
    text-decoration: none;
}

.fnv-rnav__a[aria-current="true"] {
    background: var(--fnv-ink);
    color: var(--fnv-surface);
    border-color: var(--fnv-ink);
}

.fnv-rnav__top {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid var(--fnv-border);
    background: var(--fnv-surface);
    color: var(--fnv-ink-2);
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.fnv-rnav__top:hover {
    background: var(--fnv-ink);
    color: var(--fnv-surface);
    border-color: var(--fnv-ink);
}

/* ── قدرُ ما قُرئ من المقال — خيطٌ لا بطاقة ───────────────────────────────── */
.fnv-rnav__pr {
    block-size: 2px;
    background: var(--fnv-border);
}

.fnv-rnav__fill {
    display: block;
    block-size: 2px;
    inline-size: 0;
    background: var(--fnv-ink);
    transition: inline-size .12s linear;
}

/* ── تركيزٌ مرئيٌّ للوحة المفاتيح ─────────────────────────────────────────── */
.fnv-rnav__a:focus-visible,
.fnv-rnav__top:focus-visible {
    outline: 2px solid var(--fnv-ink);
    outline-offset: 2px;
}

/* ⚖ والقفزةُ تترك مساحةً تحت الشريط فلا يُغطّى العنوانُ المقصود. */
.fnv-report-body [id^="fnv-sec-"] {
    scroll-margin-block-start: calc(var(--fnv-rnav-top, 0px) + 64px);
}

.fnv-report-body [id^="fnv-sec-"]:focus {
    outline: none;
}

@media (max-width: 575.98px) {
    .fnv-rnav__lbl { display: none; }
    .fnv-rnav__in  { gap: 8px; }
    .fnv-rnav__a   { padding: 6px 10px; max-inline-size: 16ch; }
}

@media (prefers-reduced-motion: reduce) {
    .fnv-rnav__list { scroll-behavior: auto; }
    .fnv-rnav__fill { transition: none; }
}