/* ============================================================================
   Екскурсія інтерфейсом: затемнення з «вирізом», підказка біля цілі, пропозиція в куті.
   Розмітка — Components/OnboardingTour.razor, геометрія — js/tour.js; токени — з app.css.
   Шар вище за модальні вікна й картку колеги, нижче за прелоадер і панель помилки Blazor.
   ========================================================================= */

@layer components {
  .tour { position: fixed; inset: 0; z-index: 400; }

  .tour__block { position: fixed; inset: 0; background: transparent; }

  /* «Виріз» у затемненні: величезна тінь навколо прозорої рамки цілі. */
  .tour__spot {
    position: fixed;
    border-radius: var(--r-md);
    box-shadow:
      0 0 0 2px var(--accent),
      0 0 0 6px var(--accent-line),
      0 0 0 200vmax color-mix(in oklab, var(--n-950) 58%, transparent);
    pointer-events: none;
    transition: left var(--d-slow) var(--e-out), top var(--d-slow) var(--e-out),
                width var(--d-slow) var(--e-out), height var(--d-slow) var(--e-out),
                box-shadow var(--d-base) var(--e-out);
  }
  .tour__spot.is-empty {
    box-shadow: 0 0 0 200vmax color-mix(in oklab, var(--n-950) 62%, transparent);
  }

  .tour__pop {
    position: fixed; left: 50%; top: 50%;
    width: min(372px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 0 18px 14px;
    background: var(--surface-solid);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    transition: left var(--d-slow) var(--e-out), top var(--d-slow) var(--e-out), opacity var(--d-fast) var(--e-out);
    animation: tour-pop var(--d-base) var(--e-out);
  }
  /* Поки шукаємо ціль наступного кроку, підказку ховаємо — щоб текст не стояв біля чужого елемента. */
  .tour__pop.is-seeking { opacity: 0; pointer-events: none; }
  .tour__pop--center { width: min(440px, calc(100vw - 24px)); }
  .tour__pop--video { width: min(560px, calc(100vw - 24px)); }

  .tour__progress {
    position: sticky; top: 0;
    height: 3px; margin: 0 -18px;
    background: var(--bg-sunken);
    z-index: 1;
  }
  .tour__progress span {
    display: block; height: 100%;
    background: var(--accent);
    border-radius: 0 var(--r-full) var(--r-full) 0;
    transition: width var(--d-slow) var(--e-out);
  }

  .tour__head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 0 6px;
  }
  .tour__count {
    font-size: var(--t-xs); font-weight: 600;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .tour__x {
    display: grid; place-items: center;
    width: 28px; height: 28px; margin: 0 -6px 0 auto;
    border-radius: var(--r-full);
    color: var(--ink-3);
    transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
  }
  .tour__x:hover { background: var(--surface-hover); color: var(--ink); }

  .tour__video {
    margin: 4px 0 12px;
    border-radius: var(--r-md);
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
  }
  .tour__video video { display: block; width: 100%; height: 100%; object-fit: contain; }

  .tour__title {
    margin: 0 0 6px;
    font-size: var(--t-lg); font-weight: 650;
    letter-spacing: -.01em;
  }
  .tour__pop--center .tour__title { font-size: var(--t-xl); }
  .tour__text {
    margin: 0;
    font-size: var(--t-md); line-height: 1.6;
    color: var(--ink-2);
  }
  .tour__note {
    display: flex; align-items: center; gap: 7px;
    margin: 10px 0 0; padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--accent-soft); color: var(--accent);
    font-size: var(--t-sm); font-weight: 560;
  }

  .tour__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 14px;
  }

  /* Пропозиція пройти екскурсію */
  .tour-offer {
    position: fixed; right: 20px; bottom: 20px; z-index: 380;
    display: flex; align-items: flex-start; gap: 12px;
    width: min(360px, calc(100vw - 32px));
    padding: 14px 14px 14px 16px;
    background: var(--surface-solid);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    animation: tour-rise var(--d-slow) var(--e-out);
  }
  .tour-offer__icon {
    display: grid; place-items: center; flex: none;
    width: 38px; height: 38px;
    border-radius: var(--r-md);
    background: var(--accent-soft); color: var(--accent);
  }
  .tour-offer__body { flex: 1; min-width: 0; }
  .tour-offer__body b { display: block; font-size: var(--t-md); font-weight: 620; margin-bottom: 3px; }
  .tour-offer__body p { margin: 0 0 10px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
  .tour-offer__close { margin: -4px -4px 0 0; }

  /* Кнопка запуску у верхній панелі */
  .tour-btn.is-pulsing { box-shadow: var(--sh-glow); }

  @keyframes tour-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
  @keyframes tour-rise { from { opacity: 0; transform: translateY(14px); } }

  /* Телефон: підказка — нижня шторка, ціль прокручується у верхню половину екрана. */
  @media (max-width: 639.98px) {
    .tour__pop,
    .tour__pop--center,
    .tour__pop--video {
      left: 0 !important; right: 0; top: auto !important; bottom: 0;
      width: 100%;
      max-height: 46dvh;
      padding-bottom: calc(14px + env(safe-area-inset-bottom));
      border-radius: var(--r-lg) var(--r-lg) 0 0;
      border-bottom: 0;
      transition: none;
    }
    .tour__pop--video { max-height: 78dvh; }
    .tour-offer { left: 12px; right: 12px; bottom: 12px; width: auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    .tour__spot, .tour__pop, .tour__progress span { transition: none; }
    .tour__pop, .tour-offer { animation: none; }
  }
}