/* The guided tour's overlay. Both elements are pointer-events:none so the tour never stands
   between the operator and the control it is describing. */

.stratify-tour-cutout,
.stratify-tour-dim {
    position: fixed;
    pointer-events: none;
    z-index: 1080;
}

.stratify-tour-dim {
    inset: 0;
    background: rgba(33, 37, 41, 0.45);
}

/* The dim is the ring's own shadow, spread far enough to cover any viewport. Everything outside
   the target rectangle goes dark; the rectangle itself is untouched, so whatever is inside it
   keeps its real colours and contrast. */
.stratify-tour-cutout {
    border-radius: 0.5rem;
    box-shadow: 0 0 0 2px var(--bs-primary, #1565d8), 0 0 0 100vmax rgba(33, 37, 41, 0.45);
    transition: top 0.15s ease, left 0.15s ease, width 0.15s ease, height 0.15s ease;
}

/* The card. Docked rather than tethered to the target: the steps carry real explanation, and a
   tooltip that has to dodge the element it points at cannot hold a paragraph at 320px wide. */
.stratify-tour-card {
    position: fixed;
    z-index: 1090;
    right: 1rem;
    bottom: 1rem;
    width: min(28rem, calc(100vw - 2rem));
    max-height: min(32rem, calc(100vh - 2rem));
    display: flex;
    flex-direction: column;
}

.stratify-tour-card .stratify-tour-body {
    overflow-y: auto;
}

/* Markdown comes in with its own margins; the last one would push the footer off-centre. */
.stratify-tour-card .stratify-tour-body > :last-child {
    margin-bottom: 0;
}

.stratify-tour-card .stratify-tour-body table {
    width: 100%;
    font-size: 0.875rem;
}

.stratify-tour-card .stratify-tour-body code {
    overflow-wrap: anywhere;
}

/* On a phone the card is the bottom sheet it may as well be. */
@media (max-width: 575.98px) {
    .stratify-tour-card {
        right: 0.5rem;
        left: 0.5rem;
        bottom: 0.5rem;
        width: auto;
        max-height: 70vh;
    }
}

/* Honour the operating-system setting: the ring still moves, it just stops sliding. */
@media (prefers-reduced-motion: reduce) {
    .stratify-tour-cutout {
        transition: none;
    }
}