/* One-time tips and the what's-new walk-through (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-inline-start: 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; } }

/* The first-visit guide (tour.js overlayOpen): one dimmed layer over the whole page. The SVG holds the dim
   layer (a mask cuts a hole over each target), a ring and a leader line per target; the labels and the card
   are plain elements above it. Any click on it closes it. */
.tour-overlay { position: fixed; inset: 0; z-index: 10000; cursor: pointer; animation: tour-in 0.18s ease-out; }
.tour-overlay svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tour-dim { fill: rgba(0, 0, 0, 0.68); }
.tour-hole { fill: none; stroke: #fff; stroke-width: 2; }
.tour-badge { fill: #ffd23f; stroke: #000; stroke-width: 1.5; }
.tour-badge-n { fill: #000; font: 700 12px/1 system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.tour-labels { list-style: none; margin: 0; padding: 0; }
.tour-labels li {
  position: absolute; box-sizing: border-box; padding: 0.4rem 0.6rem; border-radius: 10px; display: flex; gap: 0.45rem; align-items: flex-start;
  background: var(--page); color: var(--ink); border: 1px solid var(--hairline);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); font-size: 0.84rem; line-height: 1.3;
}
.tour-labels li[hidden] { display: none; }
.tour-n {
  flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #ffd23f; color: #000; border: 1.5px solid #000;
  display: inline-grid; place-items: center; font-size: 0.72rem; font-weight: 700; line-height: 1;
}
.tour-card {
  position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  box-sizing: border-box; width: min(340px, calc(100vw - 16px)); padding: 0.7rem 0.9rem; border-radius: 12px;
  background: var(--page); color: var(--ink); border: 1px solid var(--hairline); cursor: default;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); font-size: 0.9rem; line-height: 1.4; text-align: center;
}
.tour-card p { margin: 0.15rem 0 0.55rem; }
.tour-card .tour-btn { color: var(--ink); border-color: var(--ink); }
.tour-card .tour-primary { background: var(--ink); color: var(--page); }
.tour-card .tour-btn:focus-visible { outline-color: var(--ink); }
.tour-card .tour-note { margin: 0.5rem 0 0; opacity: 1; color: var(--ink-secondary); }
@media (prefers-reduced-motion: reduce) { .tour-overlay { animation: none; } }
@media print { .tour-overlay { display: none; } }