/* A chapter scrolls on its own; controls and the contents sheet share the reader width. */
body.has-chapter-reader .comic-reader { padding-bottom: calc(80px + env(safe-area-inset-bottom)); min-height: 100svh; background: #11141e; }
body.has-chapter-reader .topbar { gap: 14px; padding-inline: 18px; background: #11141ef5; }
body.has-chapter-reader .topbar-right { flex: 1; min-width: 0; gap: 12px; }
body.has-chapter-reader #episode-label { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #e7d9d2; }
body.has-chapter-reader .motion-button { flex-shrink: 0; }
.reader-page { min-height: calc(100svh - 140px); }
.reader-page h1:focus, .reader-page h2:focus { outline: none; }
.reader-controls { position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%,520px); min-height: 72px; padding: 9px 20px calc(9px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 20px; border-top: 1px solid #e5dfd9; background: #fffdf9; color: #29242a; box-shadow: 0 -5px 28px #0000000a; }
.reader-controls button { background: transparent; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 8px; min-width: 44px; min-height: 44px; }
.reader-controls button:hover:not(:disabled) { background: #efe9e5; }
.reader-controls button:focus-visible, .reader-toc button:focus-visible { outline: 2px solid #804757; outline-offset: -3px; }
.reader-controls svg { width: 26px; height: 26px; }
.reader-controls .reader-toc-button { flex-direction: column; gap: 3px; min-width: 50px; padding: 3px 9px; font-size: 11px; line-height: 1.3; }
.reader-position { margin-left: auto; color: #91858a; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.reader-page-buttons { display: flex; align-items: center; gap: 13px; }
.reader-controls button:disabled { color: #cec7c8; }
.reader-toc { position: fixed; inset: auto 0 0; margin: 0 auto; padding: 0; width: min(100%,520px); max-width: 100%; height: min(82dvh,760px); max-height: calc(100dvh - 32px); border: 0; border-radius: 24px 24px 0 0; color: #302a2c; background: #fffdfa; box-shadow: 0 -14px 65px #0003; overflow: hidden; }
.reader-toc[open] { display: flex; flex-direction: column; animation: reader-sheet-enter .22s ease-out; }
.reader-toc::backdrop { background: #07091080; }
.reader-toc-heading { position: relative; flex: none; text-align: center; padding: 39px 56px 22px; border-bottom: 1px solid #eee8e2; }
.reader-toc-handle { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 9px; background: #c4bbb7; }
.reader-toc-heading p { color: #958079; font-size: 10px; letter-spacing: .12em; margin: 0 0 8px; }
.reader-toc-heading h2 { font-size: 21px; line-height: 1.4; font-weight: 650; letter-spacing: -.04em; margin: 0; }
#reader-toc-close { position: absolute; top: 38px; right: 12px; padding: 10px; width: 44px; height: 44px; background: transparent; border-radius: 50%; color: #857779; }
#reader-toc-close:hover { background: #f2ebe6; }
#reader-toc-close svg { display: block; width: 24px; height: 24px; }
.reader-toc-scroll { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c3b7b2 transparent; padding-bottom: max(20px,env(safe-area-inset-bottom)); }
#reader-toc-list { list-style: none; padding: 10px 0; margin: 0; }
#reader-toc-list button { position: relative; display: flex; align-items: baseline; gap: 17px; width: 100%; min-height: 64px; padding: 19px 28px; background: transparent; text-align: left; line-height: 1.65; font-size: 15px; font-weight: 400; color: #3c3438; word-break: keep-all; overflow-wrap: anywhere; }
#reader-toc-list button:hover { background: #f6f1ec; }
#reader-toc-list button[aria-current='page'] { background: #f0e8e3; color: #743e50; font-weight: 600; }
#reader-toc-list button[aria-current='page']::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 2px 2px 0; background: #895469; }
.toc-chapter-label { flex: 0 0 53px; font-size: 12px; color: #a18b81; white-space: nowrap; }
[aria-current='page'] .toc-chapter-label { color: #895469; }
.toc-chapter-title { flex: 1; min-width: 0; }
html.reader-toc-open { overflow: hidden; }
@keyframes reader-sheet-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:359px) {
  .reader-controls { padding-inline: 12px; gap: 12px; }
  .reader-page-buttons { gap: 6px; }
  #reader-toc-list button { padding: 17px 21px; gap: 12px; font-size: 14px; }
  .reader-toc-heading h2 { font-size: 20px; }
}
@media (prefers-reduced-motion:reduce) { .reader-toc[open] { animation: none; } }