/* First-visit tour + one-time tips (tour.js). No page overlay: the bubble and ring sit above
   everything (event sheet, menus) but the rest of the page stays usable. */
.tour-ring {
  position: fixed; z-index: 10000; pointer-events: none;
  border: 2px solid var(--ink); border-radius: 10px;
  /* page-coloured halo so the ring also shows on the (dark) event sheet */
  box-shadow: 0 0 0 2px var(--page), 0 0 0 5px color-mix(in srgb, var(--ink) 22%, transparent);
  transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s;
}
.tour-ring[hidden] { display: none; }
.tour-bubble {
  position: fixed; z-index: 10001; width: min(320px, calc(100vw - 16px));
  padding: 0.75rem 0.9rem 0.65rem; border-radius: 12px;
  background: var(--tooltip-bg); color: var(--tooltip-ink);
  border: 1px solid color-mix(in srgb, var(--tooltip-ink) 30%, transparent); /* edge on same-colour sheets */
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  font-size: 0.9rem; line-height: 1.4;
  animation: tour-in 0.18s ease-out;
}
@keyframes tour-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .tour-bubble { animation: none; } .tour-ring { transition: none; } }
.tour-bubble::before {
  content: ""; position: absolute; left: var(--arrow-x, 50%); width: 12px; height: 12px;
  background: inherit; transform: translateX(-50%) rotate(45deg); display: none;
}
.tour-below::before { display: block; top: -6px; }
.tour-above::before { display: block; bottom: -6px; }
/* Phone, or nothing to point at: a card along the bottom edge. */
.tour-bubble.tour-sheet {
  left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); top: auto;
  width: auto; max-width: 480px; margin: 0 auto;
}
.tour-title { display: block; margin-bottom: 0.15rem; }
.tour-text { margin: 0 0 0.55rem; }
.tour-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.tour-count { flex: 1; font-size: 0.75rem; opacity: 0.7; }
.tour-btn {
  font: inherit; font-size: 0.82rem; padding: 0.3rem 0.8rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: inherit; border: 1px solid color-mix(in srgb, var(--tooltip-ink) 35%, transparent);
}
.tour-primary { background: var(--tooltip-ink); color: var(--tooltip-bg); border-color: var(--tooltip-ink); font-weight: 600; }
.tour-foot .tour-primary:last-child { margin-left: auto; }
.tour-btn:focus-visible { outline: 2px solid var(--tooltip-ink); outline-offset: 2px; }
.tour-note { flex-basis: 100%; margin: 0.35rem 0 0; font-size: 0.74rem; opacity: 0.7; }
.tour-reveal .cal-btn { opacity: 1; pointer-events: auto; } /* the 📅 step: show the hover-only button */
@media print { .tour-bubble, .tour-ring { display: none; } }