/* Reading mode: mode switch, bookshelf, reader text, audiobook bar. */

/* switch between speaking lessons and reading */
.mode-switch { display: flex; margin: 0 12px 10px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--bg); }
.mode-switch button { flex: 1; border: 0; background: none; padding: 6px 4px; border-radius: 999px; cursor: pointer; color: var(--muted); font-size: 13px; white-space: nowrap; }
.mode-switch button.on { background: var(--accent); color: #fff; }
body:not(.reading) .reading-only { display: none !important; }
body:not(.cards) .cards-only { display: none !important; }
body.reading .lesson-only, body.reading .tab, body.cards .lesson-only, body.cards .tab { display: none !important; }

/* bookshelf in the sidebar */
.book-list { list-style: none; margin: 0; padding: 0 8px 16px; overflow-y: auto; flex: 1; }
.book-list li { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; cursor: pointer; }
.book-list li:hover { background: var(--bg); }
.book-list li.current { background: var(--accent-soft); }
.book-list img { width: 44px; height: 62px; object-fit: cover; border-radius: 4px; flex: none; background: var(--line); }
.book-list .bt { font-size: 14px; font-weight: 600; line-height: 1.3; }
.book-list .bm { font-size: 12px; color: var(--muted); margin-top: 3px; }
.book-list .bar { height: 3px; background: var(--line); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.book-list .bar span { display: block; height: 100%; background: var(--accent); }
.book-list .empty { color: var(--muted); font-size: 13px; padding: 12px; cursor: default; }

/* reader */
.reader { --reader-size: 19px; --paper: var(--surface); --ink-r: var(--ink); --muted-r: var(--muted); --hl: var(--active); }
.reader.night { --paper: #1c1a17; --ink-r: #d9cfbf; --muted-r: #8e8473; --hl: #3a3224; }
.reader-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; position: sticky; top: 76px; z-index: 4;
  background: var(--bg); padding: 8px 0; }
.reader-bar select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); max-width: 260px; }
.reader-tools { display: inline-flex; gap: 6px; margin-left: auto; }
.read-timer { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.read-timer.done { color: var(--good); font-weight: 600; }
.reader-text { background: var(--paper); color: var(--ink-r); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px clamp(18px, 5vw, 56px); font: var(--reader-size)/1.75 Georgia, "Iowan Old Style", "Songti SC", serif;
  max-width: 760px; margin: 4px auto 0; transition: background .2s, color .2s; }
.reader-text h2.ch-title { font: 600 1.25em/1.3 -apple-system, BlinkMacSystemFont, sans-serif; margin: 0 0 1.2em; }
.reader-text p { margin: 0 0 .9em; }
.reader-text p.h { font-weight: 700; text-align: center; }
.reader-text figure { margin: 1.2em 0; text-align: center; }
.reader-text figure img { max-width: 100%; height: auto; border-radius: 4px; }
.reader.night .reader-text figure img { filter: brightness(.82); }
.reader-text .sn { border-radius: 3px; transition: background .25s; }
.reader-text.has-audio .sn.timed { cursor: pointer; }
.reader-text .sn.now { background: var(--hl); box-shadow: 0 0 0 2px var(--hl); }
.reader-text .front-note { color: var(--muted-r); font-size: .8em; margin-bottom: 1.4em; }
.chapter-nav { display: flex; justify-content: space-between; max-width: 760px; margin: 14px auto 0; }

/* audiobook bar, pinned to the bottom while reading */
.audio-bar { position: sticky; bottom: 0; z-index: 6; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  max-width: 760px; margin: 14px auto 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 -4px 18px rgba(0,0,0,.08); }
.audio-bar input[type=range] { flex: 1 1 140px; accent-color: var(--accent); }
.audio-bar select { padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.ab-play { min-width: 44px; }
.ab-follow { font-size: 13px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.ab-close { margin-left: auto; }
/* small round button that takes the closed player's place */
.ab-open { position: sticky; bottom: 14px; z-index: 6; display: block; width: 48px; height: 48px; margin: 14px 4px 0 auto;
  padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 20px;
  cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.15); }

@media (max-width: 760px) {
  .reader-bar { top: 0; }
  .reader-text { padding: 20px 18px; border-left: 0; border-right: 0; border-radius: 0; margin-left: -16px; margin-right: -16px; }
  .audio-bar { margin-left: -8px; margin-right: -8px; border-radius: 14px 14px 0 0; }
  .reader-bar select { max-width: 52vw; }
}

/* night mode darkens the whole reading area, not just the page */
body.reading.reader-night .main, body.reading.reader-night .topbar, body.reading.reader-night .reader-bar { background: #14120f; color: #d9cfbf; }
body.reading.reader-night .reader-bar select, body.reading.reader-night .reader-bar button,
body.reading.reader-night .top-actions button, body.reading.reader-night .chapter-nav button,
body.reading.reader-night .audio-bar, body.reading.reader-night .audio-bar select, body.reading.reader-night .ab-open, body.reading.reader-night .audio-bar button:not(.primary) {
  background: #221f1a; color: #d9cfbf; border-color: #3a352c; }
body.reading.reader-night .reader-text { border-color: #2c2822; }
body.reading.reader-night .lesson-num { color: #8e8473; }