/* onboarding-tour.css — W4-26 фирменная тема поверх driver.js v1.
   Перебивает косметику стокового driver.css под Hack & Fix: Manrope/Geist,
   teal-бренд, тональные поверхности, brand-tinted тени, авто-адаптация под
   light/dark через DaisyUI-переменные (--color-base-* / --color-brand-*).
   Грузится ПОСЛЕ driver.css. Селекторы рассчитаны на специфичность стоковых
   правил: базовая кнопка driver.css = `.driver-popover-footer button` (0,1,1),
   поэтому бренд-кнопки даём как `.driver-popover-footer .driver-popover-*-btn`
   (0,2,0), иначе фон #fff из стока победит. */

/* ── Карточка ────────────────────────────────────────────────── */
.driver-popover {
  background: var(--color-base-100);
  color: var(--color-base-content);
  border: 1px solid color-mix(in srgb, var(--color-brand-500) 26%, transparent);
  border-radius: var(--radius-xl, 16px); /* 16 — modal, дизайн-токен */
  box-shadow:
    0 20px 55px -14px color-mix(in srgb, var(--color-brand-700) 30%, transparent),
    0 6px 18px -10px color-mix(in srgb, var(--color-base-content) 28%, transparent);
  padding: 24px 22px 18px;
  /* width+max-width: сток driver.css ставит max-width:300px — поповер
     сжимался, футеру не хватало места под [Пропустить|Назад|Показать тур]
     на одной строке и «Показать тур» переносился на 2 строки. 380px вмещает
     ряд целиком (skip ~80px + Назад ~76px + Показать тур ~126px + гэпы). */
  width: min(380px, calc(100vw - 32px));
  max-width: min(380px, calc(100vw - 32px));
  font-family: var(--font-sans), system-ui, sans-serif;
  overflow: hidden;
}

/* верхняя полоса прогресса (инжектится из JS) */
.driver-popover .tour-progressbar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: color-mix(in srgb, var(--color-brand-500) 16%, transparent);
}
.driver-popover .tour-progressbar > span {
  display: block; height: 100%; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--color-brand-500), var(--color-brand-700));
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

/* eyebrow «ШАГ N ИЗ M» */
.driver-popover .driver-popover-progress-text {
  display: block;
  margin: 0 0 10px;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 48%, transparent);
}

/* заголовок — Manrope */
.driver-popover .driver-popover-title {
  font-family: var(--font-heading), var(--font-sans), sans-serif;
  font-size: 1.24rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.22;
  color: var(--color-base-content); margin: 12px 0 7px; padding-right: 28px;
}

/* описание — Geist */
.driver-popover .driver-popover-description {
  font-size: 0.95rem; line-height: 1.62;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}

/* подвал */
.driver-popover .driver-popover-footer { margin-top: 20px; gap: 8px; flex-wrap: wrap; row-gap: 8px; }

/* базовая кнопка (та же специфичность, что у стока — позже = победа).
   nowrap + flex-shrink:0 + min-height — все кнопки контрольного ряда одной
   высоты (40px), текст не переносится и не обрезается; all:unset снимал
   white-space, из-за чего «Показать тур» складывался в 2 строки при дефиците
   ширины. */
.driver-popover-footer button {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; flex-shrink: 0; max-width: 100%; min-height: 40px;
  font-family: var(--font-sans), sans-serif; font-size: 0.9rem; font-weight: 600; line-height: 1;
  padding: 9px 16px; border-radius: 9px; cursor: pointer; text-shadow: none;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.driver-popover-footer button:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 2px; }

/* контрольный ряд [Назад | Показать тур]: единый gap 8px вместо стокового
   margin-left:4px — ровные отступы, общая базовая линия (футер flex
   align-items:center из стока + min-height кнопок).
   P2-8 (j3): стоковый navigation-btns — flex БЕЗ wrap; длинный doneBtn
   «Начать первую лабу» + «Назад» на узких экранах шире поповера, и ряд
   обрезался overflow:hidden карточки. flex-wrap переносит ЦЕЛИКОМ кнопку
   на следующий ряд (текст внутри остаётся nowrap — контракт теста). */
.driver-popover .driver-popover-navigation-btns { gap: 8px; flex-wrap: wrap; }
.driver-popover .driver-popover-navigation-btns button + button { margin-left: 0; }

/* primary = Далее / Готово */
.driver-popover-footer .driver-popover-next-btn {
  background: var(--color-brand-600); color: #fff; border: 1px solid var(--color-brand-600);
}
.driver-popover-footer .driver-popover-next-btn:hover {
  background: var(--color-brand-500); border-color: var(--color-brand-500);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-brand-500) 42%, transparent);
}

/* ghost = Назад */
.driver-popover-footer .driver-popover-prev-btn {
  background: transparent;
  color: color-mix(in srgb, var(--color-base-content) 68%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-brand-500) 30%, transparent);
}
.driver-popover-footer .driver-popover-prev-btn:hover {
  background: color-mix(in srgb, var(--color-brand-500) 10%, transparent);
  color: var(--color-base-content);
}

/* skip = тихая текст-ссылка, прижата влево. Класс tour-skip-btn (BUG-038):
   без префикса driver-popover — document-capture click-перехватчик driver.js
   съедал клик (stopImmediatePropagation на className includes 'driver-popover')). */
.driver-popover-footer .tour-skip-btn {
  margin-right: auto; background: transparent; border: none; padding: 9px 2px; font-weight: 500;
  color: color-mix(in srgb, var(--color-base-content) 68%, transparent);
}
.driver-popover-footer .tour-skip-btn:hover {
  color: var(--color-brand-700); text-decoration: underline; text-underline-offset: 3px;
}

/* primary CTA «Начать первую лабу» — полноразмерный блок над рядом навигации.
   Живёт ВНЕ футера: стоковая кнопка driver.css (.driver-popover-footer button)
   сюда не дотягивается — стилизуем полностью; класс без «driver-popover»
   по той же причине capture-перехвата (BUG-038). */
.tour-primary-cta-row { margin-top: 16px; }
.tour-primary-cta-row .tour-primary-cta {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  width: 100%; white-space: nowrap; min-height: 40px;
  font-family: var(--font-sans), sans-serif; font-size: 0.95rem; font-weight: 600; line-height: 1;
  padding: 11px 16px; border-radius: 9px; cursor: pointer;
  background: var(--color-brand-600); color: #fff; border: 1px solid var(--color-brand-600);
  transition: background-color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.tour-primary-cta-row .tour-primary-cta:focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 2px; }
.tour-primary-cta-row .tour-primary-cta:hover {
  background: var(--color-brand-500); border-color: var(--color-brand-500);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-brand-500) 42%, transparent);
}

/* тост «Тур пропущен» (BUG-030-фидбек): лёгкий, брендовый, авто-скрытие */
.tour-skip-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1000000001;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  background: var(--color-base-100); color: var(--color-base-content);
  border: 1px solid color-mix(in srgb, var(--color-brand-500) 30%, transparent);
  box-shadow: 0 14px 40px -12px color-mix(in srgb, var(--color-brand-700) 35%, transparent);
  transition: opacity .25s ease, transform .25s ease;
}
.tour-skip-toast--visible { opacity: 1; transform: translate(-50%, 0); }

/* крестик: hit-area 32×32 (was 28×28 — мелкий и прижат к углу), grid
   центрирует глиф ×, line-height:1 не даёт ему съезжать по базовой линии.
   H-050: display обязан быть !important — driver.js (J()) ставит на кнопку
   INLINE style.display="block", обычное правило проигрывает inline и
   place-items:center не действовал (глиф × смещён по X на ~11px). */
.driver-popover .driver-popover-close-btn {
  all: unset; box-sizing: border-box; position: absolute; top: 12px; right: 12px;
  display: grid !important; place-items: center;
  width: 32px; height: 32px; font-size: 21px; line-height: 1; border-radius: 8px; cursor: pointer;
  color: color-mix(in srgb, var(--color-base-content) 38%, transparent);
  transition: color .18s, background-color .18s;
}
.driver-popover .driver-popover-close-btn:hover {
  color: var(--color-base-content);
  background: color-mix(in srgb, var(--color-base-content) 8%, transparent);
}

/* стрелка-«носик»: красим ТОЛЬКО видимую грань на сторону (как в стоке),
   через base-переменную — автоматически совпадает с фоном в light/dark. */
.driver-popover-arrow-side-left   { border-left-color:   var(--color-base-100); }
.driver-popover-arrow-side-right  { border-right-color:  var(--color-base-100); }
.driver-popover-arrow-side-top    { border-top-color:    var(--color-base-100); }
.driver-popover-arrow-side-bottom { border-bottom-color: var(--color-base-100); }

/* подсветка целевого элемента — мягкое скругление + пульсирующий brand-ring */
.driver-active-element {
  border-radius: var(--radius-lg, 14px);
  animation: tour-pulse-ring 2s ease-in-out infinite;
}
@keyframes tour-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-brand-500) 45%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-brand-500) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .driver-active-element { animation: none; }
}

/* Бейджи шагов «4 шага к мастерству» (views/how_it_works.templ) свисают за
   край карточки (absolute -top-6 -left-6). Сток driver.css вешает на прямого
   родителя подсвеченного элемента overflow:hidden!important — при подсветке
   карточки шага grid обрезал бейджи по своей границе («цифра съехала за
   границу blob'а»). Возвращаем видимый overflow: специфичность (0,3,0)
   побеждает стоковый :not(body):has(>) (0,1,1) при обоих !important. */
.app-steps-grid:has(> .app-step-card.driver-active-element) {
  overflow: visible !important;
}

/* dark: тень глубже + тонкий brand-ring; primary-текст темнее на teal */
[data-theme="securecode-dark"] .driver-popover {
  box-shadow:
    0 22px 60px -16px rgba(0, 0, 0, 0.62),
    0 0 0 1px color-mix(in srgb, var(--color-brand-500) 14%, transparent);
}
[data-theme="securecode-dark"] .driver-popover-footer .driver-popover-next-btn { color: #04201c; }

/* ── Mobile (<=480px): fit viewport, prevent footer overflow ── */
@media (max-width: 480px) {
  .driver-popover {
    max-width: calc(100vw - 24px);
    padding: 18px 16px 14px;
    border-radius: var(--radius-lg, 14px);
  }
  .driver-popover .driver-popover-title {
    font-size: 1.1rem;
    padding-right: 22px;
    margin-top: 10px;
  }
  .driver-popover .driver-popover-description {
    font-size: 0.9rem;
    line-height: 1.55;
  }
  .driver-popover .driver-popover-footer {
    margin-top: 16px;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .driver-popover-footer .tour-skip-btn {
    order: -1;
    flex-basis: 100%;
    text-align: left;
    margin-right: 0;
    padding: 4px 2px;
  }
  /* Q7 mobile: кнопки footer (skip + prev + Показать тур) упаковываем
     вертикальным стеком: skip полностью занимает первую строку
     (flex-basis: 100%, order:-1), остальные (next/prev) — full-width.
     Primary-CTA живёт выше футера отдельным блоком (.tour-primary-cta-row).
     На <=360px это исключает хаотичный wrap и overflow гэпов. */
  .driver-popover-footer .driver-popover-next-btn,
  .driver-popover-footer .driver-popover-prev-btn {
    flex: 1 1 100%;
    box-sizing: border-box;
  }
  .driver-popover-footer .driver-popover-next-btn { order: 1; }
  .driver-popover-footer .driver-popover-prev-btn { order: 2; }
  .driver-popover .driver-popover-close-btn {
    top: 10px;
    right: 10px;
  }
}

/* Inline secondary-ссылки внутри description шагов 2-4:
   позволяют юзеру нырнуть в конкретный ресурс (теория / демо-лаба / IDE)
   не проходя тур целиком линейно. */
.driver-popover .tour-inline-link {
	display: inline-block;
	margin-top: 8px;
	color: var(--color-brand-600);
	text-decoration: underline;
	font-weight: 600;
}
.driver-popover .tour-inline-link:hover,
.driver-popover .tour-inline-link:focus {
	color: var(--color-brand-500);
	outline: none;
}

/* Чекбокс «Не показывать снова» (инжектится JS на первом шаге) — Geist:
   стоковое правило driver.css «.driver-popover *» красит ВСЁ содержимое
   в Helvetica; без этого блока лейбл выпадал из Manrope/Geist-стиля карточки. */
.driver-popover .tour-dont-show-again {
  font-family: var(--font-sans), system-ui, sans-serif;
}

/* ── Celebration-финал тура (последний шаг) ────────────────────────
   j3-tour-05: у карточки не было подложки (классы не были определены),
   а оверлей тура перехватывал клики. Тур уничтожается ДО показа,
   поэтому celebration — обычный модальный слой поверх страницы;
   z-index выше driver-виджетов (popover 1000000000, skip-toast
   1000000001), фон — то же затемнение, что overlayColor тура. */
.tour-celebration-overlay {
  position: fixed; inset: 0; z-index: 1000000002;
  display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, #0f172a 58%, transparent);
  animation: tourCelebrationFade .25s ease-out;
}
@keyframes tourCelebrationFade { from { opacity: 0; } to { opacity: 1; } }
.tour-celebration-card {
  display: grid; justify-items: center; gap: 10px;
  width: 100%; max-width: 380px; padding: 28px 24px 24px;
  border-radius: 18px; text-align: center;
  background: var(--color-base-100);
  border: 1px solid color-mix(in srgb, var(--color-brand-500) 25%, transparent);
  box-shadow: 0 24px 64px -16px color-mix(in srgb, var(--color-brand-700) 45%, transparent);
}
.tour-celebration-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-brand-500) 14%, transparent);
  color: var(--color-brand-600);
  font-size: 28px; font-weight: 700; line-height: 1;
}
.tour-celebration-card h3 {
  margin: 0; font-family: var(--font-heading), sans-serif;
  font-size: 1.35rem; line-height: 1.2; color: var(--color-base-content);
}
.tour-celebration-xp {
  margin: 0; font-family: var(--font-mono), monospace; font-weight: 600;
  color: var(--color-brand-600);
}
.tour-celebration-sub {
  margin: 0; font-size: 0.9rem;
  color: color-mix(in srgb, var(--color-base-content) 65%, transparent);
}
.tour-celebration-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: 100%; margin-top: 6px;
}
.tour-celebration-primary {
  all: unset; box-sizing: border-box; display: inline-flex;
  align-items: center; justify-content: center;
  min-height: 40px; font-family: var(--font-sans), sans-serif;
  font-size: 0.95rem; font-weight: 600; line-height: 1;
  padding: 11px 16px; border-radius: 9px; cursor: pointer;
  background: var(--color-brand-600); color: #fff;
  border: 1px solid var(--color-brand-600);
  transition: background-color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.tour-celebration-primary:hover {
  background: var(--color-brand-500); border-color: var(--color-brand-500);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-brand-500) 42%, transparent);
}
.tour-celebration-primary:focus-visible {
  outline: 2px solid var(--color-brand-500); outline-offset: 2px;
}
.tour-celebration-ghost {
  all: unset; box-sizing: border-box; display: inline-flex;
  align-items: center; justify-content: center;
  min-height: 40px; font-family: var(--font-sans), sans-serif;
  font-size: 0.9rem; font-weight: 600; line-height: 1;
  padding: 11px 16px; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--color-base-content);
  border: 1px solid color-mix(in srgb, var(--color-brand-500) 30%, transparent);
  transition: background-color .18s, color .18s;
}
.tour-celebration-ghost:hover {
  background: color-mix(in srgb, var(--color-brand-500) 10%, transparent);
}
.tour-celebration-ghost:focus-visible {
  outline: 2px solid var(--color-brand-500); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .tour-celebration-overlay { animation: none; }
}

/* Overlay намеренно НЕ стилизуем здесь: цвет/прозрачность задаёт driver.js
   инлайн-стилями из конфига тура (overlayColor #0f172a, overlayOpacity .58
   в onboarding_tour.templ) — CSS-правило всё равно проиграет inline. */