/* First-run tour (js/tour.js): the story overlay and the coach marks. Always dark. */
.tour { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(6, 7, 9, 0.82); backdrop-filter: blur(6px); opacity: 0; transition: opacity 220ms; --bot-lead: #ececef; }
.tour.is-in { opacity: 1; }
.tour__card { width: min(760px, calc(100vw - 32px)); padding: 26px 28px 20px; border-radius: 22px; background: #121317; border: 1px solid #24262c; color: #e8e8ee; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); display: grid; gap: 18px; transform: translateY(8px); transition: transform 260ms; }
.tour.is-in .tour__card { transform: none; }
.tour__eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a94; }

.tour__bots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.tour__bot { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 16px; background: #0d0e11; border: 1.5px solid #22242a; opacity: 0; transform: translateY(14px) scale(0.92); transition: opacity 300ms, transform 300ms, border-color 200ms, filter 200ms; }
.tour__bot.is-in { opacity: 1; transform: none; }
.tour__bot small { font-size: 11px; color: #a9a9b3; text-align: center; line-height: 1.2; }
.tour__bot.is-dim { filter: grayscale(0.7) brightness(0.6); }
.tour__bot.is-on { border-color: var(--bot-c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bot-c) 22%, transparent), 0 0 28px color-mix(in srgb, var(--bot-c) 30%, transparent); transform: translateY(-4px); }
.tour__bot.is-on .tour__av { animation: tour-bob 0.5s steps(2) infinite; }
.tour__bot.is-on small { color: #fff; }
.tour__av svg { display: block; }
@keyframes tour-bob { 50% { transform: translateY(-3px); } }

.tour__cap { min-height: 50px; display: grid; gap: 4px; text-align: center; }
.tour__cap b { font-size: 20px; }
.tour__cap span { color: #a9a9b3; font-size: 14px; }

.tour__feed { min-height: 172px; display: grid; align-content: end; gap: 8px; }
.tour__msg { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #0d0e11; border-left: 3px solid var(--bot-c); font-size: 14px; opacity: 0; transform: translateX(-12px); transition: opacity 260ms, transform 260ms; }
.tour__msg.is-in { opacity: 1; transform: none; }
.tour__msg.is-skeptic { border-left-color: #f0a64a; }
.tour__msg.is-lead, .tour__msg.is-order { background: color-mix(in srgb, #3ddc84 9%, #0d0e11); }
.tour__msg.is-win { background: color-mix(in srgb, #3ddc84 16%, #0d0e11); border-left-color: #3ddc84; font-weight: 600; }
.tour__msgav { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--bot-c) 20%, #16171b); flex-shrink: 0; }

.tour__foot { display: flex; align-items: center; gap: 10px; }
.tour__dots { display: flex; gap: 6px; }
.tour__dots i { width: 7px; height: 7px; border-radius: 50%; background: #2a2c33; transition: background 200ms; }
.tour__dots i.is-on { background: var(--accent, #4c8dff); }
.tour .btn--ghost { color: #a9a9b3; }

/* Coach marks over the real title bar */
.coach { position: fixed; inset: 0; z-index: 2000; }
.coach__ring { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(6, 7, 9, 0.72), 0 0 0 2px var(--accent, #4c8dff), 0 0 24px color-mix(in srgb, var(--accent, #4c8dff) 50%, transparent); pointer-events: none; animation: coach-in 260ms ease-out; transition: all 200ms; }
.coach__tip { position: fixed; padding: 14px 16px 12px; border-radius: 14px; background: #121317; border: 1px solid #2a2c33; color: #e8e8ee; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); display: grid; gap: 6px; animation: coach-in 260ms ease-out; }
.coach__tip p { margin: 0; color: #b9b9c2; font-size: 13px; line-height: 1.45; }
.coach__count { font-size: 11px; color: #8a8a94; }
.coach__foot { display: flex; align-items: center; margin-top: 4px; }
@keyframes coach-in { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 640px) { .tour__bots { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tour__bot.is-on .tour__av { animation: none; } .tour__bot, .tour__msg { transition: none; } }
/* Learning Curve slide */
.tour__lc { display: grid; gap: 12px; padding: 4px 4px 0; }
.tour__lcbadges { display: flex; justify-content: center; gap: 14px; }
.tour__lcbadges span { animation: coach-in 400ms ease-out both; }
.tour__lcbadges span:nth-child(2) { animation-delay: 0.1s; } .tour__lcbadges span:nth-child(3) { animation-delay: 0.2s; } .tour__lcbadges span:nth-child(4) { animation-delay: 0.3s; } .tour__lcbadges span:nth-child(5) { animation-delay: 0.4s; } .tour__lcbadges span:nth-child(6) { animation-delay: 0.5s; }
.tour__lc ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: #c4c4cc; font-size: 14px; }
.tour__eyebrow { display: flex; align-items: center; justify-content: space-between; }
.tour__mute { color: #a9a9b3; }
.coach__count { display: flex; align-items: center; justify-content: space-between; }
.tour__card--wait { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; width: min(420px, calc(100vw - 32px)); }
.tour__card--wait .muted { color: #a9a9b3; font-size: 13px; margin-top: 2px; }