/* ============================================
   COACH-MARKS (tips)
   ============================================
   Inline tips anchored to UI elements, triggered by a first-time interaction,
   not idle timers.

   2026-10-08: the card IS the shared guide card (css/feature-tour.css
   .fr-guide-*), the same one the tour and Show me how use, so the three read
   as one feature. This sheet only places it and fades it in and out. The
   mini-diagrams are gone: they were copies of the UI and aged with it.
   ============================================ */

:root {
  --coach-z: 9400;
  --coach-width: 300px;
}

.coach-mark.fr-guide-card {
  position: fixed;
  z-index: var(--coach-z);
  width: var(--coach-width);
  max-width: calc(100vw - 24px);
  gap: 10px;
  padding: 14px 16px;
  opacity: 0;
  transform: scale(0.96) translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.coach-mark.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.coach-mark.hiding {
  opacity: 0;
  transform: scale(0.96) translateY(4px);
}

/* The tip's kicker is amber, like the lightbulb that marks tips in Help. */
.coach-mark .coach-mark-kicker { color: var(--amber-700, #b45309); display: inline-flex; align-items: center; gap: 6px; }
.coach-mark .coach-mark-kicker i { color: var(--amber-500); }
body.dark-mode .coach-mark .coach-mark-kicker { color: var(--amber-300, #fcd34d); }

.coach-mark .coach-mark-title { font-size: 16px; }
.coach-mark .coach-mark-content { font-size: 14px; }

/* Phones: full width. Vertical placement (clear of the anchor and the fixed
   bottom chrome) is computed in hint-system.js position(), so top/bottom are
   not pinned here. The height is capped and scrolls on a short phone. */
@media (max-width: 600px) {
  .coach-mark.fr-guide-card {
    width: calc(100vw - 24px);
    max-height: 80vh;
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coach-mark.fr-guide-card { transition: none; }
}