/* Piku Print Club, the site. The state chip under each step's title: "Playing", "Paused", "Replay" (made by js/core.js, "== auto chip ==", one per step band).
   LOOK ONLY. Where the chip sits (its grid cell, its margins, its alignment on a wide screen and on a small one) is css/tour.css's business, so nothing here
   places it. Loaded LAST (after tour.css, see partials/head.html), so keep every rule at one class of specificity above the others or lower.

   The chip is a soft filled pill in the same family as the step's tab chips (a quiet ink tint, no white ring, no hard shadow) with a drawing in a tiny flat circle: moving
   bars and "Playing" while the demo runs, pause bars and "Paused" once the visitor has taken over, a replay arrow and "Replay" when it has run to the end. The circle is the
   band's contrast colour and the drawing is cut out of it in the band's own colour.
   A mouse hover or a keyboard focus swaps in what a press will DO (pause bars and "Pause" while playing, a play triangle and "Play" while paused); a touch screen has no
   hover, so it only ever shows the state. Both drawings share the circle and both words share the pill (one grid cell each), so the chip never changes width on hover.
   Markup:  button.auto-chip[data-auto][data-view=playing|paused|done|ready] > span.auto-ic > (span.ai-s, span.ai-a) > svg  +  span.auto-tx > (span.at-s, span.at-a)
   Contrast (measured, the text is bold): the words are at least 4.5:1 on every band (paper on a navy tint on blue; the deeper --on-teal ink on pink, mint and teal).
   Tap target: the chip itself is about 38px tall at desktop type, so a pseudo element grows the touch area to at least 44px without changing how it looks. Focus: the one
   global ring (css/base.css :focus-visible, inverted on blue by .on-blue); nothing is restyled here. */

.step .auto-chip{
  --ac-bg:rgba(30,42,36,.17);--ac-bg-h:rgba(30,42,36,.25);--ac-bg-a:rgba(30,42,36,.32);
  --ac-fg:var(--on-teal);--ac-dot:var(--ink);--ac-ic:var(--mint);
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:.5em;
  padding:.3em .95em .3em .3em;border:0;border-radius:999px;
  background:var(--ac-bg);color:var(--ac-fg);
  font:800 clamp(1.05rem,1.35vw,2rem)/1 var(--font-body);letter-spacing:.005em;white-space:nowrap;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .2s,scale .34s var(--spring-press);
}
/* one colour recipe per band: the chip's tint, its word, the circle (the band's contrast colour) and the drawing cut out of it (the band's own colour) */
.step.on-blue .auto-chip{--ac-bg:rgba(20,36,92,.4);--ac-bg-h:rgba(20,36,92,.5);--ac-bg-a:rgba(20,36,92,.58);--ac-fg:var(--paper);--ac-dot:var(--paper);--ac-ic:var(--blue)}
.step.on-pink .auto-chip{--ac-bg:rgba(30,42,36,.15);--ac-bg-h:rgba(30,42,36,.23);--ac-bg-a:rgba(30,42,36,.3);--ac-fg:var(--on-teal);--ac-dot:var(--ink);--ac-ic:var(--pink)}
.step.on-mint .auto-chip{--ac-bg:rgba(30,42,36,.17);--ac-bg-h:rgba(30,42,36,.25);--ac-bg-a:rgba(30,42,36,.32);--ac-fg:var(--ink);--ac-dot:var(--ink);--ac-ic:var(--mint)}
.step.on-teal .auto-chip{--ac-bg:rgba(30,42,36,.12);--ac-bg-h:rgba(30,42,36,.2);--ac-bg-a:rgba(30,42,36,.27);--ac-fg:var(--on-teal);--ac-dot:var(--ink);--ac-ic:var(--teal)}

/* a touch area of at least 44px tall, whatever the type size (the pill itself is smaller); when the pill is already taller the inset is 0 */
.step .auto-chip::after{content:"";position:absolute;inset:min(0px,calc((100% - 44px) / 2)) 0}

.step .auto-ic{flex:none;display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--ac-dot);color:var(--ac-ic)}
.step .auto-ic>span{grid-area:1/1;display:grid;place-items:center;transition:opacity .14s,scale .22s var(--spring-pop)}
.step .auto-ic svg{display:block;width:.92em;height:.92em;fill:currentColor;stroke:none}
.step .auto-ic svg.tri{translate:.002em 0}      /* the triangle is drawn from x 9.2 to 19.3 in a 24 box, so its middle of mass (a third in from the flat edge, 12.55) sits right of centre: a hair to the right of the circle's centre once it is pulled onto it (so the pointed end does not look heavy): measured 0.1% of the circle's width off, it was 5.5% off */
.step .auto-ic svg.line{fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.step .auto-tx{display:grid}
.step .auto-tx>span{grid-area:1/1;transition:opacity .14s,translate .2s ease-out}
/* the press: hidden until a hover or a focus asks for it */
.step .ai-a{opacity:0;scale:.55}
.step .at-a{opacity:0;translate:0 .24em}
@media (hover:hover){
  .step .auto-chip:is([data-view=playing],[data-view=paused]):not(.is-just):hover .ai-s{opacity:0;scale:.55}
  .step .auto-chip:is([data-view=playing],[data-view=paused]):not(.is-just):hover .ai-a{opacity:1;scale:1}
  .step .auto-chip:is([data-view=playing],[data-view=paused]):not(.is-just):hover .at-s{opacity:0;translate:0 -.24em}
  .step .auto-chip:is([data-view=playing],[data-view=paused]):not(.is-just):hover .at-a{opacity:1;translate:0 0}
}
.step .auto-chip:is([data-view=playing],[data-view=paused]):not(.is-just):focus-visible .ai-s{opacity:0;scale:.55}
.step .auto-chip:is([data-view=playing],[data-view=paused]):not(.is-just):focus-visible .ai-a{opacity:1;scale:1}
.step .auto-chip:is([data-view=playing],[data-view=paused]):not(.is-just):focus-visible .at-s{opacity:0;translate:0 -.24em}
.step .auto-chip:is([data-view=playing],[data-view=paused]):not(.is-just):focus-visible .at-a{opacity:1;translate:0 0}

/* playing: three bars that rise and fall, so the chip looks alive */
@keyframes auto-bar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.step .auto-chip .bars rect{transform-box:fill-box;transform-origin:50% 100%;animation:auto-bar .9s ease-in-out infinite}
.step .auto-chip .bars rect:nth-child(2){animation-delay:-.3s}
.step .auto-chip .bars rect:nth-child(3){animation-delay:-.6s}

/* hover (a mouse only) turns the tint up; a press sinks a little */
@media (hover:hover){.step .auto-chip:hover{background:var(--ac-bg-h)}}
.step .auto-chip:active{background:var(--ac-bg-a);scale:.96}

/* the face changes: the drawing pops in (a spring, about 200ms) and the word slides up into place; js/core.js adds .is-swap for a moment */
@keyframes auto-pop{from{scale:.35;rotate:-22deg}to{scale:1;rotate:0deg}}
@keyframes auto-in{from{opacity:0;translate:0 .24em}to{opacity:1;translate:0 0}}
.step .auto-chip.is-swap .auto-ic svg{animation:auto-pop .22s var(--spring-pop) both}
.step .auto-chip.is-swap .auto-tx{animation:auto-in .2s ease-out both}

/* the chip comes in with its title: it is the title's next sibling, and a .pop title is stuck on (gets .in) when it is first seen, so the chip never shows alone while the
   title is still waiting to pop in. A keyboard visitor who lands on it before that sees it at once. */
.js .step-title.pop:not(.in)+.auto-chip{opacity:0;translate:0 10px;pointer-events:none}
.js .step-title.pop:not(.in)+.auto-chip:focus-visible{opacity:1;translate:0 0}
.js .step-title.pop+.auto-chip{transition:opacity .35s ease-out .14s,translate .6s var(--spring-pop) .14s,background-color .2s,scale .34s var(--spring-press)}

/* phones and tablets: the stacked layout (the same breakpoints as the step chips in css/tour.css) has smaller words, and the chip rises in with them once the
   step's stage has pinned (js/core.js adds .words-in), so it is neither seen nor clickable while the step is still sliding in from below */
@media (max-width:999.98px) and (min-height:521px),(max-width:699.98px) and (max-aspect-ratio:11/10){
  .step .auto-chip{font-size:clamp(.85rem,2.9vw,1.1rem)}
  .js .tour .step:not(.words-in) .auto-chip{opacity:0;translate:0 18px;pointer-events:none}
  .js .tour .step .auto-chip{transition:opacity .4s ease-out,translate .55s var(--spring-pop),background-color .2s,scale .34s var(--spring-press)}
  .js .tour .step.words-in .auto-chip{transition-delay:.24s,.24s,0s,0s}
}
/* a phone on its side */
@media (max-height:520px) and (min-width:560px) and (max-width:1199.98px){
  .step .auto-chip{font-size:.9rem}
}

/* a phone has no chip: it took too much room. Nothing is lost, because every step restarts fresh whenever it comes back into view (js/core.js), and css/tour.css gives
   the row back (--chiprow: 0). A phone on its side (wider than 700px) and a tablet keep the chip. */
@media (max-width:700px) and (min-height:521px),(max-width:700px) and (max-aspect-ratio:11/10){
  .step .auto-chip{display:none!important}
}

/* nothing plays by itself under reduced motion (the demos show a finished still state), so there is nothing to pause or play: the chip is not shown */
@media (prefers-reduced-motion:reduce){
  .step .auto-chip{display:none!important}
}
@media print{
  .step .auto-chip{display:none!important}
}