/* guided_tour.css — styles for the shared first-visit walkthrough.
   Loaded by /birth-chart and /dashboard; see guided_tour.js. */

/* ══ First-visit guided tour ═══════════════════════════════════════
   #tour-spot does the dimming and the cut-out in one element: the box
   itself is transparent and its box-shadow spreads far enough to cover
   any viewport, so the shadow is the scrim and the box is the hole.
   Avoids a four-rectangle scrim that has to stay aligned on resize.

   The overlay is click-through and only the card catches pointers, so
   the highlighted control stays usable while it is being explained —
   the Ashtakavarga step is far clearer if you can tick the box and
   watch the bindus appear. Without this the full-screen overlay
   swallowed every click, which elementFromPoint confirmed. That also
   makes this a non-modal coach mark, so it carries role="dialog"
   without aria-modal: nothing behind it is actually inert. */
#tour-overlay { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#tour-overlay.hidden { display: none; }
#tour-card { pointer-events: auto; }
#tour-spot {
    position: absolute; border-radius: 12px; pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(2, 6, 23, .78),
                0 0 0 2px #38bdf8,
                0 0 22px 4px rgba(56, 189, 248, .55);
    transition: top .35s ease, left .35s ease,
                width .35s ease, height .35s ease;
}
#tour-card {
    position: absolute; width: min(310px, calc(100vw - 32px));
    background: rgba(15, 23, 42, .97);
    border: 1px solid rgba(56, 189, 248, .45);
    border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
    transition: top .35s ease, left .35s ease;
}
#tour-step-count {
    font-size: 9px; font-weight: 900; letter-spacing: .18em;
    text-transform: uppercase; color: #38bdf8; margin-bottom: 5px;
}
#tour-title {
    font-size: 14px; font-weight: 900; color: #f8fafc; margin-bottom: 5px;
}
#tour-body {
    font-size: 12px; line-height: 1.6; color: #cbd5e1; margin: 0 0 12px;
}
#tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#tour-skip {
    background: none; border: none; cursor: pointer; padding: 6px 2px;
    font-size: 11px; font-weight: 700; color: #64748b;
}
#tour-skip:hover { color: #cbd5e1; }
#tour-next {
    background: #38bdf8; color: #020617; border: none; cursor: pointer;
    padding: 7px 18px; border-radius: 9px;
    font-size: 11px; font-weight: 900; text-transform: uppercase;
    letter-spacing: .06em;
}
#tour-next:hover { background: #7dd3fc; }
#tour-replay {
    margin-top: 6px; background: none; border: none; cursor: pointer;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #475569;
}
#tour-replay:hover { color: #38bdf8; }

body.light #tour-spot { box-shadow: 0 0 0 9999px rgba(60, 44, 20, .62),
                                    0 0 0 2px #0e7490, 0 0 18px 3px rgba(14, 116, 144, .4); }
body.light #tour-card { background: #f4ede0; border-color: #6b5232; }
body.light #tour-title { color: #1f2937; }
body.light #tour-body { color: #4b3c28; }
body.light #tour-step-count { color: #0e7490; }
body.light #tour-next { background: #0e7490; color: #f4ede0; }
body.light #tour-replay { color: #6b5232; }

@media (prefers-reduced-motion: reduce) {
    #tour-spot, #tour-card { transition: none; }
}