/* ============================================================
   reader.css — top bar, progress bar, book column, focus mode,
   chapter navigation
   ============================================================ */

/* Sticky top bar */
#top{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:5;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
#bar{display:flex;align-items:center;gap:6px;padding:8px 12px}
#bar .t{flex:1;font:500 15px Fraunces,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.ib{width:40px;height:40px;border-radius:12px;font-size:18px}
.ib:hover{background:var(--acc2)}

/* Thin reading-progress bar under the top bar */
#prog{height:3px;background:var(--line)}
#prog i{display:block;height:100%;width:0;background:var(--acc);transition:width .15s}

/* The book column. touch-action keeps vertical scroll + pinch zoom native
   and hands horizontal drags to ui.js's swipe-to-flip-chapters gesture. */
#book{
  max-width:680px;margin:0 auto;padding:34px 22px 120px;
  font-family:Newsreader,Georgia,serif;font-size:var(--fs,20px);line-height:1.7;
  touch-action:pan-y pinch-zoom;
}

/* Slide-in when a chapter is flipped in by swipe */
#book.flip-l{animation:flipL .22s ease}
#book.flip-r{animation:flipR .22s ease}
@keyframes flipL{from{opacity:0;transform:translateX(26px)}}
@keyframes flipR{from{opacity:0;transform:translateX(-26px)}}
:root[data-font="sans"] #book{font-family:Inter,system-ui,sans-serif;line-height:1.65}

/* Chapter title + meta line injected by render.js */
#book .ch{font:700 clamp(34px,9vw,52px)/1.08 Fraunces,Georgia,serif;letter-spacing:-.02em;margin:0 0 6px}
#book .meta{color:var(--mute);font:400 14px Inter,sans-serif;margin-bottom:6px;padding-bottom:0;border-bottom:0}
#book .live{color:var(--acc);font:600 12.5px Inter,sans-serif;margin:0 0 30px;padding-bottom:18px;border-bottom:1px solid var(--line);min-height:16px}

/* Headings detected by structure.js */
#book h2{font:700 1.5em/1.2 Fraunces,serif;margin:2.2em 0 .5em;padding-left:14px;border-left:4px solid var(--acc)}
#book h3{font:600 1.15em Fraunces,serif;margin:1.8em 0 .3em;color:var(--acc)}

/* Paragraphs; .first gets a drop cap via ::first-letter */
#book p{margin:0 0 1.1em;padding:2px 6px;margin-left:-6px;margin-right:-6px;border-radius:8px;transition:opacity .25s,background .25s}
#book .first::first-letter{float:left;font:700 3.4em/.72 Fraunces,serif;color:var(--acc);padding:.06em .09em 0 0}

/* Focus mode: dim everything except the tapped paragraph/list item */
#book.focus p:not(.on),#book.focus li:not(.on){opacity:.35}

/* Prev / Next chapter buttons at the end of each chapter */
#nav{display:flex;gap:10px;margin-top:48px}
#nav button{flex:1;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--card);font:600 15px Inter}
#nav button.p{background:var(--acc);color:var(--bg);border-color:var(--acc)}
#nav button:disabled{opacity:.35}