/*  ================================================================
    LMIS guided tour - the spotlight, the card and the dimmer.

    Shown once per user, to point out a feature and the way to it.
    See Scripts/lmis-tour.js for the steps and for how "once" is kept.

    Everything is prefixed .lmt- and nothing here styles an application
    element, so the tour cannot move the page it is describing.
    ================================================================ */

/*  The spotlight does the dimming as well as the hole: one very large spread
    shadow paints everything outside this box and nothing inside it. There is
    deliberately no separate full-screen overlay. An overlay would have to sit
    above the page to dim it, and then it - not the button - would catch the
    click that every step here asks the user to make. It also dimmed the
    spotlit element a second time, through the hole.

    pointer-events:none for the same reason: the tour describes the page, it
    never stands in front of it. */
.lmt-spot {
    position: absolute;
    z-index: 100001;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(8, 24, 44, .55), 0 0 0 3px #f6c445;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease, top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}

.lmt-spot.is-on { opacity: 1; }

.lmt-card {
    position: absolute;
    z-index: 100002;
    width: 330px;
    max-width: calc(100vw - 32px);
    padding: 16px 18px 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(8, 24, 44, .38);
    color: #22364e;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.lmt-step {
    display: block;
    margin-bottom: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #1466a8;
}

.lmt-card h3 {
    margin: 0 0 6px;
    font-size: 15.5px;
    font-weight: 800;
    color: #0b1d3a;
}

.lmt-card p { margin: 0 0 12px; color: #46586d; }

/*  The path being taught, so the reader can find it again tomorrow
    without the tour. */
.lmt-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0 0 12px;
    font-size: 11.5px;
    color: #64748b;
}

.lmt-path b { color: #0b1d3a; font-weight: 700; }
.lmt-path i { font-style: normal; color: #9bb0c4; }

.lmt-actions { display: flex; align-items: center; gap: 8px; }

.lmt-btn {
    border: 0;
    border-radius: 8px;
    padding: 7px 15px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.lmt-next { background: linear-gradient(135deg, #1c5eaa, #0e73a0); color: #fff; }
.lmt-next:hover { filter: brightness(1.08); }

.lmt-skip {
    margin-left: auto;
    background: transparent;
    color: #64748b;
    padding: 7px 4px;
    text-decoration: underline;
}

.lmt-skip:hover { color: #0b1d3a; }

.lmt-dots { display: flex; gap: 5px; }
.lmt-dot { width: 6px; height: 6px; border-radius: 50%; background: #d4dde8; }
.lmt-dot.is-on { background: #1466a8; }

/*  The nudge that appears when a step is waiting for the user to click the
    thing rather than to press Next. */
.lmt-wait {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #15803d;
}

@media (max-width: 640px) {
    .lmt-card { width: calc(100vw - 32px); }
}

@media (prefers-reduced-motion: reduce) {
    .lmt-dim, .lmt-spot { transition: none; }
}