/* tour.css: the spotlight and Zeal's callout. Uses the site's tokens
   (static/styles.css) so it reads as part of the page, not a plugin. */
/* The dim is its own full-screen layer with a hole cut around the target
   (clip-path, evenodd donut). It used to be a box-shadow with a 200vmax spread,
   and the desktop app's browser silently stops painting a shadow spread that
   large: the page was never dimmed and the spotlight had no contrast. A capped
   spread would also leave an undimmed strip on a wide monitor. (2026-09-21) */
/* No transition on clip-path. The desktop app's browser leaves a clip-path
   transition unfinished and paints nothing, so the dim snaps into place and
   the gold ring below is what glides between steps. */
.tour-dim{position:fixed;inset:0;z-index:9989;pointer-events:none;background:rgba(24,18,10,.55)}
.tour-spot{position:fixed;z-index:9990;pointer-events:none;border-radius:12px;
  outline:2px solid var(--gold-bright,#B8912E);outline-offset:0;
  transition:top .32s cubic-bezier(.2,.8,.2,1),left .32s cubic-bezier(.2,.8,.2,1),
             width .32s cubic-bezier(.2,.8,.2,1),height .32s cubic-bezier(.2,.8,.2,1)}
.tour-box{position:fixed;z-index:9991;width:min(360px,calc(100vw - 24px));
  background:var(--card,#fff);color:var(--ink,#231E18);border:1px solid var(--line-2,#D6CDBB);
  border-top:3px solid var(--gold-bright,#B8912E);border-radius:14px;padding:16px 18px 14px;
  box-shadow:0 18px 50px rgba(24,18,10,.28);outline:none;
  animation:tour-in .28s cubic-bezier(.2,.8,.2,1)}
.tour-box:focus-visible{outline:2px solid var(--gold-bright,#B8912E);outline-offset:3px}
.tour-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.tour-head img{width:34px;height:34px;object-fit:cover;object-position:top;border-radius:50%;
  border:1px solid var(--line-2,#D6CDBB);background:var(--card-2,#FBF8F1)}
.tour-count{font-family:var(--mono,ui-monospace,monospace);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold,#8A6A17)}
.tour-box h3{margin:.1em 0 .35em;font-family:var(--serif,Georgia,serif);font-size:1.25rem;line-height:1.25;color:var(--ink,#231E18)}
.tour-text{margin:0;font-size:1rem;line-height:1.55;color:var(--ink-2,#4A433A)}
.tour-dots{display:flex;gap:6px;margin:14px 0 12px}
.tour-dots span{width:7px;height:7px;border-radius:50%;background:var(--line-2,#D6CDBB)}
.tour-dots span.done{background:var(--gold,#8A6A17);opacity:.45}
.tour-dots span.on{background:var(--gold-bright,#B8912E);transform:scale(1.35)}
.tour-acts{display:flex;justify-content:flex-end;gap:10px}
.tour-acts button,.tour-end{font:inherit;cursor:pointer}
.tour-back{background:transparent;border:1px solid var(--line-2,#D6CDBB);color:var(--ink-2,#4A433A);
  border-radius:999px;padding:9px 16px;min-height:44px}
.tour-next{background:var(--ink,#231E18);color:#fff;border:0;border-radius:999px;padding:9px 20px;min-height:44px;font-weight:600}
.tour-next:hover{background:var(--gold,#8A6A17)}
.tour-acts button:focus-visible,.tour-end:focus-visible{outline:2px solid var(--gold-bright,#B8912E);outline-offset:2px}
.tour-end{display:block;margin:10px 0 0 auto;background:none;border:0;padding:6px 0;
  font-size:.85rem;color:var(--ink-3,#6E665A);text-decoration:underline}
.tour-box.sheet{left:12px!important;right:12px;bottom:12px;top:auto!important;width:auto}
.tour-box.sheet.top{top:12px!important;bottom:auto}
.zeal.guiding .zeal-figure{animation:tour-nod 2.4s ease-in-out infinite}
@keyframes tour-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tour-nod{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){
  .tour-spot{transition:none}
  .tour-box{animation:none}
  .zeal.guiding .zeal-figure{animation:none}
}