/* ============================================================
   Jengo Books — scoped under #book-overlay

   Full-screen React overlay (z-index 1000), same family as the reader /
   encounter / dictionary overlays. The word lookup REUSES the shared reading
   dictionary (window.JengoDict.DetailContent in a .wd-scope wrapper), so the
   dictionary styling lives in dictionary.css — this file only positions it
   (desktop dock / mobile bottom sheet) and styles the book-specific chrome.
   All color routes through tokens or color-mix(); the reading surface stays clean.
   ============================================================ */

#book-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: var(--color-bg);
  overscroll-behavior: none;
  color: var(--color-text-primary);

  --bk-brand-tint:        color-mix(in oklab, var(--brand) 8%, white);
  --bk-brand-tint-strong: color-mix(in oklab, var(--brand) 16%, white);
  --bk-brand-line:        color-mix(in oklab, var(--brand) 42%, white);

  --bk-ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --bk-jp-sans: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  font-family: var(--bk-ui-font);
}
#book-overlay.open {
  display: block;
  animation: bk-open 0.26s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes bk-open { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #book-overlay.open { animation: none; } }

#book-overlay * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
#book-overlay button { margin: 0; font-family: var(--bk-ui-font); cursor: pointer; }
#book-overlay #book-mount { position: absolute; inset: 0; overflow: hidden; }

.bk-screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--color-bg); }

/* The shelf + new-book picker reuse the reader's screens (window.JengoReader)
   styled by reader.css (broadened to scope #book-overlay) — no shelf/picker CSS
   lives here. This file styles only book's own reading surface. */

/* ── Reading header — quiet light bar ────────────────────────────────────────── */
.bk-rtop { flex: 0 0 auto; padding: calc(var(--sat) + 11px) 16px 11px; background: var(--color-bg); border-bottom: 1px solid var(--color-border-light); }
.bk-rtop-inner { display: flex; align-items: center; gap: 14px; max-width: 60rem; margin: 0 auto; width: 100%; }
.bk-rtop-back {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px 8px 9px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-bg);
  font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary);
  transition: border-color 0.14s ease, color 0.14s ease;
}
.bk-rtop-back:hover { border-color: var(--bk-brand-tint-strong); color: var(--brand); }
.bk-rtop-back svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; }
.bk-rtop-title { flex: 1; min-width: 0; font-family: var(--bk-jp-sans); font-size: 0.95rem; font-weight: 700; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-rtop-chip { flex: 0 0 auto; font-size: 0.62rem; font-weight: 700; color: var(--brand); background: var(--bk-brand-tint); border-radius: 999px; padding: 3px 9px; }
.bk-rtop-actions { display: none; align-items: center; gap: 8px; flex: 0 0 auto; }
.bk-rtop-act {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px;
  background: none; border: 1px solid var(--color-border); font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary);
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.bk-rtop-act:hover { border-color: var(--bk-brand-tint-strong); color: var(--brand); }
.bk-rtop-act svg { stroke: currentColor; }
.bk-rtop-act-icon { width: 34px; padding: 0; justify-content: center; }

/* ── Shared primary button (the in-chapter "next chapter" action) ────────────── */
.bk-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; background: var(--brand); color: #fff; border: none; border-radius: 8px; padding: 0.7rem 1.5rem; font-size: 0.98rem; font-weight: 600; transition: opacity 0.15s ease; }
.bk-btn-primary:hover { opacity: 0.9; }
.bk-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.bk-btn-primary svg { stroke: #fff; }

/* ── Reading body: prose + (desktop) docked dictionary aside ─────────────────── */
.bk-read-body { flex: 1; min-height: 0; display: flex; }
.bk-reading-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.bk-chapter-head { flex: 0 0 auto; text-align: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); padding: 0.9rem 1rem 0.2rem; }

/* Paged stage (mobile swipe + desktop card) */
.bk-turnstage { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 0.5rem; padding: 0.5rem 0.75rem 0; }
.bk-page-card { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bk-colview { flex: 1; min-height: 0; overflow: hidden; padding: 1rem 1.25rem; }
.bk-colflow { columns: auto; column-fill: auto; transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); }
.bk-colflow.streaming { transition: none; }
.bk-colflow p { margin: 0 0 1.05rem; line-height: 1.95; color: var(--color-text-primary); break-inside: avoid-column; }
.bk-colflow .bk-p-stream { color: color-mix(in oklab, var(--color-text-primary) 72%, white); }
.bk-pageno { flex: 0 0 auto; text-align: center; font-size: 0.7rem; color: var(--color-text-muted); padding: 0.4rem 0 0.6rem; font-variant-numeric: tabular-nums; }
.bk-pg-nav { flex: 0 0 auto; align-self: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text-secondary); display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.14s ease, color 0.14s ease; }
.bk-pg-nav:hover:not(:disabled) { border-color: var(--bk-brand-tint-strong); color: var(--brand); }
.bk-pg-nav:disabled { opacity: 0.3; cursor: default; }
.bk-pg-nav svg { stroke: currentColor; }

/* Scroll stage */
.bk-scroll-host { flex: 1; min-height: 0; overflow-y: auto; padding: 0.5rem 1.25rem calc(var(--sab, 20px) + 1.5rem); }
.bk-scrollcol { max-width: 38rem; margin: 0 auto; }
.bk-p { margin: 0 auto 1.05rem; line-height: 1.95; color: var(--color-text-primary); }
.bk-p-stream { color: color-mix(in oklab, var(--color-text-primary) 72%, white); }
.bk-chapter-end { max-width: 38rem; margin: 1.5rem auto 0; text-align: center; padding-top: 1.25rem; border-top: 1px solid var(--color-border-light); }

/* Word token */
.bk-w { cursor: pointer; border-radius: 3px; transition: background 0.12s ease; }
.bk-w:hover { background: var(--bk-brand-tint); }
.bk-w.is-active { outline: 2px solid var(--brand); outline-offset: 1px; border-radius: 2px; }
.bk-w rt { font-size: 0.6em; color: var(--color-text-secondary); font-family: var(--bk-ui-font); }

/* ── Desktop docked dictionary + chapter list (mirrors reader aside) ──────────── */
.bk-word-panel { display: none; }
.bk-wp-inner { display: flex; flex-direction: column; gap: 14px; }
.bk-dict-slot:empty { display: none; }
.bk-dict-slot.has-detail { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-bg); overflow: hidden; display: flex; flex-direction: column; max-height: 60vh; }
.bk-wp-toc { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-bg); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.bk-lh { display: flex; align-items: baseline; gap: 8px; padding: 13px 15px; border-bottom: 1px solid var(--color-border-light); }
.bk-lt { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.bk-lc { font-size: 0.74rem; color: var(--color-text-muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.bk-toc-rows { overflow-y: auto; }
.bk-toc-row { width: 100%; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 0.7rem 0.95rem; background: none; border: none; border-bottom: 1px solid var(--color-border-light); cursor: pointer; transition: background 0.12s ease; }
.bk-toc-row:last-child { border-bottom: none; }
.bk-toc-row:hover { background: var(--color-surface); }
.bk-toc-row.is-active { background: var(--bk-brand-tint); }
.bk-toc-no { font-size: 0.85rem; font-weight: 700; color: var(--color-text-primary); }
.bk-toc-snippet { font-family: var(--paragraph-font-family); font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bk-list-empty { padding: 2rem 1.25rem; text-align: center; font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.6; }

/* ── Mobile bottom nav (quietbar) ───────────────────────────────────────────── */
.bk-quietbar { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 7px 12px calc(var(--sab, 20px) + 7px); border-top: 1px solid var(--color-border-light); background: var(--color-bg); }
.bk-qb-back { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px 7px 9px; border-radius: 999px; border: none; background: none; font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary); }
.bk-qb-back:active { background: var(--color-surface); }
.bk-qb-back svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; }
.bk-qb-center { justify-self: center; display: inline-flex; align-items: center; gap: 6px; }
.bk-qb-pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px; border: none; background: var(--bk-brand-tint); font-size: 0.82rem; font-weight: 600; color: var(--brand); }
.bk-qb-pill:active { background: var(--bk-brand-tint-strong); }
.bk-qb-pill svg { width: 16px; height: 16px; stroke: var(--brand); stroke-width: 1.9; }
.bk-qb-btn { justify-self: end; width: 36px; height: 36px; border-radius: 999px; border: none; background: none; display: inline-flex; align-items: center; justify-content: center; }
.bk-qb-btn:active { background: var(--color-surface); }
.bk-qb-btn svg { width: 20px; height: 20px; stroke: var(--color-text-secondary); stroke-width: 1.8; }

/* ── Shared sheet (settings / TOC) ───────────────────────────────────────────── */
.bk-sheet-wrap { position: fixed; inset: 0; z-index: 700; background: rgba(0,0,0,0.32); display: flex; align-items: center; justify-content: center; animation: bk-fade 0.18s ease; }
@keyframes bk-fade { from { opacity: 0; } to { opacity: 1; } }
.bk-sheet { width: 100%; max-width: 27rem; max-height: 85vh; display: flex; flex-direction: column; background: var(--color-bg); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.16); padding: 0.4rem 1.25rem 1.25rem; }
.bk-sheet-grab { display: none; }
.bk-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0 0.5rem; }
.bk-sheet-title { font-size: 1rem; font-weight: 700; color: var(--color-text-primary); }
.bk-sheet-close { width: 30px; height: 30px; border-radius: 8px; background: none; border: none; color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; transition: background 0.14s ease, color 0.14s ease; }
.bk-sheet-close:hover { background: var(--color-surface); color: #555; }
.bk-sheet-body { overflow-y: auto; }

.bk-set-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--color-border-light); }
.bk-set-label { font-size: 0.92rem; color: var(--color-text-primary); display: flex; flex-direction: column; gap: 2px; }
.bk-set-label small { font-size: 0.74rem; color: var(--color-text-muted); font-weight: 400; max-width: 15rem; }
.bk-set-seg { display: inline-flex; gap: 3px; background: var(--color-surface); border-radius: 9px; padding: 3px; }
.bk-set-segbtn { background: none; border: none; color: var(--color-text-secondary); border-radius: 7px; padding: 0.3rem 0.7rem; font-size: 0.84rem; font-weight: 600; transition: background 0.14s ease, color 0.14s ease; }
.bk-set-segbtn.is-on { background: var(--color-bg); color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.bk-switch { flex: 0 0 auto; width: 42px; height: 25px; border-radius: 999px; background: var(--color-border); border: none; padding: 0; position: relative; transition: background 0.2s ease; }
.bk-switch.is-on { background: var(--brand); }
.bk-switch i { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; }
.bk-switch.is-on i { transform: translateX(17px); }

/* ── Word detail bottom sheet (mobile) — wraps the shared DetailContent ──────── */
.bk-detail-host { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.bk-detail-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
.bk-detail-backdrop.open { opacity: 1; pointer-events: auto; }
.bk-detail-sheet { position: fixed; left: 0; right: 0; bottom: 0; height: 80vh; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; background: var(--color-bg); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,0.22); transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); pointer-events: none; padding-bottom: var(--sab, 20px); }
.bk-detail-sheet .detail-grab, .bk-detail-sheet .bk-detail-grab { flex: 0 0 auto; }
.bk-detail-sheet .detail-scroll { flex: 1 1 auto; min-height: 0; }
.bk-detail-sheet .detail-actions { flex: 0 0 auto; }
.bk-detail-sheet.open { transform: translateY(0); pointer-events: auto; }
.bk-detail-grab { width: 36px; height: 4px; border-radius: 999px; background: var(--color-border); margin: 8px auto 2px; }
@media (prefers-reduced-motion: reduce) { .bk-detail-sheet { transition: none; } }

/* ── Mobile layout ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .bk-rtop-back { display: none; }
  .bk-rtop-actions { display: none; }
  .bk-rtop-title { text-align: center; }
  .bk-sheet-wrap { align-items: flex-end; }
  .bk-sheet { max-width: none; max-height: 88vh; border-radius: 16px 16px 0 0; padding-bottom: calc(var(--sab, 20px) + 1rem); box-shadow: 0 -10px 40px rgba(0,0,0,0.22); animation: bk-sheet-up 0.26s cubic-bezier(0.4,0,0.2,1); }
  .bk-sheet-grab { display: block; width: 36px; height: 4px; border-radius: 999px; background: var(--color-border); margin: 6px auto 2px; }
  @keyframes bk-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
}

/* ── Desktop layout ─────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .bk-quietbar { display: none; }
  .bk-rtop-actions { display: flex; }
  .bk-read-body { max-width: 70rem; margin: 0 auto; width: 100%; }
  .bk-reading-main { max-width: none; }
  .bk-colview { padding: 1rem 0; max-width: 40rem; margin: 0 auto; }
  .bk-word-panel { display: block; flex: 0 0 300px; width: 300px; position: sticky; top: 18px; align-self: flex-start; padding: 18px 18px 32px 0; }
  .bk-wp-toc { max-height: 52vh; }
  .bk-detail-host { display: none; }
}