/* Гайд по редактору /create: приглашение в углу, затемнение с вырезом вокруг
   одного элемента и карточка Коми рядом с ним.

   Слой гайда живёт на z-index 50: выше выпадающих списков (30) и тоста (40),
   ниже входа (60), вкладки поддержки (62), монет (70), панели поддержки (82),
   опроса (88) и лайтбокса (90). Так гайд накрывает работу, но никогда не
   спорит с окнами, которые важнее него.

   Вырез рисуется SVG-маской, а не подъёмом элемента через z-index: у
   .side-panel уже стоит position: relative; z-index: 18 (creator.css), панели
   создают контексты наложения, и «поднять цель наверх» на них не работает.
   Клики по вырезу проходят сами: у SVG pointer-events срабатывает только на
   закрашенной области, а дырка не закрашена. */

/* .tour-action объявлена как display: flex, а авторское правило перебивает
   браузерное [hidden] { display: none } — без этой строки шаг без действия
   показывал пустую плашку. */
.tour-root[hidden],
.tour-invite[hidden],
.tour-card[hidden],
.tour-action[hidden],
.tour-note[hidden] {
  display: none !important;
}

.tour-root {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.tour-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 220ms ease-out;
}

.tour-root.is-dimmed .tour-scrim {
  opacity: 1;
}

.tour-scrim path {
  fill: rgba(2, 7, 17, 0.72);
  pointer-events: auto;
}

/* Шаги без затемнения (ожидание генерации, готовая страница) ничего не
   перехватывают: прозрачная маска не должна съедать клики по холсту. */
.tour-root:not(.is-dimmed) .tour-scrim {
  pointer-events: none;
}

/* Рамка вокруг выреза: подсказывает, куда смотреть, и не ловит клики. */
.tour-ring {
  position: absolute;
  border: 2px solid rgba(86, 167, 255, 0.85);
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 4px rgba(24, 116, 217, 0.18),
    0 0 34px rgba(38, 118, 222, 0.4);
  transition:
    opacity 200ms ease-out,
    transform 220ms cubic-bezier(0.2, 0, 0, 1),
    width 220ms cubic-bezier(0.2, 0, 0, 1),
    height 220ms cubic-bezier(0.2, 0, 0, 1);
}

.tour-root.is-dimmed .tour-ring {
  opacity: 1;
}

/* ───────── Карточка Коми ───────── */

.tour-card,
.tour-invite {
  position: fixed;
  width: 348px;
  max-width: calc(100vw - 32px);
  border-radius: 18px;
  padding: 18px 20px 16px;
  color: #eaf2ff;
  pointer-events: auto;
  background:
    radial-gradient(circle at 88% -18%, rgba(63, 134, 199, 0.26), transparent 44%),
    linear-gradient(160deg, #13203a 0%, #0d1730 56%, #091022 100%);
  box-shadow:
    0 0 0 1px rgba(105, 168, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.55);
}

.tour-card {
  animation: tour-card-enter 260ms cubic-bezier(0.2, 0, 0, 1) both;
}

.tour-invite {
  right: 24px;
  bottom: 24px;
  z-index: 50;
  animation: tour-invite-enter 420ms cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes tour-card-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes tour-invite-enter {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* Хвостик к подсвеченному элементу. Сторона задаётся data-arrow. */
.tour-card::after {
  position: absolute;
  width: 14px;
  height: 14px;
  content: "";
  background: #101b32;
  box-shadow: 0 0 0 1px rgba(105, 168, 255, 0.34);
  rotate: 45deg;
}

.tour-card[data-arrow="left"]::after { top: 34px; left: -8px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.tour-card[data-arrow="right"]::after { top: 34px; right: -8px; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.tour-card[data-arrow="top"]::after { top: -8px; left: 40px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.tour-card[data-arrow="bottom"]::after { bottom: -8px; left: 40px; clip-path: polygon(100% 100%, 0 100%, 100% 0); }
.tour-card[data-arrow="none"]::after { display: none; }

.tour-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.tour-mascot {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(4, 12, 28, 0.5));
}

.tour-invite .tour-mascot {
  width: 72px;
  height: 72px;
  flex-basis: 72px;
}

.tour-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.tour-body {
  margin: 0;
  color: #c5d6ef;
  font-size: 13.5px;
  line-height: 1.5;
}

.tour-body p { margin: 0 0 8px; }
.tour-body p:last-child { margin-bottom: 0; }
.tour-body b,
.tour-body strong { color: #eaf2ff; font-weight: 650; }

.tour-body ul {
  margin: 0 0 8px;
  padding-left: 0;
  list-style: none;
}

.tour-body li {
  margin-bottom: 4px;
  padding-left: 14px;
  text-indent: -14px;
}

/* Строка «что сделать». Единственный акцент в карточке: шаг ждёт именно этого
   действия, и в общем потоке текста оно терялось. Значок — не декор, а вторая
   после цвета примета, чтобы строка читалась и без различения оттенков. */
.tour-action {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  border-left: 3px solid var(--cyan, #56a7ff);
  border-radius: 4px 10px 10px 4px;
  padding: 9px 12px;
  color: #eaf2ff;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.4;
  background: rgba(24, 116, 217, 0.18);
}

.tour-action::before {
  flex: 0 0 auto;
  color: var(--cyan, #56a7ff);
  content: "→";
  font-weight: 700;
}

.tour-note {
  margin: 10px 0 0;
  color: #8fa4c2;
  font-size: 12px;
  line-height: 1.45;
}

/* ───────── Низ карточки ───────── */

.tour-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.tour-progress {
  margin-right: auto;
  color: #7f93b2;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Ярусы кнопок — как в редакторе (DESIGN.md): синяя заливка двигает работу
   вперёд, тихая кнопка — второстепенное действие. Градиент здесь не
   используется: он закреплён за генерацией. */
.tour-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border: 1px solid rgba(78, 141, 255, 0.44);
  border-radius: 12px;
  padding: 0 14px;
  color: #eaf2ff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  background: rgba(24, 116, 217, 0.24);
  cursor: pointer;
  transition:
    transform 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.tour-button:hover:not(:disabled) {
  border-color: rgba(120, 178, 255, 0.66);
  background: rgba(24, 116, 217, 0.36);
  transform: translateY(-1px);
}

.tour-button:active:not(:disabled) { transform: scale(0.97); }
.tour-button:focus-visible { outline: 2px solid var(--cyan, #56a7ff); outline-offset: 3px; }

.tour-button:disabled {
  color: #7f93b2;
  border-color: rgba(93, 135, 210, 0.24);
  background: rgba(255, 255, 255, 0.03);
  cursor: default;
}

.tour-button.is-quiet {
  color: #a8b5cb;
  border-color: rgba(93, 135, 210, 0.3);
  background: transparent;
}

.tour-button.is-quiet:hover {
  color: #eaf2ff;
  border-color: rgba(93, 135, 210, 0.5);
  background: rgba(255, 255, 255, 0.04);
}

.tour-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  padding: 0;
  color: rgba(200, 218, 245, 0.6);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}

.tour-close:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }
.tour-close:focus-visible { outline: 2px solid var(--cyan, #56a7ff); outline-offset: 2px; }
.tour-close svg { width: 15px; height: 15px; fill: currentColor; }

.tour-card .tour-title { padding-right: 26px; }

/* ───────── Светлая тема ───────── */

html[data-theme="light"] .tour-scrim path { fill: rgba(24, 32, 48, 0.5); }

html[data-theme="light"] .tour-card,
html[data-theme="light"] .tour-invite {
  color: var(--ink, #222326);
  background: var(--sheet, #fffdfc);
  box-shadow:
    0 0 0 1px rgba(34, 35, 38, 0.1),
    0 24px 60px rgba(67, 52, 44, 0.22);
}

html[data-theme="light"] .tour-card::after {
  background: var(--sheet, #fffdfc);
  box-shadow: 0 0 0 1px rgba(34, 35, 38, 0.1);
}

html[data-theme="light"] .tour-body { color: #55504b; }
html[data-theme="light"] .tour-body b,
html[data-theme="light"] .tour-body strong { color: var(--ink, #222326); }
html[data-theme="light"] .tour-note,
html[data-theme="light"] .tour-progress { color: #8b857f; }
html[data-theme="light"] .tour-action {
  color: var(--ink, #222326);
  border-left-color: var(--blue, #1874d9);
  background: rgba(24, 116, 217, 0.1);
}
html[data-theme="light"] .tour-action::before { color: var(--blue-strong, #0d5fc7); }
html[data-theme="light"] .tour-button { color: var(--blue-strong, #0d5fc7); background: rgba(24, 116, 217, 0.1); }
html[data-theme="light"] .tour-button:hover:not(:disabled) { background: rgba(24, 116, 217, 0.18); }
html[data-theme="light"] .tour-button:disabled { color: #a09a94; background: rgba(34, 35, 38, 0.04); }
html[data-theme="light"] .tour-button.is-quiet { color: #68635f; background: transparent; }
html[data-theme="light"] .tour-close { color: #8b857f; background: rgba(34, 35, 38, 0.05); }
html[data-theme="light"] .tour-close:hover { color: #222326; background: rgba(34, 35, 38, 0.1); }

/* Тост живёт в том же правом нижнем углу: пока там висит приглашение, он
   поднимается над ним, а не ложится сверху. */
body.tour-corner-invite .toast { bottom: 300px; }

/* ───────── Уважение к настройкам движения ───────── */

@media (prefers-reduced-motion: reduce) {
  .tour-card,
  .tour-invite {
    animation: none;
  }

  .tour-ring,
  .tour-scrim {
    transition: none;
  }
}

/* ───────── Телефон: гайда нет ───────── */

/* Версия 1 — только десктоп (тот же порог, что DESKTOP_QUERY в
   scripts/creator-tour.js). На телефоне пункт меню убираем стилями, а не
   скриптом: даже если creator-tour.js не загрузился, обещания гайда на
   странице не остаётся. */

@media not all and (min-width: 1024px), (hover: none), (pointer: coarse) {
  .popover-row[data-tour-restart] {
    display: none;
  }
}