/* Guided tutorial spotlight overlay.
 *
 * #tutorialLayer is a fixed, full-viewport layer that is itself click-through
 * (pointer-events: none) so the real UI underneath stays interactive. The dim
 * is produced by a single transparent "highlight" box with a huge spread
 * box-shadow — everything outside the box is darkened, the box itself is a
 * clear cut-out around the current target. Only the tooltip card opts back into
 * pointer events so its Skip button is clickable.
 */
#tutorialLayer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
#tutorialLayer.hidden { display: none; }

.tutorial-highlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(8, 10, 16, 0.14);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  pointer-events: none;
  transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
}
/* When a step has no target (intro/outro), cover the whole screen with the dim
   and hide the cut-out outline. */
.tutorial-highlight.no-target {
  box-shadow: 0 0 0 9999px rgba(8, 10, 16, 0.2);
  outline: none;
  border-radius: 0;
}
/* A step that explicitly dims nothing (e.g. when the highlighted panel already
   has its own modal backdrop). Tooltip placement is unaffected. */
.tutorial-highlight.no-dim { box-shadow: none; outline: none; }

.tutorial-tooltip {
  position: fixed;
  z-index: 1001;
  max-width: min(320px, calc(100vw - 32px));
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  transition: top 0.18s ease, left 0.18s ease;
}
.tutorial-tooltip.centered {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: min(420px, calc(100vw - 32px));
  text-align: center;
}

.tutorial-tooltip-step {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.tutorial-tooltip-title { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.tutorial-tooltip-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); }

.tutorial-tooltip-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.tutorial-tooltip.centered .tutorial-tooltip-actions { justify-content: center; }

.tutorial-skip {
  border: none;
  background: none;
  padding: 4px 2px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
.tutorial-skip:hover, .tutorial-skip:focus-visible { color: var(--accent); }

.tutorial-next {
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tutorial-next:hover, .tutorial-next:focus-visible { filter: brightness(1.05); }

/* Action steps (where the user is meant to perform the real interaction) show a
   muted Next instead of the accent one. It stays fully pressable — it's an
   escape hatch for mobile where the tooltip can cover the target — but reads as
   secondary so it doesn't compete with the actual action. */
.tutorial-next.secondary {
  border-color: var(--line);
  background: var(--panel);
  color: var(--muted);
}
/* Action steps stay muted in every state (incl. hover/focus). The Next button
   is a single reused element, so after tapping Next the lingering hover/focus
   must not tint it toward the accent — otherwise the next step's "greyed" Next
   would momentarily look identical to the accent (primary) one. */
.tutorial-next.secondary:hover,
.tutorial-next.secondary:focus-visible {
  filter: none;
  border-color: var(--line);
  color: var(--muted);
}

.tutorial-hint {
  margin-top: 10px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--muted);
}

/* A little caret pointing from the tooltip toward the target. */
.tutorial-tooltip::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  transform: rotate(45deg);
  display: none;
}
.tutorial-tooltip[data-arrow="top"]::after { display: block; top: -7px; left: var(--arrow-x, 24px); border-right: none; border-bottom: none; }
.tutorial-tooltip[data-arrow="bottom"]::after { display: block; bottom: -7px; left: var(--arrow-x, 24px); border-left: none; border-top: none; }
.tutorial-tooltip[data-arrow="left"]::after { display: block; left: -7px; top: var(--arrow-y, 24px); border-top: none; border-right: none; }
.tutorial-tooltip[data-arrow="right"]::after { display: block; right: -7px; top: var(--arrow-y, 24px); border-bottom: none; border-left: none; }

@media (max-width: 820px) {
  /* On narrow screens, pin the tooltip to a full-width band so it never spills
     off-screen; the JS still controls the vertical position via inline `top`.
     Centered (no-target) tooltips keep their own centering. */
  .tutorial-tooltip:not(.centered) {
    max-width: none;
    left: 12px !important;
    right: 12px;
  }
  .tutorial-tooltip:not(.centered)[data-arrow]::after { display: none; }
}