/* First-time tutorial: warm scrim + spotlight cutout + minimal coach-mark tooltip.
   The mask is a single element — its box-shadow spread IS the dim layer, with a
   transparent hole at the target rect, so the highlighted control underneath is
   never actually covered. Mounted directly under document.body (see tutorial.js)
   so position:fixed always resolves against the true viewport.

   Styled from the app's own design tokens (base.css :root, and the panel/dock/
   badge rules in this file) rather than invented colors, so the coach marks read
   as part of HandBand instead of a generic overlay library. */

.tutorial-layer {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

.tutorial-mask {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  background: transparent;
  box-shadow:
    0 0 0 9999px var(--scrim-spotlight),
    0 0 0 2px var(--paper),
    0 0 24px 4px rgb(var(--paper-rgb) / 0.4);
  border-radius: 50%;
  pointer-events: none;
  transition: left 200ms var(--ease-out), top 200ms var(--ease-out), width 200ms var(--ease-out),
    height 200ms var(--ease-out), border-radius 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.tutorial-mask.is-rect { border-radius: 10px; }
.tutorial-mask.is-full {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none;
  background: var(--scrim-spotlight);
}
/* While something is being dragged, the spotlight must feel attached to it —
   no easing lag behind the pointer. */
.tutorial-mask.is-instant { transition: none; }

.tutorial-dest {
  position: fixed;
  border: 1.5px dashed var(--paper);
  border-radius: 10px;
  background: rgb(var(--paper-rgb) / 0.22);
  opacity: 0;
  pointer-events: none;
  transition: left 200ms var(--ease-out), top 200ms var(--ease-out),
    width 200ms var(--ease-out), height 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.tutorial-dest.is-visible { opacity: 1; }
.tutorial-dest.is-instant { transition: opacity 200ms var(--ease-out); }

.tutorial-guide {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.tutorial-guide.is-visible { opacity: 1; }
.tutorial-guide-line {
  fill: none;
  stroke: var(--paper);
  stroke-width: 2;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}

/* ---------- coach-mark tooltip: same surface recipe as .dock / .panel ---------- */

.tutorial-card {
  position: fixed;
  left: 50%;
  top: 50%;
  max-width: 220px;
  padding: 10px 13px 12px;
  border-radius: var(--radius-m);
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  box-shadow: 0 14px 30px -16px rgb(var(--shadow-rgb) / 0.24), var(--edge-light);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  color: var(--panel-ink);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transition: left 200ms var(--ease-out), top 200ms var(--ease-out),
    opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.tutorial-card.is-visible { opacity: 1; transform: none; }

/* Welcome / Finish bookends: larger, centered, the app's usual light glass surface. */
.tutorial-card.is-modal {
  max-width: min(320px, calc(100vw - 32px));
  padding: 22px 24px 20px;
  border-radius: var(--radius-l);
  background: var(--panel-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift), var(--edge-light);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  color: var(--ink);
}

.tutorial-body { position: relative; transition: opacity 160ms var(--ease-out); }
.tutorial-card.is-feedback .tutorial-body { opacity: 0; pointer-events: none; }

/* Small uppercase label, same recipe as .dock-label (ROOT / QUALITY / EXTENSIONS),
   just tinted with the app's cream accent instead of the neutral panel label. */
.tutorial-title {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-ink);
}
.tutorial-card.is-modal .tutorial-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--panel-ink);
  margin-bottom: 8px;
}

.tutorial-text { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--panel-ink-dim); }
.tutorial-card.is-modal .tutorial-text { font-size: 13px; color: var(--ink-2); }

.tutorial-hint { margin: 5px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--panel-ink-dim); font-weight: 500; }

/* ---------- first-lesson hand hint: a quick visual legend inside the coach mark ---------- */

/* The legend needs room for two states side by side; every other card keeps its width. */
.tutorial-card:has(.tutorial-legend) { max-width: min(288px, calc(100vw - 24px)); }

.tutorial-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.tutorial-legend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 7px;
  border-radius: 10px;
  background: rgb(var(--ink-rgb) / 0.03);
  border: 1px solid var(--panel-line);
}

.tutorial-visual { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tutorial-visual-art { flex: none; overflow: visible; }

.tutorial-legend-label {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  color: var(--panel-ink);
}
.tutorial-legend-label strong { color: var(--accent-ink); font-weight: 600; }
.tutorial-visual-arrow { color: var(--ink-3); }

/* The whole hand in one ghost tone — no finger is singled out as "the" player.
   Only the index fingertip gets the accent, as the tracking point. */
.tutorial-hand-palm { fill: var(--panel-bg); stroke: var(--ink-2); stroke-width: 1.5; }
.tutorial-hand-finger { fill: none; stroke: var(--ink-2); stroke-width: 4.5; stroke-linecap: round; }
.tutorial-hand-tip { fill: var(--accent-ink); }
.tutorial-hand-halo { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0.5; }
.tutorial-hint-pad {
  fill: rgb(var(--accent-rgb) / 0.14);
  stroke: rgb(var(--accent-rgb) / 0.74);
  stroke-width: 1.2;
  stroke-dasharray: 3 2.5;
}

.tutorial-vol-track rect { fill: var(--ink-4); }
.tutorial-vol-lit rect { fill: var(--accent); }

.tutorial-actions { margin-top: 12px; }
.tutorial-actions .btn.is-on { width: 100%; justify-content: center; }

/* Success flash: the same cream pill the app already uses for an active chip,
   the Auto-voicing toggle and the Edit/Perform segmented control. */
.tutorial-feedback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 180ms var(--ease-out), transform 200ms var(--ease-out);
  pointer-events: none;
  text-align: center;
  padding: 0 10px;
}
.tutorial-card.is-modal .tutorial-feedback { font-size: 16px; }
.tutorial-card.is-feedback .tutorial-feedback { opacity: 1; transform: scale(1); }

/* ---------- persistent global controls: one skip action, one progress row ---------- */

/* A quiet toolbar-style action, not a separate button chrome — same idiom as .btn.is-ghost. */
.tutorial-global-skip {
  position: fixed;
  top: 16px;
  right: 16px;
  height: 30px;
  padding: 0 12px;
  border-radius: 9px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  pointer-events: auto;
  transition: color 200ms var(--ease-out), background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.tutorial-global-skip:hover { color: var(--ink); background: var(--paper); }

.tutorial-progress {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}
.tutorial-progress.is-visible { opacity: 1; }
.tutorial-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--ink-rgb) / 0.18);
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.tutorial-dot.is-done { background: var(--panel-ink-dim); }
.tutorial-dot.is-active { background: var(--accent-ink); transform: scale(1.3); }

@media (max-width: 480px) {
  .tutorial-card { max-width: calc(100vw - 24px); }
  .tutorial-card.is-modal { max-width: calc(100vw - 24px); padding: 18px 18px 18px; }
}