/* server/public/css/tour.css — wyglad samouczka (guided tour) panelu admina.
   Zero CDN, zero inline <style>. Uzywa tokenow z admin2.css (--s-*, --tx-*, --brand, --r-*).
   Wektorowana kopia (nie import) tez do:
     - app/css/tour.css
     - public-site/assets/css/tour.css */

.tour-root { position: fixed; inset: 0; z-index: 9000; }
.tour-veil {
  position: fixed;
  background: rgba(6, 8, 10, .62);
  pointer-events: auto;
}
.tour-veil-top { top: 0; left: 0; right: 0; }
.tour-veil-bottom { left: 0; right: 0; bottom: 0; }
.tour-veil-left { position: fixed; }
.tour-veil-right { position: fixed; right: 0; }

.tour-ring {
  position: fixed;
  border-radius: var(--r-2, 12px);
  box-shadow: 0 0 0 3px var(--brand, #f5911e), 0 0 0 8px rgba(245, 145, 30, .22);
  pointer-events: none;
  transition: top .22s var(--ez, ease), left .22s var(--ez, ease), width .22s var(--ez, ease), height .22s var(--ez, ease);
}

.tour-card {
  position: fixed;
  width: min(360px, calc(100vw - 24px));
  background: var(--s-2, #151a20);
  color: var(--tx-1, #f4f1ea);
  border: 1px solid var(--line-2, #333d4a);
  border-radius: var(--r-3, 16px);
  box-shadow: var(--elev-3, 0 24px 70px rgba(0,0,0,.55));
  padding: 16px 18px 14px;
  z-index: 9001;
  transition: top .22s var(--ez, ease), left .22s var(--ez, ease);
}
.tour-card:focus { outline: none; }

.tour-card--sheet {
  position: fixed !important;
  left: 0 !important;
  right: 0;
  bottom: 0;
  top: auto !important;
  width: 100%;
  max-width: none;
  border-radius: 18px 18px 0 0;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.tour-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tour-step-count { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--tx-3, #8d95a1); text-transform: uppercase; }
.tour-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line-1, #242c36);
  background: transparent; color: var(--tx-2, #b9c1cc); cursor: pointer; padding: 0;
}
.tour-close:hover { background: var(--s-3, #1c222a); color: var(--tx-1, #f4f1ea); }

.tour-title { margin: 4px 0 6px; font-size: 16.5px; font-weight: 700; color: var(--tx-1, #f4f1ea); }
.tour-text { margin: 0 0 14px; font-size: 13.6px; line-height: 1.5; color: var(--tx-2, #b9c1cc); white-space: pre-line; }

.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tour-actions-nav { display: flex; gap: 8px; }

.tour-btn {
  appearance: none; border: none; cursor: pointer; font: inherit;
  padding: 8px 14px; border-radius: var(--r-1, 8px); font-size: 13.4px; font-weight: 600;
}
.tour-btn-ghost { background: var(--s-3, #1c222a); color: var(--tx-1, #f4f1ea); border: 1px solid var(--line-1, #242c36); }
.tour-btn-ghost:hover { border-color: var(--line-2, #333d4a); }
.tour-btn-primary { background: var(--brand, #f5911e); color: #14100b; }
.tour-btn-primary:hover { background: #ffa63c; }

/* menu pomocy w topbarze (przycisk "Przewodnik") */
.help-menu { position: relative; }
.help-menu summary { list-style: none; cursor: pointer; }
.help-menu summary::-webkit-details-marker { display: none; }
.help-list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--s-2, #151a20); border: 1px solid var(--line-1, #242c36); border-radius: var(--r-2, 12px); box-shadow: var(--elev-2, 0 6px 22px rgba(0,0,0,.36)); padding: 6px; z-index: 60; }
.help-list button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: none; color: var(--tx-1, #f4f1ea); padding: 8px 10px; border-radius: var(--r-1, 8px); cursor: pointer; font: inherit; font-size: 13.2px; }
.help-list button:hover { background: var(--s-3, #1c222a); }

@media (prefers-reduced-motion: reduce), (prefers-reduced-motion: reduce) {
  .tour-ring, .tour-card { transition: none !important; }
}
.tour-root.tour-no-motion .tour-ring,
.tour-root.tour-no-motion .tour-card { transition: none !important; }

@media (max-width: 640px) {
  .tour-card { width: 100%; }
}