/* ============================================================
   Tutorial Engine Styles
   ============================================================ */

/* Overlay — dims the background during highlighted steps */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
}

.tutorial-overlay-light {
    background: rgba(0, 0, 0, 0.5);
}

.tutorial-overlay-dark {
    background: rgba(0, 0, 0, 0.75);
}

/* ============================================================
   Modal Panel
   ============================================================ */

.tutorial-modal {
    position: fixed;
    z-index: 9100;
    background: var(--card-bg);
    border: 1px solid var(--tutorial-accent);
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--tutorial-accent);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.tutorial-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--tutorial-accent);
    border-radius: 7px 7px 0 0;
}

.tutorial-modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tutorial-accent-text);
    margin: 0;
}

.tutorial-modal-progress {
    font-size: 0.75rem;
    color: var(--tutorial-accent-text);
    white-space: nowrap;
    opacity: 0.8;
}

.tutorial-modal-body {
    padding: 1rem;
    font-size: 0.9rem;
    color: var(--text-color);
    line-height: 1.5;
}

.tutorial-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
}

/* ============================================================
   Callout Panel
   ============================================================ */

.tutorial-callout {
    position: fixed;
    z-index: 9100;
    background: var(--card-bg);
    border: 1px solid var(--tutorial-accent);
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--tutorial-accent);
    width: 300px;
    max-width: 50vw;
    pointer-events: all;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.tutorial-callout-header {
    padding: 0.2rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--tutorial-accent);
    border-radius: 7px 7px 0 0;
}

.tutorial-callout-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tutorial-accent-text);
    margin: 0;
}

.tutorial-callout-body {
    padding: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-color);
    line-height: 1.5;
}

.tutorial-callout-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-color);
}

/* ============================================================
   Highlight cutout — punches target element above the overlay
   ============================================================ */

.tutorial-highlight {
    position: fixed;
    z-index: 9050;
    border-radius: 4px;
    box-shadow: 0 0 0 4px var(--tutorial-accent);
    pointer-events: none;
}

@keyframes tutorial-flash {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.tutorial-highlight-flash {
    position: fixed;
    z-index: 9050;
    border-radius: 4px;
    box-shadow: 0 0 0 4px var(--tutorial-accent);
    pointer-events: none;
    animation: tutorial-flash 0.5s ease-in-out 4;
    animation-fill-mode: forwards;
}

/* ============================================================
   Buttons — reuse app conventions
   ============================================================ */

.tutorial-btn-next {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    background: var(--tutorial-accent);
    color: var(--tutorial-accent-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.tutorial-btn-next:hover {
    opacity: 0.85;
}

.tutorial-btn-skip {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}

.tutorial-btn-skip:hover {
    color: var(--text-color);
    border-color: var(--text-color);
}

.tutorial-btn-exit {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: auto;
}

.tutorial-btn-exit:hover {
    color: var(--danger-color);
}