/* ══════════════════════════════════════════════════════════════════════════════
   PPEA — Image Viewer Panel Stylesheet
   ══════════════════════════════════════════════════════════════════════════════
   Loaded on text pages for manuscripts that have an image manifest (via
   textnav:image-panel). Provides:
     1. Panel layout (side panel / overlay / fullscreen by breakpoint)
     2. Toolbar styling
     3. OSD container sizing
     4. Thumbnail styling (Phase 2)
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── §1  Panel width token ────────────────────────────────────────────────── */
/* Set by JS (applyPanelWidth) when the user drags to resize; also consumed
   by the body grid column definition and the toolbar-ribbon right edge. */
body { --image-panel-w: clamp(280px, 28vw, 420px); }


/* ── §2  Panel: hidden by default ────────────────────────────────────────── */
#image-panel {
    display: none;
}

#image-panel.open {
    display: flex;
    flex-direction: column;
}


/* ── §3a  Desktop (≥ --bp-desktop): side panel via body grid ─────────────── */
@media (min-width: 900px) /* --bp-desktop */ {
    /* Switch body from flex-column to a two-column grid so every body child
       (main, bottom-nav, comparison, search, footer) contracts to the text
       column while the image panel occupies the right column for the full
       viewport height. */
    body:has(#image-panel.open) {
        display: grid;
        grid-template-columns: 1fr var(--image-panel-w);
    }

    body:has(#image-panel.open) > :not(#image-panel) {
        grid-column: 1;
        min-width: 0;
    }

    body:has(#image-panel.open) > #image-panel {
        grid-column: 2;
        grid-row: 1 / -1;
        position: sticky;
        top: calc(var(--header-height, 50px) + var(--toolbar-ribbon-h, 28px));
        height: calc(100dvh - var(--header-height, 50px) - var(--toolbar-ribbon-h, 28px));
        border-left: 1px solid var(--color-border);
        background: var(--color-bg);
    }
}


/* ── §3b  Tablet (--bp-tablet to --bp-desktop): overlay panel ─────────────
   Note: uses 650 rather than --bp-phone — the image panel has its own
   breakpoint because the IIIF viewer needs more width than a text panel. */
@media (min-width: 650px) and (max-width: 899px) /* --bp-tablet to --bp-desktop */ {
    #image-panel.open {
        position: fixed;
        top: calc(var(--header-height, 50px) + var(--toolbar-ribbon-h, 28px));
        right: 0;
        bottom: 0;
        width: 50vw;
        z-index: 500;   /* image-panel tier */
        border-left: 1px solid var(--color-border);
        background: var(--color-bg);
        box-shadow: -4px 0 12px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
    }
}


/* ── §3c  Mobile (< --bp-tablet): full viewport ──────────────────────────── */
@media (max-width: 649px) /* < --bp-tablet */ {
    #image-panel.open {
        position: fixed;
        inset: 0;
        z-index: 600;   /* image-panel mobile tier */
        background: var(--color-bg);
    }
}


/* ── §4  OSD container ───────────────────────────────────────────────────── */
#osd-viewer {
    flex: 1;
    min-height: 0;  /* allow flex shrink within the panel */
    position: relative;  /* anchor for the fullscreen exit button */
}

/* Override OSD's inline transparent background — always black for
   manuscript images, regardless of color scheme. */
#osd-viewer .openseadragon-container {
    background-color: #000 !important;
}

/* Full-page mode — also black */
.openseadragon-container.fullscreen {
    background-color: #000 !important;
}

/* Fullscreen exit button — registered as an OSD control (TOP_RIGHT anchor)
   so it participates in OSD's own layout and survives full-page mode.
   Inherits glass-overlay base from §14 in main.css; overrides colors for
   the dark full-page context. */
/* Wrapper registered as OSD control — OSD applies its inline styles here.
   We toggle visibility on the wrapper; the button inside stays clean. */
.osd-fs-exit-wrap {
    display: none !important;
}

.osd-fs-exit-wrap.visible {
    display: block !important;
    margin: 8px 8px 0 0;
}

/* The button itself — inherits glass-overlay base from §14 in main.css.
   Uses light-mode glass colours since the viewer background is always black. */
.osd-fs-exit {
    display: flex;
    width: 28px;
    height: 28px;
    font-size: 18px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(0, 0, 0, 0.7);
}

.osd-fs-exit:hover {
    color: #000;
    background: rgba(255, 255, 255, 0.65);
}

.osd-fs-exit:focus-visible {
    outline: 2px solid var(--color-accent, #0066cc);
    outline-offset: 2px;
}


/* ── §5  Toolbar ─────────────────────────────────────────────────────────── */
.image-panel-toolbar {
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.35em 0.5em;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    font-family: var(--font-ui);
    font-size: 0.85em;
    flex-shrink: 0;
}

.image-panel-caption {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-panel-btn {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0.15em 0.45em;
    cursor: pointer;
    color: var(--color-text);
    font-size: 1em;
    line-height: 1.2;
}

.image-panel-btn:hover {
    background: var(--color-bg-glass-solid);
    border-color: var(--color-border-strong);
}

.image-panel-btn:focus-visible {
    outline: 2px solid var(--color-accent, #0066cc);
    outline-offset: 1px;
}

/* Sync toggle — square button matching toolbar siblings. */
#osd-sync-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65em;
    height: 1.65em;
    padding: 0;
}

#osd-sync-toggle.active {
    background: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
}

#osd-sync-toggle:not(.active) {
    opacity: 0.5;
}

.image-panel-close {
    background: none;
    border: none;
    font-size: 1.3em;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-secondary, #666);
    padding: 0.1em 0.3em;
    margin-left: 0.3em;
    border-radius: 3px;
}

.image-panel-close:hover {
    color: var(--color-text);
    background: var(--color-bg-glass-solid);
}

.image-panel-close:focus-visible {
    outline: 2px solid var(--color-accent, #0066cc);
    outline-offset: 1px;
}


/* ── §6  Resize handle (desktop only) ───────────────────────────────────── */
.image-panel-resize {
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s ease;
}

.image-panel-resize:hover,
.image-panel-resize.dragging {
    background: var(--color-accent, #0066cc);
    opacity: 0.4;
}

/* Prevent text selection during drag */
body.panel-resizing {
    cursor: col-resize !important;
    user-select: none !important;
}


/* ── §7  Folio thumbnails (Phase 2) ──────────────────────────────────────── */
.folio-thumb {
    /* Both axes capped at 2.5em: wide details stay 2.5em wide, tall
       details stay 2.5em tall, and aspect ratio is preserved naturally
       because neither width nor height is forced.  (Using width:2.5em
       with max-height would leave the element a 2.5em square with the
       image letterboxed inside — visible as an empty-box border on
       narrow images.) */
    max-width: 2.5em;
    max-height: 2.5em;
    width: auto;
    height: auto;
    vertical-align: middle;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    opacity: 0.8;
    transition: opacity var(--transition-fast, 0.15s ease);
    cursor: pointer;
}

.folio-thumb:hover {
    opacity: 1;
    box-shadow: 0 1px 4px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
}



/* ── §9  Image popover (Phase 3c) ──────────────────────────────────────── */
/* Modal overlay for viewing full-page images on intro pages.
   Loaded by textnav:image-popover(). */

#image-popover {
    position: fixed;
    inset: 0;
    z-index: 700;   /* image-popover modal tier */
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.85);
}

#image-popover[hidden] {
    display: none;
}

/* Prevent body scroll while popover is open */
body:has(#image-popover:not([hidden])) {
    overflow: hidden;
}

.image-popover-toolbar {
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.5em 1em;
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.85em;
    flex-shrink: 0;
}

.image-popover-caption {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Popover toolbar buttons — light style for dark background */
.image-popover-toolbar .image-panel-btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.8);
}

.image-popover-toolbar .image-panel-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.image-popover-close {
    background: none;
    border: none;
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.1em 0.3em;
    margin-left: 0.5em;
    border-radius: 3px;
}

.image-popover-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.image-popover-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

#popover-osd {
    flex: 1;
    min-height: 0;
}

#popover-osd .openseadragon-container {
    background-color: transparent !important;
}