/* ============================================
   ROLLIT — FIRST-RUN TUTORIAL (guided tour)
   A spotlight coach-mark walkthrough shown to a
   user the first time they land signed-in after
   registering. Themable via the global tokens.
   ============================================ */

/* Root container is only in the DOM while the tour runs. */
#tut-root { position: fixed; inset: 0; z-index: 100000; font-family: 'DM Sans', sans-serif; }
#tut-root[hidden] { display: none; }

/* Transparent click-blocker so the page can't be interacted with mid-tour. */
.tut-backdrop {
  position: fixed; inset: 0;
  background: transparent;
  cursor: default;
  animation: tut-fade .25s ease;
}
/* For centered (anchorless) steps there is no spotlight, so the backdrop itself
   supplies the dimming. */
.tut-backdrop.is-dim { background: rgba(6,7,12,.74); backdrop-filter: blur(2px); }

/* The spotlight: a box the size of the highlighted element whose massive
   box-shadow darkens everything around it, leaving the target clear + haloed. */
.tut-spot {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(6,7,12,.74), 0 0 0 2px var(--gold), 0 0 22px 4px rgba(232,201,107,.35);
  pointer-events: none;
}
.tut-spot.is-hidden { box-shadow: 0 0 0 9999px rgba(6,7,12,.74); opacity: 0; }

/* The floating explanation card. */
.tut-card {
  position: fixed;
  width: min(360px, calc(100vw - 32px));
  background: var(--surface);
  border: 0.5px solid var(--border2);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  padding: 20px 20px 16px;
  pointer-events: auto;
  animation: tut-pop .3s cubic-bezier(.34,1.56,.64,1);
  z-index: 2;
}
.tut-card.is-center { left: 50%; top: 50%; transform: translate(-50%,-50%); }
/* "Explain the open widget" mode: card pinned to the bottom so a modal the tour
   just opened (Frame composer, Roles & Achievements…) stays fully visible. */
.tut-card.is-bottom { left: 50%; bottom: 26px; top: auto; transform: translateX(-50%); }

/* Little arrow pointing at the target. */
.tut-card::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  background: var(--surface);
  border: 0.5px solid var(--border2);
  transform: rotate(45deg);
  display: none;
}
.tut-card.arrow-up::after   { display: block; top: -8px;    left: var(--arrow-x, 32px); border-right: none; border-bottom: none; }
.tut-card.arrow-down::after { display: block; bottom: -8px; left: var(--arrow-x, 32px); border-left: none;  border-top: none; }

.tut-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 9px;
}
.tut-kicker i { font-size: 13px; }
.tut-title {
  font-size: 18px; font-weight: 600; color: var(--text);
  line-height: 1.25; margin-bottom: 7px;
}
.tut-body { font-size: 13.5px; line-height: 1.6; color: var(--muted); font-weight: 300; }
.tut-body strong { color: var(--text); font-weight: 500; }

/* Progress dots. */
.tut-dots { display: flex; gap: 6px; margin: 16px 0 14px; flex-wrap: wrap; }
.tut-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border2); transition: all .2s; }
.tut-dot.done { background: rgba(232,201,107,.5); }
.tut-dot.active { background: var(--gold); width: 18px; border-radius: 3px; }

/* Footer controls. */
.tut-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tut-skip {
  background: none; border: none; padding: 6px 2px; cursor: pointer;
  color: var(--muted); font-family: inherit; font-size: 12.5px; transition: color .15s;
}
.tut-skip:hover { color: var(--text); }
.tut-nav { display: flex; align-items: center; gap: 8px; }
.tut-btn {
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 9px; padding: 9px 16px; border: 0.5px solid var(--border2);
  transition: all .16s; display: inline-flex; align-items: center; gap: 6px;
}
.tut-btn i { font-size: 15px; }
.tut-btn-ghost { background: transparent; color: var(--muted); }
.tut-btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.tut-btn-primary { background: var(--gold); color: #1a1000; border-color: var(--gold); }
.tut-btn-primary:hover { filter: brightness(1.05); }

@keyframes tut-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tut-pop  { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.tut-card.is-center { animation: tut-pop-center .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes tut-pop-center { from { opacity: 0; transform: translate(-50%,-46%) scale(.96); } }
.tut-card.is-bottom { animation: tut-pop-bottom .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes tut-pop-bottom { from { opacity: 0; transform: translate(-50%,14px); } }

@media (prefers-reduced-motion: reduce) {
  .tut-spot { transition: none; }
  .tut-card, .tut-backdrop { animation: none; }
}

/* Small floating "replay tour" affordance is intentionally omitted from the UI;
   the tour can be re-run for review via Tutorial.start() or ?tutorial=1. */