/* MangaDex-style reader shell — docked side menu, segmented progress bar, reading
   modes (long strip / single / double page), image fit, reading direction.
   Driven by assets/scripts/reader-ui.js; markup in index.php's chapter view.
   Everything is scoped to #reader-wrap.rd-ui, which index.php only sets for an
   unlocked image chapter — locked chapters and novel (note) chapters keep the
   plain reader. Colours come from the theme tokens in global.css, so light mode
   and the colour schemes work without extra rules. The top/bottom bars, the
   chapters + settings panels and auto-scroll stay in reader.js. */

/* ── Accent ──
   The viewer's zmio accent (index.php injects --zmio-accent-* when they have
   one; a colour scheme feeds its own through the same variables) paints every
   accent-coloured piece of the reader; without it the site's violet applies.
   --rd-ac = comma channels for alpha tints, --rd-ac-fg = icon / text colour,
   --rd-ac-light = lit text, --rd-ac-pill = the brand gradient. On :root so the
   menu (a phone bottom sheet in <body>), its lifted option lists and the inline
   colours reader.js paints (switches, novel chips, auto-scroll pill, tour) see
   them too. */
:root {
    --rd-ac: var(--zmio-accent-rgb, 167, 139, 250);
    --rd-ac-fg: var(--zmio-accent, #a78bfa);
    --rd-ac-light: var(--zmio-accent-light, #c4b5fd);
    --rd-ac-lighter: var(--zmio-accent-light, #ddd6fe);
    --rd-ac-pill: var(--zmio-accent-pill-bg, linear-gradient(135deg, #7c3aed, #a78bfa));
}

/* light: ink shades (light.css always defines --zmio-accent-soft; the injected
   block darkens -light / -soft for an accent) */
html[data-theme="light"] {
    --rd-ac: var(--zmio-accent-rgb, 124, 58, 237);
    --rd-ac-fg: var(--zmio-accent-soft, #7c3aed);
    --rd-ac-light: var(--zmio-accent-light, #6d28d9);
    --rd-ac-lighter: var(--zmio-accent-light, #5b21b6);
}

#reader-wrap.rd-ui {
    --rd-menu-w: 24rem; /* = the chapters panel (#panel-chapters md:w-96) */
    --rd-bar-h: 3.5rem;
    /* space the fixed bars take from the viewport (phones: top + bottom bar) */
    --rd-top-off: 0px;
    --rd-bot-off: 0px;
    --rd-pb-h: 7px;
    /* the height a "fit height" page may use (a side progress bar takes none) */
    --rd-vh: calc(100vh - var(--rd-top-off) - var(--rd-bot-off) - var(--rd-pb-v, var(--rd-pb-h)));
}

#reader-wrap.rd-ui.rd-pbpos-left,
#reader-wrap.rd-ui.rd-pbpos-right {
    --rd-pb-v: 0px;
}

@media (max-width: 767.98px) {
    #reader-wrap.rd-ui {
        --rd-top-off: var(--rd-bar-h);
        --rd-bot-off: var(--rd-bar-h);
    }

    html.rd-bars-hidden #reader-wrap.rd-ui {
        --rd-top-off: 0px;
        --rd-bot-off: 0px;
    }
}

@media (min-width: 768px) {
    #reader-wrap.rd-ui.rd-topbar-on {
        --rd-top-off: var(--rd-bar-h);
    }

    /* reader.js slid the bar away (scroll / click): the page may use its space */
    html.rd-bars-hidden #reader-wrap.rd-ui.rd-topbar-on {
        --rd-top-off: 0px;
    }
}

/* Paged/strip-only controls. The mode classes sit on #reader-wrap AND on
   #reader-menu (reader-ui.js), because the phone bottom sheet moves the menu
   out to <body>, away from the wrapper. */
.rd-mode-strip .rd-paged-only,
.rd-paged .rd-strip-only {
    display: none !important;
}

@media (max-width: 767.98px) {
    .rd-desktop-only {
        display: none !important;
    }
}

/* ── Top bar: the reader's header. Shown by default; the "Top bar" setting hides it for an immersive view ── */
@media (min-width: 768px) {
    .rd-ui:not(.rd-topbar-on) #reader-nav {
        display: none;
    }

    .rd-ui:not(.rd-topbar-on) #reader-content {
        padding-top: 0 !important;
    }

    .rd-ui.rd-menu-open #reader-nav,
    html.rd-chapters-open .rd-ui #reader-nav {
        right: var(--rd-menu-w);
    }

    /* with the bar on, reader.js's "Hide bars on scroll" and "Double tap shows
       bars" (click / double click here) move it exactly as on a phone */
}

/* ── Content column: pushed left while the menu is docked ── */
#reader-wrap.rd-ui #reader-content {
    transition: padding-top 300ms ease, padding-right .28s cubic-bezier(.2, .8, .2, 1);
    padding-bottom: calc(var(--rd-bot-off) + var(--rd-pb-v, var(--rd-pb-h)) + 1rem);
}

@media (min-width: 768px) {
    /* the chapters panel (reader.js, html.rd-chapters-open) takes the same slot as the menu */
    .rd-ui.rd-menu-open #reader-content,
    html.rd-chapters-open .rd-ui #reader-content {
        padding-right: var(--rd-menu-w);
    }
}

/* ── Floating menu tab (desktop, shown while the menu is closed) ── */
#rd-menu-tab {
    position: fixed;
    top: .75rem;
    right: .75rem;
    z-index: 52;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: .75rem;
    border: 1px solid rgb(var(--c-white) / .1);
    background: rgb(var(--c-surface) / .92);
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .75));
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background .15s, color .15s, opacity .2s;
}

#rd-menu-tab:hover {
    background: rgb(var(--c-surface));
    color: rgb(var(--c-white));
}

#rd-menu-tab svg {
    width: 18px;
    height: 18px;
}

.rd-menu-open #rd-menu-tab,
.rd-ui.rd-topbar-on #rd-menu-tab,
html.rd-chapters-open #rd-menu-tab {
    display: none; /* the top bar carries its own menu button */
}

@media (min-width: 768px) {
    /* ... unless reader.js has slid the bar away */
    html.rd-bars-hidden:not(.rd-chapters-open) .rd-ui.rd-topbar-on:not(.rd-menu-open) #rd-menu-tab {
        display: flex;
    }
}

@media (max-width: 767.98px) {
    /* phones open the menu from the bottom bar (#btn-reader-menu-mob) */
    #rd-menu-tab {
        display: none !important;
    }
}

/* ── Reader menu ──
   Desktop: a drawer docked on the right. Phones: components/bottom-sheet turns
   the same element into a slide-up sheet (inline styles while open, `hidden`
   after), so below 768px it is simply display:none until the sheet opens. */
/* colours come from the same Tailwind classes #panel-chapters uses (bg-surface,
   border-white/[0.06], text-white/N) so every theme and colour scheme paints
   both slide-outs alike; this only lays the menu out */
#reader-menu {
    display: none;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 768px) {
    #reader-menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 54; /* under the chapters/settings panels (60) and their backdrop (55) */
        width: var(--rd-menu-w);
        max-width: 100vw;
        display: flex;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5); /* as #panel-chapters */
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
        visibility: hidden;
    }

    .rd-menu-open #reader-menu {
        transform: none;
        visibility: visible;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    }
}

/* header: layout only — the colours and type are the chapters panel's classes */
.rd-menu-series {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.rd-menu-ch {
    margin-top: .15rem;
}

.rd-menu-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .8rem .85rem 1rem;
    /* bottom-sheet: the head/foot keep their size, this row scrolls (data-sheet-scroll) */
    display: flex;
    flex-direction: column;
    gap: .5rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* the body scrolls; its rows never get squeezed to fit (a flex column shrinks
   40px buttons to their text once the settings make it taller than the screen) */
.rd-menu-body > * {
    flex-shrink: 0;
}

.rd-sect {
    margin: .6rem 0 .1rem .15rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .3));
}

.rd-nav-row {
    display: flex;
    gap: .4rem;
}

.rd-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.rd-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 40px;
    padding: 0 .75rem;
    border-radius: .6rem;
    border: 1px solid rgb(var(--c-white) / .08);
    background: rgb(var(--c-white) / .05);
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .82));
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, color .15s, border-color .15s;
}

.rd-btn:hover {
    background: rgb(var(--c-white) / .1);
    color: rgb(var(--c-white));
}

.rd-btn[aria-disabled="true"] {
    opacity: .35;
    pointer-events: none;
}

.rd-btn svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.rd-btn .rd-trunc {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-nav-arrow {
    flex: none;
    width: 40px;
    padding: 0;
}

.rd-btn.is-on {
    border-color: rgba(var(--rd-ac), .5);
    background: rgba(var(--rd-ac), .15);
    color: var(--rd-ac-light);
}

/* option menus: a row names the setting and its value; its list floats under
   the row (lifted to <body> by reader-ui.js) with the look of the site's other
   dropdowns (filter-select, user menu): surface-2, hairline, soft shadow */
.rd-opt {
    border-radius: .6rem;
    border: 1px solid rgb(var(--c-white) / .08);
    background: rgb(var(--c-white) / .05);
}

.rd-opt-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    height: 40px;
    padding: 0 .65rem 0 .75rem;
    border: 0;
    border-radius: .6rem;
    background: transparent;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .82));
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}

.rd-opt-head:hover,
.rd-opt-head[aria-expanded="true"] {
    background: rgb(var(--c-white) / .06);
}

.rd-opt-head:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(var(--rd-ac), .6);
}

.rd-opt-ico {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--rd-ac-fg);
}

.rd-opt-ico svg {
    width: 18px;
    height: 18px;
}

.rd-opt-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-opt-val {
    flex: none;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
    font-weight: 500;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .45));
}

.rd-opt-chev {
    flex: none;
    width: 12px;
    height: 12px;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .35));
    transition: transform .2s;
}

.rd-opt-head[aria-expanded="true"] .rd-opt-chev {
    transform: rotate(180deg);
}

.rd-opt-list {
    display: none;
}

.rd-opt-list.is-open {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: fixed;
    z-index: 10000; /* over the docked menu and the phone sheet (9999) */
    max-height: min(320px, calc(100vh - 16px));
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgb(var(--c-white) / .09);
    background: rgb(var(--c-surface-2));
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 4px 16px rgba(0, 0, 0, .25);
    animation: rd-opt-in .14s ease;
    overscroll-behavior: contain;
}

.rd-opt-list.is-open.is-above {
    animation-name: rd-opt-in-up;
}

@keyframes rd-opt-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes rd-opt-in-up {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.rd-opt-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    height: 34px;
    padding: 0 .5rem;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .7));
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.rd-opt-item .rd-opt-ico {
    color: inherit;
    opacity: .8;
}

.rd-opt-item:hover {
    background: rgb(var(--c-white) / .07);
    color: rgb(var(--c-white));
}

.rd-opt-item[aria-selected="true"] {
    background: rgba(var(--rd-ac), .14);
    color: var(--rd-ac-light);
}

.rd-opt-item[aria-selected="true"] .rd-opt-ico {
    color: var(--rd-ac-fg);
    opacity: 1;
}

.rd-opt-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-opt-check {
    flex: none;
    width: 14px;
    height: 14px;
    opacity: 0;
}

.rd-opt-item[aria-selected="true"] .rd-opt-check {
    opacity: 1;
}

/* segmented bar: every value side by side with its icon, the active one lit */
.rd-seg-row .rd-row-head {
    margin-bottom: .35rem;
}

.rd-seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: .55rem;
    background: rgb(var(--c-white) / .06);
}

.rd-seg-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    height: 32px;
    padding: 0 .4rem;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .6));
    font: inherit;
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, color .15s;
}

.rd-seg-btn .rd-opt-ico {
    width: 16px;
    height: 16px;
    color: inherit;
    opacity: .85;
}

.rd-seg-btn .rd-opt-ico svg {
    width: 16px;
    height: 16px;
}

.rd-seg-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-seg-btn:hover {
    background: rgb(var(--c-white) / .06);
    color: rgb(var(--c-white));
}

.rd-seg-btn[aria-checked="true"] {
    background: rgba(var(--rd-ac), .18);
    color: var(--rd-ac-light);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.rd-seg-btn[aria-checked="true"] .rd-opt-ico {
    color: var(--rd-ac-fg);
    opacity: 1;
}

.rd-seg-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--rd-ac), .5);
}

/* native select dressed as a button (page picker) */
.rd-sel-wrap {
    position: relative;
    display: flex;
}

.rd-sel {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 40px;
    padding: 0 1.75rem 0 .75rem;
    border-radius: .6rem;
    border: 1px solid rgb(var(--c-white) / .08);
    background: rgb(var(--c-white) / .05);
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .85));
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
    outline: none;
}

.rd-sel:hover {
    background: rgb(var(--c-white) / .1);
}

.rd-sel:focus-visible {
    border-color: rgba(var(--rd-ac), .6);
}

.rd-sel option {
    background: rgb(var(--c-surface));
    color: rgb(var(--c-white));
}

.rd-sel-wrap::after {
    content: "";
    position: absolute;
    right: .8rem;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -5px;
    border-right: 2px solid rgb(var(--c-white) / .45);
    border-bottom: 2px solid rgb(var(--c-white) / .45);
    transform: rotate(45deg);
    pointer-events: none;
}

.rd-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
}

/* the offline download button is rendered by offline.js inside this tile */
.rd-tool {
    justify-content: flex-start;
    padding-left: .5rem;
}

.rd-tool .mo-btn {
    width: 28px;
    height: 28px;
    padding: 5px;
    flex: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.rd-hint {
    margin: .4rem .15rem 0;
    font-size: .7rem;
    line-height: 1.5;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .3));
}

.rd-hint kbd {
    display: inline-block;
    min-width: 1.2rem;
    padding: 0 .3rem;
    border-radius: .3rem;
    border: 1px solid rgb(var(--c-white) / .12);
    background: rgb(var(--c-white) / .05);
    font: inherit;
    font-size: .65rem;
    text-align: center;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .55));
}

.rd-menu-foot {
    display: flex;
    gap: .4rem;
    padding: .7rem .85rem;
    border-top: 1px solid rgb(var(--c-white) / .06);
}

/* ── Settings rows (components/reader-settings) ──
   Switch and slider rows wear the same chrome as the buttons around them; a
   .rd-group stacks several of them in one card with hairlines between. */
.rd-row {
    padding: 0;
}

.rd-row-toggle,
.rd-row-slider,
.rd-group {
    border-radius: .6rem;
    border: 1px solid rgb(var(--c-white) / .08);
    background: rgb(var(--c-white) / .05);
}

.rd-group {
    overflow: hidden;
}

.rd-group > .rd-row-toggle,
.rd-group > .rd-row-slider {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.rd-group > * + * {
    border-top: 1px solid rgb(var(--c-white) / .06);
}

.rd-row-slider {
    padding: .5rem .7rem .35rem;
}

.rd-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .1rem;
}

.rd-row-label {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .78));
}

.rd-row-label-block {
    display: block;
    margin: .1rem 0 .45rem .15rem;
}

.rd-row-val {
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .5));
}

.rd-row-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 36px;
    padding: .2rem .55rem .2rem .7rem;
}

/* 36×20 switch with a 14px knob that travels 16px — the travel is what reader.js
   paints inline (translateX(16px)), so it must stay 16 */
.rd-switch {
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgb(var(--c-white) / .12);
    cursor: pointer;
    transition: background .2s;
}

.rd-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    transition: transform .2s;
}

.rd-range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 4px;
    margin: 8px 0 8px;
    border-radius: 999px;
    background: rgb(var(--c-white) / .14);
    outline: none;
    cursor: pointer;
}

.rd-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgb(var(--c-surface));
    background: var(--rd-ac-fg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    cursor: pointer;
}

.rd-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid rgb(var(--c-surface));
    background: var(--rd-ac-fg);
    cursor: pointer;
}

.rd-range::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgb(var(--c-white) / .14);
}

.rd-range:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--rd-ac), .35);
}

/* auto scroll: play button and the speed slider on one line */
.rd-as {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.rd-as-btn {
    flex: none;
    width: 4.9rem;
    height: 32px;
    font-size: .78rem;
    border-color: rgba(var(--rd-ac), .4);
    background: rgba(var(--rd-ac), .15);
    color: var(--rd-ac-light);
}

.rd-as-btn:hover {
    background: rgba(var(--rd-ac), .25);
    color: var(--rd-ac-lighter);
}

.rd-as-speed {
    flex: 1;
    min-width: 0;
}

.rd-as-speed .rd-row-head {
    margin-bottom: 0;
}

.rd-as-speed .rd-range {
    margin: 4px 0 2px;
}

.rd-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
}

.rd-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
}

/* small option buttons (novel theme / font / spacing); the theme ones carry their colours inline as swatches */
.rd-chip {
    height: 34px;
    min-width: 0;
    padding: 0 .5rem;
    border-radius: .5rem;
    border: 1px solid rgb(var(--c-white) / .1);
    background: rgb(var(--c-white) / .06);
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .7));
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.rd-chip:hover {
    border-color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .25));
}

#novel-custom-colors:not(.hidden) {
    display: block;
}

.rd-color {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.rd-color-input {
    width: 32px;
    height: 32px;
    padding: 2px;
    border: 1px solid rgb(var(--c-white) / .12);
    border-radius: .5rem;
    background: rgb(var(--c-white) / .05);
    cursor: pointer;
}

.rd-stepper {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.rd-step {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: .5rem;
    border: 1px solid rgb(var(--c-white) / .1);
    background: rgb(var(--c-white) / .06);
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .8));
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}

.rd-step:hover {
    background: rgb(var(--c-white) / .12);
}

.rd-step-val {
    min-width: 2rem;
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .85));
}

.rd-reset {
    align-self: flex-start;
    margin-top: .4rem;
    padding: .25rem .15rem;
    border: 0;
    background: transparent;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .35));
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s;
}

.rd-reset:hover {
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .7));
}

/* novel (note) chapters: the strip only — no paged modes, fits or progress bar */
.rd-novel .rd-image-only {
    display: none !important;
}

.rd-ui.rd-novel {
    --rd-pb-h: 0px;
}

/* ── Bottom progress bar ── */
#rd-progress {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--rd-bot-off);
    z-index: 51;
    display: flex;
    gap: 2px;
    height: var(--rd-pb-h);
    padding: 0 2px;
    background: rgb(var(--c-page) / .9);
    transition: height .18s ease, right .28s cubic-bezier(.2, .8, .2, 1), bottom .3s ease;
}

@media (min-width: 768px) {
    .rd-menu-open #rd-progress,
    html.rd-chapters-open #rd-progress {
        right: var(--rd-menu-w);
    }
}

.rd-pb-seg {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 2px;
    background: rgb(var(--c-white) / .14);
    cursor: pointer;
    transition: background .15s;
}

.rd-pb-seg.is-read {
    background: rgba(var(--rd-ac), .55);
}

.rd-pb-seg.is-current {
    background: var(--rd-ac-fg);
}

.rd-pb-seg:hover {
    background: var(--rd-ac-light);
}

@media (max-width: 767.98px) {
    /* a 40-50 page chapter still reads as a bar, not a row of dots */
    #rd-progress {
        gap: 1px;
        padding: 0 1px;
    }
}

/* desktop: hovering the bar grows it and shows the page numbers */
@media (min-width: 768px) {
    #rd-progress:hover {
        height: 1.75rem;
    }

    #rd-progress:hover .rd-pb-seg::after {
        content: attr(data-n);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-size: 10px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .75));
    }

    #rd-progress:hover .rd-pb-seg.is-current::after {
        color: #fff;
    }
}

/* lightbar: one continuous line that fills with progress (same thickness
   setting as the segmented bar) */
.rd-pb-light #rd-progress {
    gap: 0;
    padding: 0;
    background: rgb(var(--c-white) / .08);
}

.rd-pb-light .rd-pb-seg {
    border-radius: 0;
    background: transparent;
}

.rd-pb-light .rd-pb-seg.is-read,
.rd-pb-light .rd-pb-seg.is-current {
    background: var(--rd-ac-fg);
}

.rd-pb-hidden #rd-progress {
    display: none;
}

.rd-pb-hidden .rd-pb-dep {
    display: none !important;
}

/* right-to-left paged reading: the bar runs the same way as the pages */
.rd-rtl.rd-paged.rd-pbpos-bottom #rd-progress {
    flex-direction: row-reverse;
}

/* ── Progress bar on the left / right edge: a vertical bar between the bars ── */
.rd-ui.rd-pbpos-left #rd-progress,
.rd-ui.rd-pbpos-right #rd-progress {
    top: var(--rd-top-off);
    bottom: var(--rd-bot-off);
    left: auto;
    right: auto;
    width: var(--rd-pb-h);
    height: auto;
    flex-direction: column;
    padding: 2px 0;
    transition: width .18s ease, top .3s ease, bottom .3s ease, right .28s cubic-bezier(.2, .8, .2, 1);
}

.rd-ui.rd-pbpos-left #rd-progress {
    left: 0;
}

.rd-ui.rd-pbpos-right #rd-progress {
    right: 0;
}

.rd-ui.rd-pbpos-left .rd-pb-seg,
.rd-ui.rd-pbpos-right .rd-pb-seg {
    flex: 1 1 0;
    min-height: 0;
    min-width: 100%;
}

.rd-ui.rd-pbpos-left.rd-pb-light #rd-progress,
.rd-ui.rd-pbpos-right.rd-pb-light #rd-progress {
    padding: 0;
}

@media (min-width: 768px) {
    .rd-ui.rd-pbpos-right.rd-menu-open #rd-progress,
    html.rd-chapters-open .rd-ui.rd-pbpos-right #rd-progress {
        right: var(--rd-menu-w);
    }

    .rd-ui.rd-pbpos-left #rd-progress:hover,
    .rd-ui.rd-pbpos-right #rd-progress:hover {
        width: 1.75rem;
        height: auto;
    }
}

/* ── Pages ── */
.rd-ui #strip-reader {
    position: relative;
}

/* page number pills on the strip (reader settings "Page Numbers") */
.rd-ui .page-num-label {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.rd-ui.rd-paged .page-num-label {
    display: none !important;
}

/* strip: full width / no limit */
.rd-ui.rd-mode-strip.rd-fit-full #strip-reader,
.rd-ui.rd-mode-strip.rd-fit-natural #strip-reader {
    max-width: none !important;
}

.rd-ui.rd-mode-strip.rd-fit-natural #strip-reader {
    overflow-x: auto;
}

.rd-ui.rd-mode-strip.rd-fit-natural .reader-page-ph.is-loaded {
    width: auto;
    display: flex;
    justify-content: center;
}

.rd-ui.rd-mode-strip.rd-fit-natural .reader-page-ph.is-loaded img.reader-page {
    width: auto;
    max-width: none;
}

/* paged modes: only the current page (or spread) is in the flow, centred in the
   space between the bars (a page narrower than the screen is also shorter than it) */
.rd-ui.rd-paged #strip-reader {
    max-width: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: var(--rd-vh);
}

.rd-ui.rd-paged .reader-page-ph {
    display: none;
}

.rd-ui.rd-paged .reader-page-ph.is-current {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: auto;
    max-width: 100%;
    background: transparent;
}

/* fit height is MangaDex's: as tall as the viewport, even if that is wider than
   the column (then the strip scrolls sideways); fit both never overflows */
.rd-ui.rd-paged.rd-fit-height #strip-reader {
    overflow-x: auto;
}

/* a page still loading keeps a page-shaped box the size of the viewport */
.rd-ui.rd-paged .reader-page-ph:not(.is-loaded).is-current {
    aspect-ratio: auto;
    width: min(100%, calc(var(--rd-vh) * 0.7));
    height: var(--rd-vh);
    background: rgb(var(--c-white) / .04);
}

.rd-ui.rd-paged .reader-page-ph.is-loaded.is-current img.reader-page {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

.rd-ui.rd-paged.rd-fit-height .reader-page-ph.is-current {
    max-width: none;
}

.rd-ui.rd-paged.rd-fit-height .reader-page-ph.is-loaded.is-current img.reader-page {
    height: var(--rd-vh);
    width: auto;
    max-width: none;
}

.rd-ui.rd-paged.rd-fit-width .reader-page-ph.is-current {
    width: 100%;
}

.rd-ui.rd-paged.rd-fit-width .reader-page-ph.is-loaded.is-current img.reader-page {
    width: 100%;
    height: auto;
}

.rd-ui.rd-paged.rd-fit-both .reader-page-ph.is-loaded.is-current img.reader-page {
    max-height: var(--rd-vh);
    max-width: 100%;
    width: auto;
    height: auto;
}

.rd-ui.rd-paged.rd-fit-natural #strip-reader {
    overflow-x: auto;
}

.rd-ui.rd-paged.rd-fit-natural .reader-page-ph.is-loaded.is-current img.reader-page {
    width: auto;
    height: auto;
    max-width: none;
}

/* double page: two pages side by side; wide (landscape) pages stand alone (reader-ui.js) */
.rd-ui.rd-mode-double .reader-page-ph.is-current {
    flex: 0 1 auto;
    max-width: 50%;
}

.rd-ui.rd-mode-double .reader-page-ph.is-current.is-wide {
    max-width: 100%;
}

.rd-ui.rd-mode-double.rd-fit-width .reader-page-ph.is-current {
    flex: 1 1 50%;
    width: 50%;
}

.rd-ui.rd-mode-double.rd-fit-width .reader-page-ph.is-current.is-wide {
    flex-basis: 100%;
    width: 100%;
}

.rd-ui.rd-mode-double .reader-page-ph:not(.is-loaded).is-current {
    width: min(50%, calc(var(--rd-vh) * 0.7));
}

.rd-ui.rd-rtl.rd-mode-double #strip-reader {
    flex-direction: row-reverse;
}

/* ── Page-turn effect ("Page turn": slide / book flip) ──
   reader-ui.js marks the pages that leave (.rd-leaving, kept at their size and
   laid over the strip) and arrive (.rd-entering), with the turn's direction
   (.rd-fwd / .rd-bwd, in reading order). The flip rotates the leaving page
   about its spine edge — the left edge reading left-to-right, the right edge
   right-to-left — with a darkening shade, revealing the next page beneath. */
.rd-ui.rd-paged #strip-reader {
    perspective: 1800px;
}

.rd-ui.rd-paged .reader-page-ph.rd-leaving {
    position: absolute;
    inset: 0;
    z-index: 3;
    align-items: center;
    pointer-events: none;
}

/* slide: the pages move sideways in reading order */
.rd-turn-slide .reader-page-ph.rd-leaving.rd-fwd {
    animation: rd-slide-out-l .24s ease-in forwards;
}

.rd-turn-slide .reader-page-ph.rd-leaving.rd-bwd {
    animation: rd-slide-out-r .24s ease-in forwards;
}

.rd-turn-slide .reader-page-ph.rd-entering.rd-fwd {
    animation: rd-slide-in-r .28s cubic-bezier(.2, .8, .2, 1);
}

.rd-turn-slide .reader-page-ph.rd-entering.rd-bwd {
    animation: rd-slide-in-l .28s cubic-bezier(.2, .8, .2, 1);
}

.rd-turn-slide.rd-rtl .reader-page-ph.rd-leaving.rd-fwd {
    animation-name: rd-slide-out-r;
}

.rd-turn-slide.rd-rtl .reader-page-ph.rd-leaving.rd-bwd {
    animation-name: rd-slide-out-l;
}

.rd-turn-slide.rd-rtl .reader-page-ph.rd-entering.rd-fwd {
    animation-name: rd-slide-in-l;
}

.rd-turn-slide.rd-rtl .reader-page-ph.rd-entering.rd-bwd {
    animation-name: rd-slide-in-r;
}

@keyframes rd-slide-out-l {
    to {
        transform: translateX(-22%);
        opacity: 0;
    }
}

@keyframes rd-slide-out-r {
    to {
        transform: translateX(22%);
        opacity: 0;
    }
}

@keyframes rd-slide-in-r {
    from {
        transform: translateX(22%);
        opacity: .2;
    }
}

@keyframes rd-slide-in-l {
    from {
        transform: translateX(-22%);
        opacity: .2;
    }
}

/* book flip: the page itself (the image) folds away about its own spine edge —
   left edge for a forward turn reading left-to-right — darkening as it turns,
   with its own perspective() so the pivot is the page's edge, not the strip's */
.rd-turn-flip .reader-page-ph.rd-leaving img.reader-page {
    backface-visibility: hidden;
    will-change: transform, filter;
}

.rd-turn-flip .reader-page-ph.rd-leaving.rd-fwd img.reader-page {
    transform-origin: left center;
    animation: rd-flip-out-l .36s cubic-bezier(.45, 0, .6, 1) forwards;
}

.rd-turn-flip .reader-page-ph.rd-leaving.rd-bwd img.reader-page {
    transform-origin: right center;
    animation: rd-flip-out-r .36s cubic-bezier(.45, 0, .6, 1) forwards;
}

.rd-turn-flip.rd-rtl .reader-page-ph.rd-leaving.rd-fwd img.reader-page {
    transform-origin: right center;
    animation-name: rd-flip-out-r;
}

.rd-turn-flip.rd-rtl .reader-page-ph.rd-leaving.rd-bwd img.reader-page {
    transform-origin: left center;
    animation-name: rd-flip-out-l;
}

.rd-turn-flip .reader-page-ph.rd-entering {
    animation: rd-flip-reveal .36s ease-out;
}

@keyframes rd-flip-out-l {
    from {
        transform: perspective(1800px) rotateY(0deg);
        filter: brightness(1);
    }

    to {
        transform: perspective(1800px) rotateY(-100deg);
        filter: brightness(.45);
    }
}

@keyframes rd-flip-out-r {
    from {
        transform: perspective(1800px) rotateY(0deg);
        filter: brightness(1);
    }

    to {
        transform: perspective(1800px) rotateY(100deg);
        filter: brightness(.45);
    }
}

@keyframes rd-flip-reveal {
    from {
        opacity: .55;
        transform: scale(.985);
    }
}

/* double page book flip (reader-ui.js animateBookTurn): a sheet with two faces
   hinged on the spine; .rd-flip-l = a right-hand page swinging left, .rd-flip-r
   = a left-hand page swinging right; the page it lands on stays visible under
   it (.rd-sheet-static) until it has landed */
.rd-sheet,
.rd-sheet-static {
    position: absolute;
    pointer-events: none;
}

.rd-sheet-static {
    z-index: 3;
    overflow: hidden;
}

.rd-sheet {
    z-index: 4;
    transform-style: preserve-3d;
    will-change: transform;
}

.rd-sheet-static img,
.rd-sheet-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.rd-sheet-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.rd-sheet-back {
    transform: rotateY(180deg);
}

.rd-sheet-face::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .05) 70%);
}

.rd-sheet.rd-flip-l {
    transform-origin: left center;
    animation: rd-sheet-l .62s cubic-bezier(.55, .05, .45, .95) forwards;
}

.rd-sheet.rd-flip-r {
    transform-origin: right center;
    animation: rd-sheet-r .62s cubic-bezier(.55, .05, .45, .95) forwards;
}

/* the shade sits on the spine side: left for a right-hand page, right for a left-hand one */
.rd-sheet.rd-flip-r .rd-sheet-front::after,
.rd-sheet.rd-flip-l .rd-sheet-back::after {
    background: linear-gradient(270deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .05) 70%);
}

.rd-sheet-front::after {
    animation: rd-sheet-shade-front .62s linear forwards;
}

.rd-sheet-back::after {
    animation: rd-sheet-shade-back .62s linear forwards;
}

@keyframes rd-sheet-l {
    from {
        transform: perspective(2400px) rotateY(0deg);
    }

    to {
        transform: perspective(2400px) rotateY(-180deg);
    }
}

@keyframes rd-sheet-r {
    from {
        transform: perspective(2400px) rotateY(0deg);
    }

    to {
        transform: perspective(2400px) rotateY(180deg);
    }
}

@keyframes rd-sheet-shade-front {
    from {
        opacity: 0;
    }

    50% {
        opacity: .9;
    }

    to {
        opacity: .9;
    }
}

@keyframes rd-sheet-shade-back {
    from {
        opacity: .9;
    }

    50% {
        opacity: .9;
    }

    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rd-ui .reader-page-ph.rd-leaving,
    .rd-ui .reader-page-ph.rd-entering,
    .rd-ui .reader-page-ph.rd-leaving img.reader-page,
    .rd-sheet,
    .rd-sheet-face::after {
        animation: none !important;
    }
}

/* click zones over the page: left/right third turn pages (reading direction aware) */
.rd-zone {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%;
    z-index: 3;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.rd-ui.rd-paged .rd-zone {
    display: block;
}

.rd-zone-left {
    left: 0;
}

.rd-zone-right {
    right: 0;
}

.rd-zone::after {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55) no-repeat center / 20px 20px;
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
}

.rd-zone-left::after {
    content: "";
    left: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
}

.rd-zone-right::after {
    content: "";
    right: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

@media (hover: hover) {
    .rd-zone:hover::after {
        opacity: .9;
    }
}

/* ── End of chapter card ── */
.rd-end {
    max-width: 720px;
    margin: 2.5rem auto 0;
    padding: 1.75rem 1.25rem 1.5rem;
    border: 1px solid rgb(var(--c-white) / .07);
    border-radius: 1rem;
    background: rgb(var(--c-surface));
    text-align: center;
}

/* paged: the card waits below the fold (and below a phone's bottom bar) */
.rd-ui.rd-paged .rd-end {
    margin-top: calc(var(--rd-bot-off) + 1.5rem);
}

.rd-end-kicker {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .35));
}

.rd-end-title {
    margin: .35rem 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .95));
}

.rd-end-sub {
    margin: .35rem 0 0;
    font-size: .82rem;
    color: rgb(var(--c-white) / calc(var(--ta-b, 0) + var(--ta-m, 1) * .5));
}

.rd-end-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.25rem;
}

.rd-end-actions .rd-btn {
    min-width: 9rem;
    box-shadow: none;
}

.rd-end-next {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 40px;
    min-width: 9rem;
    padding: 0 1.25rem;
    border-radius: .6rem;
    background: var(--rd-ac-pill);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    box-shadow: none;
    transition: opacity .15s;
}

.rd-end-next:hover {
    opacity: .9;
}

.rd-end-next svg {
    width: 16px;
    height: 16px;
}

/* the strip's top edge may hide under the fixed top bar on phones when jumping to a page */
.rd-ui .reader-page-ph {
    scroll-margin-top: var(--rd-top-off);
}