/* ==========================================================================
   GW ePaper — reader, Indian ePaper layout (loaded after reader.css)
   The reader lives inside the normal site page: site header on top, then a
   sticky tool row (newspaper menu, date, zoom, clip), an info line, the page
   itself in the document flow, a sticky numbered pager and the site footer.
   On phones the pager sits just above the app-style bottom bar.
   ========================================================================== */
:root {
  --r-bg: #e8eaed; --r-bar: #0c3340; --r-bar-line: #0a2a35; --r-text: #ffffff; --r-muted: #b7c6cc; --r-accent: #e0343a;
  --r-ink: #17191d; --r-line: #d3d7dd; --r-top: 49px; --r-tools-h: 53px; --r-bar-h: 54px; --r-tabs: 0px;
}
body.has-reader { background: var(--r-bg); }
body.has-reader main { display: block; }
body.has-reader .date-strip { display: none; }            /* the reader has its own date picker */
body.has-reader .site-footer { margin-top: 0; }
.skip-link { background: var(--r-bar); color: #fff; }

.reader { height: auto; min-height: 0; display: block; color: var(--r-ink); font-family: var(--font-ui); }

/* tool row ---------------------------------------------------------------- */
.reader-tools { position: sticky; top: var(--r-top); z-index: 1015; display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: #fff; border-bottom: 1px solid var(--r-line); box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.tool-select { height: 38px; max-width: 46vw; min-width: 0; border: 1px solid #b9bfc7; border-radius: 4px; background: #fff; color: var(--r-ink); font: inherit; font-weight: 700; font-size: .95rem; padding: 0 8px; }
.tool-date { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: 4px; background: #1d4fbf; color: #fff; margin: 0; cursor: pointer; }
.tool-date input { border: 0; background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: .9rem; width: 8.4em; color-scheme: dark; }
.tool-gap { flex: 1; }
.tool-btn { height: 38px; min-width: 40px; padding: 0 11px; border: 1px solid #2b3038; border-radius: 4px; background: #2b3038; color: #fff; font: inherit; font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tool-btn:hover { background: #17191d; }
.tool-crop { background: var(--r-accent); border-color: var(--r-accent); }
.tool-crop:hover, .tool-crop[aria-pressed="true"] { background: #a8161b; border-color: #a8161b; }
.zoom-level { color: #596069; min-width: 3em; text-align: center; font-size: .86rem; }

.reader-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 14px; background: var(--r-bar); color: #fff; font-size: .95rem; }
.reader-info a { color: #fff; text-decoration: none; }
.reader-info a:hover { text-decoration: underline; }
.reader-info .badge-access { margin-left: auto; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; }
.reader-info .badge-access.free { background: #dff3e6; color: #125c35; }
.reader-info .badge-access.premium { background: #ffe9a8; color: #6b4400; }
.reader-preview { color: #ffd76a; letter-spacing: .08em; }
.reader-progress span { background: var(--r-accent); }

/* page area --------------------------------------------------------------- */
.reader-main { display: flex; align-items: flex-start; min-height: 0; position: relative; }
.reader-thumbs { position: sticky; top: calc(var(--r-top) + var(--r-tools-h)); height: calc(100vh - var(--r-top) - var(--r-tools-h) - var(--r-bar-h)); width: 168px; background: #f6f7f8; border-right: 1px solid var(--r-line); }
.thumbs-head { color: #596069; border-bottom-color: var(--r-line); }
.thumbs-head .rbtn { color: var(--r-ink); }
.thumb { color: #596069; }
.thumb img, .thumb-blank { border: 1px solid var(--r-line); }
.thumb:hover { border-color: #9aa3ad; }
.thumb[aria-current="true"] { border-color: var(--r-accent); color: var(--r-ink); }
.reader-stage { flex: 1; min-width: 0; min-height: 62vh; overflow-x: auto; overflow-y: hidden; position: relative; }
.reader-sheet { min-height: 0; padding: 16px; }
.sheet-inner { position: relative; display: inline-block; line-height: 0; }
#page-canvas { box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 14px 30px -14px rgba(0, 0, 0, .45); }
.reader-overlay { background: var(--r-bg); color: var(--r-ink); justify-content: flex-start; padding-top: 14vh; }
.reader-overlay p { color: #596069; }
.reader-spinner { border-color: #c9cdd3; border-top-color: var(--r-accent); }
.reader-ad { padding-top: 12px; }
.reader-edge { position: fixed; background: rgba(29, 79, 191, .88); width: 46px; height: 46px; border-radius: 6px; }
.reader-edge-prev { left: 10px; border-radius: 6px; }
.reader-edge-next { right: 10px; border-radius: 6px; }
.reader.thumbs-open .reader-edge-prev { left: 180px; }

/* clip (crop) tool -------------------------------------------------------- */
.crop-layer { position: absolute; inset: 0; cursor: crosshair; touch-action: none; background: rgba(12, 51, 64, .18); }
.crop-box { position: absolute; border: 2px dashed #fff; outline: 2px solid var(--r-accent); background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 9999px rgba(12, 51, 64, .35); }
.crop-actions { position: fixed; left: 50%; bottom: calc(var(--r-bar-h) + var(--r-tabs) + 16px); transform: translateX(-50%); z-index: 1045; display: flex; gap: 8px; padding: 8px; background: var(--r-bar); border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); white-space: nowrap; }
.crop-actions[hidden] { display: none; }
.reader-toast { background: var(--r-ink); color: #fff; bottom: calc(var(--r-bar-h) + var(--r-tabs) + 18px); z-index: 1046; }

/* pager ------------------------------------------------------------------- */
.reader-bar { background: var(--r-bar); }
.reader-bottom { position: sticky; bottom: var(--r-tabs); z-index: 1016; min-height: var(--r-bar-h); border-top: 3px solid var(--r-accent); padding-bottom: 0; }
.reader-bottom .rbtn { color: #fff; }
.rbtn:hover { background: rgba(255, 255, 255, .14); }
.pbtn { height: 36px; min-width: 36px; padding: 0 11px; border: 1px solid #c9cdd3; background: #fff; color: #1d4fbf; font: inherit; font-weight: 700; font-size: .95rem; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.pbtn:hover { background: #eef2fb; }
.pbtn:disabled { color: #9aa3ad; background: #eceef1; cursor: default; }
.reader-pager { gap: 4px; }
.page-input { background: #1d4fbf; color: #fff; border-color: #1d4fbf; font-weight: 800; font-family: inherit; }
.page-total { color: #fff; }

/* full screen: only the paper and its controls */
:fullscreen .utility-bar, :fullscreen .masthead, :fullscreen .site-header, :fullscreen .site-footer, :fullscreen .app-tabs, :fullscreen .ad-slot { display: none !important; }
:fullscreen { --r-top: 0px; --r-tabs: 0px; }
:fullscreen body { padding-bottom: 0; }

@media (max-width: 767px) {
  :root { --r-top: 0px; --r-tools-h: 54px; --r-bar-h: 56px; --r-tabs: 62px; }
  body.has-reader .utility-bar, body.has-reader .site-header { display: none; }   /* the bottom app bar carries navigation */
  .reader-tools { padding: 6px 8px; gap: 5px; }
  .tool-select { flex: 1; max-width: none; height: 42px; }
  .tool-date { height: 42px; padding: 0 12px; }
  .tool-date input { width: 0; padding: 0; opacity: 0; position: absolute; }
  .tool-gap, .reader-tools .zoom-level, #btn-zoom-out { display: none; }
  .tool-btn { height: 42px; min-width: 44px; }
  .tool-crop span { display: none; }
  .reader-info { font-size: .86rem; padding: 6px 10px; }
  .reader-sheet { padding: 8px; }
  .reader-stage { min-height: 56vh; }
  .reader-thumbs { position: fixed; inset: 0 auto 0 0; height: auto; width: min(78vw, 300px); z-index: 1050; box-shadow: 8px 0 30px rgba(0, 0, 0, .5); }
  .reader.thumbs-open .reader-main::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1048; }
  .pbtn span { display: none; }
  .pbtn { height: 42px; min-width: 42px; font-size: 1.2rem; }
  .page-input { height: 42px; width: 3.2em; }
  .reader-bottom { justify-content: space-between; padding-inline: 4px; }
  .reader-bottom .rbtn { width: 38px; }
  .reader.thumbs-open .reader-edge-prev { left: 10px; }
}
@media (max-width: 479px) { #btn-first, #btn-last { display: none; } }
@media print {
  .reader-tools, .reader-info, .crop-actions, .crop-layer { display: none !important; }
  .reader-stage { overflow: visible; min-height: 0; }
}

/* ==========================================================================
   Desktop layout: centred reading column, page list on the left, details
   and other newspapers on the right, numbered pager.
   ========================================================================== */
.reader-side, .page-numbers { display: none; }
.pnum.is-current { background: #1d4fbf; border-color: #1d4fbf; color: #fff; }
@media (min-width: 992px) {
  .reader-tools, .reader-info { padding-inline: max(16px, calc((100vw - 1440px) / 2 + 16px)); }
  .reader-tools { gap: 8px; padding-block: 9px; }
  .tool-select { min-width: 260px; height: 40px; font-size: 1rem; }
  .tool-date, .tool-btn { height: 40px; }
  .tool-btn { padding-inline: 14px; }
  .reader-info { font-size: 1rem; padding-block: 8px; }
  .reader-main { max-width: 1440px; margin-inline: auto; gap: 0; padding-inline: 8px; }
  .reader-stage { background: transparent; }
  .reader-sheet { padding: 20px 16px 28px; }
  #page-canvas { border-radius: 2px; }
  .reader-thumbs { width: 150px; background: #fff; border: 1px solid var(--r-line); border-top: 0; margin-top: 0; }
  .thumbs-list { padding: 10px; gap: 10px; }
  .page-numbers { display: inline-flex; gap: 4px; }
  .reader-pager .page-input, .reader-pager .page-total { display: none; }
  .reader-pager { gap: 5px; margin-inline: auto; }
  .reader-bottom { padding-inline: max(12px, calc((100vw - 1440px) / 2 + 12px)); }
  .pbtn { height: 38px; min-width: 40px; }
  .reader-edge { top: 55%; }
}
@media (min-width: 1200px) {
  .reader-side { display: block; width: 300px; flex-shrink: 0; position: sticky; top: calc(var(--r-top) + var(--r-tools-h) + 12px); max-height: calc(100vh - var(--r-top) - var(--r-tools-h) - var(--r-bar-h) - 24px); overflow-y: auto; margin: 20px 8px 20px 0; scrollbar-width: thin; }
  .side-card { background: #fff; border: 1px solid var(--r-line); border-top: 3px solid var(--r-bar); border-radius: 4px; padding: 14px 16px 16px; margin-bottom: 14px; }
  .side-card h2 { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #596069; margin: 0 0 10px; }
  .side-title { font-size: 1.25rem; font-weight: 800; color: var(--r-ink); line-height: 1.2; margin: 0 0 10px; }
  .side-facts { display: grid; grid-template-columns: 22px 1fr; gap: 6px 8px; margin: 0 0 14px; font-size: .97rem; }
  .side-facts dt { color: #7a828c; }
  .side-facts dd { margin: 0; color: var(--r-ink); }
  .side-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .side-papers { list-style: none; margin: 0; padding: 0; }
  .side-papers li + li { border-top: 1px solid #eceef1; }
  .side-papers a { display: flex; gap: 12px; align-items: center; padding: 10px 0; text-decoration: none; color: var(--r-ink); }
  .side-papers a:hover strong { color: var(--accent); text-decoration: underline; }
  .side-cover { width: 54px; aspect-ratio: 595 / 842; background: #e6e8eb; border: 1px solid var(--r-line); flex-shrink: 0; overflow: hidden; }
  .side-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
  .side-paper-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-start; }
  .side-paper-text strong { font-size: 1rem; line-height: 1.2; }
  .side-paper-text > span { font-size: .84rem; color: #596069; }
  .side-paper-text .badge-access { font-size: .62rem; padding: 1px 6px; }
  .side-more { display: inline-block; margin-top: 8px; font-weight: 700; font-size: .92rem; }
  .side-cta { border-top-color: var(--accent); }
  .side-cta p { margin: 0 0 12px; color: var(--r-ink); font-weight: 600; }
  .reader.thumbs-open .reader-edge-prev { left: max(170px, calc((100vw - 1440px) / 2 + 170px)); }
  .reader-edge-next { right: max(324px, calc((100vw - 1440px) / 2 + 324px)); }
}
@media (min-width: 992px) and (max-width: 1199px) { .reader-edge-next { right: 14px; } }
:fullscreen .reader-side { display: none; }
@media print { .reader-side { display: none !important; } }