/* PDF flipbook — DearFlip CSS overrides (Slipstream skin).
 * ----------------------------------------------------------
 * Loaded AFTER dflip.min.css so the selectors here win on
 * cascade. We don't fork dflip's stylesheet — we vendor it
 * intact and re-skin via these overrides so future DearFlip
 * upgrades land cleanly.
 *
 * What we change:
 *   1. Drop the boxed dark chrome background so our modal's
 *      bg-inverse + backdrop blur show through
 *   2. Restyle the top toolbar to a thin pill row with
 *      Slipstream brand tokens
 *   3. Hide controls we explicitly never want here:
 *        - "Powered by" / lite watermark (if any)
 *        - Share button
 *        - Help / about overlays
 *        - Sound toggle
 *   4. Make page-load spinner inherit our colour palette
 *   5. Wire fullscreen + zoom + page-nav buttons to use the
 *      same brand-accent on hover as the rest of the platform
 *
 * Selectors here are intentionally specific (no `!important`)
 * so authors can still override per-instance via inline CSS
 * if they ever need to.
 * ---------------------------------------------------------- */

/* ---- Container surface ------------------------------------------- */
/* DearFlip wraps the book in .df-container with its own dark fill.
 * We want the modal's --bg-inverse to show through so the chrome
 * feels integrated with the slipstream modal, not an embedded
 * iframe with its own colour scheme. */
.slip-flipbook-body ._df_book,
.slip-flipbook-body .df-container,
.slip-flipbook-body .df-loader,
.slip-flipbook-body .df-canvas-area {
    background: transparent !important;
}

.slip-flipbook-body ._df_book {
    width: 100%;
    height: 100%;
}

/* ---- Top toolbar ---- */
/* DearFlip's default toolbar is a tinted strip with themify-icon
 * buttons. We re-skin it as a single thin pill of icon buttons
 * sitting on the modal surface — feels native to the slipstream
 * frame rather than a vendored widget bolted on. */
.slip-flipbook-body .df-ui-controls,
.slip-flipbook-body .df-controls {
    background: color-mix(in srgb, var(--text-on-page, #f5f5f4) 8%, transparent) !important;
    color: var(--text-on-inverse, #fdfbf6) !important;
    border-radius: var(--radius-pill, 999px) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, var(--text-on-inverse, #fff) 14%, transparent) !important;
    padding: 0.25rem 0.4rem !important;
    margin: 0.75rem auto !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.slip-flipbook-body .df-ui-controls .df-ui-btn,
.slip-flipbook-body .df-controls .df-ui-btn {
    color: var(--text-on-inverse, #fdfbf6) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--radius-md, 8px) !important;
    transition: background 160ms ease, color 160ms ease;
}
.slip-flipbook-body .df-ui-controls .df-ui-btn:hover,
.slip-flipbook-body .df-controls .df-ui-btn:hover {
    background: color-mix(in srgb, var(--brand-secondary-accent, var(--brand-primary-accent, #e6a822)) 22%, transparent) !important;
    color: var(--brand-secondary-accent, var(--brand-primary-accent, #e6a822)) !important;
}

/* Page indicator (e.g. "3 / 16") */
.slip-flipbook-body .df-ui-page-number,
.slip-flipbook-body .df-page-number,
.slip-flipbook-body .df-ui-current-page,
.slip-flipbook-body .df-ui-page-of {
    color: var(--text-on-inverse, #fdfbf6) !important;
    font-family: var(--font-body, system-ui, sans-serif) !important;
    font-size: 0.85rem !important;
    font-feature-settings: "tnum";
    opacity: 0.85;
}

/* ---- Hide noise: share, help, watermark, sound, lite chip ------ */
/* Defensive selectors — they cover the names DearFlip 2.4 uses,
 * the legacy 2.x ones, and the upgrade-to-pro nag the Lite build
 * sometimes injects. Anything matching these is suppressed in our
 * modal context, not site-wide (scope is .slip-flipbook-body). */
.slip-flipbook-body .df-ui-share,
.slip-flipbook-body .df-ui-btn.df-ui-share,
.slip-flipbook-body .df-share,
.slip-flipbook-body .df-ui-help,
.slip-flipbook-body .df-ui-btn.df-ui-help,
.slip-flipbook-body .df-ui-sound,
.slip-flipbook-body .df-ui-btn.df-ui-sound,
.slip-flipbook-body .df-watermark,
.slip-flipbook-body .df-lite-info,
.slip-flipbook-body .df-credit,
.slip-flipbook-body .df-credit-text,
.slip-flipbook-body .df-ui-btn.df-ui-annotation,
.slip-flipbook-body [class*="df-promo"],
.slip-flipbook-body [class*="df-upgrade"] {
    display: none !important;
}

/* ---- Loader / spinner ------------------------------------------- */
/* DearFlip's loader is a small spinner GIF — replace with a clean
 * CSS spinner that picks up our accent. */
.slip-flipbook-body .df-loader,
.slip-flipbook-body .df-loader-wrap,
.slip-flipbook-body .df-spinner,
.slip-flipbook-body .df-3dview-spinner {
    background: transparent !important;
    color: var(--text-on-inverse, #fdfbf6) !important;
}

/* Thumbnail strip — keep it but soften the panel background */
.slip-flipbook-body .df-thumbnails,
.slip-flipbook-body .df-thumb-wrapper {
    background: color-mix(in srgb, currentColor 6%, transparent) !important;
    border-radius: var(--radius-md, 8px) !important;
}
.slip-flipbook-body .df-thumb {
    border-radius: var(--radius-sm, 4px) !important;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent) !important;
}
.slip-flipbook-body .df-thumb-current,
.slip-flipbook-body .df-thumb.df-thumb-active {
    border-color: var(--brand-secondary-accent, var(--brand-primary-accent, #e6a822)) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-secondary-accent, #e6a822) 35%, transparent) !important;
}

/* ---- Outline / TOC panel ---- */
.slip-flipbook-body .df-outline,
.slip-flipbook-body .df-outline-wrapper {
    background: color-mix(in srgb, currentColor 6%, transparent) !important;
    color: var(--text-on-inverse, #fdfbf6) !important;
    border-radius: var(--radius-md, 8px) !important;
}
.slip-flipbook-body .df-outline-item:hover {
    background: color-mix(in srgb, var(--brand-secondary-accent, #e6a822) 18%, transparent) !important;
}

/* ---- Themify-icon font fallback ---- */
/* DearFlip's toolbar uses a themify-icon font we'd rather not ship.
 * Without the font, the icon characters render as boxes. As a
 * cheap-but-functional fallback we set the font-family so any
 * existing themify font on the page is picked up; otherwise the
 * tooltip-on-hover still gives the user the action name.
 * V2 plan: substitute each .ti-* class with an inline SVG via JS. */
.slip-flipbook-body [class*=" ti-"],
.slip-flipbook-body [class^="ti-"] {
    font-family: 'themify', system-ui;
    font-style: normal;
    font-weight: normal;
    speak: none;
}