/* First-visit course card + guided tour for the public demo (ui/assets/tour.js).
   Uses the chat page's own tokens, with the product palette as fallback. */
.tour, .tour-intro { position: fixed; inset: 0; z-index: 60; font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); }
.tour[hidden] { display: none; }

/* the spotlight: a transparent box whose huge shadow is the scrim, so the target stays crisp */
.tour-scrim { position: absolute; inset: 0; }
.tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(20, 56, 79, .42), 0 0 0 2px rgba(255, 255, 255, .9), 0 10px 30px -10px rgba(20, 56, 79, .5);
  transition: top .28s cubic-bezier(.22, .61, .36, 1), left .28s cubic-bezier(.22, .61, .36, 1), width .28s cubic-bezier(.22, .61, .36, 1), height .28s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none; }

.tour-card, .tour-intro-card { background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line, #CFDCE5); border-radius: 14px 14px 34px 14px; box-shadow: 0 24px 60px -24px rgba(20, 56, 79, .55);
  padding: 18px 20px 16px; color: var(--text, #22384A); }
.tour-card { position: fixed; transition: top .28s cubic-bezier(.22, .61, .36, 1), left .28s cubic-bezier(.22, .61, .36, 1); }
.tour-k { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #3FAE8C); }
.tour-k span { color: var(--accent, #3FAE8C); font-weight: 600; letter-spacing: .04em; text-transform: none; }   /* the step counter in the brand teal (Mim, 2026-09-18) */
.tour-card h2, .tour-intro-card h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.25; color: var(--ink, #184E77); letter-spacing: -.01em; }
.tour-p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2, #46596A); }
.tour-dots { display: flex; gap: 6px; margin: 14px 0 0; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line, #CFDCE5); display: block; }
.tour-dots i.on { background: var(--primary, #14719B); width: 18px; border-radius: 3px; }
.tour-btns { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-grow { flex: 1; }
.tour-btns button { font: inherit; font-size: 13.5px; font-weight: 600; border-radius: 9px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--line, #CFDCE5); background: #fff; color: var(--ink, #184E77); }
.tour-btns button:hover { border-color: var(--primary, #14719B); color: var(--primary, #14719B); }
.tour-btns button:disabled { opacity: .4; cursor: default; }
.tour-btns .tour-next { background: var(--primary, #14719B); color: #fff; border-color: var(--primary, #14719B); }
.tour-btns .tour-next:hover { filter: brightness(1.06); color: #fff; }
.tour-btns .tour-skip { border-color: transparent; color: var(--muted, #566E86); padding-left: 6px; }
.tour-btns .tour-skip:hover { color: var(--ink, #184E77); border-color: transparent; }
.tour-btns button:focus-visible { outline: 2px solid var(--primary, #14719B); outline-offset: 2px; }

/* the course card, centred over a soft scrim */
.tour-intro-scrim { position: absolute; inset: 0; background: rgba(20, 56, 79, .38); }
.tour-intro-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); padding: 26px 28px 22px;
  animation: tour-in .32s cubic-bezier(.22, .61, .36, 1); }
.tour-intro-card h2 { font-size: 26px; margin-bottom: 10px; }
.tour-intro-p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--text-2, #46596A); }
.tour-intro-naro { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2, #46596A); padding: 12px 14px; border-radius: 10px 10px 22px 10px; background: var(--soft, #EAF3F7); }
.tour-intro-naro a { color: var(--primary, #14719B); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tour-intro-naro a:hover { text-decoration: underline; }
@keyframes tour-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }

@media (max-width: 720px) {
  .tour-card { width: calc(100vw - 24px) !important; left: 12px !important; }
  .tour-intro-card { padding: 20px 18px 18px; }
  .tour-intro-card h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-card { transition: none; }
  .tour-intro-card { animation: none; }
}

/* demo chrome: the course chip re-opens the course card; a tag says this is the demo */
.topbar-course.clickable { cursor: pointer; }
.topbar-course.clickable:hover { color: var(--primary, #14719B); }
.demo-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink, #184E77); background: var(--accent-soft, #E8F3F0); border: 1px solid rgba(82, 182, 154, .45); border-radius: 999px; padding: 4px 10px; margin: 0 4px 0 10px; white-space: nowrap; }
.demo-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #52B69A); }
@media (max-width: 720px) { .demo-pill { font-size: 10px; padding: 3px 8px; margin-right: 6px; } }

/* the mode card (top-bar chip): same card as the course card, with a Try list and a Tip */
.mode-card .tour-intro-card { width: min(480px, calc(100vw - 32px)); }
.mode-card h2 { display: flex; align-items: center; gap: 9px; }
.mode-card-ic { display: inline-flex; width: 30px; height: 30px; border-radius: 9px; align-items: center; justify-content: center; background: var(--primary-soft, #E3EFF5); color: var(--primary, #14719B); flex: none; }
.mode-card-ic[data-mode="review"] { background: var(--accent-soft, #E4F3EE); color: #0F5C4A; }
.mode-card-ic[data-mode="tutor"] { background: #E3F0EF; color: #1B6E70; }
.mode-card-ic[data-mode="quiz"] { background: var(--accent-soft, #E4F3EE); color: #0F5C4A; }
.mode-card-ic svg { width: 16px; height: 16px; stroke-width: 2; }
.mode-card .tour-intro-naro b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #3FAE8C); margin: 0 0 4px; }
.mode-card .tour-intro-naro ul { margin: 0 0 10px; padding-left: 18px; }
.mode-card .tour-intro-naro li { margin: 0 0 3px; }
.mode-card .tour-intro-naro b + ul + b { margin-top: 2px; }