/* The app tour as a little trail: six stops joined by a dashed route, the
   travelled part inked in coral, Pawcasso walking at its tip. app-tours.js
   still owns the tabs, timing and media; this only redraws them. */
.tour-trail-wrap{position:relative;margin:0 0 30px;padding-top:40px}
.tour-trail-wrap>.demo-chapters{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--stops,6),minmax(0,1fr));gap:0;margin:0}
.tour-trail-art{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tour-trail-art polyline{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3}
.tour-trail-base{stroke:#d8c3cf;stroke-dasharray:2 8}
.tour-trail-done{stroke:var(--coral-dark);stroke-dasharray:9 7}

.tour-trail-wrap .demo-chapter{position:relative;min-height:44px;padding:26px 4px 4px;border:0;border-radius:12px;background:none;
  font-size:13px;font-weight:650;line-height:1.25;color:var(--muted);text-align:center;transition:color .25s}
.tour-trail-wrap .demo-chapter::before{content:"";position:absolute;top:0;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:var(--paper);border:2px solid #cbaab8;box-sizing:border-box;transition:background .25s,border-color .25s,box-shadow .35s,transform .25s cubic-bezier(.2,.9,.3,1.4)}
.tour-trail-wrap .demo-chapter[data-walked]::before{border-color:var(--coral-dark);background:#f3e0e8}
.tour-trail-wrap .demo-chapter[aria-selected=true]{color:#743348;background:none}
.tour-trail-wrap .demo-chapter[aria-selected=true]::before{border-color:var(--coral-dark);background:var(--coral-dark);box-shadow:0 0 0 6px #e9527826;transform:scale(1.12)}
@media(hover:hover) and (pointer:fine){
  .tour-trail-wrap .demo-chapter:hover{color:var(--coral-dark);background:none}
  .tour-trail-wrap .demo-chapter:hover::before{transform:scale(1.18)}}
.tour-trail-wrap .demo-chapter:focus-visible{outline:2px solid var(--coral-dark);outline-offset:3px}

/* Pawcasso stands on the tip of the inked line. */
.tour-trail-walker{position:absolute;left:0;top:0;z-index:2;width:40px;height:40px;margin:-38px 0 0 -20px;pointer-events:none;
  transform:translate(var(--tip-x,0px),var(--tip-y,0px))}
.tour-trail-walker.is-hopping{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.tour-trail-walker img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px #30223833)}
body[data-motion=on][data-hidden=false] .tour-trail-walker.is-walking img{animation:trail-trot .42s ease-in-out infinite alternate}
body[data-motion=on][data-hidden=false] .tour-trail-walker.is-hopping img{animation:trail-hop .7s cubic-bezier(.22,1,.36,1)}
@keyframes trail-trot{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-2px) rotate(5deg)}}
@keyframes trail-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-14px) rotate(-8deg)}}

/* The old progress bar is now the inked trail. */
.tour-trail-ready .demo-progress{display:none}
.tour-trail-ready .demo-caption h3{font-size:30px}

@media(max-width:767px){
  .tour-trail-wrap{grid-column:2;grid-row:2;align-self:center;margin:0;padding:0}
  .tour-trail-wrap>.demo-chapters{display:flex;flex-direction:column;gap:6px}
  .tour-trail-wrap .demo-chapter{padding:8px 2px 8px 24px;text-align:left;font-size:12px}
  .tour-trail-wrap .demo-chapter::before{top:50%;left:0;width:14px;height:14px;margin:-7px 0 0}
  .tour-trail-walker{width:24px;height:24px;margin:-12px 0 0 -12px}
}
@media(prefers-reduced-motion:reduce){.tour-trail-walker{transition:none!important}.tour-trail-walker img{animation:none!important}}
@media(forced-colors:active){.tour-trail-art,.tour-trail-walker{display:none}}

/* The global pause switch also stops the decorative movement between stops. */
body[data-motion=off] .tour-trail-walker,
body[data-motion=off] .tour-trail-wrap .demo-chapter,
body[data-motion=off] .tour-trail-wrap .demo-chapter::before { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tour-trail-wrap .demo-chapter,
  .tour-trail-wrap .demo-chapter::before { transition: none !important; }
}