/* A card laid out on a board.

   Shared by the reading editor and the layout preview dialog, which draws the
   same boxes without a deck behind them. */

/* --- reading board (app/static/js/reading_editor.js) --------------- */

.reading-slot {
    position: absolute;
    /* No z-index anywhere: stacking follows DOM order, which is slot
       order, which is what paints the Celtic Cross cross-card on top. */
    transform-origin: center center;
    cursor: pointer;
}

.reading-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.reading-slot.is-empty img {
    opacity: .45;
}

/* The slot an overlay step is filling (reading_editor.js markCurrentSlot).
   Heavier than a focus ring has any right to be, because it is read through
   the veil those steps lay over the board: at a quarter strength a single
   hairline of primary against a pale card is all but gone, while the edge
   between two rings survives the wash — which is why this is a band of
   primary with a gap of surface inside it rather than one thin outline. */
.reading-slot.is-current {
    outline: 4px solid var(--tblr-primary, #206bc4);
    outline-offset: 3px;
    box-shadow:
        0 0 0 3px var(--tblr-bg-surface, #fff),
        0 0 0 11px var(--tblr-primary, #206bc4);
}