/* Coach-marks (beta onboarding intro-hints).
   Dimmed screen + spotlight hole (box-shadow trick) + tooltip card.
   Hybrid: a step with a target → spotlight on it; without → centered card.
   Uses ONLY global tokens from tokens.css (per-page <style> tokens like --teal
   are not available here). */

.cm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    cursor: default;
}

/* Visual dim + hole. box-shadow paints everything outside the box; a 0×0 box
   = full dim (used for centered, target-less steps). pointer-events:none —
   the .cm-overlay above does the click-blocking. */
.cm-spot {
    position: fixed;
    z-index: 9001;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(8, 10, 16, 0.80);
    pointer-events: none;
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}

.cm-tip {
    position: fixed;
    z-index: 9002;
    width: 420px;
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid rgba(34, 211, 238, 0.35);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(34, 211, 238, 0.08);
    animation: cm-in .2s ease;
    font-family: var(--font-sans);
}

@keyframes cm-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.cm-tip-label {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

.cm-tip-text {
    margin: 0 0 18px;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-primary);
}

.cm-tip-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cm-progress {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.cm-btns { display: flex; align-items: center; gap: 4px; }

.cm-skip {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: inherit;
}
.cm-skip:hover { color: var(--text-primary); }

.cm-next {
    background: var(--accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: 9px;
    padding: 10px 22px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    font-family: inherit;
}
.cm-next:hover { background: var(--accent-hover); }

@media (max-width: 768px) {
    /* Full-width; vertical position (top) is computed in JS so the tip stays
       clear of the fixed bottom-nav. */
    .cm-tip {
        left: 16px !important;
        right: 16px !important;
        width: auto;
    }
}