/* The layout preview dialog (layouts/layout/templates/preview_modal.html). */

/* --- layout preview dialog (layouts/layout/templates/preview_modal.html) --- */

.layout-preview-body {
    position: relative;
    height: calc(100vh - 16rem);
    min-height: 22rem;
    padding: 0;
}

/* The dialog's counterpart to .reading-slot: same box, same rotation about
   the centre, but a drawn placeholder rather than a card image — a layout
   has no deck. No z-index, so stacking follows document order, which is
   slot order, which is what paints the Celtic Cross cross-card on top. */
.layout-slot {
    position: absolute;
    transform-origin: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .5rem;
    text-align: center;
    border: 3px dashed var(--tblr-border-color, #dadfe5);
    border-radius: 18px;
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-secondary, #667382);
}

/* Solid, and in the accent colour: the significator is the one slot whose
   presence is optional, so it is worth telling apart at a glance. */
.layout-slot.is-significator {
    border-style: solid;
    border-color: var(--tblr-primary, #206bc4);
    color: var(--tblr-primary, #206bc4);
}

.layout-slot-index {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    opacity: .35;
}

/* The reason this dialog renders elements instead of reusing the stored
   SVG: a name you can read. Wrapped rather than clipped, because a slot
   called "Hopes and fears" is exactly the case that matters. */
.layout-slot-name {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    overflow-wrap: anywhere;
}