/* ═══════════════════════════════════════════════════════════════════════════
   ТУР — підсвітка діркою, а не рамкою
   ═══════════════════════════════════════════════════════════════════════════

   Предмет, про який іде мова, лишається на місці й лишається справжнім. Ми
   не малюємо навколо нього обведення й не копіюємо його в накладку — ми
   гасимо все ІНШЕ. Так людина бачить рівно той елемент інтерфейсу, яким
   потім користуватиметься, а не його зображення.

   Технічно це один порожній прямокутник із тінню на 9999px: тінь заливає
   весь екран, а сам прямокутник лишається прозорим. Жодного SVG, жодної
   маски, один елемент. */

.tour-root{
  position: fixed; inset: 0; z-index: 900;
  /* Плівка ловить кліки — це і є спосіб вийти з туру, тицьнувши вбік. */
  pointer-events: auto;
}
.tour-root[hidden]{ display: none }

.tour-hole{
  position: absolute; border-radius: var(--radius-sm);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62);
  transition: left .28s var(--ease), top .28s var(--ease),
              width .28s var(--ease), height .28s var(--ease);
  /* 🛑 Дірка НЕ ловить кліки: під нею живий інтерфейс, і якщо людина
     тицьне в підсвічену кнопку, вона мусить спрацювати. Плівка навколо
     ловить, дірка — ні. */
  pointer-events: none;
}
/* Тепла кромка по краю дірки: без неї підсвічений предмет на темному тлі
   зливається з плівкою по контуру. */
.tour-hole::after{
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid var(--accent-glow); pointer-events: none;
}

.tour-bubble{
  position: absolute; width: 320px; box-sizing: border-box;
  padding: var(--sp-12) var(--sp-12) var(--sp-10);
  border-radius: var(--radius);
  background: var(--elevated, var(--panel));
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: var(--sp-4);
  transition: left .28s var(--ease), top .28s var(--ease);
}
/* Хвостик у бік предмета. Він не декоративний: без нього дві бульбашки
   поспіль читаються як два незалежні повідомлення, а не як указівка. */
.tour-bubble::before{
  content: ""; position: absolute; width: 10px; height: 10px;
  background: inherit; transform: rotate(45deg);
}
.tour-bubble[data-place="bottom"]::before{ top: -5px; left: 50%; margin-left: -5px }
.tour-bubble[data-place="top"]::before{ bottom: -5px; left: 50%; margin-left: -5px }
.tour-bubble[data-place="right"]::before{ left: -5px; top: 24px }
.tour-bubble[data-place="left"]::before{ right: -5px; top: 24px }

.tb-step{
  font: 600 var(--fs-10)/1 var(--mono); color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.tb-title{ font: 700 var(--fs-14)/1.3 var(--sans); color: var(--text) }
.tb-body{ font: 400 var(--fs-12)/1.5 var(--sans); color: var(--text-dim) }
.tb-act{
  display: flex; justify-content: flex-end; gap: var(--sp-6);
  margin-top: var(--sp-4);
}

/* ── ПРОПОЗИЦІЯ ПЕРШОГО ДНЯ ───────────────────────────────────────────────
   Картка в кутку, а не модалка. Модалка вимагає відповіді, перш ніж людина
   побачила хоч що-небудь, тобто питає «показати вам продукт?» у того, хто
   ще не знає, про що мова. Ця картка нічого не заступає, і «Пізніше»
   коштує один клік.

   🛑 Стоїть ПРАВОРУЧ унизу, а не ліворуч: ліворуч унизу вже живе «Старт»
   у підвалі рейки, і дві теплі картки в одному куті сперечались би. */
.tour-offer{
  position: fixed; right: 20px; bottom: 20px; z-index: 880;
  width: 320px; box-sizing: border-box;
  padding: var(--sp-12);
  border-radius: var(--radius);
  border: 1px solid var(--border-warm);
  background: var(--elevated, var(--panel));
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: var(--sp-4);
  animation: tourOfferIn .32s var(--ease) both;
}
@keyframes tourOfferIn{
  from{ transform: translateY(12px); opacity: 0 }
  to{ transform: none; opacity: 1 }
}
@media (prefers-reduced-motion: reduce){
  .tour-offer{ animation: none }
  .tour-hole, .tour-bubble{ transition: none }
}
.to-title{ font: 700 var(--fs-13)/1.3 var(--sans); color: var(--text) }
.to-body{ font: 400 var(--fs-12)/1.45 var(--sans); color: var(--text-mute) }
.to-act{ display: flex; justify-content: flex-end; gap: var(--sp-6); margin-top: var(--sp-4) }

/* Поки триває тур, банер згоди й інші кутові гості мовчать: два шари
   поверх одного екрана — це вже не пояснення, це затор. */
body.tour-on .consent-card,
body.tour-on .tour-offer{ display: none }

@media (max-width: 560px){
  /* На телефоні бульбашка стає смугою знизу: 320px збоку від предмета на
     375px екрана не існує в природі. */
  .tour-bubble{
    width: auto; left: 12px !important; right: 12px;
    top: auto !important; bottom: 16px;
  }
  .tour-bubble::before{ display: none }
  .tour-offer{ left: 12px; right: 12px; width: auto; bottom: 12px }
}

/* ── ПОВТОРНИЙ ЗАПУСК З «ІНФОРМАЦІЇ» ──────────────────────────────────────
   Рядок, а не картка: це не завдання й не новина, це кнопка, по яку
   приходять свідомо. Вигляд у неї тихий рівно тому, що шукати її буде
   лише той, хто вже знає, що вона є. */
.info-tour-again{
  margin-top: var(--sp-16); padding: var(--sp-10) var(--sp-12);
  border-radius: var(--radius); background: var(--fill-0);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-10); flex-wrap: wrap;
}
.ita-title{ font: 600 var(--fs-12)/1.3 var(--sans); color: var(--text) }
.ita-sub{ font: 400 var(--fs-11)/1.4 var(--sans); color: var(--text-mute) }

/* ── ПОШУК ПО ДОВІДЦІ ─────────────────────────────────────────────────────
   Поле в шапці розділу, а не окремою смугою: воно стосується всього, що
   нижче, і мусить стояти там, де людина вже дивиться. */
.info-search{
  display: flex; align-items: center; gap: var(--sp-6);
  margin-top: var(--sp-10); padding: 0 var(--sp-8);
  border-radius: var(--radius-sm); background: var(--well);
  max-width: 420px;
}
.isr-ic{ flex: none; width: 15px; height: 15px; opacity: .55; display: flex }
.isr-input{
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: 9px 0; color: var(--text);
  font: 400 var(--fs-13)/1 var(--sans);
}
.isr-input::placeholder{ color: var(--text-mute) }
/* 🛑 Прибираємо рідний хрестик `search`-поля: у Chrome він свій, у Safari
   інший, у Firefox його немає взагалі — тобто той самий екран виглядає
   по-різному в трьох браузерах без жодної на те причини. Очищення робить
   Esc, і про це сказано в коді обробника. */
.isr-input::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none }
.isr-kbd{
  flex: none; font: 500 var(--fs-10)/1 var(--mono); color: var(--text-mute);
  padding: 3px 5px; border-radius: var(--radius-xs); background: var(--fill-1);
}
@media (max-width: 560px){ .isr-kbd{ display: none } }

.info-noresult{
  margin-top: var(--sp-14); padding: var(--sp-14);
  border-radius: var(--radius); background: var(--fill-0);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.inr-title{ font: 600 var(--fs-13)/1.3 var(--sans); color: var(--text) }
.inr-body{ font: 400 var(--fs-12)/1.45 var(--sans); color: var(--text-mute) }

/* ── КОЛИ ЩОСЬ НЕ ПРАЦЮЄ ──────────────────────────────────────────────────
   Не акордеон: відповідь тут коротка й потрібна одразу, а зайвий клік
   між питанням і відповіддю коштує більше, ніж місце, яке він економить. */
.info-trouble{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-10) }
@media (max-width: 860px){ .info-trouble{ grid-template-columns: minmax(0,1fr) } }
.itr-item{
  padding: var(--sp-12); border-radius: var(--radius); background: var(--fill-1);
  display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start;
}
.itr-q{ font: 600 var(--fs-13)/1.3 var(--sans); color: var(--text) }
/* ~66 знаків у рядку — сесія 6 називає довідку єдиним місцем застосунку,
   де довгий текст доречний, і саме тому тут потрібна міра. */
.itr-a{ font: 400 var(--fs-12)/1.55 var(--sans); color: var(--text-dim); max-width: 62ch }
.itr-go{ margin-top: var(--sp-2) }