/* ============================================================
   AIpraatplaat — docent-rondleiding (tutorial)
   Doorkliksysteem met spotlight (uitsparing + dimming), een gloeiende
   knop, een zwevende oranje pijl en een uitlegvenster met opdracht.
   Alles wordt door tutorial.js live gepositioneerd op basis van de
   ECHTE knoppositie (getBoundingClientRect), zodat de rondleiding
   automatisch meebeweegt als knoppen verplaatst worden.
   ============================================================ */

:root { --tut-accent: #d97757; }

/* wortel: vult het scherm, vangt zelf geen klikken (de uitsparing laat
   de echte knop eronder gewoon werken). Alleen het uitlegvenster vangt
   klikken (eigen pointer-events). */
.tut-root {
  position: fixed; inset: 0; z-index: 100000; pointer-events: none;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.tut-root[hidden] { display: none; }

/* ---- spotlight: een doorzichtig gat met een enorme schaduw eromheen ---- */
.tut-hole {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(24, 18, 12, 0.50);
  outline: 2px solid var(--tut-accent);
  outline-offset: 3px;
  transition: left .28s cubic-bezier(.22,1,.36,1), top .28s cubic-bezier(.22,1,.36,1),
              width .28s cubic-bezier(.22,1,.36,1), height .28s cubic-bezier(.22,1,.36,1),
              box-shadow .2s ease;
}
.tut-hole::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  box-shadow: 0 0 0 3px rgba(217,119,87,0.35), 0 0 22px 4px rgba(217,119,87,0.55);
  animation: tut-pulse 1.5s ease-in-out infinite;
}
.tut-root.no-dim .tut-hole { box-shadow: none; outline: none; }
.tut-root.no-dim .tut-hole::after { display: none; }

@keyframes tut-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(217,119,87,0.30), 0 0 18px 3px rgba(217,119,87,0.40); }
  50%      { box-shadow: 0 0 0 5px rgba(217,119,87,0.45), 0 0 30px 7px rgba(217,119,87,0.70); }
}

/* ---- gloeiende echte knop (extra cue bovenop het gat) ---- */
.tut-glow {
  position: relative;
  animation: tut-glow-anim 1.4s ease-in-out infinite !important;
  border-radius: 12px;
}
@keyframes tut-glow-anim {
  0%, 100% { box-shadow: 0 0 0 2px rgba(217,119,87,0.55), 0 0 14px 2px rgba(217,119,87,0.45); }
  50%      { box-shadow: 0 0 0 4px rgba(217,119,87,0.75), 0 0 26px 6px rgba(217,119,87,0.70); }
}

/* ---- zwevende oranje pijl die naar de knop wijst ---- */
.tut-arrow {
  position: fixed; left: 0; top: 0; width: 40px; height: 40px;
  pointer-events: none; color: var(--tut-accent);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
  transition: left .26s cubic-bezier(.22,1,.36,1), top .26s cubic-bezier(.22,1,.36,1);
}
.tut-arrow[hidden] { display: none; }
/* basispijl wijst omlaag; rotatie + bob (richting het doel) per richting-klasse */
.tut-arrow svg { width: 100%; height: 100%; display: block; transform-origin: 50% 50%; animation: tut-bob-d 1.1s ease-in-out infinite; }
.tut-arrow.ad-up svg    { animation: tut-bob-u 1.1s ease-in-out infinite; }
.tut-arrow.ad-left svg  { animation: tut-bob-l 1.1s ease-in-out infinite; }
.tut-arrow.ad-right svg { animation: tut-bob-r 1.1s ease-in-out infinite; }
@keyframes tut-bob-d { 0%,100% { transform: rotate(0deg)   translateY(0); } 50% { transform: rotate(0deg)   translateY(6px); } }
@keyframes tut-bob-u { 0%,100% { transform: rotate(180deg) translateY(0); } 50% { transform: rotate(180deg) translateY(6px); } }
@keyframes tut-bob-l { 0%,100% { transform: rotate(90deg)  translateY(0); } 50% { transform: rotate(90deg)  translateY(6px); } }
@keyframes tut-bob-r { 0%,100% { transform: rotate(-90deg) translateY(0); } 50% { transform: rotate(-90deg) translateY(6px); } }

/* ---- uitlegvenster met opdracht ---- */
.tut-card {
  position: fixed; left: 0; top: 0; width: min(340px, calc(100vw - 28px));
  pointer-events: auto; box-sizing: border-box;
  background: var(--paper, #faf6ef);
  border: 1px solid rgba(43,39,34,0.12);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(24,18,12,0.32);
  padding: 18px 20px 16px;
  transition: left .26s cubic-bezier(.22,1,.36,1), top .26s cubic-bezier(.22,1,.36,1);
}
.tut-card.dragging { transition: none; }
/* versleepbare bovenbalk: sleeppuntjes als cue, met het kruisje rechts erin */
.tut-drag {
  position: relative; z-index: 1;
  margin: -18px -20px 8px; padding: 9px 0 7px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; border-radius: 18px 18px 0 0;
  border-bottom: 1px solid rgba(43,39,34,0.06);
  touch-action: none;
}
.tut-drag:active, .tut-card.dragging .tut-drag { cursor: grabbing; }
.tut-grip { display: grid; grid-template-columns: repeat(3, 4px); grid-template-rows: repeat(2, 4px); gap: 3px; }
.tut-grip span {
  box-sizing: border-box; display: block;
  width: 4px; height: 4px; min-width: 4px; min-height: 4px;
  border-radius: 50%; background: rgba(43,39,34,0.30);
}
.tut-card-x {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 26px; height: 26px; z-index: 2;
  display: grid; place-items: center; border: none; background: transparent;
  color: var(--ink-muted, #7a7064); cursor: pointer; border-radius: 8px;
}
.tut-card-x:hover { background: rgba(43,39,34,0.08); color: var(--ink, #2b2722); }
.tut-card-x svg { width: 15px; height: 15px; }

.tut-eyebrow {
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--tut-accent); font-weight: 700; margin: 0 0 4px;
}
.tut-title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 19px; line-height: 1.2; color: var(--ink, #2b2722); margin: 0 0 8px;
}
.tut-body { font-size: 14px; line-height: 1.5; color: var(--ink-soft, #4a433a); margin: 0; }
.tut-task {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 12px 0 0; padding: 10px 12px;
  background: rgba(217,119,87,0.10); border: 1px solid rgba(217,119,87,0.28);
  border-radius: 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink, #2b2722);
}
.tut-task .tut-task-ic { flex: 0 0 auto; color: var(--tut-accent); margin-top: 1px; }
.tut-task .tut-task-ic svg { width: 17px; height: 17px; display: block; }
.tut-task b { font-weight: 700; }

/* opdracht uitgevoerd → groene "Goed gedaan" met vinkje (vervangt de opdracht) */
.tut-done {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 12px 0 0; padding: 10px 12px;
  background: rgba(47,125,79,0.10); border: 1px solid rgba(47,125,79,0.30);
  border-radius: 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink, #2b2722); font-weight: 600;
  animation: tut-done-in .25s ease;
}
.tut-done .tut-done-ic { flex: 0 0 auto; color: #2f7d4f; margin-top: 1px; }
.tut-done .tut-done-ic svg { width: 18px; height: 18px; display: block; }
@keyframes tut-done-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* voortgang + knoppen */
.tut-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; }
.tut-progress { font-size: 12px; color: var(--ink-muted, #8a8377); font-weight: 600; white-space: nowrap; }
.tut-actions { display: flex; gap: 8px; align-items: center; }
.tut-btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 10px; padding: 8px 14px; border: 1px solid transparent;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.tut-btn-ghost { background: transparent; color: var(--ink-muted, #7a7064); }
.tut-btn-ghost:hover { background: rgba(43,39,34,0.07); color: var(--ink, #2b2722); }
.tut-btn-primary { background: var(--tut-accent); color: #fff; }
.tut-btn-primary:hover { background: #c8683f; }
/* gloeiende "Volgende": trekt de aandacht zodra de docent verder mag */
.tut-btn-glow { animation: tut-btn-pulse 1.25s ease-in-out infinite; }
@keyframes tut-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(217,119,87,0.40), 0 0 14px 2px rgba(217,119,87,0.45); }
  50%      { box-shadow: 0 0 0 4px rgba(217,119,87,0.55), 0 0 24px 6px rgba(217,119,87,0.75); }
}

/* ---- "goed gedaan" terugkoppeling ---- */
.tut-feedback {
  position: fixed; left: 50%; top: 28px; transform: translateX(-50%) translateY(-12px);
  pointer-events: none; z-index: 100001; opacity: 0;
  display: inline-flex; align-items: center; gap: 9px;
  background: #2f7d4f; color: #fff; font-size: 14px; font-weight: 700;
  padding: 11px 18px; border-radius: 999px; box-shadow: 0 12px 34px rgba(24,18,12,0.30);
  transition: opacity .22s ease, transform .22s ease;
}
.tut-feedback.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.tut-feedback svg { width: 18px; height: 18px; }

/* ---- blokkade-kaart (er zijn al deelnemers) ---- */
.tut-block {
  position: fixed; inset: 0; z-index: 100002; pointer-events: auto;
  display: grid; place-items: center; background: rgba(24,18,12,0.55);
  font-family: var(--font-sans, system-ui, sans-serif);
}
.tut-block-card {
  background: var(--paper, #faf6ef); border-radius: 18px; max-width: 380px; width: calc(100% - 40px);
  padding: 26px 28px; text-align: center; box-shadow: 0 22px 60px rgba(24,18,12,0.32);
}
.tut-block-card h3 { font-family: var(--font-serif, Georgia, serif); font-size: 21px; margin: 0 0 8px; color: var(--ink, #2b2722); }
.tut-block-card p { font-size: 14px; line-height: 1.5; color: var(--ink-soft, #4a433a); margin: 0 0 18px; }

@media (prefers-reduced-motion: reduce) {
  .tut-hole, .tut-arrow, .tut-card { transition: none; }
  .tut-hole::after, .tut-glow, .tut-arrow svg, .tut-btn-glow, .tut-done { animation: none; }
}