/* ============================================================
   Flipbooks – Frontend Styles  v2.6.2
   • Edition archive  (.fb-archive)
   • Lightbox         (#fbv-lightbox)
   • Viewer           (.fb-viewer)
   ============================================================ */

/* ── Theme max-width override ─────────────────────────────── */
/* Breaks the archive out of narrow theme wrappers (e.g. .dp-page-content) */
.dp-page-content:has(.fb-archive) {
    max-width: 100% !important;
    width: 100% !important;
}

/* ── Reset ───────────────────────────────────────────────── */
.fb-archive *,
.fb-viewer *,
#fbv-lightbox * {
    box-sizing: border-box;
}

/* ============================================================
   EDITION ARCHIVE  — light theme
   ============================================================ */
.fb-archive {
    width: 100%;
    font-family: inherit; /* inherits the active theme's font */
    font-size: 15px;
}

/* Override theme paragraph margin inside the archive wrapper */
.dp-page-content p {
    margin-bottom: 5px !important;
}

/* ── Filter bar wrapper ───────────────────────────────────── */
/* Desktop: single row — pills on left, search pushed to far right */
.fb-ar-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 16px 0;
}

/* Pills: transparent wrapper so pill buttons are direct flex children on desktop */
.fb-ar-pills {
    display: contents;
}

/* Search pushed to the far right */
.fb-ar-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 999px;
    padding: 7px 16px;
    color: #c0c0c0;
    font-size: 12px;
    flex-shrink: 0;
}

.fb-search-input {
    background: none;
    border: none;
    outline: none;
    font-size: 12px;
    color: #555;
    font-family: inherit;
    width: 160px;
    min-width: 0;
}

/* Mobile: search full-width on top, pills as horizontal scrollable row */
@media (max-width: 640px) {
    .fb-ar-filters {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 10px;
    }
    .fb-ar-pills {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding-bottom: 2px;
        order: 2; /* pills go below search */
    }
    .fb-ar-pills::-webkit-scrollbar { display: none; }
    .fb-ar-search {
        order: 1; /* search goes on top */
        margin-left: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .fb-search-input {
        width: 100%;
    }
}

/* ── Year filter pills — light mode ──────────────────────── */
.fb-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 11px 28px;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--fb-header-color, #284272) 35%, transparent);
    background: transparent;
    color: var(--fb-header-color, #284272);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s, box-shadow 0.18s;
    white-space: nowrap;
    line-height: 1;
    font-weight: 500;
}

.fb-filter-pill:hover {
    border-color: var(--fb-header-color, #284272);
    background: color-mix(in srgb, var(--fb-header-color, #284272) 8%, transparent);
    color: var(--fb-header-color, #284272);
}

.fb-filter-pill.is-active {
    background: var(--fb-header-color, #284272);
    border-color: var(--fb-header-color, #284272);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--fb-header-color, #284272) 40%, transparent);
}

/* ── Year filter pills — dark mode ───────────────────────── */
.dark-mode .fb-filter-pill {
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
}

.dark-mode .fb-filter-pill:hover {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.dark-mode .fb-filter-pill.is-active {
    background: var(--fb-header-color, rgba(255,255,255,0.2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* ── Search bar — dark mode ───────────────────────────────── */
.dark-mode .fb-ar-search {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.35);
}
.dark-mode .fb-search-input {
    color: rgba(255,255,255,0.75);
}
.dark-mode .fb-search-input::placeholder {
    color: rgba(255,255,255,0.3);
}

/* ── Archive labels + divider — dark mode ────────────────── */
.dark-mode .fb-card-label {
    color: rgba(255,255,255,0.55);
}
.dark-mode .fb-ar-section-lbl {
    color: rgba(255,255,255,0.35) !important;
}
.dark-mode .fb-ar-current {
    border-right-color: rgba(255,255,255,0.08);
}
.dark-mode .fb-ar-current.fb-ar-current { /* mobile border-bottom */
    border-bottom-color: rgba(255,255,255,0.08);
}
.dark-mode .fb-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}
.dark-mode .fb-card:hover {
    border-color: rgba(255,255,255,0.22);
}

/* ── Two-column body ─────────────────────────────────────── */
.fb-ar-body {
    display: grid;
    --current-col: 40%; /* ← edit this % to resize the current-edition column */
    grid-template-columns: var(--current-col) 1fr;
    padding: 24px 0;
    gap: 0;
}

@media (max-width: 700px) {
    .fb-ar-body { grid-template-columns: 1fr; padding: 16px 0; }
    .fb-ar-current { border-right: none !important; border-bottom: 1px solid #eee !important; padding-right: 0 !important; padding-bottom: 20px; margin-bottom: 20px; }
    .fb-ar-past { padding-left: 0 !important; }
    .fb-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

.fb-ar-current {
    padding-right: 28px;
    border-right: 1px solid #e8e8e8;
}

.fb-ar-past {
    padding-left: 28px;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ── Section label ───────────────────────────────────────── */
.fb-ar-section-lbl {
    font-size: 15px !important;
    color: #999 !important;
    margin: 0 0 10px !important;
    font-weight: 600 !important;
}

/* ── Card label (title ABOVE card) ──────────────────────── */
.fb-card-label {
    font-size: 13px;
    color: #333;
    margin: 0 0 7px;
    line-height: 1.3;
    text-align: center;
}

/* ── Card ────────────────────────────────────────────────── */
.fb-card {
    position: relative;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.fb-card:hover {
    border-color: #ccc;
}

.fb-card-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fb-card-inner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.fb-no-cover {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #f0f0f0;
    border-radius: 6px;
    min-height: 160px;
}

/* ── Hover overlay ───────────────────────────────────────── */
.fb-card-hover {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(0,0,0,0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.fb-card:hover .fb-card-hover {
    opacity: 1;
    pointer-events: auto;
}

.fb-card-action {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background 0.14s;
    padding: 0;
    flex-shrink: 0;
}

.fb-card-action:hover {
    background: rgba(255,255,255,0.28);
}

/* ── Previous editions grid (3 columns) ─────────────────── */
.fb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 10px;
    flex: 1;
}

@media (max-width: 900px) {
    .fb-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Card wrap: holds label + card */
.fb-card-wrap {
    display: flex;
    flex-direction: column;
}

/* ── Pagination ──────────────────────────────────────────── */
.fb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 18px;
}

.fb-pg-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: background 0.14s;
    padding: 0;
    flex-shrink: 0;
}

.fb-pg-btn:hover:not(:disabled) {
    background: #f0f0f0;
}

.fb-pg-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.fb-pg-num {
    font-size: 12px;
    color: #999;
    min-width: 40px;
    text-align: center;
}

/* ── Share modal (full-screen, blurred backdrop) ─────────── */
.fb-share-pop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.fb-share-pop.is-open {
    display: flex;
}

/* Centered dialog card */
.fb-share-dialog {
    background: #fff;
    border-radius: 22px;
    padding: 20px 20px 24px;
    width: 280px;
    box-shadow: 0 24px 72px rgba(0,0,0,0.28);
    animation: fb-share-in 0.22s cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
}

@keyframes fb-share-in {
    from { transform: scale(0.88); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.fb-share-pop-head {
    text-align: center;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 700;
    color: #111;
    padding: 0;
}

/* Prominent X close button — top-right corner */
.fb-share-pop-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0f0f0;
    border: none;
    cursor: pointer;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.14s, color 0.14s;
}

.fb-share-pop-close:hover { background: #e0e0e0; color: #111; }

/* Icon-only grid: 3 columns, no text */
.fb-share-icons-row {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.fb-share-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.14s;
}

.fb-share-opt:hover { transform: scale(1.1); }

.fb-sh-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: box-shadow 0.14s;
}

.fb-share-opt:hover .fb-sh-icon {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.fb-sh-icon--fb { background: #dbeafe; }
.fb-sh-icon--li { background: #e0edfa; }
.fb-sh-icon--em { background: #f0f0f0; }

/* ── Empty + Toast ───────────────────────────────────────── */
.fb-empty {
    color: #999 !important;
    font-style: italic !important;
}

.fb-toast {
    position: fixed !important;
    bottom: 28px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(20px) !important;
    background: rgba(20,20,20,0.92) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 9px 20px !important;
    border-radius: 100px !important;
    opacity: 0 !important;
    transition: opacity 0.25s, transform 0.25s !important;
    pointer-events: none !important;
    z-index: 99999 !important;
}

.fb-toast.is-visible {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
/* ── Lightbox motion ──────────────────────────────────────────────────────
   Reworked from the plugin's original 0.22s built-in ease, which was too
   fast and too flat to register as anything. Two curves, asymmetric on
   purpose: opening carries inertia and settles, closing is snappier.

   NOTE: no blur on the dialog. The card unrolls with clip-path and scale
   only. This element contains a full-screen pdf.js canvas, and `filter` on it
   forces an expensive layer AND paints the book through the blur while pages
   are still rendering — the book appears out of focus. Blur belongs on small
   surfaces; the backdrop and the gate card get it, this does not. */
:root {
    --fbv-ease-open:  cubic-bezier(0.16, 1, 0.3, 1);
    --fbv-ease-close: cubic-bezier(0.25, 1, 0.5, 1);
}

#fbv-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99990;
    opacity: 0;
    transition: opacity 0.5s var(--fbv-ease-close);
}

#fbv-lightbox.is-open {
    display: block;
}

/* Trigger fade-in on next frame after display:block */
#fbv-lightbox.is-visible {
    opacity: 1;
    transition: opacity 0.55s var(--fbv-ease-open);
}

body.fbv-lb-open {
    overflow: hidden !important;
}

/* The page recedes behind the glass as the book arrives, rather than the
   glass simply being there. Half of what sells the depth. */
.fbv-lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4,4,6,0.7);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: backdrop-filter 0.65s var(--fbv-ease-open),
                -webkit-backdrop-filter 0.65s var(--fbv-ease-open);
}
#fbv-lightbox.is-visible .fbv-lb-backdrop {
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
}

.fbv-lb-dialog {
    position: absolute;
    inset: 20px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Compressed capsule -> unrolled sheet. clip-path does the work; scale
       and the rise are secondary. */
    transform: scale(0.88) translateY(36px);
    clip-path: inset(14% 10% round 32px);
    will-change: transform, clip-path;
    transition: transform 0.75s var(--fbv-ease-open),
                clip-path 0.75s var(--fbv-ease-open);
}

#fbv-lightbox.is-visible .fbv-lb-dialog {
    transform: scale(1) translateY(0);
    clip-path: inset(0% 0% round 16px);
}

/* Closing: contracts all the way down to a point and fades out. It has to
   finish before anything replaces it — stopping at 0.9 and handing over
   mid-shrink is what made the swap look like a glitch. The opacity lags the
   scale so the shrink is watched, not merely inferred from a fade. */
/* The container does NOT fade. backdrop-filter stops filtering the page the
   moment an ancestor has opacity < 1 — opacity establishes a new backdrop
   root, so the blur applies only within that group. Fading this element
   silently switched its backdrop's blur off and the host page punched
   through sharp behind the shrinking book. The BOOK fades; the layer doing
   the blurring stays fully opaque. */
#fbv-lightbox.fbv-collapsing .fbv-lb-dialog {
    transform: scale(0.28) translateY(0);
    clip-path: inset(0% 0% round 48px);
    opacity: 0;
    transition: transform 0.56s var(--fbv-ease-close),
                clip-path 0.56s var(--fbv-ease-close),
                opacity 0.34s var(--fbv-ease-close) 0.22s;
}
/* The backdrop deliberately does NOT clear while collapsing. When this is a
   handoff, the gate takes over the same glass — clearing here let the host
   page flash through sharp in the gap and then blur again, which is the
   discontinuity that reads as broken. The glass belongs to the session, not
   to either modal; it clears only when the last one actually leaves. */
/* Chrome leaves first so the book is the last thing in the room. */
#fbv-lightbox.fbv-collapsing .fbv-toolbar,
#fbv-lightbox.fbv-collapsing .fbv-float-close,
#fbv-lightbox.fbv-collapsing .fbv-thumbs {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    transition-delay: 0s;
}

/* The book is hidden until page 1 has actually painted, then grows into
   place from the centre. turn.js lays its sheets out the instant it is
   initialised, so without this a blank white page appeared and slid into
   position before pdf.js had drawn a single pixel — which is what made the
   book look like it arrived from the right. */
.fbv-turn-book {
    opacity: 0;
    transition: opacity 0.45s var(--fbv-ease-open),
                transform 0.45s var(--fbv-ease-open);
}
.fbv-turn-book.is-ready { opacity: 1; }

/* Chrome arrives after the book, so the frame doesn't snap in around it. */
#fbv-lightbox .fbv-toolbar,
#fbv-lightbox .fbv-float-close,
#fbv-lightbox .fbv-thumbs {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--fbv-ease-open),
                transform 0.5s var(--fbv-ease-open);
}
#fbv-lightbox.is-visible .fbv-float-close { opacity: 1; transform: none; transition-delay: 0.30s; }
#fbv-lightbox.is-visible .fbv-thumbs      { opacity: 1; transform: none; transition-delay: 0.36s; }
/* Gated on .is-armed, not on a delay: the pill assembles itself from three
   separate scripts and the last one lands when pdf.js has rendered enough for
   the thumbnails, which is not a number you can hardcode. viewer.js adds the
   class when the rail is in, with a 2.5s fallback. */
#fbv-lightbox.is-visible .fbv-toolbar.is-armed { opacity: 1; transform: none; transition-delay: 0s; }

/* The pill is centred with `left:50%; transform:translateX(-50%)`, so every
   rule above that writes `transform` has to carry that translate or the pill
   loses its centring and its LEFT EDGE lands on the middle of the screen —
   off by exactly half its own width. The entry/exit transforms below compose
   with the centring instead of replacing it. Widening the pill with the drag
   handle and collapse toggle is what made this obvious; the rules were
   already wrong. */
#fbv-lightbox .fbv-toolbar                     { transform: translateX(-50%) translateY(12px); }
#fbv-lightbox.is-visible .fbv-toolbar.is-armed { transform: translateX(-50%); }
#fbv-lightbox.fbv-collapsing .fbv-toolbar      { transform: translateX(-50%) translateY(8px); }

@media (prefers-reduced-motion: reduce) {
    #fbv-lightbox .fbv-lb-dialog,
    #fbv-lightbox.is-visible .fbv-lb-dialog,
    #fbv-lightbox.fbv-collapsing .fbv-lb-dialog,
    #fbv-lightbox .fbv-toolbar,
    #fbv-lightbox .fbv-float-close,
    #fbv-lightbox .fbv-thumbs {
        transform: none !important;
        clip-path: none !important;
        transition: opacity 0.2s ease !important;
        transition-delay: 0ms !important;
    }
    /* …except the pill, whose transform is its position, not its animation. */
    #fbv-lightbox .fbv-toolbar { transform: translateX(-50%) !important; }
}

@media (max-width: 600px) {
    .fbv-lb-dialog { inset: 0; border-radius: 0; }
}

/* ============================================================
   VIEWER  (shared by lightbox + standalone page)
   ============================================================ */

/* ─── Modern (default) ──────────────────────────────────── */
.fb-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    color: #e8e8e8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    position: relative;
    overflow: hidden;
}

/* ── Floating close (replaces topbar for lightbox) ───────── */
.fbv-float-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 30;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(30,30,30,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, transform 0.18s;
    padding: 0;
    flex-shrink: 0;
}

.fbv-float-close:hover {
    background: rgba(60,60,60,0.95);
    color: #fff;
    transform: scale(1.06);
}

/* Topbar */
.fbv-topbar {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 12px;
    gap: 8px;
    background: rgba(20,20,20,0.72);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.fbv-topbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.fbv-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 480px;
}

.fbv-topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fbv-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #aaa;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 8px;
    transition: color 0.18s, background 0.18s;
    flex-shrink: 0;
}

.fbv-back svg { flex-shrink: 0; }

.fbv-back:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
}

/* Buttons */
.fbv-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    transition: color 0.18s, background 0.18s;
    border-radius: 8px;
    padding: 8px;
    min-width: 38px;
    min-height: 38px;
}

.fbv-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }

.fbv-lb-close {
    flex-shrink: 0;
}

/* Body */
.fbv-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* Thumbnails panel */
.fbv-thumbs {
    width: 200px;
    flex-shrink: 0;
    overflow-y: auto;
    background: rgba(15,15,15,0.1);
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.fbv-thumbs::-webkit-scrollbar { width: 4px; }
.fbv-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.fbv-thumbs-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.fbv-thumb-item {
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.18s, opacity 0.18s;
    position: relative;
    opacity: 0.65;
    width: 168px;
    flex-shrink: 0;
}

.fbv-thumb-item:hover { opacity: 1; border-color: rgba(255,255,255,0.3); }
.fbv-thumb-item.is-active { opacity: 1; border-color: #fff; }

.fbv-thumb-canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.fbv-thumb-num {
    display: block;
    text-align: center;
    font-size: 10px;
    color: #888;
    padding: 3px 0 4px;
    background: rgba(0,0,0,0.5);
}

/* Main area */
.fbv-main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* A gutter, not a reservation. Measured on prod the toolbar occupies the
       last 78px, and reserving all of it plus slack (40/104) pushed the book
       small enough to read as a margin problem of its own.

       The pill is glass, it floats, and it is draggable and collapsible — that
       is the whole point of the controls ported from Odyssey, whose own note
       says it "defaults to bottom-center, which can sit over content readers
       want to see". So it is allowed to sit over the foot of the page and the
       reader moves it. The book just gets room to breathe at both ends.

       viewer.js reads these off the computed style and fits the book inside
       what is left — they are the single source for the sizing, not a
       decoration the book ignores. */
    padding: 24px 20px;
    background: transparent;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}

.fbv-main::-webkit-scrollbar { width: 6px; }
.fbv-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

/* ── Side navigation arrows ──────────────────────────────── */
.fbv-side-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    width: 36px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.38);
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.92);
    transition: background 0.2s, color 0.2s;
    padding: 0;
}

.fbv-side-btn:hover {
    background: rgba(0,0,0,0.60);
    color: #fff;
}

.fbv-side-prev {
    left: 0;
    border-radius: 0 10px 10px 0;
}

.fbv-side-next {
    right: 0;
    border-radius: 10px 0 0 10px;
}

/* ── turn.js book container ──────────────────────────────── */

/*
 * .fbv-turn-container wraps the turn.js book element.
 * Zoom is applied here via CSS transform so turn.js pixel
 * dimensions stay fixed and never need reinitialisation.
 */
.fbv-turn-container {
    display: inline-block;
    transform-origin: top center;
    /* Transform only. Height is deliberately NOT transitioned: it is a layout
       property, so animating it runs layout on every frame and the zoom goes
       shaky. transform-origin does that job instead — see _applyZoom. */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /* layered shadows around the full open spread */
    filter: drop-shadow(0 28px 72px rgba(0,0,0,0.85))
            drop-shadow(0 6px 18px rgba(0,0,0,0.55));
    /* prevent the unscaled layout footprint from pushing down the toolbar */
    overflow: visible;
    vertical-align: top;
}

/* The element turn.js is initialised on — explicit px size set by JS */
.fbv-turn-book {
    position: relative;
    background: transparent;
    margin: auto; /* self-centres vertically + horizontally inside .fbv-main flex container */
}

/* Individual page divs — JS sets position:relative + overflow:hidden */
.fbv-turn-page {
    background: #fff;
}

/* turn.js auto-inserts blank .hard pages at the start/end of the book
   (before page 1 and after the last page). Make them invisible. */
.fbv-turn-book .page.hard {
    background: transparent !important;
    box-shadow: none !important;
}

/* ── Text layer (for copy/paste) ─────────────────────────── */
.fbv-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    line-height: 1;
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
}

.fbv-text-layer span,
.fbv-text-layer br {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
    -webkit-text-stroke: 0px transparent;
}

.fbv-text-layer ::selection {
    background: rgba(60, 130, 246, 0.35);
    color: transparent;
}

/* Spinner */
/* Nothing inside the reader may chain a scroll out to the page behind it, or
   to the browser's own back/forward swipe. viewer.js sets the matching
   overscroll-behavior-x on <html> while the lightbox is open. */
#fbv-lightbox,
#fbv-lightbox .fbv-main,
#fbv-lightbox .fbv-thumbs,
#fbv-lightbox .fbv-dots {
    overscroll-behavior: contain;
}

.fbv-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22,22,22,0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    /* Crosses over with the book's own 0.45s fade-in rather than being cut
       away on one frame. */
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.fbv-spinner.is-off {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.fbv-spinner span {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fbv-spin 0.7s linear infinite;
}

@keyframes fbv-spin {
    to { transform: rotate(360deg); }
}

/* Error */
.fbv-error {
    color: #ff6b6b;
    text-align: center;
    padding: 40px 20px;
    font-size: 14px;
}

/* Toolbar */
.fbv-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 54px;
    padding: 0 12px;
    background: rgba(20,20,20,0.42);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.fbv-toolbar-sep {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.1);
    margin: 0 6px;
    flex-shrink: 0;
}

.fbv-page-info {
    font-size: 12px;
    color: #aaa;
    min-width: 70px;
    text-align: center;
    flex-shrink: 0;
}

.fbv-zoom-label {
    font-size: 11px;
    color: #888;
    min-width: 36px;
    text-align: center;
    flex-shrink: 0;
}

/* ─── Classic override ──────────────────────────────────── */
.fb-ui-classic .fbv-topbar,
.fb-ui-classic .fbv-toolbar {
    background: #1e1e1e;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: #2e2e2e;
}

.fb-ui-classic .fbv-thumbs {
    background: #181818;
    border-color: #2a2a2a;
}

.fb-ui-classic .fbv-main {
    background: transparent;
}

/* ─── Standalone reader page ────────────────────────────── */
.fb-reader-standalone .fb-viewer--page {
    position: fixed;
    inset: 0;
    height: 100vh;
    z-index: 1;
}

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Hide thumbnail strip on mobile — single-page mode, no sidebar needed */
    .fbv-thumbs { display: none !important; }
    .fbv-title { font-size: 12px; }
    .fbv-toolbar { gap: 0; }
    .fbv-toolbar .fbv-btn { padding: 5px; }
    .fbv-toolbar-sep { margin: 0 3px; }
}


/* FBV_SCROLLBAR_v1 */
.fbv-thumbs{ scrollbar-width: thin; scrollbar-color: transparent transparent; }
.fbv-thumbs:hover{ scrollbar-color: rgba(0,0,0,.28) transparent; }
.fbv-thumbs::-webkit-scrollbar{ width:6px; height:6px; }
.fbv-thumbs::-webkit-scrollbar-track{ background:transparent; }
.fbv-thumbs::-webkit-scrollbar-thumb{ background:transparent; border-radius:8px; transition:background .2s; }
.fbv-thumbs:hover::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.28); }
.fbv-thumbs::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.45); }

/* ============================================================
   FBV_SKIN_v1 — Odyssey "Crystal Glass" reader reskin
   LIGHTBOX MODE ONLY. Standalone/page reader is untouched.
   ============================================================ */
#fbv-lightbox .fbv-lb-backdrop{ background:#0b0b0e !important; }
#fbv-lightbox .fbv-lb-dialog{ inset:0 !important; width:100vw !important; height:100vh !important; max-width:none !important; border-radius:0 !important; }

.fb-reader-standalone, .fb-reader-standalone .fb-viewer--page{ background:#0b0b0e !important; }
.fb-viewer{
  /* The reader's accent — the active page dot and the active hand tool.
     Per PUBLICATION, not per plugin: each digital edition carries its own
     brand colour, and this used to be Odyssey's gold hardcoded into the
     stylesheet, so every masthead's reader wore the same one. The host sets
     it (viewer.js reads `accent` / data-accent / FlipbooksViewer.accent and
     writes it onto the root); this value is only the fallback when nobody
     does. */
  --fbv-accent:#E6D5B8;
  --oz-glass:rgba(255,255,255,.42);
  --oz-glass-hover:rgba(18,18,24,.55);
  --oz-border:rgba(255,255,255,.5);
  --oz-border-hover:rgba(255,255,255,.22);
  background:#0b0b0e !important;
}

/* hide the old thumbnail rail + numeric counter (dots replace them) */
.fb-viewer .fbv-thumbs{ display:none !important; }
.fb-viewer .fbv-page-info{ display:none !important; }
.fb-viewer .fbv-float-close{ display:none !important; } /* replaced by top-right exit */

/* stage: full-bleed, no scrollbars */
.fb-viewer .fbv-body{ background:#0b0b0e !important; }
.fb-viewer .fbv-main{ background:transparent !important; overflow:hidden !important; }

/* frosted glass on the interactive chrome */
.fb-viewer .fbv-side-btn,
.fb-viewer .oz-circle,
.fb-viewer .fbv-toolbar{
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
}

/* side arrows -> glass circles pinned to viewport edges */
.fb-viewer .fbv-side-btn{
  position:fixed !important; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50% !important;
  background:var(--oz-glass) !important; border:1px solid var(--oz-border) !important;
  color:#1e1e24 !important; display:flex; align-items:center; justify-content:center;
  z-index:100; box-shadow:none !important; transition:all .35s cubic-bezier(.16,1,.3,1);
}
.fb-viewer .fbv-side-btn svg{ width:20px; height:20px; }
.fb-viewer .fbv-side-prev{ left:24px !important; right:auto !important; }
.fb-viewer .fbv-side-next{ right:24px !important; left:auto !important; }
.fb-viewer .fbv-side-btn:hover{
  background:var(--oz-glass-hover) !important; border-color:var(--oz-border-hover) !important;
  color:#fff !important; transform:translateY(-50%) scale(1.06);
}

/* top-right glass circles (shelf + exit) */
.fb-viewer .fbv-topbar-right{ position:fixed; top:20px; right:28px; z-index:130; display:flex; gap:12px; }
.fb-viewer .oz-circle{
  width:44px; height:44px; border-radius:50%; background:var(--oz-glass); border:1px solid var(--oz-border);
  color:#1e1e24; display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none;
  transition:all .35s cubic-bezier(.16,1,.3,1);
}
.fb-viewer .oz-circle:hover{ background:var(--oz-glass-hover); border-color:var(--oz-border-hover); color:#fff; transform:translateY(-1px); }
.fb-viewer .oz-circle svg{ width:18px; height:18px; }

/* bottom glass pill */
.fb-viewer .fbv-toolbar{
  position:fixed !important; bottom:24px; left:50%; transform:translateX(-50%); z-index:130;
  display:flex; align-items:center; gap:8px; padding:6px 14px !important; width:auto !important;
  background:var(--oz-glass) !important; border:1px solid var(--oz-border) !important;
  border-radius:999px !important; box-shadow:none !important;
  transition:background .35s ease, border-color .35s ease;
}
.fb-viewer .fbv-toolbar:hover{ background:var(--oz-glass-hover) !important; border-color:var(--oz-border-hover) !important; }
.fb-viewer .fbv-toolbar .fbv-btn{
  background:transparent !important; border:none !important; color:#1e1e24 !important;
  width:36px; height:36px; border-radius:50% !important; display:flex; align-items:center; justify-content:center;
  transition:background .3s, color .3s;
}
.fb-viewer .fbv-toolbar:hover .fbv-btn{ color:rgba(255,255,255,.85) !important; }
.fb-viewer .fbv-toolbar .fbv-btn:hover{ background:rgba(0,0,0,.08) !important; color:#000 !important; }
.fb-viewer .fbv-toolbar:hover .fbv-btn:hover{ background:rgba(255,255,255,.18) !important; color:#fff !important; }
.fb-viewer .fbv-toolbar .fbv-hand.is-active{ background:rgba(0,0,0,.12) !important; color:#000 !important; }
.fb-viewer .fbv-toolbar:hover .fbv-hand.is-active{ background:rgba(255,255,255,.2) !important; color:var(--fbv-accent) !important; }
.fb-viewer .fbv-toolbar-sep{ width:1px; height:20px; background:rgba(0,0,0,.15) !important; margin:0 2px; }
.fb-viewer .fbv-toolbar:hover .fbv-toolbar-sep{ background:rgba(255,255,255,.18) !important; }

/* zoom group (pill-in-pill) */
.fb-viewer .fbv-zoom-group{ display:flex; align-items:center; background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:2px 4px; }
.fb-viewer .fbv-toolbar:hover .fbv-zoom-group{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
.fb-viewer .fbv-zoom-label{ font:600 12px/1 var(--ui,-apple-system,sans-serif) !important; color:#1e1e24 !important; min-width:44px; text-align:center; cursor:pointer; padding:0 6px; }
.fb-viewer .fbv-toolbar:hover .fbv-zoom-label{ color:rgba(255,255,255,.9) !important; }

/* dot navigation */
.fb-viewer .fbv-dots{ display:flex; align-items:center; gap:12px; padding:0 8px; }
.fb-viewer .fbv-dot{ position:relative; padding:6px 2px; cursor:pointer; }
.fb-viewer .fbv-dot i{ display:block; width:8px; height:8px; border-radius:50%; background:rgba(0,0,0,.35); transition:all .35s cubic-bezier(.16,1,.3,1); }
.fb-viewer .fbv-toolbar:hover .fbv-dot i{ background:rgba(255,255,255,.35); }
.fb-viewer .fbv-dot:hover i{ transform:scale(1.18); }
.fb-viewer .fbv-dot.is-active i{ width:22px; border-radius:12px; background:#1a1a1a; }
.fb-viewer .fbv-toolbar:hover .fbv-dot.is-active i{ background:var(--fbv-accent); }

/* dot hover preview popup */
.fb-viewer .fbv-dot-pop{
  position:absolute; bottom:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px) scale(.97);
  background:rgba(16,16,22,.9); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.18); padding:8px; border-radius:12px; box-shadow:0 16px 32px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s, transform .3s, visibility .3s;
  display:flex; flex-direction:column; align-items:center; gap:6px; z-index:300;
}
.fb-viewer .fbv-dot:hover .fbv-dot-pop{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1); }
/* Constant HEIGHT, width follows the content — not the other way round.

   Fixing the width instead made the cover, which is a single page in the row,
   take the full 248px and stand up 366px tall: one preview towering over the
   spreads either side of it. Height is what the eye compares across the rail,
   so height is what stays put. A spread fits two pages in at that height and
   comes out ~248 wide; the cover fits one and comes out half that.

   A <canvas> carries its own intrinsic ratio, so width:auto at a fixed height
   lands on the true shape of the page. That is also what fixed the original
   complaint: this was a fixed 248x158 with object-fit:cover, and a tabloid
   page lost its masthead and its foot to the crop. Nothing is cropped now in
   either direction. */
.fb-viewer .fbv-dot-pop .mini{
  display:inline-flex; height:184px; width:auto; min-width:40px;
  border-radius:6px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); background:#222;
}
.fb-viewer .fbv-dot-pop .mini .half{
  height:100%; width:auto; display:block;
  background:#e7e7e7;
}
.fb-viewer .fbv-dot-pop .meta{ font:500 11px/1 var(--ui,-apple-system,sans-serif); color:rgba(255,255,255,.85); white-space:nowrap; }

@media (max-width:640px){
  .fb-viewer .fbv-side-btn{ display:none !important; }               /* use swipe + pill arrows */
  .fb-viewer .fbv-topbar-right{ top:12px; right:12px; gap:8px; }
  .fb-viewer .oz-circle{ width:40px; height:40px; }

  /* pill spans the width with a small margin and never overflows */
  .fb-viewer .fbv-toolbar{
    left:12px !important; right:12px !important; transform:none !important;
    width:auto !important; max-width:none !important;
    gap:3px !important; padding:5px 8px !important; flex-wrap:nowrap !important;
    bottom:calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .fb-viewer .fbv-toolbar .fbv-btn{ width:32px; height:32px; }
  .fb-viewer .fbv-toolbar .fbv-toolbar-sep{ margin:0 1px; }

  /* dots take the middle and scroll horizontally instead of pushing off-screen */
  .fb-viewer .fbv-dots{ flex:1 1 auto; min-width:0; overflow-x:auto; gap:9px; padding:0 4px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .fb-viewer .fbv-dots::-webkit-scrollbar{ display:none; }

  .fb-viewer .fbv-zoom-group{ padding:1px 2px; }
  .fb-viewer .fbv-zoom-label{ min-width:36px; padding:0 3px; font-size:11px !important; }

  /* no hover on touch — the tap navigates instead */
  .fb-viewer .fbv-dot-pop{ display:none !important; }

  /* collapsed pill shrinks to its icons and centers, instead of stretching
     edge-to-edge — the full-width rule above is for the expanded pill, which
     has to hold a dot rail. Four icons stretched across a phone would read as
     a broken layout. */
  .fb-viewer .fbv-toolbar.is-collapsed{
    left:50% !important; right:auto !important; transform:translateX(-50%) !important;
    width:auto !important;
  }
}