/* ============================================================
   learn-annotations.css — Spotlight overlay & tooltip for Learn Mode
   ─────────────────────────────────────────────────────────────
   Used by js/retinoscopy/learn/learn-annotations.js.
   The overlay is a fixed full-screen element with a clip-path
   hole that lets the highlighted element show through.
   ============================================================ */

/* ── Full-screen dim overlay with clip-path hole ── */
.learn-spotlight-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9990;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.learn-spotlight-overlay.is-active {
  opacity: 1;
  pointer-events: auto;   /* blocks clicks outside the hole */
}

/* ── Floating tooltip label ── */
.learn-spotlight-tooltip {
  position: fixed;
  z-index: 9992;
  background: var(--accent, #1F4B4C);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.learn-spotlight-tooltip.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* Arrow pointing up (default: tooltip below target) */
.learn-spotlight-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--accent, #1F4B4C);
}

/* Arrow pointing down (tooltip above target) */
.learn-spotlight-tooltip--above::before {
  top: auto;
  bottom: -6px;
  border-bottom: none;
  border-top: 7px solid var(--accent, #1F4B4C);
}

/* ── Pulsing glow ring on the highlighted element ── */
.learn-highlighted {
  position: relative;
  z-index: 9991;            /* above the overlay, inside the hole */
  pointer-events: auto !important;
  animation: learn-pulse 2s ease-in-out infinite;
}

@keyframes learn-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(31, 75, 76, 0.3); }
  50%      { box-shadow: 0 0 0 8px rgba(31, 75, 76, 0.15); }
}

/* ── Learn button in the header ── */
.ret-learn-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--accent-tint, #E4EEEE);
  color: var(--accent-strong, #163938);
  border: 1px solid var(--accent, #1F4B4C);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ret-learn-btn:hover {
  background: var(--accent, #1F4B4C);
  color: var(--on-accent, #fff);
}

.ret-learn-btn__icon {
  font-size: 1.1rem;
}

/* When learn mode is active, show indicator on the button */
.learn-mode-active .ret-learn-btn {
  background: var(--accent, #1F4B4C);
  color: var(--on-accent, #fff);
}