/* ════════════════════════════════════════════════════════════════
   MAGAZINES — styles for the flipbook reader, TOC popup, and article text
   popup (magazine.js). Loaded after styles.css (see index.html) — reuses
   that file's shared classes directly wherever possible (.book-card/
   .controls/.icon-nav/.help-modal/.toc-list/.reader-footer/
   .footer-page-btn/.fontsize-group/.tbar-booktitle/.tbar-subtitle/
   [hidden]) rather than redefining them; only genuinely magazine-specific
   visuals live here. Same teal/cream palette as the rest of the app
   (#2b6777 / #faf7f2 / #e6e0d6).

   Base layout mirrors the book reader's critical PAGINATION LAYOUT block
   in styles.css (~1188-1251): #magazineReaderView is a full-height flex
   column (header, flex-shrink:0 → stage, flex:1 → fixed footer overlaying
   the bottom, space reserved via padding) instead of the old
   `height: calc(100vh - 46px - 64px)` magic-number approach, which broke
   the moment header/footer heights varied (mobile vs desktop, chrome
   fade). The article popup keeps exactly this reflow model. The flipbook
   itself goes further with a `body[data-mag-chrome="overlay"]` mode (see
   below) that makes the page-image stage permanently full-bleed with the
   header/footer floating on top of it instead of reserving space at all.
   See CLAUDE.md's Magazines section for the full architecture.
   ════════════════════════════════════════════════════════════════ */

body[data-view="magazine"] {
  height: 100vh;
  overflow: hidden;
}
body[data-view="magazine"] #magazineReaderView {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body[data-view="magazine"] #magazineControls {
  position: relative; /* body doesn't scroll, no need for sticky */
  flex-shrink: 0;
}

/* ── Immersive overlay chrome (flipbook mode only) ─────────────────
   Unlike the book reader (and this app's own article-reading mode, both
   of which fade the header/footer's opacity but permanently reserve their
   space via flex-shrink/padding — content never resizes), the flipbook
   goes further: #magazineControls/#magFooter become position:fixed
   overlays with a soft gradient scrim, floating ON TOP of a page-image
   stage that is a permanent position:absolute;inset:0 layer underneath
   them. The image is therefore ALWAYS rendered at full available size —
   showing/hiding the chrome never resizes or reflows it, only fades the
   overlay bars on top of it. That's what makes the transition perfectly
   smooth (a single opacity change, no layout recalculation of a large
   image) and matches how comic/magazine readers (Comixology, Apple
   Books) and video players handle immersive fullscreen reading.

   Toggled via body[data-mag-chrome]: 'overlay' while browsing pages,
   'inflow' while an article is open — the article popup deliberately
   keeps the reflow model (permanently reserved header/footer space),
   since a scrim permanently overlaid on body text risks obscuring the
   first/last visible line, unlike a photo page where a bit of edge
   content sitting under a translucent gradient is normal and expected.
   Set in magazine.js: handleMagazineRoute/exitArticleModeSilently pick
   'overlay', openMagazineArticle picks 'inflow'.

   Because #magazineControls/#magFooter stay anchored exactly at the
   screen's top/bottom edge in BOTH visible and chrome-faded states (only
   opacity changes — see the shared #magazineControls.chrome-faded rule
   below in this file), a tap/touchstart landing on either element still
   reveals them even when nearly invisible — this is what "touch the very
   top or very bottom of the screen to bring the controls back" actually
   reduces to; no separate edge-hit-zone element is needed (an earlier
   version also had an always-visible corner "peek" button as a fallback,
   removed at the user's request — it sat directly over the top-left
   library-home link and blocked clicks to it while faded). Desktop
   mouse-near-the-browser-chrome reveal is wired in magazine.js. */
body[data-mag-chrome="overlay"] #magazineReaderView {
  position: relative;
}
body[data-mag-chrome="overlay"] .mag-flipbook-stage {
  position: absolute;
  inset: 0;
  padding: 0;
}
body[data-mag-chrome="overlay"] #magazineControls {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0));
  border-bottom: none;
  padding-bottom: 34px; /* taller falloff so the gradient reads as a scrim, not a hard edge */
}
body[data-mag-chrome="overlay"] #magazineControls .icon-nav {
  color: #fff;
}
body[data-mag-chrome="overlay"] #magToolbarTitle * {
  /* !important: .tbar-title-bn/.tbar-title-rom/.tbar-title-en (whichever
     the book-title markup reuse resolved to) each set their own text
     color in styles.css — this is a deliberate blanket theme override for
     this one mode, same precedent as [hidden]'s !important in styles.css,
     not a specificity fight worth chasing per fallback class. */
  color: #fff !important;
}
body[data-mag-chrome="overlay"] #magFooter {
  z-index: 30;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
  border-top: none;
  padding-top: 34px;
}
body[data-mag-chrome="overlay"] #magFooter .footer-page-btn {
  color: #fff;
}
body[data-mag-chrome="overlay"] #magFooter .footer-page-btn:hover:not(:disabled) {
  color: #fff;
  background: rgba(255,255,255,0.18);
}
body[data-mag-chrome="overlay"] #magFooterPage {
  color: #fff;
}
body[data-mag-chrome="overlay"] #magProgressSlider::-webkit-slider-runnable-track { background: rgba(255,255,255,0.35); }
body[data-mag-chrome="overlay"] #magProgressSlider::-moz-range-track { background: rgba(255,255,255,0.35); }
/* Nudge the "Aa"/TOC-menu/linked-book hint up off the true bottom edge in
   overlay mode so it doesn't sit directly under the footer bar when the
   footer is visible. */
body[data-mag-chrome="overlay"] .mag-read-hint,
body[data-mag-chrome="overlay"] .mag-toc-hint,
body[data-mag-chrome="overlay"] .mag-linked-hint {
  bottom: 90px;
}

/* ── Flipbook stage ───────────────────────────────────────── */
.mag-flipbook-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  padding: 4px 4px 78px; /* bottom clears the fixed footer, same pattern as .reading-col */
  box-sizing: border-box;
}

.mag-page-viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: #e9e4d8;
  cursor: pointer;
}
/* Divider between the two facing pages of a spread, echoing #storyRight's
   border-left in the book reader's two-pane layout. */
.mag-page-viewport + .mag-page-viewport {
  border-left: 1px solid #cfc6b6;
}

.mag-page-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
  opacity: 0;
  transition: opacity 220ms ease;
}
.mag-page-img.loaded { opacity: 1; }

/* ── "Tap to read" / "Open TOC" / "Read the full book" hint badges — same
   corner treatment, different glyph. A page is never more than one of
   article/toc/linked at once, so at most one of these ever shows on a
   given pane. ── */
.mag-read-hint,
.mag-toc-hint,
.mag-linked-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #2b6777;
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
  font-family: Georgia, serif;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mag-read-hint:hover,
.mag-toc-hint:hover,
.mag-linked-hint:hover {
  background: #1f4d59;
}
/* The left pane's corner hint sits on the OUTER edge of the spread (the
   page's own left margin), not the right — right-aligning it there would
   put it at the inner gutter, right where a two-page spread's text runs
   closest to the shared center, and it would routinely land on top of
   printed text. The right pane's own right edge is already the spread's
   outer edge, so it keeps the base rule unchanged. On mobile (single pane,
   only the L viewport is ever shown) this also hugs the page's own left
   margin rather than its right. */
#magReadHintL,
#magTocHintL,
#magLinkedHintL {
  left: 12px;
  right: auto;
}
/* The hamburger-menu glyph is a solid shape (fill-based); the book glyph
   is drawn as an outline (stroke-based, fill:none on its own paths) so it
   reads as a book rather than a solid blob at this size - only the
   hamburger needs the currentColor fill forced on. */
.mag-toc-hint svg {
  fill: currentColor;
}
.mag-linked-hint svg {
  stroke: currentColor;
}

/* Clickable region over just the printed TOC block on a kind:"toc" page
   (positioned/sized in JS from that page's meta.json tocRect — see
   positionTocRect() in magazine.js). Deliberately invisible: the hint
   badge above is the only visual affordance, so this doesn't look like a
   crop mark drawn over the scan. Sits below the hint badge's z-index so
   the badge itself remains independently clickable. */
.mag-toc-rect {
  position: absolute;
  z-index: 3;
  cursor: pointer;
}

/* A page shared between two TOC entries (see meta.json's per-page `regions`
   and updateMagSplitRegions() in magazine.js) — each region gets one
   invisible clickable rect, positioned/sized in JS same as .mag-toc-rect,
   plus its own small "Aa" hint (.mag-read-hint's own look, reused) placed
   at that region's own corner instead of the viewport's. The container
   itself never intercepts clicks outside the rects/hints it creates. */
.mag-split-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mag-split-region {
  position: absolute;
  z-index: 3;
  cursor: pointer;
  pointer-events: auto;
}
/* Smaller than the standard 34px .mag-read-hint circle — a shared page's
   regions are half-columns, not full pages, and column margins are
   routinely too narrow for the full-size badge to sit in without touching
   text on either side (see HINT_SIZE in updateMagSplitRegions, magazine.js,
   which this must stay in sync with). */
.mag-split-region-hint {
  position: absolute;
  right: auto;
  bottom: auto;
  width: 22px;
  height: 22px;
  font-size: 0.65em;
  pointer-events: auto;
}

/* ── Magazine progress slider (footer) — simplified restyle of
   #progressSlider's look, scoped to this id since that rule is ID-bound.
   Shared between flipbook (magazine page numbers) and article (that
   article's own page count) modes — see setMagFooterMode() in magazine.js. */
#magProgressSlider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
#magProgressSlider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #e0d6ca; }
#magProgressSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #2b6777; cursor: pointer; margin-top: -6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
}
#magProgressSlider::-moz-range-track { height: 6px; border-radius: 3px; background: #e0d6ca; }
#magProgressSlider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #2b6777; border: none; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
}

/* ── TOC modal extras (base modal/list styling reused from styles.css) ── */
/* styles.css's `.chapter-list-content .toc-list { overflow-y: auto }` was
   written for the book chapter-list modal, where the single <ol> IS the
   flex child of .chapter-list-content — overflow-y:auto there exempts
   that element from flexbox's automatic min-size floor (CSS Flexbox §4.5:
   an item's automatic min-size only shrinks below its content size when
   its overflow computes to something other than visible), so it can
   shrink to fit and scroll internally. The magazine TOC instead groups
   entries into one <ol class="toc-list"> PER SECTION, all wrapped inside
   #magazineTocItems — so #magazineTocItems, not any individual .toc-list,
   is the actual flex child, and it had no overflow rule of its own
   (default overflow:visible). Per that same automatic-min-size rule, it
   never shrinks below its full content height, so a long TOC (this app's
   editions regularly have 30+ entries) simply pushes rows off the bottom
   of the fixed-position modal — invisible and unreachable, no scrollbar,
   since fixed-position content clipped by the viewport can't be scrolled
   into view. Giving #magazineTocItems its own flex/min-height/overflow
   here (rather than editing the shared .toc-list rule, which the book
   modal still depends on as-is) makes IT the scrollable region instead. */
.chapter-list-content #magazineTocItems {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.mag-toc-section {
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #999;
  margin: 14px 6px 2px;
}
.mag-toc-section:first-child { margin-top: 2px; }
.mag-toc-author { font-weight: 400; color: #888; font-size: 0.85em; }
.mag-toc-readable {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72em;
  font-weight: 700;
  color: #2b6777;
  background: #eef6f7;
  border-radius: 5px;
  padding: 1px 6px;
}
/* Same book-outline glyph AND same teal-on-white coloring as that page's
   own corner hint (.mag-linked-hint — background #2b6777, white glyph) so
   the TOC previews what tapping the page will do, rather than looking like
   a differently-branded badge. Distinguished from .mag-toc-readable ("Aa")
   by glyph, not by color — this row leaves the magazine reader entirely
   for the book reader once the reader taps through on the page itself. */
.mag-toc-linked {
  margin-left: auto;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #2b6777;
  border-radius: 5px;
}
.mag-toc-linked svg {
  stroke: currentColor;
}

/* ── Article-mode header back button: a live page thumbnail ─────────
   Replaces the plain chevron icon-nav buttons use elsewhere — the button
   IS the page image (updateArticleThumb() in magazine.js swaps its src as
   the reader pages through the article), so it reads as "here's the page
   you're on, tap to go there" rather than a generic back arrow. */
.mag-back-thumb {
  padding: 0 !important;
  width: 26px;
  height: 34px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  flex-shrink: 0;
}
.mag-back-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Article text popup ──────────────────────────────────────
   Sits inside #magazineReaderView's flex column as a sibling of
   .mag-flipbook-stage (toggled via [hidden]), NOT a fixed full-viewport
   overlay — this is what lets the shared #magazineControls/#magFooter
   above and below stay visible automatically, with no z-index layering
   needed. Two independently-paginated panes side by side on desktop
   (#magazineArticleBody + #magazineArticleBodyRight), mirroring #story/
   #storyRight in styles.css; one pane fills the width on mobile. */
.mag-article-body-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  background: #faf7f2;
  padding-bottom: 78px; /* clears the fixed footer, same as .mag-flipbook-stage */
  box-sizing: border-box;
}
.mag-article-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 20px 40px;
  box-sizing: border-box;
  font-family: 'Noto Sans Bengali', 'Nirmala UI', sans-serif;
  font-size: var(--text-size, 1.25em);
  line-height: 1.9;
}
.mag-article-body p { margin: 0 0 1em; }
/* Leaf per-word span used by magazine.js's word-level article pagination
   (see buildWordSpannedBlocks) — inline-block keeps each word's own
   getBoundingClientRect() reliable for the last-visible-leaf overflow
   check, same reasoning as styles.css's .plain-word. */
.mag-word { display: inline-block; }
/* Verse/poem block (source.md `| ` line-block convention — see
   parseVerseLines in app.js, rendered via renderMdBlockHtml in
   magazine.js). Each printed line becomes its own block-level child so a
   plain \n (which HTML would otherwise collapse to a single space) still
   breaks the line. Centered, not left-aligned: this magazine consistently
   typesets its ছড়া (verse) content centered on the page, distinct from its
   left-aligned prose — see the CLAUDE.md Content model note on why this is
   keyed off block style (verse vs normal), not a per-page override. */
.mag-verse { text-align: center; }
.mag-verse-line { display: block; }
/* Sub-section header inside a multi-feature article (a source.md `#` line
   — see renderMdBlockHtml/splitMdBlocks) — e.g. dhadha_moja_rohosyo's
   "শব্দ-সন্ধান"/"ধাঁধা"/"মজার খেলা"/"হাসিখুশি" etc, one TOC entry gluing
   several distinct puzzle-page features together. Mirrors styles.css's
   .par-heading (book reader) — bold + centered, same visual role. */
.mag-heading { font-size: 1.1em; font-weight: 800; text-align: center; margin: 1.4em 0 0.6em; }
/* A `>`-prefixed block — centered, not bold (distinct from .mag-heading). */
.mag-center { text-align: center; font-style: italic; }
/* Article title + author heading, injected once at the top of the
   article's first page (see renderBlockRange) — mirrors the book
   reader's .par-segtitle (bigger/bold title) with a smaller byline
   line beneath, same as a collection book's story heading. */
.mag-article-heading { text-align: center; margin: 0 0 1.1em; }
.mag-article-title { font-size: 1.5em; font-weight: 800; line-height: 1.3; margin: 0 0 0.3em; }
.mag-article-byline { font-size: 0.8em; font-weight: 400; opacity: 0.7; margin: 0; }
.mag-article-body + .mag-article-body {
  border-left: 1px solid #e6e0d6;
}

@media (max-width: 768px) {
  .mag-article-body { padding: 16px 20px; }
  .mag-flipbook-stage { padding-bottom: 92px; }
  .mag-article-body-wrap { padding-bottom: 92px; }
  /* One page at a time on mobile — same reasoning as #storyRight in
     styles.css: magPagesPerView() is 1 here, so the JS side always leaves
     this pane's content empty, but without this it would still occupy
     half the flex row as a blank column. */
  #magazineArticleBodyRight { display: none; }

  /* #magFooter deliberately keeps the base, non-overlaid two-row STACKED
     layout on mobile (see styles.css's mobile block, scoped to
     #readerFooter only) — its info row sits in normal flow below the nav
     row, never absolutely overlaid on top of it. That overlay trick only
     works for the book reader, where #footerPage/#footerProgress are two
     short labels hugging the two edges; #magFooterPage is a single, often
     long "Title — Author · Page X of Y" string (updateArticleFooter in
     magazine.js) that would otherwise pack against the left edge, straight
     through the centered prev/slider/next row above it. Centered and
     ellipsis-clamped here instead of the base rule's space-between/italic
     styling, which assumes two short corner labels, not one long centered
     one. */
  #magFooter .footer-info-row {
    justify-content: center;
    font-style: normal;
  }
  #magFooterPage {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 11px;
  }
}

/* ── Article filter panel + filtered article list ───────────────────────
   #magFilterPanel reuses styles.css's .filter-panel/.filter-group/.apply/
   .clear classes verbatim (see index.html) — this file only adds the one
   thing styles.css's .filter-group has no rule for (a text input; it only
   styles <select>), plus the article-list result view itself, which has no
   precedent in either file. */
#magFilterPanel .filter-group input[type="text"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #e6e0d6;
  border-radius: 6px;
  font-size: 0.88em;
  background: #faf7f2;
  box-sizing: border-box;
}

/* Inert by default — only meaningful on mobile (see the media query
   below), where #magFilterPanel becomes a small centered popup instead of
   Books/Stories' plain inline dropdown. Toggled unconditionally by
   magazine.js regardless of viewport (see openMagFilterPanel/
   closeMagFilterPanel) — this `display:none` is what keeps it invisible
   and non-blocking on desktop even while "shown". */
#magFilterPanelBackdrop { display: none; }

@media (max-width: 768px) {
  #magFilterPanelBackdrop:not([hidden]) {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 150; /* above the mobile .filter-panel's own z-index:95, below toast(200)/announce(300) */
  }

  /* Diverges from Books/Stories' shared .filter-panel mobile rule
     (position:fixed;inset:0 — a full-screen sheet) on purpose: this panel
     only has 4 short fields, so a full screen reads as mostly empty space.
     A small centered popup over a dimmed backdrop (#magFilterPanelBackdrop)
     fits the content instead. */
  #magFilterPanel {
    inset: auto;
    margin: 0;
    box-sizing: border-box;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 380px);
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 14px;
    padding: 20px 20px 16px;
    grid-template-columns: 1fr;
    gap: 12px; /* was 18px via the shared .filter-panel rule — the biggest
                  single contributor to "too much vertical space" between
                  4 short, single-line fields */
    z-index: 151;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  }
  #magFilterPanel .filter-group h4 { margin-bottom: 4px; }
  #magFilterPanel .filter-actions { margin-top: 2px; }
}

/* Reuses .book-card's grid container (see styles.css) via the same
   #magazinesView element — renderMagazineArticlesList swaps its className
   between 'books-grid' and 'mag-article-list' rather than introducing a
   second element. Full width of .home-main (no max-width/centering) —
   matches the Stories tab's own row width, not a narrower column; each row
   is a horizontal "cover + spread-out info" card, the same layout
   .story-row-card uses for Stories' mobile list, kept here as its own
   local classes since this view has no desktop/mobile split of its own. */
.mag-article-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mag-article-list-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 16px;
  border: 1px solid #e6e0d6;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.mag-article-list-row:hover { border-color: #2b6777; }
.mag-article-list-thumb {
  width: 50px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
/* Title/sub on the left, tags in their own column pinned top-right — uses
   the wide empty space a single-line title+sub otherwise leaves on the
   right, and saves a whole row of vertical height versus stacking tags
   underneath. Falls back to the previous stacked layout on mobile (below),
   where there's no spare horizontal room for a separate column. */
.mag-article-list-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mag-article-list-main { flex: 1; min-width: 0; }
.mag-article-list-title a {
  font-weight: 600;
  color: #2b6777;
  text-decoration: none;
}
.mag-article-list-title a:hover { text-decoration: underline; }
/* One combined line (magazine — issue · author) rather than a separate
   line per field — spreads the row's info across its full width instead
   of stacking it, so each row stays short even with a cover to its left. */
.mag-article-list-sub { font-size: 0.8em; color: #888; margin-top: 2px; }
.mag-article-list-tags {
  flex-shrink: 0;
  max-width: 45%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
@media (max-width: 768px) {
  /* No spare horizontal room for a separate tags column on a narrow
     screen — back to stacking tags full-width below the title/sub, same
     as the pre-top-right-column layout. */
  .mag-article-list-body { flex-direction: column; }
  .mag-article-list-tags { max-width: 100%; justify-content: flex-start; margin-top: 6px; }
}