/* Koma reader additions (2026-10-13, owner: "Do all of them and improve upon this if you can and add them in a way the ux
   is good"): page boxes that crop / split / turn pages, Smart fit, colour filters, the tap-zone hint for every layout,
   the bookmark button, the incognito chip, the page menu and the reader settings sheet. reader.js. */

/* a page = a box of its visible size; the images inside are moved (crop, the other half) or turned (sideways) */
.pg { position: relative; overflow: hidden; }
.pgin { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pg img, .stripcol img { filter: var(--rf, none); -webkit-user-drag: none; }
.reader .slide.scrolly { overflow-y: auto; align-items: flex-start; touch-action: pan-y; }

/* where to tap: the zones of the chosen layout, drawn as they are */
.zone-hint.zx { display: block; }
.zone-hint.zx .z { position: absolute; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: rgba(255,255,255,.9); font-weight: 700; font-size: .88rem; letter-spacing: .03em; text-align: center; padding: 6px; }
.zone-hint.zx .z.next { background: rgba(106,97,239,.28); }
.zone-hint.zx .z.prev { background: rgba(255,255,255,.12); }
.zone-hint.zx .z.menu { background: rgba(0,0,0,.22); }
.zone-hint.zx .z span { padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* top bar: bookmark, incognito */
.rtop .rbm.on .ic { color: var(--accent-ink, #b9b3ff); }
.rtop .tt .incog { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.rtop .tt .incog .ic { width: 13px; height: 13px; }

/* the page menu */
.pmenu { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.pmenu .pm-img { width: 64px; height: 92px; object-fit: cover; border-radius: 10px; background: var(--bg-2); flex: none; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.pmenu .pm-t { min-width: 0; }
.pmenu .pm-t .lead { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* reader settings */
#rset .rs-scope { display: flex; width: 100%; margin: 2px 0 8px; }
#rset .rs-scope button { flex: 1; height: 34px; }
#rset .rs-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 6px; color: var(--fg-mute); font-size: .84rem; }
#rset .rs-note .ic { width: 16px; height: 16px; color: var(--accent-ink, #b9b3ff); }
#rset .rs-note .linkbtn { margin: 0 0 0 auto; }
#rset .rs-h { margin: 18px 0 2px; font-size: .74rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-mute); display: flex; gap: 8px; align-items: baseline; }
#rset .rs-h span { font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--fg-faint); }
#rset .opt .l b { display: flex; align-items: center; gap: 7px; }
#rset .opt .l b .ic { width: 17px; height: 17px; color: var(--fg-dim); }
#rset .opt.wrap { flex-wrap: wrap; }
#rset .opt.wrap .l { flex: 1 1 180px; }
#rset .opt.wrap .seg { flex-wrap: wrap; }
#rset .opt.slider .l { flex: 0 0 auto; }
#rset .rs-range { flex: 1; min-width: 120px; accent-color: var(--accent, #6a61ef); height: 28px; }
#rset .rs-show { display: flex; justify-content: flex-end; margin-top: 4px; }
@media (max-width: 480px) { #rset .opt:not(.slider) { flex-wrap: wrap; } #rset .opt:not(.slider) .seg { margin-left: auto; } }

/* auto turn / scroll (2026-10-14): ▶ in the bar, a hairline of time left along the top (paged), a quiet chip while the
   controls are hidden (tap it to stop), the countdown into the next chapter on the end card */
#reader .rauto.on { color: var(--accent-ink); }
#reader .autoline { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 6; pointer-events: none; display: none; }
#reader .autoline i { display: block; height: 100%; background: var(--accent-ink); opacity: .7; transform-origin: left center; transform: scaleX(0); }
#reader.rtl .autoline i { transform-origin: right center; }
#reader.auto-on:not(.strip) .autoline { display: block; }
#reader .autochip { position: fixed; z-index: 7; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + var(--bot)); display: none; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 980px; font-size: .78rem; font-weight: 650; color: #fff; background: rgba(28,28,32,.55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: .55; transition: opacity .25s; }
#reader .autochip .ic { width: 14px; height: 14px; }
#reader .autochip:hover, #reader .autochip:focus-visible { opacity: 1; }
#reader.auto-on.hide-ui .autochip { display: inline-flex; }
#reader .autonext { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.1); font-weight: 600; }
#reader .autonext b { font-variant-numeric: tabular-nums; }
.speedpick { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 980px; background: var(--bg-2); }
.speedpick button { width: 34px; height: 30px; border-radius: 980px; font-size: 1.1rem; font-weight: 700; color: var(--fg); }
.speedpick button:hover { background: var(--bg-3); }
.speedpick b { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
/* the incognito chip on its own line under the chapter label (2026-10-14: inline, it crowded the label) */
.rtop .tt .incog { display: flex; width: max-content; margin: 4px auto 0; }