/* The first-visit tutorial (web/tutorial.js): the screen dims with a rounded
   cut-out over the control a step is about, and a bubble beside it. Phones
   dock the bubble at the bottom, or just above a target down there
   (web/mobile.css). Same card look as the disclaimer (web/maptools.css).
   Below the disclaimer (z-index 1000), which always comes first. */
.tutorial { position: fixed; inset: 0; z-index: 900; animation: tutorial-in 200ms ease; }
.tutorial-dim { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 'pass' (click-to-continue steps): the cut-out lets clicks through to the
   map, the four blockers around it catch everything else */
.tutorial.is-pass, .tutorial.is-pass .tutorial-dim { pointer-events: none; }
.tutorial-blocker { position: absolute; display: none; }
.tutorial.is-pass .tutorial-blocker { display: block; pointer-events: auto; }

.tutorial-bubble { position: absolute; box-sizing: border-box; width: min(320px, calc(100vw - 24px));
  padding: 14px 16px 12px; border-radius: 14px; background: #fff; color: #1f1f1f;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); font-size: 14px; line-height: 1.5; pointer-events: auto; }
.tutorial-text { margin: 0 0 12px; }
.tutorial-foot { display: flex; align-items: center; gap: 6px; }
.tutorial-count { color: #6b6b6b; font-size: 12px; font-variant-numeric: tabular-nums; }
.tutorial-bubble button { padding: 6px 14px; border: 0; border-radius: 999px; font: inherit; font-weight: 600;
  cursor: pointer; }
.tutorial-bubble button:focus-visible { outline: 2px solid #1f1f1f; outline-offset: 2px; }
.tutorial-bubble .tutorial-skip { margin-right: auto; padding-left: 8px; padding-right: 8px; background: transparent;
  color: #6b6b6b; font-weight: 400; }
.tutorial-bubble .tutorial-skip:hover { text-decoration: underline; }
.tutorial-bubble .tutorial-back { background: #eeeae4; color: #1f1f1f; }
.tutorial-bubble .tutorial-back:hover:not(:disabled) { background: #e2ddd5; }
.tutorial-bubble .tutorial-back:disabled { opacity: 0.4; cursor: default; }
.tutorial-bubble .tutorial-next { background: #1f1f1f; color: #fff; }
.tutorial-bubble .tutorial-next:hover { background: #454545; }

@keyframes tutorial-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .tutorial { animation: none; }
  .tutorial-bubble, .tutorial-bubble button { transition: none; }
}

/* the "Uitleg" button: the same small link as "Disclaimer", beside it.
   Mapbox stacks bottom-right controls (newest first); the disclaimer after
   it gives up its own line. */
.tutorial-ctrl button { padding: 1px 6px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, 0.75);
  color: #333; font: inherit; font-size: 11px; line-height: 16px; cursor: pointer; }
.tutorial-ctrl button:hover { text-decoration: underline; }
.mapboxgl-ctrl-bottom-right .tutorial-ctrl + .disclaimer-ctrl { clear: none; margin-right: 4px; }
/* no "Uitleg" in the projects chooser (setTutorialAvailable): nothing to explain there yet */
.tutorial-off .tutorial-ctrl { display: none; }
.tutorial-off .mapboxgl-ctrl-bottom-right .tutorial-ctrl + .disclaimer-ctrl { clear: both; margin-right: 10px; }