/* Tutorial spotlight + cards — owned by the tutorial module.
   A fixed layer above the whole app (but never blocking it: everything is
   pointer-events none except the card). The hole's giant box-shadow does the
   dimming; the card is a small parchment panel in the house style. */

#tut-layer {
  position: fixed;
  inset: 0;
  z-index: 1200;               /* above panels (5xx-7xx) and modals (800) */
  pointer-events: none;
  overflow: hidden;
}

/* the spotlight ring; its shadow dims everything around the target */
.tut-hole {
  position: fixed;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, .55),
    0 0 22px rgba(242, 201, 76, .3),
    inset 0 0 14px rgba(242, 201, 76, .12);
  pointer-events: none;
  transition: top .28s var(--ease), left .28s var(--ease),
              width .28s var(--ease), height .28s var(--ease);
}

/* full dim for centered cards (no target) */
.tut-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  pointer-events: none;
}

/* ---------------- the card ---------------- */

.tut-card {
  position: fixed;
  width: 348px;
  max-width: calc(100vw - 24px);
  pointer-events: auto;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2) 72%);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow),
    inset 0 0 0 1px rgba(0, 0, 0, .4),
    inset 0 0 0 2px rgba(232, 225, 209, .04);
  padding: 14px 16px 13px;
  transition: top .28s var(--ease), left .28s var(--ease);
  animation: tut-card-in .38s var(--ease);
}
.tut-card.tut-center { width: 432px; }

.tut-card.tut-snap,
.tut-hole.tut-snap { transition: none; }

@keyframes tut-card-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.tut-kicker {
  font-family: var(--smallcaps);
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--accent);
  margin: 0 0 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-soft);
}
.tut-kicker .tut-step-n {
  color: var(--ink-faint);
  letter-spacing: .1em;
  white-space: nowrap;
}

.tut-body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.58;
  color: var(--ink);
}
.tut-body p { margin: 0 0 .7em; }
.tut-body p:last-child { margin-bottom: 0; }
.tut-body b { color: var(--accent-bright); font-weight: 600; }
.tut-body i { font-style: italic; }

/* "do the thing and I'll notice" line on waiting steps */
.tut-wait {
  font-style: italic;
  font-size: 14px;
  color: var(--ink-dim);
}
.tut-wait::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
  animation: tut-wait-pulse 1.6s ease-in-out infinite;
}
@keyframes tut-wait-pulse {
  0%, 100% { opacity: .25; }
  50%      { opacity: .9; }
}

/* the one card allowed to shout */
.tut-warn-head {
  font-family: var(--smallcaps);
  font-size: 22px;
  line-height: 1.32;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bad);
  margin: 0 0 10px;
}

/* ---------------- actions ---------------- */

.tut-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
}
.tut-actions .btn { pointer-events: auto; }

.tut-skip-all {
  margin-left: auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  text-decoration: underline;
  text-decoration-color: rgba(110, 103, 89, .5);
  text-underline-offset: 3px;
  padding: 2px 0;
}
.tut-skip-all:hover { color: var(--ink-dim); }