#unfold-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; background: white; z-index: 100010; box-sizing: border-box; overflow: hidden; }
#unfold-overlay.glass-overlay { background: rgba(30,30,30,0.35); backdrop-filter: blur(0.8rem); -webkit-backdrop-filter: blur(0.8rem); color: black; }
.close-minus { position: absolute; top: 3.5rem; right: 4rem; font-size: 5rem; cursor: pointer; user-select: none; color: black; z-index: 10; line-height: 1; transition: opacity 0.2s; }
.close-minus:hover { opacity: 0.5; }
.grid-close-btn { display: none; position: fixed; z-index: 100005; }
body.grid-mode .grid-close-btn { display: block; }
.spread-layout {
    display: grid;
    grid-template-columns: 1fr 3fr; 
    grid-template-rows: auto 1fr;
    gap: 2rem 10rem; 
    width: 100%;
    height: calc(85vh - 6rem); 
    margin-top: 15vh;
    padding: 0 5%;
    box-sizing: border-box;
}

.spread-title-block {
    grid-column: 1;
    grid-row: 1; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.spread-col { 
    height: 100%; 
}
.left-col-scroll { 
    grid-column: 1; grid-row: 2; 
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 12rem; 
}
.left-col-scroll::-webkit-scrollbar { display: none; }

.right-col-canvas { 
    grid-column: 2; grid-row: 2; 
    position: relative; overflow: hidden; width: 100%; height: 100%;
    cursor: grab; touch-action: none;
}
.right-col-canvas:active { cursor: grabbing; }

.spread-canvas-content {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform-origin: 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    pointer-events: none; /* Let container handle drag */
}

.canvas-row {
    display: flex;
    flex-direction: row;
    gap: 4rem;
    justify-content: center;
    align-items: center;
}

.unfold-grid-item { 
    background: white; padding: 1.5rem; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.05); border-radius: 0.2rem; 
    display: inline-flex; justify-content: center; align-items: center; 
    width: fit-content; max-width: 100%; box-sizing: border-box; position: relative;
    pointer-events: auto; /* Re-enable pointer events for clicking */
}
.unfold-grid-item::before {
    content: ""; position: absolute; inset: 0;
    background-image: url('../assets/textures/texture%20paper%203.jpg'); background-size: cover;
    opacity: 0.15; pointer-events: none; border-radius: inherit;
}
.unfold-grid-item img { max-width: 100%; max-height: 40vh; width: auto; height: auto; object-fit: contain; cursor: zoom-in; }

.spread-thumb-item {
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    width: 3.5rem; height: 2.5rem; box-sizing: border-box; margin: 0 0.2rem;
}

.bookmark-note.spread-note { 
    position: relative; bottom: auto; right: auto; transform: none; margin-bottom: 2rem; cursor: default; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.05);
    display: flex; flex-direction: column; justify-content: flex-start; z-index: 10; 
    font-size: 0.95rem; width: 17rem; min-width: 17rem; height: max-content;
    pointer-events: auto;
}
.bookmark-note.spread-note:hover { transform: none; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.05); }

#spread-lightbox {
    position: fixed; inset: 0; z-index: 1000000;
    background: rgba(30, 30, 30, 0.35);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
    opacity: 0; transition: opacity 0.3s ease; cursor: zoom-out;
    padding: 4rem; box-sizing: border-box;
}
#spread-lightbox > img {
    max-width: 90vw; max-height: 75vh;
    box-shadow: 0 1.5rem 4.5rem rgba(0,0,0,0.2);
    border: 1px solid #eaeaea; background: white; padding: 2rem; border-radius: 0.2rem;
}
.lightbox-caption {
    max-width: 800px;
    background: transparent;
    font-family: monospace;
    font-size: 0.9rem;
    text-align: center;
    color: #FFF;
    opacity: 0.7;
    cursor: auto;
}

/* ---------------------------------------------------- */