/* ============================================================
   WHATEVER PEOPLE SAY I AM - MAGAZINE READER ENGINE (v2.2)
   Covers: the paginated comic reader shell used by every
   reader-whatever-[theme].html file.
   Deliberately generic - no theme-specific styling in this file,
   per the reader configuration guide. Reusable as-is for future
   titles (Dawn of the Unread etc.) without modification.
   Companion to chassis.css - loads --brand-orange only, for the
   chevron hover state. Does not use --brand-primary, since the
   reading environment is intentionally neutral/dark rather than
   carrying any one title's brand colour.
   v1.0: First build, against the reader configuration guide -
         PREFIX/ISSUE/TOTAL_PAGES/THEME_URL config block, chevron
         navigation, last-page-forward-exits-to-THEME_URL behaviour.
         Two additions beyond the spec, both flagged as optional:
         a small close control (top-left, back to the synopsis
         page) since the spec's only exit route is reading to the
         last page and clicking forward, and a page counter
         ("3 / 8") for orientation. Both easy to remove if unwanted.
   v1.1: Page originally shrank to fit both width AND height
         (max-width: 95vw, max-height: 92vh), so the whole page was
         always visible but could end up too small to read on a
         dense page. Changed to fit width only (max-width: 95vw,
         height: auto) with the reader shell scrolling vertically
         when the page is taller than the viewport. Switched the
         shell from flex centering to text-align: center +
         display: inline-block - flex centering with overflow can
         make content above the centre point unreachable by
         scrolling in some browsers, so a top-anchored, padded,
         scrollable layout was used instead. Chevron nav, close
         control, and page counter all stay position: fixed, so
         they remain accessible regardless of scroll position.
   v1.2: Added .magazine-scroll-cue - a small bouncing down-chevron
         with a "scroll" label, shown only when a page is actually
         taller than the viewport (magazine.js toggles .is-scrollable
         on the reader shell after each page loads). Fades out once
         the reader nears the bottom of the page and reappears if
         they scroll back up, via .is-hidden. Without this there was
         no visual cue at all that a page could continue below the
         fold - close X and chevrons were the only affordances, and
         neither hints at vertical scroll.
   v1.3: Removed the v1.2 scroll cue entirely - an invented icon is
         a weaker affordance than the browser's own scrollbar, which
         everyone already recognises. Styled the native scrollbar
         instead (scrollbar-width/scrollbar-color for Firefox,
         ::-webkit-scrollbar for Chrome/Safari/Edge) so it's clearly
         visible against the dark reader background, rather than
         relying on default OS scrollbar styling, which on macOS in
         particular tends to be a thin overlay that's easy to miss.
   v1.4: Chevrons and close control rebuilt to match .back-to-top in
         chassis.css exactly - the same "up arrow" control used
         elsewhere on the site. 46x46, #E0E0E099 background, no
         border-radius (it's a square, not a circle), brand-orange
         on hover, transition: all 0.3s ease. Chevrons use the same
         construction as .chevron-up (10x10, 2px white borders on
         two adjacent sides, rotated), just rotated left/right
         instead of up - opacity/hover-colour on the chevron itself
         was removed, since chevron-up has none, only the button
         background changes on hover. Nav buttons changed from
         full-height invisible click strips to actual 46x46 fixed
         buttons, vertically centred at the left/right edges.
         Mobile breakpoint now matches back-to-top's own mobile
         treatment (44x44, nudged position) rather than a separate
         percentage-width/chevron-size scheme.
   v1.5: Added -webkit-user-drag: none (and user-drag: none) to
         .magazine-page. Images are draggable by default in HTML -
         a mouse or touch drag across the page image was triggering
         the browser's own native drag cursor/ghost preview on top
         of the swipe gesture, which is what showed up as an "ugly
         arrow". Backed up with draggable="false" on the img tag
         itself and a dragstart preventDefault() in magazine.js,
         since -webkit-user-drag isn't honoured identically by every
         browser and the three together give the most reliable
         cross-browser block.
   v2.0: Rebuilt around the same three-slot filmstrip technique used
         in loader.js/gallery.css's own image lightbox (prev/curr/next
         slots in a 300%-wide track, animated via transform:
         translateX(), snapped back instantly once the page underneath
         has changed) - Paul confirmed the sliding motion is genuinely
         useful feedback, not just decoration, so it was worth the
         restructure rather than staying with the instant image-swap.
         Two things had to be adapted rather than copied directly,
         since the reader scrolls and the lightbox doesn't:
         - Vertical scroll moved from .magazine-reader down onto each
           individual .magazine-slot. The track only ever needs to
           move horizontally, so if the outer shell still owned
           vertical scroll, that scroll position would have no
           connection to which slot the reader was actually looking
           at, and would carry over incorrectly across the slide.
           Each slot scrolls independently now, and the visible
           scrollbar styling (see v1.3) moved from .magazine-reader
           to .magazine-slot to match.
         - No looping. The lightbox loops infinitely
           ((index - 1 + total) % total) because every image has a
           neighbour on both sides. Page 1 has no real previous page,
           and the last page's "next" is the exit to THEME_URL, not
           another comic page - both edges are handled in magazine.js
           before any animation starts, rather than sliding toward a
           slot that doesn't represent anything.
   v2.1: A thumbnail-strip position indicator was proposed (small
         per-page thumbnails along the bottom, current page marked
         with an orange border) as a stronger alternative to the text
         counter, but was dropped after Paul reviewed a Photoshop
         mockup and judged it too fussy, a distraction from the
         comic itself. Reverted to the plain counter, just bumped up
         in size (13px to 16px desktop, 12px to 14px on mobile) since
         that was the one part of the original counter worth keeping
         from the exercise - easier to read without needing a whole
         new UI element to do it.
   v2.2: Counter given the same staged grey-box treatment as
         .magazine-close and .magazine-nav (#E0E0E099 background,
         no border-radius, no opacity dimming - the box itself now
         carries the contrast rather than a faded floating text
         label). Plain text at reduced opacity was getting lost
         against busy page artwork. Height matches the 46px/44px
         (desktop/mobile) used by the other two controls; width
         stays flexible since the text itself varies ("3 / 8" vs
         "11 / 11").
   ============================================================ */

:root {
    --reader-bg: #0a0a0a;
}

/* --- 1. READER SHELL --- */
html.reader-active, body.reader-active {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--reader-bg);
}

.magazine-reader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--reader-bg);
    overflow: hidden;
    z-index: 1000;
}

/* --- 2. THE FILMSTRIP TRACK --- */
/* Same mechanism as loader.js's lightbox: three slots side by side,
   the track is 300% wide (three viewport-widths), sitting at
   translateX(-33.33%) by default so the middle slot (current page)
   fills the screen, with the previous and next pages already loaded
   and waiting just off-screen either side. */
.magazine-track {
    display: flex;
    width: 300%;
    height: 100%;
    transform: translateX(-33.33%);
    will-change: transform;
}

.magazine-slot {
    width: 33.333%;
    height: 100%;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    padding: 60px 0;
    box-sizing: border-box;
}

/* --- 3. THE PAGE IMAGE --- */
.magazine-page {
    max-width: 95%;
    width: auto;
    height: auto;
    display: inline-block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* --- 4. CHEVRON NAVIGATION --- */
/* Matches .back-to-top in chassis.css exactly: 46x46, same
   background/hover, no border-radius, same 2px-border chevron
   construction (just rotated for left/right instead of up). */
.magazine-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    background-color: #E0E0E099;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: all 0.3s ease;
    z-index: 1010;
}

.magazine-nav:hover {
    background-color: var(--brand-orange);
}

.magazine-nav-prev {
    left: 25px;
}

.magazine-nav-next {
    right: 25px;
}

.magazine-nav[disabled] {
    cursor: default;
    opacity: 0;
    pointer-events: none;
}

.magazine-chevron {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
}

/* chevron-up's margin-top: 4px nudge was tuned for that specific
   rotation - left/right sit inside a flex-centered button without
   it for now, may want optical fine-tuning once visible. */
.magazine-nav-prev .magazine-chevron {
    transform: rotate(-45deg);
}

.magazine-nav-next .magazine-chevron {
    transform: rotate(135deg);
}

/* --- 5. PAGE COUNTER (optional addition, not in spec) --- */
.magazine-counter {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    height: 46px;
    display: flex;
    align-items: center;
    background-color: #E0E0E099;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    letter-spacing: 0.05em;
    padding: 0 18px;
    box-sizing: border-box;
    z-index: 1010;
    pointer-events: none;
}

/* --- 6. VISIBLE SCROLLBAR --- */
/* Standard browser scrollbar, styled to actually be visible against
   the dark reader background rather than a custom invented cue -
   default OS scrollbars (particularly macOS overlay scrollbars) can
   be near-invisible until the moment you scroll. Lives on each
   .magazine-slot now, not .magazine-reader, since that's where
   vertical scroll actually happens as of v2.0. */
.magazine-slot {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.4) transparent;
}

.magazine-slot::-webkit-scrollbar {
    width: 10px;
}

.magazine-slot::-webkit-scrollbar-track {
    background: transparent;
}

.magazine-slot::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.4);
    border-radius: 5px;
}

.magazine-slot::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,0.6);
}

/* --- 7. CLOSE CONTROL (optional addition, not in spec) --- */
.magazine-close {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 46px;
    height: 46px;
    background-color: #E0E0E099;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    line-height: 1;
    z-index: 1010;
    transition: all 0.3s ease;
}

.magazine-close:hover {
    background-color: var(--brand-orange);
    color: #ffffff;
}

/* --- 8. RESPONSIVE --- */
@media (max-width: 700px) {
    .magazine-nav {
        width: 44px;
        height: 44px;
    }
    .magazine-nav-prev {
        left: 10px;
    }
    .magazine-nav-next {
        right: 10px;
    }
    .magazine-close {
        top: 10px;
        left: 10px;
        width: 44px;
        height: 44px;
    }
    .magazine-counter {
        bottom: 10px;
        height: 44px;
        font-size: 14px;
    }
}