/*
 * styles-coachmark.css — #177 C3-lite (epic #11 P1).
 *
 * The anchored guidance coachmark rendered by src/guidance/coachmark.js.
 * Fixed-position dialog bubble + a directional arrow, themed entirely via
 * existing design tokens (surface, border, purple, text, space, shadow,
 * radius) so it inherits light/dark automatically.
 * JS owns left, top, data-placement, and the arrow's cross-axis offset.
 */

.ori-coachmark {
  position: fixed;
  z-index: 4000; /* above the bottom panel + signal slot, below modals */
  max-width: 280px;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  padding-right: var(--space-5); /* room for the close button */
  background: var(--surface-hi, var(--surface));
  border: 1px solid var(--purple);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: var(--fs-sm, 13px);
  line-height: 1.4;
  /* Fade/scale in so the coachmark reads as an intentional pop, not a jump. */
  animation: ori-coachmark-in 160ms ease-out;
}

@keyframes ori-coachmark-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.ori-coachmark-text {
  margin: 0;
  color: var(--text);
}

.ori-coachmark-action {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--purple);
  color: #fff;
  font-size: var(--fs-sm, 13px);
  font-weight: 600;
  cursor: pointer;
}

.ori-coachmark-action:hover {
  filter: brightness(1.08);
}

.ori-coachmark-close {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-3, var(--text-hint));
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.ori-coachmark-close:hover {
  color: var(--text);
  background: var(--surface-lo, transparent);
}

/* Directional arrow — a rotated square that straddles the bubble edge.
   JS sets the cross-axis offset (left for top/bottom, top for left/right). */
.ori-coachmark-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--surface-hi, var(--surface));
  border: 1px solid var(--purple);
  transform: rotate(45deg);
}

.ori-coachmark[data-placement="bottom"] .ori-coachmark-arrow {
  top: -7px;
  margin-left: -6px;
  border-right: none;
  border-bottom: none;
}

.ori-coachmark[data-placement="top"] .ori-coachmark-arrow {
  bottom: -7px;
  margin-left: -6px;
  border-left: none;
  border-top: none;
}

.ori-coachmark[data-placement="right"] .ori-coachmark-arrow {
  left: -7px;
  margin-top: -6px;
  border-top: none;
  border-right: none;
}

.ori-coachmark[data-placement="left"] .ori-coachmark-arrow {
  right: -7px;
  margin-top: -6px;
  border-bottom: none;
  border-left: none;
}

@media (prefers-reduced-motion: reduce) {
  .ori-coachmark { animation: none; }
}

/* ── Guided demo (#177 C5) ──────────────────────────────────────────────
   The mode-teach / ready panel and the frozen-bubble state. Same token
   theming as the coachmark above. */

.ori-demo-panel {
  position: fixed;
  z-index: 4100; /* above the coachmark */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - var(--space-6)));
  box-sizing: border-box;
  padding: var(--space-5);
  background: var(--surface-hi, var(--surface));
  border: 1px solid var(--purple);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  animation: ori-coachmark-in 180ms ease-out;
}

.ori-demo-title {
  font-size: var(--fs-lg, 18px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-2);
}

.ori-demo-intro {
  margin: 0 0 var(--space-4);
  color: var(--text-2, var(--text));
  font-size: var(--fs-sm, 13px);
  line-height: 1.5;
}

.ori-demo-cta {
  color: var(--text);
  font-weight: 600;
}

.ori-demo-modes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ori-demo-mode {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.ori-demo-mode:hover {
  border-color: var(--purple);
  background: var(--surface-lo, var(--surface));
}

.ori-demo-mode-label {
  font-weight: 600;
  font-size: var(--fs-base, 15px);
}

.ori-demo-mode-desc {
  font-size: var(--fs-xs, 12px);
  color: var(--text-3, var(--text-hint));
}

.ori-demo-go {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  background: var(--purple);
  color: #fff;
  font-size: var(--fs-base, 15px);
  font-weight: 600;
  cursor: pointer;
}

.ori-demo-go:hover {
  filter: brightness(1.08);
}

.ori-demo-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-3, var(--text-hint));
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.ori-demo-close:hover {
  color: var(--text);
  background: var(--surface-lo, transparent);
}

/* Freeze a drifting bubble so it holds still while the coachmark points at
   it; end() removes the class and the float animation resumes. */
.ori-demo-frozen {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .ori-demo-panel { animation: none; }
}