/* tutorial: tour spotlight and card, tip post-it, menu tile */
#tutorial { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.tut-spot {
  position: fixed; border: 3px dashed var(--red); border-radius: 10px;
  transition: left 0.25s, top 0.25s, width 0.25s, height 0.25s;
}
.tut-dim { position: fixed; inset: 0; background: rgba(40, 25, 10, 0.55); }
.tut-card {
  position: fixed; width: min(330px, calc(100vw - 20px)); padding: 18px 16px 12px; pointer-events: auto;
  box-shadow: 3px 8px 16px rgba(40, 20, 0, 0.4);
}
.tut-card p { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.tut-card .row, #tip .row { display: flex; align-items: center; gap: 8px; }
.tut-card .spacer { flex: 1; }
.tut-card .eyebrow { font-size: 1.8rem; }
.tut-card .card-head small { color: var(--muted); }
#tutorial .link, #tip .link {
  border: none; background: none; box-shadow: none; padding: 0 2px; color: var(--muted); text-decoration: underline;
}
.tut-arrow {
  position: fixed; font-size: 2.6rem; line-height: 1; color: var(--red); text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%) rotate(var(--turn, 0deg)); animation: tut-nudge 0.9s ease-in-out infinite alternate;
}
@keyframes tut-nudge { to { transform: translate(-50%, -50%) rotate(var(--turn, 0deg)) translateX(6px); } }
.tut-mark {
  position: fixed; transform: translate(-50%, -50%) rotate(-2deg); padding: 1px 8px; white-space: nowrap;
  background: var(--sticky); border: 1.5px solid var(--ink); font-size: 0.95rem; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.25);
}
.tut-mark.out { background: #ffd6d6; transform: translate(-50%, -50%) rotate(2deg); }

.brief-card {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-0.6deg);
  width: min(460px, calc(100vw - 20px)); max-height: calc(100vh - 20px); overflow-y: auto;
  padding: 20px 18px 14px; pointer-events: auto; box-shadow: 3px 8px 16px rgba(40, 20, 0, 0.4);
}
.brief-card .eyebrow { font-size: 2rem; }
.brief-steps { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 10px; }
.brief-steps li { display: flex; gap: 10px; align-items: flex-start; }
.brief-steps strong { display: block; font-size: 1.15rem; }
.brief-steps span { font-size: 1.02rem; line-height: 1.28; }
.brief-num {
  flex: none; width: 30px; height: 30px; border: 2px solid var(--red); border-radius: 50%;
  display: grid; place-items: center; color: var(--red); font-family: var(--marker); font-size: 1.1rem;
}
.brief-foot { margin: 0 0 10px; color: var(--muted); font-size: 0.98rem; }
@media (prefers-reduced-motion: reduce) { .brief-card { transform: translate(-50%, -50%); } }

#tip {
  position: absolute; top: 10px; right: 10px; z-index: 6; width: min(300px, calc(100% - 20px));
  padding: 16px 14px 10px; gap: 8px; transform: rotate(1.2deg); animation: tip-in 0.3s ease-out;
}
#tip p { margin: 0; font-size: 1.05rem; line-height: 1.25; }
#tip .row { justify-content: flex-end; }
#tip .row button:not(.link) { padding: 0 12px; }
@keyframes tip-in { from { opacity: 0; transform: rotate(1.2deg) translateY(-12px); } }

#tut-help { font-family: var(--marker); }
#tut-help-m { display: none; }
#tutorial-menu { display: flex; align-items: center; gap: 12px; }
#tutorial-menu .tut-tile { flex: 1; }
.tut-tile { position: relative; background: var(--sticky); transform: rotate(1deg); padding-top: 26px; }
.tut-tile:hover:not(:disabled) { background: var(--sticky); }
.tut-badge {
  position: absolute; top: -10px; right: -6px; padding: 2px 10px; border-radius: 3px; transform: rotate(4deg);
  background: var(--red); color: #fff; font-size: 0.95rem; box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.25);
}
.tips-toggle { flex: none; max-width: 38%; font-size: 0.95rem; background: var(--paper-2); }

@media (max-width: 800px) {
  #tip { left: 8px; right: 8px; top: 8px; width: auto; }
  #tut-help { display: none; }
  #tut-help-m { display: block; flex: none; min-height: 44px; font-family: var(--marker); background: var(--sticky); }
  #tutorial-menu .tut-tile { padding-top: 18px; }
}