/*
 * Comic Reader — Chapter Reader Styles
 * Loaded only on /{base}/{slug}/ep-{N}/ pages.
 *
 * Architecture:
 *   - .crc-reader            outer wrapper (full-width dark background)
 *   - .crc-reader-bar        sticky top + bottom nav bars
 *   - .crc-reader__images    vertical image strip
 *   - .crc-reader__page      each manga page (figure element)
 *   - .crc-nav-btn           prev / next navigation buttons
 */

/* ── Reader root ─────────────────────────────────────────────────────────── */
.crc-reader {
    background: #0a0a0a;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Sticky navigation bars ──────────────────────────────────────────────── */
.crc-reader-bar {
    background: rgba(15, 15, 15, 0.97);
    border-bottom: 1px solid #2a2a2a;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 200;
}

.crc-reader-bar--top {
    position: sticky;
    top: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.6);
}

.crc-reader-bar--bottom {
    border-top: 1px solid #2a2a2a;
    border-bottom: none;
    margin-top: auto;
}

.crc-reader-bar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
    max-width: 900px;
    margin-inline: auto;
    padding: .6rem 1rem;
}

.crc-reader-bar__prev { justify-self: start; }
.crc-reader-bar__title {
    text-align: center;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    min-width: 0;
}
.crc-reader-bar__next { justify-self: end; }

.crc-reader-bar__comic-title {
    font-size: .8rem;
    font-weight: 700;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.crc-reader-bar__comic-title:hover { color: #e8552a; }

.crc-reader-bar__chapter-info {
    font-size: .72rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.crc-reader-bar__chapter-title { color: #888; }

/* ── Reading mode switch ────────────────────────────────────────────────── */
.crc-reader-mode-switch {
    margin-top: .35rem;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .2rem;
    border: 1px solid #303030;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.9);
}

.crc-mode-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #9e9e9e;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    padding: .42rem .72rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.crc-mode-btn:hover {
    color: #f0f0f0;
}

.crc-mode-btn.is-active {
    background: #e8552a;
    color: #fff;
}

.crc-mode-btn:focus-visible {
    outline: 2px solid #e8552a;
    outline-offset: 2px;
}

.crc-reader-bar__center { justify-self: center; }
.crc-reader-bar__center-icon {
    display: none;
    line-height: 1;
}

/* Mobile footer toggle (hidden on desktop) */
.crc-reader-bar__mobile-toggle {
    display: none;
}

/* ── Nav buttons ─────────────────────────────────────────────────────────── */
.crc-nav-btn {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .75rem;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, color .2s;
    white-space: nowrap;
    min-width: 80px;
    min-height: 44px; /* WCAG touch target */
}

.crc-nav-btn--prev { flex-direction: row; }
.crc-nav-btn--next { flex-direction: row-reverse; }

.crc-nav-btn--prev,
.crc-nav-btn--next {
    background: rgba(40,40,40,.8);
    color: #ccc;
    border: 1px solid #333;
}
.crc-nav-btn--prev:hover,
.crc-nav-btn--next:hover {
    background: #e8552a;
    border-color: #e8552a;
    color: #fff;
}

.crc-nav-btn--back {
    background: rgba(40,40,40,.8);
    color: #ccc;
    border: 1px solid #333;
    min-width: unset;
}
.crc-nav-btn--back:hover { background: #333; color: #fff; }

.crc-nav-btn--disabled {
    opacity: .3;
    cursor: not-allowed;
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #555;
    min-width: 80px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .75rem;
    border-radius: 6px;
}

.crc-nav-btn__arrow {
    font-size: 1.3rem;
    line-height: 1;
    font-style: normal;
}

.crc-nav-btn__label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.crc-nav-btn__hint {
    font-size: .68rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.crc-nav-btn--prev:hover .crc-nav-btn__hint,
.crc-nav-btn--next:hover .crc-nav-btn__hint { color: rgba(255,255,255,.7); }

.crc-nav-btn__ch { font-size: .82rem; font-weight: 600; }

/* ── Breadcrumb in reader ────────────────────────────────────────────────── */
.crc-reader__breadcrumb {
    background: #111;
    border-bottom: 1px solid #1e1e1e;
    padding-block: .5rem;
    margin-bottom: 0;
}

/* ── Paged mode controls ────────────────────────────────────────────────── */
.crc-page-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .55rem .85rem;
    background: #101010;
    border-bottom: 1px solid #242424;
}

.crc-page-nav[hidden] { display: none !important; }

.crc-page-nav__btn {
    appearance: none;
    border: 1px solid #3a3a3a;
    background: #1a1a1a;
    color: #d8d8d8;
    border-radius: 999px;
    min-height: 38px;
    min-width: 110px;
    padding: .42rem .72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    transition: background .2s, border-color .2s, color .2s, opacity .2s;
}

.crc-page-nav__btn:hover {
    background: #242424;
    border-color: #565656;
}

.crc-page-nav__btn:focus-visible {
    outline: 2px solid #e8552a;
    outline-offset: 2px;
}

.crc-page-nav__btn.is-disabled,
.crc-page-nav__btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.crc-page-nav__btn-arrow {
    font-size: 1rem;
    line-height: 1;
}

.crc-page-nav__status {
    color: #cfcfcf;
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.crc-page-nav__label {
    color: #8f8f8f;
    font-size: .74rem;
}

/* ── Image strip ─────────────────────────────────────────────────────────── */
.crc-reader__images {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: #0a0a0a;
    padding-block: .5rem 0;
}

/* ── Individual page ─────────────────────────────────────────────────────── */
.crc-reader__page {
    width: 100%;
    max-width: 900px;
    margin: 0;
    line-height: 0; /* eliminate inline gap */
    position: relative;
}

/* ── Paged mode layout ──────────────────────────────────────────────────── */
.crc-mode-paged .crc-reader__images {
    padding-block: .9rem;
}

.crc-mode-paged .crc-reader__page {
    display: none;
}

.crc-mode-paged .crc-reader__page.is-active {
    display: block;
    width: min(100%, 900px);
}

.crc-reader__img {
    width: 100%;
    height: auto;
    display: block;
    /* Reserve space before loaded — prevents layout shift. */
    min-height: 200px;
    background: #141414;
    /* Smooth fade-in when lazy-loaded */
    opacity: 0;
    transition: opacity .3s ease;
}

/* JS sets .loaded class via IntersectionObserver */
.crc-reader__img.crc-loaded { opacity: 1; }

/* Ensure images that loaded without JS also show */
.crc-reader__img[complete="true"],
.no-js .crc-reader__img { opacity: 1; }

/* ── Keyboard shortcut hint ──────────────────────────────────────────────── */
.crc-reader__keyboard-hint {
    position: fixed;
    bottom: 80px;
    right: 1rem;
    background: rgba(0,0,0,.7);
    color: #888;
    font-size: .72rem;
    padding: .35rem .65rem;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
    z-index: 300;
}
.crc-reader__keyboard-hint.visible { opacity: 1; }

kbd {
    display: inline-block;
    padding: .1rem .3rem;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 3px;
    font-size: .7rem;
    color: #ccc;
    font-family: inherit;
}

/* ── Body class override: hide site header/footer in reader mode ─────────── */
body.crc-is-reader .crc-site-header,
body.crc-is-reader .crc-site-footer { display: none; }

body.crc-is-reader #main-content { display: contents; }

/* ── Mobile adjustments ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .crc-reader-bar--bottom {
        position: sticky;
        bottom: 0;
        z-index: 260;
        background: rgba(12, 12, 12, 0.98);
    }

    .crc-reader-bar__mobile-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        appearance: none;
        border: 0;
        border-top: 1px solid #2a2a2a;
        border-bottom: 1px solid #2a2a2a;
        background: #111;
        color: #d2d2d2;
        font-size: .74rem;
        font-weight: 700;
        line-height: 1;
        padding: .58rem .75rem;
        cursor: pointer;
        letter-spacing: .01em;
    }

    .crc-reader-bar__mobile-toggle:focus-visible {
        outline: 2px solid #e8552a;
        outline-offset: -2px;
    }

    .crc-reader-bar--bottom.is-collapsed .crc-reader-bar__inner {
        display: none;
    }

    .crc-reader-bar__inner {
        display: flex;
        gap: .4rem;
        padding: .5rem .75rem;
        justify-content: space-between;
    }

    .crc-reader-bar__title {
        grid-column: 1 / -1;
        order: -1;
    }

    .crc-reader-bar__prev { justify-self: start; }
    .crc-reader-bar__next { justify-self: end; }
    .crc-reader-bar__center { grid-column: 1 / -1; justify-self: center; }

    /* Bottom bar: force stable 3-column layout so next button stays clickable */
    .crc-reader-bar--bottom .crc-reader-bar__inner {
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto;
    }

    .crc-reader-bar--bottom .crc-reader-bar__prev {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .crc-reader-bar--bottom .crc-reader-bar__center {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }

    .crc-reader-bar--bottom .crc-reader-bar__next {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .crc-reader-bar__center .crc-btn {
        min-width: 44px;
        min-height: 38px;
        padding: .35rem .52rem;
        border-width: 1px;
        gap: 0;
    }

    .crc-reader-bar__center-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.03rem;
    }

    .crc-reader-bar__center-text {
        display: none;
    }

    .crc-nav-btn__ch { display: none; }

    .crc-nav-btn {
        padding: .4rem .6rem;
        min-width: 60px;
    }

    .crc-reader-mode-switch {
        margin-top: .3rem;
        max-width: 100%;
    }

    .crc-mode-btn {
        font-size: .68rem;
        padding: .38rem .56rem;
    }

    .crc-page-nav {
        gap: .5rem;
        padding: .5rem .55rem;
    }

    .crc-page-nav__btn {
        min-width: 92px;
        font-size: .72rem;
        padding: .35rem .55rem;
    }

    .crc-page-nav__status {
        font-size: .75rem;
    }

    .crc-page-nav__label {
        display: none;
    }

    .crc-reader__page { max-width: 100vw; }

    .crc-reader__keyboard-hint { display: none; }
}

/* ── Print (hide nav) ────────────────────────────────────────────────────── */
@media print {
    .crc-reader-bar { display: none; }
    .crc-reader__img { opacity: 1 !important; }
}