/* Guided tours (balloons + spotlight), smart tips, and the guide launcher.
   Tokens only — dark mode comes free via the --ag-* aliases in base.css. */

.tour-spot { position: fixed; z-index: 90; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--ink) 35%, transparent);
  outline: 2px solid var(--panel); transition: all .18s ease; }
.tour-balloon { position: fixed; z-index: 91; width: min(320px, 88vw); background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 25%, transparent); }
.tour-balloon h3 { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.tour-balloon p { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.5; margin: 0 0 12px; }
.tour-foot { display: flex; align-items: center; gap: 8px; }
.tour-count { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.tour-btn { font-size: var(--fs-sm); border: 1px solid var(--line); background: var(--panel);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; color: var(--ink); box-shadow: var(--shadow-xs);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.tour-btn.primary { background: var(--ink); color: var(--panel); border-color: var(--ink); box-shadow: var(--highlight), var(--shadow-xs); }
.tour-btn.primary:hover { background: color-mix(in srgb, var(--ink) 88%, var(--panel)); box-shadow: var(--highlight), var(--shadow-sm); }
.tour-btn:hover { border-color: var(--ink-3); box-shadow: var(--shadow-sm); }

.tip-dot { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  margin-left: 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink-4); font-size: 9px; font-family: var(--mono); cursor: help; vertical-align: middle; }
.tip-dot:hover { color: var(--ink); border-color: var(--ink-3); }
.tip-pop { position: fixed; z-index: 92; width: min(280px, 84vw); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 20%, transparent); }
.tip-pop b { display: block; font-size: var(--fs-sm); margin-bottom: 4px; }
.tip-pop span { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.5; }

.tour-launcher { position: fixed; right: 18px; bottom: 18px; z-index: 89; width: 38px; height: 38px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-family: var(--mono); font-size: 15px; cursor: pointer;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 18%, transparent); }
.tour-launcher.pulse { animation: tour-pulse 2s ease infinite; }
@keyframes tour-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ink) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tour-launcher.pulse { animation: none; } }
.tour-panel { position: fixed; right: 18px; bottom: 64px; z-index: 92; width: min(340px, 90vw);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 25%, transparent); }
.tour-panel header { padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.tour-panel .guide-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line-2); }
.guide-row .g-name { flex: 1; min-width: 0; }
.guide-row .g-name b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.guide-row .g-name span { font-size: 11px; color: var(--ink-4); }
.guide-row .g-done { color: var(--ok, #16a34a); font-size: 12px; }
.tour-panel footer { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  font-size: var(--fs-sm); color: var(--ink-3); }