/* GET.[nito] sneak sliders — visitor play mode + hints.
   Shared by Mike's and Dillon's sliders. Paired with /assets/sneak-playmode.js.
   All classes are gn-* prefixed so they can't collide with either slider's own styles.
   Lime/teal palette to match the existing edit-mode dashed outlines. No em-dashes. */

:root {
  --gn-lime: #d4ff3a;
  --gn-ink: #06100c;
}

/* ---- Author-only chrome hidden from visitors ---- */
body.gn-visitor-play .transform-panel,
body.gn-visitor-play .edit-hint,
body.gn-visitor-play .gn-author-only { display: none !important; }

/* ---- Play pointer (pulsing pill) ---- */
.gn-pill {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 9000; display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 999px; cursor: pointer;
  font: 600 14px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .02em;
  color: var(--gn-ink); background: var(--gn-lime);
  border: 0; box-shadow: 0 6px 26px rgba(0,0,0,.45), 0 0 0 6px rgba(212,255,58,.14);
  animation: gn-bob 2.4s ease-in-out infinite;
  -webkit-user-select: none; user-select: none; white-space: nowrap;
}
.gn-pill:hover { filter: brightness(1.06); }
.gn-pill .gn-hand { font-size: 16px; animation: gn-wave 2.4s ease-in-out infinite; transform-origin: 70% 80%; }
.gn-pill[hidden] { display: none; }
@keyframes gn-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }
@keyframes gn-wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 60% { transform: rotate(12deg); } }

/* ---- Play controls (Done + Help), shown while playing ---- */
.gn-controls { position: fixed; right: 20px; bottom: 20px; z-index: 9000; display: none; gap: 10px; }
body.gn-visitor-play .gn-controls { display: flex; }
.gn-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 10px 16px; border-radius: 999px;
  font: 600 12.5px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .04em;
}
.gn-btn-done { color: var(--gn-ink); background: var(--gn-lime); border: 0; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.gn-btn-help { color: var(--gn-lime); background: rgba(6,16,12,.72); border: 1px solid rgba(212,255,58,.5); backdrop-filter: blur(6px); }
.gn-btn-help .gn-q { font-weight: 700; }
.gn-btn:hover { filter: brightness(1.08); }

/* ---- Coachmarks ---- */
.gn-coach-veil { position: fixed; inset: 0; z-index: 8800; background: rgba(2,8,6,.30); display: none; }
.gn-coach-veil.gn-show { display: block; }
.gn-coach {
  position: fixed; z-index: 8900; max-width: 250px; display: none;
  padding: 14px 16px; border-radius: 12px;
  background: var(--gn-lime); color: var(--gn-ink);
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
  font: 500 13.5px/1.45 "Space Mono", ui-monospace, monospace;
}
.gn-coach.gn-show { display: block; }
.gn-coach b { font-weight: 700; }
.gn-coach-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 12px; }
.gn-coach-step { font-size: 11px; opacity: .65; letter-spacing: .04em; }
.gn-coach-next {
  cursor: pointer; border: 0; border-radius: 999px; padding: 7px 15px;
  background: var(--gn-ink); color: var(--gn-lime);
  font: 700 12px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .04em;
}
.gn-coach-next:hover { filter: brightness(1.2); }
/* little pointer triangle, side set via data-arrow */
.gn-coach::after { content: ""; position: absolute; width: 0; height: 0; border: 9px solid transparent; }
.gn-coach[data-arrow="down"]::after  { bottom: -16px; left: 28px; border-top-color: var(--gn-lime); }
.gn-coach[data-arrow="up"]::after    { top: -16px;    left: 28px; border-bottom-color: var(--gn-lime); }
.gn-coach[data-arrow="left"]::after  { left: -16px;  top: 22px; border-right-color: var(--gn-lime); }
.gn-coach[data-arrow="right"]::after { right: -16px; top: 22px; border-left-color: var(--gn-lime); }
.gn-coach[data-arrow="none"]::after  { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gn-pill { animation: none; }
  .gn-pill .gn-hand { animation: none; }
}

/* Desktop-only affordance: hidden on touch / coarse pointers (JS also gates this). */
@media (pointer: coarse) { .gn-pill { display: none !important; } }