/* EAI City — the guided tour «Как пользоваться» (tour-) and first-time hints (tip-). Owner: shell.
   A short film about the city: the camera flies, a bright card tells what each place is for. A side card on desktops, a
   bottom sheet on phones (.is-sheet); the stop's colour comes from its building (--bc… from EAI.ui.tone). The HUD fades out
   for the flight (html.tour-cine) and comes back with spotlights for the last two stops (.is-hud). */

/* ---------------------------------------------------------------- the layer */
/* toasts stay under the tour (dimmed) so they never cover its buttons */
html.tour-open .toasts { z-index: 90; }
/* the flight: the city alone, the HUD steps aside */
html.tour-cine .hud { opacity: 0 !important; visibility: hidden !important; }
.tour { position: fixed; inset: 0; z-index: 95; pointer-events: auto; -webkit-tap-highlight-color: transparent; animation: fadeIn 0.3s ease; }
.tour.out { opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
/* a soft vignette keeps the eye on the middle; on the side card a little more shade on the card's side */
.tour-vig { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.4s ease, background-color 0.4s ease;
  background: radial-gradient(120% 90% at 62% 46%, rgba(8, 12, 18, 0) 55%, rgba(8, 12, 18, 0.34) 100%); }
.tour.is-side .tour-vig { background: radial-gradient(110% 90% at 66% 46%, rgba(8, 12, 18, 0) 50%, rgba(8, 12, 18, 0.3) 100%), linear-gradient(90deg, rgba(8, 12, 18, 0.22), rgba(8, 12, 18, 0) 38%); }
.tour.is-sheet .tour-vig { background: linear-gradient(180deg, rgba(8, 12, 18, 0.18), rgba(8, 12, 18, 0) 22%, rgba(8, 12, 18, 0) 55%, rgba(8, 12, 18, 0.3)); }
.tour.has-spot .tour-vig { opacity: 0; }
/* no 3D city (WebGL off, still loading): the cards over a calm backdrop */
.tour.is-nocity .tour-vig { opacity: 0.94; background: radial-gradient(90% 70% at 50% 35%, var(--primary), var(--primary-d)); }
/* the spotlight: a dim with holes (SVG mask) and a gold ring around every widget */
.tour-dim { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
.tour-dim svg { display: block; width: 100%; height: 100%; }
.tour-dim svg > rect { fill: var(--ink); fill-opacity: 0.58; }
.tour.has-spot .tour-dim { opacity: 1; }
.tour-rings { position: absolute; inset: 0; pointer-events: none; }
.tour-ring { position: fixed; pointer-events: none; box-shadow: 0 0 0 3px var(--gold), 0 0 0 8px rgba(201, 163, 90, 0.28), 0 0 30px rgba(232, 200, 140, 0.55); animation: tourRing 2s ease-in-out infinite; }
.tour-ring.is-click { pointer-events: auto; cursor: pointer; }
@keyframes tourRing { 50% { box-shadow: 0 0 0 3px #e8cf98, 0 0 0 13px rgba(201, 163, 90, 0.14), 0 0 40px rgba(232, 200, 140, 0.7); } }

/* ---------------------------------------------------------------- the subject's label in the city: a gold ring that pings */
.ecity-label.tour-spot { z-index: 999 !important; }
/* a young resident's tour does not show the business quarter */
html.tour-kid .ecity-label[data-id="business"] { visibility: hidden !important; }
.ecity-label.tour-spot .ecity-label__pill { transform: scale(1.16); background: #fff; box-shadow: 0 0 0 2.5px var(--gold), 0 0 0 7px rgba(201, 163, 90, 0.3), 0 12px 28px rgba(20, 22, 28, 0.32); }
.ecity-label.tour-spot .ecity-label__pill::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid rgba(232, 200, 140, 0.95); pointer-events: none; animation: tourPing 1.9s ease-out infinite; }
@keyframes tourPing { 0% { transform: scale(0.94); opacity: 0.95; } 100% { transform: scale(1.4, 1.75); opacity: 0; } }

/* ---------------------------------------------------------------- the card */
.tour-card { --bc: var(--primary); --bc-d: var(--primary-d); --bc-l: var(--primary-l); --bc-ll: var(--primary-ll); --bc-m: var(--primary-m); --bc-ink: var(--primary); --bc-raw: var(--primary);
  position: fixed; z-index: 3; display: flex; flex-direction: column; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: hidden;
  border-radius: 26px; background: var(--panel); color: var(--ink); outline: none;
  box-shadow: 0 2px 6px rgba(10, 14, 20, 0.12), 0 18px 40px rgba(10, 14, 20, 0.22), 0 40px 100px rgba(10, 14, 20, 0.3);
  transition: top 0.38s var(--ease), bottom 0.38s var(--ease); }
.tour-card:not(.is-in) { opacity: 0; }
.tour-card.is-in { animation: tourCardIn 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.12) both; }
@keyframes tourCardIn { from { opacity: 0; transform: translateX(-28px) scale(0.96); } to { opacity: 1; transform: none; } }
/* a wash of the stop's colour behind the top of the card */
.tour-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 150px; pointer-events: none; transition: background 0.5s ease;
  background: radial-gradient(120% 100% at 0% 0%, var(--bc-l), transparent 70%), linear-gradient(180deg, var(--bc-ll), rgba(255, 255, 255, 0)); }
.tour-card > * { position: relative; }
.tour .tour-card.is-in.nudge { animation: tourNudge 0.42s ease; }
@keyframes tourNudge { 30% { transform: translateY(-6px); } 60% { transform: translateY(2px); } }

.tour-top { flex: none; display: flex; align-items: center; gap: 6px; padding: 12px 10px 0 20px; min-height: 52px; }
.tour-prog { flex: 1 1 auto; display: flex; gap: 4px; min-width: 0; margin-right: 4px; }
.tour-prog i { flex: 1 1 0; height: 5px; border-radius: 3px; background: rgba(23, 32, 43, 0.1); overflow: hidden; }
.tour-prog b { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--bc); transform: scaleX(0); transform-origin: 0 50%; }
.tour-prog i.on b { transition: transform 0.12s linear; }
.tour-prog i.done b { transform: none; background: var(--bc-m); }
.tour.is-paused .tour-prog i.on b { opacity: 0.55; }
.tour-ibtn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink2); cursor: pointer; }
.tour-ibtn:hover { background: rgba(23, 32, 43, 0.06); color: var(--ink); }
.tour-ibtn .ico { width: 18px; height: 18px; }
.tour-pause[aria-pressed="true"] { background: var(--bc-l); color: var(--bc-ink); }
.tour-skip { flex: none; min-height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--ink2); font: 700 0.95rem var(--font); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(74, 84, 98, 0.4); cursor: pointer; }
.tour-skip:hover { color: var(--ink); background: rgba(23, 32, 43, 0.05); }
.tour-ibtn[hidden], .tour-skip[hidden] { display: none; }

/* only the middle scrolls (long text in a big font): the progress and the buttons always stay in view */
.tour-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 24px 4px; scrollbar-width: thin; }
.tour-stage.is-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.tour-body { display: flex; flex-direction: column; }
.tour-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tour-med { position: relative; flex: none; width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--bc-raw), var(--bc-d)); box-shadow: 0 10px 24px -6px var(--bc-raw), inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.tour-med > .ico { width: 34px; height: 34px; }
.tour-med__spark { position: absolute; right: -5px; top: -5px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #fff3d2 0 30%, var(--gold) 31% 100%); box-shadow: 0 0 0 3px var(--panel), 0 0 14px rgba(232, 200, 140, 0.9); }
.tour-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tour-kicker { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bc-ink); }
.tour-title { margin: 0; font: 700 1.85rem/1.14 var(--display); color: var(--ink); outline: none; text-wrap: balance; }
.tour-text { margin-top: 10px; font-size: 1.1rem; line-height: 1.55; color: var(--ink2); }
.tour-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 20px 18px; }
.tour-foot .btn { min-height: 54px; }
.tour-back { flex: none; }
.tour-back[disabled] { visibility: hidden; }
.tour-next { flex: 1 1 auto; --c: var(--bc-d); --cd: var(--bc-dd, var(--primary-d)); font-size: 1.08rem; }
.tour-next.is-ask { --c: var(--primary); --cd: var(--primary-d); }
.tour-card :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tour-card .tour-title:focus-visible { outline: none; }

/* the content comes in: the icon pops, the words follow, the pieces one by one */
.tour-body > * { animation: tourUp 0.5s var(--ease) both; }
.tour-body > :nth-child(2) { animation-delay: 0.07s; }
.tour-body > :nth-child(3) { animation-delay: 0.13s; }
.tour-body > :nth-child(4) { animation-delay: 0.18s; }
.tour-body.from-right > * { animation-name: tourFromRight; }
.tour-body.from-left > * { animation-name: tourFromLeft; }
.tour-med { animation: tourPop 0.62s cubic-bezier(0.2, 0.9, 0.3, 1.35) both; }
.tour-art > * { animation: tourUp 0.45s var(--ease) both; animation-delay: calc(0.2s + var(--i, 0) * 0.045s); }
@keyframes tourUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tourFromRight { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes tourFromLeft { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes tourPop { 0% { opacity: 0; transform: scale(0.4) rotate(-14deg); } 70% { opacity: 1; transform: scale(1.08) rotate(3deg); } 100% { transform: none; } }

/* ---------------------------------------------------------------- what is on the cards */
.tour-art { margin: 16px 0 6px; }
/* every helper of the city, in its colour */
.tour-all { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; max-width: 360px; }
.tour-all .isq { width: 100%; height: auto; aspect-ratio: 1; border-radius: 11px; box-shadow: 0 1px 2px rgba(23, 32, 43, 0.08); }
.tour-all .isq .ico { width: 54%; height: 54%; }
/* chips: the ways to ask, subjects, games, office desks, prices */
.tour-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tour-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 13px 7px 10px; border-radius: 999px; background: var(--bc-ll); border: 1px solid var(--bc-l); color: var(--ink); font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.tour-chip > .ico { width: 18px; height: 18px; color: var(--bc-ink); }
.tour-chip b { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; padding: 2px 8px; border-radius: 999px; background: var(--panel); color: var(--gold-t); font-weight: 800; }
.tour-chip__z.ico { width: 13px; height: 13px; color: var(--gold-d); }
/* the edges: the place the camera is at lights up */
.tour-places { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tour-places > li { animation: tourUp 0.45s var(--ease) both; animation-delay: calc(0.2s + var(--i, 0) * 0.05s); }
.tour-edges__now { display: none; }
.tour-place { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px 6px 6px; border: 1px solid transparent; border-radius: 16px; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease), box-shadow 0.3s ease; }
.tour-place:hover { background: var(--panel2); }
.tour-place__ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bc-l); color: var(--bc-ink); transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease); }
.tour-place__ic .ico { width: 20px; height: 20px; }
.tour-place__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tour-place__t b { font-weight: 800; font-size: 1.02rem; }
.tour-place__t span { color: var(--ink2); font-weight: 600; font-size: 0.95rem; }
.tour-place.on { background: var(--bc-ll); border-color: var(--bc-m); box-shadow: 0 6px 18px -8px var(--bc-raw); transform: translateX(4px); }
.tour-place.on .tour-place__ic { background: linear-gradient(140deg, var(--bc-raw), var(--bc-d)); color: #fff; transform: scale(1.06); }
.tour-place.seen .tour-place__ic { opacity: 0.7; }
/* the finale: suggested questions (from the resident's interests) */
.tour-ask { display: flex; flex-direction: column; gap: 10px; }
.tour-sugs { display: flex; flex-direction: column; gap: 8px; }
.tour-sug.chip { justify-content: flex-start; width: 100%; min-height: 52px; padding: 7px 14px 7px 7px; border-radius: 16px; text-align: left; font-size: 1rem; font-weight: 700; white-space: normal; border-color: var(--line2); box-shadow: 0 1px 2px rgba(23, 32, 43, 0.05); }
.tour-sug.chip:hover { border-color: var(--primary-m); background: var(--primary-ll); }
.tour-sug > span:not(.ico):not(.isq) { flex: 1 1 auto; min-width: 0; }
.tour-sug .isq { width: 36px; height: 36px; border-radius: 10px; }
.tour-sug__go.ico { width: 18px; height: 18px; color: var(--primary); }
.tour-note { display: flex; align-items: flex-start; gap: 8px; color: var(--ink3); font-size: 0.92rem; font-weight: 600; line-height: 1.4; }
.tour-note .ico { width: 17px; height: 17px; margin-top: 1px; }
/* sparks around the icon on the last card */
.tour-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.tour-burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; background: var(--c); opacity: 0; animation: tourBurst 0.95s cubic-bezier(0.15, 0.7, 0.3, 1) var(--t) forwards; }
.tour-burst i:nth-child(3n) { border-radius: 50%; width: 7px; height: 7px; }
@keyframes tourBurst {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(0.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(120deg) scale(1); }
}

/* ---------------------------------------------------------------- the side card (desktop) */
.tour.is-side .tour-card { left: 28px; top: 12px; }
html.big .tour.is-side .tour-card { width: min(470px, calc(100vw - 32px)); }
.tour.is-nocity.is-side .tour-card { width: min(500px, calc(100vw - 32px)); }

/* ---------------------------------------------------------------- the bottom sheet (phones, portrait tablets) */
.tour.is-sheet .tour-card { left: 10px; right: 10px; top: auto !important; bottom: calc(var(--lift, 10px) + env(safe-area-inset-bottom, 0px)); width: auto; max-width: 560px; margin: 0 auto;
  max-height: 54vh; max-height: 54dvh; border-radius: 24px; }
.tour.is-sheet .tour-card.is-in:not(.nudge) { animation-name: tourSheetIn; }
@keyframes tourSheetIn { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
.tour.is-sheet.is-hud .tour-card { max-height: 62vh; max-height: 62dvh; }
.tour.is-sheet .tour-top { padding: 8px 6px 0 18px; min-height: 48px; }
.tour.is-sheet .tour-stage { padding: 4px 18px 2px; }
.tour.is-sheet .tour-hero { flex-direction: row; align-items: center; gap: 12px; }
.tour.is-sheet .tour-med { width: 52px; height: 52px; border-radius: 16px; }
.tour.is-sheet .tour-med > .ico { width: 26px; height: 26px; }
.tour.is-sheet .tour-med__spark { width: 14px; height: 14px; right: -4px; top: -4px; }
.tour.is-sheet .tour-kicker { font-size: 0.78rem; }
.tour.is-sheet .tour-title { font-size: 1.36rem; }
.tour.is-sheet .tour-text { margin-top: 8px; font-size: 1.04rem; line-height: 1.5; }
.tour.is-sheet .tour-art { margin: 12px 0 4px; }
.tour.is-sheet .tour-foot { padding: 10px 14px 14px; gap: 8px; }
.tour.is-sheet .tour-back { width: 54px; padding: 0; }
.tour.is-sheet .tour-back__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tour.is-sheet .tour-all { grid-template-columns: repeat(8, 1fr); gap: 5px; max-width: none; }
.tour.is-sheet .tour-all .isq { border-radius: 9px; }
/* the edges on a phone: a row of icons (the camera's place lit) and its name with what it is for under the row */
.tour.is-sheet .tour-places { flex-direction: row; gap: 8px; }
.tour.is-sheet .tour-place { width: auto; min-height: 48px; padding: 3px; border-radius: 15px; }
.tour.is-sheet .tour-place__ic { width: 42px; height: 42px; border-radius: 12px; }
.tour.is-sheet .tour-place__t { display: none; }
.tour.is-sheet .tour-place.on { transform: translateY(-2px); }
.tour.is-sheet .tour-edges__now { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 10px; min-height: 1.5em; font-size: 1.04rem; line-height: 1.35; color: var(--ink2); font-weight: 600; }
.tour.is-sheet .tour-edges__now b { color: var(--bc-ink); font-weight: 800; font-size: 1.1rem; }
.tour.is-sheet .tour-edges__now.is-new { animation: tourFromRight 0.4s var(--ease) both; }
.tour.is-sheet .tour-chip { min-height: 36px; padding: 5px 11px 5px 8px; font-size: 0.92rem; }
/* short phones: the words first; the decorative row of helpers steps aside; the sheet may be a little taller */
@media (max-height: 760px) {
  .tour.is-sheet .tour-card { max-height: 58vh; max-height: 58dvh; }
  .tour.is-sheet .tour-all { display: none; }
  .tour.is-sheet .tour-title { font-size: 1.24rem; }
  .tour.is-sheet .tour-text { font-size: 1rem; }
  .tour.is-sheet .tour-place__t span { font-size: 0.9rem; }
}
@media (max-height: 680px) {
  .tour.is-sheet .tour-chips { display: none; }
  .tour.is-sheet[data-step="edges"] .tour-text { display: none; } /* the row of places and the line under it say it all */
  .tour.is-sheet .tour-med { width: 44px; height: 44px; border-radius: 14px; }
  .tour.is-sheet .tour-med > .ico { width: 22px; height: 22px; }
  .tour.is-sheet .tour-note { display: none; }
}
html.big .tour.is-sheet .tour-card { max-height: 60vh; max-height: 60dvh; }
html.big .tour.is-sheet.is-hud .tour-card { max-height: 68vh; max-height: 68dvh; }

/* ---------------------------------------------------------------- calm version (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  .tour-ring, .ecity-label.tour-spot .ecity-label__pill::after, .tour-burst { animation: none !important; }
  .ecity-label.tour-spot .ecity-label__pill::after { display: none; }
  .tour-card, .tour-place, .tour-place__ic { transition: none; }
}

/* ---------------------------------------------------------------- first-time hints */
.tip { position: fixed; z-index: 70; left: 0; top: 0; width: min(340px, calc(100vw - 24px)); --ax: 50%; opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s var(--ease); }
.tip.in { opacity: 1; transform: none; }
.tip.out, .tip.is-away { opacity: 0; pointer-events: none; }
.tip-in { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 12px; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(10, 14, 20, 0.3); }
.tip-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(227, 200, 142, 0.18); color: #e8cf98; }
.tip-ic .ico { width: 16px; height: 16px; }
.tip-t { flex: 1 1 calc(100% - 44px); min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 1rem; line-height: 1.4; }
.tip-t b { font-weight: 700; color: #fff; }
.tip-t span { color: rgba(255, 255, 255, 0.88); }
.tip-ok.btn.sm { flex: none; margin-left: auto; --c: #fff; --cd: #f1ece4; --tc: var(--ink); }
.tip-arrow { position: absolute; left: calc(var(--ax) - 8px); width: 16px; height: 16px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.tip[data-side="below"] .tip-arrow { top: -7px; }
.tip[data-side="above"] .tip-arrow { bottom: -7px; }