/* ==========================================================================
   Two-column pairs «پردہ» — printed parallel columns (Arabic/Persian original | Urdu)
   (added 14.11.2026; first book: مقالاتِ سر سید, list in ocr_jobs\maqalaat_e_sir_syed\
   TWO_COLUMN_CHAPTERS.md; design = D:\uj\mockups\curtain, adopted by the user)

   Content dialect — ONE flat <p> per pair (pagination, p-N ids, ?highlight=, footnote refs,
   search and Word export need no change):
     <p class="col-pair[ col-src-left]" id="p-N" data-page="P">
        <span class="col-src lang-ar|lang-fa">original</span> <span class="col-tr">Urdu</span></p>
   col-src-left = the original was printed in the LEFT column (default: right).

   Reader (js/colpairs.js; NOT the bilingual sentence pairs of §5.8, which stay as they are):
     wide column  → both texts side by side, like the print
     narrow (phone) → .col-curtain on the content: both texts lie on top of each other, each laid
                    out ONCE at (100 − strip)% width; a curtain (clip-path only — no re-flow) shows
                    how much of each. --cu = how much of the Urdu is open (strip … 100 − strip),
                    --cpeek = the strip that never closes (10%, user 14.11). One floating handle
                    (.col-knob, outside the content) + each pair's faint line can be dragged.
   Snapshot card follows the curtain (#snapCardBody.col-view-ur | -ar | -both, set by buildCard).
   Loaded by article.html AND article-preview.html (mirror rule, ARCH §12).
   ========================================================================== */

.article-content p.col-pair { text-align: justify; margin: 0 0 12px; }
.article-content p.col-pair > span.col-src,
.article-content p.col-pair > span.col-tr { display: block; text-align: justify; }
.article-content p.col-pair > span.col-src {
    font-family: 'Parastoo', 'Noto Naskh Arabic', serif;
    font-size: 1.02em;
    line-height: 2.05;
    font-kerning: auto;
}
/* an original typed with its own inner lang span keeps the column size (article.html shrinks inline
   span.lang-ar to 0.88em for Arabic inside Urdu prose — not wanted inside the Arabic column) */
.article-content p.col-pair > span.col-src :is(span.lang-ar, span.lang-fa) { font-size: inherit; line-height: inherit; font-family: inherit; }
.article-content p.col-pair > span.col-src.lang-fa {
    font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
    font-size: 0.8em; line-height: 2.6;
}

/* a NOTED block of pairs (editor «Note», 14.11.2026): p.col-pair.article-note takes the note font size from
   article.html's p.article-note rule, but keeps the pair's own margins (no 60px note indent — the columns need
   the width); the rules below win by source order / specificity */
.article-content p.col-pair.article-note { margin-left: 0; margin-right: 0; }

/* ---------- side by side (desktop, tablet, and the snapshot card's «both») ---------- */
.article-content:not(.col-curtain):not(#snapCardBody) p.col-pair,
#snapCardBody.col-view-both p.col-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    margin-bottom: 4px;
}
.article-content:not(.col-curtain):not(#snapCardBody) p.col-pair > span.col-src,
#snapCardBody.col-view-both p.col-pair > span.col-src {
    grid-column: 1;                     /* RTL grid: column 1 = right */
    padding-inline-end: 18px;
    border-inline-end: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.article-content:not(.col-curtain):not(#snapCardBody) p.col-pair > span.col-tr,
#snapCardBody.col-view-both p.col-pair > span.col-tr {
    grid-column: 2;
    grid-row: 1;
    padding-inline-start: 18px;
}
/* original printed on the LEFT */
.article-content:not(.col-curtain):not(#snapCardBody) p.col-pair.col-src-left > span.col-src,
#snapCardBody.col-view-both p.col-pair.col-src-left > span.col-src {
    grid-column: 2; grid-row: 1;
    padding-inline-end: 0; border-inline-end: 0;
    padding-inline-start: 18px;
    border-inline-start: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.article-content:not(.col-curtain):not(#snapCardBody) p.col-pair.col-src-left > span.col-tr,
#snapCardBody.col-view-both p.col-pair.col-src-left > span.col-tr {
    grid-column: 1; padding-inline-start: 0; padding-inline-end: 18px;
}
/* a run of pairs reads as one printed block: faint rule between pairs, gap after the run */
.article-content:not(.col-curtain):not(#snapCardBody) p.col-pair + p.col-pair {
    padding-top: 4px;
    border-top: 1px dotted color-mix(in srgb, currentColor 14%, transparent);
}
.article-content p.col-pair:not(:has(+ p.col-pair)) { margin-bottom: 16px; }

/* ---------- the curtain (phone) ---------- */
.article-content.col-curtain { --cu: 90; --cpeek: 10; }
.article-content.col-curtain p.col-pair {
    display: grid;
    grid-template-columns: 1fr;
    container-type: inline-size;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 10px;
    touch-action: pan-y pinch-zoom;     /* sideways drags on the line go to the curtain */
    /* --s = where the line sits, from the LEFT edge, in % of the pair's width */
    --s: var(--cu);
}
.article-content.col-curtain p.col-pair.col-src-left { --s: calc(100 - var(--cu)); }
.article-content.col-curtain p.col-pair > span {
    grid-area: 1 / 1;
    width: calc((100 - var(--cpeek)) * 1cqw);
    box-sizing: border-box;
    padding-top: 2px; padding-bottom: 4px;
}
/* the layer on the RIGHT shows what lies right of the line, the LEFT layer what lies left of it */
.article-content.col-curtain p.col-pair:not(.col-src-left) > span.col-src,
.article-content.col-curtain p.col-pair.col-src-left > span.col-tr {
    justify-self: start;                /* RTL: start = right */
    padding-right: 10px; padding-left: 8px;
    clip-path: inset(0 0 0 calc((var(--s) - var(--cpeek)) * 1cqw));
}
.article-content.col-curtain p.col-pair:not(.col-src-left) > span.col-tr,
.article-content.col-curtain p.col-pair.col-src-left > span.col-src {
    justify-self: end;
    padding-left: 10px; padding-right: 8px;
    clip-path: inset(0 calc((100 - var(--cpeek) - var(--s)) * 1cqw) 0 0);
}
/* the original's band is tinted, so the hidden strip reads as "something behind the curtain" */
.article-content.col-curtain p.col-pair > span.col-src {
    background: #f6f1e6;
    background: color-mix(in srgb, #c9a86a 13%, transparent);
}
.article-content.col-curtain.col-anim p.col-pair > span { transition: clip-path .32s cubic-bezier(.3,.7,.3,1); }
.article-content.col-curtain.col-anim p.col-pair::before { transition: left .32s cubic-bezier(.3,.7,.3,1); }
/* the faint line (drawn, not injected: the text DOM stays untouched) */
.article-content.col-curtain p.col-pair::before {
    content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none;
    left: calc(var(--s) * 1cqw - 0.75px); width: 1.5px;
    background: currentColor; opacity: .28;
}
.article-content.col-curtain.col-dragging p.col-pair::before { opacity: .6; }
/* the tag in the hidden strip: which language is behind the curtain */
/* 14.11.2026 (user): Jameel instead of the system font, and never wider than the strip — the tag used to
   reach into the open column on phones (strip = 10% ≈ 33px) */
.article-content.col-curtain p.col-pair::after {
    position: absolute; top: 4px; z-index: 1; pointer-events: none;
    font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif;
    font-size: 13px; line-height: 1.5; padding: 0 3px 2px; border-radius: 4px;
    max-width: calc(var(--cpeek) * 1cqw - 4px); box-sizing: border-box;
    overflow: hidden; white-space: nowrap; text-align: center;
    background: #2f4f45; color: #fff; opacity: .85;
}
/* Urdu mostly open → the strip shows the original */
.article-content.col-curtain.col-ur-open p.col-pair:has(> .col-src.lang-ar)::after { content: "عربی"; }
.article-content.col-curtain.col-ur-open p.col-pair:has(> .col-src.lang-fa)::after { content: "فارسی"; }
.article-content.col-curtain.col-ur-open p.col-pair:not(.col-src-left)::after { right: 2px; }
.article-content.col-curtain.col-ur-open p.col-pair.col-src-left::after { left: 2px; }
/* original mostly open → the strip shows the Urdu */
.article-content.col-curtain.col-src-open p.col-pair::after { content: "اردو"; }
.article-content.col-curtain.col-src-open p.col-pair:not(.col-src-left)::after { left: 2px; }
.article-content.col-curtain.col-src-open p.col-pair.col-src-left::after { right: 2px; }

/* ---------- pairs inside a FOOTNOTE (قصہ موسیٰ: a 34-page two-column footnote) ----------
   footnotes render in .fn-body (list + popup), outside the curtain: side by side when the box is wide,
   otherwise the original with its Urdu directly under it */
.fn-body:has(p.col-pair) { container-type: inline-size; container-name: colfn; }
.fn-body p.col-pair { margin: 0 0 10px; text-align: justify; }
.fn-body p.col-pair > span.col-src,
.fn-body p.col-pair > span.col-tr { display: block; }
.fn-body p.col-pair > span.col-src { font-family: 'Parastoo', 'Noto Naskh Arabic', serif; font-size: 1.08em; line-height: 2.05; font-kerning: auto; }
.fn-body p.col-pair > span.col-src :is(span.lang-ar, span.lang-fa) { font-size: inherit; line-height: inherit; font-family: inherit; }
.fn-body p.col-pair > span.col-tr { margin-top: 2px; }
@container colfn (min-width: 600px) {
    .fn-body p.col-pair { display: grid; grid-template-columns: 1fr 1fr; }
    .fn-body p.col-pair > span.col-src { grid-column: 1; padding-inline-end: 14px; border-inline-end: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
    .fn-body p.col-pair > span.col-tr { grid-column: 2; grid-row: 1; padding-inline-start: 14px; margin-top: 0; }
}

/* ---------- the one floating handle ---------- */
.col-knob {
    /* above the reading pill (.rn-pill, bottom 18px) and the preview's design switch */
    position: fixed; bottom: max(96px, 13vh); left: 0; z-index: 900;
    width: 30px; height: 30px; margin-left: -15px; border-radius: 50%;
    background: rgba(47, 79, 69, .42); color: #fff; display: grid; place-items: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15); cursor: ew-resize; touch-action: none;
    -webkit-tap-highlight-color: transparent; opacity: 0; pointer-events: none;
    transition: opacity .25s, background-color .2s, transform .15s;
}
.col-knob.show { opacity: 1; pointer-events: auto; }
.col-knob svg { width: 18px; height: 18px; }
.col-knob:focus-visible { outline: 3px solid #e3b341; }
.col-knob:hover, .col-knob.dragging { background: rgba(47, 79, 69, .85); }
.col-knob.dragging { transform: scale(1.12); }
.col-knob.nudge { animation: col-nudge 1.4s ease-in-out 1; }
@keyframes col-nudge { 0%, 100% { transform: none } 30% { transform: translateX(-12px) } 60% { transform: translateX(4px) } }
@media print { .col-knob { display: none; } }

/* ---------- snapshot card: follows the curtain ---------- */
#snapCardBody p.col-pair { margin: 0 0 8px; }
#snapCardBody.col-view-ur p.col-pair > span.col-src,
#snapCardBody.col-view-ar p.col-pair > span.col-tr { display: none; }
#snapCardBody.col-view-both p.col-pair > span.col-src { font-size: .95em; }
#snapCardBody.col-view-both p.col-pair > span.col-tr { font-size: .92em; line-height: 2.05; }