/* Display progress overlay
   need to include progressOverlay.css to use */
#busyOverlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.6);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

    #busyOverlay .busy-inner {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 16px 20px;
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
        display: flex;
        align-items: center;
        gap: 12px;
        font: 14px/1.4 system-ui, sans-serif;
    }

.busy-spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    animation: spin 1s linear infinite;
}

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

#flaringLineViewport {
    position: relative; /* NEW */
}

    /* Overlay pinned to the bounds of the scroll pane */
    #flaringLineViewport .lines-busy {
        position: absolute;
        inset: 0;
        z-index: 1000;
        display: none; /* shown via JS */
        align-items: center; /* center inner box */
        justify-content: center;
        background: transparent; /* table remains visible */
        pointer-events: all; /* block clicks while busy */
    }

        /* Opaque centered card, smaller than the table */
        #flaringLineViewport .lines-busy .busy-inner {
            background: #ffffff; /* opaque */
            border: 1px solid #4b5563; /* dark gray outline */
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,.18);
            width: 60%;
            max-width: 640px;
            min-width: 320px;
            min-height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 16px 20px;
            font: 14px/1.4 system-ui, sans-serif;
        }