/* E-paper — web viewer (epaper/edition.html) + PDF (epaper/print.html, body.ep-print).
   Safha (sheet) HAMESHA kaghaz jaisa light — dark mode me bhi (akhbar + print). Is liye sheet ke rang yahan
   apne tokens me (light values tokens.css se); bahar ka chrome (bar, controls) site ke tokens par. */

.ep-sheet {
    --ep-paper: #FAF9F5;      /* = --color-card-bg (light) */
    --ep-ink: #141413;        /* = --color-ink (light) */
    --ep-muted: #6B6862;      /* = --color-muted (light) */
    --ep-rule: #DAD5C9;       /* = --color-border (light) */
    --ep-accent: #BB4E2A;     /* = --color-ticker-bg — 4.71:1 on paper */
    --ep-up: #4F6B45;
    --ep-down: #B4432C;
    background: var(--ep-paper);
    color: var(--ep-ink);
    color-scheme: light;
    font-family: var(--font-urdu);
    line-height: var(--lh-urdu);
    max-width: 880px;
    margin: 0 auto var(--space-5);
    padding: var(--space-4) var(--space-4) var(--space-3);
    border: 1px solid var(--ep-rule);
    box-shadow: var(--shadow-card);
}
.ep-sheet a { color: inherit; text-decoration: none; }
.ep-sheet a:hover, .ep-sheet a:focus-visible { color: var(--ep-accent); text-decoration: underline; text-underline-offset: 0.5em; }
.ep-sheet .num, .ep-num { font-family: var(--font-latin); direction: ltr; unicode-bidi: isolate; }

/* Masthead (safha 1) */
.ep-mast { text-align: center; border-bottom: 4px double var(--ep-ink); padding-bottom: var(--space-2); margin-bottom: var(--space-3); }
.ep-mast-name { font-size: clamp(2.4rem, 9vw, 4.4rem); font-weight: 700; line-height: 1.9; margin: 0; }
.ep-mast-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
    border-top: 1px solid var(--ep-ink); padding-top: var(--space-1); margin: 0; font-size: var(--fs-small); }
.ep-mast-meta .latin { font-family: var(--font-latin); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ep-muted); }

/* Running head (andar ke safhe) */
.ep-running { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
    font-size: var(--fs-small); color: var(--ep-muted); border-bottom: 1px solid var(--ep-ink); padding-bottom: var(--space-1); }
.ep-running-brand { font-weight: 700; color: var(--ep-ink); }

.ep-headline { margin: 0 0 var(--space-2); line-height: var(--lh-tight); font-weight: 700; }
.ep-lead .ep-headline { font-size: clamp(1.5rem, 4.2vw, 2.4rem); line-height: 1.9; }
.ep-front-item .ep-headline { font-size: var(--fs-h3); }
.ep-story .ep-headline { font-size: var(--fs-h2); }
.ep-standfirst { font-size: 1.1rem; color: var(--ep-muted); margin: 0 0 var(--space-2); }
.ep-standfirst--small { font-size: var(--fs-body); }
.ep-byline { font-size: var(--fs-small); color: var(--ep-muted); margin: 0 0 var(--space-2); }
.ep-continued { font-size: var(--fs-small); font-weight: 700; color: var(--ep-accent); margin: var(--space-1) 0 0; }
.ep-sheet p { margin: 0 0 var(--space-2); }

.ep-figure { margin: 0 0 var(--space-2); }
.ep-figure img { display: block; width: 100%; height: auto; }
.ep-figure figcaption { font-size: var(--fs-small); color: var(--ep-muted); line-height: var(--lh-tight); padding-top: var(--space-1); }
/* Khabar ki tasveer body ke columns ke andar: pehle (RTL me daayen) column ke upar, poori column chaurai */
.ep-figure--story { max-width: 420px; break-inside: avoid; }
.ep-story-body > .ep-figure--story:first-child { margin-top: 0; }

/* Front page: lead poori chaurai, neeche 2 column */
.ep-lead { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 2px solid var(--ep-ink); }
.ep-front-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3) var(--space-4); }
.ep-front-item { padding-bottom: var(--space-3); border-bottom: 1px solid var(--ep-rule); min-width: 0; }

/* Category ka safha */
.ep-section-title { font-size: var(--fs-h2); margin: var(--space-3) 0 var(--space-3); padding: var(--space-1) 0;
    border-top: 3px solid var(--ep-ink); border-bottom: 1px solid var(--ep-ink); }
.ep-story { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--ep-rule); }
.ep-story:last-of-type { border-bottom: 0; }
.ep-story-body { column-gap: var(--space-4); column-rule: 1px solid var(--ep-rule); }
.ep-story-body h2, .ep-story-body h3, .ep-story-body h4 { font-size: var(--fs-h3); margin: var(--space-2) 0; break-after: avoid; }
.ep-story-body blockquote { margin: 0 0 var(--space-2); padding-inline-start: var(--space-3); border-inline-start: 3px solid var(--ep-rule); }
.ep-story-body ul, .ep-story-body ol { padding-inline-start: var(--space-4); margin: 0 0 var(--space-2); }

/* Aakhri safha: rates + mausam */
.ep-rates { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); }
.ep-rates th, .ep-rates td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--ep-rule); text-align: start; }
.ep-rates th { font-weight: 400; }
.ep-rates .ep-num { font-weight: 700; white-space: nowrap; }
.ep-rates .ep-unit { font-size: var(--fs-small); color: var(--ep-muted); }
.ep-up { color: var(--ep-up); }
.ep-down { color: var(--ep-down); }
.ep-weather { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-2); }
.ep-weather li { border: 1px solid var(--ep-rule); padding: var(--space-1) var(--space-2); }
.ep-weather small { color: var(--ep-muted); }
.ep-weather .ep-range { display: inline-block; white-space: nowrap; }  /* "28° / 19°" kabhi na toote */
.ep-note { font-size: var(--fs-small); color: var(--ep-muted); }
.ep-folio { text-align: center; font-size: var(--fs-small); color: var(--ep-muted); border-top: 1px solid var(--ep-rule); padding-top: var(--space-1); margin-top: var(--space-3); }

@media (min-width: 680px) {
    .ep-front-grid { grid-template-columns: 1fr 1fr; }
    .ep-front-item:nth-child(odd) { padding-inline-end: var(--space-4); border-inline-end: 1px solid var(--ep-rule); }
    .ep-story-body { columns: 2; }
    .ep-figure--story { max-width: none; }
}
@media (max-width: 520px) {
    .ep-sheet { padding: var(--space-3) var(--space-3) var(--space-2); margin-inline: calc(-1 * var(--space-2)); }
}

/* --- Web viewer (bahar ka chrome — site tokens, dark mode ke saath) --- */
.ep-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 var(--space-3); }
.ep-bar-title .page-title { margin: 0; }
.ep-bar-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.ep-bar-links a { color: var(--color-primary-dark); }
.ep-pdf { font-weight: 700; }
.ep-controls { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
    max-width: 880px; margin: 0 auto var(--space-2); padding: var(--space-1) 0; background: var(--color-bg); }
.ep-controls[hidden], .ep-thumbs[hidden] { display: none; }
.ep-controls button { font: inherit; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-card-bg); color: var(--color-ink); cursor: pointer; }
.ep-controls button:disabled { opacity: 0.4; cursor: default; }
.ep-controls button:focus-visible, .ep-thumbs a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ep-thumbs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-2);
    max-width: 880px; margin: 0 auto var(--space-3); font-size: var(--fs-small); }
.ep-thumbs a { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-ink); border: 1px solid var(--color-border); }
.ep-thumbs a[aria-current="true"] { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-on-primary); }

.ep-viewer.is-paged .ep-sheet { display: none; }
.ep-viewer.is-paged .ep-sheet.is-current { display: block; }
.ep-viewer.is-paged .ep-stack { touch-action: pan-y; }
/* Varq palatna: RTL akhbar — agla safha baayen se aata hai */
.ep-sheet.flip-next { animation: ep-flip-next 0.35s ease-out; transform-origin: left center; }
.ep-sheet.flip-prev { animation: ep-flip-prev 0.35s ease-out; transform-origin: right center; }
@keyframes ep-flip-next { from { opacity: 0.2; transform: perspective(1600px) rotateY(-28deg); } to { opacity: 1; transform: none; } }
@keyframes ep-flip-prev { from { opacity: 0.2; transform: perspective(1600px) rotateY(28deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ep-sheet.flip-next, .ep-sheet.flip-prev { animation: none; } }

/* Archive calendar */
.ep-archive { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.ep-month { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); }
.ep-month-title { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.ep-cal { width: 100%; border-collapse: collapse; text-align: center; table-layout: fixed; }
.ep-cal th { font-size: 0.75rem; font-weight: 400; color: var(--color-muted); }
.ep-cal td { padding: 2px; }
.ep-cal a, .ep-cal-off { display: block; min-height: 36px; line-height: 36px; border-radius: var(--radius-sm); }
.ep-cal a { background: var(--color-primary-dark); color: var(--color-on-primary); font-weight: 700; }
.ep-cal-off { color: var(--color-muted); opacity: 0.6; }

/* --- PDF (Chromium print) — A4, 2 column --- */
@page {
    size: A4; margin: 11mm 12mm 14mm;
    @bottom-center { content: counter(page); font-family: "Source Sans 3", sans-serif; font-size: 8.5pt; color: #6B6862; }
}
/* PDF: har safhe ka chhupa nishaan (app/epaper.py _sheet_pages — kaun sa safha kis kaghaz par) */
.ep-marker { position: absolute; font: 1px/1 sans-serif; color: #fff; opacity: 0.01; }
.ep-print .ep-sheet { position: relative; }
.ep-print .ep-folio { display: none; }
.ep-print { margin: 0; background: #fff; font-size: 10.5pt; }
.ep-print .ep-sheet { max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: #fff; break-before: page; }
.ep-print .ep-sheet:first-child { break-before: auto; }
.ep-print .ep-mast-name { font-size: 36pt; line-height: 1.7; }
.ep-print .ep-mast { margin-bottom: 3mm; }
.ep-print .ep-lead { padding-bottom: 3mm; margin-bottom: 3mm; }
.ep-print .ep-front-grid { gap: 3mm 6mm; }
.ep-print .ep-front-item { padding-bottom: 2mm; }
.ep-print .ep-front-item .ep-figure, .ep-print .ep-front-item .ep-standfirst { display: none; }  /* A4 ka ek safha */
.ep-print .ep-front-item .urdu-prose p { line-height: 1.95; margin-bottom: 1mm; }
.ep-print .ep-front-item:nth-child(n+3) .urdu-prose { display: none; }  /* baqi: surkhi + "باقی صفحہ X" */
.ep-print .ep-front-item:nth-child(n+3) .ep-headline { font-size: 12.5pt; }
.ep-print .ep-lead .ep-headline { font-size: 24pt; }
.ep-print .ep-front-item .ep-headline { font-size: 14pt; }
.ep-print .ep-story .ep-headline { font-size: 16pt; }
.ep-print .ep-section-title { font-size: 17pt; }
.ep-print .ep-standfirst { font-size: 11.5pt; }
.ep-print .ep-standfirst--small { font-size: 10.5pt; }
.ep-print .ep-front-grid { grid-template-columns: 1fr 1fr; }
.ep-print .ep-front-item:nth-child(odd) { padding-inline-end: 6mm; border-inline-end: 1px solid var(--ep-rule); }
.ep-print .ep-story-body { columns: 2; column-gap: 7mm; }
.ep-print .ep-figure--story { max-width: none; }
.ep-print .ep-figure--story img { max-height: 70mm; object-fit: cover; }
/* Chand lines agle kaghaz par na jayen (app/epaper.py render_pdf): us safhe ko thora kasa hua */
.ep-print .ep-tight-1 { font-size: 10pt; }
.ep-print .ep-tight-1 .ep-story-body { line-height: 1.95; }
.ep-print .ep-tight-1 .ep-figure--story img { max-height: 55mm; }
.ep-print .ep-tight-2 { font-size: 9.5pt; }
.ep-print .ep-tight-2 .ep-story-body { line-height: 1.85; }
.ep-print .ep-tight-2 .ep-figure--story img { max-height: 42mm; }
.ep-print .ep-tight-2 .ep-story .ep-headline { font-size: 14pt; }
/* Front page (A4 ka ek safha): surkhiyan aur lead tasveer chhoti; tight-2 me lead ka matn bhi chhota */
.ep-print .ep-tight-1 .ep-lead .ep-headline { font-size: 20pt; }
.ep-print .ep-tight-1 .ep-figure--lead img { max-height: 40mm; }
.ep-print .ep-tight-1 .ep-front-item .ep-headline { font-size: 12.5pt; }
.ep-print .ep-tight-1 .ep-front-item:nth-child(n+3) .ep-headline { font-size: 11.5pt; }
.ep-print .ep-tight-2 .ep-lead .ep-headline { font-size: 17pt; }
.ep-print .ep-tight-2 .ep-figure--lead img { max-height: 30mm; }
.ep-print .ep-tight-2 .ep-lead .ep-standfirst { display: none; }
.ep-print .ep-tight-2 .ep-front-item .ep-headline { font-size: 11.5pt; }
.ep-print .ep-tight-2 .ep-front-item:nth-child(n+3) .ep-headline { font-size: 10.5pt; }
.ep-print .ep-tight-2 .ep-front-item .urdu-prose p { line-height: 1.8; }
.ep-print .ep-figure--lead img { max-height: 52mm; object-fit: cover; }
.ep-print .ep-headline, .ep-print .ep-section-title { break-after: avoid; }
.ep-print .ep-figure, .ep-print .ep-front-item, .ep-print .ep-rates tr { break-inside: avoid; }
.ep-print .ep-weather { grid-template-columns: repeat(4, 1fr); }