.page-contents summary::before { content: none; }
.page-contents__icon { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; }

.reader-navigation {
    position: fixed;
    z-index: 16;
    top: clamp(8rem, 29vh, 18rem);
    left: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    width: 8rem;
    padding: 1rem .75rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--ink-soft);
    font: .75rem/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
}

.reader-navigation:empty { display: none; }
.reader-navigation [hidden] { display: none !important; }
.reader-navigation .page-contents { width: 100%; margin: 0; font: inherit; }
.reader-navigation .page-contents summary {
    flex-direction: column;
    gap: .45rem;
    padding: .35rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--forest);
    list-style: none;
}
.reader-navigation .page-contents summary::-webkit-details-marker { display: none; }
.reader-navigation .page-contents summary .item-count { display: none; }
.reader-navigation .page-contents__icon { width: 1.7rem; height: 1.7rem; }
.reader-navigation .page-contents summary:hover,
.reader-navigation .page-contents[open] summary { background: var(--surface-subtle); }
.reader-navigation .page-contents summary:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.reader-navigation .page-contents nav {
    top: -.25rem;
    left: calc(100% + 1rem);
    width: min(25rem, calc(100vw - 12rem));
    max-height: min(32rem, 65dvh);
    padding: .75rem;
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    font-size: .85rem;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.reader-navigation .page-contents li { margin: .15rem 0; }
.reader-navigation .page-contents a { padding: .5rem .6rem; border-radius: .35rem; line-height: 1.45; overflow-wrap: anywhere; }
.reader-navigation .page-contents a:hover { color: var(--forest); background: var(--surface-subtle); }
.reader-navigation .page-contents a[aria-current="location"] { color: var(--forest); background: #e6eae3; font-weight: 650; }
.reader-navigation__progress { display: flex; flex-direction: column; gap: .4rem; padding: 0 .45rem; text-align: center; }
.reader-navigation__value { white-space: nowrap; }
.reader-navigation__value strong { color: var(--forest); font-size: .85rem; font-variant-numeric: tabular-nums; }
.reader-navigation__progress progress { display: block; width: 100%; height: .25rem; border: 0; border-radius: 1rem; overflow: hidden; accent-color: var(--forest); background: var(--surface-subtle); }
.reader-navigation__progress progress::-webkit-progress-bar { background: var(--surface-subtle); border-radius: 1rem; }
.reader-navigation__progress progress::-webkit-progress-value { background: var(--forest); border-radius: 1rem; }
.reader-navigation__progress progress::-moz-progress-bar { background: var(--forest); border-radius: 1rem; }
.reader-navigation__continue { display: flex; align-items: center; justify-content: center; gap: .2rem; min-height: 2.25rem; padding: .4rem .2rem; border: 0; border-radius: .45rem; background: var(--forest); color: var(--surface); font-size: .75rem; font-weight: 600; }
.reader-navigation__continue:hover { background: var(--forest-hover); }
.reader-navigation__continue svg { flex: 0 0 auto; }
.reader-navigation__updates { padding: .4rem .2rem; border: 0; border-radius: .45rem; background: var(--rust-soft); color: var(--rust); font-size: .72rem; font-weight: 600; }
.reader-navigation__updates:hover { background: #e9d7cb; }
.reader-navigation__note { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.reader-reading-tools { position: static; margin: 0; }
.reader-reading-tools > summary { cursor: pointer; padding: .35rem .15rem; text-align: center; white-space: nowrap; }
.reader-reading-tools__panel { position: absolute; left: calc(100% + 1rem); top: 0; width: min(19rem, calc(100vw - 2rem)); max-height: calc(100dvh - clamp(8rem, 29vh, 18rem) - 1rem); overflow-y: auto; padding: 1rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); box-shadow: var(--shadow-md); font: .85rem/1.5 Inter, sans-serif; }
.reader-reading-tools__panel label { display: flex; gap: .5rem; align-items: center; margin: .6rem 0; cursor: pointer; }
.reader-reading-tools__panel input { accent-color: var(--forest); }
.reader-reading-tools__panel small { display: block; color: var(--ink-soft); line-height: 1.5; }
.reader-reading-tools__panel p { margin: .8rem 0; }
.reader-reading-tools__panel [role=status]:empty { display: none; }
.reader-reading-tools__panel button { width: 100%; margin-bottom: .6rem; }
.reading-color { width: .85rem; height: .85rem; border-radius: .2rem; border: 1px solid #0002; }
.reading-color--read { background: #9bd1ad; }
.reading-color--unread { background: #ffd098; }
::highlight(qprins-read) { background-color: #a8d5b9a6; color: inherit; }
::highlight(qprins-unread) { background-color: #ffca89b3; color: inherit; }

@media (max-width: 73.999rem) {
    .reader-navigation {
        top: auto;
        right: auto;
        bottom: max(.75rem, env(safe-area-inset-bottom));
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: .75rem;
        width: max-content;
        max-width: calc(100vw - 2rem);
        padding: .45rem .65rem;
        border-radius: .85rem;
        box-shadow: 0 .2rem 1.5rem rgb(35 32 26 / 14%);
    }
    .reader-navigation .page-contents { position: static; width: auto; flex: 0 1 auto; }
    .reader-navigation .page-contents summary { flex-direction: row; gap: .35rem; min-height: 2.1rem; padding: .25rem; }
    .reader-navigation .page-contents__icon { width: 1.05rem; height: 1.05rem; }
    .reader-navigation .page-contents nav { top: auto; bottom: calc(100% + .6rem); left: 50%; transform: translateX(-50%); width: min(28rem, calc(100vw - 2rem)); max-height: min(32rem, calc(100dvh - 10rem)); }
    .reader-navigation__progress { min-width: 3rem; padding: 0; gap: .25rem; }
    .reader-navigation__value span { display: none; }
    .reader-navigation__continue { padding: .4rem .6rem; }
    .reader-navigation__updates { padding: .4rem; white-space: nowrap; }
    .reader-reading-tools { position: static; }
    .reader-reading-tools__panel { top: auto; bottom: calc(100% + .6rem); left: 50%; transform: translateX(-50%); max-height: calc(100dvh - 8rem); overflow-y: auto; }
}

@media (max-width: 26rem) {
    .reader-navigation { gap: .45rem; padding: .4rem; }
    .reader-navigation .page-contents summary { gap: .25rem; padding: .2rem; }
    .reader-navigation__progress { min-width: 2.5rem; }
    .reader-navigation__continue { gap: .1rem; padding: .4rem; }
    .reader-navigation__updates { padding: .4rem .3rem; }
}

@media print {
    .reader-navigation { display: none !important; }
    ::highlight(qprins-read), ::highlight(qprins-unread) { background-color: transparent; }
}