/* ===========================================================================
   DVTour styles — Salt & Cellar (paper / wine / ink)
   Class names match tour.js exactly.
   =========================================================================== */
.dvt-mask {
  position: fixed; inset: 0; z-index: 9000;
  display: none; background: transparent;
}
.dvt-mask.dvt-show { display: block; }

.dvt-hi {
  position: fixed; z-index: 9001; display: none;
  border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(20,16,12,.72), 0 0 0 2px rgba(192,106,62,.9);
  transition: all .34s cubic-bezier(.4,0,.2,1);
}
.dvt-mask.dvt-show ~ .dvt-hi { display: block; }
.dvt-hi.dvt-center { box-shadow: 0 0 0 9999px rgba(20,16,12,.78); }

.dvt-arrow {
  position: fixed; z-index: 9002; width: 16px; height: 16px;
  background: #1F1A15; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}

.dvt-pop {
  position: fixed; z-index: 9003; display: none;
  width: min(360px, calc(100vw - 32px));
  background: #1F1A15; color: #FBF7EE;
  border: 1px solid rgba(192,106,62,.35);
  border-radius: 12px; padding: 22px 22px 18px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(6px) scale(.98);
  transition: opacity .22s, transform .22s;
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
}
.dvt-pop.dvt-show { display: block; opacity: 1; transform: translateY(0) scale(1); }

.dvt-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono, "DM Mono", monospace);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: #C06A3E; margin-bottom: 12px;
}
.dvt-pop h4 {
  font-family: var(--serif, "Fraunces", Georgia, serif); font-weight: 500;
  font-size: 22px; line-height: 1.1; color: #FBF7EE; margin: 0 0 8px;
}
.dvt-pop p { font-size: 14px; line-height: 1.6; color: rgba(251,247,238,.8); margin: 0 0 18px; }

.dvt-foot { display: flex; align-items: center; gap: 8px; }
.dvt-dots { display: flex; gap: 6px; flex: 1; }
.dvt-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(251,247,238,.25); transition: background .2s, transform .2s; }
.dvt-dots i.on { background: #C06A3E; transform: scale(1.3); }

.dvt-btn { border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s; font-family: var(--sans, "DM Sans", sans-serif); }
.dvt-back { background: none; border-color: rgba(251,247,238,.28); color: rgba(251,247,238,.85); }
.dvt-back:hover { border-color: rgba(251,247,238,.6); }
.dvt-next { background: #C06A3E; color: #1F1A15; }
.dvt-next:hover { background: #a95c34; }

.dvt-skip {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(251,247,238,.08); border: none; color: rgba(251,247,238,.7);
  font-size: 14px; cursor: pointer; display: grid; place-items: center;
  transition: background .15s;
}
.dvt-skip:hover { background: rgba(251,247,238,.18); }

/* relaunch fab (unused by default — kept for parity) */
.dvt-fab {
  position: fixed; left: 22px; bottom: 22px; z-index: 8000;
  display: inline-flex; align-items: center; gap: 8px;
  background: #1F1A15; color: #FBF7EE; border: none;
  border-radius: 40px; padding: 11px 18px; cursor: pointer;
  font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .04em;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
}
.dvt-fab svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .dvt-pop { left: 16px !important; right: 16px; bottom: 16px; top: auto !important; width: auto; }
  .dvt-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dvt-hi, .dvt-pop, .dvt-arrow { transition: none !important; }
}