/* Interactive walkthrough (js/nm-walkthrough.js). Its own stylesheet because it runs on the map AND the Planetarium page,
   which do not share a stylesheet: the warm theme tokens it needs are declared here on its own elements. */
.nm-wt, .nm-wt-nudge {
    --nmc-card-solid: rgba(29, 26, 21, 0.96);
    --nmc-border: rgba(148, 140, 120, 0.28);
    --nmc-border-strong: rgba(155, 238, 255, 0.4);
    --nmc-text: #f2ece0;
    --nmc-muted: #948c78;
    --nmc-accent: #9beeff;
    --nmc-heading-font: Georgia, "Times New Roman", serif;
    --nmc-body-font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   Interactive walkthrough (js/nm-walkthrough.js): dimmed screen with a gliding
   spotlight and pulsing ring, a tooltip card, an animated demo cursor, and the
   "New here?" nudge.
   ========================================================================== */
.nm-wt { position: fixed; inset: 0; z-index: 100000; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; font-family: var(--nmc-body-font); }
.nm-wt.on { opacity: 1; }
.nm-wt-block { position: absolute; inset: 0; pointer-events: auto; background: transparent; cursor: default; }
.nm-wt-spot {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-radius: 12px;
    box-shadow: 0 0 0 100vmax rgba(5, 7, 14, 0.66);
    outline: 2px solid var(--nmc-accent);
    outline-offset: 0;
    pointer-events: none;
    will-change: transform, width, height;
}
.nm-wt-spot.is-gliding { transition: transform 0.5s cubic-bezier(.4, 0, .2, 1), width 0.5s cubic-bezier(.4, 0, .2, 1), height 0.5s cubic-bezier(.4, 0, .2, 1); }
.nm-wt-spot.is-none { outline-color: transparent; border-radius: 0; }
.nm-wt-ring { position: absolute; inset: -2px; border-radius: 13px; border: 2px solid var(--nmc-accent); opacity: 0; animation: nm-wt-pulse 1.8s ease-out infinite; }
.nm-wt-spot.is-none .nm-wt-ring { display: none; }
@keyframes nm-wt-pulse { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(1.14); opacity: 0; } }

.nm-wt-card {
    position: absolute;
    width: 360px;
    max-width: calc(100vw - 28px);
    box-sizing: border-box;
    padding: 14px 16px 14px;
    background: var(--nmc-card-solid);
    color: var(--nmc-text);
    border: 1px solid var(--nmc-border-strong);
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
    pointer-events: auto;
    outline: none;
    transition: opacity 0.2s ease;
}
.nm-wt-card.is-busy { opacity: 0.0; pointer-events: none; }
.nm-wt-card.is-phone { width: auto; max-width: none; }
.nm-wt-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.nm-wt-count { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nmc-muted); }
.nm-wt-skip { padding: 2px 4px; border: 0; background: none; color: var(--nmc-muted); font: 400 12px var(--nmc-body-font); cursor: pointer; }
.nm-wt-skip:hover { color: var(--nmc-text); }
.nm-wt-bar { height: 3px; margin-bottom: 11px; border-radius: 2px; background: rgba(148, 140, 120, 0.25); overflow: hidden; }
.nm-wt-bar i { display: block; height: 100%; width: 0; background: var(--nmc-accent); transition: width 0.35s ease; }
.nm-wt-title { margin: 0 0 6px; font: 400 19px/1.25 var(--nmc-heading-font); color: var(--nmc-text); }
.nm-wt-text { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #d9d2c2; }
.nm-wt-actions { display: flex; justify-content: space-between; gap: 10px; }
.nm-wt-back, .nm-wt-next { padding: 8px 16px; border-radius: 8px; font: 600 14px var(--nmc-body-font); cursor: pointer; }
.nm-wt-back { border: 1px solid var(--nmc-border); background: none; color: var(--nmc-text); }
.nm-wt-back:hover { border-color: var(--nmc-border-strong); }
.nm-wt-next { margin-left: auto; border: 0; background: var(--nmc-accent); color: #11222a; }
.nm-wt-next:hover { filter: brightness(1.08); }
.nm-wt-card button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nm-wt-arrow { display: none; position: absolute; width: 14px; height: 14px; background: var(--nmc-card-solid); border: 1px solid var(--nmc-border-strong); transform: rotate(45deg); }
.nm-wt-arrow[data-side="right"] { left: -8px; margin-top: -7px; border-right: 0; border-top: 0; }
.nm-wt-arrow[data-side="left"] { right: -8px; margin-top: -7px; border-left: 0; border-bottom: 0; }
.nm-wt-arrow[data-side="bottom"] { top: -8px; margin-left: -7px; border-right: 0; border-bottom: 0; }
.nm-wt-arrow[data-side="top"] { bottom: -8px; margin-left: -7px; border-left: 0; border-top: 0; }

.nm-wt-cursor { position: absolute; left: -4px; top: -2px; opacity: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55)); pointer-events: none; transition: opacity 0.25s ease; }
.nm-wt-cursor.show { opacity: 1; }
/* The press shrinks only the arrow, about its tip. (An element-level `scale` property scales the translated position toward the
   top left of the screen, which threw the cursor up and to the left whenever it was pressed.) */
.nm-wt-cursor path { transform-origin: 4px 2px; transition: transform 0.1s ease; }
.nm-wt-cursor.press path { transform: scale(0.85); }
.nm-wt-ripple { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid var(--nmc-accent); background: rgba(155, 238, 255, 0.35); pointer-events: none; animation: nm-wt-ripple 0.65s ease-out forwards; }
@keyframes nm-wt-ripple { to { transform: scale(3.4); opacity: 0; } }
.nm-wt-anchor { position: fixed; width: 1px; height: 1px; pointer-events: none; }
body.nm-wt-on .leaflet-container { cursor: default; }

.nm-wt-nudge {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1250;
    max-width: 280px;
    padding: 12px 14px;
    background: var(--nmc-card-solid);
    color: var(--nmc-text);
    border: 1px solid var(--nmc-border-strong);
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
    font: 400 14px/1.45 var(--nmc-body-font);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.nm-wt-nudge.show { opacity: 1; transform: none; }
.nm-wt-nudge__t { margin-bottom: 10px; }
.nm-wt-nudge__b { display: flex; gap: 8px; }
.nm-wt-nudge button { padding: 7px 12px; border-radius: 8px; font: 600 13px var(--nmc-body-font); cursor: pointer; }
.nm-wt-nudge__go { border: 0; background: var(--nmc-accent); color: #11222a; }
.nm-wt-nudge__no { border: 1px solid var(--nmc-border); background: none; color: var(--nmc-text); }
body.nm-dock-phone .nm-wt-nudge { left: 10px; right: 76px; top: calc(10px + env(safe-area-inset-top, 0px)); max-width: none; }
@media (prefers-reduced-motion: reduce) {
    .nm-wt-ring { animation: none; opacity: 0.6; }
    .nm-wt-spot.is-gliding, .nm-wt, .nm-wt-card, .nm-wt-bar i, .nm-wt-nudge { transition: none; }
    .nm-wt-ripple { animation: none; opacity: 0; }
}

.nm-wt-links { display: inline-flex; align-items: center; gap: 10px; }
.nm-wt-jump { padding: 2px 4px; border: 0; background: none; color: var(--nmc-accent); font: 500 12px var(--nmc-body-font); cursor: pointer; }
.nm-wt-jump:hover { text-decoration: underline; }
.nm-wt-jump[hidden] { display: none; }

.nm-wt-count { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm-wt-links, .nm-wt-jump, .nm-wt-skip { white-space: nowrap; flex: none; }
.nm-wt-meta { gap: 12px; }
/* the cursor's aiming marker is a span: the map page's global `span { margin-top: 10px }` pushed it 10px below its target */
.nm-wt-anchor { margin: 0 !important; padding: 0; }

/* Phones: a compact card, so it covers as little of the highlighted control (and the map) as possible on a 664 px tall screen */
.nm-wt-card.is-phone { padding: 9px 12px 10px; border-radius: 10px; }
.nm-wt-card.is-phone .nm-wt-meta { margin-bottom: 5px; }
.nm-wt-card.is-phone .nm-wt-count { font-size: 10px; }
.nm-wt-card.is-phone .nm-wt-skip, .nm-wt-card.is-phone .nm-wt-jump { font-size: 11px; padding: 4px 2px; }
.nm-wt-card.is-phone .nm-wt-bar { margin-bottom: 7px; }
.nm-wt-card.is-phone .nm-wt-title { font-size: 16px; margin-bottom: 3px; }
.nm-wt-card.is-phone .nm-wt-text { font-size: 12.5px; line-height: 1.4; margin-bottom: 8px; }
.nm-wt-card.is-phone .nm-wt-back, .nm-wt-card.is-phone .nm-wt-next { padding: 6px 14px; font-size: 13px; }
/* the dev-only Clear cache button (localhost and staging) showed through the dimmed screen */
body.nm-wt-on .nm-debug-clear { display: none !important; }

/* The welcome panel the tour re-shows (step "the welcome screen") sits over the map's layers dock and tools bar on a phone */
body.nm-dock-phone:has(.nm-overlay:not(.nm-overlay--hidden)) .nm-dock,
body.nm-dock-phone:has(.nm-overlay:not(.nm-overlay--hidden)) .nm-acct { visibility: hidden; }

/* The saved views popup opens under the top controls on a phone: keep the spotlight (and the person's eye) on all of it */

/* On a phone the map's bottom controls (the Nightmap logo, info button, calendar) painted over the tooltip card and the spotlight:
   hide them while a tour runs (the "welcome screen" step turns the logo back on, because it points at it) */
body.nm-dock-phone.nm-wt-on .leaflet-bottom { visibility: hidden; }
body.nm-dock-phone.nm-wt-on.nm-wt-showlogo .leaflet-bottom { visibility: visible; }
body.nm-dock-phone.nm-wt-on.nm-wt-showlogo .leaflet-bottom .leaflet-control:not(:has(#nm-logo-ctl)) { visibility: hidden; }