/* Vanza guided tour (P15) — coach-marks layer. Tokens only, no hard colours. */

.vz-tour-mask {
  position: fixed; inset: 0; z-index: 9000;
  background: color-mix(in srgb, var(--ink, #16233D) 45%, transparent);
}

.vz-tour-ring {
  position: fixed; z-index: 9001; pointer-events: none;
  border: 2px solid var(--accent, #2E6BFF);
  border-radius: 10px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #2E6BFF) 30%, transparent),
              0 0 0 9999px color-mix(in srgb, var(--ink, #16233D) 45%, transparent);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
/* The ring's giant shadow is the real dimmer — the mask just eats clicks. */
.vz-tour-mask { background: transparent; }

.vz-tour-card {
  position: fixed; z-index: 9002;
  background: var(--surface, #fff);
  color: var(--text, #1c2330);
  border: 1px solid var(--border, #d9dee8);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(10, 18, 35, .28);
  padding: 14px 16px 12px;
  width: 360px; max-width: calc(100vw - 24px);
  font-size: 14px; line-height: 1.5;
  transition: top .25s ease, left .25s ease;
}

.vz-tour-head { display: flex; align-items: center; margin-bottom: 4px; }
.vz-tour-count { font-size: 11.5px; color: var(--text-muted, #66708a); letter-spacing: .04em; }
.vz-tour-x {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--text-muted, #66708a); font-size: 20px; line-height: 1; padding: 2px 4px;
}
.vz-tour-x:hover { color: var(--text, #1c2330); }

.vz-tour-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.vz-tour-body  { color: var(--text-muted, #4a5470); margin-bottom: 12px; }

.vz-tour-actions { display: flex; gap: 8px; align-items: center; }
.vz-tour-actions button {
  border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border, #d9dee8); background: none; color: var(--text, #1c2330);
}
.vz-tour-actions .vz-tour-skip { border: 0; color: var(--text-muted, #66708a); padding-left: 4px; }
.vz-tour-actions .vz-tour-skip:hover { color: var(--text, #1c2330); }
.vz-tour-actions .vz-tour-next {
  background: var(--accent, #2E6BFF); border-color: var(--accent, #2E6BFF); color: #fff; font-weight: 600;
}
.vz-tour-actions .vz-tour-next:hover { filter: brightness(1.08); }