/*
 * Styling for the in-app tutorial overlay (coach-marks).
 *
 * Layout: a full-viewport fixed container with three children
 *   - tutorial__backdrop  : dimmed layer below everything
 *   - tutorial__spotlight : cut-out that highlights the anchored element
 *   - tutorial__tooltip   : floating card with title, body, and buttons
 *
 * The spotlight uses a huge box-shadow to darken everything outside its
 * own rectangle, which avoids needing SVG masks or mix-blend-mode.
 */

.tutorial {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    font-family: var(--font-family);
    color: var(--toolbar-fg);
}

.tutorial__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    /* Must NOT intercept clicks — otherwise the user can't click the
       highlighted UI element the tutorial is asking them to use. The
       spotlight's box-shadow already provides the dim effect, and the
       tooltip has its own pointer-events:auto. */
    pointer-events: none;
}

.tutorial__spotlight {
    position: absolute;
    border-radius: 6px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    /* Sit on top of the backdrop so the punched-out area is actually
       transparent. */
    background: transparent;
    pointer-events: none;
    transition: left 0.15s ease, top 0.15s ease,
                width 0.15s ease, height 0.15s ease;
    outline: 2px solid #0055AA;
    outline-offset: 0;
}

.tutorial__tooltip {
    position: absolute;
    max-width: 340px;
    min-width: 240px;
    background: #ffffff;
    border: 1px solid var(--toolbar-sep-color);
    border-radius: 8px;
    padding: 14px 16px 12px 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    font-size: var(--dialog-font-body);
    line-height: 1.45;
}

.tutorial__tooltip-title {
    font-size: 12pt;
    font-weight: 600;
    margin-bottom: 6px;
    color: #0055AA;
}

.tutorial__tooltip-body {
    margin-bottom: 12px;
    color: var(--toolbar-fg);
}

.tutorial__tooltip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tutorial__step-label {
    font-size: var(--dialog-font-small);
    color: var(--dialog-muted-fg);
}

.tutorial__actions {
    display: flex;
    gap: 6px;
}

.tutorial__btn {
    padding: 5px 12px;
    border-radius: 4px;
    border: 1px solid var(--toolbar-sep-color);
    background: #ffffff;
    color: var(--toolbar-fg);
    font: inherit;
    cursor: pointer;
}

.tutorial__btn:hover {
    background: var(--toolbar-btn-active);
}

.tutorial__btn--next {
    background: #0055AA;
    border-color: #0055AA;
    color: #ffffff;
}

.tutorial__btn--next:hover {
    background: #003d7a;
    border-color: #003d7a;
}

.tutorial__btn:disabled,
.tutorial__btn:disabled:hover {
    background: #c8c8c8;
    border-color: #c8c8c8;
    color: #6b6b6b;
    cursor: not-allowed;
}