/* ── Slideshow Plugin ── */

/* ── Fenced block preview (in normal card views) ── */
/* `inline-block + max-width:100%` doesn't reliably constrain the container when the
   img's intrinsic size is larger than the parent, so we use block + fit-content instead.
   That way the container shrinks to the img while still respecting the parent width cap. */
.slide-image-preview {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    line-height: 0;
    border: 1px solid var(--t-border);
    background: var(--t-bg);
    margin: 0.8em 0;
}
.slide-image-preview img,
.prose .slide-image-preview img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    pointer-events: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    cursor: default;
}
.slide-image-preview .slide-hotspot {
    position: absolute;
    border: 1px dashed var(--t-accent);
    background: color-mix(in srgb, var(--t-accent) 12%, transparent);
    pointer-events: auto;
    cursor: help;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s;
}
.slide-image-preview .slide-hotspot:hover {
    background: color-mix(in srgb, var(--t-accent) 25%, transparent);
    border-color: var(--t-bright);
}
/* Hover tooltip: shows the resolved target label (usually the card title) */
.slide-image-preview .slide-hotspot[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    top: 100%;
    margin-top: 4px;
    transform: translateX(-50%);
    padding: 3px 6px;
    background: var(--t-surface);
    border: 1px solid var(--t-accent);
    color: var(--t-bright);
    font-family: var(--t-font-pixel, monospace);
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 10;
}
.slide-image-preview .slide-hotspot[data-label]:hover::after {
    opacity: 1;
}

/* ── Viewer ── */
#slideshow-viewer.hidden { display: none; }

#slideshow-slide .slide-text {
    width: 100%;
    height: 100%;
    padding: 6vh 8vw;
    overflow: auto;
    color: var(--t-text);
    background: var(--t-bg);
    display: flex;
    flex-direction: column;
    gap: 2vh;
}
#slideshow-slide .slide-text .slide-title {
    font-family: var(--t-font-pixel, monospace);
    font-size: clamp(18px, 3.2vw, 42px);
    color: var(--t-accent);
    margin: 0;
}
#slideshow-slide .slide-text .slide-prose {
    font-size: clamp(14px, 1.8vw, 22px);
    line-height: 1.55;
    max-width: 80ch;
}
#slideshow-slide .slide-text .slide-prose h1,
#slideshow-slide .slide-text .slide-prose h2,
#slideshow-slide .slide-text .slide-prose h3 { color: var(--t-bright); margin-top: 0.8em; }
#slideshow-slide .slide-text .slide-prose p { margin: 0.5em 0; }
#slideshow-slide .slide-text .slide-prose img { max-width: 100%; height: auto; }
#slideshow-slide .slide-text .slide-prose pre {
    background: var(--t-surface);
    padding: 0.8em 1em;
    border: 1px solid var(--t-border);
    overflow: auto;
    font-size: 0.75em;
}
#slideshow-slide .slide-text .slide-prose code { font-family: var(--t-font-mono, monospace); }

#slideshow-slide .slide-image-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100vw;
    max-height: 100vh;
}
#slideshow-slide .slide-image-wrap > img {
    display: block;
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
}
#slideshow-slide .slide-hotspot-live {
    position: absolute;
    box-sizing: border-box;
    cursor: pointer;
    /* Nearly-invisible fill: transparent divs sometimes don't register hits reliably, this forces them to. */
    background: rgba(0, 0, 0, 0.001);
    border: 0;
    pointer-events: auto;
    z-index: 5;
    transition: background 0.15s, border 0.15s;
}
#slideshow-viewer.debug-hotspots .slide-hotspot-live {
    background: color-mix(in srgb, var(--t-accent) 18%, transparent);
    border: 1px dashed var(--t-accent);
}
#slideshow-slide .slide-hotspot-live:hover {
    background: color-mix(in srgb, var(--t-accent) 15%, transparent);
    border: 1px solid var(--t-accent);
}

/* ── Group-bar button ── */
#group-bar .slideshow-present-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-family: var(--t-font-pixel, monospace);
    font-size: 10px;
    color: var(--t-muted);
    border: 1px solid var(--t-border);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
}
#group-bar .slideshow-present-btn:hover {
    color: var(--t-accent);
    border-color: var(--t-accent);
}

/* ── Hotspot editor ── */
#slideshow-editor.hidden { display: none; }
#slideshow-editor[disabled], #slideshow-editor [disabled] { opacity: 0.4; pointer-events: none; }
#slideshow-ed-stage { cursor: crosshair; }
#slideshow-ed-layer { pointer-events: auto; }
#slideshow-ed-layer .ed-rect {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid var(--t-accent);
    background: color-mix(in srgb, var(--t-accent) 10%, transparent);
    cursor: pointer;
}
#slideshow-ed-layer .ed-rect.selected {
    border: 2px solid var(--t-bright);
    background: color-mix(in srgb, var(--t-bright) 18%, transparent);
    cursor: move;
}
#slideshow-ed-layer .ed-rect .ed-label {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 2px;
    font-family: var(--t-font-pixel, monospace);
    font-size: 9px;
    padding: 1px 3px;
    background: var(--t-accent);
    color: var(--t-bg);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
#slideshow-ed-layer .ed-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--t-bright);
    border: 1px solid var(--t-bg);
    box-sizing: border-box;
    pointer-events: auto;
    z-index: 2;
}
#slideshow-ed-layer .ed-handle[data-handle="nw"] { left: -5px;  top: -5px;    cursor: nwse-resize; }
#slideshow-ed-layer .ed-handle[data-handle="n"]  { left: 50%;   top: -5px;    cursor: ns-resize;   transform: translateX(-50%); }
#slideshow-ed-layer .ed-handle[data-handle="ne"] { right: -5px; top: -5px;    cursor: nesw-resize; }
#slideshow-ed-layer .ed-handle[data-handle="e"]  { right: -5px; top: 50%;     cursor: ew-resize;   transform: translateY(-50%); }
#slideshow-ed-layer .ed-handle[data-handle="se"] { right: -5px; bottom: -5px; cursor: nwse-resize; }
#slideshow-ed-layer .ed-handle[data-handle="s"]  { left: 50%;   bottom: -5px; cursor: ns-resize;   transform: translateX(-50%); }
#slideshow-ed-layer .ed-handle[data-handle="sw"] { left: -5px;  bottom: -5px; cursor: nesw-resize; }
#slideshow-ed-layer .ed-handle[data-handle="w"]  { left: -5px;  top: 50%;     cursor: ew-resize;   transform: translateY(-50%); }
#slideshow-ed-layer .ed-rect-draft {
    position: absolute;
    box-sizing: border-box;
    border: 1px dashed var(--t-bright);
    background: color-mix(in srgb, var(--t-bright) 8%, transparent);
    pointer-events: none;
}

/* ── Gallery picker ── */
#slideshow-gallery-picker.hidden { display: none; }
.slideshow-gp-item {
    position: relative;
    aspect-ratio: 1;
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    cursor: pointer;
    overflow: hidden;
    transition: border 0.15s;
}
.slideshow-gp-item:hover { border-color: var(--t-accent); }
.slideshow-gp-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.slideshow-gp-item .slideshow-gp-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 5px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--t-text);
    font-family: var(--t-font-pixel, monospace);
    font-size: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Target picker ── */
#slideshow-picker.hidden { display: none; }
.slideshow-pick-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    font-family: var(--t-font-pixel, monospace);
    font-size: 10px;
    color: var(--t-text);
    border: 1px solid var(--t-border);
    background: var(--t-bg);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
}
.slideshow-pick-row:hover {
    border-color: var(--t-accent);
    color: var(--t-accent);
}
#slideshow-pick-list .slideshow-pick-row {
    border: 1px solid transparent;
}
#slideshow-pick-list .slideshow-pick-row:hover {
    border-color: var(--t-accent);
}