/* ============================================================
   nav.css — reader chrome: top/bottom bar visibility, the
   customizable bottom nav, and the centered chapter sheet.
   Buttons render from S.nav (js/nav.js); labels sit under icons,
   fixed 56px height, safe-area padded, hidden in home/pick mode.

   Bar visibility (Settings → On-screen bars, S.chrome in utils.js):
     html[data-chrome="both"]    top bar + bottom nav
     html[data-chrome="top"]     top bar only — bottom nav hidden
     html[data-chrome="bottom"]  bottom nav only (the default on every
                                 device) — the top bar's buttons are
                                 hidden and the reading-progress line
                                 rides the nav bar's top edge as a
                                 hairline; the bottom nav's Library slot
                                 closes the book
   ============================================================ */

/* Height of the bottom nav bar's button row (safe-area inset adds on top).
   Pinned so sheets, the selection toolbar and the bottom-only progress
   hairline all anchor exactly to the bar's top edge. */
:root{--navh:56px}

/* ---------- Visibility of the chrome bars ---------- */
html[data-chrome="top"] #navb{display:none!important}
html[data-chrome="top"] body.hasnav #book{padding-bottom:120px}

/* Bottom-only reading (the default on every device): the top bar's buttons
   go away, but its progress line stays as a fixed hairline riding the nav
   bar's top edge. #top must drop its backdrop-filter — a filter makes it a
   containing block, which would anchor the fixed hairline to #top instead
   of the viewport. Applies to desktop too: the bottom nav's Library slot
   closes the book, and sheets (z-index 9) still overlay the bar. */
html[data-chrome="bottom"] #top{position:static;border-bottom:0;background:none;backdrop-filter:none}
html[data-chrome="bottom"] #bar{display:none}
html[data-chrome="bottom"] #prog{
  position:fixed;left:0;right:0;z-index:7;
  bottom:calc(var(--navh) + env(safe-area-inset-bottom,0px));
  background:transparent;box-shadow:0 -1px 5px #0001;
}
html[data-chrome="bottom"] #book{scroll-padding-top:12px}

/* ---------- Fluid chrome ----------
   Theme switches cross-fade instead of snapping, and the chrome bars
   glide into place whenever they (re)enter the layout — opening a book
   or switching Both / Top / Bottom in Settings. display toggles can't
   transition, so reveals use keyframes (they restart when an element
   re-enters the layout). All motion is skipped for readers who prefer
   reduced motion. */
@media(prefers-reduced-motion:no-preference){
  body,#top,#navb,.sheet{
    transition:background-color .3s ease,color .3s ease,border-color .3s ease;
  }
  body.hasnav #book{transition:padding-bottom .3s ease}
  #navb:not(.hide){animation:navUp .3s cubic-bezier(.2,.7,.3,1)}
  #bar{animation:barDown .3s cubic-bezier(.2,.7,.3,1)}
  @keyframes navUp{from{transform:translateY(100%)}}
  @keyframes barDown{from{opacity:0;transform:translateY(-14px)}}
}

/* ---------- Bottom navigation bar ---------- */
#navb{
  position:fixed;left:0;right:0;bottom:0;z-index:6;
  height:calc(var(--navh) + env(safe-area-inset-bottom,0px));
  display:flex;justify-content:center;align-items:stretch;
  background:color-mix(in srgb,var(--card) 94%,transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -6px 24px #0002;
}
#navb button{
  flex:0 1 96px;min-width:44px;width:96px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:7px 2px 6px;color:var(--mute);
}
/* Many buttons: shrink evenly instead of overflowing the row */
#navb button:nth-child(n+6){flex-basis:64px;width:64px;min-width:0}
#navb button:nth-child(n+8){flex-basis:52px;width:52px}
#navb button .ni{font-size:19px;line-height:1.1}
#navb button .nl{font:600 10px Inter,sans-serif;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#navb button.on{color:var(--acc)}
#navb button:active{background:var(--acc2)}
#navb.compact button .nl{display:none}
#navb.compact button{padding:9px 2px 8px}
#navb button.pri{color:var(--acc)}
#navb.prem button[data-a="premium"]{color:var(--acc)}

/* The reader column keeps its own bottom clearance so the last lines
   of a chapter are never hidden behind the bar. */
body.hasnav #book{padding-bottom:calc(170px + env(safe-area-inset-bottom,0px))}
@media(pointer:coarse){body.hasnav #book{padding-bottom:calc(122px + env(safe-area-inset-bottom,0px))}}

/* Floating selection toolbar clears the bar too. */
#hbar{bottom:calc(var(--navh) + 16px + env(safe-area-inset-bottom,0px))}

/* Sheets sit above the bottom bar on touch screens; on mouse devices
   they keep the full-sheet feel of sheets.css. */
@media(pointer:coarse){.sheet{bottom:calc(var(--navh) + env(safe-area-inset-bottom,0px))}}

/* ---------- Chapters: centered, scrollable modal card ---------- */
/* Replaces the old full-width bottom sheet: floats mid-screen on every
   size, capped to the viewport so long chapter lists scroll inside. */
.sheet.toc{
  left:50%;right:auto;bottom:auto;top:50%;
  width:min(440px,calc(100vw - 32px));
  max-height:min(560px,calc(100dvh - 96px));
  transform:translate(-50%,-50%);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 24px 70px #0005;
  overscroll-behavior:contain;
  padding-bottom:16px;
}
@media(pointer:coarse){.sheet.toc{bottom:auto}}
.toc h4{position:sticky;top:-20px;margin:-20px -22px 0;padding:18px 22px 12px;
  background:var(--card);border-bottom:1px solid var(--line);z-index:1}
.toc button{display:block;width:100%;text-align:left;padding:12px 4px;border-bottom:1px solid var(--line);font:500 17px Newsreader,serif}
.toc button:last-child{border-bottom:0}
.toc button.cur{color:var(--acc);font-weight:700}

/* ---------- Progress hairline as a chapter scrubber ----------
   Bottom-only mode: the hairline gets a tall invisible hit zone above it
   (taps near the bar edge must not steal nav-button presses), ignores
   vertical scroll while dragging, and fattens to 6px while active. */
html[data-chrome="bottom"] #prog{touch-action:none;cursor:ew-resize}
html[data-chrome="bottom"] #prog::after{content:"";position:absolute;left:0;right:0;top:-14px;height:17px}
#prog{user-select:none;-webkit-user-select:none}
#prog.scrubbing{height:6px;box-shadow:0 -2px 10px #0002}

/* Preview bubble while scrubbing: chapter title + N / M */
#scrubTip{position:fixed;z-index:8;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:7px 12px;border-radius:12px;box-shadow:0 8px 24px #0005;pointer-events:none;max-width:min(240px,80vw)}
#scrubTip b{display:block;font:600 12.5px Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scrubTip span{font:600 10.5px Inter,sans-serif;opacity:.7}

/* ---------- Customize sheet ---------- */
.npz{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:4px 0 14px}
.npz label{display:flex;align-items:center;gap:8px;cursor:pointer;
  font:400 15px Inter,sans-serif;padding:4px 0}
.npz input{accent-color:var(--acc);width:17px;height:17px}
.npz .ni{font-size:16px}

.npv{display:flex;gap:10px;margin-bottom:14px}
.npv button{flex:1;padding:11px;border-radius:12px;border:1px solid var(--line);font-weight:600}
.npv button[aria-pressed="true"]{background:var(--acc);color:var(--bg);border-color:var(--acc)}

.nnv{font:600 12px Inter,sans-serif;color:var(--mute)}
.nnh{font:600 12px Inter,sans-serif;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;margin:2px 0 8px}