/* Reading navigation (21.10.2026, continuous reading Phase 2) - shared by article.html and
   article-preview.html. Neutral LIGHT defaults as CSS variables; the preview skins
   (article-design1..3.css) only re-declare the variables. */
:root {
    --rn-bar-h: 44px;
    --rn-bg: #ffffff;
    --rn-fg: #26332e;
    --rn-muted: #6b7a74;
    --rn-accent: #1e6f5c;
    --rn-on-accent: #ffffff;
    --rn-border: #d9e2de;
    --rn-hover: rgba(30, 111, 92, 0.09);
    --rn-shadow: 0 2px 14px rgba(0, 0, 0, 0.14);
    --rn-backdrop: rgba(12, 22, 18, 0.45);
    --rn-font: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif;
}
@media (max-width: 768px) {
    :root { --rn-bar-h: 40px; }
}

/* the new progress line replaces the skins' scroll-driven #readingProgress */
body.rn-active #readingProgress { display: none; }

/* ============================ reading bar ============================ */
.rn-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    display: flex; flex-direction: row; align-items: stretch; direction: rtl;
    height: var(--rn-bar-h); padding: 0 6px; gap: 2px; box-sizing: border-box;
    background: var(--rn-bg); color: var(--rn-fg);
    box-shadow: var(--rn-shadow);
    font-family: var(--rn-font); font-size: 15px; line-height: 1.6;
    transform: translateY(-110%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
}
.rn-bar.show { transform: translateY(0); visibility: visible; transition: transform .22s ease, visibility 0s; }
.rn-bar [hidden] { display: none !important; }
.rn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 40px; padding: 0 8px; margin: 0; border: 0; background: transparent;
    color: inherit; font: inherit; line-height: 1; cursor: pointer; text-decoration: none;
    border-radius: 8px; -webkit-tap-highlight-color: transparent;
}
.rn-btn:hover { background: var(--rn-hover); }
.rn-btn:focus-visible, .rn-tab:focus-visible, .rn-close:focus-visible, .rn-head:focus-visible,
.rn-way-btn:focus-visible, .rn-pill-x:focus-visible, .rn-retry:focus-visible { outline: 2px solid var(--rn-accent); outline-offset: -2px; }
.rn-ic { display: inline-flex; line-height: 0; }
.rn-btn-label { padding-bottom: 5px; }
.rn-toc { color: var(--rn-accent); }
.rn-title {
    flex: 1 1 auto; min-width: 0; align-self: center; padding: 0 8px 4px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.rn-pos { align-self: center; flex: 0 0 auto; padding: 0 6px 4px; color: var(--rn-muted); font-size: 14px; white-space: nowrap; }
.rn-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rn-border); overflow: hidden; }
.rn-progress i {
    display: block; height: 100%; width: 100%; background: var(--rn-accent);
    transform-origin: 100% 50%; transform: scaleX(0);   /* RTL: grows from the right */
}
@media (max-width: 520px) {
    .rn-btn-label { display: none; }
    .rn-pos { padding: 0 2px 4px; }
}

/* the bilingual switch pill sticks right under the bar while the bar is shown (and returns to the
   top when the bar hides while reading); `body` + 2 classes out-specifies the skins' `body .bi-switch` */
body .bi-switch { transition: top .22s ease, padding .15s ease; }
body.rn-bar-on .bi-switch { top: var(--rn-bar-h); }

/* ============================ drawer ============================ */
.rn-backdrop {
    position: fixed; inset: 0; z-index: 985; background: var(--rn-backdrop);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s;
    touch-action: none;
}
.rn-backdrop.open { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
.rn-drawer {
    position: fixed; top: 0; bottom: 0; right: 0; z-index: 990;
    width: 360px; max-width: 88vw; box-sizing: border-box;
    display: flex; flex-direction: column; direction: rtl;
    background: var(--rn-bg); color: var(--rn-fg);
    box-shadow: -4px 0 26px rgba(0, 0, 0, 0.25);
    font-family: var(--rn-font); font-size: 16px; line-height: 1.9;
    transform: translateX(105%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
}
.rn-drawer.open { transform: translateX(0); visibility: visible; transition: transform .25s ease, visibility 0s; }
@media (max-width: 768px) { .rn-drawer { width: 88vw; } }
.rn-d-head { flex: 0 0 auto; display: flex; align-items: stretch; border-bottom: 1px solid var(--rn-border); }
.rn-tabs { flex: 1 1 auto; display: flex; }
.rn-tab {
    flex: 1 1 0; min-height: 48px; padding: 0 10px 6px; border: 0; background: transparent;
    color: var(--rn-muted); font: inherit; line-height: 1.6; cursor: pointer;
    border-bottom: 3px solid transparent;
}
.rn-tab.on { color: var(--rn-accent); border-bottom-color: var(--rn-accent); }
.rn-close {
    flex: 0 0 auto; width: 48px; border: 0; background: transparent; color: var(--rn-muted);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.rn-close:hover { color: var(--rn-fg); background: var(--rn-hover); }
.rn-d-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 0 24px; }
.rn-d-title { margin: 6px 16px 8px; font-size: 1.15em; font-weight: bold; line-height: 1.8; color: var(--rn-fg); }
.rn-msg { padding: 24px 18px; text-align: center; color: var(--rn-muted); }
.rn-retry {
    margin-top: 8px; padding: 2px 16px 6px; font: inherit; color: var(--rn-accent); background: transparent;
    border: 1px solid var(--rn-accent); border-radius: 8px; cursor: pointer;
}
ul.rn-chapters, ul.rn-heads { list-style: none; margin: 0; padding: 0; }
.rn-sec {
    padding: 8px 16px 2px; margin-top: 8px; color: var(--rn-muted); font-size: 0.88em;
    border-top: 1px solid var(--rn-border);
}
.rn-sec:first-child { margin-top: 0; border-top: 0; }
.rn-ch-row {
    display: flex; gap: 10px; align-items: baseline; padding: 4px 16px 6px; min-height: 40px; box-sizing: border-box;
    color: inherit; text-decoration: none; border-inline-start: 3px solid transparent;
}
a.rn-ch-row:hover { background: var(--rn-hover); }
.rn-ch-n { flex: 0 0 auto; min-width: 1.6em; color: var(--rn-muted); font-size: 0.82em; text-align: end; }
.rn-ch-t { flex: 1 1 auto; min-width: 0; }
.rn-ch.current > .rn-ch-row { background: var(--rn-hover); border-inline-start-color: var(--rn-accent); color: var(--rn-accent); font-weight: bold; }
ul.rn-heads { margin: 2px 0 8px; padding-inline-start: 46px; padding-inline-end: 10px; }
.rn-head {
    display: block; width: 100%; text-align: start; padding: 2px 8px 5px; min-height: 36px; box-sizing: border-box;
    border: 0; border-radius: 6px; background: transparent; color: var(--rn-fg); font: inherit; font-size: 0.92em; line-height: 1.8; cursor: pointer;
}
.rn-head:hover { background: var(--rn-hover); }
.rn-rel-list { display: flex; flex-direction: column; }
.rn-rel { display: block; padding: 8px 16px 10px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--rn-border); }
.rn-rel:hover { background: var(--rn-hover); }
.rn-rel-t { display: block; font-weight: bold; line-height: 1.8; }
.rn-rel-a { display: block; color: var(--rn-muted); font-size: 0.85em; }
@media (pointer: coarse) {
    .rn-ch-row { min-height: 44px; }
    .rn-head { min-height: 44px; }
}

/* ============================ waypoints ============================
   A chunk-mark stays a direct child span of .article-content (the flat-chunk invariant), only taller. */
.article-content .chunk-mark.rn-way {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    height: 34px; margin: 10px 0; padding: 0; box-sizing: border-box;
    color: var(--rn-muted); font-family: var(--rn-font); font-size: 14px; line-height: 1.6; text-align: center;
    -webkit-user-select: none; user-select: none; direction: rtl; clear: both;
}
.rn-way-rule { flex: 1 1 0; min-width: 12px; height: 1px; background: currentColor; opacity: 0.28; }
.rn-way-body { flex: 0 1 auto; min-width: 0; max-width: 86%; display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; white-space: nowrap; padding-bottom: 3px; }
.rn-way-btn {
    margin: 0; padding: 0 4px 2px; border: 0; background: transparent; color: var(--rn-accent);
    font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px;
}
.rn-way-next { color: var(--rn-accent); text-decoration: none; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.rn-way-next:hover { text-decoration: underline; }

/* ============================ end of article ============================ */
.rn-end {
    display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
    margin: 28px 0 18px; padding: 16px 18px 18px; box-sizing: border-box;
    color: var(--rn-fg); text-decoration: none;
    background: var(--rn-bg); border: 1px solid var(--rn-border); border-radius: 12px;
    font-family: var(--rn-font); line-height: 1.9; direction: rtl;
}
.rn-end:hover { border-color: var(--rn-accent); }
.rn-end-kicker { color: var(--rn-muted); font-size: 14px; }
.rn-end-title { font-size: 20px; font-weight: bold; }
.rn-end-go { margin-top: 4px; color: var(--rn-accent); font-size: 15px; }

.rn-pill {
    position: fixed; left: 50%; bottom: 18px; z-index: 880; direction: rtl;
    display: flex; align-items: center; max-width: min(92vw, 520px);
    background: var(--rn-bg); color: var(--rn-fg); border: 1px solid var(--rn-border); border-radius: 999px;
    box-shadow: var(--rn-shadow); font-family: var(--rn-font); font-size: 15px; line-height: 1.6;
    opacity: 0; visibility: hidden; transform: translate(-50%, 16px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.rn-pill.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s ease, transform .2s ease, visibility 0s; }
.rn-pill-link { display: flex; gap: 6px; align-items: baseline; min-width: 0; padding: 4px 16px 8px; color: inherit; text-decoration: none; white-space: nowrap; }
.rn-pill-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--rn-accent); font-weight: bold; }
.rn-pill-x {
    flex: 0 0 auto; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--rn-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.rn-pill-x:hover { color: var(--rn-fg); }

@media (prefers-reduced-motion: reduce) {
    .rn-bar, .rn-drawer, .rn-backdrop, .rn-pill, body .bi-switch { transition: none !important; }
}

/* ============ resume toast + arrival flash (21.10.2026, continuous reading Phase 3; reading-progress.js) ============
   Sits above the «اگلا باب» pill slot (bottom 18px) and never touches the reading bar (top). */
.rp-toast {
    position: fixed; left: 50%; bottom: 72px; z-index: 882; direction: rtl;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
    width: max-content; max-width: min(94vw, 560px); box-sizing: border-box; padding: 6px 8px 6px 6px;
    background: var(--rn-bg); color: var(--rn-fg); border: 1px solid var(--rn-border); border-radius: 14px;
    box-shadow: var(--rn-shadow); font-family: var(--rn-font); font-size: 15px; line-height: 1.8;
    opacity: 0; visibility: hidden; transform: translate(-50%, 14px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.rp-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s ease, transform .25s ease, visibility 0s; }
.rp-toast-text { padding: 0 8px 2px; }
.rp-go {
    margin: 0; padding: 2px 14px 6px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--rn-accent); color: var(--rn-on-accent); font: inherit; font-weight: bold; line-height: 1.6;
}
.rp-go:hover { filter: brightness(1.08); }
.rp-x {
    flex: 0 0 auto; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--rn-muted); font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
}
.rp-x:hover { color: var(--rn-fg); background: var(--rn-hover); }
.rp-go:focus-visible, .rp-x:focus-visible { outline: 2px solid var(--rn-accent); outline-offset: 2px; }
/* the paragraph we jumped to: ~2 s, fades out by itself (the 7 s .highlighted-paragraph is for TOC jumps) */
@keyframes rpFlash { 0%, 55% { background-color: var(--rn-flash, var(--rn-hover)); } 100% { background-color: transparent; } }
.article-content .rp-flash { animation: rpFlash 2s ease-out; }
@media (prefers-reduced-motion: reduce) { .rp-toast { transition: none !important; } .article-content .rp-flash { animation: none; background-color: var(--rn-flash, var(--rn-hover)); } }