/*
 * BOTCOIN Mining — "Take a Tour" guided walkthrough.
 *
 * Deliberately thin: every token (--paper/--ink/--muted/--line/--soft-line/
 * --panel/--mono/--ease) and every component class reused here
 * (.frame-card, .corner, .frame-button, .frame-button--small,
 * .frame-button--primary) already comes from /rig/shared/rig.css, which is
 * always linked before this file on every page that mounts the tour. This
 * file only adds tour-specific positioning/layout — no new tokens, no
 * border-radius, no glow/shadow, matching the rest of the site.
 */

/* ── Highlight ring around an anchored step's target element ───────────
   Hairline outline only — no fill, no glow, no page-dimming overlay — and
   pointer-events: none so it never blocks a click on (or through to) the
   element it's outlining. */
.rig-tour-highlight {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  border: 1px solid var(--line);
  transition:
    top 0.35s var(--ease),
    left 0.35s var(--ease),
    width 0.35s var(--ease),
    height 0.35s var(--ease),
    opacity 0.35s var(--ease);
}

/* ── Popup ───────────────────────────────────────────────────────────── */

.rig-tour-popup {
  /* .frame-card already supplies border/background/padding/position:
     relative — this file only needs to promote it to fixed (later in
     source order than rig.css, so it wins at equal specificity, same
     technique already used elsewhere in this codebase — e.g. market.html's
     #listRigDialog / rentals.html's #rigWalletBox overrides) and size it. */
  position: fixed;
  z-index: 510;
  width: 300px;
  max-width: calc(100vw - 24px);
  opacity: 0;
  transform: translateY(4px);
  transition:
    top 0.35s var(--ease),
    left 0.35s var(--ease),
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.rig-tour-popup.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.rig-tour-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}

.rig-tour-title {
  margin: 0;
  padding-top: 2px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.rig-tour-close {
  flex-shrink: 0;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 8px;
  transition: color 0.35s var(--ease);
}

.rig-tour-close:hover,
.rig-tour-close:focus-visible {
  color: var(--ink);
}

.rig-tour-body {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
}

.rig-tour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--soft-line);
}

.rig-tour-counter {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rig-tour-btnrow {
  display: flex;
  gap: 8px;
}

/* Mobile: a bottom sheet instead of an anchored/centered floating card —
   guarantees the popup never sits under the fixed nav/tab-bar chrome at
   narrow widths, regardless of scroll position or which step is showing. */
@media (max-width: 620px) {
  .rig-tour-popup.is-sheet {
    left: 12px !important;
    right: 12px;
    bottom: 14px;
    top: auto !important;
    width: auto;
    max-width: none;
  }
}

/* ── "Take a Tour" restart affordance ────────────────────────────────── */

.rig-tour-launcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 495;
  background: var(--panel);
  border: 1px solid var(--soft-line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 11px;
  cursor: pointer;
  transition:
    color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    background 0.35s var(--ease);
}

.rig-tour-launcher:hover,
.rig-tour-launcher:focus-visible {
  color: var(--ink);
  border-color: var(--line);
  background: var(--soft-line);
}

@media (max-width: 620px) {
  .rig-tour-launcher {
    right: 12px;
    bottom: 12px;
    padding: 6px 9px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rig-tour-highlight,
  .rig-tour-popup,
  .rig-tour-launcher {
    transition: none !important;
  }
}