/* ==========================================================================
   Guided tour — balloon, spotlight ring, dim. Pairs with static/js/tour.js.
   Palette follows the Ledger identity: ink balloon on paper, no blue.
   ========================================================================== */
.tour-dim {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(23, 24, 28, .55);
  -webkit-backdrop-filter: saturate(.9) blur(1px);
  backdrop-filter: saturate(.9) blur(1px);
  animation: tour-fade .18s ease-out;
}
@keyframes tour-fade { from { opacity: 0 } to { opacity: 1 } }

/* Lift the highlighted control above the dim so it reads as "live", not greyed. */
.tour-lift { position: relative !important; z-index: 9001 !important; }

.tour-ring {
  position: fixed; z-index: 9002; pointer-events: none;
  border: 2px solid #17181C; border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .55);
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}

.tour-tip {
  position: fixed; z-index: 9003; max-width: min(360px, calc(100vw - 24px));
  background: #FFF; color: #17181C;
  border: 1px solid #D8D4CC; border-radius: 10px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 30px rgba(23, 24, 28, .22);
  animation: tour-pop .18s ease-out;
}
@keyframes tour-pop { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }

.tour-arrow {
  position: absolute; top: -7px; width: 14px; height: 14px;
  background: #FFF; border-left: 1px solid #D8D4CC; border-top: 1px solid #D8D4CC;
  transform: rotate(45deg);
}
.tour-tip--above .tour-arrow {
  top: auto; bottom: -7px;
  border-left: none; border-top: none;
  border-right: 1px solid #D8D4CC; border-bottom: 1px solid #D8D4CC;
}

.tour-count {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: #6B7076; margin-bottom: 4px;
}
.tour-title { margin: 0 0 4px; font-size: 15px; letter-spacing: -.01em; }
.tour-body { margin: 0; font-size: 13.5px; line-height: 1.45; color: #3D4149; }
.tour-actions {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
}
.tour-spacer { flex: 1; }
.tour-actions .btn { min-height: 38px; }

/* The "look here first" pulse on the Tutorial button, before the first run. */
@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 122, 77, .55) }
  60%      { box-shadow: 0 0 0 7px rgba(31, 122, 77, 0) }
}
.icon-btn--pulse { animation: tour-pulse 2.4s ease-out 3; }

@media (max-width: 480px) {
  .tour-tip { left: 12px !important; right: 12px; max-width: none; width: auto; }
  .tour-tip .tour-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-dim, .tour-tip { animation: none }
  .tour-ring { transition: none }
  .icon-btn--pulse { animation: none }
}