#viewer {

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 32px;
}

#viewer.placeholder {

    min-height: 100%;

    justify-content: center;

    color: var(--muted);
}

.split-group-label {

    width: 100%;

    padding: 8px 12px;

    border-top:
        2px dashed var(--accent);

    color: var(--accent);
    font-size: 13px;
    font-weight: 600;

    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.split-group-label:first-child {

    border-top: none;
    padding-top: 0;
}

.split-preview-truncated {

    color: var(--muted);

    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-style: italic;

    border-top-style: solid;
}

/* Sticky rail that pins the Split PDF / Download overlay button to the
 * middle of the visible #viewerContainer area while the user scrolls the
 * page previews underneath.  Mirrors the structure of .render-waiter-rail:
 * a zero-height sticky positioning anchor whose only child is the visible
 * pill, so the rail itself never displaces page content. */
.split-overlay-rail {

    position: sticky;

    top: 0;
    height: 0;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    z-index: 10;
    pointer-events: none;
}

.split-overlay-rail[hidden] {

    display: none;
}

.split-overlay-btn {

    /* Vertical offset puts the button at roughly the centre of the
     * #viewerContainer's visible area (min-height: 70vh, so ~35vh = mid). */
    margin-top: 32vh;

    padding: 16px 32px;

    border: none;
    border-radius: 12px;

    background: var(--accent);
    color: var(--text);

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    box-shadow: var(--shadow);

    transition: .15s;

    pointer-events: auto;
}

.split-overlay-btn:hover:not(:disabled) {

    transform: translateY(-1px);
}

.split-overlay-btn:disabled {

    opacity: .7;
    cursor: progress;
}

/* Transparent overlay shown in create.php when the generated PDF would
 * exceed the auto-render page cap.  The backdrop itself is transparent
 * and pointer-events: none so the user can still scroll the viewer
 * underneath; only the centred button captures clicks. */
.create-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: transparent;

    pointer-events: none;

    z-index: 4;
}

.create-overlay[hidden] {

    display: none;
}

.create-overlay-btn {

    pointer-events: auto;

    padding: 16px 32px;

    border: none;
    border-radius: 12px;

    background: var(--accent);
    color: var(--text);

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    box-shadow: var(--shadow);

    transition: .15s;
}

.create-overlay-btn:hover {

    transform: translateY(-1px);
}

.page {

    position: relative;

    background: white;

    box-shadow: var(--shadow);
}

.pdf-layer {

    display: block;
}

/* Render-in-progress overlay.  Two-element structure:
 *  - .render-waiter-rail: zero-height sticky rail prepended to
 *    #viewerContainer.  Stays pinned to the top of the visible scroll
 *    area without pushing any page content down (height: 0, overflow
 *    visible).  As a flex parent it horizontally centres the pill.
 *  - .render-waiter: the visible pill, hidden by default. */
.render-waiter-rail {

    position: sticky;

    top: 0;
    height: 0;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    z-index: 5;
    pointer-events: none;
}

.render-waiter {

    margin-top: 64px;

    display: none;
    align-items: center;
    gap: 10px;

    padding: 10px 14px;
    max-width: calc(100% - 24px);

    border-radius: 999px;
    background: rgba(11, 18, 32, .88);
    color: var(--text);

    box-shadow: var(--shadow);
    backdrop-filter: blur(4px);

    pointer-events: none;
}

.render-waiter.is-visible {

    display: inline-flex;
}

.render-waiter-spinner {

    width: 16px;
    height: 16px;

    border:
        2px solid rgba(255, 255, 255, .25);

    border-top-color: var(--accent);

    border-radius: 50%;

    animation:
        render-waiter-spin .8s linear infinite;
}

.render-waiter-label {

    font-size: 13px;
    line-height: 1;
}

@keyframes render-waiter-spin {
    to { transform: rotate(360deg); }
}