/* The modal is outside the app shell; its reading styles never change a column. */
html.reader-panel-open { overflow: hidden; scrollbar-gutter: stable; }
.reader-panel { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; overflow: hidden; background: transparent; color: #141510; }
.reader-panel::backdrop { background: transparent; }
.rp-shade { position: absolute; inset: 0; background: rgb(0 0 0 / .3); }
.rp-sheet { position: absolute; right: 0; top: 0; bottom: 0; width: 72%; display: flex; flex-direction: column; background: #f5f5f5; box-shadow: -10px 0 35px rgb(0 0 0 / .12); animation: rp-enter .16s ease-out; }
.rp-header { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 6px 18px; padding: 18px 28px 12px; background: #fff; border-bottom: 1px solid #d8d8d5; }
.rp-header .rp-title { font: 500 clamp(19px, 1.6vw, 25px)/1.45 "Gezi Reader WenKai", "Gezi WenKai", "KaiTi", serif; margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reader-panel button { font-family: "Gezi Reader Sans", "Gezi UI Sans", "Microsoft YaHei", sans-serif; cursor: pointer; color: #141510; background: #fff; border: 1px solid #bdbeb8; border-radius: 10px; min-height: 42px; padding: 8px 14px; font-size: 14px; line-height: 1.5; }
.reader-panel .rp-close { font: 400 29px/1 Arial, sans-serif; width: 44px; height: 44px; padding: 0; border: 0; align-self: start; }
.rp-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.rp-tools:has(> [hidden]:first-child + [hidden]) { display: none; }
.reader-panel [hidden] { display: none !important; }
.reader-panel :is(button, a, summary):focus-visible { outline: 2px solid #141510; outline-offset: 3px; }
#rp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 26px 28px 46px; scroll-behavior: auto; }
.rp-document { --font-heading: "Gezi Reader WenKai", "Gezi WenKai", "KaiTi", serif; --font-ui: "Gezi Reader Sans", "Gezi UI Sans", "Microsoft YaHei", sans-serif; color: #141510; font-family: var(--font-ui); font-size: 16px; line-height: 1.75; min-width: 0; max-width: 1040px; margin: 0 auto; overflow-wrap: anywhere; }
.rp-document :is(h1,h2,h3,h4,h5,h6) { font-family: var(--font-heading); font-weight: 500; }
.rp-document .reader-content { min-width: 0; }
.rp-directory { border: 1px solid #bdbeb8; border-radius: 14px; background: #fff; margin-bottom: 24px; padding: 12px 18px; }
.rp-directory > summary { cursor: pointer; font-size: 14px; font-weight: 500; }
.rp-document .rp-directory .reader-index { border: 0; border-radius: 0; padding: 14px 0 0; margin: 0; max-height: min(45dvh, 360px); overflow: auto; }
.rp-document .rp-directory .reader-index h2 { display: none; }
.rp-document .rp-directory .reader-index ol { grid-template-columns: 1fr; }
.rp-document .rp-directory .toc > ul { columns: 1; }
.rp-document [id] { scroll-margin-top: 18px; }
.rp-document .reader-meta details { margin-bottom: 16px; }
.rp-document.file-reader .reader-content .file-code { overflow-x: auto; max-width: 100%; white-space: pre; padding-bottom: 12px; }
.rp-document.file-reader .file-code code { width: max-content; min-width: 100%; }
.rp-document.file-reader .file-line { white-space: pre; overflow-wrap: normal; }
.rp-document .rp-external::after { content: " ↗"; font-size: .85em; }
.rp-error { font-family: "Gezi UI Sans", sans-serif; border: 1px solid #bdbeb8; background: #fff; padding: 24px; border-radius: 14px; }
.rp-location-note { padding: 12px 18px; background: #fff; border: 1px solid #bdbeb8; }
@keyframes rp-enter { from { transform: translateX(30px); opacity: .85; } to { transform: translateX(0); opacity: 1; } }
@media(max-width:768px) {
  .rp-sheet { width: 100%; }
  .rp-header { padding: 12px 14px 10px; gap: 6px 10px; }
  #rp-scroll { padding: 18px 12px 32px; }
  .rp-document { font-size: 15px; }
  .rp-document .reader-content { padding: 20px 16px; }
}
@media(prefers-reduced-motion:reduce) { .rp-sheet { animation: none; } }