/* ============================================================
   SERIES / E-BOOK — book landing page (single-wn_series.php)
   and the immersive reader shell it opens.

   Reuses the site's existing --ink/--gold/--paper/--line/--clay
   variables from style.css (including its dark-theme and
   data-font-size overrides) rather than redefining any color or
   size token here — this file only adds the new component shapes.
   ============================================================ */

/* ---------------- Book landing page ---------------- */
.bl-cover-wrap{
  display:flex; gap:28px; align-items:flex-start; margin:26px 0 34px;
}
.bl-cover{
  width:150px; min-width:150px; aspect-ratio:2/3; border-radius:10px;
  background:linear-gradient(160deg,#1b1310,#2b1c14 60%, #120A08);
  box-shadow:var(--shadow-pop);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:16px; position:relative; overflow:hidden;
}
.bl-cover .tag{
  font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold); border-radius:999px; padding:3px 9px; margin-bottom:14px;
  font-family:'Work Sans',sans-serif; font-weight:600;
}
.bl-cover h3{ color:var(--paper); font-family:'Fraunces',serif; font-size:1.05rem; line-height:1.35; font-weight:700; margin:0; }
.bl-cover .author{ color:#C9BFAE; font-size:.72rem; margin-top:10px; font-family:'Work Sans',sans-serif; }

.bl-meta{ flex:1; min-width:0; padding-top:4px; }
.bl-eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--clay-deep); margin-bottom:8px; display:flex; align-items:center; gap:8px;
}
.bl-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--leaf); display:inline-block; }
.bl-meta h1{ font-size:1.9rem; line-height:1.15; margin:0 0 8px; }
.bl-byline{ font-size:.9rem; color:var(--ink-soft); margin-bottom:14px; }
.bl-byline a{ color:var(--clay-deep); font-weight:600; text-decoration:none; }
.bl-blurb{ font-size:.94rem; line-height:1.6; color:var(--ink-soft); margin-bottom:18px; }
.bl-blurb p{ margin:0 0 10px; }
.bl-stats{ display:flex; gap:18px; font-size:.82rem; color:var(--ink-soft); margin-bottom:20px; flex-wrap:wrap; }
.bl-stats strong{ color:var(--ink); }
.bl-cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.bl-cta-row .btn-outline{ background:transparent; border:2px solid var(--ink); color:var(--ink); }

.bl-section-title{
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin:40px 0 14px;
}
.bl-chapter-list{ display:flex; flex-direction:column; gap:2px; }
.bl-chapter{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px;
  cursor:pointer; transition:background .15s;
}
.bl-chapter:hover{ background:var(--paper-deep); }
.bl-chapter-num{
  width:34px; height:34px; border-radius:50%; background:var(--paper-deep); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:700; flex-shrink:0;
}
.bl-chapter.read .bl-chapter-num{ background:var(--leaf); border-color:var(--leaf); color:#fff; }
.bl-chapter-body{ flex:1; min-width:0; }
.bl-chapter-title{ font-weight:600; font-size:.94rem; margin-bottom:2px; }
.bl-chapter-sub{ font-size:.76rem; color:var(--ink-soft); }
.bl-chapter-icon{ font-size:1rem; color:var(--ink-soft); flex-shrink:0; }
.bl-chapter.locked .bl-chapter-title{ color:var(--ink-soft); }
.bl-frontmatter-row{ opacity:.85; }
.bl-frontmatter-mark{ font-family:'Fraunces',serif; font-size:1rem; color:var(--ink-soft); background:transparent; border-style:dashed; }

@media (max-width:640px){
  .bl-cover-wrap{ flex-direction:column; align-items:center; text-align:center; }
  .bl-meta{ text-align:center; }
  .bl-stats,.bl-cta-row{ justify-content:center; }
}

/* ---------------- Reader shell ---------------- */
#reader{
  position:fixed; inset:0; background:var(--paper); z-index:9999;
  display:none; flex-direction:column;
}
#reader.open{ display:flex; }

.reader-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; padding-top:calc(14px + env(safe-area-inset-top));
  border-bottom:1px solid var(--line); background:var(--paper);
  flex-shrink:0; position:relative; z-index:5;
}
.reader-topbar-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.icon-btn{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0; transition:background .15s; border:none; background:none; color:var(--ink); cursor:pointer;
  touch-action:manipulation;
}
.icon-btn:hover{ background:var(--paper-deep); }
.reader-chapter-title{
  font-size:.86rem; font-weight:600; color:var(--ink-soft); font-family:'Work Sans',sans-serif;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reader-topbar-right{ display:flex; gap:6px; }

.reader-body{
  flex:1; overflow-y:auto; padding:40px 22px 150px; -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain; touch-action:pan-y;
}
.reader-content{ max-width:640px; margin:0 auto; }

/* Two-column reading layout — a preference, not automatic; applied
   only when .reader-two-columns is toggled on AND the viewport is
   wide enough to make two columns actually readable (a phone-width
   screen forces single-column regardless of the saved preference, via
   the media query below, rather than rendering two illegibly-narrow
   columns just because that's what was last saved on a laptop).
   Unconstrained column-count with no fixed height is deliberate: the
   browser balances both columns' height on its own and the page
   simply scrolls further to reach the second column — no pagination
   logic, no JS involved, just a plain CSS layout change. Scroll mode
   only — page mode (below) is always a single column. */
@media (min-width:820px){
  .reader-content.reader-two-columns{
    max-width:980px; column-count:2; column-gap:56px;
  }
  .reader-content.reader-two-columns p{ break-inside:avoid; }
  .reader-content.reader-two-columns h2,
  .reader-content.reader-two-columns .chap-eyebrow{ column-span:all; }
}

/* Page-by-page reading mode — a preference toggle. contentEl gets NO
   special width/padding/column CSS here: series-reader.js slices the
   chapter into pages by measured height and swaps in one page's
   markup at a time, using the exact same .reader-content styling as
   scroll mode above, which is also what keeps paginated text from
   running to the screen edge — there's no separate box whose
   dimensions need to match a scroll-step calculation any more.
   overflow:hidden here is just a safety margin against a page
   slightly overrunning its measured height by a pixel or two. */
.reader-body.reader-body-paginated{ overflow:hidden; touch-action:none; }
.page-indicator{
  font-size:.76rem; font-weight:600; color:var(--ink-soft); font-family:'Work Sans',sans-serif;
  margin-left:10px; white-space:nowrap;
}

.reader-content .chap-eyebrow{
  font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--clay-deep);
  text-align:center; margin-bottom:8px; font-family:'Work Sans',sans-serif;
}
.reader-content h2{ font-family:'Fraunces',serif; font-size:1.6rem; text-align:center; margin:0 0 34px; line-height:1.3; }
.reader-content p{
  font-family:'Fraunces','Noto Serif Devanagari',serif; font-size:1.14rem; line-height:1.85;
  color:var(--ink); margin:0 0 22px; letter-spacing:.005em;
}
[data-font-size="small"] .reader-content p{ font-size:1rem; }
[data-font-size="large"] .reader-content p{ font-size:1.28rem; }
[data-font-size="larger"] .reader-content p{ font-size:1.42rem; }

/* Fixed "Powered by WritingNepal" notice on the copyright page — never
   part of the writer's own editable text, always this exact style, so
   it reads clearly as a platform notice rather than the writer's own
   words. Overrides the general .reader-content p rules above (smaller,
   muted, no font-size-preference scaling) rather than inheriting them. */
.reader-content p.wn-powered-by{
  font-family:'Work Sans',sans-serif !important; font-size:.78rem !important; color:var(--ink-soft);
  text-align:center; margin-top:32px !important; letter-spacing:.02em;
}

.reader-progress-wrap{
  position:absolute; bottom:0; left:0; right:0; padding:10px 18px 14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--paper) 60%, transparent);
  display:flex; flex-direction:column; gap:6px; pointer-events:none;
}
.reader-progress-track{ height:4px; background:var(--line); border-radius:99px; overflow:hidden; }
.reader-progress-fill{ height:100%; background:var(--gold); border-radius:99px; transition:width .15s linear; }
.reader-progress-labels{
  display:flex; justify-content:space-between; font-size:.72rem; color:var(--ink-soft); font-weight:600;
  font-family:'Work Sans',sans-serif;
}

.reader-next-bar{ display:flex; justify-content:center; margin-top:36px; }
.next-chapter-btn{
  background:var(--ink); color:var(--gold); padding:15px 30px; border-radius:99px;
  font-weight:700; font-size:.92rem; display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-pop); transition:transform .18s var(--bounce); border:none; cursor:pointer;
  font-family:'Work Sans',sans-serif;
}
.next-chapter-btn:hover{ transform:translateY(-2px) scale(1.02); }

/* ---------------- Chapter drawer ---------------- */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(18,10,8,.45); z-index:10050;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.drawer-overlay.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; bottom:0; left:0; width:min(320px,84vw); background:var(--paper);
  z-index:10060; transform:translateX(-100%); transition:transform .3s var(--bounce);
  display:flex; flex-direction:column; box-shadow:var(--shadow-pop);
}
.drawer.open{ transform:translateX(0); }
.drawer-head{ padding:20px 18px 14px; border-bottom:1px solid var(--line); }
.drawer-head h4{ font-family:'Fraunces',serif; font-size:1.05rem; margin:0 0 4px; }
.drawer-head .sub{ font-size:.78rem; color:var(--ink-soft); font-family:'Work Sans',sans-serif; }
.drawer-list{ overflow-y:auto; flex:1; padding:10px; }
.drawer-list .bl-chapter.current{ background:var(--paper-deep); }
.drawer-list .bl-chapter.current .bl-chapter-title{ color:var(--clay-deep); }

/* ---------------- Settings panel ---------------- */
.settings-panel{
  position:fixed; top:60px; right:16px; background:var(--white); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-pop); padding:16px; z-index:10060; width:230px;
  max-width:calc(100vw - 32px);
  opacity:0; transform:translateY(-8px) scale(.97); pointer-events:none; transition:all .18s var(--bounce);
}
.settings-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.settings-row{ margin-bottom:14px; }
.settings-row:last-child{ margin-bottom:0; }
.settings-label{ font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:8px; font-family:'Work Sans',sans-serif; }
.settings-hint{ font-size:.7rem; color:var(--ink-soft); margin:6px 0 0; font-family:'Work Sans',sans-serif; line-height:1.4; }
.seg-control,.fontsize-control{ display:flex; background:var(--paper-deep); border-radius:10px; padding:3px; gap:2px; }
.seg-control button,.fontsize-control button{ flex:1; padding:7px 0; border-radius:8px; font-size:.8rem; font-weight:600; border:none; background:none; color:var(--ink); cursor:pointer; font-family:'Work Sans',sans-serif; }
.fontsize-control button{ font-weight:700; }
.seg-control button.active,.fontsize-control button.active{ background:var(--ink); color:var(--gold); }

/* Two columns never actually applies below 820px (see the media
   query on .reader-two-columns above) — no point showing the choice
   on a phone where picking "2 columns" would silently do nothing. */
@media (max-width:819px){
  .layout-row{ display:none; }
}

/* ---------------- Paywall gate (locked chapter, in-reader) ---------------- */
.paywall-fade{ height:120px; margin-top:-120px; position:relative; background:linear-gradient(to bottom, transparent, var(--paper)); }
.paywall-gate{
  max-width:420px; margin:10px auto 0; text-align:center; background:var(--white);
  border-radius:var(--radius-lg); padding:32px 26px; box-shadow:var(--shadow-pop); font-family:'Work Sans',sans-serif;
}
.paywall-gate .icon{ font-size:2rem; margin-bottom:10px; }
.paywall-gate h3{ font-family:'Fraunces',serif; font-size:1.2rem; margin:0 0 8px; }
.paywall-gate p{ font-size:.88rem; color:var(--ink-soft); line-height:1.5; margin-bottom:18px; }
.paywall-price{ font-family:'Fraunces',serif; font-size:1.6rem; font-weight:700; margin-bottom:16px; }
.paywall-bundle-divider{
  display:flex; align-items:center; gap:12px; margin:20px 0 16px; color:var(--ink-soft);
  font-family:'Work Sans',sans-serif; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.paywall-bundle-divider::before, .paywall-bundle-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.paywall-price .rs{ font-size:1rem; font-weight:600; color:var(--ink-soft); }

/* ---------------- End of book ---------------- */
.end-card{
  max-width:480px; margin:20px auto 0; text-align:center; background:var(--paper-deep);
  border-radius:var(--radius-lg); padding:36px 26px; font-family:'Work Sans',sans-serif;
}
.end-card h3{ font-family:'Fraunces',serif; font-size:1.25rem; margin:0 0 8px; }
.end-card p{ font-size:.9rem; color:var(--ink-soft); margin-bottom:18px; }

/* ---------------- Suspended banner (owner-only preview) ---------------- */
.ebook-suspended-banner{
  background:#FCE4E9; color:var(--rose-deep); font-size:.85rem; font-weight:600;
  padding:12px 16px; border-radius:10px; margin-bottom:18px; font-family:'Work Sans',sans-serif;
}

@media (max-width:640px){
  .reader-content h2{ font-size:1.35rem; }

  /* Bigger tap targets — 38px reads fine on desktop but is tight for a
     thumb; 44px is the generally-recommended minimum comfortable
     touch target size. */
  .icon-btn{ width:44px; height:44px; font-size:1.2rem; }

  /* Less side padding buys back reading width on a narrow screen;
     less top padding since the safe-area inset above already adds
     real space of its own on notched phones. */
  .reader-body{ padding:24px 16px 160px; }

  .drawer-head{ padding-top:calc(20px + env(safe-area-inset-top)); }
  .settings-panel{ top:calc(56px + env(safe-area-inset-top)); right:12px; }

  /* Larger, easier-to-tap rows in the chapter drawer and landing-page
     chapter list — the desktop sizing is workable with a mouse but
     cramped for a thumb scrolling through a long book. */
  .bl-chapter{ padding:16px 14px; }
  .bl-chapter-num{ width:38px; height:38px; font-size:.88rem; }
  .bl-chapter-title{ font-size:1rem; }

  .next-chapter-btn{ width:100%; justify-content:center; padding:16px 20px; }
}