.vcf-drop {
    border: 2px dashed var(--ck-border);
    border-radius: var(--ck-radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.vcf-drop:hover,
.vcf-drop.is-dragover {
    background-color: var(--ck-surface-2);
}

.vcf-drop.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
}

/* Only the list scrolls, inside its own border, so the heading stays put and the scrollbar stays in the box.
   Rows are 48px with their divider and the last has none, so 239px holds five. A longer list scrolls in whole
   rows: only the fifth row's own divider hides under the bottom border before scrolling */
.vcf-files {
    max-height: calc(5 * 48px - 1px + 2 * var(--bs-border-width));
    overflow-y: auto;
    scrollbar-width: thin;
    border: var(--bs-border-width) solid var(--ck-border-subtle);
}

#vcf_preview {
    max-height: 400px;
    overflow: auto;
    scrollbar-width: thin;
}

/* Side by side, the preview card is as tall as its content but never taller than the upload card: out of the flow,
   it leaves the row's height to the upload card, and with that as its max-height the preview scrolls in what's left */
@media (min-width: 768px) {
    .vcf-preview-col {
        position: relative;
    }

    .vcf-preview-col > .card {
        position: absolute;
        top: 0;
        left: calc(var(--bs-gutter-x) * 0.5);
        right: calc(var(--bs-gutter-x) * 0.5);
        max-height: 100%;
    }

    /* A grid, not a flex column: as a flex item, Chrome gives a table that fits a vertical scrollbar it doesn't need */
    .vcf-preview-col .card-body {
        display: grid;
        grid-template-rows: minmax(0, auto) auto auto;
        min-height: 0;
    }

    #vcf_preview {
        min-height: 0;
        max-height: none;
    }
}

/* Devtools' compact cells; a value's own line breaks stay, without wrapping */
#vcf_preview table {
    font-size: 0.75rem;
}

#vcf_preview td {
    padding: 0.5rem;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}