/* =========================================================================
   Novel reader — the prose counterpart to reader.css.

   reader.css is about IMAGES: strip vs paged, page numbering, zoom, gaps.
   None of that helps with text, so this file is entirely typography and
   reading behaviour. Every control below exists because novel readers ask
   for it (Royal Road / ScribbleHub / WebNovel conventions):

     theme        light | sepia | dark | black   sepia is the most-requested
                                                 long-session option; black is
                                                 true #000 for OLED at night
     typeface     serif | sans | readable
     size         14-28px      line height 1.3-2.4
     paragraph    0-50px       (0 = one continuous block; a real preference)
     indent       none | author | force          normalises inconsistent
                                                 source formatting
     measure      520-1100px   alignment left | justify
     dim          0-70%        darkens below the screen's own minimum

   The chrome (reader bar, chapter picker, report modal) is styled by
   reader.css, which loads FIRST on every chapter page including prose ones.
   This file only owns the page itself and the settings drawer.
   ========================================================================= */

:root {
  --rd-size: 19px;
  --rd-lh: 1.85;
  --rd-para: 18px;
  --rd-width: 760px;
  --rd-indent: 0;
  --rd-align: left;
  --rd-font: ui-serif, Georgia, "Times New Roman", serif;
}

/* Reading themes repaint only the page, never the chrome: the reader should
   still be able to find the app around the text after switching to Light. */
body.nv-theme-dark  { --pg: #12101a; --pg-text: #e9e5f3; --pg-muted: #9990ad; --pg-rule: rgba(255,255,255,.13); }
body.nv-theme-black { --pg: #000000; --pg-text: #d9d5e2; --pg-muted: #8b8398; --pg-rule: rgba(255,255,255,.10); }
body.nv-theme-sepia { --pg: #f4ecd8; --pg-text: #3a3226; --pg-muted: #7c6f57; --pg-rule: rgba(0,0,0,.16); }
body.nv-theme-light { --pg: #ffffff; --pg-text: #1c1a22; --pg-muted: #6b6577; --pg-rule: rgba(0,0,0,.14); }

/* ---------- the page ---------- */
.nv-sheet {
  background: var(--pg, #12101a);
  color: var(--pg-text, #e9e5f3);
  max-width: var(--rd-width);
  margin: 22px auto 0;
  padding: 42px 46px 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius, 16px);
  transition: max-width .18s ease, background .2s ease, color .2s ease;
}

.nv-head {
  border-bottom: 1px solid var(--pg-rule);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.nv-head .nv-series {
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 800; color: var(--pg-muted);
}
.nv-head h1 {
  margin: 6px 0 10px; font-size: 26px; line-height: 1.25;
  letter-spacing: -.01em; font-family: var(--rd-font); color: var(--pg-text);
}
.nv-facts { display: flex; gap: 14px; flex-wrap: wrap; color: var(--pg-muted); font-size: 12.5px; }
.nv-facts b { color: var(--pg-text); font-weight: 650; }

/* The prose itself. Every declaration here is reader-controlled, which is why
   they are all variables rather than values. */
.nv-prose {
  font-family: var(--rd-font);
  font-size: var(--rd-size);
  line-height: var(--rd-lh);
  text-align: var(--rd-align);
  hyphens: auto;
  word-wrap: break-word;
}
.nv-prose p { margin: 0 0 var(--rd-para); text-indent: var(--rd-indent); }
.nv-prose p:first-of-type { text-indent: 0; }
.nv-prose h2, .nv-prose h3 { font-family: var(--rd-font); line-height: 1.3; margin: 1.6em 0 .6em; }
.nv-prose blockquote {
  margin: 1.4em 0; padding: .2em 0 .2em 1.1em;
  border-left: 3px solid var(--pg-rule); color: var(--pg-muted); font-style: italic;
}
.nv-prose hr { border: none; border-top: 1px solid var(--pg-rule); margin: 2em 0; }
/* Scene breaks: many sources ship these as a bare "***" paragraph. */
.nv-prose p.nv-sep { text-align: center; letter-spacing: .7em; color: var(--pg-muted);
  margin: 1.8em 0; text-indent: 0; }
/* Images can still appear inside prose (maps, illustrations, author notes). */
.nv-prose img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 1.4em auto; }

/* Read-aloud: the paragraph currently being spoken. */
.nv-prose p.is-speaking {
  background: rgba(240,169,43,.20);
  border-radius: 6px;
  box-shadow: 0 0 0 5px rgba(240,169,43,.20);
}

/* ---------- progress + dim ---------- */
#nvProgress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transition: width .08s linear;
}
#nvDim {
  position: fixed; inset: 0; background: #000; opacity: 0;
  pointer-events: none; z-index: 45;
}

/* Immersive mode hides the chrome so only the page is left. */
body.nv-immersive .reader-bar { transform: translateY(-100%); }
.reader-bar { transition: transform .25s ease; }

/* ---------- settings drawer ---------- */
.nv-scrim {
  position: fixed; inset: 0; background: rgba(5,4,9,.6); backdrop-filter: blur(3px);
  z-index: 70; opacity: 0; pointer-events: none; transition: opacity .18s;
}
.nv-scrim.is-open { opacity: 1; pointer-events: auto; }
.nv-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 390px; max-width: 92vw; z-index: 80;
  background: var(--surface-solid); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.nv-drawer.is-open { transform: none; }
.nv-dhead { padding: 17px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.nv-dhead h2 { margin: 0; font-size: 16px; }
.nv-dhead button { margin-left: auto; background: none; border: none; color: var(--muted);
  font-size: 20px; cursor: pointer; line-height: 1; }
.nv-dbody { padding: 4px 20px 26px; overflow-y: auto; }

.nv-grp { padding: 15px 0; border-bottom: 1px solid var(--line); }
.nv-grp:last-of-type { border-bottom: none; }
.nv-lab { display: flex; align-items: baseline; margin-bottom: 9px; }
.nv-lab span { font-size: 13px; font-weight: 650; }
.nv-lab i { margin-left: auto; font-style: normal; color: var(--accent-light);
  font-size: 12.5px; font-variant-numeric: tabular-nums; }

.nv-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.nv-seg button {
  flex: 1; min-width: 60px; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); border-radius: 9px; padding: 9px 6px; font: inherit;
  font-size: 12.5px; cursor: pointer; font-weight: 600;
}
.nv-seg button:hover { color: var(--text); }
.nv-seg button.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-light); }
/* Theme buttons show the actual page colour rather than naming it. */
.nv-seg.nv-themes button { display: flex; align-items: center; justify-content: center; gap: 7px; }
.nv-sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.28); }

.nv-drawer input[type=range] { width: 100%; accent-color: var(--accent); margin: 2px 0 0; }
.nv-hint { color: var(--muted-2); font-size: 11.5px; margin-top: 7px; line-height: 1.5; }
.nv-hint b { color: var(--muted); }
.nv-reset {
  width: 100%; margin-top: 14px; background: transparent; border: 1px solid var(--line);
  color: var(--muted); border-radius: 10px; padding: 10px; font: inherit; font-size: 13px; cursor: pointer;
}
.nv-reset:hover { border-color: var(--hot); color: #ffb3c2; }

/* ---------- bottom chapter nav ---------- */
.nv-nav { max-width: var(--rd-width); margin: 18px auto 70px; display: flex; gap: 12px; }
/* DIRECT children only. Without the >, this also matched the .nv-lbl and .nv-t
   spans INSIDE each card, giving every label its own border and padding - a box
   inside a box inside a box. */
.nv-nav > a, .nv-nav > span {
  flex: 1; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius, 16px); padding: 14px 18px; display: block;
  min-width: 0;
}
.nv-nav .nv-lbl, .nv-nav .nv-t { display: block; background: none; border: none; padding: 0; }
.nv-nav a:hover { border-color: var(--accent); }
.nv-nav .is-disabled { opacity: .4; }
.nv-nav .nv-lbl { font-size: 11.5px; color: var(--muted-2); text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700; }
.nv-nav .nv-t { font-size: 13.5px; font-weight: 600; margin-top: 3px; color: var(--text); }
.nv-nav .nv-next { text-align: right; }

@media (max-width: 720px) {
  .nv-sheet { padding: 26px 18px 42px; margin-top: 12px; border-radius: 12px; }
  .nv-head h1 { font-size: 21px; }
  .nv-nav { flex-direction: column; margin-bottom: 84px; }
}

/* ---------- resume prompt ----------
   Offered rather than applied: silently moving a reader down the page is more
   disorienting than starting at the top. */
.nv-resume {
  max-width: var(--rd-width); margin: 14px auto -6px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid rgba(240,169,43,.34);
  border-radius: var(--radius-sm, 10px); padding: 11px 15px;
  color: var(--accent-light); font-size: 13.5px;
}
.nv-resume b { font-weight: 750; }
.nv-resume button {
  margin-left: auto; background: var(--accent); color: #20160a; border: none;
  border-radius: 99px; padding: 7px 15px; font: inherit; font-size: 12.5px;
  font-weight: 700; cursor: pointer;
}
.nv-resume button + button { margin-left: 0; background: transparent;
  color: var(--muted); border: 1px solid var(--line); font-weight: 600; }