/*
 * Borddly's own styles.
 *
 * Everything else under /assets is Metronic and gets replaced wholesale on an
 * upgrade, so anything we write lives here instead. Kept deliberately small:
 * if a rule can be expressed with the theme's existing utility classes in the
 * markup, it belongs there rather than in this file.
 */

/* ------------------------------------------------------------------ tour */

/*
 * The spotlight is the hole, not the shade. A box-shadow large enough to cover
 * any screen darkens everything outside this element, which means the element
 * under it stays at full contrast without cutting a shape out of an overlay.
 */
.borddly-tour-spotlight {
    position: fixed;
    z-index: 1080;
    border-radius: 0.625rem;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.borddly-tour-popover {
    position: fixed;
    z-index: 1081;
    width: 320px;
    max-width: calc(100vw - 24px);
}

/* The spotlight animates; on a first paint it should simply appear where it
   belongs rather than sliding in from the top-left corner. */
@media (prefers-reduced-motion: reduce) {
    .borddly-tour-spotlight {
        transition: none;
    }
}