/* ============================================================
   Интерактивный тур по системе (55-tour.js)
   Затемнение + «прожектор» на реальном элементе + подсказка.
   Использует семантические токены темы (light/warm/dark).
   ============================================================ */

/* кнопка запуска в шапке */
.hdr-tour{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);
  cursor:pointer;transition:border-color .2s, color .2s, background .2s;flex-shrink:0;}
.hdr-tour:hover{border-color:var(--accent);color:var(--accent);}
.hdr-tour:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.hdr-tour svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* каркас тура */
.pbtour-catch{position:fixed;inset:0;z-index:9998;pointer-events:auto;background:transparent;}
.pbtour-spot{position:fixed;z-index:9998;border-radius:11px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(18,16,34,.58);
  outline:2px solid var(--accent);outline-offset:3px;
  transition:left .35s cubic-bezier(.2,.8,.2,1), top .35s cubic-bezier(.2,.8,.2,1),
             width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), opacity .2s;}
.pbtour-spot.center{outline:none;}

.pbtour-pop{position:fixed;z-index:9999;width:340px;max-width:calc(100vw - 32px);
  background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 26px 64px -26px rgba(18,16,34,.6);padding:16px 18px 14px;pointer-events:auto;
  transition:left .3s ease, top .3s ease, opacity .2s ease;}
.pbtour-pop h4{font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px;line-height:1.25;}
.pbtour-pop p{font-size:13px;line-height:1.5;color:var(--text-muted);margin:0 0 14px;}
.pbtour-foot{display:flex;align-items:center;gap:8px;}
.pbtour-step{font-family:var(--font-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;
  font-size:11px;color:var(--text-muted);margin-right:auto;letter-spacing:.04em;}
.pbtour-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);
  border-radius:9px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:border-color .2s, background .2s, color .2s;}
.pbtour-btn:hover{border-color:var(--accent);color:var(--accent);}
.pbtour-btn.prim{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff);}
.pbtour-btn.prim:hover{filter:brightness(1.05);color:var(--on-accent,#fff);}
.pbtour-skip{border:none;background:none;font-family:inherit;font-size:12px;color:var(--text-muted);
  cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:2px;}
.pbtour-skip:hover{color:var(--text);}
.pbtour-dots{display:flex;gap:5px;margin:0 auto 0 0;}

@media (max-width:640px){
  .pbtour-pop{width:calc(100vw - 24px);left:12px !important;}
  .hdr-tour{width:34px;height:34px;}
}
@media (prefers-reduced-motion:reduce){
  .pbtour-spot,.pbtour-pop{transition:opacity .15s ease;}
}