/* ============================================================
   Custom styles layered on top of the nerfies/Bulma template.
   Only the LQ↔SR slider and the synced video groups live here;
   everything else is Bulma + static/css/index.css.
   ============================================================ */

/* === BibTeX copy button === */
.bibtex-wrapper {
    position: relative;
}
.bibtex-wrapper pre {
    margin: 0;
}
.bibtex-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 5;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #888;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}
.bibtex-copy:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #333;
}
.bibtex-copy.is-copied {
    color: #48c774;
}

/* === Quantitative table tweaks === */
.quant-table {
    font-size: 0.85rem;
}
.quant-table th, .quant-table td {
    padding: 0.45em 0.5em;
    vertical-align: middle;
}
.quant-table thead th {
    background: #f5f5f5;
}

/* === LQ vs SR draggable slider === */
.slider-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.video-slider {
    text-align: center;
}

.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #bbb;
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
}

.slider-video {
    width: 100%;
    display: block;
}

.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.slider-overlay .slider-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
}

.slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
}

.slider-line {
    flex: 1;
    width: 3px;
    background: white;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.slider-knob {
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: #222;
    font-size: 14px;
    flex-shrink: 0;
}

.slider-label {
    position: absolute;
    top: 12px;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 4px;
    z-index: 5;
    pointer-events: none;
}

.slider-label.left  { left: 12px; }
.slider-label.right { right: 12px; }

/* === Magnifier lens (qualitative comparisons) === */
.lens-set {
    --src-aspect: 16 / 9;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 48px;
}
.lens-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.lens-source {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #bbb;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}
.lens-source .lens-src-vid {
    width: 100%;
    display: block;
}
.lens-box {
    position: absolute;
    border: 2px solid #ff3860;
    box-shadow: 0 0 0 1px white, 0 0 6px rgba(255, 56, 96, 0.6);
    pointer-events: none;
    box-sizing: border-box;
}
.lens-resize {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: white;
    border: 2px solid #ff3860;
    border-radius: 50%;
    cursor: nwse-resize;
    pointer-events: auto;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
.lens-hint {
    text-align: center;
    color: #777;
    font-size: 0.85rem;
    margin: 0;
}
.lens-crops {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.lens-crop {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    border: 2px solid #ff3860;
    aspect-ratio: var(--src-aspect);
    background: #000;
}
.lens-crop video {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    display: block;
}

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

/* === Synced video groups (qualitative comparisons) === */
.sync-group {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.sync-set {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sync-row {
    display: grid;
    gap: 12px;
}

.sync-row.two-col   { grid-template-columns: 1fr 1fr; }
.sync-row.three-col { grid-template-columns: 1fr 1fr 1fr; }

.sync-video-item {
    position: relative;
}

.sync-video-item video {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #bbb;
    display: block;
}

.video-label {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 4px;
    pointer-events: none;
}

.sync-controls {
    text-align: center;
    margin-top: 4px;
}

@media (max-width: 640px) {
    .sync-row.three-col { grid-template-columns: 1fr; }
    .sync-row.two-col   { grid-template-columns: 1fr; }
}