/* The tutorial (web/js/tour.js): a dark shade with a hole per highlighted
   control, the popup with its arrow, the demo pointer. Above the panels,
   sheet and menus (≤ 30), below the toast (50) and the busy popup (60). */
.tour-blocker { position: fixed; inset: 0; z-index: 40; background: transparent; cursor: default; touch-action: none; }
.tour-shade { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 41; pointer-events: none; }
.tour-shade .tour-dim { fill: rgba(10, 14, 20, .55); }
.tour-shade .tour-rings path { fill: none; stroke: #ffd54f; stroke-width: 2.5; }
.tour-pop {
  position: fixed; z-index: 45; left: 16px; top: 16px; box-sizing: border-box;
  background: var(--panel); color: var(--text); border-radius: 10px; box-shadow: 0 10px 32px rgba(0, 0, 0, .35); padding: 12px 14px 10px;
}
.tour-pop h2 { font-size: 16px; margin: 0 0 4px; }
.tour-pop p { margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
.tour-count { float: right; font-size: 12px; color: var(--muted); margin-left: 8px; }
.tour-actions { display: flex; gap: 6px; align-items: center; }
.tour-actions .grow { flex: 1; }
/* the arrow on the side facing the highlighted control (`--at`: along that side) */
.tour-arrow { position: absolute; width: 14px; height: 14px; background: var(--panel); transform: rotate(45deg); display: none; }
.tour-pop[data-side="right"] .tour-arrow { display: block; left: -7px; top: calc(var(--at, 20px) - 7px); }
.tour-pop[data-side="left"] .tour-arrow { display: block; right: -7px; top: calc(var(--at, 20px) - 7px); }
.tour-pop[data-side="below"] .tour-arrow { display: block; top: -7px; left: calc(var(--at, 20px) - 7px); }
.tour-pop[data-side="above"] .tour-arrow { display: block; bottom: -7px; left: calc(var(--at, 20px) - 7px); }
/* the demo pointer: its tip on the point (a finger on touch screens is the same arrow) */
.tour-cursor {
  position: fixed; left: 0; top: 0; z-index: 46; width: 26px; height: 26px; pointer-events: none;
  transition: transform 500ms ease-in-out; will-change: transform;
}
.tour-cursor[hidden] { display: none; }
.tour-cursor svg { width: 26px; height: 26px; fill: #fff; stroke: #1d2430; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.tour-cursor::after {
  content: ''; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid #ffd54f; opacity: 0; pointer-events: none;
}
.tour-cursor.tap::after { animation: tour-tap .45s ease-out; }
@keyframes tour-tap { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
/* "Bekijk de rondleiding" under the start steps */
.tour-link { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .tour-cursor { transition: none; }
  .tour-cursor.tap::after { animation: none; }
}
/* room for "Rondleiding" in one top-bar row from 641 px (a 1024 px laptop, a tablet), as before it;
   below 641 px it sits in the menu */
@media (min-width: 641px) and (max-width: 1180px) {
  #imagery { max-width: 130px; }
  .search { flex-basis: 120px; min-width: 0; }
  .search input { min-width: 0; width: 0; }
}
@media (min-width: 641px) and (max-width: 780px) {
  .search button .label, .tour-btn .label { display: none; }
  .search button { padding: 6px 10px; }
  .search { flex-basis: 60px; }
}
/* the top bar's tutorial button: its label; the icon only where the row is short */
.tour-btn svg { display: none; }
@media (min-width: 641px) and (max-width: 780px) {
  .tour-btn svg { display: block; }
}
@media (max-width: 640px) {
  .topbar-right .tour-btn { justify-content: flex-start; }
}