/* The site tour (js/core/tour.js): a dim layer with a cut-out around the real element, an arrow from the bubble to it,
   and the bubble. Tokens only (css/tokens.css). Positions come from the script through custom properties (--x --y
   --w --h --bx --by); they are screen coordinates (getBoundingClientRect), so left / top here are physical on purpose.
   Phone (<= 700 px): the bubble is docked at the bottom or the top. No motion under reduced motion. */
.tour { position: fixed; inset: 0; z-index: 1800; }
.tour [hidden] { display: none !important; }
.tour-shield { position: absolute; inset: 0; overflow: hidden; touch-action: none; }

/* The cut-out: its huge shadow is the dim layer; the outline is the ring around the element. It GLIDES (the script moves
   --x --y --w --h --r every frame); between pages it fades out where it is and the next one glides in. */
.tour-hole {
  position: absolute; left: 0; top: 0; /* dir-ok: screen coordinates */
  width: var(--w, 0); height: var(--h, 0); transform: translate(var(--x, 50vw), var(--y, 50vh));
  border-radius: var(--r, 18px); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .76);
  outline: 3px solid var(--ac); outline-offset: 2px; pointer-events: none;
}
.tour-hole[data-empty] { width: 0; height: 0; outline: none; transform: translate(50vw, 50vh); }
.tour-hole[data-gone] { opacity: 0; }
/* the plain dim layer that holds the screen dark while the cut-out is away */
.tour-shield::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .76); opacity: 0; }
.tour-shield[data-flat]::before { opacity: 1; }
.tour-hole::after { content: ''; position: absolute; inset: -7px; border-radius: inherit; border: 2px solid var(--ac); opacity: 0; }
html:not([data-motion="reduce"]) .tour-hole:not([data-empty])::after { animation: tour-ring 1.7s var(--ease) infinite; }
@keyframes tour-ring { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }

/* The arrow: a hand-drawn doodle in the logo's green, round strokes, a soft glow. The line draws in, the head last. */
.tour-arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tour-arrow.off { display: none; }
.tour-tail, .tour-head {
  fill: none; stroke: var(--logo-ac, var(--ac)); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--logo-ac, var(--ac)) 60%, transparent));
}
.tour-tail { stroke-dasharray: var(--len, 400); stroke-dashoffset: 0; }

/* Motion (all of it off with reduced motion: the system setting or html[data-motion="reduce"]) */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .tour { animation: tour-fade .2s ease-out both; }
  html:not([data-motion="reduce"]) .tour[data-leaving] { animation: tour-fade .2s ease-in reverse both; pointer-events: none; }
  html:not([data-motion="reduce"]) .tour-hole { transition: opacity .15s ease-out; }
  html:not([data-motion="reduce"]) .tour-shield::before { transition: opacity .15s ease-out; }
  html:not([data-motion="reduce"]) .tour-arrow[data-draw] .tour-tail { animation: tour-draw .45s ease-out both; }
  html:not([data-motion="reduce"]) .tour-arrow[data-draw] .tour-head { animation: tour-head .12s ease-out .4s both; }
  html:not([data-motion="reduce"]) .tour-bubble[data-pop] { animation: tour-pop .28s var(--ease) both; }
}
@keyframes tour-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tour-draw { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }
@keyframes tour-head { from { opacity: 0; } to { opacity: 1; } }
@keyframes tour-pop { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .tour-hole::after, .tour, .tour-tail, .tour-head, .tour-bubble { animation: none !important; } }

/* Waiting for the next page */
.tour-wait { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: var(--ac); }
.tour-wait .ph { font-size: 34px; }

/* The bubble */
.tour-bubble {
  position: absolute; left: var(--bx, 0); top: var(--by, 0); /* dir-ok: screen coordinates */
  width: min(360px, calc(100vw - 24px)); padding: 18px 20px; border-radius: var(--r-card);
  background: var(--card); color: var(--text); box-shadow: var(--float-shadow); outline: none;
  display: flex; flex-direction: column; gap: 12px;
}
.tour-bubble:focus-visible { box-shadow: var(--float-shadow), 0 0 0 2px var(--ac); }
.tour-head { display: flex; align-items: center; gap: 10px; }
.tour-ic {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--ac); color: var(--ink);
}
.tour-ic .ph { font-size: 19px; }
.tour-title { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-section); font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-count {
  flex: none; padding: 3px 10px; border-radius: var(--r-pill); background: var(--card-2); color: var(--muted);
  font-family: var(--font-num); font-size: var(--fs-small); line-height: 1.4; white-space: nowrap;
}
.tour-text { margin: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--soft); overflow-wrap: anywhere; }
.tour-hint { margin: 0; padding: 8px 12px; border-radius: var(--r-chip); background: var(--card-2); font-size: var(--fs-meta); line-height: 1.6; color: var(--muted); }
.tour-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tour-foot .spacer { flex: 1; }
.tour-skip { padding: 0 10px; margin-inline-start: -10px; }

@media (max-width: 700px) {
  .tour-bubble {
    left: auto; top: auto; /* dir-ok: docked, both sides below */
    inset-inline: 12px; width: auto; padding: 16px 18px;
  }
  .tour-bubble[data-dock="bottom"] { bottom: max(12px, env(safe-area-inset-bottom)); }
  .tour-bubble[data-dock="top"] { top: max(12px, env(safe-area-inset-top)); }
  .tour-text { font-size: var(--fs-ui); line-height: 1.6; }
}