/* ================================================================
   TUTORIAL SPOTLIGHT — Guided walkthrough overlay
   ================================================================ */

.tut-overlay {
    position: fixed; inset: 0; z-index: 100000;
    pointer-events: none; opacity: 0;
    transition: opacity 0.35s ease;
}
.tut-overlay.active { opacity: 1; pointer-events: auto; }

/* Backdrop with spotlight cutout */
.tut-backdrop {
    position: fixed; inset: 0;
    /* Radial cutout built from box-shadow */
    background: transparent;
    z-index: 100001;
}
.tut-overlay.active .tut-backdrop {
    /* Spotlight cutout using clip-path with CSS vars */
    background: rgba(0, 0, 0, 0.65);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3C/svg%3E");
}

/* Spotlight hole — rendered as a pseudo-element that punches through */
.tut-overlay.active::before {
    content: '';
    position: fixed;
    top: var(--spot-top, -999px);
    left: var(--spot-left, -999px);
    width: var(--spot-width, 0);
    height: var(--spot-height, 0);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    z-index: 100001;
    pointer-events: none;
    transition: top 0.4s ease, left 0.4s ease, width 0.4s ease, height 0.4s ease;
}

/* Pulse ring around spotlight */
.tut-overlay.active::after {
    content: '';
    position: fixed;
    top: var(--spot-top, -999px);
    left: var(--spot-left, -999px);
    width: var(--spot-width, 0);
    height: var(--spot-height, 0);
    border-radius: 12px;
    border: 2px solid rgba(67, 97, 238, 0.6);
    z-index: 100002;
    pointer-events: none;
    animation: tut-pulse 2s ease-in-out infinite;
    transition: top 0.4s ease, left 0.4s ease, width 0.4s ease, height 0.4s ease;
}

@keyframes tut-pulse {
    0%, 100% { border-color: rgba(67, 97, 238, 0.6); transform: scale(1); }
    50% { border-color: rgba(67, 97, 238, 0.2); transform: scale(1.02); }
}

/* Tooltip card */
.tut-tooltip {
    position: fixed;
    z-index: 100003;
    width: 320px;
    background: #fff;
    border-radius: 16px;
    padding: 20px 22px 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: top 0.35s ease, left 0.35s ease, opacity 0.25s ease;
    font-family: 'Inter', system-ui, sans-serif;
}

body.dark-mode .tut-tooltip {
    background: #1a1f36;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Step indicator dots */
.tut-step-indicator {
    display: flex; gap: 6px; margin-bottom: 12px;
}
.tut-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #d1d5db;
    transition: background 0.2s, transform 0.2s;
}
.tut-dot.active {
    background: #4361ee;
    transform: scale(1.3);
}
body.dark-mode .tut-dot { background: rgba(255, 255, 255, 0.15); }
body.dark-mode .tut-dot.active { background: #6b8aff; }

/* Title */
.tut-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 6px;
    line-height: 1.3;
}
body.dark-mode .tut-title { color: #f0f0f5; }

/* Description */
.tut-desc {
    font-size: 0.88rem;
    color: #555;
    margin: 0 0 16px;
    line-height: 1.55;
}
body.dark-mode .tut-desc { color: #a0a4b8; }

/* Actions row */
.tut-actions {
    display: flex; align-items: center; justify-content: space-between;
}

.tut-nav {
    display: flex; gap: 8px;
}

.tut-skip {
    background: none; border: none;
    font-size: 0.78rem; color: #888;
    cursor: pointer; padding: 4px 0;
    font-family: inherit;
    transition: color 0.15s;
}
.tut-skip:hover { color: #555; text-decoration: underline; }
body.dark-mode .tut-skip { color: #666; }
body.dark-mode .tut-skip:hover { color: #999; }

.tut-btn {
    font-family: inherit;
    font-size: 0.82rem; font-weight: 600;
    padding: 7px 18px; border-radius: 10px;
    border: none; cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}
.tut-btn:hover { transform: translateY(-1px); }
.tut-btn:active { transform: translateY(0); }

.tut-btn-back {
    background: #f0f0f5; color: #555;
}
body.dark-mode .tut-btn-back {
    background: rgba(255, 255, 255, 0.08); color: #aaa;
}

.tut-btn-next {
    background: #4361ee; color: #fff;
}
.tut-btn-next:hover { opacity: 0.9; }

/* Responsive */
@media (max-width: 400px) {
    .tut-tooltip {
        width: calc(100vw - 24px);
        left: 12px !important;
        right: 12px;
    }
}