/* ============================================================
   Caribou Health — Cura guided tour, Mobile UX design
   (Cura Guided Tour.html / CuraTour.jsx). Mobile-scoped reskin of
   the app's tutorial overlay; desktop unchanged. --cbm-* tokens.
   ============================================================ */

@media (max-width: 640px) {

  /* ── Dim + spotlight: deep teal, rounded, pulsing ring ── */
  .tutorial-backdrop { background: rgba(15, 42, 40, .42) !important; }
  .tutorial-spotlight {
    border-radius: 18px !important;
    box-shadow: 0 0 0 9999px rgba(15, 42, 40, .52) !important;
    transition: left .32s cubic-bezier(.2,.8,.2,1), top .32s cubic-bezier(.2,.8,.2,1),
                width .32s ease, height .32s ease;
    animation: cbmTourRing 1.8s ease-out infinite;
    border: 2px solid #4fa9a2;
  }

  /* ── Bubble: frosted glass card per the design ── */
  .tutorial-bubble {
    background: rgba(255, 255, 255, .84) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 40px rgba(15, 42, 40, .28), 0 2px 6px rgba(0, 0, 0, .08) !important;
    padding: 15px !important;
    animation: cbmTourIn .38s cubic-bezier(.2,.8,.2,1);
  }

  /* mascot in a teal-gradient ring, per the design avatar */
  .tutorial-mascot {
    width: 40px !important; height: 40px !important; flex-shrink: 0;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #E8F5F0, #D0EBE3) !important;
    border: 2px solid #75c0ba !important;
    display: grid; place-items: center; padding: 4px; box-sizing: border-box;
  }

  #tutorial-title {
    font-family: var(--cbm-font-display) !important; font-weight: 400 !important;
    font-size: 17px !important; color: var(--cbm-gray-900) !important;
    margin: 1px 0 3px !important;
  }
  #tutorial-message {
    font-size: 13px !important; color: var(--cbm-gray-700) !important;
    line-height: 1.45 !important; margin: 0 !important;
  }

  .tutorial-progress {
    font-size: 11.5px !important; font-weight: 600 !important;
    color: #6b7280 !important;
  }

  /* ghost skip + teal pill CTA */
  .tutorial-actions .btn-ghost {
    border: none !important; background: transparent !important;
    color: #6b7280 !important; font-size: 13px !important; font-weight: 600 !important;
    padding: 8px 4px !important;
  }
  .tutorial-actions .btn-primary {
    background: var(--cbm-primary-600) !important; color: #fff !important;
    font-size: 13px !important; font-weight: 700 !important;
    padding: 9px 16px !important; border-radius: 9999px !important;
    border: none !important; box-shadow: none !important;
  }

  /* beak matches the frosted card */
  .tutorial-arrow {
    background: rgba(255, 255, 255, .84) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, .72) !important;
  }
}

@keyframes cbmTourIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes cbmTourRing {
  0%, 100% { outline: 0 solid rgba(61, 155, 148, .45); outline-offset: 0; }
  50% { outline: 10px solid rgba(61, 155, 148, 0); outline-offset: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-bubble, .tutorial-spotlight { animation: none !important; }
}